Merge branch 'master' of http://git.fmode.cn:3000/nkkj/yss-project

src/app/pages/designer/project-detail/debug-styles.scss

@@ -576,6 +576,724 @@
   100% { transform: rotate(360deg); }
 }
 
+/* 方案展示相关样式 */
+.proposal-confirm-card {
+  /* 固定高度和滚动条 */
+  max-height: 600px; /* 固定显示区域高度 */
+  overflow-y: auto; /* 垂直滚动条 */
+  
+  /* 自定义滚动条样式 */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+    
+    &:hover {
+      background: #a8a8a8;
+    }
+  }
+  .analysis-progress {
+    padding: 24px;
+    background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+    border-radius: 12px;
+    margin-bottom: 20px;
+    border: 1px solid #e1e8ff;
+
+    .progress-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      h4 {
+        margin: 0;
+        color: #2c3e50;
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      .progress-percentage {
+        font-size: 18px;
+        font-weight: 700;
+        color: #3498db;
+      }
+    }
+
+    .progress-bar {
+      width: 100%;
+      height: 8px;
+      background: #e9ecef;
+      border-radius: 4px;
+      overflow: hidden;
+      margin-bottom: 12px;
+
+      .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #3498db 0%, #2ecc71 100%);
+        border-radius: 4px;
+        transition: width 0.3s ease;
+      }
+    }
+
+    .progress-description {
+      margin: 0;
+      color: #6c757d;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+
+  .proposal-display {
+    .proposal-overview {
+      background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+      border-radius: 12px;
+      padding: 24px;
+      margin-bottom: 24px;
+      border: 1px solid #e9ecef;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+      .overview-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 20px;
+
+        h3 {
+          margin: 0;
+          color: #2c3e50;
+          font-size: 20px;
+          font-weight: 700;
+        }
+
+        .proposal-meta {
+          display: flex;
+          gap: 12px;
+          align-items: center;
+
+          .version {
+            background: #e3f2fd;
+            color: #1976d2;
+            padding: 4px 12px;
+            border-radius: 16px;
+            font-size: 12px;
+            font-weight: 600;
+          }
+
+          .feasibility-score {
+            background: #e8f5e8;
+            color: #2e7d32;
+            padding: 4px 12px;
+            border-radius: 16px;
+            font-size: 12px;
+            font-weight: 600;
+          }
+        }
+      }
+
+      .quick-summary {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 16px;
+
+        .summary-item {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+
+          .label {
+            font-size: 12px;
+            color: #6c757d;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+          }
+
+          .value {
+            font-size: 14px;
+            color: #2c3e50;
+            font-weight: 500;
+            line-height: 1.4;
+          }
+        }
+      }
+    }
+
+    .proposal-details {
+      .detail-section {
+        background: #fff;
+        border-radius: 12px;
+        padding: 24px;
+        margin-bottom: 20px;
+        border: 1px solid #e9ecef;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+
+        .section-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 20px;
+          padding-bottom: 12px;
+          border-bottom: 2px solid #f8f9fa;
+
+          h4 {
+            margin: 0;
+            color: #2c3e50;
+            font-size: 18px;
+            font-weight: 700;
+          }
+
+          .section-count,
+          .style-name,
+          .harmony-type,
+          .total-area,
+          .total-budget {
+            background: #f8f9fa;
+            color: #495057;
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 13px;
+            font-weight: 600;
+          }
+        }
+
+        // 材质网格样式
+        .materials-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+          gap: 16px;
+
+          .material-card {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 16px;
+            border-left: 4px solid #dee2e6;
+            transition: all 0.3s ease;
+
+            &.primary {
+              border-left-color: #28a745;
+              background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
+            }
+
+            &.secondary {
+              border-left-color: #ffc107;
+              background: linear-gradient(135deg, #fffdf8 0%, #fff3cd 100%);
+            }
+
+            &:hover {
+              transform: translateY(-2px);
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            }
+
+            .material-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 12px;
+
+              h5 {
+                margin: 0;
+                color: #2c3e50;
+                font-size: 16px;
+                font-weight: 600;
+              }
+
+              .usage-percentage {
+                background: #007bff;
+                color: white;
+                padding: 4px 8px;
+                border-radius: 12px;
+                font-size: 12px;
+                font-weight: 700;
+              }
+            }
+
+            .material-specs {
+              margin-bottom: 12px;
+
+              .spec-item {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 6px;
+
+                .spec-label {
+                  color: #6c757d;
+                  font-size: 13px;
+                  font-weight: 500;
+                }
+
+                .spec-value {
+                  color: #2c3e50;
+                  font-size: 13px;
+                  font-weight: 600;
+                }
+              }
+            }
+
+            .material-properties {
+              display: flex;
+              gap: 8px;
+              flex-wrap: wrap;
+
+              .property-tag {
+                background: #e9ecef;
+                color: #495057;
+                padding: 4px 8px;
+                border-radius: 12px;
+                font-size: 11px;
+                font-weight: 500;
+              }
+            }
+          }
+        }
+
+        // 设计风格样式
+        .style-elements {
+          margin-bottom: 20px;
+
+          .style-element {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 16px;
+            margin-bottom: 12px;
+
+            .element-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 8px;
+
+              .element-name {
+                font-weight: 600;
+                color: #2c3e50;
+                font-size: 14px;
+              }
+
+              .influence-score {
+                background: #007bff;
+                color: white;
+                padding: 2px 8px;
+                border-radius: 10px;
+                font-size: 12px;
+                font-weight: 600;
+              }
+            }
+
+            .element-description {
+              color: #6c757d;
+              font-size: 13px;
+              margin-bottom: 8px;
+              line-height: 1.4;
+            }
+
+            .influence-bar {
+              width: 100%;
+              height: 4px;
+              background: #e9ecef;
+              border-radius: 2px;
+              overflow: hidden;
+
+              .influence-fill {
+                height: 100%;
+                background: linear-gradient(90deg, #007bff 0%, #28a745 100%);
+                border-radius: 2px;
+                transition: width 0.3s ease;
+              }
+            }
+          }
+        }
+
+        .style-characteristics {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+          gap: 12px;
+
+          .characteristic-item {
+            background: #f8f9fa;
+            padding: 12px;
+            border-radius: 8px;
+            text-align: center;
+            border: 2px solid transparent;
+
+            &.high {
+              border-color: #28a745;
+              background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
+            }
+
+            &.medium {
+              border-color: #ffc107;
+              background: linear-gradient(135deg, #fffdf8 0%, #fff3cd 100%);
+            }
+
+            .char-feature {
+              display: block;
+              font-size: 12px;
+              color: #6c757d;
+              font-weight: 600;
+              margin-bottom: 4px;
+            }
+
+            .char-value {
+              display: block;
+              font-size: 14px;
+              color: #2c3e50;
+              font-weight: 700;
+            }
+          }
+        }
+
+        // 色彩方案样式
+        .color-palette {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 16px;
+          margin-bottom: 20px;
+
+          .color-item {
+            background: #fff;
+            border-radius: 8px;
+            padding: 16px;
+            border: 1px solid #e9ecef;
+            transition: all 0.3s ease;
+
+            &.dominant {
+              border-color: #007bff;
+              box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+            }
+
+            &.accent {
+              border-color: #28a745;
+              box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
+            }
+
+            &:hover {
+              transform: translateY(-2px);
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            }
+
+            .color-swatch {
+              width: 100%;
+              height: 60px;
+              border-radius: 6px;
+              margin-bottom: 12px;
+              border: 1px solid rgba(0, 0, 0, 0.1);
+            }
+
+            .color-info {
+              text-align: center;
+              margin-bottom: 8px;
+
+              .color-name {
+                font-weight: 600;
+                color: #2c3e50;
+                font-size: 14px;
+                margin-bottom: 4px;
+              }
+
+              .color-percentage {
+                font-size: 18px;
+                font-weight: 700;
+                color: #007bff;
+                margin-bottom: 4px;
+              }
+
+              .color-role {
+                font-size: 11px;
+                color: #6c757d;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+              }
+            }
+
+            .color-codes {
+              display: flex;
+              flex-direction: column;
+              gap: 2px;
+
+              .hex-code,
+              .rgb-code {
+                font-family: 'Courier New', monospace;
+                font-size: 11px;
+                color: #6c757d;
+                text-align: center;
+              }
+            }
+          }
+        }
+
+        .color-psychology {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 16px;
+
+          .psychology-item {
+            background: #f8f9fa;
+            padding: 12px;
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+
+            .label {
+              font-size: 12px;
+              color: #6c757d;
+              font-weight: 600;
+            }
+
+            .value {
+              font-size: 14px;
+              color: #2c3e50;
+              font-weight: 600;
+            }
+          }
+        }
+
+        // 空间布局样式
+        .space-dimensions {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+          gap: 12px;
+          margin-bottom: 20px;
+
+          .dimension-item {
+            background: #f8f9fa;
+            padding: 12px;
+            border-radius: 8px;
+            text-align: center;
+
+            .dim-label {
+              display: block;
+              font-size: 12px;
+              color: #6c757d;
+              font-weight: 600;
+              margin-bottom: 4px;
+            }
+
+            .dim-value {
+              display: block;
+              font-size: 16px;
+              color: #2c3e50;
+              font-weight: 700;
+            }
+          }
+        }
+
+        .functional-zones {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+          gap: 16px;
+
+          .zone-card {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 16px;
+            border-left: 4px solid #007bff;
+
+            .zone-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 12px;
+
+              h5 {
+                margin: 0;
+                color: #2c3e50;
+                font-size: 16px;
+                font-weight: 600;
+              }
+
+              .zone-stats {
+                display: flex;
+                gap: 8px;
+
+                .zone-area {
+                  background: #007bff;
+                  color: white;
+                  padding: 4px 8px;
+                  border-radius: 12px;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+
+                .zone-percentage {
+                  background: #28a745;
+                  color: white;
+                  padding: 4px 8px;
+                  border-radius: 12px;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+              }
+            }
+
+            .zone-requirements,
+            .zone-furniture {
+              margin-bottom: 12px;
+
+              .requirements-label,
+              .furniture-label {
+                font-size: 12px;
+                color: #6c757d;
+                font-weight: 600;
+                margin-bottom: 6px;
+              }
+
+              .requirements-tags {
+                display: flex;
+                gap: 6px;
+                flex-wrap: wrap;
+
+                .requirement-tag {
+                  background: #e9ecef;
+                  color: #495057;
+                  padding: 4px 8px;
+                  border-radius: 12px;
+                  font-size: 11px;
+                  font-weight: 500;
+                }
+              }
+
+              .furniture-list {
+                color: #2c3e50;
+                font-size: 13px;
+                line-height: 1.4;
+              }
+            }
+          }
+        }
+
+        // 预算与时间线样式
+        .budget-breakdown {
+          margin-bottom: 20px;
+
+          .budget-item {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 16px;
+            margin-bottom: 12px;
+            display: grid;
+            grid-template-columns: 1fr auto auto;
+            gap: 16px;
+            align-items: center;
+
+            .budget-category {
+              font-weight: 600;
+              color: #2c3e50;
+              font-size: 14px;
+            }
+
+            .budget-amount {
+              font-weight: 700;
+              color: #28a745;
+              font-size: 16px;
+            }
+
+            .budget-percentage {
+              background: #007bff;
+              color: white;
+              padding: 4px 8px;
+              border-radius: 12px;
+              font-size: 12px;
+              font-weight: 600;
+            }
+
+            .budget-bar {
+              grid-column: 1 / -1;
+              width: 100%;
+              height: 6px;
+              background: #e9ecef;
+              border-radius: 3px;
+              overflow: hidden;
+              margin-top: 8px;
+
+              .budget-fill {
+                height: 100%;
+                background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
+                border-radius: 3px;
+                transition: width 0.3s ease;
+              }
+            }
+          }
+        }
+
+        .timeline {
+          display: flex;
+          gap: 12px;
+          flex-wrap: wrap;
+
+          .timeline-item {
+            background: #f8f9fa;
+            padding: 12px 16px;
+            border-radius: 8px;
+            text-align: center;
+            flex: 1;
+            min-width: 120px;
+
+            .phase-name {
+              font-size: 13px;
+              color: #2c3e50;
+              font-weight: 600;
+              margin-bottom: 4px;
+            }
+
+            .phase-duration {
+              font-size: 14px;
+              color: #007bff;
+              font-weight: 700;
+            }
+          }
+        }
+      }
+    }
+
+    .proposal-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      padding: 20px 0;
+
+      .confirm-btn,
+      .adjust-btn {
+        padding: 12px 24px;
+        border-radius: 8px;
+        font-weight: 600;
+        font-size: 14px;
+        border: none;
+        cursor: pointer;
+        transition: all 0.3s ease;
+
+        &.primary {
+          background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+          color: white;
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
+          }
+        }
+
+        &.secondary {
+          background: #f8f9fa;
+          color: #6c757d;
+          border: 1px solid #dee2e6;
+
+          &:hover {
+            background: #e9ecef;
+            color: #495057;
+          }
+        }
+      }
+    }
+  }
+}
+
 /* 活动阶段卡片：浅红底色突显（更显眼版） */
 .delivery-col.active,
 .vertical-stage-block.active {

src/app/pages/designer/project-detail/project-detail.html

@@ -267,8 +267,250 @@
                 </div>
               </div>
               
-              <!-- 需求信息展示区域 -->
-              @if (areRequiredStagesCompleted()) {
+              <!-- 素材解析状态 -->
+              @if (isAnalyzing) {
+                <div class="analysis-progress">
+                  <div class="progress-header">
+                    <h4>正在解析素材...</h4>
+                    <span class="progress-percentage">{{ analysisProgress.toFixed(0) }}%</span>
+                  </div>
+                  <div class="progress-bar">
+                    <div class="progress-fill" [style.width.%]="analysisProgress"></div>
+                  </div>
+                  <p class="progress-description">AI正在分析您的需求，生成专属设计方案</p>
+                </div>
+              }
+              
+              <!-- 方案展示区域 -->
+              @if (proposalAnalysis && !isAnalyzing) {
+                <div class="proposal-display">
+                  <!-- 方案概览 -->
+                  <div class="proposal-overview">
+                    <div class="overview-header">
+                      <h3>{{ proposalAnalysis.name }}</h3>
+                      <div class="proposal-meta">
+                        <span class="version">{{ proposalAnalysis.version }}</span>
+                        <span class="feasibility-score">可行性: {{ proposalAnalysis.feasibility.overall }}%</span>
+                      </div>
+                    </div>
+                    
+                    <!-- 快速摘要 -->
+                    <div class="quick-summary">
+                      <div class="summary-item">
+                        <span class="label">设计风格</span>
+                        <span class="value">{{ getStyleSummary() }}</span>
+                      </div>
+                      <div class="summary-item">
+                        <span class="label">色彩方案</span>
+                        <span class="value">{{ getColorSummary() }}</span>
+                      </div>
+                      <div class="summary-item">
+                        <span class="label">空间效率</span>
+                        <span class="value">{{ getSpaceEfficiency() }}%</span>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <!-- 详细方案内容 -->
+                  <div class="proposal-details">
+                    <!-- 材质规格与分类 -->
+                    <div class="detail-section">
+                      <div class="section-header">
+                        <h4>材质规格与分类</h4>
+                        <span class="section-count">{{ proposalAnalysis.materials.length }} 类材质</span>
+                      </div>
+                      <div class="materials-grid">
+                        @for (material of proposalAnalysis.materials; track material.category) {
+                          <div class="material-card" [class]="material.usage.priority">
+                            <div class="material-header">
+                              <h5>{{ material.category }}</h5>
+                              <span class="usage-percentage">{{ material.usage.percentage }}%</span>
+                            </div>
+                            <div class="material-specs">
+                              <div class="spec-item">
+                                <span class="spec-label">类型</span>
+                                <span class="spec-value">{{ material.specifications.type }}</span>
+                              </div>
+                              <div class="spec-item">
+                                <span class="spec-label">等级</span>
+                                <span class="spec-value">{{ material.specifications.grade }}</span>
+                              </div>
+                              <div class="spec-item">
+                                <span class="spec-label">应用区域</span>
+                                <span class="spec-value">{{ material.usage.area }}</span>
+                              </div>
+                            </div>
+                            <div class="material-properties">
+                              <span class="property-tag">{{ material.properties.texture }}</span>
+                              <span class="property-tag">{{ material.properties.color }}</span>
+                            </div>
+                          </div>
+                        }
+                      </div>
+                    </div>
+                    
+                    <!-- 设计风格特征 -->
+                    <div class="detail-section">
+                      <div class="section-header">
+                        <h4>设计风格特征</h4>
+                        <span class="style-name">{{ proposalAnalysis.designStyle.primaryStyle }}</span>
+                      </div>
+                      <div class="style-elements">
+                        @for (element of proposalAnalysis.designStyle.styleElements; track element.element) {
+                          <div class="style-element">
+                            <div class="element-header">
+                              <span class="element-name">{{ element.element }}</span>
+                              <span class="influence-score">{{ element.influence }}%</span>
+                            </div>
+                            <div class="element-description">{{ element.description }}</div>
+                            <div class="influence-bar">
+                              <div class="influence-fill" [style.width.%]="element.influence"></div>
+                            </div>
+                          </div>
+                        }
+                      </div>
+                      <div class="style-characteristics">
+                        @for (char of proposalAnalysis.designStyle.characteristics; track char.feature) {
+                          <div class="characteristic-item" [class]="char.importance">
+                            <span class="char-feature">{{ char.feature }}</span>
+                            <span class="char-value">{{ char.value }}</span>
+                          </div>
+                        }
+                      </div>
+                    </div>
+                    
+                    <!-- 色彩搭配方案及占比分析 -->
+                    <div class="detail-section">
+                      <div class="section-header">
+                        <h4>色彩搭配方案及占比分析</h4>
+                        <span class="harmony-type">{{ proposalAnalysis.colorScheme.harmony.type }}</span>
+                      </div>
+                      <div class="color-palette">
+                        @for (color of proposalAnalysis.colorScheme.palette; track color.hex) {
+                          <div class="color-item" [class]="color.role">
+                            <div class="color-swatch" [style.background-color]="color.hex"></div>
+                            <div class="color-info">
+                              <div class="color-name">{{ color.color }}</div>
+                              <div class="color-percentage">{{ color.percentage }}%</div>
+                              <div class="color-role">{{ color.role }}</div>
+                            </div>
+                            <div class="color-codes">
+                              <span class="hex-code">{{ color.hex }}</span>
+                              <span class="rgb-code">RGB({{ color.rgb }})</span>
+                            </div>
+                          </div>
+                        }
+                      </div>
+                      <div class="color-psychology">
+                        <div class="psychology-item">
+                          <span class="label">氛围营造</span>
+                          <span class="value">{{ proposalAnalysis.colorScheme.psychology.mood }}</span>
+                        </div>
+                        <div class="psychology-item">
+                          <span class="label">空间感受</span>
+                          <span class="value">{{ proposalAnalysis.colorScheme.psychology.atmosphere }}</span>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <!-- 空间尺寸数据及功能分区 -->
+                    <div class="detail-section">
+                      <div class="section-header">
+                        <h4>空间尺寸数据及功能分区</h4>
+                        <span class="total-area">总面积 {{ proposalAnalysis.spaceLayout.dimensions.area }}㎡</span>
+                      </div>
+                      <div class="space-dimensions">
+                        <div class="dimension-item">
+                          <span class="dim-label">长度</span>
+                          <span class="dim-value">{{ proposalAnalysis.spaceLayout.dimensions.length }}m</span>
+                        </div>
+                        <div class="dimension-item">
+                          <span class="dim-label">宽度</span>
+                          <span class="dim-value">{{ proposalAnalysis.spaceLayout.dimensions.width }}m</span>
+                        </div>
+                        <div class="dimension-item">
+                          <span class="dim-label">层高</span>
+                          <span class="dim-value">{{ proposalAnalysis.spaceLayout.dimensions.height }}m</span>
+                        </div>
+                        <div class="dimension-item">
+                          <span class="dim-label">体积</span>
+                          <span class="dim-value">{{ proposalAnalysis.spaceLayout.dimensions.volume }}m³</span>
+                        </div>
+                      </div>
+                      <div class="functional-zones">
+                        @for (zone of proposalAnalysis.spaceLayout.functionalZones; track zone.zone) {
+                          <div class="zone-card">
+                            <div class="zone-header">
+                              <h5>{{ zone.zone }}</h5>
+                              <div class="zone-stats">
+                                <span class="zone-area">{{ zone.area }}㎡</span>
+                                <span class="zone-percentage">{{ zone.percentage }}%</span>
+                              </div>
+                            </div>
+                            <div class="zone-requirements">
+                              <div class="requirements-label">功能需求</div>
+                              <div class="requirements-tags">
+                                @for (req of zone.requirements; track req) {
+                                  <span class="requirement-tag">{{ req }}</span>
+                                }
+                              </div>
+                            </div>
+                            <div class="zone-furniture">
+                              <div class="furniture-label">家具配置</div>
+                              <div class="furniture-list">
+                                @for (furniture of zone.furniture; track furniture; let isLast = $last) {
+                                  {{ furniture }}@if (!isLast) {、}
+                                }
+                              </div>
+                            </div>
+                          </div>
+                        }
+                      </div>
+                    </div>
+                    
+                    <!-- 预算与时间线 -->
+                    <div class="detail-section">
+                      <div class="section-header">
+                        <h4>预算与时间线</h4>
+                        <span class="total-budget">总预算 ¥{{ proposalAnalysis.budget.total.toLocaleString() }}</span>
+                      </div>
+                      <div class="budget-breakdown">
+                        @for (item of proposalAnalysis.budget.breakdown; track item.category) {
+                          <div class="budget-item">
+                            <div class="budget-category">{{ item.category }}</div>
+                            <div class="budget-amount">¥{{ item.amount.toLocaleString() }}</div>
+                            <div class="budget-percentage">{{ item.percentage }}%</div>
+                            <div class="budget-bar">
+                              <div class="budget-fill" [style.width.%]="item.percentage"></div>
+                            </div>
+                          </div>
+                        }
+                      </div>
+                      <div class="timeline">
+                        @for (phase of proposalAnalysis.timeline; track phase.phase) {
+                          <div class="timeline-item">
+                            <div class="phase-name">{{ phase.phase }}</div>
+                            <div class="phase-duration">{{ phase.duration }}天</div>
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <!-- 方案操作按钮 -->
+                  <div class="proposal-actions">
+                    <button class="confirm-btn primary" (click)="confirmProposal()">
+                      确认此方案
+                    </button>
+                    <button class="adjust-btn secondary" (click)="startMaterialAnalysis()">
+                      重新分析
+                    </button>
+                  </div>
+                </div>
+              }
+              
+              <!-- 需求信息展示区域（原有内容，当没有方案分析时显示） -->
+              @if (areRequiredStagesCompleted() && !proposalAnalysis && !isAnalyzing) {
                 <div class="info-grid">
                   <!-- 色调信息 -->
                   @if (requirementKeyInfo.colorAtmosphere.description) {
@@ -347,13 +589,13 @@
                   }
                 </div>
                 
-                <!-- 确认方案按钮 -->
+                <!-- 开始分析按钮 -->
                 <div class="proposal-actions">
-                  <button class="confirm-btn" (click)="confirmProposal()">
-                    确认方案
+                  <button class="confirm-btn" (click)="startMaterialAnalysis()">
+                    开始素材解析
                   </button>
                 </div>
-              } @else {
+              } @else if (!areRequiredStagesCompleted()) {
                 <!-- 等待状态 -->
                 <div class="waiting-state">
                   <div class="waiting-content">

src/app/pages/designer/project-detail/project-detail.ts

@@ -59,6 +59,131 @@ interface TimelineEvent {
 // 新增：四大板块键类型（顶层声明，供组件与模板共同使用）
 type SectionKey = 'order' | 'requirements' | 'delivery' | 'aftercare';
 
+// 素材解析后的方案数据结构
+interface MaterialAnalysis {
+  category: string;
+  specifications: {
+    type: string;
+    grade: string;
+    thickness?: string;
+    finish?: string;
+    durability: string;
+  };
+  usage: {
+    area: string;
+    percentage: number;
+    priority: 'primary' | 'secondary' | 'accent';
+  };
+  properties: {
+    texture: string;
+    color: string;
+    maintenance: string;
+  };
+}
+
+interface DesignStyleAnalysis {
+  primaryStyle: string;
+  styleElements: {
+    element: string;
+    description: string;
+    influence: number; // 影响程度 0-100
+  }[];
+  characteristics: {
+    feature: string;
+    value: string;
+    importance: 'high' | 'medium' | 'low';
+  }[];
+  compatibility: {
+    withMaterials: string[];
+    withColors: string[];
+    score: number; // 兼容性评分 0-100
+  };
+}
+
+interface ColorSchemeAnalysis {
+  palette: {
+    color: string;
+    hex: string;
+    rgb: string;
+    percentage: number;
+    role: 'dominant' | 'secondary' | 'accent' | 'neutral';
+  }[];
+  harmony: {
+    type: string; // 如：互补色、类似色、三角色等
+    temperature: 'warm' | 'cool' | 'neutral';
+    contrast: number; // 对比度 0-100
+  };
+  psychology: {
+    mood: string;
+    atmosphere: string;
+    suitability: string[];
+  };
+}
+
+interface SpaceAnalysis {
+  dimensions: {
+    length: number;
+    width: number;
+    height: number;
+    area: number;
+    volume: number;
+  };
+  functionalZones: {
+    zone: string;
+    area: number;
+    percentage: number;
+    requirements: string[];
+    furniture: string[];
+  }[];
+  circulation: {
+    mainPaths: string[];
+    pathWidth: number;
+    efficiency: number; // 动线效率 0-100
+  };
+  lighting: {
+    natural: {
+      direction: string[];
+      intensity: string;
+      duration: string;
+    };
+    artificial: {
+      zones: string[];
+      requirements: string[];
+    };
+  };
+}
+
+interface ProposalAnalysis {
+  id: string;
+  name: string;
+  version: string;
+  createdAt: Date;
+  status: 'analyzing' | 'completed' | 'approved' | 'rejected';
+  materials: MaterialAnalysis[];
+  designStyle: DesignStyleAnalysis;
+  colorScheme: ColorSchemeAnalysis;
+  spaceLayout: SpaceAnalysis;
+  budget: {
+    total: number;
+    breakdown: {
+      category: string;
+      amount: number;
+      percentage: number;
+    }[];
+  };
+  timeline: {
+    phase: string;
+    duration: number;
+    dependencies: string[];
+  }[];
+  feasibility: {
+    technical: number; // 技术可行性 0-100
+    budget: number; // 预算可行性 0-100
+    timeline: number; // 时间可行性 0-100
+    overall: number; // 综合可行性 0-100
+  };
+}
+
 @Component({
   selector: 'app-project-detail',
   standalone: true,
@@ -92,6 +217,11 @@ export class ProjectDetail implements OnInit, OnDestroy {
   // 客户信息卡片展开/收起状态
   isCustomerInfoExpanded: boolean = false;
   
+  // 新增：方案分析数据
+  proposalAnalysis: ProposalAnalysis | null = null;
+  isAnalyzing: boolean = false;
+  analysisProgress: number = 0;
+  
   // 新增：10阶段顺序（串式流程）
   stageOrder: ProjectStage[] = ['订单创建', '需求沟通', '方案确认', '建模', '软装', '渲染', '后期', '尾款结算', '客户评价', '投诉处理'];
   // 新增：阶段展开状态（默认全部收起，当前阶段在数据加载后自动展开）
@@ -2504,11 +2634,354 @@ export class ProjectDetail implements OnInit, OnDestroy {
     input.click();
   }
 
-  // 切换客户信息卡片展开/收起状态
+  // 切换客户信息卡片展开状态
   toggleCustomerInfo(): void {
     this.isCustomerInfoExpanded = !this.isCustomerInfoExpanded;
   }
 
+  // 新增：模拟素材解析方法
+  startMaterialAnalysis(): void {
+    this.isAnalyzing = true;
+    this.analysisProgress = 0;
+    
+    // 模拟分析进度
+    const progressInterval = setInterval(() => {
+      this.analysisProgress += Math.random() * 15;
+      if (this.analysisProgress >= 100) {
+        this.analysisProgress = 100;
+        clearInterval(progressInterval);
+        this.completeMaterialAnalysis();
+      }
+    }, 500);
+  }
+
+  // 完成素材解析，生成方案数据
+  private completeMaterialAnalysis(): void {
+    this.isAnalyzing = false;
+    
+    // 生成模拟的方案分析数据
+    this.proposalAnalysis = {
+      id: 'proposal-' + Date.now(),
+      name: '现代简约风格方案',
+      version: 'v1.0',
+      createdAt: new Date(),
+      status: 'completed',
+      materials: [
+        {
+          category: '地面材料',
+          specifications: {
+            type: '复合木地板',
+            grade: 'E0级',
+            thickness: '12mm',
+            finish: '哑光面',
+            durability: '家用33级'
+          },
+          usage: {
+            area: '客厅、卧室',
+            percentage: 65,
+            priority: 'primary'
+          },
+          properties: {
+            texture: '木纹理',
+            color: '浅橡木色',
+            maintenance: '日常清洁'
+          }
+        },
+        {
+          category: '墙面材料',
+          specifications: {
+            type: '乳胶漆',
+            grade: '净味抗甲醛',
+            finish: '丝光面',
+            durability: '15年'
+          },
+          usage: {
+            area: '全屋墙面',
+            percentage: 80,
+            priority: 'primary'
+          },
+          properties: {
+            texture: '平滑',
+            color: '暖白色',
+            maintenance: '可擦洗'
+          }
+        },
+        {
+          category: '软装面料',
+          specifications: {
+            type: '亚麻混纺',
+            grade: 'A级',
+            finish: '防污处理',
+            durability: '5-8年'
+          },
+          usage: {
+            area: '沙发、窗帘',
+            percentage: 25,
+            priority: 'secondary'
+          },
+          properties: {
+            texture: '自然纹理',
+            color: '米灰色系',
+            maintenance: '干洗'
+          }
+        }
+      ],
+      designStyle: {
+        primaryStyle: '现代简约',
+        styleElements: [
+          {
+            element: '线条设计',
+            description: '简洁流畅的直线条，避免繁复装饰',
+            influence: 85
+          },
+          {
+            element: '色彩搭配',
+            description: '以中性色为主，局部点缀暖色',
+            influence: 75
+          },
+          {
+            element: '材质选择',
+            description: '天然材质与现代工艺结合',
+            influence: 70
+          }
+        ],
+        characteristics: [
+          {
+            feature: '空间感',
+            value: '开放通透',
+            importance: 'high'
+          },
+          {
+            feature: '功能性',
+            value: '实用至上',
+            importance: 'high'
+          },
+          {
+            feature: '装饰性',
+            value: '简约精致',
+            importance: 'medium'
+          }
+        ],
+        compatibility: {
+          withMaterials: ['木材', '金属', '玻璃', '石材'],
+          withColors: ['白色', '灰色', '米色', '原木色'],
+          score: 92
+        }
+      },
+      colorScheme: {
+        palette: [
+          {
+            color: '暖白色',
+            hex: '#F8F6F0',
+            rgb: '248, 246, 240',
+            percentage: 45,
+            role: 'dominant'
+          },
+          {
+            color: '浅灰色',
+            hex: '#E5E5E5',
+            rgb: '229, 229, 229',
+            percentage: 30,
+            role: 'secondary'
+          },
+          {
+            color: '原木色',
+            hex: '#D4A574',
+            rgb: '212, 165, 116',
+            percentage: 20,
+            role: 'accent'
+          },
+          {
+            color: '深灰色',
+            hex: '#4A4A4A',
+            rgb: '74, 74, 74',
+            percentage: 5,
+            role: 'neutral'
+          }
+        ],
+        harmony: {
+          type: '类似色调和',
+          temperature: 'warm',
+          contrast: 65
+        },
+        psychology: {
+          mood: '宁静舒适',
+          atmosphere: '温馨自然',
+          suitability: ['居住', '办公', '休闲']
+        }
+      },
+      spaceLayout: {
+        dimensions: {
+          length: 12.5,
+          width: 8.2,
+          height: 2.8,
+          area: 102.5,
+          volume: 287
+        },
+        functionalZones: [
+          {
+            zone: '客厅区域',
+            area: 35.2,
+            percentage: 34.3,
+            requirements: ['会客', '娱乐', '休息'],
+            furniture: ['沙发', '茶几', '电视柜', '边几']
+          },
+          {
+            zone: '餐厅区域',
+            area: 18.5,
+            percentage: 18.0,
+            requirements: ['用餐', '储物'],
+            furniture: ['餐桌', '餐椅', '餐边柜']
+          },
+          {
+            zone: '厨房区域',
+            area: 12.8,
+            percentage: 12.5,
+            requirements: ['烹饪', '储存', '清洁'],
+            furniture: ['橱柜', '岛台', '吧台椅']
+          },
+          {
+            zone: '主卧区域',
+            area: 25.6,
+            percentage: 25.0,
+            requirements: ['睡眠', '储衣', '梳妆'],
+            furniture: ['床', '衣柜', '梳妆台', '床头柜']
+          },
+          {
+            zone: '次卧区域',
+            area: 10.4,
+            percentage: 10.2,
+            requirements: ['睡眠', '学习'],
+            furniture: ['床', '书桌', '衣柜']
+          }
+        ],
+        circulation: {
+          mainPaths: ['入户-客厅', '客厅-餐厅', '餐厅-厨房', '客厅-卧室'],
+          pathWidth: 1.2,
+          efficiency: 88
+        },
+        lighting: {
+          natural: {
+            direction: ['南向', '东向'],
+            intensity: '充足',
+            duration: '8-10小时'
+          },
+          artificial: {
+            zones: ['主照明', '局部照明', '装饰照明'],
+            requirements: ['无主灯设计', '分层控制', '调光调色']
+          }
+        }
+      },
+      budget: {
+        total: 285000,
+        breakdown: [
+          {
+            category: '基础装修',
+            amount: 142500,
+            percentage: 50
+          },
+          {
+            category: '主材采购',
+            amount: 85500,
+            percentage: 30
+          },
+          {
+            category: '软装配饰',
+            amount: 42750,
+            percentage: 15
+          },
+          {
+            category: '设计费用',
+            amount: 14250,
+            percentage: 5
+          }
+        ]
+      },
+      timeline: [
+        {
+          phase: '设计深化',
+          duration: 7,
+          dependencies: ['需求确认']
+        },
+        {
+          phase: '材料采购',
+          duration: 5,
+          dependencies: ['设计深化']
+        },
+        {
+          phase: '基础施工',
+          duration: 30,
+          dependencies: ['材料采购']
+        },
+        {
+          phase: '软装进场',
+          duration: 7,
+          dependencies: ['基础施工']
+        },
+        {
+          phase: '验收交付',
+          duration: 3,
+          dependencies: ['软装进场']
+        }
+      ],
+      feasibility: {
+        technical: 95,
+        budget: 88,
+        timeline: 92,
+        overall: 92
+      }
+    };
+  }
+
+  // 获取材质分类统计
+  getMaterialCategories(): { category: string; count: number; percentage: number }[] {
+    if (!this.proposalAnalysis) return [];
+    
+    const categories = this.proposalAnalysis.materials.reduce((acc, material) => {
+      acc[material.category] = (acc[material.category] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+    
+    const total = Object.values(categories).reduce((sum, count) => sum + count, 0);
+    
+    return Object.entries(categories).map(([category, count]) => ({
+      category,
+      count,
+      percentage: Math.round((count / total) * 100)
+    }));
+  }
+
+  // 获取设计风格特征摘要
+  getStyleSummary(): string {
+    if (!this.proposalAnalysis) return '';
+    
+    const style = this.proposalAnalysis.designStyle;
+    const topElements = style.styleElements
+      .sort((a, b) => b.influence - a.influence)
+      .slice(0, 2)
+      .map(el => el.element)
+      .join('、');
+    
+    return `${style.primaryStyle}风格，主要体现在${topElements}等方面`;
+  }
+
+  // 获取色彩方案摘要
+  getColorSummary(): string {
+    if (!this.proposalAnalysis) return '';
+    
+    const scheme = this.proposalAnalysis.colorScheme;
+    const dominantColor = scheme.palette.find(p => p.role === 'dominant')?.color || '';
+    const accentColor = scheme.palette.find(p => p.role === 'accent')?.color || '';
+    
+    return `以${dominantColor}为主调，${accentColor}作点缀，营造${scheme.psychology.mood}的氛围`;
+  }
+
+  // 获取空间效率评分
+  getSpaceEfficiency(): number {
+    if (!this.proposalAnalysis) return 0;
+    return this.proposalAnalysis.spaceLayout.circulation.efficiency;
+  }
+
   private handlePaymentProofUpload(file: File): void {
     // 显示上传进度
     const uploadingMessage = `正在上传支付凭证：${file.name}...`;