feet:customer22

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

@@ -261,30 +261,11 @@
             <!-- 方案确认卡片 - 优化样式与左侧客户信息卡片保持一致 -->
             <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) {
@@ -692,56 +673,66 @@
                                 <div class="empty-tip" style="color:#888;">暂无CAD文件</div>
                               }
                             </div>
-                          </div>
-                        </div>
-                      } @else if (stage === '方案确认') {
-                        <!-- 替换右侧占位为：色彩分析报告（与参考图关联） -->
-                        <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 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>
-                                  } @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>
+                                }
+                                @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;">色板</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>
-                                </div>
+                                } @else {
+                                  <div class="empty-tip" style="color:#888;">暂无色彩分析结果</div>
+                                }
                               </div>
-                            } @else {
-                              <div class="empty-tip" style="color:#888;">暂无色彩分析结果</div>
-                            }
+                            </div>
                           </div>
                         </div>
+                      } @else if (stage === '方案确认') {
+                        <!-- 方案确认阶段：右侧不再显示色彩分析报告 -->
                       } @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);
+    }
+  }
 }