feat(requirements-confirm-card): 新增素材分析与分析汇总功能

- 在需求确认卡片中新增折叠按钮，优化素材分析信息展示，提升用户体验。
- 创建分析汇总标签页，集中展示所有素材的详细分析数据，采用卡片式布局，增强可视化效果。
- 更新样式以支持新功能，确保界面美观与功能性。
- 完善项目详情页面，整合分析数据与上传功能，提升交互逻辑。

此更新旨在提升素材分析的可用性和用户体验，确保用户能够高效地进行分析与决策。

docs/optimization-summary.md

@@ -0,0 +1,263 @@
+# 素材分析优化总结
+
+## 📅 更新时间
+2025-10-15
+
+---
+
+## ✅ 完成的优化
+
+### 1. 素材卡片空间优化
+
+**问题**：
+- 素材卡片中的详细分析占用太多空间
+- 分析内容展开后影响整体布局
+- 没有合理利用界面空间
+
+**解决方案**：
+- ✅ 添加**折叠/展开按钮**，默认只显示基础信息
+- ✅ 用户点击"查看详情"才展开完整分析
+- ✅ 展开时有平滑动画效果
+- ✅ 保留"全展示模式"快速展开所有素材
+
+**效果**：
+```
+默认视图：
+┌─────────────────────────┐
+│ 图片缩略图              │
+│ 20.jpg                  │
+│ 预览图片                │
+│                         │
+│ 色温: 3000K  主色: 3种 │
+│      [查看详情 ▼]       │
+└─────────────────────────┘
+
+点击后展开：
+┌─────────────────────────┐
+│ 图片缩略图              │
+│ 20.jpg                  │
+│ 预览图片                │
+│                         │
+│ 色温: 3000K  主色: 3种 │
+│      [收起详情 ▲]       │
+├─────────────────────────┤
+│ 🎨 色彩分析             │
+│   [色轮可视化组件]      │
+│   主色调、心理学标签    │
+├─────────────────────────┤
+│ 📐 形体分析             │
+│   复杂度、对称性数据    │
+├─────────────────────────┤
+│ 🪨 质感分析             │
+│   材质类型、光泽度      │
+├─────────────────────────┤
+│ 🖼️ 纹理分析            │
+│   纹理类型、重复性      │
+├─────────────────────────┤
+│ 💡 灯光分析             │
+│   光比、光占比          │
+└─────────────────────────┘
+```
+
+---
+
+### 2. 新增"分析汇总"标签页
+
+**功能**：
+- ✅ 在独立标签页中集中展示所有分析数据
+- ✅ 使用卡片式布局，空间利用更合理
+- ✅ 集成所有可视化组件（色轮、形体选择器、质感对比等）
+- ✅ 响应式网格布局，自动适应屏幕宽度
+
+**标签页结构**：
+```
+[素材解析] [分析汇总] [协作验证] [进度管理]
+            ↑ 新增
+```
+
+**布局优势**：
+- 每个素材一个大卡片
+- 卡片内按维度分成5个小卡片（色彩、形体、质感、纹理、灯光）
+- 网格自动布局，响应式设计
+- 数据更直观，对比更方便
+
+---
+
+### 3. 界面布局改进
+
+#### 素材解析标签页（左侧）
+- 上传素材区域
+- 素材列表（折叠式，节省空间）
+- 快速预览缩略图
+- 基础信息展示
+- 按需展开详细分析
+
+#### 分析汇总标签页（中间）
+- 所有素材的详细分析数据
+- 五维分析可视化组件
+- 卡片式布局，清晰直观
+- 支持导出HTML/JSON报告
+
+#### 协作验证标签页（右侧）
+- 保持原有功能不变
+- 可以引用分析汇总中的数据
+- 协作评论和验证流程
+
+---
+
+## 🎨 新增样式特性
+
+### 1. 折叠按钮动画
+```scss
+.toggle-detail-btn {
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: #667eea;
+    color: white;
+  }
+  
+  svg {
+    transform: rotate(180deg); // 展开时旋转
+  }
+}
+```
+
+### 2. 分析汇总卡片网格
+```scss
+.analysis-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+```
+
+### 3. 光比可视化条形图
+```html
+<div class="ratio-bar">
+  <div class="key-light" style="width: 75%">主光 75%</div>
+  <div class="fill-light" style="width: 25%">补光 25%</div>
+</div>
+```
+
+---
+
+## 📊 使用流程
+
+### 步骤 1：上传素材
+1. 进入"素材解析"标签页
+2. 上传参考图片
+3. 查看上传成功弹窗（屏幕居中）
+4. 弹窗关闭后，素材卡片显示基础信息
+
+### 步骤 2：查看详细分析（两种方式）
+
+**方式A：在素材卡片中展开**
+- 点击素材卡片上的"查看详情"按钮
+- 详细分析在卡片内展开
+- 适合单个素材的快速查看
+
+**方式B：切换到"分析汇总"标签页**
+- 点击顶部"分析汇总"标签
+- 所有素材的完整分析集中展示
+- 五维分析并排对比
+- 适合全面了解和对比
+
+### 步骤 3：使用分析数据
+- 在"协作验证"标签页中引用分析结果
+- 与团队成员讨论特定维度的数据
+- 导出报告（HTML/JSON）分享
+
+---
+
+## 🔧 技术实现
+
+### 组件结构
+```typescript
+// HTML模板新增部分
+<div class="analysis-summary">
+  <div class="color-info">
+    <span>色温: 3000K</span>
+    <span>主色: 3种</span>
+  </div>
+  <button (click)="toggleMaterialExpansion(material.id)">
+    {{ isMaterialExpanded(material.id) ? '收起详情' : '查看详情' }}
+  </button>
+</div>
+
+@if (isMaterialExpanded(material.id)) {
+  <div class="detailed-analysis">
+    <!-- 所有五维分析内容 -->
+  </div>
+}
+```
+
+### 数据流保持不变
+```
+素材上传 
+  → 自动分析 
+  → 生成完整数据 
+  → 素材卡片（折叠显示） 
+  → 分析汇总（完整展示）
+  → 协作验证（引用数据）
+```
+
+---
+
+## 💡 优势对比
+
+| 特性 | 优化前 | 优化后 |
+|------|--------|--------|
+| 素材卡片高度 | 展开时非常高，滚动困难 | 默认精简，按需展开 |
+| 空间利用 | 单列展示，浪费水平空间 | 网格布局，充分利用 |
+| 分析查看 | 所有分析混在一起 | 独立标签页，分类清晰 |
+| 对比功能 | 需要上下滚动对比 | 网格并排，直观对比 |
+| 用户体验 | 信息过载 | 分层展示，按需查看 |
+
+---
+
+## 🎯 下一步建议
+
+1. **测试新布局**：
+   - 上传多个素材测试折叠/展开效果
+   - 切换到"分析汇总"查看网格布局
+   - 尝试导出报告功能
+
+2. **反馈收集**：
+   - 折叠按钮是否足够明显
+   - 分析汇总的卡片大小是否合适
+   - 网格布局是否需要调整
+
+3. **潜在改进**：
+   - 添加"一键对比"功能
+   - 支持拖拽调整卡片顺序
+   - 增加筛选和搜索功能
+
+---
+
+## 📝 文件修改清单
+
+### 修改的文件
+- `requirements-confirm-card.html` - 添加折叠按钮和分析汇总标签页
+- `requirements-confirm-card.scss` - 新增样式（350+行）
+- `requirements-confirm-card.ts` - 完善模拟数据
+
+### 新增组件（已存在）
+- `color-wheel-visualizer` - 色轮可视化 ✅
+- `furniture-form-selector` - 形体选择器 ✅
+- `texture-comparison-visualizer` - 质感对比 ✅
+- `pattern-visualizer` - 纹理可视化 ✅
+
+### 保持不变
+- 所有原有功能
+- 数据流和接口
+- 导出功能
+- 协作验证
+- 进度管理
+
+---
+
+**状态**: ✅ 已完成并通过构建测试
+**版本**: v1.1
+**日期**: 2025-10-15
+

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

@@ -1805,6 +1805,7 @@
                       } @else if (stage === '需求沟通') {
                         <!-- 需求沟通阶段：确认需求组件 -->
                         <app-requirements-confirm-card 
+                          #requirementsCard
                           (requirementConfirmed)="syncRequirementKeyInfo($event)"
                           (progressUpdated)="syncRequirementKeyInfo($event)"
                           (stageCompleted)="onRequirementsStageCompleted($event)"
@@ -1814,91 +1815,147 @@
                         </app-requirements-confirm-card>
                         
                       } @else if (stage === '方案确认') {
-                        <!-- 需求映射面板（替换原色彩分析报告区域） -->
-                        <div class="requirement-mapping-panel" style="width:100%; display:flex; flex-direction:column; gap:14px;">
-                          <h3 class="panel-title" style="margin:0 0 16px 0; font-size:18px; font-weight:700; color:#495057;">🎯 需求映射</h3>
-                          
-                          <div class="mapping-progress" style="background:#f8f9fa; border-radius:8px; padding:16px; margin-bottom:12px;">
-                            @if (mappingUploadedFiles.length > 0) {
-                              <div class="progress-badge" style="display:inline-block; padding:6px 14px; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:white; border-radius:14px; font-size:12px; font-weight:600; margin-bottom:12px;">
-                                📸 已同步 {{ mappingUploadedFiles.length }} 张参考图片
-                              </div>
-                            }
-                            
-                            <div class="steps-list" style="display:flex; flex-direction:column; gap:10px;">
-                              <div class="step-item" style="display:flex; align-items:center; gap:10px;">
-                                <span class="step-index" style="width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e9ecef;color:#495057;font-size:12px;">1</span>
-                                <span class="step-title" style="flex:1;font-size:14px;">图片上传</span>
-                                <span class="step-status" style="font-size:12px;color:#666;">@if (mappingUploadedFiles.length > 0) { ✅ 完成 } @else { ⭕ 待上传 }</span>
-                              </div>
-                              <div class="step-item" style="display:flex; align-items:center; gap:10px;">
-                                <span class="step-index" style="width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e9ecef;color:#495057;font-size:12px;">2</span>
-                                <span class="step-title" style="flex:1;font-size:14px;">图片分析</span>
-                                <span class="step-status" style="font-size:12px;color:#666;">@if (mappingIsAnalyzing) { ⏳ 进行中 } @else if (mappingAnalysisResult) { ✅ 完成 } @else { ⭕ 待开始 }</span>
-                              </div>
-                              <div class="step-item" style="display:flex; align-items:center; gap:10px;">
-                                <span class="step-index" style="width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e9ecef;color:#495057;font-size:12px;">3</span>
-                                <span class="step-title" style="flex:1;font-size:14px;">需求映射</span>
-                                <span class="step-status" style="font-size:12px;color:#666;">@if (mappingIsGeneratingMapping) { ⏳ 生成中 } @else if (mappingRequirementMapping) { ✅ 完成 } @else { ⭕ 待生成 }</span>
-                              </div>
-                            </div>
+                        <!-- 分析数据汇总面板（原需求映射面板） -->
+                        <div class="analysis-summary-section" style="max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; padding: 20px;">
+                          <div class="section-header" style="margin-bottom: 24px; text-align: center;">
+                            <h4 style="font-size: 1.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 8px;">📊 分析数据汇总</h4>
+                            <p class="section-description" style="color: #6c757d; font-size: 0.95rem;">查看所有素材的详细分析数据及可视化</p>
                           </div>
-                          
-                          @if (mappingAnalysisResult) {
-                            <div class="analysis-summary-panel" style="background:#f8f9fa;border-radius:8px;padding:16px;">
-                              <h4 style="margin:0 0 12px 0; font-size:15px; font-weight:600; color:#333;">图片分析摘要</h4>
-                              <div class="param-items" style="display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;">
-                                <div class="param-row" style="font-size:13px;"><span style="color:#868e96;">主色</span><span style="font-weight:500;">{{ mappingAnalysisResult.primaryColor?.hex || '未知' }}</span></div>
-                                <div class="param-row" style="font-size:13px;"><span style="color:#868e96;">材质</span><span style="font-weight:500;">{{ getMaterialName(mappingAnalysisResult.materialType) }}</span></div>
-                                <div class="param-row" style="font-size:13px;"><span style="color:#868e96;">灯光</span><span style="font-weight:500;">{{ getLightingMoodName(mappingAnalysisResult.lightingMood) }}</span></div>
-                                <div class="param-row" style="font-size:13px;"><span style="color:#868e96;">对比</span><span style="font-weight:500;">{{ mappingAnalysisResult.contrast || '未知' }}</span></div>
-                              </div>
+
+                          @if (requirementsCard?.materials?.length === 0 || !requirementsCard?.materials) {
+                            <div class="empty-state" style="text-align: center; padding: 60px 20px;">
+                              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#dee2e6" stroke-width="1" style="margin-bottom: 20px;">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                <line x1="9" y1="9" x2="15" y2="9"></line>
+                                <line x1="9" y1="15" x2="15" y2="15"></line>
+                              </svg>
+                              <p style="color: #6c757d; font-size: 1rem; margin: 8px 0;">暂无素材分析数据</p>
+                              <p class="hint" style="color: #adb5bd; font-size: 0.9rem; margin: 8px 0;">请先在"需求沟通"阶段上传素材</p>
                             </div>
                           }
-                          
-                          @if (mappingRequirementMapping) {
-                            <div class="mapping-result-panel" style="background:#f8f9fa;border-radius:8px;padding:16px;">
-                              <h4 style="margin:0 0 12px 0; font-size:15px; font-weight:600; color:#333;">需求映射结果</h4>
-                              @if (mappingRequirementMapping.color) {
-                                <div class="param-section" style="margin-bottom:12px;">
-                                  <div class="section-title" style="font-weight:600;color:#555;margin-bottom:8px;font-size:13px;">色彩参数</div>
-                                  <div class="param-items" style="display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;">
-                                    <div class="param-row" style="font-size:13px;"><span style="color:#868e96;">和谐度</span><span style="font-weight:500;">{{ getColorHarmonyName(mappingRequirementMapping.color?.harmony) }}</span></div>
-                                    <div class="param-row" style="font-size:13px;"><span style="color:#868e96;">色温</span><span style="font-weight:500;">{{ getTemperatureName(mappingRequirementMapping.color?.temperature) }}</span></div>
+
+                          @for (material of requirementsCard?.materials || []; track material.id) {
+                            @if (material.analysis && material.type === 'image') {
+                              <div class="material-analysis-card" style="background: white; border-radius: 12px; padding: 20px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);">
+                                <div class="material-header" style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #f8f9fa;">
+                                  <img [src]="material.url" [alt]="material.name" class="material-thumbnail" style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
+                                  <div class="material-info" style="flex: 1;">
+                                    <h5 style="font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin-bottom: 4px;">{{ material.name }}</h5>
+                                    <span class="upload-time" style="font-size: 0.85rem; color: #6c757d;">{{ material.uploadTime | date: 'yyyy-MM-dd HH:mm' }}</span>
                                   </div>
                                 </div>
-                              }
-                              @if (mappingRequirementMapping.space) {
-                                <div class="param-section">
-                                  <div class="section-title" style="font-weight:600;color:#555;margin-bottom:8px;font-size:13px;">空间参数</div>
-                                  <div class="param-items" style="display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;">
-                                    <div class="param-row" style="font-size:13px;"><span style="color:#868e96;">布局</span><span style="font-weight:500;">{{ getLayoutTypeName(mappingRequirementMapping.space?.layoutType) }}</span></div>
-                                    <div class="param-row" style="font-size:13px;"><span style="color:#868e96;">流线</span><span style="font-weight:500;">{{ getFlowTypeName(mappingRequirementMapping.space?.flowType) }}</span></div>
-                                  </div>
+
+                                <div class="analysis-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
+                                  <!-- 色彩分析卡片 -->
+                                  @if (material.analysis.enhancedColorAnalysis) {
+                                    <div class="analysis-card color-card" style="background: #f8f9fa; padding: 14px; border-radius: 10px; border: 1px solid #e9ecef;">
+                                      <h6 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: #495057;">🎨 色彩分析</h6>
+                                      @if (material.analysis.mainColors && material.analysis.mainColors.length > 0) {
+                                        <app-color-wheel-visualizer
+                                          [colors]="material.analysis.mainColors"
+                                          [size]="140"
+                                          [showLabels]="true"
+                                          [showPercentages]="true">
+                                        </app-color-wheel-visualizer>
+                                      }
+                                      @if (material.analysis.enhancedColorAnalysis.colorPsychology) {
+                                        <div class="psychology-tags" style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;">
+                                          <span class="tag" style="padding: 4px 12px; background: white; border-radius: 20px; font-size: 0.8rem; color: #667eea; border: 1px solid #667eea;">{{ material.analysis.enhancedColorAnalysis.colorPsychology.primaryMood }}</span>
+                                          <span class="tag" style="padding: 4px 12px; background: white; border-radius: 20px; font-size: 0.8rem; color: #667eea; border: 1px solid #667eea;">{{ material.analysis.enhancedColorAnalysis.colorPsychology.atmosphere }}</span>
+                                        </div>
+                                      }
+                                    </div>
+                                  }
+
+                                  <!-- 形体分析卡片 -->
+                                  @if (material.analysis.formAnalysis) {
+                                    <div class="analysis-card form-card" style="background: #f8f9fa; padding: 14px; border-radius: 10px; border: 1px solid #e9ecef;">
+                                      <h6 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: #495057;">📐 形体分析</h6>
+                                      <app-furniture-form-selector
+                                        (formSelected)="requirementsCard?.onFormSelected($event)"
+                                        (formDeselected)="requirementsCard?.onFormDeselected($event)">
+                                      </app-furniture-form-selector>
+                                      @if (material.analysis.formAnalysis.overallAssessment) {
+                                        <div class="assessment-metrics" style="display: flex; gap: 12px; margin-top: 12px;">
+                                          <div class="metric" style="flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px; background: white; border-radius: 8px;">
+                                            <span style="font-size: 0.8rem; color: #6c757d;">复杂度</span>
+                                            <span class="value" style="font-size: 1.1rem; font-weight: 700; color: #667eea; margin-top: 4px;">{{ material.analysis.formAnalysis.overallAssessment.formComplexity }}%</span>
+                                          </div>
+                                          <div class="metric" style="flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px; background: white; border-radius: 8px;">
+                                            <span style="font-size: 0.8rem; color: #6c757d;">视觉冲击</span>
+                                            <span class="value" style="font-size: 1.1rem; font-weight: 700; color: #667eea; margin-top: 4px;">{{ material.analysis.formAnalysis.overallAssessment.visualImpact }}%</span>
+                                          </div>
+                                        </div>
+                                      }
+                                    </div>
+                                  }
+
+                                  <!-- 质感分析卡片 -->
+                                  @if (material.analysis.textureAnalysis) {
+                                    <div class="analysis-card texture-card" style="background: #f8f9fa; padding: 14px; border-radius: 10px; border: 1px solid #e9ecef;">
+                                      <h6 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: #495057;">🪨 质感分析</h6>
+                                      <app-texture-comparison-visualizer
+                                        [textures]="requirementsCard?.getTextureDataForMaterial(material) || []">
+                                      </app-texture-comparison-visualizer>
+                                      @if (material.analysis.textureAnalysis.materialClassification?.primaryMaterial) {
+                                        <div class="material-tag" style="text-align: center; padding: 8px 14px; background: white; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: #667eea; margin-top: 12px;">
+                                          {{ material.analysis.textureAnalysis.materialClassification?.primaryMaterial?.category }}
+                                          ({{ material.analysis.textureAnalysis.materialClassification?.primaryMaterial?.confidence }}%)
+                                        </div>
+                                      }
+                                    </div>
+                                  }
+
+                                  <!-- 纹理分析卡片 -->
+                                  @if (material.analysis.patternAnalysis) {
+                                    <div class="analysis-card pattern-card" style="background: #f8f9fa; padding: 14px; border-radius: 10px; border: 1px solid #e9ecef;">
+                                      <h6 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: #495057;">🖼️ 纹理分析</h6>
+                                      <app-pattern-visualizer>
+                                      </app-pattern-visualizer>
+                                      @if (material.analysis.patternAnalysis.patternRecognition) {
+                                        <div class="pattern-tags" style="display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;">
+                                          @for (pattern of material.analysis.patternAnalysis.patternRecognition.primaryPatterns; track pattern.type) {
+                                            <span class="tag" style="padding: 4px 10px; background: white; border-radius: 20px; font-size: 0.75rem; color: #667eea; border: 1px solid #667eea;">{{ pattern.type }} ({{ pattern.coverage }}%)</span>
+                                          }
+                                        </div>
+                                      }
+                                    </div>
+                                  }
+
+                                  <!-- 灯光分析卡片 -->
+                                  @if (material.analysis.lightingAnalysis) {
+                                    <div class="analysis-card lighting-card" style="background: #f8f9fa; padding: 14px; border-radius: 10px; border: 1px solid #e9ecef;">
+                                      <h6 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: #495057;">💡 灯光分析</h6>
+                                      @if (material.analysis.lightingAnalysis.lightingRatio) {
+                                        <div class="lighting-ratio-visual">
+                                          <div class="ratio-bar" style="display: flex; height: 34px; border-radius: 8px; overflow: hidden; margin-bottom: 10px;">
+                                            <div class="key-light" [style.width.%]="material.analysis.lightingAnalysis.lightingRatio.keyLightIntensity" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: 600;">
+                                              主光 {{ material.analysis.lightingAnalysis.lightingRatio.keyLightIntensity }}%
+                                            </div>
+                                            <div class="fill-light" [style.width.%]="material.analysis.lightingAnalysis.lightingRatio.fillLightIntensity" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: 600;">
+                                              补光 {{ material.analysis.lightingAnalysis.lightingRatio.fillLightIntensity }}%
+                                            </div>
+                                          </div>
+                                          <span class="ratio-quality" style="display: block; text-align: center; font-size: 0.85rem; color: #667eea; font-weight: 600;">{{ requirementsCard?.getRatioDescription(material.analysis.lightingAnalysis.lightingRatio.description) }}</span>
+                                        </div>
+                                      }
+                                      @if (material.analysis.lightingAnalysis.lightDistribution) {
+                                        <div class="light-distribution" style="display: flex; flex-direction: column; gap: 6px; margin-top: 10px;">
+                                          <div class="dist-item" style="display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: white; border-radius: 6px;">
+                                            <span style="font-size: 0.85rem; color: #495057;">自然光</span>
+                                            <span class="value" style="font-weight: 700; color: #667eea; font-size: 0.85rem;">{{ material.analysis.lightingAnalysis.lightDistribution.natural }}%</span>
+                                          </div>
+                                          <div class="dist-item" style="display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: white; border-radius: 6px;">
+                                            <span style="font-size: 0.85rem; color: #495057;">人工光</span>
+                                            <span class="value" style="font-weight: 700; color: #667eea; font-size: 0.85rem;">{{ material.analysis.lightingAnalysis.lightDistribution.artificial }}%</span>
+                                          </div>
+                                        </div>
+                                      }
+                                    </div>
+                                  }
                                 </div>
-                              }
-                            </div>
-                          }
-                          
-                          @if (mappingIsAnalyzing) {
-                            <div class="analyzing-indicator" style="display:flex; align-items:center; gap:10px; background:#f8f9fa; padding:12px; border-radius:8px;">
-                              <div class="spinner" style="width:16px;height:16px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite;"></div>
-                              <span style="font-size:14px; color:#666;">正在解析图片...</span>
-                            </div>
-                          }
-                          
-                          @if (mappingIsGeneratingMapping) {
-                            <div class="analyzing-indicator" style="display:flex; align-items:center; gap:10px; background:#f8f9fa; padding:12px; border-radius:8px;">
-                              <div class="spinner" style="width:16px;height:16px;border:2px solid #e5e7eb;border-top-color:#10b981;border-radius:50%;animation:spin 1s linear infinite;"></div>
-                              <span style="font-size:14px; color:#666;">正在生成需求映射...</span>
-                            </div>
-                          }
-                          
-                          @if (!mappingAnalysisResult && !mappingIsAnalyzing && mappingUploadedFiles.length === 0) {
-                            <div class="empty-state" style="text-align:center; padding:32px; color:#999;">
-                              <div style="font-size:48px; margin-bottom:12px;">📊</div>
-                              <div style="font-size:14px;">在需求沟通中上传图片后，这里将实时显示需求映射结果</div>
-                            </div>
+                              </div>
+                            }
                           }
                         </div>
                         

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectorRef, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -27,6 +27,11 @@ import { DesignerAssignmentComponent, DesignerAssignmentData, Designer as Assign
 import { DesignerCalendarComponent, Designer as CalendarDesigner, ProjectGroup as CalendarProjectGroup } from '../../customer-service/consultation-order/components/designer-calendar/designer-calendar.component';
 // 引入参考图管理组件
 import { ReferenceImageManagerComponent } from './components/reference-image-manager/reference-image-manager.component';
+// 引入可视化组件
+import { ColorWheelVisualizerComponent } from '../../../shared/components/color-wheel-visualizer/color-wheel-visualizer';
+import { FurnitureFormSelectorComponent } from '../../../shared/components/furniture-form-selector/furniture-form-selector';
+import { TextureComparisonVisualizerComponent } from '../../../shared/components/texture-comparison-visualizer/texture-comparison-visualizer';
+import { PatternVisualizerComponent } from '../../../shared/components/pattern-visualizer/pattern-visualizer';
 
 import { ColorAnalysisResult, ColorAnalysisService } from '../../../shared/services/color-analysis.service';
 
@@ -265,11 +270,32 @@ interface DeliveryProcess {
 @Component({
   selector: 'app-project-detail',
   standalone: true,
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, RequirementsConfirmCardComponent, SettlementCardComponent, CustomerReviewCardComponent, CustomerReviewFormComponent, ComplaintCardComponent, PanoramicSynthesisCardComponent, QuotationDetailsComponent, DesignerAssignmentComponent, DesignerCalendarComponent, ReferenceImageManagerComponent],
+  imports: [
+    CommonModule, 
+    FormsModule, 
+    ReactiveFormsModule, 
+    RequirementsConfirmCardComponent, 
+    SettlementCardComponent, 
+    CustomerReviewCardComponent, 
+    CustomerReviewFormComponent, 
+    ComplaintCardComponent, 
+    PanoramicSynthesisCardComponent, 
+    QuotationDetailsComponent, 
+    DesignerAssignmentComponent, 
+    DesignerCalendarComponent, 
+    ReferenceImageManagerComponent,
+    ColorWheelVisualizerComponent,
+    FurnitureFormSelectorComponent,
+    TextureComparisonVisualizerComponent,
+    PatternVisualizerComponent
+  ],
   templateUrl: './project-detail.html',
   styleUrls: ['./project-detail.scss', './debug-styles.scss', './horizontal-panel.scss', './suggestion-detail-modal.scss']
 })
 export class ProjectDetail implements OnInit, OnDestroy {
+  // 获取需求沟通组件实例，用于在方案确认阶段显示分析数据
+  @ViewChild('requirementsCard') requirementsCard?: RequirementsConfirmCardComponent;
+  
   // 项目基本数据
   projectId: string = '';
   project: Project | undefined;
@@ -3064,6 +3090,13 @@ export class ProjectDetail implements OnInit, OnDestroy {
     this.cdr.detectChanges(); // 触发界面更新
   }
 
+  // 新增：处理上传弹窗请求
+  onUploadModalRequested(event: any): void {
+    console.log('📤 收到上传弹窗请求:', event);
+    // 这里可以根据需要处理弹窗显示逻辑
+    // 目前只记录日志，实际功能由子组件内部处理
+  }
+
   // 继续原有的onRequirementDataUpdated方法内容
   private updateProjectInfoFromRequirementData(data: any): void {
     // 更新客户信息显示

src/app/shared/components/requirements-confirm-card/requirements-confirm-card.html

@@ -213,14 +213,28 @@
                         </div>
                       } @else if (material.type === 'image') {
                         <div class="analysis-results">
-                          <!-- 基础色彩信息 -->
-                          <div class="color-info">
-                            <span class="color-temp">色温: {{ material.analysis.colorTemperature }}K</span>
+                          <!-- 基础色彩信息和折叠按钮 -->
+                          <div class="analysis-summary">
+                            <div class="color-info">
+                              <span class="color-temp">色温: {{ material.analysis.colorTemperature }}K</span>
+                              @if (material.analysis.mainColors && material.analysis.mainColors.length > 0) {
+                                <span class="color-count">主色: {{ material.analysis.mainColors.length }}种</span>
+                              }
+                            </div>
+                            <button 
+                              class="toggle-detail-btn"
+                              (click)="toggleMaterialExpansion(material.id)"
+                              [class.expanded]="isMaterialExpanded(material.id)">
+                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline [attr.points]="isMaterialExpanded(material.id) ? '18 15 12 9 6 15' : '6 9 12 15 18 9'"></polyline>
+                              </svg>
+                              {{ isMaterialExpanded(material.id) ? '收起详情' : '查看详情' }}
+                            </button>
                           </div>
                           
-                          <!-- 增强色彩分析 -->
-                          @if (material.analysis.enhancedColorAnalysis) {
-                            <div class="enhanced-analysis">
+                          <!-- 详细分析（可折叠） -->
+                          @if (isMaterialExpanded(material.id)) {
+                            <div class="detailed-analysis">
                               <div class="analysis-section">
                                 <h6>色彩分析</h6>
                                 
@@ -237,7 +251,7 @@
                                 }
                                 
                                 <!-- 色轮分析 -->
-                                @if (material.analysis.enhancedColorAnalysis.colorWheel) {
+                                @if (material.analysis.enhancedColorAnalysis?.colorWheel) {
                                   <div class="color-wheel-info">
                                     <div class="color-wheel-icon">
                                       <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -248,16 +262,16 @@
                                         <path d="M12 12l-8.66-5"></path>
                                       </svg>
                                     </div>
-                                    <span>主色调: {{ material.analysis.enhancedColorAnalysis.colorWheel.primaryHue }}°</span>
-                                    <span>饱和度: {{ material.analysis.enhancedColorAnalysis.colorWheel.saturation }}%</span>
+                                    <span>主色调: {{ material.analysis.enhancedColorAnalysis?.colorWheel?.primaryHue }}°</span>
+                                    <span>饱和度: {{ material.analysis.enhancedColorAnalysis?.colorWheel?.saturation }}%</span>
                                   </div>
                                 }
                                 
                                 <!-- 色彩心理学 -->
-                                @if (material.analysis.enhancedColorAnalysis.colorPsychology) {
+                                @if (material.analysis.enhancedColorAnalysis?.colorPsychology) {
                                   <div class="psychology-info">
-                                    <span class="mood-tag">{{ material.analysis.enhancedColorAnalysis.colorPsychology.primaryMood }}</span>
-                                    <span class="atmosphere-tag">{{ material.analysis.enhancedColorAnalysis.colorPsychology.atmosphere }}</span>
+                                    <span class="mood-tag">{{ material.analysis.enhancedColorAnalysis?.colorPsychology?.primaryMood }}</span>
+                                    <span class="atmosphere-tag">{{ material.analysis.enhancedColorAnalysis?.colorPsychology?.atmosphere }}</span>
                                   </div>
                                 }
                               </div>
@@ -746,6 +760,7 @@
       </div>
     }
 
+    <!-- 分析汇总标签页 -->
     <!-- 协作验证标签页 -->
     @if (activeTab === 'collaboration') {
       <div class="collaboration-section">

src/app/shared/components/requirements-confirm-card/requirements-confirm-card.scss

@@ -2827,4 +2827,345 @@
     box-shadow: 0 4px 16px rgba(102, 126, 234, 0.5);
     transform: scale(1.02);
   }
+}
+
+// 新增：素材卡片折叠按钮样式
+.analysis-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 12px;
+
+  .color-info {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+
+    .color-temp, .color-count {
+      font-size: 0.9rem;
+      color: #495057;
+    }
+  }
+
+  .toggle-detail-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    color: #667eea;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    svg {
+      transition: transform 0.3s ease;
+    }
+
+    &:hover {
+      background: #667eea;
+      color: white;
+      border-color: #667eea;
+    }
+
+    &.expanded {
+      background: #667eea;
+      color: white;
+      border-color: #667eea;
+
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+.detailed-analysis {
+  animation: fadeIn 0.3s ease;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 8px;
+  
+  // 自定义滚动条样式
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f3f5;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #667eea;
+    border-radius: 3px;
+    
+    &:hover {
+      background: #5568d3;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// 分析汇总标签页样式
+.analysis-summary-section {
+  padding: 20px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  
+  // 自定义滚动条样式
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f3f5;
+    border-radius: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 4px;
+    
+    &:hover {
+      background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
+    }
+  }
+
+  .section-header {
+    margin-bottom: 24px;
+    text-align: center;
+
+    h4 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #2c3e50;
+      margin-bottom: 8px;
+    }
+
+    .section-description {
+      color: #6c757d;
+      font-size: 0.95rem;
+    }
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 60px 20px;
+
+    svg {
+      stroke: #dee2e6;
+      margin-bottom: 20px;
+    }
+
+    p {
+      color: #6c757d;
+      font-size: 1rem;
+      margin: 8px 0;
+
+      &.hint {
+        color: #adb5bd;
+        font-size: 0.9rem;
+      }
+    }
+  }
+
+  .material-analysis-card {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 24px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+    .material-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 20px;
+      padding-bottom: 16px;
+      border-bottom: 2px solid #f8f9fa;
+
+      .material-thumbnail {
+        width: 80px;
+        height: 80px;
+        object-fit: cover;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .material-info {
+        flex: 1;
+
+        h5 {
+          font-size: 1.1rem;
+          font-weight: 600;
+          color: #2c3e50;
+          margin-bottom: 4px;
+        }
+
+        .upload-time {
+          font-size: 0.85rem;
+          color: #6c757d;
+        }
+      }
+    }
+
+    .analysis-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 20px;
+    }
+
+    .analysis-card {
+      background: #f8f9fa;
+      padding: 16px;
+      border-radius: 10px;
+      border: 1px solid #e9ecef;
+
+      h6 {
+        font-size: 1rem;
+        font-weight: 600;
+        margin-bottom: 12px;
+        color: #495057;
+      }
+
+      .psychology-tags, .pattern-tags {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        margin-top: 12px;
+
+        .tag {
+          padding: 4px 12px;
+          background: white;
+          border-radius: 20px;
+          font-size: 0.85rem;
+          color: #667eea;
+          border: 1px solid #667eea;
+        }
+      }
+
+      .assessment-metrics {
+        display: flex;
+        gap: 16px;
+        margin-top: 12px;
+
+        .metric {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 12px;
+          background: white;
+          border-radius: 8px;
+
+          span {
+            font-size: 0.85rem;
+            color: #6c757d;
+
+            &.value {
+              font-size: 1.2rem;
+              font-weight: 700;
+              color: #667eea;
+              margin-top: 4px;
+            }
+          }
+        }
+      }
+
+      .material-tag {
+        text-align: center;
+        padding: 8px 16px;
+        background: white;
+        border-radius: 8px;
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: #667eea;
+        margin-top: 12px;
+      }
+
+      .lighting-ratio-visual {
+        .ratio-bar {
+          display: flex;
+          height: 40px;
+          border-radius: 8px;
+          overflow: hidden;
+          margin-bottom: 12px;
+
+          .key-light {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 0.85rem;
+            font-weight: 600;
+            transition: all 0.3s ease;
+          }
+
+          .fill-light {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 0.85rem;
+            font-weight: 600;
+            transition: all 0.3s ease;
+          }
+        }
+
+        .ratio-quality {
+          display: block;
+          text-align: center;
+          font-size: 0.9rem;
+          color: #667eea;
+          font-weight: 600;
+        }
+      }
+
+      .light-distribution {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-top: 12px;
+
+        .dist-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px 12px;
+          background: white;
+          border-radius: 6px;
+
+          span {
+            font-size: 0.9rem;
+            color: #495057;
+
+            &.value {
+              font-weight: 700;
+              color: #667eea;
+            }
+          }
+        }
+      }
+    }
+  }
 }

src/app/shared/components/requirements-confirm-card/requirements-confirm-card.ts

@@ -311,7 +311,7 @@ export class RequirementsConfirmCardComponent implements OnInit, OnDestroy {
   requirementItems: RequirementItem[] = [];
 
   // 状态
-  activeTab: 'materials' | 'mapping' | 'collaboration' | 'progress' = 'materials';
+  activeTab: 'materials' | 'mapping' | 'collaboration' | 'progress' | 'analysis-summary' = 'materials';
   isUploading = false;
   isAnalyzing = false;
   
@@ -1660,7 +1660,7 @@ export class RequirementsConfirmCardComponent implements OnInit, OnDestroy {
   }
 
   // 切换标签页
-  switchTab(tab: 'materials' | 'mapping' | 'collaboration' | 'progress') {
+  switchTab(tab: 'materials' | 'mapping' | 'collaboration' | 'progress' | 'analysis-summary') {
     this.activeTab = tab;
   }