feat:customer23

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

@@ -261,11 +261,30 @@
             <!-- 方案确认卡片 - 优化样式与左侧客户信息卡片保持一致 -->
             <div class="proposal-confirm-card card">
               <div class="card-header">
-                <h2>方案确认</h2>
+                <h2>色彩分析报告</h2>
                 <div class="sync-status">
                   <span class="progress-text">{{ getRequiredStagesProgress() }}% 完成</span>
                 </div>
               </div>
+              <!-- 参考图+色彩报告摘要 -->
+              <div class="report-summary-title">参考图 + 色彩报告</div>
+              <div class="report-summary" *ngIf="colorAnalysisResult; else noColorReportLeft">
+                <div class="summary-left">
+                  <div class="ref-image-wrap" (click)="previewColorRefImage()" title="点击预览参考图">
+                    <img [src]="colorAnalysisResult.originalImage" alt="参考图预览" class="ref-image" />
+                  </div>
+                </div>
+                <div class="summary-right">
+                  <div class="palette">
+                    <div class="swatch" *ngFor="let c of colorAnalysisResult.colors; let i = index" [style.background]="c.hex" [title]="c.hex"></div>
+                  </div>
+                  <div class="main-color">主色：{{ dominantColorHex || (colorAnalysisResult.colors.length > 0 ? colorAnalysisResult.colors[0].hex : '未知') }}</div>
+                  <div class="status">分析状态：{{ isAnalyzing ? '解析中' : '已完成' }}</div>
+                </div>
+              </div>
+              <ng-template #noColorReportLeft>
+                <p class="placeholder-note">暂无色彩分析结果。完成左侧颜色提取后，这里将显示参考图与报告摘要。</p>
+              </ng-template>
               
               <!-- 素材解析状态 -->
               @if (isAnalyzing) {
@@ -639,11 +658,88 @@
                           (stageCompleted)="onRequirementsStageCompleted($event)"
                           (dataUpdated)="onRequirementDataUpdated($event)">
                         </app-requirements-confirm-card>
+                        <!-- 新增：需求确认右侧下方左右分区，滚动展示参考图片与CAD图纸 -->
+                        <div class="materials-two-pane" style="display:flex;gap:16px;margin-top:12px;">
+                          <div class="pane left" style="flex:1;">
+                            <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;">
+                              @if (referenceImages.length > 0) {
+                                <div class="images-grid" style="display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:8px;">
+                                  @for (img of referenceImages; track img.id) {
+                                    <div class="image-thumb" style="cursor:pointer;border:1px solid #f0f0f0;border-radius:6px;overflow:hidden;" (click)="previewImageFile(img.url)">
+                                      <img [src]="img.url" [alt]="img.name || '参考图'" style="width:100%;height:90px;object-fit:cover;" />
+                                    </div>
+                                  }
+                                </div>
+                              } @else {
+                                <div class="empty-tip" style="color:#888;">暂无参考图片</div>
+                              }
+                            </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-body scroller" style="max-height:240px;overflow:auto;border:1px solid #eee;border-radius:8px;padding:8px;">
+                              @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) {
+                                    <div class="file-thumb" style="cursor:pointer;border:1px dashed #e5e5e5;border-radius:6px;padding:8px;background:#fafafa;" (click)="previewCadFile(file.url)">
+                                      <div class="file-icon" style="font-size:12px;color:#555;margin-bottom:6px;">CAD</div>
+                                      <div class="file-name" style="font-size:12px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ file.name }}</div>
+                                    </div>
+                                  }
+                                </div>
+                              } @else {
+                                <div class="empty-tip" style="color:#888;">暂无CAD文件</div>
+                              }
+                            </div>
+                          </div>
+                        </div>
                       } @else if (stage === '方案确认') {
-                        <!-- 方案确认阶段 - 已移动到左侧列 -->
-                        <div class="proposal-confirm-placeholder">
-                          <div class="placeholder-message">
-                            <p>方案确认卡片已移动到左侧区域</p>
+                        <!-- 替换右侧占位为：色彩分析报告（与参考图关联） -->
+                        <div class="card color-report-card" style="margin-top:8px;">
+                          <div class="card-header">
+                            <h4>色彩分析报告</h4>
+                          </div>
+                          <div class="card-body">
+                            @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>
+                                  @if (referenceImages.length > 0) {
+                                    <div class="images-row" style="display:flex;gap:8px;flex-wrap:wrap;">
+                                      @for (img of referenceImages; track img.id) {
+                                        <img [src]="img.url" [alt]="img.name || '参考图'" class="image-thumb" (click)="previewImageFile(img.url)" style="width:80px;height:80px;object-fit:cover;border-radius:6px;cursor:pointer;border:1px solid #eee;" />
+                                      }
+                                    </div>
+                                  } @else {
+                                    <div class="empty-tip" style="color:#888;">暂无参考图</div>
+                                  }
+                                </div>
+                                <div class="palette">
+                                  <div class="section-title" style="font-weight:600;margin-bottom:6px;">色板</div>
+                                  <div class="palette-row" style="display:flex;gap:8px;flex-wrap:wrap;">
+                                    @for (c of colorAnalysisResult.colors; track c.hex) {
+                                      <div class="palette-item" style="display:flex;align-items:center;gap:6px;padding:6px;border:1px solid #eee;border-radius:6px;">
+                                        <div class="swatch" [style.backgroundColor]="c.hex" style="width:20px;height:20px;border-radius:4px;border:1px solid #ddd;"></div>
+                                        <div class="hex" style="font-size:12px;color:#333;">{{ c.hex }}</div>
+                                        <div class="pct" style="font-size:12px;color:#666;">{{ c.percentage }}%</div>
+                                      </div>
+                                    }
+                                  </div>
+                                </div>
+                                <div class="dominant-color">
+                                  <div class="section-title" style="font-weight:600;margin-bottom:6px;">主色</div>
+                                  <div class="dominant-row" style="display:flex;align-items:center;gap:8px;">
+                                    <div class="swatch" [style.backgroundColor]="dominantColorHex || '#ccc'" style="width:28px;height:28px;border-radius:6px;border:1px solid #ddd;"></div>
+                                    <span class="hex" style="font-size:12px;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>
                       } @else if (stage === '建模') {

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

@@ -19,6 +19,7 @@ import { CustomerReviewCardComponent } from '../../../shared/components/customer
 import { ComplaintCardComponent } from '../../../shared/components/complaint-card/complaint-card';
 
 import { VerticalNavComponent } from './components/vertical-nav/vertical-nav.component';
+import { ColorAnalysisResult } from '../../../shared/services/color-analysis.service';
 
 interface ExceptionHistory {
   id: string;
@@ -221,6 +222,12 @@ export class ProjectDetail implements OnInit, OnDestroy {
   proposalAnalysis: ProposalAnalysis | null = null;
   isAnalyzing: boolean = false;
   analysisProgress: number = 0;
+  // 新增：右侧色彩分析结果展示
+  colorAnalysisResult: ColorAnalysisResult | null = null;
+  dominantColorHex: string | null = null;
+  // 新增：区分展示的参考图片与CAD文件（来源于需求确认子组件）
+  referenceImages: any[] = [];
+  cadFiles: any[] = [];
   
   // 新增：10阶段顺序（串式流程）
   stageOrder: ProjectStage[] = ['订单创建', '需求沟通', '方案确认', '建模', '软装', '渲染', '后期', '尾款结算', '客户评价', '投诉处理'];
@@ -2596,6 +2603,24 @@ export class ProjectDetail implements OnInit, OnDestroy {
         }));
       }
       
+      // 接收色彩分析结果并存储用于右侧展示
+      if (data.colorAnalysisResult) {
+        this.colorAnalysisResult = data.colorAnalysisResult as ColorAnalysisResult;
+        // 计算主色：按占比最高的颜色
+        const colors = this.colorAnalysisResult?.colors || [];
+        if (colors.length > 0) {
+          const dominant = colors.reduce((max, cur) => cur.percentage > max.percentage ? cur : max, colors[0]);
+          this.dominantColorHex = dominant.hex;
+        } else {
+          this.dominantColorHex = null;
+        }
+      }
+
+      // 新增：根据上传来源拆分材料文件用于左右区展示
+      const materials = Array.isArray(data?.materials) ? data.materials : [];
+      this.referenceImages = materials.filter((m: any) => m?.type === 'image');
+      this.cadFiles = materials.filter((m: any) => m?.type === 'cad');
+
       // 触发变更检测以更新UI
       this.cdr.detectChanges();
       
@@ -2603,6 +2628,25 @@ export class ProjectDetail implements OnInit, OnDestroy {
     }
   }
 
+  // 预览右侧色彩分析参考图
+  previewColorRefImage(): void {
+    const url = this.colorAnalysisResult?.originalImage;
+    if (url) {
+      window.open(url, '_blank');
+    }
+  }
+
+  // 新增：点击预览参考图片与CAD文件
+  previewImageFile(url?: string): void {
+    if (!url) return;
+    window.open(url, '_blank');
+  }
+
+  previewCadFile(url?: string): void {
+    if (!url) return;
+    window.open(url, '_blank');
+  }
+
   // 新增：上传支付凭证功能
   uploadPaymentProof(): void {
     const input = document.createElement('input');