yss-project/src/app/components/test-requirement-mapping/test-requirement-mapping.component.html

<div class="test-requirement-mapping">
  <div class="test-header">
    <h2>需求映射功能完整工作流程测试</h2>
    <p class="test-description">
      测试从图片上传到生成需求映射的完整流程，包括图片分析、参数映射和氛围预览生成
    </p>
    <button class="reset-btn" (click)="resetTest()">重置测试</button>
  </div>

  <!-- 测试步骤进度 -->
  <div class="test-progress">
    <h3>测试进度</h3>
    <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)="onFileSelected($event)"
                 class="file-input">
        </div>
      } @else {
        <div class="uploaded-files">
          <h4>已上传文件 ({{ uploadedFiles.length }})</h4>
          <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>
              </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>系统正在进行色彩、纹理、形态、图案和灯光分析</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">{{ analysisResult.textureAnalysis?.materialClassification?.primary || '未识别' }}</span>
          </div>
          <div class="summary-item">
            <span class="label">灯光情绪:</span>
            <span class="value">{{ analysisResult.lightingAnalysis?.ambientAnalysis?.lightingMood || '未识别' }}</span>
          </div>
          <div class="summary-item">
            <span class="label">空间形态:</span>
            <span class="value">{{ analysisResult.formAnalysis?.spaceAnalysis?.spaceType || '未识别' }}</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">{{ 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">{{ requirementMapping.parameterMapping.spaceParams.layout.type }}</span>
                </div>
                <div class="param-item">
                  <span class="label">空间流线:</span>
                  <span class="value">{{ 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>

  <!-- 上传成功模态框 -->
  @if (showUploadModal) {
    <app-upload-success-modal
      [isVisible]="showUploadModal"
      [uploadedFiles]="uploadedFiles"
      [uploadType]="'image'"
      [analysisResult]="analysisResult"
      [isAnalyzing]="isAnalyzing"
      (closeModal)="onCloseModal()"
      (analyzeColors)="onAnalyzeColors($event)"
      (viewReport)="onViewReport($event)"
      (generateRequirementMapping)="onGenerateRequirementMapping($event)">
    </app-upload-success-modal>
  }
</div>