<!-- 只展示修改处，未变更部分用占位注释表示 -->
<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>
</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'"
            (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">
                  <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>
                      <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) {
                        <div class="sync-placeholder">
                          <span class="placeholder-text">暂无同步的需求信息</span>
                          <button class="sync-btn" (click)="syncRequirementKeyInfo({})">手动同步</button>
                        </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-order-creation-card
                          [orderCreationMethod]="orderCreationMethod"
                          (orderCreationMethodChange)="orderCreationMethod = $event"
                          [isSyncing]="isSyncing"
                          [orderTime]="orderTime"
                          [customerSearchKeyword]="customerSearchKeyword"
                          (customerSearchKeywordChange)="customerSearchKeyword = $event"
                          [customerSearchResults]="customerSearchResults"
                          [selectedCustomer]="selectedOrderCustomer"
                          (searchCustomer)="searchCustomer()"
                          (selectCustomer)="selectCustomer($event)"
                          (clearSelectedCustomer)="clearSelectedCustomer()"
                          (syncMiniprogram)="syncMiniprogramCustomerInfo()"
                          [customerForm]="customerForm"
                          [demandTypes]="demandTypes"
                          [followUpStatus]="followUpStatus"
                        ></app-order-creation-card>
                      } @else if (stage === '需求沟通') {
                        <app-requirements-confirm-card 
                          (requirementConfirmed)="syncRequirementKeyInfo($event)"
                          (progressUpdated)="syncRequirementKeyInfo($event)">
                        </app-requirements-confirm-card>
                      } @else if (stage === '方案确认') {
                        <!-- 方案确认阶段暂时显示占位内容 -->
                        <div class="stage-placeholder">
                          <h4>方案确认阶段</h4>
                          <p>此阶段功能正在开发中...</p>
                        </div>
                      } @else if (stage === '建模') {
                        <div class="upload-section">
                          <div class="upload-header">
                            <h4>上传白模图片</h4>
                            <span class="hint">支持：JPG/PNG，不强制4K</span>
                          </div>
                          @if (isDesignerView()) {
                            <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 (isDesignerView()) {
                              <button class="primary-btn" [disabled]="whiteModelImages.length===0" (click)="confirmWhiteModelUpload()">确认上传</button>
                            }
                            @if (isTeamLeaderView()) { <button class="secondary-btn" (click)="syncUploadedImages('white')">同步图片信息</button> }
                            @if (isCustomerServiceView()) { <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]="!isDesignerView()">
                                  <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 (isDesignerView()) {
                              <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 (isDesignerView()) {
                                <button class="primary-btn" [disabled]="softDecorImages.length===0" (click)="confirmSoftDecorUpload()">确认上传</button>
                              }
                              @if (isTeamLeaderView()) { <button class="secondary-btn" (click)="syncUploadedImages('soft')">同步图片信息</button> }
                              @if (isCustomerServiceView()) { <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 (isDesignerView()) {
                              <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 (isDesignerView()) {
                                <button class="primary-btn" [disabled]="renderLargeImages.length===0" (click)="confirmRenderUpload()">确认上传</button>
                              }
                              @if (isTeamLeaderView()) { <button class="secondary-btn" (click)="syncUploadedImages('render')">同步图片信息</button> }
                              @if (isCustomerServiceView()) { <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 (isDesignerView()) {
                              <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 (isDesignerView()) {
                                <button class="primary-btn" [disabled]="postProcessImages.length===0" (click)="confirmPostProcessUpload()">确认上传</button>
                              }
                              @if (isTeamLeaderView()) { <button class="secondary-btn" (click)="syncUploadedImages('postProcess')">同步图片信息</button> }
                              @if (isCustomerServiceView()) { <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>
