yss-project/src/app/shared/components/upload-success-modal/upload-success-modal.component.html

<!-- 上传成功弹窗 -->
@if (isVisible) {
  <div class="modal-backdrop" 
       [@backdropAnimation]
       (click)="onBackdropClick($event)"
       style="position: fixed !important; 
              top: 0 !important; 
              left: 0 !important; 
              right: 0 !important;
              bottom: 0 !important;
              width: 100vw !important; 
              height: 100vh !important; 
              display: flex !important;
              align-items: center !important;
              justify-content: center !important;
              z-index: 99999 !important; 
              pointer-events: auto !important;
              background: rgba(0, 0, 0, 0.6) !important;">
    
    <div class="modal-container" 
         [@modalAnimation]
         [class.mobile]="isMobile"
         [class.tablet]="isTablet"
         (click)="$event.stopPropagation()"
         style="pointer-events: auto !important; 
                z-index: 100000 !important; 
                position: relative !important;
                margin: auto !important;
                max-width: 600px !important;
                width: 90% !important;">
      
      <!-- 弹窗头部 -->
      <div class="modal-header" [@fadeInOut]>
        <div class="header-content">
          <div class="success-icon" [@successIconAnimation]>
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="10" fill="#10B981"/>
              <path d="m9 12 2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="header-text">
            <h2>上传成功！</h2>
            <p>已成功上传 {{ uploadedFiles.length }} 个文件</p>
          </div>
        </div>
        
        <button class="close-button" 
                (click)="onClose()"
                [@buttonHoverAnimation]="buttonHoverState"
                (mouseenter)="buttonHoverState = 'hover'"
                (mouseleave)="buttonHoverState = 'normal'"
                aria-label="关闭弹窗"
                style="pointer-events: auto !important; z-index: 100001 !important; cursor: pointer !important; position: relative !important;">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
      </div>

      <!-- 弹窗内容 -->
      <div class="modal-content">
        <!-- 已上传文件列表 -->
        <div class="uploaded-files" [@fileListAnimation]="uploadedFiles.length">
          <h3>已上传文件</h3>
          <div class="file-list">
            @for (file of uploadedFiles; track file.id) {
              <div class="file-item" [@slideInOut]>
                <div class="file-icon">
                  @if (file.type?.startsWith('image/')) {
                    <img [src]="file.preview || '/assets/images/file-image.svg'" 
                         [alt]="file.name"
                         class="file-preview">
                  } @else {
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" 
                            fill="#6B7280"/>
                      <polyline points="14,2 14,8 20,8" fill="#9CA3AF"/>
                    </svg>
                  }
                </div>
                <div class="file-info">
                  <span class="file-name">{{ file.name }}</span>
                  <span class="file-size">{{ formatFileSize(file.size || 0) }}</span>
                </div>
                <div class="file-status success">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10" fill="#10B981"/>
                    <path d="m9 12 2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </div>
              </div>
            }
          </div>
        </div>

        <!-- 颜色分析功能区域 -->
        @if (shouldShowColorAnalysis()) {
          <div class="color-analysis-section">
            <div class="section-header">
              <h4>智能颜色分析</h4>
              <p>基于上传的参考图片，自动提取主要色彩和材质信息</p>
            </div>

            <!-- 分析按钮或结果 -->
            @if (!analysisResult && !isAnalyzing) {
              <div class="analysis-action">
                <button class="analyze-btn" 
                        (click)="startColorAnalysis()"
                        [disabled]="isAnalyzing">
                  <svg width="20" height="20" 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 0H1m15.5-6.5l-4.24 4.24M7.76 16.24l-4.24 4.24m0-8.48l4.24 4.24m8.48 0l4.24-4.24"></path>
                  </svg>
                  开始颜色分析
                </button>
              </div>
            }

            <!-- 分析进行中 -->
            @if (isAnalyzing) {
              <div class="analysis-loading">
                <div class="loading-spinner"></div>
                <div class="loading-text">
                  <h5>正在分析图片颜色...</h5>
                  <p>请稍候，系统正在提取主要色彩信息</p>
                </div>
              </div>
            }

            <!-- 分析结果 -->
            @if (analysisResult && !isAnalyzing) {
              <div class="analysis-result">
                <div class="result-header">
                  <h5>颜色分析结果</h5>
                  <span class="result-count">提取到 {{ analysisResult.colors.length }} 种主要颜色</span>
                </div>
                
                <div class="color-palette">
                  @for (colorInfo of analysisResult.colors; track colorInfo.hex) {
                    <div class="color-item">
                      <div class="color-swatch" 
                           [style.background-color]="colorInfo.hex"
                           [title]="colorInfo.hex + ' (' + colorInfo.percentage + '%)'">
                      </div>
                      <div class="color-info">
                        <div class="color-value">{{ colorInfo.hex }}</div>
                        <div class="color-percentage">{{ colorInfo.percentage }}%</div>
                      </div>
                    </div>
                  }
                </div>

                <!-- 增强分析结果 -->
                @if (analysisResult.enhancedAnalysis) {
                  <div class="enhanced-analysis">
                    <div class="analysis-tabs">
                      <button class="tab-btn" 
                              [class.active]="activeTab === 'color'"
                              (click)="activeTab = 'color'">色彩分析</button>
                      <button class="tab-btn" 
                              [class.active]="activeTab === 'form'"
                              (click)="activeTab = 'form'">形体分析</button>
                      <button class="tab-btn" 
                              [class.active]="activeTab === 'texture'"
                              (click)="activeTab = 'texture'">质感分析</button>
                      <button class="tab-btn" 
                              [class.active]="activeTab === 'pattern'"
                              (click)="activeTab = 'pattern'">纹理分析</button>
                      <button class="tab-btn" 
                              [class.active]="activeTab === 'lighting'"
                              (click)="activeTab = 'lighting'">灯光分析</button>
                      <button class="tab-btn" 
                              [class.active]="activeTab === 'mapping'"
                              (click)="activeTab = 'mapping'">需求映射</button>
                    </div>

                    <div class="tab-content">
                      <!-- 色彩分析标签页 -->
                      @if (activeTab === 'color') {
                        <div class="color-analysis-tab">
                          <div class="analysis-section">
                            <h6>色轮分析</h6>
                            
                            <!-- 色轮可视化 -->
                            <div class="color-wheel-visualization">
                              <svg width="200" height="200" viewBox="0 0 200 200" class="color-wheel-svg">
                                <!-- 背景色轮 -->
                                <defs>
                                  <linearGradient id="colorWheelGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
                                    <stop offset="16.67%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
                                    <stop offset="33.33%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
                                    <stop offset="50%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
                                    <stop offset="66.67%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
                                    <stop offset="83.33%" style="stop-color:rgb(255,0,255);stop-opacity:1" />
                                    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
                                  </linearGradient>
                                </defs>
                                
                                <!-- 色轮圆环 -->
                                <circle cx="100" cy="100" r="80" fill="none" stroke="url(#colorWheelGradient)" stroke-width="30" opacity="0.3"/>
                                
                                <!-- 主色调指示器 -->
                                <line 
                                  x1="100" 
                                  y1="100" 
                                  [attr.x2]="100 + 70 * Math.cos((analysisResult.enhancedAnalysis.colorWheel.dominantHue - 90) * Math.PI / 180)"
                                  [attr.y2]="100 + 70 * Math.sin((analysisResult.enhancedAnalysis.colorWheel.dominantHue - 90) * Math.PI / 180)"
                                  stroke="#333" 
                                  stroke-width="3"
                                  stroke-linecap="round"/>
                                
                                <!-- 中心圆点 -->
                                <circle cx="100" cy="100" r="5" fill="#333"/>
                                
                                <!-- 色彩分布点 -->
                                @for (color of analysisResult.enhancedAnalysis.colorWheel.colorDistribution; track color.hue) {
                                  <circle 
                                    [attr.cx]="100 + (60 + color.saturation * 0.2) * Math.cos((color.hue - 90) * Math.PI / 180)"
                                    [attr.cy]="100 + (60 + color.saturation * 0.2) * Math.sin((color.hue - 90) * Math.PI / 180)"
                                    [attr.r]="3 + color.percentage * 0.1"
                                    [attr.fill]="'hsl(' + color.hue + ',' + color.saturation + '%,' + color.brightness + '%)'"
                                    opacity="0.8"/>
                                }
                              </svg>
                            </div>
                            
                            <div class="color-wheel-info">
                              <div class="info-item">
                                <span class="label">主色调:</span>
                                <span class="value">{{ analysisResult.enhancedAnalysis.colorWheel.dominantHue }}°</span>
                              </div>
                              <div class="info-item">
                                <span class="label">饱和度范围:</span>
                                <span class="value">{{ (analysisResult.enhancedAnalysis.colorWheel.saturationRange?.min || 0) }}% - {{ (analysisResult.enhancedAnalysis.colorWheel.saturationRange?.max || 100) }}%</span>
                              </div>
                            </div>
                          </div>
                          
                          <div class="analysis-section">
                            <h6>色彩心理学</h6>
                            <div class="psychology-info">
                              <div class="mood-atmosphere">
                                <span class="mood">{{ analysisResult.enhancedAnalysis.colorPsychology.mood || '无' }}</span>
                                <span class="atmosphere">{{ analysisResult.enhancedAnalysis.colorPsychology.atmosphere || '无' }}</span>
                              </div>
                              <div class="suitable-spaces">
                                @for (space of analysisResult.enhancedAnalysis.colorPsychology.suitableSpaces; track space) {
                                  <span class="space-tag">{{ space }}</span>
                                }
                              </div>
                            </div>
                          </div>
                        </div>
                      }

                      <!-- 形体分析标签页 -->
                      @if (activeTab === 'form' && analysisResult.formAnalysis) {
                        <div class="form-analysis-tab">
                          <div class="analysis-section">
                            <h6>线条分析</h6>
                            <div class="form-info">
                              <div class="info-item">
                                <span class="label">主导线条:</span>
                                <span class="value">
                                  @switch (analysisResult.formAnalysis.lineAnalysis.dominantLineType) {
                                    @case ('straight') { 直线型 }
                                    @case ('curved') { 曲线型 }
                                    @case ('mixed') { 混合型 }
                                    @default { 未知 }
                                  }
                                </span>
                              </div>
                              <div class="info-item">
                                <span class="label">视觉流动:</span>
                                <span class="value">
                                  连续性 {{ analysisResult.formAnalysis.lineAnalysis.lineQuality.continuity || 0 }}%, 
                                  流畅度 {{ analysisResult.formAnalysis.lineAnalysis.lineQuality.smoothness || 0 }}%
                                </span>
                              </div>
                            </div>
                          </div>
                          
                          <div class="analysis-section">
                            <h6>几何形状</h6>
                            <div class="overall-info">
                              <div class="metric">
                                <span class="metric-label">复杂度</span>
                                <div class="metric-bar">
                                  <div class="metric-fill" [style.width.%]="getComplexityScore(analysisResult.formAnalysis.geometryAnalysis.complexity)"></div>
                                </div>
                                <span class="metric-value">{{ analysisResult.formAnalysis.geometryAnalysis.complexity || '未知' }}</span>
                              </div>
                              <div class="metric">
                                <span class="metric-label">视觉平衡</span>
                                <div class="metric-bar">
                                  <div class="metric-fill" [style.width.%]="analysisResult.formAnalysis.geometryAnalysis.balance.visual"></div>
                                </div>
                                <span class="metric-value">{{ analysisResult.formAnalysis.geometryAnalysis.balance.visual || 0 }}%</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      }

                      <!-- 质感分析标签页 -->
                      @if (activeTab === 'texture' && analysisResult.textureAnalysis) {
                        <div class="texture-analysis-tab">
                          <div class="analysis-section">
                            <h6>表面属性</h6>
                            <div class="texture-properties">
                              @for (property of getTextureProperties(); track property.name) {
                                <div class="property-item">
                                  <span class="property-name">{{ property.name }}</span>
                                  <div class="property-bar">
                                    <div class="property-fill" [style.width.%]="property.value"></div>
                                  </div>
                                  <span class="property-value">{{ property.value }}%</span>
                                </div>
                              }
                            </div>
                          </div>
                          
                          <div class="analysis-section">
                            <h6>材质分类</h6>
                            <div class="material-tags">
                              <span class="material-tag primary">
                                {{ getMaterialName(analysisResult.textureAnalysis.materialClassification.primaryMaterial.category) }}
                                @if (analysisResult.textureAnalysis.materialClassification.primaryMaterial.subcategory) {
                                  ({{ analysisResult.textureAnalysis.materialClassification.primaryMaterial.subcategory }})
                                }
                              </span>
                              @for (material of analysisResult.textureAnalysis.materialClassification.secondaryMaterials; track material.category; let i = $index) {
                                <span class="material-tag secondary">
                                  {{ getMaterialName(material.category) }} ({{ material.percentage }}%)
                                </span>
                              }
                            </div>
                          </div>
                        </div>
                      }

                      <!-- 纹理分析标签页 -->
                      @if (activeTab === 'pattern' && analysisResult.patternAnalysis) {
                        <div class="pattern-analysis-tab">
                          <div class="analysis-section">
                            <h6>图案识别</h6>
                            <div class="pattern-info">
                              <div class="info-item">
                                <span class="label">主要图案:</span>
                                <span class="value">{{ getPatternTypeName(analysisResult.patternAnalysis.patternRecognition.primaryPatterns[0]?.type) || '无' }}</span>
                              </div>
                              <div class="info-item">
                                <span class="label">复杂度:</span>
                                <span class="value">{{ getComplexityName(analysisResult.patternAnalysis.patternRecognition.patternComplexity.level) || '无' }}</span>
                              </div>
                            </div>
                          </div>
                          
                          <div class="analysis-section">
                            <h6>视觉节奏</h6>
                            <div class="rhythm-info">
                              <div class="rhythm-tags">
                                <span class="rhythm-tag">{{ getRhythmTypeName(analysisResult.patternAnalysis.visualRhythm.rhythmType.primary) || '无' }}</span>
                                <span class="rhythm-tag">{{ getDirectionName(analysisResult.patternAnalysis.visualRhythm.movement.direction) || '无' }}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      }

                      <!-- 灯光分析标签页 -->
                      @if (activeTab === 'lighting' && analysisResult.lightingAnalysis) {
                        <div class="lighting-analysis-tab">
                          <div class="analysis-section">
                            <h6>光源识别</h6>
                            <div class="lighting-info">
                              <div class="info-item">
                                <span class="label">主要光源:</span>
                                <span class="value">
                                  @if (analysisResult.lightingAnalysis.lightSourceIdentification.primarySources && analysisResult.lightingAnalysis.lightSourceIdentification.primarySources.length > 0) {
                                    @for (source of analysisResult.lightingAnalysis.lightSourceIdentification.primarySources; track source.type; let last = $last) {
                                      {{ getLightSourceName(source.type, source.subtype) }}@if (!last) {, }
                                    }
                                  } @else {
                                    无
                                  }
                                </span>
                              </div>
                              <div class="info-item">
                                <span class="label">灯光设置:</span>
                                <span class="value">
                                  {{ getLightingStyleName(analysisResult.lightingAnalysis.lightSourceIdentification.lightingSetup.lightingStyle) || '无' }}
                                  ({{ analysisResult.lightingAnalysis.lightSourceIdentification.lightingSetup.sourceCount || 0 }} 个光源)
                                </span>
                              </div>
                            </div>
                          </div>
                          
                          <div class="analysis-section">
                            <h6>环境分析</h6>
                            <div class="ambient-info">
                              <div class="info-item">
                                <span class="label">环境光:</span>
                                <span class="value">
                                  强度 {{ analysisResult.lightingAnalysis.ambientAnalysis.ambientLevel.strength || 0 }}%, 
                                  均匀度 {{ analysisResult.lightingAnalysis.ambientAnalysis.ambientLevel.uniformity || 0 }}%
                                </span>
                              </div>
                              <div class="info-item">
                                <span class="label">灯光情绪:</span>
                                <span class="value">{{ getLightingMoodName(analysisResult.lightingAnalysis.ambientAnalysis.lightingMood.primary) || '无' }}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      }

                      <!-- 需求映射标签页 -->
                      @if (activeTab === 'mapping') {
                        <div class="mapping-analysis-tab">
                          @if (isGeneratingMapping) {
                            <div class="mapping-loading">
                              <div class="loading-spinner"></div>
                              <div class="loading-text">
                                <h6>正在生成需求映射...</h6>
                                <p>基于分析结果生成场景参数和映射关系</p>
                              </div>
                            </div>
                          } @else if (mappingError) {
                            <div class="mapping-error">
                              <div class="error-icon">⚠️</div>
                              <div class="error-text">
                                <h6>需求映射生成失败</h6>
                                <p>{{ mappingError }}</p>
                                <button class="retry-btn" (click)="regenerateRequirementMapping()">
                                  重新生成
                                </button>
                              </div>
                            </div>
                          } @else if (requirementMapping) {
                            <div class="mapping-result">
                              <!-- 场景生成部分 -->
                              <div class="analysis-section">
                                <h6>场景生成</h6>
                                <div class="scene-info">
                                  <div class="info-item">
                                    <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>
                                  }
                                </div>
                              </div>

                              <!-- 参数映射部分 -->
                              <div class="analysis-section">
                                <h6>参数映射</h6>
                                
                                <!-- 颜色参数 -->
                                <div class="mapping-subsection">
                                  <h6>颜色映射</h6>
                                  <div class="color-mappings">
                                    @for (mapping of requirementMapping.parameterMapping.colorParams.primaryColors; track mapping.originalColor) {
                                      <div class="color-mapping-item">
                                        <div class="color-swatch" [style.background-color]="mapping.originalColor"></div>
                                        <span class="mapping-arrow">→</span>
                                        <div class="color-swatch" [style.background-color]="mapping.mappedColor"></div>
                                        <span class="usage-tag">{{ getColorUsageName(mapping.usage) }}</span>
                                        <span class="confidence">(权重 {{ mapping.weight }}%)</span>
                                      </div>
                                    }
                                  </div>
                                  <div class="color-params-info">
                                    <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">{{ getTemperatureName(requirementMapping.parameterMapping.colorParams.temperature) }}</span>
                                    </div>
                                  </div>
                                </div>

                                <!-- 空间参数 -->
                                <div class="mapping-subsection">
                                  <h6>空间映射</h6>
                                  <div class="space-info">
                                    <div class="info-item">
                                      <span class="label">空间类型:</span>
                                      <span class="value">{{ getLayoutTypeName(requirementMapping.parameterMapping.spaceParams.layout.type) }}</span>
                                    </div>
                                    <div class="info-item">
                                      <span class="label">空间流线:</span>
                                      <span class="value">{{ getFlowTypeName(requirementMapping.parameterMapping.spaceParams.layout.flow) }}</span>
                                    </div>
                                    <div class="info-item">
                                      <span class="label">开放程度:</span>
                                      <span class="value">{{ requirementMapping.parameterMapping.spaceParams.scale.openness }}%</span>
                                    </div>
                                    <div class="info-item">
                                      <span class="label">尺寸:</span>
                                      <span class="value">
                                        {{ requirementMapping.parameterMapping.spaceParams.dimensions.width }} × 
                                        {{ requirementMapping.parameterMapping.spaceParams.dimensions.height }} × 
                                        {{ requirementMapping.parameterMapping.spaceParams.dimensions.depth }} 
                                        {{ getDimensionUnitName(requirementMapping.parameterMapping.spaceParams.dimensions.unit) }}
                                      </span>
                                    </div>
                                  </div>
                                </div>

                                <!-- 材质参数 -->
                                <div class="mapping-subsection">
                                  <h6>材质映射</h6>
                                  <div class="material-mappings">
                                    @for (mapping of requirementMapping.parameterMapping.materialParams.surfaceMaterials; track mapping.category) {
                                      <div class="material-mapping-item">
                                        <span class="source-texture">{{ getMaterialName(mapping.category) }}</span>
                                        <span class="mapping-arrow">→</span>
                                        <span class="target-material">{{ mapping.subtype }}</span>
                                        <span class="properties">
                                          {{ getFinishName(mapping.finish) }}, 
                                          {{ getPriorityName(mapping.priority) }}
                                        </span>
                                        <span class="coverage">({{ mapping.coverage }}%)</span>
                                      </div>
                                    }
                                  </div>
                                </div>
                              </div>

                              <!-- 重新生成按钮 -->
                              <div class="mapping-actions">
                                <button class="regenerate-btn" (click)="regenerateRequirementMapping()">
                                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="23 4 23 10 17 10"></polyline>
                                    <polyline points="1 20 1 14 7 14"></polyline>
                                    <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                                  </svg>
                                  重新生成映射
                                </button>
                              </div>
                            </div>
                          } @else {
                            <div class="mapping-placeholder">
                              <div class="placeholder-icon">🎯</div>
                              <div class="placeholder-text">
                                <h6>需求映射未生成</h6>
                                <p>请先完成分析，系统将自动生成需求映射</p>
                              </div>
                            </div>
                          }
                        </div>
                      }
                    </div>
                  </div>
                }

                <div class="result-actions">
                  <button class="view-report-btn" (click)="onViewReportClick()">
                    <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>
                </div>

                <!-- 颜色描述文字区域 -->
                <div class="color-description-section">
                  <div class="description-header">
                    <h6>颜色描述文字</h6>
                    <p>适用于即梦等AI工具的颜色描述</p>
                  </div>
                  
                  <div class="description-content">
                    <div class="description-text" 
                         [class.has-content]="generateColorDescription()"
                         #descriptionText>
                      {{ generateColorDescription() || '暂无颜色分析结果' }}
                    </div>
                    
                    @if (generateColorDescription()) {
                      <button class="copy-description-btn" 
                              (click)="copyColorDescription()"
                              [class.copied]="copySuccess"
                              title="复制颜色描述">
                        @if (copySuccess) {
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="20,6 9,17 4,12"></polyline>
                          </svg>
                          已复制
                        } @else {
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                          </svg>
                          复制
                        }
                      </button>
                    }
                  </div>
                  
                  <div class="description-tips">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <circle cx="12" cy="12" r="10"></circle>
                      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                      <line x1="12" y1="17" x2="12.01" y2="17"></line>
                    </svg>
                    <span>复制后可直接粘贴到即梦等AI工具中，用于生成对应颜色风格的室内设计</span>
                  </div>
                </div>
              </div>
            }

            <!-- 分析错误 -->
            @if (analysisError) {
              <div class="analysis-error">
                <div class="error-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>
                    <line x1="15" y1="9" x2="9" y2="15"></line>
                    <line x1="9" y1="9" x2="15" y2="15"></line>
                  </svg>
                </div>
                <div class="error-text">
                  <h5>分析失败</h5>
                  <p>{{ analysisError }}</p>
                </div>
                <button class="retry-btn" (click)="startColorAnalysis()">
                  重试
                </button>
              </div>
            }
          </div>
        }
      </div>

      <!-- 弹窗底部 -->
      <div class="modal-footer">
        <div class="footer-actions">
          <button class="secondary-btn" (click)="onClose()">
            关闭
          </button>
          @if (shouldShowColorAnalysis() && !analysisResult) {
            <button class="primary-btn" 
                    (click)="startColorAnalysis()"
                    [disabled]="isAnalyzing">
              @if (isAnalyzing) {
                <div class="btn-spinner"></div>
                分析中...
              } @else {
                开始分析
              }
            </button>
          }
        </div>
      </div>
    </div>
  </div>
}