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

<!-- 只展示修改处，未变更部分用占位注释表示 -->
<div class="project-detail-container designer-page">
  <!-- 项目标题栏 -->
  <div class="project-header card">
    <div class="header-left">
      <div class="header-content">
        <h1>项目详情</h1>
        <div class="project-meta">
          <span class="project-id">项目ID: {{ projectId }}</span>
          @if (project) { <span class="project-status">{{ project.status }}</span> }
          <!-- 紧急与异常徽标（使用控制流指令） -->
          <!-- 保持已有@if 徽标逻辑不变 -->
        </div>
      </div>
    </div>
    
    <div class="header-right">
      <div class="header-actions">
        <!-- 导航条 - 移动到顶部与导出按钮水平对齐 -->
        <div class="top-nav-container">
          <app-vertical-nav 
            [activeTab]="activeTab" 
            (tabChange)="switchTab($event)"
            class="top-nav">
          </app-vertical-nav>
        </div>
        
        <!-- 导出阶段报告 -->
        <button (click)="exportProjectReport()" class="action-btn secondary-btn">
          <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>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
          </svg>
          导出报告
        </button>
        
        <button (click)="generateReminderMessage()" class="action-btn stagnation-btn">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
          设置停滞
        </button>
        
        <!-- 切换项目下拉菜单 -->
        <div class="project-switcher">
          <button (click)="showDropdown = !showDropdown" class="action-btn switch-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
              <polyline points="9 22 9 12 15 12 15 22"></polyline>
            </svg>
            切换项目
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="dropdown-icon">
              <polyline points="6 9 12 15 18 9"></polyline>
            </svg>
          </button>
          @if (showDropdown) {
            <div class="switch-dropdown" (click)="$event.stopPropagation()">
              @for (p of projects; track p.id) {
                <div (click)="switchProject(p.id); showDropdown = false" 
                     [class.active]="p.id === projectId" 
                     class="project-item">
                  <span class="project-name">{{ p.name }}</span>
                  <span class="project-status-badge" 
                        [class.ongoing]="p.status === '进行中'" 
                        [class.completed]="p.status === '已完成'" 
                        [class.pending]="p.status === '待处理'">
                    {{ p.status }}
                  </span>
                </div>
              }
            </div>
          }
        </div>

        <!-- 返回工作台按钮 -->
        <button (click)="backToWorkbench()" class="action-btn back-btn primary">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M19 12H5"></path>
            <polyline points="12 19 5 12 12 5"></polyline>
          </svg>
          返回工作台
        </button>
      </div>
    </div>

  <!-- 团队分配弹窗 -->
  @if (showTeamAssignmentModal) {
    <app-team-assignment-modal
      [isVisible]="showTeamAssignmentModal"
      (closeModal)="closeTeamAssignmentModal()"
      (confirmAssignment)="confirmTeamAssignment($event)">
    </app-team-assignment-modal>
  }
</div>

<!-- 四大板块按钮组 - 位于项目详情标题区域正下方 -->
<div class="sections-toolbar-header">
  @for (sec of sections; track sec.key) {
    <button class="section-btn"
            [class.completed]="getSectionStatus(sec.key) === 'completed'"
            [class.active]="getSectionStatus(sec.key) === 'active'"
            [class.pending]="getSectionStatus(sec.key) === 'pending'"
            [class.current-order]="sec.key === 'order' && isCurrentOrderCreation()"
            (click)="toggleSection(sec.key)">
      <span class="section-label">{{ sec.label }}</span>
    </button>
  }
</div>

<!-- 图片预览模态框 -->
@if (showImagePreview) {
  <div class="image-preview-modal" (click)="closeImagePreview()">
    <div class="modal-backdrop"></div>
    <div class="modal-content" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h3>{{ previewImageData?.name }}</h3>
        <button class="close-btn" (click)="closeImagePreview()">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <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="modal-body">
        <img [src]="previewImageData?.url" [alt]="previewImageData?.name" />
      </div>
      <div class="modal-footer">
        <div class="image-info">
          <span>文件大小: {{ previewImageData?.size }}</span>
          @if (previewImageData?.reviewStatus) {
            <span class="status-badge">{{ getImageReviewStatusText(previewImageData) }}</span>
          }
        </div>
        <div class="modal-actions">
          <button class="secondary-btn" (click)="downloadImage(previewImageData)">下载</button>
          <button class="danger-btn" (click)="removeImageFromPreview()">删除</button>
        </div>
      </div>
    </div>
  </div>
}

  <!-- 提醒消息弹窗 -->
  @if (reminderMessage) {
    <div class="reminder-popup">
      {{ reminderMessage }}
    </div>
  }

  <!-- 标准阶段进度（5阶段） -->
  <!-- 已采用@for，不变 -->

  <!-- 顶部导航标签页 -->
  <!-- 原有代码保留 -->

  <!-- 水平导航栏 - 已移动到顶部，此处删除 -->

  <div class="tab-content">
    <!-- 项目进度标签页 -->
    @if (isActiveTab('progress')) {
      <div class="progress-tab-content">
        <div class="main-content-layout">
          <!-- 左侧保留 -->
          <div class="left-column">
            <div class="project-info-card card">
              <h2>客户信息</h2>
              @if (project) {
                <div class="info-grid">
                  <!-- 显示订单创建时填写的客户信息，如果有的话 -->
                  @if (orderCreationData?.customerInfo) {
                    <div class="info-item key-info"><label>客户姓名</label><span>{{ orderCreationData.customerInfo.name }}</span></div>
                    <div class="info-item key-info"><label>手机号码</label><span>{{ orderCreationData.customerInfo.phone }}</span></div>
                    @if (orderCreationData.customerInfo.wechat) {
                      <div class="info-item"><label>微信号</label><span>{{ orderCreationData.customerInfo.wechat }}</span></div>
                    }
                    <div class="info-item"><label>客户类型</label><span>{{ orderCreationData.customerInfo.customerType }}</span></div>
                  } @else {
                    <!-- 默认显示项目信息 -->
                    <div class="info-item key-info"><label>客户姓名</label><span>{{ project.customerName }}</span></div>
                    <div class="info-item key-info"><label>项目负责人</label><span>{{ project.assigneeName }}</span></div>
                  }
                  <div class="info-item"><label>项目创建</label><span>{{ formatDate(project.createdAt) }}</span></div>
                  <div class="info-item"><label>截止日期</label><span>{{ formatDate(project.deadline) }}</span></div>
                </div>
                <div class="tags-container" style="margin-top: 12px;">
                  <div class="tag-section">
                    <h3>客户标签</h3>
                    <div class="tags">
                      @for (tag of project.customerTags; track $index) {
                        <span class="tag">{{ tag.source }} · {{ tag.needType }} · {{ tag.preference }} · {{ tag.colorAtmosphere }}</span>
                      }
                      @if (project.customerTags.length === 0) { <span class="desc">暂无标签</span> }
                    </div>
                  </div>
                  <div class="tag-section">
                    <h3>高优先级需求</h3>
                    <ul class="need-list">
                      @for (need of project.highPriorityNeeds; track $index) {
                        <li>{{ need }}</li>
                      }
                      @if (project.highPriorityNeeds.length === 0) { <li class="desc">无</li> }
                    </ul>
                    
                    <!-- 新增：需求关键信息同步区域 -->
                    <div class="requirement-sync-info">
                      <h4>项目需求信息</h4>
                      
                      <!-- 显示订单创建时填写的需求信息 -->
                      @if (orderCreationData?.requirementInfo) {
                        <div class="order-requirement-info">
                          <h5>订单创建阶段需求</h5>
                          <div class="key-info-grid">
                            @if (orderCreationData.requirementInfo.decorationType) {
                              <div class="info-item">
                                <span class="info-label">装修类型</span>
                                <span class="info-value">{{ orderCreationData.requirementInfo.decorationType }}</span>
                              </div>
                            }
                            @if (orderCreationData.requirementInfo.downPayment) {
                              <div class="info-item">
                                <span class="info-label">首付款</span>
                                <span class="info-value">¥{{ orderCreationData.requirementInfo.downPayment }}</span>
                              </div>
                            }
                            @if (orderCreationData.requirementInfo.firstDraftDate) {
                              <div class="info-item">
                                <span class="info-label">首稿时间</span>
                                <span class="info-value">{{ orderCreationData.requirementInfo.firstDraftDate }}</span>
                              </div>
                            }
                            @if (orderCreationData.requirementInfo.style) {
                              <div class="info-item">
                                <span class="info-label">装修风格</span>
                                <span class="info-value">{{ orderCreationData.requirementInfo.style }}</span>
                              </div>
                            }
                            @if (orderCreationData.requirementInfo.spaceRequirements) {
                              <div class="info-item">
                                <span class="info-label">涉及空间</span>
                                <span class="info-value">{{ orderCreationData.requirementInfo.spaceRequirements }}</span>
                              </div>
                            }
                          </div>
                          
                          <!-- 显示偏好标签 -->
                          @if (orderCreationData.preferenceTags && orderCreationData.preferenceTags.length > 0) {
                            <div class="preference-tags">
                              <span class="info-label">偏好标签：</span>
                              <div class="tags">
                                @for (tag of orderCreationData.preferenceTags; track tag) {
                                  <span class="tag">{{ tag }}</span>
                                }
                              </div>
                            </div>
                          }
                        </div>
                      }
                      
                      <!-- 确认需求阶段的关键信息 -->
                      <div class="confirmed-requirement-info">
                        <h5>确认需求关键信息</h5>
                        <div class="key-info-grid">
                          @if (requirementKeyInfo.colorAtmosphere.description) {
                            <div class="info-item">
                              <span class="info-label">色彩氛围</span>
                              <span class="info-value">{{ requirementKeyInfo.colorAtmosphere.description }}</span>
                              <div class="color-preview" [style.background-color]="requirementKeyInfo.colorAtmosphere.mainColor"></div>
                            </div>
                          }
                          
                          @if (requirementKeyInfo.spaceStructure.aspectRatio > 0) {
                            <div class="info-item">
                              <span class="info-label">空间结构</span>
                              <span class="info-value">比例 {{ requirementKeyInfo.spaceStructure.aspectRatio.toFixed(1) }}</span>
                            </div>
                          }
                          
                          @if (requirementKeyInfo.materialWeights.woodRatio > 0 || requirementKeyInfo.materialWeights.fabricRatio > 0) {
                            <div class="info-item">
                              <span class="info-label">材质权重</span>
                              <div class="material-weights">
                                @if (requirementKeyInfo.materialWeights.woodRatio > 0) {
                                  <span class="weight-item">木质 {{ requirementKeyInfo.materialWeights.woodRatio }}%</span>
                                }
                                @if (requirementKeyInfo.materialWeights.fabricRatio > 0) {
                                  <span class="weight-item">布艺 {{ requirementKeyInfo.materialWeights.fabricRatio }}%</span>
                                }
                                @if (requirementKeyInfo.materialWeights.metalRatio > 0) {
                                  <span class="weight-item">金属 {{ requirementKeyInfo.materialWeights.metalRatio }}%</span>
                                }
                              </div>
                            </div>
                          }
                          
                          @if (requirementKeyInfo.presetAtmosphere.name) {
                            <div class="info-item">
                              <span class="info-label">预设氛围</span>
                              <span class="info-value">{{ requirementKeyInfo.presetAtmosphere.name }}</span>
                              <span class="color-temp">{{ requirementKeyInfo.presetAtmosphere.colorTemp }}</span>
                            </div>
                          }
                        </div>
                        
                        @if (getRequirementSummary().length === 0 && !orderCreationData?.requirementInfo) {
                          <div class="sync-placeholder">
                            <span class="placeholder-text">暂无同步的需求信息</span>
                            <button class="sync-btn" (click)="syncRequirementKeyInfo({})">手动同步</button>
                          </div>
                        }
                      </div>
                    </div>
                  </div>
                </div>
              } @else {
                <div class="loading-state">
                  <div class="loading-spinner"></div>
                  <div>正在加载客户信息...</div>
                </div>
              }
            </div>
          </div>

          <!-- 右侧三分之二 - 制作流程进度 -->
          <div class="right-column">
            <div class="process-card card">
              <h2>制作流程进度</h2>

              <!-- 串式流程：10个阶段横向排列（保持） -->
              <div class="stage-progress-container">
                @for (stage of getVisibleStages(); track stage) {
                  <div class="vertical-stage-block" [attr.id]="stageToAnchor(stage)" [class.active]="getStageStatus(stage) === 'active'">
                    <div class="vertical-stage-header">
                      <span class="dot" [class.completed]="getStageStatus(stage) === 'completed'" [class.active]="getStageStatus(stage) === 'active'"></span>
                      <h3>{{ stage }}</h3>
                    </div>
                    <!-- 直接复用原阶段内容卡片：按stage匹配显示 -->
                    <div class="vertical-stage-body">
                      @if (stage === '订单创建') {
                        <app-consultation-order-panel
                          (orderCreated)="onConsultationOrderSubmit($event)"
                          (projectCreated)="onProjectCreated($event)"
                        ></app-consultation-order-panel>
                      } @else if (stage === '需求沟通') {
                        <app-requirements-confirm-card 
                          (requirementConfirmed)="syncRequirementKeyInfo($event)"
                          (progressUpdated)="syncRequirementKeyInfo($event)"
                          (stageCompleted)="onRequirementsStageCompleted($event)">
                        </app-requirements-confirm-card>
                      } @else if (stage === '方案确认') {
                        <!-- 方案确认阶段 - 需求信息展示 -->
                        <div class="proposal-confirm-section">
                          <div class="section-header">
                            <h4>方案确认</h4>
                            <div class="progress-indicator">
                              <span class="progress-text">{{ getRequiredStagesProgress() }}% 完成</span>
                            </div>
                          </div>
                          
                          <!-- 需求信息展示区域 -->
                          @if (areRequiredStagesCompleted()) {
                            <div class="requirement-info-display">
                              <div class="info-header">
                                <h5>确认的需求信息</h5>
                                <span class="info-subtitle">来自需求沟通阶段</span>
                              </div>
                              
                              <div class="info-grid">
                                <!-- 色调和材质并排布局 -->
                                <div class="color-material-row">
                                  <!-- 色调 -->
                                  @if (requirementKeyInfo.colorAtmosphere.description) {
                                    <div class="info-item color-item">
                                      <div class="info-label">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                          <circle cx="12" cy="12" r="10"></circle>
                                          <path d="M12 6v6l4 2"></path>
                                        </svg>
                                        色调
                                      </div>
                                      <div class="info-content">
                                        <span class="info-value">{{ requirementKeyInfo.colorAtmosphere.description }}</span>
                                        @if (requirementKeyInfo.colorAtmosphere.mainColor) {
                                          <div class="color-preview" [style.background-color]="requirementKeyInfo.colorAtmosphere.mainColor"></div>
                                        }
                                      </div>
                                    </div>
                                  }
                                  
                                  <!-- 材质 -->
                                  @if (requirementKeyInfo.colorAtmosphere.materials && requirementKeyInfo.colorAtmosphere.materials.length > 0) {
                                    <div class="info-item material-item">
                                      <div class="info-label">
                                        <svg width="16" height="16" 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>
                                          <rect x="7" y="7" width="10" height="10" rx="1" ry="1"></rect>
                                        </svg>
                                        材质
                                      </div>
                                      <div class="info-content">
                                        <div class="material-list">
                                          @for (material of requirementKeyInfo.colorAtmosphere.materials; track material) {
                                            <span class="material-tag">{{ material }}</span>
                                          }
                                        </div>
                                      </div>
                                    </div>
                                  }
                                </div>
                                
                                <!-- 空间结构和材质权重并排布局 -->
                                <div class="structure-weight-row">
                                  <!-- 空间结构 -->
                                  @if (requirementKeyInfo.spaceStructure.aspectRatio > 0) {
                                    <div class="info-item structure-item">
                                      <div class="info-label">
                                        <svg width="16" height="16" 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>
                                          <line x1="9" y1="9" x2="15" y2="15"></line>
                                        </svg>
                                        空间结构
                                      </div>
                                      <div class="info-content">
                                        <div class="structure-details">
                                          <span class="structure-item">比例: {{ requirementKeyInfo.spaceStructure.aspectRatio.toFixed(1) }}</span>
                                          @if (requirementKeyInfo.spaceStructure.ceilingHeight > 0) {
                                            <span class="structure-item">层高: {{ requirementKeyInfo.spaceStructure.ceilingHeight }}m</span>
                                          }
                                          @if (requirementKeyInfo.spaceStructure.flowWidth > 0) {
                                            <span class="structure-item">流线宽度: {{ requirementKeyInfo.spaceStructure.flowWidth }}m</span>
                                          }
                                        </div>
                                      </div>
                                    </div>
                                  }
                                  
                                  <!-- 材质权重 -->
                                  @if (requirementKeyInfo.materialWeights.woodRatio > 0 || requirementKeyInfo.materialWeights.fabricRatio > 0 || requirementKeyInfo.materialWeights.metalRatio > 0) {
                                    <div class="info-item weight-item">
                                      <div class="info-label">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                          <path d="M3 3v18h18"></path>
                                          <path d="M7 16l4-4 4 4 6-6"></path>
                                        </svg>
                                        材质权重
                                      </div>
                                      <div class="info-content">
                                        <div class="weight-list">
                                          @if (requirementKeyInfo.materialWeights.woodRatio > 0) {
                                            <div class="weight-item">
                                              <span class="weight-label">木质</span>
                                              <span class="weight-value">{{ requirementKeyInfo.materialWeights.woodRatio }}%</span>
                                            </div>
                                          }
                                          @if (requirementKeyInfo.materialWeights.fabricRatio > 0) {
                                            <div class="weight-item">
                                              <span class="weight-label">布艺</span>
                                              <span class="weight-value">{{ requirementKeyInfo.materialWeights.fabricRatio }}%</span>
                                            </div>
                                          }
                                          @if (requirementKeyInfo.materialWeights.metalRatio > 0) {
                                            <div class="weight-item">
                                              <span class="weight-label">金属</span>
                                              <span class="weight-value">{{ requirementKeyInfo.materialWeights.metalRatio }}%</span>
                                            </div>
                                          }
                                        </div>
                                      </div>
                                    </div>
                                  }
                                </div>
                                
                                <!-- 预设氛围和小图时间并排布局 -->
                                <div class="atmosphere-time-row">
                                  <!-- 预设氛围 -->
                                  @if (requirementKeyInfo.presetAtmosphere.name) {
                                    <div class="info-item atmosphere-item">
                                      <div class="info-label">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                                        </svg>
                                        预设氛围
                                      </div>
                                      <div class="info-content">
                                        <div class="atmosphere-info">
                                          <span class="atmosphere-name">{{ requirementKeyInfo.presetAtmosphere.name }}</span>
                                          @if (requirementKeyInfo.presetAtmosphere.colorTemp) {
                                            <span class="color-temp">{{ requirementKeyInfo.presetAtmosphere.colorTemp }}</span>
                                          }
                                        </div>
                                      </div>
                                    </div>
                                  }
                                  
                                  <!-- 小图时间 -->
                                  @if (getEstimatedSmallImageTime()) {
                                    <div class="info-item time-item">
                                      <div class="info-label">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                          <circle cx="12" cy="12" r="10"></circle>
                                          <polyline points="12,6 12,12 16,14"></polyline>
                                        </svg>
                                        小图时间
                                      </div>
                                      <div class="info-content">
                                        <span class="time-estimate">{{ getEstimatedSmallImageTime() }}</span>
                                      </div>
                                    </div>
                                  }
                                </div>
                              </div>
                            </div>
                            
                            <!-- 确认方案按钮 -->
            <div class="proposal-confirm-actions">
              <button class="confirm-proposal-btn" 
                      (click)="confirmProposal()"
                      style="
                        appearance: none !important;
                        border: none !important;
                        background: linear-gradient(135deg, #007aff 0%, #0066ff 50%, #0051d5 100%) !important;
                        color: white !important;
                        padding: 16px 40px !important;
                        border-radius: 16px !important;
                        font-size: 16px !important;
                        font-weight: 600 !important;
                        cursor: pointer !important;
                        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
                        display: flex !important;
                        align-items: center !important;
                        gap: 10px !important;
                        box-shadow: 0 8px 24px rgba(0, 122, 255, 0.25), 0 4px 12px rgba(0, 122, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
                        min-width: 180px !important;
                        justify-content: center !important;
                        position: relative !important;
                        overflow: hidden !important;
                        text-transform: none !important;
                        letter-spacing: normal !important;
                        line-height: normal !important;
                      ">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="color: white !important;">
                  <polyline points="20,6 9,17 4,12"></polyline>
                </svg>
                确认方案
              </button>
            </div>
                          } @else {
                            <div class="requirement-pending">
                              <div class="pending-icon">
                                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <polyline points="12,6 12,12 16,14"></polyline>
                                </svg>
                              </div>
                              <h5>等待需求确认完成</h5>
                              <p>请先完成"流程进度 > 确认需求 > 需求沟通"四个流程，确认需求信息后方可查看。</p>
                              <div class="progress-status">
                                <span>当前进度: {{ getRequiredStagesProgress() }}%</span>
                              </div>
                            </div>
                          }
                        </div>
                      } @else if (stage === '建模') {
                        <div class="upload-section">
                          <div class="upload-header">
                            <h4>上传白模图片</h4>
                            <span class="hint">支持：JPG/PNG，不强制4K</span>
                          </div>
                          @if (canEditSection('delivery')) {
                            <div class="upload-dropzone" 
                                 (click)="whiteModelImages.length === 0 ? triggerFileInput('whiteModel') : null"
                                 (dragover)="whiteModelImages.length === 0 ? onDragOver($event) : null"
                                 (dragleave)="whiteModelImages.length === 0 ? onDragLeave($event) : null"
                                 (drop)="whiteModelImages.length === 0 ? onFileDrop($event, 'whiteModel') : null"
                                 [class.drag-over]="isDragOver && whiteModelImages.length === 0"
                                 [class.has-images]="whiteModelImages.length > 0">
                              @if (whiteModelImages.length === 0) {
                                <div class="upload-icon"></div>
                                <div class="upload-text">点击此处或拖拽文件到此处上传</div>
                                <div class="upload-hint">支持 JPG、PNG 格式，单个文件最大 10MB</div>
                              } @else {
                                <div class="uploaded-images-grid">
                                  @for (img of whiteModelImages; track img.id) {
                                    <div class="uploaded-image-item" (click)="previewImage(img)">
                                      <img [src]="img.url" [alt]="img.name" />
                                      <div class="image-overlay">
                                        <div class="image-name">{{ img.name }}</div>
                                        <div class="image-actions">
                                          <button class="preview-btn" (click)="$event.stopPropagation(); previewImage(img)">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                              <circle cx="12" cy="12" r="3"></circle>
                                            </svg>
                                          </button>
                                          <button class="remove-btn" (click)="$event.stopPropagation(); removeWhiteModelImage(img.id)">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                              <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>
                                  }
                                  <div class="add-more-btn" (click)="triggerFileInput('whiteModel')">
                                    <div class="add-icon">+</div>
                                    <div class="add-text">添加更多</div>
                                  </div>
                                </div>
                              }
                              <input type="file" 
                                     id="whiteModelFileInput"
                                     accept="{{allowedImageTypes}}" 
                                     multiple 
                                     (change)="onWhiteModelSelected($event)" 
                                     style="display: none;" />
                            </div>
                          }
                          <div class="upload-actions">
                            @if (canEditSection('delivery')) {
                              <button class="primary-btn" [disabled]="whiteModelImages.length===0" (click)="confirmWhiteModelUpload()">确认上传</button>
                            }
                            @if (isTeamLeaderView()) { <button class="secondary-btn" (click)="syncUploadedImages('white')">同步图片信息</button> }
                            @if (!canEditSection('delivery')) { <span class="desc">只读</span> }
                          </div>
                        </div>
                        <div class="model-check-section">
                          <h4>模型差异检查清单</h4>
                          <div class="checklist">
                            @for (item of modelCheckItems; track item.id) {
                              <div class="checklist-item">
                                <label class="checklist-label">
                                  <input type="checkbox" class="custom-checkbox" [checked]="item.isPassed" (change)="updateModelCheckItem(item.id, $any($event.target).checked)" [disabled]="!canEditSection('delivery')">
                                  <span class="checklist-text">{{ item.name }}</span>
                                </label>
                                <span class="check-status">{{ item.isPassed ? '已通过' : '待处理' }}</span>
                              </div>
                            }
                          </div>
                        </div>
                      } @else if (stage === '软装') {
                        <div class="softdecor-section">
                          <h4>软装清单素材</h4>
                          <div class="upload-section">
                            <div class="upload-header">
                              <h4>上传软装小图</h4>
                              <span class="hint">建议 ≤1MB 的 JPG/PNG 小图</span>
                            </div>
                            @if (canEditSection('delivery')) {
                              <div class="upload-dropzone" 
                                   (click)="softDecorImages.length === 0 ? triggerFileInput('softDecor') : null"
                                   (dragover)="softDecorImages.length === 0 ? onDragOver($event) : null"
                                   (dragleave)="softDecorImages.length === 0 ? onDragLeave($event) : null"
                                   (drop)="softDecorImages.length === 0 ? onFileDrop($event, 'softDecor') : null"
                                   [class.drag-over]="isDragOver && softDecorImages.length === 0"
                                   [class.has-images]="softDecorImages.length > 0">
                                @if (softDecorImages.length === 0) {
                                  <div class="upload-icon"></div>
                                  <div class="upload-text">点击此处或拖拽文件到此处上传</div>
                                  <div class="upload-hint">支持 JPG、PNG 格式，建议文件大小 ≤1MB</div>
                                } @else {
                                  <div class="uploaded-images-grid">
                                    @for (img of softDecorImages; track img.id) {
                                      <div class="uploaded-image-item" (click)="previewImage(img)">
                                        <img [src]="img.url" [alt]="img.name" />
                                        <div class="image-overlay">
                                          <div class="image-name">{{ img.name }}</div>
                                          <div class="image-actions">
                                            <button class="preview-btn" (click)="$event.stopPropagation(); previewImage(img)">
                                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                                <circle cx="12" cy="12" r="3"></circle>
                                              </svg>
                                            </button>
                                            <button class="remove-btn" (click)="$event.stopPropagation(); removeSoftDecorImage(img.id)">
                                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <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>
                                    }
                                    <div class="add-more-btn" (click)="triggerFileInput('softDecor')">
                                      <div class="add-icon">+</div>
                                      <div class="add-text">添加更多</div>
                                    </div>
                                  </div>
                                }
                                <input type="file" 
                                       id="softDecorFileInput"
                                       accept="{{allowedImageTypes}}" 
                                       multiple 
                                       (change)="onSoftDecorSmallPicsSelected($event)" 
                                       style="display: none;" />
                              </div>
                            }
                            <div class="upload-actions">
                              @if (canEditSection('delivery')) {
                                <button class="primary-btn" [disabled]="softDecorImages.length===0" (click)="confirmSoftDecorUpload()">确认上传</button>
                              }
                              @if (isTeamLeaderView()) { <button class="secondary-btn" (click)="syncUploadedImages('soft')">同步图片信息</button> }
                              @if (!canEditSection('delivery')) { <span class="desc">只读</span> }
                            </div>
                          </div>
                        </div>
                      } @else if (stage === '渲染') {
                        <div class="render-progress-section">
                          @if (isLoadingRenderProgress) {
                            <div class="loading-state">
                              <div class="loading-spinner"></div>
                              <div>正在加载渲染进度...</div>
                            </div>
                          }
                          @if (errorLoadingRenderProgress) {
                            <div class="error-state">
                              <div>渲染进度加载失败</div>
                              <button class="secondary-btn" (click)="retryLoadRenderProgress()">重试</button>
                            </div>
                          }
                          @if (!isLoadingRenderProgress && !errorLoadingRenderProgress && renderProgress) {
                            <div class="progress-info" style="display:flex;gap:16px;align-items:center;margin:12px 0;">
                              <span>状态：{{ renderProgress.status }}</span>
                              <span>完成度：{{ renderProgress.completionRate }}%</span>
                              <span>预计剩余：{{ renderProgress.estimatedTimeRemaining }} 小时</span>
                            </div>
                          }
                          <div class="upload-section">
                            <div class="upload-header">
                              <h4>上传渲染大图</h4>
                              <span class="hint">需满足4K标准（最长边 ≥ 4000px）</span>
                            </div>
                            @if (canEditSection('delivery')) {
                              <div class="upload-dropzone" 
                                   (click)="renderLargeImages.length === 0 ? triggerFileInput('render') : null"
                                   (dragover)="renderLargeImages.length === 0 ? onDragOver($event) : null"
                                   (dragleave)="renderLargeImages.length === 0 ? onDragLeave($event) : null"
                                   (drop)="renderLargeImages.length === 0 ? onFileDrop($event, 'render') : null"
                                   [class.drag-over]="isDragOver && renderLargeImages.length === 0"
                                   [class.has-images]="renderLargeImages.length > 0">
                                @if (renderLargeImages.length === 0) {
                                  <div class="upload-icon"></div>
                                  <div class="upload-text">点击此处或拖拽文件到此处上传</div>
                                  <div class="upload-hint">支持 JPG、PNG 格式，需满足4K标准（最长边 ≥ 4000px）</div>
                                } @else {
                                  <div class="uploaded-images-grid">
                                    @for (img of renderLargeImages; track img.id) {
                                      <div class="uploaded-image-item" (click)="previewImage(img)">
                                        <img [src]="img.url" [alt]="img.name" />
                                        <div class="image-overlay">
                                          <div class="image-name">{{ img.name }}</div>
                                          <div class="image-actions">
                                            <button class="preview-btn" (click)="$event.stopPropagation(); previewImage(img)">
                                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                                <circle cx="12" cy="12" r="3"></circle>
                                              </svg>
                                            </button>
                                            <button class="remove-btn" (click)="$event.stopPropagation(); removeRenderLargeImage(img.id)">
                                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <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>
                                    }
                                    <div class="add-more-btn" (click)="triggerFileInput('render')">
                                      <div class="add-icon">+</div>
                                      <div class="add-text">添加更多</div>
                                    </div>
                                  </div>
                                }
                                <input type="file" 
                                       id="renderFileInput"
                                       accept="{{allowedImageTypes}}" 
                                       multiple 
                                       (change)="onRenderLargePicsSelected($event)" 
                                       style="display: none;" />
                              </div>
                            }
                            <div class="upload-actions">
                              @if (canEditSection('delivery')) {
                                <button class="primary-btn" [disabled]="renderLargeImages.length===0" (click)="confirmRenderUpload()">确认上传</button>
                              }
                              @if (isTeamLeaderView()) { <button class="secondary-btn" (click)="syncUploadedImages('render')">同步图片信息</button> }
                              @if (!canEditSection('delivery')) { <span class="desc">只读</span> }
                            </div>
                          </div>
                        </div>
                      } @else if (stage === '后期') {
                        <div class="post-process-section">
                          <div class="upload-section">
                            <div class="upload-header">
                              <h4>上传后期处理图片</h4>
                              <span class="hint">包含调色、修图、特效等后期处理结果</span>
                            </div>
                            @if (canEditSection('delivery')) {
                              <div class="upload-dropzone" 
                                   (click)="postProcessImages.length === 0 ? triggerFileInput('postProcess') : null"
                                   (dragover)="postProcessImages.length === 0 ? onDragOver($event) : null"
                                   (dragleave)="postProcessImages.length === 0 ? onDragLeave($event) : null"
                                   (drop)="postProcessImages.length === 0 ? onFileDrop($event, 'postProcess') : null"
                                   [class.drag-over]="isDragOver && postProcessImages.length === 0"
                                   [class.has-images]="postProcessImages.length > 0">
                                @if (postProcessImages.length === 0) {
                                  <div class="upload-icon"></div>
                                  <div class="upload-text">点击此处或拖拽文件到此处上传</div>
                                  <div class="upload-hint">支持 JPG、PNG 格式，展示后期处理效果</div>
                                } @else {
                                  <div class="uploaded-images-grid">
                                    @for (img of postProcessImages; track img.id) {
                                      <div class="uploaded-image-item" (click)="previewImage(img)">
                                        <img [src]="img.url" [alt]="img.name" />
                                        <div class="image-overlay">
                                          <div class="image-name">{{ img.name }}</div>
                                          <div class="image-actions">
                                            <button class="preview-btn" (click)="$event.stopPropagation(); previewImage(img)">
                                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                                <circle cx="12" cy="12" r="3"></circle>
                                              </svg>
                                            </button>
                                            <button class="remove-btn" (click)="$event.stopPropagation(); removePostProcessImage(img.id)">
                                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                <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>
                                    }
                                    <div class="add-more-btn" (click)="triggerFileInput('postProcess')">
                                      <div class="add-icon">+</div>
                                      <div class="add-text">添加更多</div>
                                    </div>
                                  </div>
                                }
                                <input type="file" 
                                       id="postProcessFileInput"
                                       accept="{{allowedImageTypes}}" 
                                       multiple 
                                       (change)="onPostProcessPicsSelected($event)" 
                                       style="display: none;" />
                              </div>
                            }
                            <div class="upload-actions">
                              @if (canEditSection('delivery')) {
                                <button class="primary-btn" [disabled]="postProcessImages.length===0" (click)="confirmPostProcessUpload()">确认上传</button>
                              }
                              @if (isTeamLeaderView()) { <button class="secondary-btn" (click)="syncUploadedImages('postProcess')">同步图片信息</button> }
                              @if (!canEditSection('delivery')) { <span class="desc">只读</span> }
                            </div>
                          </div>
                        </div>
                      } @else if (stage === '尾款结算') {
                        <app-settlement-card [settlements]="settlements"></app-settlement-card>
                      } @else if (stage === '客户评价') {
                        <app-customer-review-card [feedbacks]="feedbacks"></app-customer-review-card>
                      } @else if (stage === '投诉处理') {
                        <app-complaint-card [complaints]="exceptionHistories"></app-complaint-card>
                      }
                    </div>
                  </div>
                }
              </div>
            </div>
        </div>
      </div>
      </div>
    }
    
    <!-- 项目人员标签页 -->
    @if (isActiveTab('members')) {
      <div class="members-tab-content">
        <div class="main-content-layout">
          <!-- 项目人员内容 -->
          <div class="members-content">
            <div class="members-header">
              <h2>项目成员</h2>
              <p class="members-count">共 {{ projectMembers.length }} 名成员</p>
            </div>
            
            <div class="members-grid">
              @for (member of projectMembers; track member.id) {
                <div class="member-card">
                  <div class="member-avatar">
                    <img [src]="member.avatar" [alt]="member.name">
                  </div>
                  <div class="member-info">
                    <h3 class="member-name">{{ member.name }}</h3>
                    <p class="member-role">{{ member.role }}</p>
                    <div class="member-stats">
                      <div class="stat-item">
                        <span class="stat-label">技能匹配度</span>
                        <div class="progress-bar">
                          <div class="progress-fill" [style.width.%]="member.skillMatch"></div>
                        </div>
                        <span class="stat-value">{{ member.skillMatch }}%</span>
                      </div>
                      <div class="stat-item">
                        <span class="stat-label">项目进度</span>
                        <div class="progress-bar">
                          <div class="progress-fill" [style.width.%]="member.progress"></div>
                        </div>
                        <span class="stat-value">{{ member.progress }}%</span>
                      </div>
                      <div class="stat-item">
                        <span class="stat-label">贡献度</span>
                        <div class="progress-bar">
                          <div class="progress-fill" [style.width.%]="member.contribution"></div>
                        </div>
                        <span class="stat-value">{{ member.contribution }}%</span>
                      </div>
                    </div>
                  </div>
                </div>
              }
            </div>
            
            @if (projectMembers.length === 0) {
              <div class="empty-state">
                <p>暂无项目成员信息</p>
              </div>
            }
          </div>
        </div>
      </div>
    }
    
    <!-- 项目文件标签页 -->
    @if (isActiveTab('files')) {
      <div class="files-tab-content">
        <div class="main-content-layout">
          <!-- 项目文件内容 -->
          <div class="files-content">
            <div class="files-header">
              <h2>项目文件</h2>
              <p class="files-count">共 {{ projectFiles.length }} 个文件</p>
            </div>
            
            <div class="files-list">
              @for (file of projectFiles; track file.id) {
                <div class="file-item">
                  <div class="file-icon">
                    <span class="file-type">{{ file.type.toUpperCase() }}</span>
                  </div>
                  <div class="file-info">
                    <h3 class="file-name">{{ file.name }}</h3>
                    <div class="file-meta">
                      <span class="file-size">{{ file.size }}</span>
                      <span class="file-date">{{ file.date }}</span>
                    </div>
                  </div>
                  <div class="file-actions">
                    <button class="btn-download" (click)="downloadFile(file)">下载</button>
                    <button class="btn-preview" (click)="previewFile(file)">预览</button>
                  </div>
                </div>
              }
            </div>
            
            @if (projectFiles.length === 0) {
              <div class="empty-state">
                <p>暂无项目文件</p>
              </div>
            }
          </div>
        </div>
      </div>
    }
  </div>