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

@@ -266,6 +266,8 @@
                   <span class="progress-text">{{ getRequiredStagesProgress() }}% 完成</span>
                 </div>
               </div>
+<<<<<<< HEAD
+=======
               <!-- 参考图+色彩报告摘要 -->
               <!-- <div class="report-summary-title">参考图 + 色彩报告</div> -->
               <div class="report-summary" *ngIf="colorAnalysisResult; else noColorReportLeft">
@@ -285,6 +287,7 @@
               <ng-template #noColorReportLeft>
                 <!-- <p class="placeholder-note">暂无色彩分析结果。完成左侧颜色提取后，这里将显示参考图与报告摘要。</p> -->
               </ng-template>
+>>>>>>> 40a51193d4c23c1d7b0c30c59fee7a98d288dcee
               
               <!-- 素材解析状态 -->
               @if (isAnalyzing) {
@@ -677,8 +680,10 @@
                             </div>
                           </div>
                           <div class="pane right" style="flex:1;">
-                            <div class="pane-header" style="font-weight:600;margin-bottom:8px;">CAD图纸</div>
+                            <div class="pane-header" style="font-weight:600;margin-bottom:8px;">色彩分析报告</div>
                             <div class="pane-body scroller" style="max-height:240px;overflow:auto;border:1px solid #eee;border-radius:8px;padding:8px;">
+                              <!-- 保持CAD列表展示不变，仅将右侧标题改为色彩分析报告 -->
+                              <div class="subsection-title" style="font-weight:600;margin-bottom:8px;">CAD图纸</div>
                               @if (cadFiles.length > 0) {
                                 <div class="files-grid" style="display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:8px;">
                                   @for (file of cadFiles; track file.id) {
@@ -692,9 +697,68 @@
                                 <div class="empty-tip" style="color:#888;">暂无CAD文件</div>
                               }
                             </div>
+                            <!-- 色彩分析报告：迁移到“确认需求”板块右侧显示 -->
+                            <div class="card color-report-card" style="margin-top:8px;">
+                              <div class="card-header">
+                                <h4>色彩分析报告</h4>
+                              </div>
+                              <div class="card-body">
+                                @if (isAnalyzing) {
+                                  <div class="analysis-progress" style="margin-bottom:8px;">
+                                    <div class="progress-header" style="display:flex;align-items:center;justify-content:space-between;">
+                                      <h5 style="margin:0;font-size:14px;">正在解析素材...</h5>
+                                      <span class="progress-percentage">{{ analysisProgress.toFixed(0) }}%</span>
+                                    </div>
+                                    <div class="progress-bar" style="height:6px;background:#eee;border-radius:6px;overflow:hidden;">
+                                      <div class="progress-fill" [style.width.%]="analysisProgress" style="height:100%;background:#007AFF;"></div>
+                                    </div>
+                                  </div>
+                                }
+                                @if (colorAnalysisResult) {
+                                  <div class="report-summary" style="display:flex;flex-direction:column;gap:16px;">
+                                    <div class="report-images">
+                                      <div class="section-title" style="font-weight:600;margin-bottom:6px;">参考图</div>
+                                      <div class="images-row" style="display:flex;gap:8px;flex-wrap:wrap;">
+                                        @if (colorAnalysisResult.originalImage) {
+                                          <img [src]="colorAnalysisResult.originalImage" alt="参考图" (click)="previewImageFile(colorAnalysisResult.originalImage)" style="width:96px;height:96px;object-fit:cover;border-radius:6px;cursor:pointer;border:1px solid #eee;" />
+                                        } @else {
+                                          <div class="empty-tip" style="color:#888;">暂无参考图</div>
+                                        }
+                                      </div>
+                                    </div>
+                                    <div class="palette">
+                                      <div class="section-title" style="font-weight:600;margin-bottom:6px;font-size:12px;">色板</div>
+                                      <div class="palette-row" style="display:flex;gap:6px;flex-wrap:wrap;">
+                                        @for (c of colorAnalysisResult.colors; track c.hex) {
+                                          <div class="palette-item" style="display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #eee;border-radius:4px;">
+                                            <div class="swatch" [style.backgroundColor]="c.hex" style="width:16px;height:16px;border-radius:3px;border:1px solid #ddd;"></div>
+                                            <div class="hex" style="font-size:10px;color:#333;">{{ c.hex }}</div>
+                                            <div class="pct" style="font-size:10px;color:#666;">{{ c.percentage }}%</div>
+                                          </div>
+                                        }
+                                      </div>
+                                    </div>
+                                    <div class="dominant-color">
+                                      <div class="section-title" style="font-weight:600;margin-bottom:6px;font-size:12px;">主色</div>
+                                      <div class="dominant-row" style="display:flex;align-items:center;gap:6px;">
+                                        <div class="swatch" [style.backgroundColor]="dominantColorHex || '#ccc'" style="width:24px;height:24px;border-radius:4px;border:1px solid #ddd;"></div>
+                                        <span class="hex" style="font-size:11px;color:#333;">
+                                          {{ dominantColorHex || (colorAnalysisResult.colors.length > 0 ? colorAnalysisResult.colors[0].hex : '未知') }}
+                                        </span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                } @else {
+                                  <div class="empty-tip" style="color:#888;">暂无色彩分析结果</div>
+                                }
+                              </div>
+                            </div>
                           </div>
                         </div>
                       } @else if (stage === '方案确认') {
+<<<<<<< HEAD
+                        <!-- 方案确认阶段：右侧不再显示色彩分析报告 -->
+=======
                         <!-- 替换右侧占位为：色彩分析报告（与参考图关联） -->
                         <div class="card color-report-card" style="margin-top:8px;">
                           <div class="card-header">
@@ -742,6 +806,7 @@
                             }
                           </div>
                         </div>
+>>>>>>> 40a51193d4c23c1d7b0c30c59fee7a98d288dcee
                       } @else if (stage === '建模') {
                         <div class="upload-section">
                           <div class="upload-header">

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

@@ -159,6 +159,11 @@
                     </button>
                   </div>
                   <div class="material-name">{{ material.name }}</div>
+                  @if (material.type === 'image') {
+                    <button class="btn-ghost btn-xs" (click)="previewImage(material.url)">预览图片</button>
+                  } @else if (material.type === 'cad') {
+                    <button class="btn-ghost btn-xs" (click)="previewCad(material.url)">预览CAD</button>
+                  }
                   @if (material.analysis) {
                     <div class="parsed-info">
                       @if (material.type === 'text') {

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

@@ -1517,6 +1517,8 @@ export class RequirementsConfirmCardComponent implements OnInit, OnDestroy {
             const mainColor = result.colors[0];
             this.updateColorIndicator('mainColor', mainColor.rgb);
           }
+          // 新增：分析完成后向父级发射数据更新，包含色彩分析结果
+          this.emitDataUpdate();
         },
         error: (error) => {
           console.error('颜色分析失败:', error);
@@ -1543,10 +1545,31 @@ export class RequirementsConfirmCardComponent implements OnInit, OnDestroy {
       requirementItems: this.requirementItems || [],
       materials: this.materials || [],
       collaborationComments: this.collaborationComments || '',
-      stageCompletionStatus: this.stageCompletionStatus || {}
+      stageCompletionStatus: this.stageCompletionStatus || {},
+      // 新增：传递色彩分析结果到父级用于右侧展示
+      colorAnalysisResult: this.colorAnalysisResult
     };
     
     this.dataUpdated.emit(currentData);
     console.log('实时数据更新事件已发射:', currentData);
   }
+
+  // 新增：图片与CAD文件预览方法
+  previewImage(url?: string): void {
+    if (!url) { return; }
+    try {
+      window.open(url, '_blank');
+    } catch (e) {
+      console.error('预览图片失败:', e);
+    }
+  }
+
+  previewCad(url?: string): void {
+    if (!url) { return; }
+    try {
+      window.open(url, '_blank');
+    } catch (e) {
+      console.error('预览CAD失败:', e);
+    }
+  }
 }