yss-project/src/app/pages/team-leader/project-timeline/project-progress-modal.html

<!-- 弹窗遮罩 -->
<div class="modal-overlay" *ngIf="visible" (click)="onClose()">
  <!-- 弹窗内容 -->
  <div class="modal-content" (click)="onContentClick($event)">
    <!-- 标题栏 -->
    <div class="modal-header">
      <h2 class="modal-title">
        <span class="icon">📊</span>
        项目进度详情
      </h2>
      <button class="close-btn" (click)="onClose()" aria-label="关闭">
        <span>✕</span>
      </button>
    </div>

    <!-- 项目基本信息 -->
    <div class="project-info" *ngIf="summary">
      <div class="info-row">
        <span class="label">项目名称：</span>
        <span class="value">{{ summary.projectName }}</span>
      </div>
      <div class="info-row">
        <span class="label">空间总数：</span>
        <span class="value">{{ summary.totalSpaces }} 个</span>
      </div>
      <div class="info-row">
        <span class="label">已完成空间：</span>
        <span class="value">{{ summary.spacesWithDeliverables }} / {{ summary.totalSpaces }}</span>
      </div>
    </div>

    <!-- 整体进度 -->
    <div class="overall-progress" *ngIf="summary">
      <div class="progress-header">
        <span class="label">整体完成率</span>
        <span class="percentage" [style.color]="getOverallProgressColor()">
          {{ summary.overallCompletionRate }}%
        </span>
        <span class="status-badge" [style.background-color]="getOverallProgressColor()">
          {{ getOverallStatusLabel() }}
        </span>
      </div>
      <div class="progress-bar-container">
        <div class="progress-bar-bg">
          <div 
            class="progress-bar-fill"
            [style.width.%]="summary.overallCompletionRate"
            [style.background-color]="getOverallProgressColor()">
          </div>
        </div>
      </div>
    </div>

    <!-- 文件统计 -->
    <div class="file-stats" *ngIf="summary">
      <div class="stats-title">交付文件统计</div>
      <div class="stats-grid">
        <div class="stat-item">
          <span class="stat-icon">🏗️</span>
          <span class="stat-label">白模</span>
          <span class="stat-value">{{ summary.totalByType.whiteModel }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-icon">🎨</span>
          <span class="stat-label">软装</span>
          <span class="stat-value">{{ summary.totalByType.softDecor }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-icon">🖼️</span>
          <span class="stat-label">渲染</span>
          <span class="stat-value">{{ summary.totalByType.rendering }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-icon">✨</span>
          <span class="stat-label">后期</span>
          <span class="stat-value">{{ summary.totalByType.postProcess }}</span>
        </div>
      </div>
      <div class="stats-total">
        总计：<strong>{{ summary.totalDeliverableFiles }}</strong> 个文件
      </div>
    </div>

    <!-- 各阶段进度详情 -->
    <div class="phase-progress" *ngIf="summary">
      <div class="section-title">各阶段进度明细</div>
      
      <div class="phase-list">
        <div 
          *ngFor="let phase of getPhases()"
          class="phase-item"
          [class.expanded]="isPhaseExpanded(phase.name)">
          
          <!-- 阶段概览（可点击展开/收起） -->
          <div class="phase-overview" (click)="togglePhase(phase.name)">
            <div class="phase-header">
              <span class="phase-icon">{{ PHASE_INFO[phase.name].icon }}</span>
              <span class="phase-label">{{ phase.info.phaseLabel }}</span>
              <span class="phase-progress-badge" [style.background-color]="getPhaseProgressColor(phase.info.completionRate)">
                {{ phase.info.completionRate }}%
              </span>
              <span class="expand-icon">{{ isPhaseExpanded(phase.name) ? '▼' : '▶' }}</span>
            </div>
            
            <div class="phase-summary">
              <span class="summary-text">
                已完成 {{ phase.info.completedSpaces }} / {{ phase.info.requiredSpaces }} 个空间
                （{{ phase.info.totalFiles }} 个文件）
              </span>
            </div>
            
            <!-- 阶段进度条 -->
            <div class="phase-progress-bar">
              <div class="progress-bar-bg">
                <div 
                  class="progress-bar-fill"
                  [style.width.%]="phase.info.completionRate"
                  [style.background-color]="getPhaseProgressColor(phase.info.completionRate)">
                </div>
              </div>
            </div>
          </div>

          <!-- 未完成空间详情（展开时显示） -->
          <div class="phase-details" *ngIf="isPhaseExpanded(phase.name)">
            <div class="details-header">
              <span class="details-title">未完成空间列表</span>
              <span class="details-count">({{ phase.info.incompleteSpaces.length }} 个)</span>
            </div>
            
            <div class="incomplete-spaces" *ngIf="phase.info.incompleteSpaces.length > 0">
              <div 
                *ngFor="let space of phase.info.incompleteSpaces"
                class="space-item">
                <span class="space-icon">📦</span>
                <span class="space-name">{{ space.spaceName }}</span>
                <span class="assignee" *ngIf="space.assignee">
                  负责人：{{ space.assignee }}
                </span>
              </div>
            </div>
            
            <div class="no-incomplete" *ngIf="phase.info.incompleteSpaces.length === 0">
              <span class="success-icon">✅</span>
              <span>所有空间已完成此阶段交付</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="modal-footer">
      <button class="btn btn-secondary" (click)="onClose()">
        关闭
      </button>
      <button class="btn btn-primary" (click)="onReportIssue()">
        <span class="btn-icon">🐛</span>
        提交问题
      </button>
    </div>
  </div>
</div>