yss-project/copy/requirements-confirm-card2.html

<div class="info-card requirements-confirm-card">
  <div class="card-header">
    <h4>确认需求</h4>
    <div class="header-actions">
      <button class="btn-ghost btn-sm" (click)="refreshProgress()">刷新进度</button>
      
      <!-- 紧凑型流程进度卡片 -->
      <div class="compact-stage-indicators">
        <div class="stage-chain">
          <div class="stage-dot" [class]="getStageStatusClass('materialAnalysis')" 
               title="素材分析 - {{ getStageStatusText('materialAnalysis') }}">
            <span class="stage-number">1</span>
          </div>
          <div class="stage-connector" [class]="stageCompletionStatus.materialAnalysis ? 'completed' : 'pending'"></div>
          
          <div class="stage-dot" [class]="getStageStatusClass('requirementMapping')" 
               title="需求映射 - {{ getStageStatusText('requirementMapping') }}">
            <span class="stage-number">2</span>
          </div>
          <div class="stage-connector" [class]="stageCompletionStatus.requirementMapping ? 'completed' : 'pending'"></div>
          
          <div class="stage-dot" [class]="getStageStatusClass('collaboration')" 
               title="协作验证 - {{ getStageStatusText('collaboration') }}">
            <span class="stage-number">3</span>
          </div>
          <div class="stage-connector" [class]="stageCompletionStatus.collaboration ? 'completed' : 'pending'"></div>
          
          <div class="stage-dot" [class]="getStageStatusClass('progressReview')" 
               title="进度审查 - {{ getStageStatusText('progressReview') }}">
            <span class="stage-number">4</span>
          </div>
        </div>
      </div>
      
      <div class="progress-indicator">
        <div class="progress-bar">
          <div class="progress-fill" [style.width.%]="getProgressPercentage()"></div>
        </div>
        <span class="progress-text">{{ getProgressPercentage() | number:'1.0-0' }}% 完成</span>
      </div>
    </div>
  </div>

  <!-- 标签页导航 -->
  <div class="tab-navigation">
    <button 
      class="tab-button" 
      [class.active]="activeTab === 'materials'"
      (click)="switchTab('materials')">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14,2 14,8 20,8"></polyline>
      </svg>
      素材解析
    </button>
    <button 
      class="tab-button" 
      [class.active]="activeTab === 'mapping'"
      (click)="switchTab('mapping')">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="3"></circle>
        <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"></path>
      </svg>
      需求映射
    </button>
    <button 
      class="tab-button" 
      [class.active]="activeTab === 'collaboration'"
      (click)="switchTab('collaboration')">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
        <circle cx="9" cy="7" r="4"></circle>
        <path d="M23 21v-2a4 4 0 0 0-3-3.87m-4-12a4 4 0 0 1 0 7.75"></path>
      </svg>
      协作验证
    </button>
    <button 
      class="tab-button" 
      [class.active]="activeTab === 'progress'"
      (click)="switchTab('progress')">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="22,12 18,12 15,21 9,3 6,12 2,12"></polyline>
      </svg>
      进度管理
    </button>
  </div>

  <!-- 标签页内容 -->
  <div class="tab-content">
    
    <!-- 素材解析标签页 -->
    @if (activeTab === 'materials') {
      <div class="materials-section">
        <!-- 文本输入区域 - 独立一行 -->
        <div class="text-upload-section">
          <div class="upload-item text-item">
            <h5>文本描述</h5>
            <form [formGroup]="materialUploadForm" (ngSubmit)="onTextSubmit()">
              <textarea 
                formControlName="textContent" 
                placeholder="请描述您的装修需求，如：希望温馨的暖木色调，适合亲子家庭，需要瑜伽区收纳..."
                rows="4">
              </textarea>
              <button type="submit" class="btn-primary btn-sm" [disabled]="!materialUploadForm.get('textContent')?.value">
                解析文本
              </button>
            </form>
          </div>
        </div>

        <!-- 参考图片和CAD图纸并排布局 -->
        <div class="file-upload-grid">
          <!-- 参考图片上传区域 -->
          <div class="upload-item image-item">
            <h5>参考图片</h5>
            <div class="file-upload-zone" (click)="imageInput.click()">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <polyline points="21,15 16,10 5,21"></polyline>
              </svg>
              <p>点击上传参考图片</p>
              <span class="hint">支持多张图片，自动分析色调和材质</span>
            </div>
            <input #imageInput type="file" multiple accept="image/*" (change)="onFileSelected($event, 'image')" style="display: none;">
          </div>

          <!-- CAD图纸上传区域 -->
          <div class="upload-item cad-item">
            <h5>CAD图纸</h5>
            <div class="file-upload-zone" (click)="cadInput.click()">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14,2 14,8 20,8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
              </svg>
              <p>点击上传CAD图纸</p>
              <span class="hint">自动识别结构和空间尺寸</span>
            </div>
            <input #cadInput type="file" accept=".dwg,.dxf,.pdf" (change)="onFileSelected($event, 'cad')" style="display: none;">
          </div>
        </div>

        <!-- 已上传素材列表 -->
        @if (materials.length > 0) {
          <div class="materials-list">
            <h5>已上传素材</h5>
            <div class="material-cards">
              @for (material of materials; track material.id) {
                <div class="material-card" [class]="'material-' + material.type">
                  <div class="material-header">
                    <span class="material-type">{{ material.type === 'text' ? '文本' : material.type === 'image' ? '图片' : 'CAD' }}</span>
                    <button class="btn-ghost btn-xs" (click)="removeMaterial(material.id)">
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                      </svg>
                    </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') {
                        <div class="parsed-tags">
                          @if (material.analysis.atmosphere) {
                          <div class="tag-group">
                            <span class="tag-label">氛围:</span>
                            <span class="tag">{{ material.analysis.atmosphere.description }}</span>
                          </div>
                        }
                        </div>
                      } @else if (material.type === 'image') {
                        <div class="analysis-results">
                          <!-- 基础色彩信息 -->
                          <div class="color-info">
                            <span class="color-temp">色温: {{ material.analysis.colorTemperature }}K</span>
                          </div>
                          
                          <!-- 增强色彩分析 -->
                          @if (material.analysis.enhancedColorAnalysis) {
                            <div class="enhanced-analysis">
                              <div class="analysis-section">
                                <h6>色彩分析</h6>
                                
                                <!-- 色轮分析 -->
                                @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">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <path d="M12 2a10 10 0 0 1 10 10"></path>
                                        <path d="M12 2a10 10 0 0 0-10 10"></path>
                                        <path d="M12 12l8.66-5"></path>
                                        <path d="M12 12l-8.66-5"></path>
                                      </svg>
                                    </div>
                                    <span>主色调: {{ material.analysis.enhancedColorAnalysis.colorWheel.primaryHue }}°</span>
                                    <span>饱和度: {{ material.analysis.enhancedColorAnalysis.colorWheel.saturation }}%</span>
                                  </div>
                                }
                                
                                <!-- 色彩心理学 -->
                                @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>
                                  </div>
                                }
                              </div>
                              
                              <!-- 形体分析 -->
                              @if (material.analysis.formAnalysis) {
                                <div class="analysis-section">
                                  <h6>形体分析</h6>
                                  @if (material.analysis.formAnalysis.overallAssessment) {
                                    <div class="form-metrics">
                                      <div class="metric-item">
                                        <span class="metric-label">复杂度:</span>
                                        <div class="metric-bar">
                                          <div class="metric-fill" [style.width.%]="material.analysis.formAnalysis.overallAssessment.formComplexity"></div>
                                        </div>
                                      </div>
                                      <div class="metric-item">
                                        <span class="metric-label">视觉冲击:</span>
                                        <div class="metric-bar">
                                          <div class="metric-fill" [style.width.%]="material.analysis.formAnalysis.overallAssessment.visualImpact"></div>
                                        </div>
                                      </div>
                                    </div>
                                  }
                                </div>
                              }
                              
                              <!-- 质感分析 -->
                              @if (material.analysis.textureAnalysis) {
                                <div class="analysis-section">
                                  <h6>质感分析</h6>
                                  @if (material.analysis.textureAnalysis.materialClassification) {
                                    <div class="material-info">
                                      <span class="material-tag">{{ material.analysis.textureAnalysis.materialClassification.primaryMaterial.category }}</span>
                                      @if (material.analysis.textureAnalysis.surfaceProperties) {
                                        <span class="surface-tag">{{ material.analysis.textureAnalysis.surfaceProperties.roughness.level }}</span>
                                      }
                                    </div>
                                  }
                                </div>
                              }
                              
                              <!-- 纹理分析 -->
                              @if (material.analysis.patternAnalysis) {
                                <div class="analysis-section">
                                  <h6>纹理分析</h6>
                                  @if (material.analysis.patternAnalysis.patternRecognition) {
                                    <div class="pattern-info">
                                      @for (pattern of material.analysis.patternAnalysis.patternRecognition.primaryPatterns; track pattern.type) {
                                        <span class="pattern-tag">{{ pattern.type }} ({{ pattern.coverage }}%)</span>
                                      }
                                    </div>
                                  }
                                </div>
                              }
                              
                              <!-- 灯光分析 -->
                              @if (material.analysis.lightingAnalysis) {
                                <div class="analysis-section">
                                  <h6>灯光分析</h6>
                                  @if (material.analysis.lightingAnalysis.ambientAnalysis) {
                                    <div class="lighting-info">
                                      <span class="mood-tag">{{ material.analysis.lightingAnalysis.ambientAnalysis.lightingMood?.primary || '未知' }}</span>
                                      @if (material.analysis.lightingAnalysis.illuminationAnalysis) {
                                        <span class="brightness-tag">亮度: {{ material.analysis.lightingAnalysis.illuminationAnalysis.brightness?.overall || 0 }}%</span>
                                      }
                                      @if (material.analysis.lightingAnalysis.lightSourceIdentification) {
                                        <span class="source-tag">光源: {{ material.analysis.lightingAnalysis.lightSourceIdentification.lightingSetup?.dominantSource || '未知' }}</span>
                                      }
                                    </div>
                                  }
                                </div>
                              }
                            </div>
                          }
                        </div>
                      }
                    </div>
                  }
                </div>
              }
            </div>
          </div>
        }
      </div>
    }

    <!-- 需求映射标签页 -->
    @if (activeTab === 'mapping') {
      <div class="mapping-section">
        <!-- 测试步骤进度 -->
        <div class="test-progress">
          <h3>需求映射进度</h3>
          <div class="progress-summary">
            @if (uploadedFiles.length > 0) {
              <span class="progress-badge">
                📸 已同步 {{ uploadedFiles.length }} 张参考图片
              </span>
            }
          </div>
          <div class="steps-container">
            @for (step of testSteps; track step.id) {
              <div class="step-item" [class]="getStepClass(step.status)">
                <div class="step-icon">{{ getStepIcon(step.status) }}</div>
                <div class="step-info">
                  <div class="step-name">{{ step.name }}</div>
                  <div class="step-status">
                    @switch (step.status) {
                      @case ('pending') { 等待中 }
                      @case ('in-progress') { 进行中... }
                      @case ('completed') { 已完成 }
                      @case ('error') { 失败 }
                    }
                  </div>
                </div>
              </div>
            }
          </div>
        </div>

        <!-- 文件上传区域 -->
        <div class="upload-section">
          <h3>1. 图片上传</h3>
          <div class="upload-area" [class.uploading]="isUploading">
            @if (uploadedFiles.length === 0) {
              <div class="upload-dropzone">
                <div class="upload-icon">📁</div>
                <div class="upload-text">选择图片文件进行测试</div>
                <div class="upload-hint">支持 JPG、PNG 格式，可选择多张图片</div>
                <input type="file" 
                       accept="image/*" 
                       multiple 
                       (change)="onFileSelectedForMapping($event)"
                       class="file-input">
              </div>
            } @else {
              <div class="uploaded-files">
                <h4>已上传文件 ({{ uploadedFiles.length }} 张图片)</h4>
                <div class="upload-source-info">
                  <span class="info-tag">✨ 来自素材分析的参考图片</span>
                </div>
                <div class="files-grid">
                  @for (file of uploadedFiles; track file.id) {
                    <div class="file-item">
                      <img [src]="file.preview || file.url" [alt]="file.name" class="file-preview">
                      <div class="file-info">
                        <div class="file-name">{{ file.name }}</div>
                        <div class="file-size">{{ (file.size! / 1024 / 1024).toFixed(2) }} MB</div>
                      </div>
                      <button class="remove-file-btn" (click)="removeUploadedFile(file.id)" title="移除">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                          <line x1="18" y1="6" x2="6" y2="18"></line>
                          <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                      </button>
                    </div>
                  }
                </div>
              </div>
            }
            
            @if (isUploading) {
              <div class="loading-overlay">
                <div class="loading-spinner"></div>
                <div class="loading-text">正在上传文件...</div>
              </div>
            }
          </div>
        </div>

        <!-- 分析结果区域 -->
        <div class="analysis-section" [class.disabled]="uploadedFiles.length === 0">
          <h3>2. 图片分析</h3>
          
          @if (isAnalyzing) {
            <div class="analysis-loading">
              <div class="loading-spinner"></div>
              <div class="loading-text">
                <h4>正在分析图片...</h4>
                <p>
                  @if (uploadedFiles.length > 1) {
                    正在分析 {{ uploadedFiles.length }} 张图片，系统将合并分析结果
                  } @else {
                    系统正在进行色彩、纹理、形态、图案和灯光分析
                  }
                </p>
              </div>
            </div>
          } @else if (analysisError) {
            <div class="analysis-error">
              <div class="error-icon">❌</div>
              <div class="error-text">
                <h4>分析失败</h4>
                <p>{{ analysisError }}</p>
                <button class="retry-btn" (click)="retryAnalysis()">重新分析</button>
              </div>
            </div>
          } @else if (analysisResult) {
            <div class="analysis-result">
              <h4>分析完成 ✅</h4>
              <div class="analysis-summary">
                <div class="summary-item">
                  <span class="label">主要颜色:</span>
                  <span class="value">{{ analysisResult.enhancedAnalysis?.colorWheel?.colorDistribution?.length || 0 }} 种</span>
                </div>
                <div class="summary-item">
                  <span class="label">材质类型:</span>
                  <span class="value">{{ getMaterialName(analysisResult.textureAnalysis?.materialClassification?.primaryMaterial?.category) || '未识别' }}</span>
                </div>
                <div class="summary-item">
                  <span class="label">灯光情绪:</span>
                  <span class="value">{{ getLightingMoodName(analysisResult.lightingAnalysis?.ambientAnalysis?.lightingMood?.primary) || '未识别' }}</span>
                </div>
                <div class="summary-item">
                  <span class="label">空间形态:</span>
                  <span class="value">{{ analysisResult.formAnalysis?.geometryAnalysis?.complexity ? getComplexityName(analysisResult.formAnalysis.geometryAnalysis.complexity) : '未识别' }}</span>
                </div>
              </div>
            </div>
          } @else {
            <div class="analysis-placeholder">
              <div class="placeholder-icon">🔍</div>
              <div class="placeholder-text">
                <h4>等待分析</h4>
                <p>请先上传图片，系统将自动开始分析</p>
              </div>
            </div>
          }
        </div>

        <!-- 需求映射结果区域 -->
        <div class="mapping-section" [class.disabled]="!analysisResult">
          <h3>3. 需求映射生成</h3>
          
          @if (isGeneratingMapping) {
            <div class="mapping-loading">
              <div class="loading-spinner"></div>
              <div class="loading-text">
                <h4>正在生成需求映射...</h4>
                <p>基于分析结果生成场景参数和映射关系</p>
              </div>
            </div>
          } @else if (mappingError) {
            <div class="mapping-error">
              <div class="error-icon">❌</div>
              <div class="error-text">
                <h4>映射生成失败</h4>
                <p>{{ mappingError }}</p>
                <button class="retry-btn" (click)="retryMapping()">重新生成</button>
              </div>
            </div>
          } @else if (requirementMapping) {
            <div class="mapping-result">
              <h4>需求映射生成完成 ✅</h4>
              
              <!-- 场景生成信息 -->
              <div class="mapping-section-item">
                <h5>场景生成</h5>
                <div class="scene-info">
                  <div class="info-row">
                    <span class="label">基础场景:</span>
                    <span class="value">{{ requirementMapping.sceneGeneration.baseScene }}</span>
                  </div>
                  @if (requirementMapping.sceneGeneration.atmospherePreview) {
                    <div class="atmosphere-preview">
                      <img [src]="requirementMapping.sceneGeneration.atmospherePreview" 
                           alt="氛围感预览图"
                           class="preview-image">
                      <div class="preview-label">氛围感预览图</div>
                    </div>
                  }
                </div>
              </div>

              <!-- 参数映射信息 -->
              <div class="mapping-section-item">
                <h5>参数映射</h5>
                <div class="params-grid">
                  <!-- 颜色参数 -->
                  <div class="param-group">
                    <h6>颜色映射</h6>
                    <div class="color-params">
                      <div class="param-item">
                        <span class="label">主要颜色:</span>
                        <span class="value">{{ requirementMapping.parameterMapping.colorParams.primaryColors.length }} 种</span>
                      </div>
                      <div class="param-item">
                        <span class="label">色彩和谐:</span>
                        <span class="value">{{ getColorHarmonyName(requirementMapping.parameterMapping.colorParams.colorHarmony) }}</span>
                      </div>
                      <div class="param-item">
                        <span class="label">饱和度:</span>
                        <span class="value">{{ requirementMapping.parameterMapping.colorParams.saturation }}%</span>
                      </div>
                      <div class="param-item">
                        <span class="label">亮度:</span>
                        <span class="value">{{ requirementMapping.parameterMapping.colorParams.brightness }}%</span>
                      </div>
                    </div>
                  </div>

                  <!-- 空间参数 -->
                  <div class="param-group">
                    <h6>空间映射</h6>
                    <div class="space-params">
                      <div class="param-item">
                        <span class="label">布局类型:</span>
                        <span class="value">{{ getLayoutTypeName(requirementMapping.parameterMapping.spaceParams.layout.type) }}</span>
                      </div>
                      <div class="param-item">
                        <span class="label">空间流线:</span>
                        <span class="value">{{ getFlowTypeName(requirementMapping.parameterMapping.spaceParams.layout.flow) }}</span>
                      </div>
                      <div class="param-item">
                        <span class="label">家具比例:</span>
                        <span class="value">{{ requirementMapping.parameterMapping.spaceParams.scale.furniture }}%</span>
                      </div>
                      <div class="param-item">
                        <span class="label">开放度:</span>
                        <span class="value">{{ requirementMapping.parameterMapping.spaceParams.scale.openness }}%</span>
                      </div>
                    </div>
                  </div>

                  <!-- 材质参数 -->
                  <div class="param-group">
                    <h6>材质映射</h6>
                    <div class="material-params">
                      <div class="param-item">
                        <span class="label">纹理缩放:</span>
                        <span class="value">{{ requirementMapping.parameterMapping.materialParams.textureScale }}%</span>
                      </div>
                      <div class="param-item">
                        <span class="label">反射率:</span>
                        <span class="value">{{ requirementMapping.parameterMapping.materialParams.reflectivity }}%</span>
                      </div>
                      <div class="param-item">
                        <span class="label">粗糙度:</span>
                        <span class="value">{{ requirementMapping.parameterMapping.materialParams.roughness }}%</span>
                      </div>
                      <div class="param-item">
                        <span class="label">金属度:</span>
                        <span class="value">{{ requirementMapping.parameterMapping.materialParams.metallic }}%</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 测试结果下载 -->
              <div class="test-actions">
                <button class="download-btn" (click)="downloadTestResult()">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7,10 12,15 17,10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                  </svg>
                  下载测试结果
                </button>
              </div>
            </div>
          } @else {
            <div class="mapping-placeholder">
              <div class="placeholder-icon">🎯</div>
              <div class="placeholder-text">
                <h4>等待映射生成</h4>
                <p>请先完成图片分析，系统将自动生成需求映射</p>
              </div>
            </div>
          }
        </div>
      </div>
    }

    <!-- 协作验证标签页 -->
    @if (activeTab === 'collaboration') {
      <div class="collaboration-section">
        <!-- 一致性预警 -->
        @if (consistencyWarnings.length > 0) {
          <div class="consistency-warning">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2L1 21h22L12 2zm0 3.99L19.53 19H4.47L12 5.99zM11 16h2v2h-2v-2zm0-6h2v4h-2v-4z"/>
            </svg>
            <div>
              <strong>一致性预警：</strong>
              @for (warning of consistencyWarnings; track warning) {
                <div>{{ warning }}</div>
              }
            </div>
          </div>
        }

        <!-- 需求列表 -->
        <div class="requirements-list">
          <div class="list-header">
            <h5>需求项目</h5>
            <div class="list-controls">
              <button class="btn-ghost btn-sm" (click)="sortRequirementsByPriority()">按优先级排序</button>
              <button class="btn-ghost btn-sm" (click)="saveCurrentState()">保存状态</button>
            </div>
          </div>

          @for (requirement of requirementItems; track requirement.id) {
            <div class="requirement-item" [class]="getStatusClass(requirement.status)">
              <div class="requirement-header">
                <div class="requirement-info">
                  <h6>{{ requirement.title }}</h6>
                  <p>{{ requirement.description }}</p>
                  <div class="requirement-tags">
                    @for (tag of requirement.tags; track tag) {
                      <span class="tag">{{ tag }}</span>
                    }
                  </div>
                </div>
                <div class="requirement-meta">
                  <select class="priority-select" 
                          [value]="requirement.priority" 
                          (change)="onPriorityChange(requirement.id, $event)">
                    <option value="high">高优先级</option>
                    <option value="medium">中优先级</option>
                    <option value="low">低优先级</option>
                  </select>
                  <span class="status-badge" [class]="getStatusClass(requirement.status)">
                    {{ requirement.status === 'confirmed' ? '已确认' : requirement.status === 'rejected' ? '已拒绝' : '待确认' }}
                  </span>
                </div>
              </div>
              
              <div class="requirement-actions">
                @if (requirement.status === 'pending') {
                  <button class="btn-success btn-sm" (click)="confirmRequirement(requirement.id)">确认</button>
                  <button class="btn-danger btn-sm" (click)="rejectRequirement(requirement.id, '需要进一步讨论')">拒绝</button>
                }
                <button class="btn-ghost btn-sm" (click)="requirement.showComments = !requirement.showComments">
                  评论 ({{ getCommentsForRequirement(requirement.id).length }})
                  @if (hasUnreadComments(requirement.id)) {
                    <span class="unread-indicator"></span>
                  }
                </button>
              </div>

              @if (requirement.showComments) {
                <div class="comments-section">
                  @if (getCommentsForRequirement(requirement.id).length > 0) {
                    <div class="comments-list">
                      @for (comment of getCommentsForRequirement(requirement.id); track comment.id) {
                        <div class="comment-item" [class.resolved]="comment.status === 'resolved'">
                          <div class="comment-header">
                            <span class="comment-author">{{ comment.author }}</span>
                            <span class="comment-role">{{ comment.role === 'designer' ? '设计师' : comment.role === 'customer-service' ? '客服' : '客户' }}</span>
                            <span class="comment-time">{{ comment.timestamp | date:'MM-dd HH:mm' }}</span>
                            @if (comment.status === 'pending') {
                              <button class="btn-ghost btn-xs" (click)="resolveComment(comment.id)">标记已解决</button>
                            }
                          </div>
                          <div class="comment-content">{{ comment.content }}</div>
                        </div>
                      }
                    </div>
                  }
                  <div class="add-comment">
                    <textarea #commentInput placeholder="添加评论..." rows="2"></textarea>
                    <button class="btn-primary btn-sm" (click)="addCommentToRequirement(requirement.id, commentInput.value); commentInput.value = ''">
                      发送
                    </button>
                  </div>
                </div>
              }
            </div>
          }
        </div>
      </div>
    }

    <!-- 进度管理标签页 -->
    @if (activeTab === 'progress') {
      <div class="progress-section">
        <!-- 整体进度 -->
        <div class="overall-progress">
          <div class="section-header">
            <h5>整体进度</h5>
          </div>
          
          <div class="progress-container">
            <div class="progress-visual">
              <div class="linear-progress">
                <div class="progress-track">
                  <div class="progress-bar-fill" [style.width.%]="getProgressPercentage()"></div>
                </div>
                <div class="progress-text">{{ getProgressPercentage() }}%</div>
              </div>
              
              <div class="circular-progress">
                <svg viewBox="0 0 120 120" class="progress-circle">
                  <circle cx="60" cy="60" r="54" fill="none" stroke="#e5e7eb" stroke-width="8"></circle>
                  <circle cx="60" cy="60" r="54" fill="none" stroke="#3b82f6" stroke-width="8"
                    stroke-linecap="round"
                    [attr.stroke-dasharray]="339.292"
                    [attr.stroke-dashoffset]="339.292 - (339.292 * getProgressPercentage() / 100)"
                    transform="rotate(-90 60 60)">
                  </circle>
                </svg>
                <div class="progress-text">
                  <div class="progress-percentage">{{ getProgressPercentage() }}%</div>
                  <div class="progress-label">完成度</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 进度统计 -->
        <div class="progress-stats">
          <div class="stat-item">
              <div class="stat-number">{{ getRequirementCountByStatus('confirmed') }}</div>
              <div class="stat-label">已确认</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ getRequirementCountByStatus('pending') }}</div>
              <div class="stat-label">待确认</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ getRequirementCountByStatus('rejected') }}</div>
              <div class="stat-label">已拒绝</div>
            </div>
          <div class="stat-item">
            <div class="stat-number">{{ getUnresolvedCommentsCount() }}</div>
            <div class="stat-label">待解决评论</div>
          </div>
        </div>

        <!-- 历史状态 -->
        <div class="history-section">
          <div class="section-header">
            <h5>历史状态</h5>
            <div class="history-controls">
              <button class="btn-ghost btn-sm" (click)="saveCurrentState()">保存当前状态</button>
              <select class="history-select" (change)="onHistoryStateChange($event)">
                <option value="-1">选择历史状态</option>
                @for (state of historyStates; track $index) {
                  <option [value]="$index">{{ state.timestamp | date:'MM-dd HH:mm' }} - {{ state.author }}</option>
                }
              </select>
            </div>
          </div>

          @if (historyStates.length > 0) {
            <div class="history-timeline">
              @for (state of historyStates; track $index) {
                <div class="timeline-item" (click)="restoreHistoryState($index)">
                  <div class="timeline-marker"></div>
                  <div class="timeline-content">
                    <div class="timeline-header">
                      <span class="timeline-time">{{ state.timestamp | date:'MM-dd HH:mm' }}</span>
                      <span class="timeline-author">{{ state.author }}</span>
                    </div>
                    <div class="timeline-summary">
                      状态快照：{{ state.requirementItems.length }}个需求项，
                      {{ getRequirementCountByStatus('confirmed') }}个已确认
                    </div>
                  </div>
                </div>
              }
            </div>
          } @else {
            <div class="empty-history">
              <p>暂无历史状态记录</p>
              <button class="btn-primary btn-sm" (click)="saveCurrentState()">保存当前状态</button>
            </div>
          }
        </div>

        <!-- 需求状态分布 -->
        <div class="status-distribution">
          <h5>需求状态分布</h5>
          <div class="status-bars">
            <div class="status-bar">
              <div class="status-info">
                <span class="status-name">已确认</span>
                <span class="status-count">{{ getRequirementCountByStatus('confirmed') }}</span>
              </div>
              <div class="status-progress">
                <div class="progress-bar confirmed" 
                     [style.width.%]="getStatusPercentage('confirmed')"></div>
              </div>
            </div>
            
            <div class="status-bar">
              <div class="status-info">
                <span class="status-name">待确认</span>
                <span class="status-count">{{ getRequirementCountByStatus('pending') }}</span>
              </div>
              <div class="status-progress">
                <div class="progress-bar pending" 
                     [style.width.%]="getStatusPercentage('pending')"></div>
              </div>
            </div>
            
            <div class="status-bar">
              <div class="status-info">
                <span class="status-name">已拒绝</span>
                <span class="status-count">{{ getRequirementCountByStatus('rejected') }}</span>
              </div>
              <div class="status-progress">
                <div class="progress-bar rejected" 
                     [style.width.%]="getStatusPercentage('rejected')"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    }
  </div>
</div>

<!-- 保存状态和手动保存按钮 -->
<div class="save-section">
  <div class="save-status">
    <span class="save-icon" [class]="'save-icon-' + saveStatus">{{ getSaveStatusIcon() }}</span>
    <span class="save-text">{{ getSaveStatusText() }}</span>
  </div>
  
  <div class="save-actions">
    <button class="btn-secondary" 
            [disabled]="isSaving || !hasUnsavedChanges"
            (click)="manualSave()">
      @if (isSaving) {
        <span class="loading-spinner"></span>
        保存中...
      } @else {
        手动保存
      }
    </button>
    
    <div class="auto-save-toggle">
      <label class="toggle-label">
        <input type="checkbox" 
               [(ngModel)]="autoSaveEnabled"
               class="toggle-input">
        <span class="toggle-slider"></span>
        <span class="toggle-text">自动保存</span>
      </label>
    </div>
  </div>
</div>

<!-- 上传成功弹窗 -->
<app-upload-success-modal
  [isVisible]="showUploadSuccessModal"
  [uploadedFiles]="uploadedFiles"
  [uploadType]="uploadType"
  [analysisResult]="colorAnalysisResult"
  [isAnalyzing]="isAnalyzingColors"
  (closeModal)="onModalClose()"
  (analyzeColors)="onAnalyzeColors()"
  (viewReport)="onViewReport()">
</app-upload-success-modal>

<!-- 全局提示（支持全屏与角落两模式） -->
<app-global-prompt
  [visible]="showGlobalPrompt"
  [title]="promptTitle"
  [message]="promptMessage"
  [mode]="promptMode"
  [position]="promptPosition"
  [autoDismissMs]="4000"
  (closed)="onPromptClose()">
</app-global-prompt>

<!-- 完整报告全屏覆盖层 -->
<app-full-report-overlay
  [visible]="showFullReportOverlay"
  [colorResult]="colorAnalysisResult"
  [cadResult]="cadAnalysisResult"
  (close)="onCloseFullReport()">
</app-full-report-overlay>