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-nav">
      <div class="header-nav-tabs">
        @for (tab of tabs; track tab.id) {
          <button 
            class="nav-tab" 
            [class.active]="activeTab === tab.id"
            (click)="switchTab(tab.id)">
            {{ tab.name }}
          </button>
        }
      </div>
    </div>

    <!-- 四个环节圆圈导航 -->
    <div class="header-center">
      <div class="stage-navigation">
        <div class="stage-nav-item" 
             [class.completed]="getSectionStatus('order') === 'completed'" 
             [class.active]="getSectionStatus('order') === 'active'"
             [class.readonly]="isReviewOnlyMode"
             (click)="!isReviewOnlyMode && toggleSection('order')">
          <div class="stage-nav-circle">
            <span class="stage-nav-number">1</span>
          </div>
          <div class="stage-nav-label">订单分配</div>
          @if (isReviewOnlyMode) {
            <div class="readonly-badge">只读</div>
          }
        </div>
        <div class="stage-nav-connector" [class.completed]="getSectionStatus('requirements') === 'completed' || getSectionStatus('requirements') === 'active'"></div>
        <div class="stage-nav-item" 
             [class.completed]="getSectionStatus('requirements') === 'completed'" 
             [class.active]="getSectionStatus('requirements') === 'active'"
             [class.readonly]="isReviewOnlyMode"
             (click)="!isReviewOnlyMode && toggleSection('requirements')">
          <div class="stage-nav-circle">
            <span class="stage-nav-number">2</span>
          </div>
          <div class="stage-nav-label">确认需求</div>
          @if (isReviewOnlyMode) {
            <div class="readonly-badge">只读</div>
          }
        </div>
        <div class="stage-nav-connector" [class.completed]="getSectionStatus('delivery') === 'completed' || getSectionStatus('delivery') === 'active'"></div>
        <div class="stage-nav-item" 
             [class.completed]="getSectionStatus('delivery') === 'completed'" 
             [class.active]="getSectionStatus('delivery') === 'active'"
             [class.readonly]="isReviewOnlyMode"
             (click)="!isReviewOnlyMode && toggleSection('delivery')">
          <div class="stage-nav-circle">
            <span class="stage-nav-number">3</span>
          </div>
          <div class="stage-nav-label">交付执行</div>
          @if (isReviewOnlyMode) {
            <div class="readonly-badge">只读</div>
          }
        </div>
        <div class="stage-nav-connector" [class.completed]="getSectionStatus('aftercare') === 'completed' || getSectionStatus('aftercare') === 'active'"></div>
        <div class="stage-nav-item" 
             [class.completed]="getSectionStatus('aftercare') === 'completed'" 
             [class.active]="getSectionStatus('aftercare') === 'active'"
             (click)="toggleSection('aftercare')">
          <div class="stage-nav-circle">
            <span class="stage-nav-number">4</span>
          </div>
          <div class="stage-nav-label">售后</div>
        </div>
      </div>
    </div>
    
    <div class="header-right">
      <div class="header-actions">
        <!-- 导出阶段报告 -->
        <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>

  <!-- 隐藏的文件输入元素 -->
  @for (process of deliveryProcesses; track process.id) {
    @for (space of process.spaces; track space.id) {
      <input 
        type="file" 
        [id]="'space-file-input-' + process.id + '-' + space.id"
        accept="image/*" 
        multiple 
        (change)="onSpaceFileSelected($event, process.id, space.id)" 
        style="display: none;" />
    }
  }
</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 (showDesignerCalendar) {
  <div class="image-preview-modal" (click)="closeDesignerCalendar()">
    <div class="modal-backdrop"></div>
    <div class="modal-content" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h3>选择设计师与排期</h3>
        <button class="close-btn" (click)="closeDesignerCalendar()">
          <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">
        <app-designer-calendar
          [designers]="calendarDesigners"
          [selectedDate]="selectedCalendarDate"
          [projectGroups]="calendarGroups"
          (designerSelected)="onCalendarDesignerSelected($event)"
          (assignmentRequested)="onCalendarAssignmentRequested($event)"
        ></app-designer-calendar>
      </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" [class.collapsed-card]="!isCustomerInfoExpanded">
              <div class="card-header" (click)="toggleCustomerInfo()" style="cursor: pointer;">
                <h2>客户信息</h2>
                <div class="header-actions">
                  <div class="sync-status" [class.syncing]="isSyncingCustomerInfo">
                    @if (isSyncingCustomerInfo) {
                      <span class="sync-indicator">
                        <span class="sync-spinner"></span>
                        同步中...
                      </span>
                    } @else if (lastSyncTime) {
                      <span class="sync-time">
                        <i class="icon-sync"></i>
                        已同步: {{ formatTime(lastSyncTime) }}
                      </span>
                    }
                  </div>
                  <div class="toggle-icon" [class.expanded]="isCustomerInfoExpanded">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </div>
                </div>
              </div>
              @if (project) {
                <div class="info-grid" [class.collapsed]="!isCustomerInfoExpanded">
                  <!-- 显示订单分配时填写的客户信息，如果有的话 -->
                  @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>
                    @if (orderCreationData.customerInfo.source) {
                      <div class="info-item"><label>客户来源</label><span>{{ orderCreationData.customerInfo.source }}</span></div>
                    }
                    @if (orderCreationData.customerInfo.remark) {
                      <div class="info-item"><label>备注信息</label><span>{{ orderCreationData.customerInfo.remark }}</span></div>
                    }
                  } @else {
                    <!-- 默认显示项目信息 -->
                    <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" [class.collapsed]="!isCustomerInfoExpanded" 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>
               
              } @else {
                <div class="loading-state">
                  <div class="loading-spinner"></div>
                  <div>正在加载客户信息...</div>
                </div>
              }
            </div>
            
            <!-- 方案确认卡片 - 优化样式与左侧客户信息卡片保持一致 -->
            <div class="proposal-confirm-card card">
              <div class="card-header">
                <h2>方案确认</h2>
              <div class="sync-status">
                  <span class="progress-text">{{ getRequiredStagesProgress() }}% 完成</span>
                </div>
              </div>
              
              
              <!-- 素材解析状态 -->
              @if (isAnalyzing) {
                <div class="analysis-progress">
                  <div class="progress-header">
                    <h4>正在解析素材...</h4>
                    <span class="progress-percentage">{{ analysisProgress.toFixed(0) }}%</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-fill" [style.width.%]="analysisProgress"></div>
                  </div>
                  <p class="progress-description">AI正在分析您的需求，生成专属设计方案</p>
                </div>
              }
              
              <!-- 方案展示区域 -->
              @if (proposalAnalysis && !isAnalyzing) {
                <div class="proposal-display">
                  <!-- 方案概览 -->
                  <div class="proposal-overview">
                    <div class="overview-header">
                      <h3>{{ proposalAnalysis.name }}</h3>
                      <div class="proposal-meta">
                        <span class="version">{{ proposalAnalysis.version }}</span>
                        <span class="feasibility-score">可行性: {{ proposalAnalysis.feasibility.overall }}%</span>
                      </div>
                    </div>
                    
                    <!-- 快速摘要 -->
                    <div class="quick-summary">
                      <div class="summary-item">
                        <span class="label">设计风格</span>
                        <span class="value">{{ getStyleSummary() }}</span>
                      </div>
                      <div class="summary-item">
                        <span class="label">色彩方案</span>
                        <span class="value">{{ getColorSummary() }}</span>
                      </div>
                      <div class="summary-item">
                        <span class="label">空间效率</span>
                        <span class="value">{{ getSpaceEfficiency() }}%</span>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 详细方案内容 -->
                  <div class="proposal-details">
                    <!-- 材质规格与分类 -->
                    <div class="detail-section">
                      <div class="section-header">
                        <h4>材质规格与分类</h4>
                        <span class="section-count">{{ (proposalAnalysis && proposalAnalysis.materials ? proposalAnalysis.materials.length : 0) }} 类材质</span>
                      </div>
                      <div class="materials-grid">
                        @for (material of (proposalAnalysis && proposalAnalysis.materials ? proposalAnalysis.materials : []); track material.category) {
                          <div class="material-card" [class]="material.usage.priority">
                            <div class="material-header">
                              <h5>{{ material.category }}</h5>
                              <span class="usage-percentage">{{ material.usage.percentage }}%</span>
                            </div>
                            <div class="material-specs">
                              <div class="spec-item">
                                <span class="spec-label">类型</span>
                                <span class="spec-value">{{ material.specifications.type }}</span>
                              </div>
                              <div class="spec-item">
                                <span class="spec-label">等级</span>
                                <span class="spec-value">{{ material.specifications.grade }}</span>
                              </div>
                              <div class="spec-item">
                                <span class="spec-label">应用区域</span>
                                <span class="spec-value">{{ material.usage.area }}</span>
                              </div>
                            </div>
                            <div class="material-properties">
                              <span class="property-tag">{{ material.properties.texture }}</span>
                              <span class="property-tag">{{ material.properties.color }}</span>
                            </div>
                          </div>
                        }
                      </div>
                    </div>
                    
                    <!-- 设计风格特征 -->
                    <div class="detail-section">
                      <div class="section-header">
                        <h4>设计风格特征</h4>
                        <span class="style-name">{{ (proposalAnalysis && proposalAnalysis.designStyle ? proposalAnalysis.designStyle.primaryStyle : null) || '未定义' }}</span>
                      </div>
                      <div class="style-elements">
                        @for (element of (proposalAnalysis && proposalAnalysis.designStyle && proposalAnalysis.designStyle.styleElements ? proposalAnalysis.designStyle.styleElements : []); track element.element) {
                          <div class="style-element">
                            <div class="element-header">
                              <span class="element-name">{{ element.element }}</span>
                              <span class="influence-score">{{ element.influence }}%</span>
                            </div>
                            <div class="element-description">{{ element.description }}</div>
                            <div class="influence-bar">
                              <div class="influence-fill" [style.width.%]="element.influence"></div>
                            </div>
                          </div>
                        }
                      </div>
                      <div class="style-characteristics">
                        @for (char of (proposalAnalysis && proposalAnalysis.designStyle && proposalAnalysis.designStyle.characteristics ? proposalAnalysis.designStyle.characteristics : []); track char.feature) {
                          <div class="characteristic-item" [class]="char.importance">
                            <span class="char-feature">{{ char.feature }}</span>
                            <span class="char-value">{{ char.value }}</span>
                          </div>
                        }
                      </div>
                    </div>
                    
                    <!-- 色彩搭配方案及占比分析 -->
                    <div class="detail-section">
                      <div class="section-header">
                        <h4>色彩搭配方案及占比分析</h4>
                        <span class="harmony-type">{{ (proposalAnalysis && proposalAnalysis.colorScheme && proposalAnalysis.colorScheme.harmony ? proposalAnalysis.colorScheme.harmony.type : null) || '未定义' }}</span>
                      </div>
                      <div class="color-palette">
                        @for (color of (proposalAnalysis && proposalAnalysis.colorScheme && proposalAnalysis.colorScheme.palette ? proposalAnalysis.colorScheme.palette : []); track color.hex) {
                          <div class="color-item" [class]="color.role">
                            <div class="color-swatch" [style.background-color]="color.hex"></div>
                            <div class="color-info">
                              <div class="color-name">{{ color.color }}</div>
                              <div class="color-percentage">{{ color.percentage }}%</div>
                              <div class="color-role">{{ color.role }}</div>
                            </div>
                            <div class="color-codes">
                              <span class="hex-code">{{ color.hex }}</span>
                              <span class="rgb-code">RGB({{ color.rgb }})</span>
                            </div>
                          </div>
                        }
                      </div>
                      <div class="color-psychology">
                        <div class="psychology-item">
                          <span class="label">氛围营造</span>
                          <span class="value">{{ (proposalAnalysis && proposalAnalysis.colorScheme && proposalAnalysis.colorScheme.psychology ? proposalAnalysis.colorScheme.psychology.mood : null) || '未定义' }}</span>
                        </div>
                        <div class="psychology-item">
                          <span class="label">空间感受</span>
                          <span class="value">{{ (proposalAnalysis && proposalAnalysis.colorScheme && proposalAnalysis.colorScheme.psychology ? proposalAnalysis.colorScheme.psychology.atmosphere : null) || '未定义' }}</span>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 空间尺寸数据及功能分区 -->
                    <div class="detail-section">
                      <div class="section-header">
                        <h4>空间尺寸数据及功能分区</h4>
                        <span class="total-area">总面积 {{ (proposalAnalysis && proposalAnalysis.spaceLayout && proposalAnalysis.spaceLayout.dimensions ? proposalAnalysis.spaceLayout.dimensions.area : 0) || 0 }}㎡</span>
                      </div>
                      <div class="space-dimensions">
                        <div class="dimension-item">
                          <span class="dim-label">长度</span>
                          <span class="dim-value">{{ (proposalAnalysis && proposalAnalysis.spaceLayout && proposalAnalysis.spaceLayout.dimensions ? proposalAnalysis.spaceLayout.dimensions.length : 0) || 0 }}m</span>
                        </div>
                        <div class="dimension-item">
                          <span class="dim-label">宽度</span>
                          <span class="dim-value">{{ (proposalAnalysis && proposalAnalysis.spaceLayout && proposalAnalysis.spaceLayout.dimensions ? proposalAnalysis.spaceLayout.dimensions.width : 0) || 0 }}m</span>
                        </div>
                        <div class="dimension-item">
                          <span class="dim-label">层高</span>
                          <span class="dim-value">{{ (proposalAnalysis && proposalAnalysis.spaceLayout && proposalAnalysis.spaceLayout.dimensions ? proposalAnalysis.spaceLayout.dimensions.height : 0) || 0 }}m</span>
                        </div>
                        <div class="dimension-item">
                          <span class="dim-label">体积</span>
                          <span class="dim-value">{{ (proposalAnalysis && proposalAnalysis.spaceLayout && proposalAnalysis.spaceLayout.dimensions ? proposalAnalysis.spaceLayout.dimensions.volume : 0) || 0 }}m³</span>
                        </div>
                      </div>
                      <div class="functional-zones">
                        @for (zone of (proposalAnalysis && proposalAnalysis.spaceLayout && proposalAnalysis.spaceLayout.functionalZones ? proposalAnalysis.spaceLayout.functionalZones : []); track zone.zone) {
                          <div class="zone-card">
                            <div class="zone-header">
                              <h5>{{ zone.zone }}</h5>
                              <div class="zone-stats">
                                <span class="zone-area">{{ zone.area }}㎡</span>
                                <span class="zone-percentage">{{ zone.percentage }}%</span>
                              </div>
                            </div>
                            <div class="zone-requirements">
                              <div class="requirements-label">功能需求</div>
                              <div class="requirements-tags">
                                @for (req of zone.requirements; track req) {
                                  <span class="requirement-tag">{{ req }}</span>
                                }
                              </div>
                            </div>
                            <div class="zone-furniture">
                              <div class="furniture-label">家具配置</div>
                              <div class="furniture-list">
                                @for (furniture of zone.furniture; track furniture; let isLast = $last) {
                                  {{ furniture }}@if (!isLast) {、}
                                }
                              </div>
                            </div>
                          </div>
                        }
                      </div>
                    </div>
                    
                    <!-- 预算与时间线 -->
                    <div class="detail-section">
                      <div class="section-header">
                        <h4>预算与时间线</h4>
                        <span class="total-budget">总预算 ¥{{ ((proposalAnalysis && proposalAnalysis.budget ? proposalAnalysis.budget.total : 0) || 0).toLocaleString() }}</span>
                      </div>
                      <div class="budget-breakdown">
                        @for (item of (proposalAnalysis && proposalAnalysis.budget && proposalAnalysis.budget.breakdown ? proposalAnalysis.budget.breakdown : []); track item.category) {
                          <div class="budget-item">
                            <div class="budget-category">{{ item.category }}</div>
                            <div class="budget-amount">¥{{ item.amount.toLocaleString() }}</div>
                            <div class="budget-percentage">{{ item.percentage }}%</div>
                            <div class="budget-bar">
                              <div class="budget-fill" [style.width.%]="item.percentage"></div>
                            </div>
                          </div>
                        }
                      </div>
                      <div class="timeline">
                        @for (phase of (proposalAnalysis && proposalAnalysis.timeline ? proposalAnalysis.timeline : []); track phase.phase) {
                          <div class="timeline-item">
                            <div class="phase-name">{{ phase.phase }}</div>
                            <div class="phase-duration">{{ phase.duration }}天</div>
                          </div>
                        }
                      </div>
                    </div>
                  </div>
                  
                  <!-- 方案操作按钮 -->
                  <div class="proposal-actions">
                    <button class="confirm-btn primary" (click)="confirmProposal()">
                      确认此方案
                    </button>
                    <button class="adjust-btn secondary" (click)="startMaterialAnalysis()">
                      重新分析
                    </button>
                  </div>
                </div>
              }
              
              <!-- 需求信息展示区域（原有内容，当没有方案分析时显示） -->
              @if (areRequiredStagesCompleted() && !proposalAnalysis && !isAnalyzing) {
                <div class="info-grid">
                  <!-- 色调信息 -->
                  @if (requirementKeyInfo.colorAtmosphere.description) {
                    <div class="info-item">
                      <label>色调</label>
                      <span>{{ requirementKeyInfo.colorAtmosphere.description }}</span>
                      @if (requirementKeyInfo.colorAtmosphere.mainColor) {
                        <div class="color-preview" [style.background-color]="requirementKeyInfo.colorAtmosphere.mainColor"></div>
                      }
                    </div>
                  }
                  
                  <!-- 材质信息 -->
                  @if (requirementKeyInfo.colorAtmosphere.materials && requirementKeyInfo.colorAtmosphere.materials.length > 0) {
                    <div class="info-item">
                      <label>材质</label>
                      <span>
                        @for (material of requirementKeyInfo.colorAtmosphere.materials; track material; let isLast = $last) {
                          {{ material }}@if (!isLast) {, }
                        }
                      </span>
                    </div>
                  }
                  
                  <!-- 空间结构 -->
                  @if (requirementKeyInfo.spaceStructure.aspectRatio > 0) {
                    <div class="info-item">
                      <label>空间比例</label>
                      <span>{{ requirementKeyInfo.spaceStructure.aspectRatio.toFixed(1) }}</span>
                    </div>
                  }
                  
                  @if (requirementKeyInfo.spaceStructure.ceilingHeight > 0) {
                    <div class="info-item">
                      <label>层高</label>
                      <span>{{ requirementKeyInfo.spaceStructure.ceilingHeight }}m</span>
                    </div>
                  }
                  
                  <!-- 材质权重 -->
                  @if (requirementKeyInfo.materialWeights.woodRatio > 0) {
                    <div class="info-item">
                      <label>木质比例</label>
                      <span>{{ requirementKeyInfo.materialWeights.woodRatio }}%</span>
                    </div>
                  }
                  
                  @if (requirementKeyInfo.materialWeights.fabricRatio > 0) {
                    <div class="info-item">
                      <label>布艺比例</label>
                      <span>{{ requirementKeyInfo.materialWeights.fabricRatio }}%</span>
                    </div>
                  }
                  
                  @if (requirementKeyInfo.materialWeights.metalRatio > 0) {
                    <div class="info-item">
                      <label>金属比例</label>
                      <span>{{ requirementKeyInfo.materialWeights.metalRatio }}%</span>
                    </div>
                  }
                  
                  <!-- 预设氛围 -->
                  @if (requirementKeyInfo.presetAtmosphere.name) {
                    <div class="info-item">
                      <label>预设氛围</label>
                      <span>{{ requirementKeyInfo.presetAtmosphere.name }}</span>
                    </div>
                  }
                  
                  <!-- 订单金额 -->
                  <!-- 订单金额 -->
                  <div class="info-item">
                    <label>订单金额</label>
                    <span>¥{{ orderAmount || 0 }}</span>
                  </div>
                  

                </div>
                
                <!-- 开始分析按钮 -->
                <div class="proposal-actions">
                  <button class="confirm-btn" (click)="startMaterialAnalysis()">
                    开始素材解析
                  </button>
                </div>
              } @else if (!areRequiredStagesCompleted()) {
                <!-- 等待状态 -->
                <div class="waiting-state">
                  <div class="waiting-content">
                    <h5>等待需求信息完善</h5>
                    <p>需求沟通阶段完成后，方案确认功能将自动开启</p>
                    <div class="progress-info">
                      <span>当前进度: {{ getRequiredStagesProgress() }}%</span>
                    </div>
                  </div>
                </div>
              }
            </div>
          </div>

          <!-- 右侧三分之二 - 制作流程进度 -->
          <div class="right-column">
              <!-- 移除顶部四个圆圈，直接展示阶段内容 -->
              
              <!-- 新增：客户信息右侧 2x2 售后模块布局 -->
              @if (expandedSection === 'aftercare') {
              <!-- 只读复盘模式提示 -->
              @if (isReviewOnlyMode) {
                <div class="review-only-notice">
                  <div class="notice-icon">👁️</div>
                  <div class="notice-content">
                    <h4>只读复盘模式</h4>
                    <p>您当前处于只读模式，仅可查看项目复盘数据，无法进行编辑操作</p>
                  </div>
                </div>
              }
              <!-- 上方 2x2 网格：前4个模块（只读模式下隐藏） -->
              @if (!isReviewOnlyMode) {
              <div class="aftercare-grid">
                
                <!-- 1/4：尾款结算 -->
                <div class="aftercare-module settlement-module card">
                  <div class="module-header">
                    <h2>💰 尾款结算</h2>
                    <p class="module-description">技术完成验收后自动发起尾款结算流程，支持多种支付方式自动化处理</p>
                  </div>
                  <div class="settlement-automation">
                    <div class="automation-features">
                      <div class="feature-card clickable" (click)="showFeatureDetail('自动触发流程', '技术验收完成后，系统会自动创建尾款结算记录，并通知客服跟进。整个流程无需人工干预，提高结算效率。')">
                        <div class="feature-icon">🤖</div>
                        <div class="feature-content">
                          <h4>自动触发流程</h4>
                          <p>技术验收完成后自动发起尾款结算申请</p>
                        </div>
                      </div>
                      <div class="feature-card clickable" (click)="showFeatureDetail('自动解密发送', '客户通过小程序完成支付后，系统自动解锁渲染大图，并一键发送给客户，无需手动操作。')">
                        <div class="feature-icon">🔓</div>
                        <div class="feature-content">
                          <h4>自动解密发送</h4>
                          <p>小程序支付自动解密并发送大图给客户</p>
                        </div>
                      </div>
                      <div class="feature-card clickable" (click)="showFeatureDetail('凭证智能识别', '上传微信或支付宝支付截图后，AI自动识别支付金额、支付方式和支付时间，提高录入效率。')">
                        <div class="feature-icon">📱</div>
                        <div class="feature-content">
                          <h4>凭证智能识别</h4>
                          <p>上传微信/支付宝截图自动提取金额和支付方式</p>
                        </div>
                      </div>
                      <div class="feature-card clickable" (click)="showFeatureDetail('自动通知', '支付完成后，系统自动向客户和相关人员发送通知，告知尾款已到账、大图已解锁，确保信息及时传达。')">
                        <div class="feature-icon">🔔</div>
                        <div class="feature-content">
                          <h4>自动通知</h4>
                          <p>支付完成后自动发送"尾款已到账，大图已解锁"通知</p>
                        </div>
                      </div>
                    </div>
                    <div class="settlement-status">
                      <app-settlement-card [settlements]="settlements"></app-settlement-card>
                    </div>
                    @if (canEditSection('aftercare') && isTechnicalView()) {
                      <div class="automation-actions">
                        <button 
                          class="primary-btn automation-btn"
                          (click)="initiateAutoSettlement()"
                          [disabled]="isAutoSettling"
                          type="button">
                          @if (isAutoSettling) { 
                            <span class="loading-spinner"></span> 
                            <span>自动化处理中...</span>
                          } @else { 
                            <span>🚀 启动自动化结算</span>
                          }
                        </button>
                        <button class="secondary-btn" (click)="uploadPaymentProof()" type="button">
                          <span class="upload-icon">📎</span> 
                          <span>上传支付凭证</span>
                        </button>
                      </div>
                    }
                  </div>
                </div>
                
                <!-- 2/4：全景图合成 -->
                <div class="aftercare-module panoramic-module card">
                  <div class="module-header">
                    <h2>🖼️ 全景图合成</h2>
                    <p class="module-description">集成内部全景图合成服务器，技术上传图片自动生成漫游式全景链接</p>
                  </div>
                  <div class="panoramic-synthesis">
                    <div class="panoramic-features">
                      <div class="feature-card clickable" (click)="showFeatureDetail('KR Panel集成', '系统集成了专业的KR Panel全景图合成工具，支持高质量全景图生成，确保最终效果达到行业标准。')">
                        <div class="feature-icon">🖥️</div>
                        <div class="feature-content">
                          <h4>KR Panel集成</h4>
                          <p>集成专业全景图合成工具，确保合成质量</p>
                        </div>
                      </div>
                      <div class="feature-card clickable" (click)="showFeatureDetail('智能空间标注', '技术人员上传图片时，系统会智能识别文件名中的空间信息（如「客厅-角度1.jpg」），自动完成空间分类和标注。')">
                        <div class="feature-icon">📸</div>
                        <div class="feature-content">
                          <h4>智能空间标注</h4>
                          <p>技术上传图片并标注空间名称（如"客厅-角度1"）</p>
                        </div>
                      </div>
                      <div class="feature-card clickable" (click)="showFeatureDetail('自动生成链接', '全景图合成完成后，系统自动生成可分享的漫游链接，客户可以通过链接在线浏览360度全景效果。')">
                        <div class="feature-icon">🔗</div>
                        <div class="feature-content">
                          <h4>自动生成链接</h4>
                          <p>自动生成漫游式全景链接并发送给客户</p>
                        </div>
                      </div>
                    </div>
                    <div class="recent-syntheses">
                      @if (panoramicSyntheses && panoramicSyntheses.length > 0) {
                        <div class="panoramic-card-list">
                          @for (item of panoramicSyntheses; track item.id) {
                            <app-panoramic-synthesis-card
                              [synthesis]="item"
                              [showActions]="true">
                            </app-panoramic-synthesis-card>
                          }
                        </div>
                      } @else {
                        <div class="desc">暂无最近合成记录</div>
                      }
                    </div>
                    @if (canEditSection('aftercare')) {
                      <div class="panoramic-actions">
                        <button class="primary-btn" (click)="startPanoramicSynthesis()" type="button">
                          <span>🎨 开始合成</span>
                        </button>
                        <button class="secondary-btn" (click)="viewPanoramicGallery()" type="button">
                          <span>📁 查看全景图库</span>
                        </button>
                      </div>
                    }
                  </div>
                </div>
                
                <!-- 3/4：客户评价 -->
                <div class="aftercare-module review-module card">
                  <div class="module-header">
                    <h2>⭐ 客户评价</h2>
                    <p class="module-description">邀请客户进行多维度评价并生成评价链接</p>
                  </div>
                  <div class="customer-review-enhanced">
                    <div class="review-form-container">
                      <app-customer-review-form
                        [projectName]="project?.name || ''"
                        [designerName]="getCurrentDesignerName()"
                        (reviewSubmitted)="onReviewSubmitted($event)"
                        (reviewSaved)="onReviewSaved($event)">
                      </app-customer-review-form>
                    </div>
                    <div class="review-card-container" style="margin-top:12px;">
                      <app-customer-review-card [feedbacks]="feedbacks" [detailedReviews]="detailedReviews"></app-customer-review-card>
                    </div>
                    @if (canEditSection('aftercare')) {
                      <div class="review-actions">
                        <button class="primary-btn" (click)="generateReviewLink()" type="button">
                          <span>🔗 生成评价链接</span>
                        </button>
                        <button class="secondary-btn" (click)="confirmCustomerReview()" type="button">
                          <span>✅ 确认评价完成</span>
                        </button>
                      </div>
                    }
                  </div>
                </div>
                
                <!-- 4/4：投诉处理 -->
                <div class="aftercare-module complaint-module card">
                  <div class="module-header">
                    <h2>📋 投诉处理</h2>
                    <p class="module-description">支持人工创建和关键词自动抓取投诉，提升处理效率</p>
                  </div>
                  <div class="complaint-management-enhanced">
                    <div class="complaint-features">
                      <div class="feature-card">
                        <div class="feature-icon">👥</div>
                        <div class="feature-content">
                          <h4>人工创建</h4>
                          <p>组长或客服人工创建投诉记录</p>
                        </div>
                      </div>
                      <div class="feature-card">
                        <div class="feature-icon">🔍</div>
                        <div class="feature-content">
                          <h4>关键词抓取</h4>
                          <p>自动监测企业微信群关键词（不满意、投诉、退款）</p>
                        </div>
                      </div>
                      <div class="feature-card">
                        <div class="feature-icon">🏷️</div>
                        <div class="feature-content">
                          <h4>智能标注</h4>
                          <p>自动标注投诉环节和核心问题</p>
                        </div>
                      </div>
                      <div class="feature-card">
                        <div class="feature-icon">📊</div>
                        <div class="feature-content">
                          <h4>实时更新</h4>
                          <p>处理进度实时更新至系统</p>
                        </div>
                      </div>
                    </div>
                    <div class="complaint-content">
                      <app-complaint-card [complaints]="exceptionHistories"></app-complaint-card>
                    </div>
                    @if (canEditSection('aftercare')) {
                      <div class="complaint-actions">
                        <button class="primary-btn" (click)="createComplaintManually()" type="button">
                          <span>📝 人工创建投诉</span>
                        </button>
                        <button class="secondary-btn" (click)="setupKeywordMonitoring()" type="button">
                          <span>⚙️ 设置关键词监测</span>
                        </button>
                        <button class="success-btn" (click)="confirmComplaint()" type="button">
                          <span>✅ 确认投诉处理完成</span>
                        </button>
                      </div>
                    }
                  </div>
                </div>
              </div>
              }
              
              <!-- 下方横向展示：项目复盘模块 -->
              <div class="project-review-section">
                <div class="review-section-header">
                  <div class="header-left">
                    <h2 class="section-title">📊 项目复盘</h2>
                    <p class="section-subtitle">基于SOP执行数据和经验总结，自动生成复盘报告</p>
                  </div>
                  <div class="header-right">
                    @if (canEditSection('aftercare')) {
                      <button class="generate-review-btn" (click)="generateReviewReport()" [disabled]="isGeneratingReview">
                        @if (isGeneratingReview) {
                          <span class="loading-spinner"></span>
                          生成中...
                        } @else {
                          📊 生成复盘报告
                        }
                      </button>
                      @if (projectReview) {
                        <button class="export-review-btn" (click)="exportReviewReport()">
                          📤 导出报告
                        </button>
                      }
                    }
                  </div>
                </div>

                <!-- Tab切换导航 -->
                <div class="review-tabs">
                  <button 
                    class="review-tab" 
                    [class.active]="activeReviewTab === 'sop'"
                    (click)="activeReviewTab = 'sop'">
                    <span class="tab-icon">📈</span>
                    <span class="tab-label">SOP执行数据</span>
                  </button>
                  <button 
                    class="review-tab" 
                    [class.active]="activeReviewTab === 'experience'"
                    (click)="activeReviewTab = 'experience'">
                    <span class="tab-icon">💡</span>
                    <span class="tab-label">经验复盘</span>
                  </button>
                  <button 
                    class="review-tab" 
                    [class.active]="activeReviewTab === 'suggestions'"
                    (click)="activeReviewTab = 'suggestions'">
                    <span class="tab-icon">🔧</span>
                    <span class="tab-label">优化建议</span>
                  </button>
                </div>

                <!-- Tab内容区域 -->
                <div class="review-content-area">
                  <!-- SOP执行数据 -->
                  @if (activeReviewTab === 'sop') {
                    <div class="sop-data-content">
                      <div class="sop-metrics-grid">
                        <!-- 关键指标卡片 -->
                        <div class="metric-card">
                          <div class="metric-header">
                            <span class="metric-icon">💬</span>
                            <h4 class="metric-title">需求沟通次数</h4>
                          </div>
                          <div class="metric-value-large">{{ sopMetrics?.communicationCount || 0 }}</div>
                          <div class="metric-footer">
                            <span class="metric-label">平均水平：</span>
                            <span class="metric-benchmark">{{ sopMetrics?.avgCommunication || 5 }}次</span>
                            <span class="metric-status" [class.good]="(sopMetrics?.communicationCount || 0) <= (sopMetrics?.avgCommunication || 5)" [class.warning]="(sopMetrics?.communicationCount || 0) > (sopMetrics?.avgCommunication || 5)">
                              {{ (sopMetrics?.communicationCount || 0) <= (sopMetrics?.avgCommunication || 5) ? '✓ 良好' : '⚠ 超标' }}
                            </span>
                          </div>
                        </div>

                        <div class="metric-card">
                          <div class="metric-header">
                            <span class="metric-icon">🔄</span>
                            <h4 class="metric-title">改图次数</h4>
                          </div>
                          <div class="metric-value-large">{{ sopMetrics?.revisionCount || 0 }}</div>
                          <div class="metric-footer">
                            <span class="metric-label">平均水平：</span>
                            <span class="metric-benchmark">{{ sopMetrics?.avgRevision || 2 }}次</span>
                            <span class="metric-status" [class.good]="(sopMetrics?.revisionCount || 0) <= (sopMetrics?.avgRevision || 2)" [class.warning]="(sopMetrics?.revisionCount || 0) > (sopMetrics?.avgRevision || 2)">
                              {{ (sopMetrics?.revisionCount || 0) <= (sopMetrics?.avgRevision || 2) ? '✓ 良好' : '⚠ 超标' }}
                            </span>
                          </div>
                        </div>

                        <div class="metric-card">
                          <div class="metric-header">
                            <span class="metric-icon">⏱️</span>
                            <h4 class="metric-title">交付周期</h4>
                          </div>
                          <div class="metric-value-large">{{ sopMetrics?.deliveryCycle || 0 }}<span class="unit">天</span></div>
                          <div class="metric-footer">
                            <span class="metric-label">标准周期：</span>
                            <span class="metric-benchmark">{{ sopMetrics?.standardCycle || 15 }}天</span>
                            <span class="metric-status" [class.good]="(sopMetrics?.deliveryCycle || 0) <= (sopMetrics?.standardCycle || 15)" [class.warning]="(sopMetrics?.deliveryCycle || 0) > (sopMetrics?.standardCycle || 15)">
                              {{ (sopMetrics?.deliveryCycle || 0) <= (sopMetrics?.standardCycle || 15) ? '✓ 达标' : '⚠ 延期' }}
                            </span>
                          </div>
                        </div>

                        <div class="metric-card">
                          <div class="metric-header">
                            <span class="metric-icon">⭐</span>
                            <h4 class="metric-title">客户满意度</h4>
                          </div>
                          <div class="metric-value-large">{{ sopMetrics?.customerSatisfaction || 0 }}<span class="unit">/5</span></div>
                          <div class="metric-footer">
                            <div class="satisfaction-stars">
                              @for (star of [1,2,3,4,5]; track star) {
                                <span class="star" [class.filled]="star <= (sopMetrics?.customerSatisfaction || 0)">★</span>
                              }
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- 阶段执行详情 -->
                      <div class="sop-stages-section">
                        <h3 class="subsection-title">各阶段执行详情</h3>
                        <div class="stages-timeline">
                          @for (stage of sopStagesData; track stage.name) {
                            <div class="stage-timeline-item" [class.completed]="stage.status === 'completed'" [class.ongoing]="stage.status === 'ongoing'" [class.delayed]="stage.isDelayed">
                              <div class="stage-indicator">
                                <div class="stage-dot"></div>
                                @if (!$last) {
                                  <div class="stage-line"></div>
                                }
                              </div>
                              <div class="stage-content-card">
                                <div class="stage-card-header">
                                  <h4 class="stage-name">{{ stage.name }}</h4>
                                  <span class="stage-status-badge" [class]="stage.status">
                                    {{ stage.statusText }}
                                  </span>
                                </div>
                                <div class="stage-metrics">
                                  <div class="stage-metric-item">
                                    <span class="label">计划时长：</span>
                                    <span class="value">{{ stage.plannedDuration }}天</span>
                                  </div>
                                  <div class="stage-metric-item">
                                    <span class="label">实际时长：</span>
                                    <span class="value" [class.warning]="stage.actualDuration > stage.plannedDuration">{{ stage.actualDuration }}天</span>
                                  </div>
                                  <div class="stage-metric-item">
                                    <span class="label">执行评分：</span>
                                    <span class="value score" [class]="getScoreClass(stage.score)">{{ stage.score }}/100</span>
                                  </div>
                                </div>
                                @if (stage.issues && stage.issues.length > 0) {
                                  <div class="stage-issues">
                                    <span class="issues-label">⚠️ 问题：</span>
                                    <span class="issues-text">{{ stage.issues.join('、') }}</span>
                                  </div>
                                }
                              </div>
                            </div>
                          }
                        </div>
                      </div>

                      <!-- 数据图表展示 -->
                      <div class="sop-charts-section">
                        <h3 class="subsection-title">数据分析图表</h3>
                        <div class="charts-grid">
                          <div class="chart-card">
                            <h4 class="chart-title">阶段耗时对比</h4>
                            <div class="chart-placeholder">
                              <div class="bar-chart">
                                @for (stage of sopStagesData; track stage.name) {
                                  <div class="bar-group">
                                    <div class="bar-label">{{ stage.name }}</div>
                                    <div class="bars">
                                      <div class="bar planned" [style.height.%]="(stage.plannedDuration / getMaxDuration()) * 100">
                                        <span class="bar-value">{{ stage.plannedDuration }}</span>
                                      </div>
                                      <div class="bar actual" [style.height.%]="(stage.actualDuration / getMaxDuration()) * 100">
                                        <span class="bar-value">{{ stage.actualDuration }}</span>
                                      </div>
                                    </div>
                                  </div>
                                }
                              </div>
                              <div class="chart-legend">
                                <span class="legend-item"><span class="legend-color planned"></span>计划时长</span>
                                <span class="legend-item"><span class="legend-color actual"></span>实际时长</span>
                              </div>
                            </div>
                          </div>

                          <div class="chart-card">
                            <h4 class="chart-title">执行评分雷达图</h4>
                            <div class="chart-placeholder radar-chart">
                              <div class="radar-info">
                                <p>各阶段平均得分：<strong>{{ getAverageScore() }}/100</strong></p>
                                <div class="score-items">
                                  @for (stage of sopStagesData.slice(0, 5); track stage.name) {
                                    <div class="score-item">
                                      <span class="stage-label">{{ stage.name }}:</span>
                                      <span class="stage-score" [class]="getScoreClass(stage.score)">{{ stage.score }}</span>
                                    </div>
                                  }
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  }

                  <!-- 经验复盘 -->
                  @if (activeReviewTab === 'experience') {
                    <div class="experience-content">
                      <div class="experience-intro">
                        <p class="intro-text">基于企业微信沟通记录智能提取关键信息，全面复盘项目过程</p>
                      </div>

                      <div class="experience-grid">
                        <!-- 客户需求 -->
                        <div class="experience-card needs-card">
                          <div class="card-header-custom">
                            <span class="card-icon">📝</span>
                            <h3 class="card-title-custom">客户需求</h3>
                            <span class="count-badge">{{ experienceData?.customerNeeds?.length || 0 }}项</span>
                          </div>
                          <div class="card-content-scrollable">
                            @if (experienceData?.customerNeeds && experienceData.customerNeeds.length > 0) {
                              <ul class="experience-list">
                                @for (need of experienceData.customerNeeds; track $index) {
                                  <li class="experience-item">
                                    <span class="item-bullet">•</span>
                                    <div class="item-content">
                                      <p class="item-text">{{ need.text }}</p>
                                      <div class="item-meta">
                                        <span class="meta-time">{{ need.timestamp }}</span>
                                        <span class="meta-source">来源：{{ need.source }}</span>
                                      </div>
                                    </div>
                                  </li>
                                }
                              </ul>
                            } @else {
                              <div class="empty-state-small">暂无客户需求记录</div>
                            }
                          </div>
                        </div>

                        <!-- 客户顾虑 -->
                        <div class="experience-card concerns-card">
                          <div class="card-header-custom">
                            <span class="card-icon">🤔</span>
                            <h3 class="card-title-custom">客户顾虑</h3>
                            <span class="count-badge">{{ experienceData?.customerConcerns?.length || 0 }}项</span>
                          </div>
                          <div class="card-content-scrollable">
                            @if (experienceData?.customerConcerns && experienceData.customerConcerns.length > 0) {
                              <ul class="experience-list">
                                @for (concern of experienceData.customerConcerns; track $index) {
                                  <li class="experience-item concern">
                                    <span class="item-bullet">⚠️</span>
                                    <div class="item-content">
                                      <p class="item-text">{{ concern.text }}</p>
                                      <div class="item-meta">
                                        <span class="meta-time">{{ concern.timestamp }}</span>
                                        @if (concern.resolved) {
                                          <span class="meta-resolved">✓ 已解决</span>
                                        } @else {
                                          <span class="meta-unresolved">待处理</span>
                                        }
                                      </div>
                                    </div>
                                  </li>
                                }
                              </ul>
                            } @else {
                              <div class="empty-state-small">暂无客户顾虑记录</div>
                            }
                          </div>
                        </div>

                        <!-- 投诉点 -->
                        <div class="experience-card complaints-card">
                          <div class="card-header-custom">
                            <span class="card-icon">📢</span>
                            <h3 class="card-title-custom">投诉点</h3>
                            <span class="count-badge warning">{{ experienceData?.complaintPoints?.length || 0 }}项</span>
                          </div>
                          <div class="card-content-scrollable">
                            @if (experienceData?.complaintPoints && experienceData.complaintPoints.length > 0) {
                              <ul class="experience-list">
                                @for (complaint of experienceData.complaintPoints; track $index) {
                                  <li class="experience-item complaint">
                                    <span class="item-bullet">❗</span>
                                    <div class="item-content">
                                      <p class="item-text">{{ complaint.text }}</p>
                                      <div class="item-meta">
                                        <span class="meta-time">{{ complaint.timestamp }}</span>
                                        <span class="meta-severity" [class]="complaint.severity">{{ complaint.severityText }}</span>
                                      </div>
                                      @if (complaint.resolution) {
                                        <div class="item-resolution">
                                          <span class="resolution-label">解决方案：</span>
                                          <span class="resolution-text">{{ complaint.resolution }}</span>
                                        </div>
                                      }
                                    </div>
                                  </li>
                                }
                              </ul>
                            } @else {
                              <div class="empty-state-small">✓ 暂无投诉记录</div>
                            }
                          </div>
                        </div>

                        <!-- 项目亮点 -->
                        <div class="experience-card highlights-card">
                          <div class="card-header-custom">
                            <span class="card-icon">✨</span>
                            <h3 class="card-title-custom">项目亮点</h3>
                            <span class="count-badge success">{{ experienceData?.projectHighlights?.length || 0 }}项</span>
                          </div>
                          <div class="card-content-scrollable">
                            @if (experienceData?.projectHighlights && experienceData.projectHighlights.length > 0) {
                              <ul class="experience-list">
                                @for (highlight of experienceData.projectHighlights; track $index) {
                                  <li class="experience-item highlight">
                                    <span class="item-bullet">⭐</span>
                                    <div class="item-content">
                                      <p class="item-text">{{ highlight.text }}</p>
                                      <div class="item-meta">
                                        <span class="meta-category">{{ highlight.category }}</span>
                                        @if (highlight.praised) {
                                          <span class="meta-praised">👍 客户点赞</span>
                                        }
                                      </div>
                                    </div>
                                  </li>
                                }
                              </ul>
                            } @else {
                              <div class="empty-state-small">暂无项目亮点记录</div>
                            }
                          </div>
                        </div>
                      </div>

                      <!-- 沟通记录摘要 -->
                      <div class="communication-summary">
                        <h3 class="subsection-title">关键沟通记录</h3>
                        <div class="communication-timeline">
                          @if (experienceData?.communications && experienceData.communications.length > 0) {
                            @for (comm of experienceData.communications; track $index) {
                              <div class="communication-item">
                                <div class="comm-time">{{ comm.timestamp }}</div>
                                <div class="comm-content">
                                  <div class="comm-header">
                                    <span class="comm-participant">{{ comm.participant }}</span>
                                    <span class="comm-type" [class]="comm.type">{{ comm.typeText }}</span>
                                  </div>
                                  <p class="comm-message">{{ comm.message }}</p>
                                  @if (comm.attachments && comm.attachments.length > 0) {
                                    <div class="comm-attachments">
                                      <span class="attachment-icon">📎</span>
                                      <span class="attachment-count">{{ comm.attachments.length }}个附件</span>
                                    </div>
                                  }
                                </div>
                              </div>
                            }
                          } @else {
                            <div class="empty-state-small">暂无沟通记录</div>
                          }
                        </div>
                      </div>
                    </div>
                  }

                  <!-- 优化建议 -->
                  @if (activeReviewTab === 'suggestions') {
                    <div class="suggestions-content">
                      <div class="suggestions-intro">
                        <div class="intro-card">
                          <h3 class="intro-title">智能分析与建议</h3>
                          <p class="intro-desc">基于项目执行数据和历史经验，为您提供具体可操作的优化建议</p>
                        </div>
                      </div>

                      <div class="suggestions-list">
                        @if (optimizationSuggestions && optimizationSuggestions.length > 0) {
                          @for (suggestion of optimizationSuggestions; track $index) {
                            <div class="suggestion-card" [class]="suggestion.priority">
                              <div class="suggestion-header">
                                <div class="header-left-content">
                                  <span class="suggestion-priority-badge" [class]="suggestion.priority">
                                    {{ suggestion.priorityText }}
                                  </span>
                                  <span class="suggestion-category">{{ suggestion.category }}</span>
                                </div>
                                <div class="header-right-content">
                                  <span class="suggestion-impact">预期提升：<strong>{{ suggestion.expectedImprovement }}</strong></span>
                                </div>
                              </div>
                              
                              <div class="suggestion-body">
                                <div class="suggestion-problem">
                                  <h4 class="problem-title">🔍 问题分析</h4>
                                  <p class="problem-text">{{ suggestion.problem }}</p>
                                  <div class="problem-data">
                                    @for (data of suggestion.dataPoints; track $index) {
                                      <div class="data-point">
                                        <span class="data-label">{{ data.label }}：</span>
                                        <span class="data-value" [class.warning]="data.isWarning">{{ data.value }}</span>
                                      </div>
                                    }
                                  </div>
                                </div>

                                <div class="suggestion-solution">
                                  <h4 class="solution-title">💡 优化建议</h4>
                                  <p class="solution-text">{{ suggestion.solution }}</p>
                                </div>

                                <div class="suggestion-actions-plan">
                                  <h4 class="actions-title">📋 行动计划</h4>
                                  <ul class="actions-list">
                                    @for (action of suggestion.actionPlan; track $index) {
                                      <li class="action-item">
                                        <span class="action-step">{{ $index + 1 }}.</span>
                                        <span class="action-text">{{ action }}</span>
                                      </li>
                                    }
                                  </ul>
                                </div>

                                @if (suggestion.references && suggestion.references.length > 0) {
                                  <div class="suggestion-references">
                                    <span class="references-label">📚 参考案例：</span>
                                    @for (ref of suggestion.references; track $index) {
                                      <span class="reference-tag">{{ ref }}</span>
                                    }
                                  </div>
                                }
                              </div>

                              <div class="suggestion-footer">
                                <button class="action-btn accept" (click)="acceptSuggestion(suggestion)">
                                  ✓ 采纳建议
                                </button>
                                <button class="action-btn detail" (click)="viewSuggestionDetail(suggestion)">
                                  查看详情
                                </button>
                              </div>
                            </div>
                          }
                        } @else {
                          <div class="empty-state-large">
                            <div class="empty-icon">📊</div>
                            <h3 class="empty-title">暂无优化建议</h3>
                            <p class="empty-desc">项目数据收集完成后将自动生成智能优化建议</p>
                          </div>
                        }
                      </div>

                      <!-- 建议统计 -->
                      @if (optimizationSuggestions && optimizationSuggestions.length > 0) {
                        <div class="suggestions-stats">
                          <h3 class="subsection-title">建议统计</h3>
                          <div class="stats-grid">
                            <div class="stat-card">
                              <div class="stat-icon">🔴</div>
                              <div class="stat-content">
                                <div class="stat-value">{{ getSuggestionCountByPriority('high') }}</div>
                                <div class="stat-label">高优先级</div>
                              </div>
                            </div>
                            <div class="stat-card">
                              <div class="stat-icon">🟡</div>
                              <div class="stat-content">
                                <div class="stat-value">{{ getSuggestionCountByPriority('medium') }}</div>
                                <div class="stat-label">中优先级</div>
                              </div>
                            </div>
                            <div class="stat-card">
                              <div class="stat-icon">🟢</div>
                              <div class="stat-content">
                                <div class="stat-value">{{ getSuggestionCountByPriority('low') }}</div>
                                <div class="stat-label">低优先级</div>
                              </div>
                            </div>
                            <div class="stat-card">
                              <div class="stat-icon">📈</div>
                              <div class="stat-content">
                                <div class="stat-value">{{ getAverageImprovementPercent() }}%</div>
                                <div class="stat-label">平均预期提升</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      }
                    </div>
                  }
                </div>
              </div>
              }

              <!-- 优化建议详情弹窗 -->
              @if (showSuggestionDetailModal && selectedSuggestion) {
                <div class="modal-overlay" (click)="closeSuggestionDetailModal()">
                  <div class="modal-content suggestion-detail-modal" (click)="$event.stopPropagation()">
                    <div class="modal-header">
                      <h3>💡 优化建议详情</h3>
                      <button class="close-btn" (click)="closeSuggestionDetailModal()">
                        <span>✕</span>
                      </button>
                    </div>

                    <div class="modal-body">
                      <!-- 建议概览 -->
                      <div class="detail-section overview-section">
                        <div class="section-header">
                          <h4>📋 建议概览</h4>
                        </div>
                        <div class="info-grid">
                          <div class="info-item">
                            <span class="label">优先级：</span>
                            <span class="value priority-badge" [class]="selectedSuggestion.priority">
                              {{ selectedSuggestion.priorityText }}
                            </span>
                          </div>
                          <div class="info-item">
                            <span class="label">类别：</span>
                            <span class="value">{{ selectedSuggestion.category }}</span>
                          </div>
                          <div class="info-item">
                            <span class="label">预期提升：</span>
                            <span class="value improvement">{{ selectedSuggestion.expectedImprovement }}</span>
                          </div>
                          <div class="info-item">
                            <span class="label">状态：</span>
                            <span class="value status-badge" [class.accepted]="selectedSuggestion.accepted">
                              {{ selectedSuggestion.accepted ? '已采纳' : '待处理' }}
                            </span>
                          </div>
                        </div>
                      </div>

                      <!-- 问题分析 -->
                      <div class="detail-section problem-section">
                        <div class="section-header">
                          <h4>🔍 问题分析</h4>
                        </div>
                        <div class="problem-content">
                          <p class="problem-text">{{ selectedSuggestion.problem }}</p>
                          @if (selectedSuggestion.dataPoints && selectedSuggestion.dataPoints.length > 0) {
                            <div class="data-points-grid">
                              @for (data of selectedSuggestion.dataPoints; track $index) {
                                <div class="data-point-card" [class.warning]="data.isWarning">
                                  <div class="data-label">{{ data.label }}</div>
                                  <div class="data-value">{{ data.value }}</div>
                                </div>
                              }
                            </div>
                          }
                        </div>
                      </div>

                      <!-- 优化方案 -->
                      <div class="detail-section solution-section">
                        <div class="section-header">
                          <h4>💡 优化方案</h4>
                        </div>
                        <div class="solution-content">
                          <p class="solution-text">{{ selectedSuggestion.solution }}</p>
                        </div>
                      </div>

                      <!-- 行动计划 -->
                      <div class="detail-section action-plan-section">
                        <div class="section-header">
                          <h4>📋 行动计划</h4>
                        </div>
                        <div class="action-plan-content">
                          <ol class="action-steps">
                            @for (action of selectedSuggestion.actionPlan; track $index) {
                              <li class="action-step-item">
                                <span class="step-number">{{ $index + 1 }}</span>
                                <span class="step-text">{{ action }}</span>
                              </li>
                            }
                          </ol>
                        </div>
                      </div>

                      <!-- 参考案例 -->
                      @if (selectedSuggestion.references && selectedSuggestion.references.length > 0) {
                        <div class="detail-section references-section">
                          <div class="section-header">
                            <h4>📚 参考案例</h4>
                          </div>
                          <div class="references-content">
                            <div class="reference-tags">
                              @for (ref of selectedSuggestion.references; track $index) {
                                <span class="reference-tag">{{ ref }}</span>
                              }
                            </div>
                          </div>
                        </div>
                      }
                    </div>

                    <div class="modal-footer">
                      <button class="btn btn-secondary" (click)="closeSuggestionDetailModal()">关闭</button>
                      @if (!selectedSuggestion.accepted) {
                        <button class="btn btn-primary" (click)="acceptSuggestion(selectedSuggestion); closeSuggestionDetailModal()">
                          <i class="fas fa-check"></i>
                          采纳建议
                        </button>
                      } @else {
                        <button class="btn btn-success" disabled>
                          <i class="fas fa-check-circle"></i>
                          已采纳
                        </button>
                      }
                    </div>
                  </div>
                </div>
              }
              
              <!-- 串式流程：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'">
                    @if (stage !== '订单分配') {
                      <div class="vertical-stage-header">
                        <span class="dot" [class.completed]="getStageStatus(stage) === 'completed'" [class.active]="getStageStatus(stage) === 'active'"></span>
                        <h3>{{ stage === '需求沟通' ? '需求映射' : (stage === '方案确认' ? '色彩分析报告' : stage) }}</h3>
                      </div>
                    }
                    <!-- 直接复用原阶段内容卡片：按stage匹配显示 -->
                    <div class="vertical-stage-body">
                      @if (stage === '订单分配') {
                        <!-- 审批面板（组长视角，待审批状态） -->
                        @if (showApprovalPanel) {
                          <app-order-approval-panel
                            [project]="project"
                            [currentUser]="currentUser"
                            (approvalCompleted)="onApprovalCompleted($event)">
                          </app-order-approval-panel>
                        }
                        
                        <!-- 重构后的订单分配表单 - 组合order-creation-extra和consultation-order-panel -->
                        <div class="order-creation-form-container">
                          <!-- 订单分配头部 -->
                          <div class="order-assignment-header">
                            <h2 class="assignment-title">订单分配</h2>
                            <div class="assignment-actions">
                              <button 
                                class="create-order-btn" 
                                (click)="createOrder()"
                                [disabled]="!canCreateOrder()"
                                [class.disabled]="!canCreateOrder()"
                              >
                                <span>分配订单</span>
                              </button>
                            </div>
                          </div>

                          <!-- 可滚动的表单内容区域 -->
                          <div class="scrollable-form-content">
                            <!-- 客户信息显示（如果已同步） -->
                            @if (orderCreationData?.customerInfo) {
                              <section class="synced-customer-info">
                                <h3 class="form-title">客户信息（已同步）</h3>
                                <div class="customer-info-display">
                                  <div class="info-row">
                          <div class="info-item">
                                      <label>客户姓名：</label>
                                      <span>{{ orderCreationData.customerInfo.name || '未填写' }}</span>
                          </div>
                                    <div class="info-item">
                                      <label>联系电话：</label>
                                      <span>{{ orderCreationData.customerInfo.phone || '未填写' }}</span>
                                    </div>
                                  </div>
                                  <div class="info-row">
                                    <div class="info-item">
                                      <label>微信号：</label>
                                      <span>{{ orderCreationData.customerInfo.wechat || '未填写' }}</span>
                                    </div>
                                    <div class="info-item">
                                      <label>客户类型：</label>
                                      <span>{{ orderCreationData.customerInfo.customerType || '未填写' }}</span>
                                    </div>
                                  </div>
                                </div>
                              </section>
                            }

                            <!-- 核心必填信息表单 -->
                            <section class="core-requirements-form">
                              <h3 class="form-title">核心信息 <span class="required-note">（带 * 为必填项）</span></h3>
                              <form [formGroup]="orderCreationForm" class="order-form">
                                <!-- 第一行：订单金额、小图交付时间 -->
                                <div class="form-row">
                                  <div class="form-field">
                                    <label for="orderAmount" class="field-label">订单金额 <span class="required">*</span></label>
                                    <div class="input-with-unit">
                                      <input 
                                        type="number" 
                                        id="orderAmount" 
                                        formControlName="orderAmount" 
                                        placeholder="请输入订单总金额" 
                                        class="field-input"
                                        min="0"
                                        step="0.01">
                                      <span class="input-unit">元</span>
                                    </div>
                                    @if (orderCreationForm.get('orderAmount')?.invalid && orderCreationForm.get('orderAmount')?.touched) {
                                      <div class="field-error">订单金额为必填项</div>
                                    }
                                    <div class="field-hint">报价明细需拆分至具体空间，便于后续分工</div>
                                  </div>
                                  
                                  <div class="form-field">
                                    <label for="smallImageDeliveryTime" class="field-label">小图交付时间 <span class="required">*</span></label>
                                    <input
                                      id="smallImageDeliveryTime"
                                      type="date"
                                      formControlName="smallImageDeliveryTime"
                                      class="field-input"
                                    />
                                    @if (orderCreationForm.get('smallImageDeliveryTime')?.invalid && orderCreationForm.get('smallImageDeliveryTime')?.touched) {
                                      <div class="field-error">小图交付时间为必填项</div>
                                    }
                                    <div class="field-hint">确保时间安排合理，便于设计师规划工作</div>
                                  </div>
                                </div>

                                <!-- 第二行：装修类型、需求原因 -->
                                <div class="form-row">
                                  <div class="form-field">
                                    <label for="decorationType" class="field-label">装修类型 <span class="required">*</span></label>
                                    <select id="decorationType" formControlName="decorationType" class="field-select">
                                      <option value="">请选择装修类型</option>
                                      <option value="家装">家装</option>
                                      <option value="工装">工装</option>
                                      <option value="软装">软装</option>
                                      <option value="局部改造">局部改造</option>
                                    </select>
                                    @if (orderCreationForm.get('decorationType')?.invalid && orderCreationForm.get('decorationType')?.touched) {
                                      <div class="field-error">装修类型为必填项</div>
                                    }
                                    <div class="field-hint">选择合适的装修类型有助于匹配专业设计师</div>
                                  </div>

                                  <div class="form-field">
                                    <label for="requirementReason" class="field-label">需求原因 <span class="required">*</span></label>
                                    <textarea 
                                      id="requirementReason" 
                                      formControlName="requirementReason" 
                                      class="field-textarea"
                                      placeholder="请详细描述装修需求的原因和背景"
                                      rows="3">
                                    </textarea>
                                    @if (orderCreationForm.get('requirementReason')?.invalid && orderCreationForm.get('requirementReason')?.touched) {
                                      <div class="field-error">需求原因为必填项</div>
                                    }
                                    <div class="field-hint">详细的需求背景有助于设计师理解客户期望</div>
                                  </div>
                                </div>

                                <!-- 第三行：多设计师标记 -->
                                <div class="form-row">
                                  <div class="form-field full-width">
                                    <label class="field-label">多设计师标记 <span class="required">*</span></label>
                                    <div class="checkbox-group">
                                      <label class="checkbox-item">
                                        <input 
                                          type="checkbox" 
                                          formControlName="isMultiDesigner"
                                          class="checkbox-input">
                                        <span class="checkbox-label">需要多个设计师协作</span>
                                      </label>
                                    </div>
                                    @if (orderCreationForm.get('isMultiDesigner')?.invalid && orderCreationForm.get('isMultiDesigner')?.touched) {
                                      <div class="field-error">请确认是否需要多设计师协作</div>
                                    }
                                    <div class="field-hint">复杂项目建议启用多设计师协作模式</div>
                                  </div>
                                </div>
                              </form>
                            </section>

                            <!-- 报价明细组件 -->
                            <section class="quotation-section">
                              <h3 class="form-title">报价明细</h3>
                          <app-quotation-details
                            [initialData]="quotationData"
                            (dataChange)="onQuotationDataChange($event)"
                          ></app-quotation-details>
                            </section>

                            <!-- 设计师分配组件 -->
                            <section class="designer-assignment-section">
                              <h3 class="form-title">设计师分配</h3>
                              <div class="designer-assignment-container">
                            <app-designer-assignment
                              [quotationItems]="quotationData.items"
                              [initialAssignment]="designerAssignmentData"
                              (assignmentChange)="onDesignerAssignmentChange($event)"
                              (designerClick)="onDesignerClick($event)"
                            ></app-designer-assignment>
                              </div>
                            </section>

                            <!-- 可选信息表单 -->
                            <section class="optional-requirements-form">
                              <div class="card-header" (click)="isOptionalFormExpanded = !isOptionalFormExpanded">
                                <h3 class="card-title">其他信息 <span class="optional-note">（选填）</span></h3>
                                <span class="toggle-icon" [class.expanded]="isOptionalFormExpanded">▼</span>
                              </div>
                              
                              @if (isOptionalFormExpanded) {
                                <div class="card-content">
                                  <form [formGroup]="optionalForm" class="optional-form">
                                    <!-- 大图交付时间 -->
                                    <div class="form-row">
                                      <div class="form-field">
                                        <label for="largeImageDeliveryTime" class="field-label">大图交付时间</label>
                                        <input
                                          id="largeImageDeliveryTime"
                                          type="date"
                                          formControlName="largeImageDeliveryTime"
                                          class="field-input"
                                        />
                                      </div>
                                    </div>

                                    <!-- 详细需求 -->
                                    <div class="form-row">
                                      <div class="form-field full-width">
                                        <label for="spaceRequirements" class="field-label">涉及空间</label>
                                        <textarea 
                                          id="spaceRequirements" 
                                          formControlName="spaceRequirements" 
                                          rows="3" 
                                          class="field-textarea"
                                          placeholder="请描述涉及的空间，如：客厅、卧室、厨房等"
                                        ></textarea>
                                      </div>
                                    </div>

                                    <div class="form-row">
                                      <div class="form-field full-width">
                                        <label for="designAngles" class="field-label">设计角度</label>
                                        <textarea 
                                          id="designAngles" 
                                          formControlName="designAngles" 
                                          rows="3" 
                                          class="field-textarea"
                                          placeholder="请明确各个空间的展示角度"
                                        ></textarea>
                                      </div>
                                    </div>

                                    <div class="form-row">
                                      <div class="form-field full-width">
                                        <label for="specialAreaHandling" class="field-label">特殊区域处理</label>
                                        <textarea 
                                          id="specialAreaHandling" 
                                          formControlName="specialAreaHandling" 
                                          rows="3" 
                                          class="field-textarea"
                                          placeholder="请描述特殊区域的处理要求"
                                        ></textarea>
                                      </div>
                                    </div>

                                    <div class="form-row">
                                      <div class="form-field full-width">
                                        <label for="materialRequirements" class="field-label">材质要求</label>
                                        <textarea 
                                          id="materialRequirements" 
                                          formControlName="materialRequirements" 
                                          rows="3" 
                                          class="field-textarea"
                                          placeholder="请描述对材质的具体要求"
                                        ></textarea>
                                      </div>
                                    </div>

                                    <div class="form-row">
                                      <div class="form-field full-width">
                                        <label for="lightingRequirements" class="field-label">灯光要求</label>
                                        <textarea 
                                          id="lightingRequirements" 
                                          formControlName="lightingRequirements" 
                                          rows="3" 
                                          class="field-textarea"
                                          placeholder="请描述对灯光的具体要求"
                                        ></textarea>
                                      </div>
                                    </div>
                                  </form>
                                </div>
                              }
                            </section>
                          </div>
                        </div>
                      } @else if (stage === '需求沟通') {
                        <!-- 需求沟通阶段：确认需求组件 -->
                        <app-requirements-confirm-card 
                          #requirementsCard
                          (requirementConfirmed)="syncRequirementKeyInfo($event)"
                          (progressUpdated)="syncRequirementKeyInfo($event)"
                          (stageCompleted)="onRequirementsStageCompleted($event)"
                          (dataUpdated)="onRequirementDataUpdated($event)"
                          (mappingDataUpdated)="onMappingDataUpdated($event)"
                          (uploadModalRequested)="onUploadModalRequested($event)">
                        </app-requirements-confirm-card>
                        
                      } @else if (stage === '方案确认') {
                        <!-- 分析数据汇总面板（原需求映射面板） -->
                        <div class="analysis-summary-section" style="max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; padding: 20px;">
                          <div class="section-header" style="margin-bottom: 24px; text-align: center;">
                            <h4 style="font-size: 1.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 8px;">📊 分析数据汇总</h4>
                            <p class="section-description" style="color: #6c757d; font-size: 0.95rem;">查看所有素材的详细分析数据及可视化</p>
                          </div>

                          @if (requirementsCard?.materials?.length === 0 || !requirementsCard?.materials) {
                            <div class="empty-state" style="text-align: center; padding: 60px 20px;">
                              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#dee2e6" stroke-width="1" style="margin-bottom: 20px;">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                <line x1="9" y1="9" x2="15" y2="9"></line>
                                <line x1="9" y1="15" x2="15" y2="15"></line>
                              </svg>
                              <p style="color: #6c757d; font-size: 1rem; margin: 8px 0;">暂无素材分析数据</p>
                              <p class="hint" style="color: #adb5bd; font-size: 0.9rem; margin: 8px 0;">请先在"需求沟通"阶段上传素材</p>
                            </div>
                          }

                          @for (material of requirementsCard?.materials || []; track material.id) {
                            @if (material.analysis && material.type === 'image') {
                              <div class="material-analysis-card" style="background: white; border-radius: 12px; padding: 20px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);">
                                <div class="material-header" style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #f8f9fa;">
                                  <img [src]="material.url" [alt]="material.name" class="material-thumbnail" style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
                                  <div class="material-info" style="flex: 1;">
                                    <h5 style="font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin-bottom: 4px;">{{ material.name }}</h5>
                                    <span class="upload-time" style="font-size: 0.85rem; color: #6c757d;">{{ material.uploadTime | date: 'yyyy-MM-dd HH:mm' }}</span>
                                  </div>
                                </div>

                                <div class="analysis-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
                                  <!-- 色彩分析卡片 -->
                                  @if (material.analysis.enhancedColorAnalysis) {
                                    <div class="analysis-card color-card" style="background: #f8f9fa; padding: 14px; border-radius: 10px; border: 1px solid #e9ecef;">
                                      <h6 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: #495057;">🎨 色彩分析</h6>
                                      @if (material.analysis.mainColors && material.analysis.mainColors.length > 0) {
                                        <app-color-wheel-visualizer
                                          [colors]="material.analysis.mainColors"
                                          [size]="140"
                                          [showLabels]="true"
                                          [showPercentages]="true">
                                        </app-color-wheel-visualizer>
                                      }
                                      @if (material.analysis.enhancedColorAnalysis.colorPsychology) {
                                        <div class="psychology-tags" style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;">
                                          <span class="tag" style="padding: 4px 12px; background: white; border-radius: 20px; font-size: 0.8rem; color: #667eea; border: 1px solid #667eea;">{{ material.analysis.enhancedColorAnalysis.colorPsychology.primaryMood }}</span>
                                          <span class="tag" style="padding: 4px 12px; background: white; border-radius: 20px; font-size: 0.8rem; color: #667eea; border: 1px solid #667eea;">{{ material.analysis.enhancedColorAnalysis.colorPsychology.atmosphere }}</span>
                                        </div>
                                      }
                                    </div>
                                  }

                                  <!-- 形体分析卡片 -->
                                  @if (material.analysis.formAnalysis) {
                                    <div class="analysis-card form-card" style="background: #f8f9fa; padding: 14px; border-radius: 10px; border: 1px solid #e9ecef;">
                                      <h6 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: #495057;">📐 形体分析</h6>
                                      <app-furniture-form-selector
                                        (formSelected)="requirementsCard?.onFormSelected($event)"
                                        (formDeselected)="requirementsCard?.onFormDeselected($event)">
                                      </app-furniture-form-selector>
                                      @if (material.analysis.formAnalysis.overallAssessment) {
                                        <div class="assessment-metrics" style="display: flex; gap: 12px; margin-top: 12px;">
                                          <div class="metric" style="flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px; background: white; border-radius: 8px;">
                                            <span style="font-size: 0.8rem; color: #6c757d;">复杂度</span>
                                            <span class="value" style="font-size: 1.1rem; font-weight: 700; color: #667eea; margin-top: 4px;">{{ material.analysis.formAnalysis.overallAssessment.formComplexity }}%</span>
                                          </div>
                                          <div class="metric" style="flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px; background: white; border-radius: 8px;">
                                            <span style="font-size: 0.8rem; color: #6c757d;">视觉冲击</span>
                                            <span class="value" style="font-size: 1.1rem; font-weight: 700; color: #667eea; margin-top: 4px;">{{ material.analysis.formAnalysis.overallAssessment.visualImpact }}%</span>
                                          </div>
                                        </div>
                                      }
                                    </div>
                                  }

                                  <!-- 质感分析卡片 -->
                                  @if (material.analysis.textureAnalysis) {
                                    <div class="analysis-card texture-card" style="background: #f8f9fa; padding: 14px; border-radius: 10px; border: 1px solid #e9ecef;">
                                      <h6 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: #495057;">🪨 质感分析</h6>
                                      <app-texture-comparison-visualizer
                                        [textures]="requirementsCard?.getTextureDataForMaterial(material) || []">
                                      </app-texture-comparison-visualizer>
                                      @if (material.analysis.textureAnalysis.materialClassification?.primaryMaterial) {
                                        <div class="material-tag" style="text-align: center; padding: 8px 14px; background: white; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: #667eea; margin-top: 12px;">
                                          {{ material.analysis.textureAnalysis.materialClassification?.primaryMaterial?.category }}
                                          ({{ material.analysis.textureAnalysis.materialClassification?.primaryMaterial?.confidence }}%)
                                        </div>
                                      }
                                    </div>
                                  }

                                  <!-- 纹理分析卡片 -->
                                  @if (material.analysis.patternAnalysis) {
                                    <div class="analysis-card pattern-card" style="background: #f8f9fa; padding: 14px; border-radius: 10px; border: 1px solid #e9ecef;">
                                      <h6 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: #495057;">🖼️ 纹理分析</h6>
                                      <app-pattern-visualizer>
                                      </app-pattern-visualizer>
                                      @if (material.analysis.patternAnalysis.patternRecognition) {
                                        <div class="pattern-tags" style="display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;">
                                          @for (pattern of material.analysis.patternAnalysis.patternRecognition.primaryPatterns; track pattern.type) {
                                            <span class="tag" style="padding: 4px 10px; background: white; border-radius: 20px; font-size: 0.75rem; color: #667eea; border: 1px solid #667eea;">{{ pattern.type }} ({{ pattern.coverage }}%)</span>
                                          }
                                        </div>
                                      }
                                    </div>
                                  }

                                  <!-- 灯光分析卡片 -->
                                  @if (material.analysis.lightingAnalysis) {
                                    <div class="analysis-card lighting-card" style="background: #f8f9fa; padding: 14px; border-radius: 10px; border: 1px solid #e9ecef;">
                                      <h6 style="font-size: 0.95rem; font-weight: 600; margin-bottom: 12px; color: #495057;">💡 灯光分析</h6>
                                      @if (material.analysis.lightingAnalysis.lightingRatio) {
                                        <div class="lighting-ratio-visual">
                                          <div class="ratio-bar" style="display: flex; height: 34px; border-radius: 8px; overflow: hidden; margin-bottom: 10px;">
                                            <div class="key-light" [style.width.%]="material.analysis.lightingAnalysis.lightingRatio.keyLightIntensity" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: 600;">
                                              主光 {{ material.analysis.lightingAnalysis.lightingRatio.keyLightIntensity }}%
                                            </div>
                                            <div class="fill-light" [style.width.%]="material.analysis.lightingAnalysis.lightingRatio.fillLightIntensity" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: 600;">
                                              补光 {{ material.analysis.lightingAnalysis.lightingRatio.fillLightIntensity }}%
                                            </div>
                                          </div>
                                          <span class="ratio-quality" style="display: block; text-align: center; font-size: 0.85rem; color: #667eea; font-weight: 600;">{{ requirementsCard?.getRatioDescription(material.analysis.lightingAnalysis.lightingRatio.description) }}</span>
                                        </div>
                                      }
                                      @if (material.analysis.lightingAnalysis.lightDistribution) {
                                        <div class="light-distribution" style="display: flex; flex-direction: column; gap: 6px; margin-top: 10px;">
                                          <div class="dist-item" style="display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: white; border-radius: 6px;">
                                            <span style="font-size: 0.85rem; color: #495057;">自然光</span>
                                            <span class="value" style="font-weight: 700; color: #667eea; font-size: 0.85rem;">{{ material.analysis.lightingAnalysis.lightDistribution.natural }}%</span>
                                          </div>
                                          <div class="dist-item" style="display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: white; border-radius: 6px;">
                                            <span style="font-size: 0.85rem; color: #495057;">人工光</span>
                                            <span class="value" style="font-weight: 700; color: #667eea; font-size: 0.85rem;">{{ material.analysis.lightingAnalysis.lightDistribution.artificial }}%</span>
                                          </div>
                                        </div>
                                      }
                                    </div>
                                  }
                                </div>
                              </div>
                            }
                          }
                        </div>
                        
                      } @else if (stage === '建模') {
                        <!-- 建模阶段：直接显示建模相关内容 -->
                        <div class="modeling-stage-panel">
                          <!-- 空间列表 -->
                          <div class="space-list-container">
                            <div class="space-list-header">
                              <h4>空间列表</h4>
                          @if (canEditSection('delivery')) {
                                <button class="add-space-btn" 
                                        (click)="showAddSpaceInput['modeling'] = true">
                                  <span class="add-icon">+</span>
                                  <span>添加空间</span>
                                          </button>
                              }
                                  </div>

                            <!-- 添加空间输入框 -->
                            @if (showAddSpaceInput['modeling']) {
                              <div class="add-space-input-container">
                                <input type="text" 
                                       class="space-name-input"
                                       placeholder="请输入空间名称（如：卧室、餐厅、厨房）"
                                       [(ngModel)]="newSpaceName['modeling']"
                                       (keyup.enter)="addSpace('modeling')"
                                       #spaceInput>
                                <div class="input-actions">
                                  <button class="confirm-btn" (click)="addSpace('modeling')">确认</button>
                                  <button class="cancel-btn" (click)="cancelAddSpace('modeling')">取消</button>
                                </div>
                            </div>
                          }

                            <!-- 空间卡片列表 -->
                            <div class="space-cards">
                              @for (space of getActiveProcessSpaces('modeling'); track space.id) {
                                <div class="space-card" [class.expanded]="space.isExpanded">
                                  <div class="space-header" (click)="toggleSpace('modeling', space.id)">
                                    <div class="space-info">
                                      <span class="space-name">{{ space.name }}</span>
                                      <span class="space-progress">{{ getSpaceProgress('modeling', space.id) }}%</span>
                                    </div>
                                    <div class="space-actions">
                            @if (canEditSection('delivery')) {
                                        <button class="delete-space-btn" 
                                                (click)="$event.stopPropagation(); removeSpace('modeling', space.id)"
                                                title="删除空间">
                                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                            <polyline points="3,6 5,6 21,6"></polyline>
                                            <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                          </svg>
                                        </button>
                                      }
                                      <span class="expand-arrow" [class.expanded]="space.isExpanded">▼</span>
                          </div>
                        </div>

                                  @if (space.isExpanded) {
                                    <div class="space-content">
                                      <!-- 图片上传区域 -->
                          <div class="upload-section">
                            @if (canEditSection('delivery')) {
                              <div class="upload-dropzone" 
                                               (click)="triggerSpaceFileInput('modeling', space.id)"
                                               (dragover)="onDragOver($event)"
                                               (dragleave)="onDragLeave($event)"
                                               (drop)="onSpaceFileDrop($event, 'modeling', space.id)"
                                               [class.drag-over]="isDragOver">
                                            @if (getSpaceImages('modeling', space.id).length === 0) {
                                              <div class="upload-placeholder">
                                                <div class="upload-text">点击上传或拖拽文件到此处</div>
                                                <div class="upload-hint">
                                                  支持 JPG、PNG 格式，单个文件最大 10MB
                                                </div>
                                              </div>
                                } @else {
                                  <!-- 确认上传按钮 -->
                                  @if (canEditSection('delivery') && getSpaceImages('modeling', space.id).length > 0) {
                                    <div class="confirm-upload-section">
                                      <button class="confirm-upload-btn" 
                                              (click)="$event.stopPropagation(); confirmStageUpload('modeling')"
                                              [disabled]="!canConfirmStageUpload('modeling')">
                                        <span>确认上传</span>
                                      </button>
                                    </div>
                                  }
                                  <div class="uploaded-images-grid">
                                    @for (img of getSpaceImages('modeling', space.id); 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">
                                                <circle cx="11" cy="11" r="8"></circle>
                                                <path d="m21 21-4.35-4.35"></path>
                                              </svg>
                                            </button>
                                            @if (canEditSection('delivery')) {
                                              <button class="delete-btn" (click)="$event.stopPropagation(); removeSpaceImage('modeling', space.id, img.id)">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                  <polyline points="3,6 5,6 21,6"></polyline>
                                                  <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                                </svg>
                                              </button>
                                            }
                                          </div>
                                        </div>
                                      </div>
                                    }
                                    <!-- 添加更多图片按钮 -->
                                    @if (canEditSection('delivery')) {
                                      <div class="add-more-images-btn" (click)="$event.stopPropagation(); triggerSpaceFileInput('modeling', space.id)">
                                        <div class="add-icon">+</div>
                                        <div class="add-text">添加更多</div>
                                      </div>
                                    }
                                  </div>
                                }
                              </div>
                                        } @else {
                                          <div class="readonly-images">
                                            @if (getSpaceImages('modeling', space.id).length > 0) {
                                              <div class="uploaded-images-grid">
                                                @for (img of getSpaceImages('modeling', space.id); 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>
                            </div>
                          }
                            </div>
                                            } @else {
                                              <div class="empty-tip">暂无上传的图片</div>
                          }
                            </div>
                          }
                            </div>

                                      <!-- 备注区域 -->
                                      <div class="notes-section">
                                        <label class="notes-label">备注</label>
                            @if (canEditSection('delivery')) {
                                          <textarea #modelingNotes
                                            class="notes-textarea"
                                            placeholder="请输入备注信息..."
                                            [value]="getSpaceNotes('modeling', space.id)"
                                            (blur)="updateSpaceNotes('modeling', space.id, modelingNotes.value || '')">
                                          </textarea>
                                } @else {
                                          <div class="notes-readonly">
                                            {{ getSpaceNotes('modeling', space.id) || '暂无备注' }}
                                          </div>
                                        }
                                        </div>
                                      </div>
                                    }
                                    </div>
                              }
                                  </div>
                          </div>
                        </div>
                      } @else if (stage === '软装') {
                        <!-- 软装阶段：直接显示软装相关内容 -->
                        <div class="soft-decor-stage-panel">
                          <!-- 空间列表 -->
                          <div class="space-list-container">
                            <div class="space-list-header">
                              <h4>空间列表</h4>
                              @if (canEditSection('delivery')) {
                                <button class="add-space-btn" 
                                        (click)="showAddSpaceInput['softDecor'] = true">
                                  <span class="add-icon">+</span>
                                  <span>添加空间</span>
                                </button>
                              }
                            </div>

                            <!-- 添加空间输入框 -->
                            @if (showAddSpaceInput['softDecor']) {
                              <div class="add-space-input-container">
                                <input type="text" 
                                       class="space-name-input"
                                       placeholder="请输入空间名称（如：卧室、餐厅、厨房）"
                                       [(ngModel)]="newSpaceName['softDecor']"
                                       (keyup.enter)="addSpace('softDecor')"
                                       #spaceInput>
                                <div class="input-actions">
                                  <button class="confirm-btn" (click)="addSpace('softDecor')">确认</button>
                                  <button class="cancel-btn" (click)="cancelAddSpace('softDecor')">取消</button>
                                </div>
                              </div>
                            }

                            <!-- 空间卡片列表 -->
                            <div class="space-cards">
                              @for (space of getActiveProcessSpaces('softDecor'); track space.id) {
                                <div class="space-card" [class.expanded]="space.isExpanded">
                                  <div class="space-header" (click)="toggleSpace('softDecor', space.id)">
                                    <div class="space-info">
                                      <span class="space-name">{{ space.name }}</span>
                                      <span class="space-progress">{{ getSpaceProgress('softDecor', space.id) }}%</span>
                                    </div>
                                    <div class="space-actions">
                              @if (canEditSection('delivery')) {
                                        <button class="delete-space-btn" 
                                                (click)="$event.stopPropagation(); removeSpace('softDecor', space.id)"
                                                title="删除空间">
                                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                            <polyline points="3,6 5,6 21,6"></polyline>
                                            <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                          </svg>
                                        </button>
                                      }
                                      <span class="expand-arrow" [class.expanded]="space.isExpanded">▼</span>
                            </div>
                          </div>

                                  @if (space.isExpanded) {
                                    <div class="space-content">
                                      <!-- 图片上传区域 -->
                          <div class="upload-section">
                            @if (canEditSection('delivery')) {
                              <div class="upload-dropzone" 
                                               (click)="triggerSpaceFileInput('softDecor', space.id)"
                                               (dragover)="onDragOver($event)"
                                               (dragleave)="onDragLeave($event)"
                                               (drop)="onSpaceFileDrop($event, 'softDecor', space.id)"
                                               [class.drag-over]="isDragOver">
                                            @if (getSpaceImages('softDecor', space.id).length === 0) {
                                              <div class="upload-placeholder">
                                                <div class="upload-text">点击上传或拖拽文件到此处</div>
                                                <div class="upload-hint">
                                                  建议 ≤1MB 的 JPG/PNG 小图
                                                </div>
                                              </div>
                                } @else {
                                  <!-- 确认上传按钮 -->
                                  @if (canEditSection('delivery') && getSpaceImages('softDecor', space.id).length > 0) {
                                    <div class="confirm-upload-section">
                                      <button class="confirm-upload-btn" 
                                              (click)="$event.stopPropagation(); confirmStageUpload('softDecor')"
                                              [disabled]="!canConfirmStageUpload('softDecor')">
                                        <span>确认上传</span>
                                      </button>
                                    </div>
                                  }
                                  <div class="uploaded-images-grid">
                                    @for (img of getSpaceImages('softDecor', space.id); 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">
                                                <circle cx="11" cy="11" r="8"></circle>
                                                <path d="m21 21-4.35-4.35"></path>
                                              </svg>
                                            </button>
                                            @if (canEditSection('delivery')) {
                                              <button class="delete-btn" (click)="$event.stopPropagation(); removeSpaceImage('softDecor', space.id, img.id)">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                  <polyline points="3,6 5,6 21,6"></polyline>
                                                  <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                                </svg>
                                              </button>
                                            }
                                          </div>
                                        </div>
                                      </div>
                                    }
                                    <!-- 添加更多图片按钮 -->
                                    @if (canEditSection('delivery')) {
                                      <div class="add-more-images-btn" (click)="$event.stopPropagation(); triggerSpaceFileInput('softDecor', space.id)">
                                        <div class="add-icon">+</div>
                                        <div class="add-text">添加更多</div>
                                      </div>
                                    }
                                  </div>
                                }
                              </div>
                                        } @else {
                                          <div class="readonly-images">
                                            @if (getSpaceImages('softDecor', space.id).length > 0) {
                                              <div class="uploaded-images-grid">
                                                @for (img of getSpaceImages('softDecor', space.id); 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>
                            </div>
                                        }
                                      </div>
                                    } @else {
                                              <div class="empty-tip">暂无上传的图片</div>
                                            }
                              </div>
                            }
                                  </div>

                                      <!-- 备注区域 -->
                                      <div class="notes-section">
                                        <label class="notes-label">备注</label>
                                        @if (canEditSection('delivery')) {
                                          <textarea #softDecorNotes
                                            class="notes-textarea"
                                            placeholder="请输入备注信息..."
                                            [value]="getSpaceNotes('softDecor', space.id)"
                                            (blur)="updateSpaceNotes('softDecor', space.id, softDecorNotes.value || '')">
                                          </textarea>
                                        } @else {
                                          <div class="notes-readonly">
                                            {{ getSpaceNotes('softDecor', space.id) || '暂无备注' }}
                                        </div>
                                          }
                                        </div>
                                      </div>
                                          }
                                        </div>
                                          }
                                        </div>
                                      </div>
                                    </div>
                      } @else if (stage === '渲染') {
                        <!-- 渲染阶段：直接显示渲染相关内容 -->
                        <div class="rendering-stage-panel">
                          <!-- 空间列表 -->
                          <div class="space-list-container">
                            <div class="space-list-header">
                              <h4>空间列表</h4>
                              @if (canEditSection('delivery')) {
                                <button class="add-space-btn" 
                                        (click)="showAddSpaceInput['rendering'] = true">
                                  <span class="add-icon">+</span>
                                  <span>添加空间</span>
                                </button>
                                    }
                                  </div>

                            <!-- 添加空间输入框 -->
                            @if (showAddSpaceInput['rendering']) {
                              <div class="add-space-input-container">
                                <input type="text" 
                                       class="space-name-input"
                                       placeholder="请输入空间名称（如：卧室、餐厅、厨房）"
                                       [(ngModel)]="newSpaceName['rendering']"
                                       (keyup.enter)="addSpace('rendering')"
                                       #spaceInput>
                                <div class="input-actions">
                                  <button class="confirm-btn" (click)="addSpace('rendering')">确认</button>
                                  <button class="cancel-btn" (click)="cancelAddSpace('rendering')">取消</button>
                                </div>
                              </div>
                            }

                            <!-- 空间卡片列表 -->
                            <div class="space-cards">
                              @for (space of getActiveProcessSpaces('rendering'); track space.id) {
                                <div class="space-card" [class.expanded]="space.isExpanded">
                                  <div class="space-header" (click)="toggleSpace('rendering', space.id)">
                                    <div class="space-info">
                                      <span class="space-name">{{ space.name }}</span>
                                      <span class="space-progress">{{ getSpaceProgress('rendering', space.id) }}%</span>
                                  </div>
                                    <div class="space-actions">
                                      @if (canEditSection('delivery')) {
                                        <button class="delete-space-btn" 
                                                (click)="$event.stopPropagation(); removeSpace('rendering', space.id)"
                                                title="删除空间">
                                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                            <polyline points="3,6 5,6 21,6"></polyline>
                                            <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                          </svg>
                                        </button>
                                      }
                                      <span class="expand-arrow" [class.expanded]="space.isExpanded">▼</span>
                                      </div>
                                    </div>

                                  @if (space.isExpanded) {
                                    <div class="space-content">
                                      <!-- 图片上传区域 -->
                                      <div class="upload-section">
                                        @if (canEditSection('delivery')) {
                                          <div class="upload-dropzone" 
                                               (click)="triggerSpaceFileInput('rendering', space.id)"
                                               (dragover)="onDragOver($event)"
                                               (dragleave)="onDragLeave($event)"
                                               (drop)="onSpaceFileDrop($event, 'rendering', space.id)"
                                               [class.drag-over]="isDragOver">
                                            @if (getSpaceImages('rendering', space.id).length === 0) {
                                              <div class="upload-placeholder">
                                                <div class="upload-text">点击上传或拖拽文件到此处</div>
                                                <div class="upload-hint">
                                                  需满足4K标准（最长边 ≥ 4000px）
                                                </div>
                                              </div>
                                            } @else {
                                              <!-- 确认上传按钮 -->
                                              @if (canEditSection('delivery') && getSpaceImages('rendering', space.id).length > 0) {
                                                <div class="confirm-upload-section">
                                                  <button class="confirm-upload-btn" 
                                                          (click)="$event.stopPropagation(); confirmStageUpload('rendering')"
                                                          [disabled]="!canConfirmStageUpload('rendering')">
                                                    <span>确认上传</span>
                                                  </button>
                                                </div>
                                              }
                                              <div class="uploaded-images-grid">
                                                @for (img of getSpaceImages('rendering', space.id); 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">
                                                            <circle cx="11" cy="11" r="8"></circle>
                                                            <path d="m21 21-4.35-4.35"></path>
                                                          </svg>
                                                        </button>
                                                        @if (canEditSection('delivery')) {
                                                          <button class="delete-btn" (click)="$event.stopPropagation(); removeSpaceImage('rendering', space.id, img.id)">
                                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                              <polyline points="3,6 5,6 21,6"></polyline>
                                                              <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                                            </svg>
                                                          </button>
                                                        }
                                                      </div>
                                                    </div>
                                                  </div>
                                                }
                                                <!-- 添加更多图片按钮 -->
                                                @if (canEditSection('delivery')) {
                                                  <div class="add-more-images-btn" (click)="$event.stopPropagation(); triggerSpaceFileInput('rendering', space.id)">
                                                    <div class="add-icon">+</div>
                                                    <div class="add-text">添加更多</div>
                                                  </div>
                                                }
                                              </div>
                }
              </div>
                                        } @else {
                                          <div class="readonly-images">
                                            @if (getSpaceImages('rendering', space.id).length > 0) {
                                              <div class="uploaded-images-grid">
                                                @for (img of getSpaceImages('rendering', space.id); 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>
        </div>
                                                }
      </div>
                                            } @else {
                                              <div class="empty-tip">暂无上传的图片</div>
                                            }
          </div>
                                        }
              </div>

                                      <!-- 备注区域 -->
                                      <div class="notes-section">
                                        <label class="notes-label">备注</label>
                                        @if (canEditSection('delivery')) {
                                          <textarea #renderingNotes
                                            class="notes-textarea"
                                            placeholder="请输入备注信息..."
                                            [value]="getSpaceNotes('rendering', space.id)"
                                            (blur)="updateSpaceNotes('rendering', space.id, renderingNotes.value || '')">
                                          </textarea>
                                        } @else {
                                          <div class="notes-readonly">
                                            {{ getSpaceNotes('rendering', space.id) || '暂无备注' }}
                </div>
                                        }
              </div>
                </div>
                                  }
              </div>
                              }
                </div>
              </div>
            </div>
                      } @else if (stage === '后期') {
                        <!-- 后期阶段：直接显示后期相关内容 -->
                        <div class="post-production-stage-panel">
                          <!-- 空间列表 -->
                          <div class="space-list-container">
                            <div class="space-list-header">
                              <h4>空间列表</h4>
                              @if (canEditSection('delivery')) {
                                <button class="add-space-btn" 
                                        (click)="showAddSpaceInput['postProduction'] = true">
                                  <span class="add-icon">+</span>
                                  <span>添加空间</span>
                </button>
            }
        </div>

                            <!-- 添加空间输入框 -->
                            @if (showAddSpaceInput['postProduction']) {
                              <div class="add-space-input-container">
                                <input type="text" 
                                       class="space-name-input"
                                       placeholder="请输入空间名称（如：卧室、餐厅、厨房）"
                                       [(ngModel)]="newSpaceName['postProduction']"
                                       (keyup.enter)="addSpace('postProduction')"
                                       #spaceInput>
                                <div class="input-actions">
                                  <button class="confirm-btn" (click)="addSpace('postProduction')">确认</button>
                                  <button class="cancel-btn" (click)="cancelAddSpace('postProduction')">取消</button>
          </div>
                </div>
                            }

                            <!-- 空间卡片列表 -->
                            <div class="space-cards">
                              @for (space of getActiveProcessSpaces('postProcess'); track space.id) {
                                <div class="space-card" [class.expanded]="space.isExpanded">
                                  <div class="space-header" (click)="toggleSpace('postProduction', space.id)">
                                    <div class="space-info">
                                      <span class="space-name">{{ space.name }}</span>
                                      <span class="space-progress">{{ getSpaceProgress('postProduction', space.id) }}%</span>
                </div>
                                    <div class="space-actions">
                                      @if (canEditSection('delivery')) {
                                        <button class="delete-space-btn" 
                                                (click)="$event.stopPropagation(); removeSpace('postProduction', space.id)"
                                                title="删除空间">
                                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                            <polyline points="3,6 5,6 21,6"></polyline>
                                            <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                          </svg>
                                        </button>
                                      }
                                      <span class="expand-arrow" [class.expanded]="space.isExpanded">▼</span>
                </div>
              </div>

                                  @if (space.isExpanded) {
                                    <div class="space-content">
                                      <!-- 图片上传区域 -->
                                      <div class="upload-section">
                                        @if (canEditSection('delivery')) {
                                          <div class="upload-dropzone" 
                                               (click)="triggerSpaceFileInput('postProduction', space.id)"
                                               (dragover)="onDragOver($event)"
                                               (dragleave)="onDragLeave($event)"
                                               (drop)="onSpaceFileDrop($event, 'postProduction', space.id)"
                                               [class.drag-over]="isDragOver">
                                            @if (getSpaceImages('postProduction', space.id).length === 0) {
                                              <div class="upload-placeholder">
                                                <div class="upload-text">点击上传或拖拽文件到此处</div>
                                                <div class="upload-hint">
                                                  支持 JPG、PNG 格式，后期处理图片
                                                </div>
                                              </div>
                                            } @else {
                                              <!-- 确认上传按钮 -->
                                              @if (canEditSection('delivery') && getSpaceImages('postProduction', space.id).length > 0) {
                                                <div class="confirm-upload-section">
                                                  <button class="confirm-upload-btn" 
                                                          (click)="$event.stopPropagation(); confirmStageUpload('postProduction')"
                                                          [disabled]="!canConfirmStageUpload('postProduction')">
                                                    <span>确认上传</span>
                                                  </button>
                                                </div>
                                              }
                                              <div class="uploaded-images-grid">
                                                @for (img of getSpaceImages('postProduction', space.id); 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">
                                                            <circle cx="11" cy="11" r="8"></circle>
                                                            <path d="m21 21-4.35-4.35"></path>
                                                          </svg>
                                                        </button>
                                                        @if (canEditSection('delivery')) {
                                                          <button class="delete-btn" (click)="$event.stopPropagation(); removeSpaceImage('postProduction', space.id, img.id)">
                                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                                              <polyline points="3,6 5,6 21,6"></polyline>
                                                              <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                                            </svg>
                                                          </button>
                                                        }
                                                      </div>
                                                    </div>
                                                  </div>
                                                }
                                                <!-- 添加更多图片按钮 -->
                                                @if (canEditSection('delivery')) {
                                                  <div class="add-more-images-btn" (click)="$event.stopPropagation(); triggerSpaceFileInput('postProduction', space.id)">
                                                    <div class="add-icon">+</div>
                                                    <div class="add-text">添加更多</div>
                                                  </div>
                                                }
                                              </div>
                                            }
          </div>
                                        } @else {
                                          <div class="readonly-images">
                                            @if (getSpaceImages('postProduction', space.id).length > 0) {
                                              <div class="uploaded-images-grid">
                                                @for (img of getSpaceImages('postProduction', space.id); 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>
          </div>
                    }
                  </div>
                                            } @else {
                                              <div class="empty-tip">暂无上传的图片</div>
                    }
                  </div>
                    }
                  </div>

                                      <!-- 备注区域 -->
                                      <div class="notes-section">
                                        <label class="notes-label">备注</label>
                                        @if (canEditSection('delivery')) {
                                          <textarea #postProductionNotes
                                            class="notes-textarea"
                                            placeholder="请输入备注信息..."
                                            [value]="getSpaceNotes('postProduction', space.id)"
                                            (blur)="updateSpaceNotes('postProduction', space.id, postProductionNotes.value || '')">
                                          </textarea>
                                        } @else {
                                          <div class="notes-readonly">
                                            {{ getSpaceNotes('postProduction', space.id) || '暂无备注' }}
                </div>
                    }
                  </div>
                </div>
              }
              </div>
            }
          </div>
        </div>
          </div>
                      } @else if (stage === '尾款结算') {
                        <!-- 原尾款结算售后 tab 容器已移除，根据用户要求不再使用 -->
                      }
                </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>
    }

    <!-- 参考图管理标签页 -->
    @if (isActiveTab('reference')) {
      <div class="reference-tab-content">
        <app-reference-image-manager 
          [projectId]="projectId"
          (imagesUpdated)="onReferenceImagesUpdated($event)">
        </app-reference-image-manager>
      </div>
    }
  </div>
}