yss-project/src/modules/project/pages/project-detail/project-detail.component.html

<!-- 四阶段导航（参考设计师端实现） -->
<div class="stage-toolbar">
  <div class="stage-navigation">
    @for (stage of stages; track stage.id) {
      <div
        class="stage-item"
        [class.completed]="getStageStatus(stage.id) === 'completed'"
        [class.active]="getStageStatus(stage.id) === 'active'"
        [class.pending]="getStageStatus(stage.id) === 'pending'"
        [class.clickable]="true"
        (click)="switchStage(stage.id)">
        <div class="stage-circle">
          @if (getStageStatus(stage.id) === 'completed') {
            <!-- 已完成：显示勾选图标 -->
            <svg class="icon checkmark" viewBox="0 0 512 512">
              <path fill="currentColor" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" opacity=".3"/>
              <path fill="currentColor" d="M352 176L217.6 336 160 272"/>
            </svg>
          } @else {
            <!-- 未完成：显示数字 -->
            <span class="stage-number">{{ stage.number }}</span>
          }
        </div>
        <div class="stage-label">{{ stage.name }}</div>
      </div>
      @if (!$last) {
        <!-- 连接线：当后一个阶段是active或completed时高亮 -->
        <div class="stage-connector" 
             [class.completed]="getStageStatus(stages[$index + 1].id) === 'completed' || getStageStatus(stages[$index + 1].id) === 'active'"></div>
      }
    }
  </div>
  
  <!-- 🆕 停滞期/改图期全局状态徽章（右上角） -->
  @if (project && project.get('data')) {
    <div class="project-status-badges">
      @if (project.get('data').isModification) {
        <div class="status-badge modification">
          <div class="badge-icon">🎨</div>
          <div class="badge-content">
            <div class="badge-title">改图期</div>
            <div class="badge-reason">
              @if (project.get('data').modificationReasonType === 'customer') { 客户要求 }
              @if (project.get('data').modificationReasonType === 'designer') { 设计师原因 }
              @if (project.get('data').modificationReasonType === 'custom') { {{ project.get('data').modificationCustomReason }} }
            </div>
            <div class="badge-meta">{{ project.get('data').markedBy || '组长' }} 标记</div>
          </div>
          <div class="badge-tip">上传图片后自动取消</div>
        </div>
      }
      @if (project.get('data').isStalled) {
        <div class="status-badge stalled">
          <div class="badge-icon">⏸️</div>
          <div class="badge-content">
            <div class="badge-title">停滞期</div>
            <div class="badge-reason">
              @if (project.get('data').stagnationReasonType === 'designer') { 设计师原因 }
              @if (project.get('data').stagnationReasonType === 'customer') { 客户原因 }
              @if (project.get('data').stagnationReasonType === 'custom') { {{ project.get('data').stagnationCustomReason }} }
            </div>
            <div class="badge-meta">{{ project.get('data').markedBy || '组长' }} 标记</div>
          </div>
          <div class="badge-action" (click)="cancelStagnation($event)" title="点击取消停滞期">
            <svg viewBox="0 0 512 512" class="icon">
              <path fill="currentColor" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" opacity=".3"/>
              <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z"/>
            </svg>
          </div>
        </div>
      }
    </div>
  }
</div>

<div class="content">
  <!-- 加载中 -->
  @if (loading) {
    <div class="loading-container">
      <div class="spinner">
        <div class="spinner-circle"></div>
      </div>
      <p>加载项目信息...</p>
    </div>
  }

  <!-- 错误 -->
  @if (error && !loading) {
    <div class="error-container">
      <svg class="icon error-icon" viewBox="0 0 512 512">
        <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 319.91a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.94v-.05a21.74 21.74 0 1143.44 0z"/>
      </svg>
      <p>{{ error }}</p>
      <button class="button outline" (click)="loadData()">重试</button>
    </div>
  }

  <!-- 项目详情内容 -->
  @if (!loading && !error && project) {
    <!-- 项目基本信息（可折叠） -->
    <div class="project-info-card">
      <div class="project-info-header" (click)="toggleProjectInfo()">
        <div class="title">
          <svg class="icon" viewBox="0 0 512 512">
            <path fill="currentColor" d="M256 56C145.72 56 56 145.72 56 256s89.72 200 200 200 200-89.72 200-200S366.28 56 256 56zm0 96a32 32 0 11-32 32 32 32 0 0132-32zm80 240H176a16 16 0 010-32h32v-88h-16a16 16 0 010-32h64a16 16 0 0116 16v104h64a16 16 0 010 32z"/>
          </svg>
          <span>{{ project.get('title') || '未命名项目' }}</span>
        </div>
        <div class="actions">
          <span class="collapse-text">{{ showProjectInfoCollapsed ? '展开' : '收起' }}</span>
          <svg class="icon arrow" [class.up]="!showProjectInfoCollapsed" viewBox="0 0 512 512">
            <path fill="currentColor" d="M112 328l144-144 144 144"/>
          </svg>
        </div>
      </div>
      @if (!showProjectInfoCollapsed) {
        <div class="project-info-content">
          <div class="info-grid">
            <div class="info-item"><span class="label">项目类型</span><span class="value">{{ project.get('projectType') || '-' }}</span></div>
            <div class="info-item"><span class="label">渲染类型</span><span class="value">{{ project.get('renderType') || '-' }}</span></div>
            <div class="info-item"><span class="label">交付日期</span><span class="value">{{ project.get('deadline') | date:'yyyy-MM-dd' }}</span></div>
            <div class="info-item"><span class="label">负责人</span><span class="value">{{ assignee?.get('name') || '-' }}</span></div>
            <div class="info-item"><span class="label">客户</span><span class="value">{{ contact?.get('realname') || contact?.get('name') || '-' }}</span></div>
          </div>
        </div>
      }
    </div>

    <!-- 客户选择组件（剥离为外部组件） -->
    <app-contact-selector
      [project]="project"
      [groupChat]="groupChat"
      [currentUser]="currentUser"
      (contactSelected)="onContactSelected($event)">
    </app-contact-selector>

    <!-- 群聊信息汇总（已隐藏） -->
    <!-- 
    @if (groupChat && currentStage !== 'delivery') {
      <app-group-chat-summary
        [groupChat]="groupChat"
        [contact]="contact"
        [cid]="cid">
      </app-group-chat-summary>
    }
    -->

    <!-- 项目问卷卡片 -->
    @if (contact && (currentStage=='order' || currentStage=='requirements')) {
      <div class="survey-card">
        <div class="survey-header">
          <div class="survey-title">
            <svg class="icon" viewBox="0 0 512 512">
              <path fill="currentColor" d="M336 64h32a48 48 0 0148 48v320a48 48 0 01-48 48H144a48 48 0 01-48-48V112a48 48 0 0148-48h32" opacity=".3"/>
              <path fill="currentColor" d="M336 64h-80a48 48 0 00-96 0h-80a48 48 0 00-48 48v320a48 48 0 0048 48h224a48 48 0 0048-48V112a48 48 0 00-48-48zM256 32a16 16 0 11-16 16 16 16 0 0116-16zm112 400H144V112h224z"/>
              <path fill="currentColor" d="M176 208h160v16H176zm0 64h160v16H176zm0 64h160v16H176z"/>
            </svg>
            <span>项目需求调查</span>
          </div>
          <div class="survey-badge" [class.filled]="surveyStatus.filled">
            {{ surveyStatus.filled ? '已填写' : '待填写' }}
          </div>
        </div>

        <div class="survey-content">
          @if (surveyStatus.filled) {
            <!-- 已填写状态 -->
            <div class="survey-info">
              <svg class="icon success-icon" viewBox="0 0 512 512">
                <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm108.25 138.29l-134.4 160a16 16 0 01-12 5.71h-.27a16 16 0 01-11.89-5.3l-57.6-64a16 16 0 1123.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0124.5 20.58z"/>
              </svg>
              <div class="survey-text">
                <p class="survey-desc">
                  {{ surveyStatus.contact.get('realname') || surveyStatus.contact.get('name') }} 已完成需求调查
                </p>
                <p class="survey-meta">
                  完成时间: {{ surveyStatus.surveyLog?.get('completedAt') | date:'yyyy-MM-dd HH:mm' }}
                </p>
              </div>
            </div>

            <button class="button secondary" (click)="handleSurveyClick($event)">
              <svg class="icon" viewBox="0 0 512 512">
                <path fill="currentColor" d="M255.66 112c-77.94 0-157.89 45.11-220.83 135.33a16 16 0 00-.27 17.77C82.92 340.8 161.8 400 255.66 400c92.84 0 173.34-59.38 221.79-135.25a16.14 16.14 0 000-17.47C428.89 172.28 347.8 112 255.66 112z" opacity=".3"/>
                <circle cx="256" cy="256" r="80" fill="currentColor"/>
              </svg>
              <span>查看答卷</span>
            </button>
          } @else {
            <!-- 未填写状态 -->
            <div class="survey-info">
              <svg class="icon pending-icon" viewBox="0 0 512 512">
                <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 319.91a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.94v-.05a21.74 21.74 0 1143.44 0z"/>
              </svg>
              <div class="survey-text">
                <p class="survey-desc">
                  邀请 客户 填写项目需求调查表
                </p>
                <p class="survey-meta">
                  了解客户需求,提供更精准的服务方案
                </p>
              </div>
            </div>

            @if (canEdit && groupChat) {
              <button class="button primary" (click)="handleSurveyClick($event)">
                <svg class="icon" viewBox="0 0 512 512">
                  <path fill="currentColor" d="M476.59 227.05l-.16-.07L49.35 49.84A23.56 23.56 0 0027.14 52 24.65 24.65 0 0016 72.59v113.29a24 24 0 0019.52 23.57l232.93 43.07a4 4 0 010 7.86L35.53 303.45A24 24 0 0016 327v113.31A23.57 23.57 0 0026.59 460a23.94 23.94 0 0013.22 4 24.55 24.55 0 009.52-1.93L476.4 285.94l.19-.09a32 32 0 000-58.8z"/>
                </svg>
                <span>发送问卷</span>
              </button>
            } @else {
              <div class="survey-tips">
                <svg class="icon" viewBox="0 0 512 512">
                  <path fill="currentColor" d="M256 56C145.72 56 56 145.72 56 256s89.72 200 200 200 200-89.72 200-200S366.28 56 256 56zm0 82a26 26 0 11-26 26 26 26 0 0126-26zm48 226h-88a16 16 0 010-32h28v-88h-16a16 16 0 010-32h32a16 16 0 0116 16v104h28a16 16 0 010 32z"/>
                </svg>
                <span>需要在企微群聊中发送问卷</span>
              </div>
            }
          }
        </div>

        <!-- 问卷说明 -->
        @if (!surveyStatus.filled) {
        <div class="survey-footer">
          <div class="survey-highlights">
            <div class="highlight-item">
              <svg class="icon" viewBox="0 0 512 512">
                <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"/>
              </svg>
              <span>3-5分钟</span>
            </div>
            <div class="highlight-item">
              <svg class="icon" viewBox="0 0 512 512">
                <path fill="currentColor" d="M144 144v296a8 8 0 008 8h56V144zm144 0v304h56a8 8 0 008-8V144zm144 0v272a24 24 0 01-24 24h-40V144zM64 144v328a24 24 0 0024 24h40V144z" opacity=".3"/>
                <path fill="currentColor" d="M496 124a12 12 0 00-12-12H432V40a24 24 0 00-24-24H104a24 24 0 00-24 24v72H28a12 12 0 00-12 12v20a12 12 0 0012 12h456a12 12 0 0012-12zm-96-12H112V48h288z"/>
              </svg>
              <span>8道题目</span>
            </div>
            <div class="highlight-item">
              <svg class="icon" viewBox="0 0 512 512">
                <path fill="currentColor" d="M400 192H32L16 448l16 32h448l16-32-16-256zm-280 96h-16a8 8 0 01-8-8v-16a8 8 0 018-8h16a8 8 0 018 8v16a8 8 0 01-8 8z"/>
                <path fill="currentColor" d="M464 32H48C21.5 32 0 53.5 0 80v96h512V80c0-26.5-21.5-48-48-48zM148 140a12 12 0 01-12 12h-52a12 12 0 01-12-12v-24a12 12 0 0112-12h52a12 12 0 0112 12zm216 0a12 12 0 01-12 12H212a12 12 0 01-12-12v-24a12 12 0 0112-12h140a12 12 0 0112 12z"/>
              </svg>
              <span>选择题为主</span>
            </div>
          </div>
        </div>
        }
      </div>
    }

    <!-- 子路由内容（各阶段组件） -->
    <div class="stage-content">
      <!-- 组长审批面板（订单分配阶段 + 待审批状态） -->
      @if (showApprovalPanel) {
        <app-order-approval-panel
          [project]="project"
          [currentUser]="currentUser"
          (approvalCompleted)="onApprovalCompleted($event)">
        </app-order-approval-panel>
      }
      <!-- 阶段内容始终显示 -->
      <router-outlet></router-outlet>
    </div>
  }

  <!-- 项目底部卡片 -->
  @if (!loading && !error && project) {
    <app-project-bottom-card
      [project]="project"
      [groupChat]="groupChat"
      [currentUser]="currentUser"
      [cid]="cid"
      [issueCount]="issueCount"
      (showFiles)="showFiles()"
      (showMembers)="showMembers()"
      (showIssues)="showIssues()">
    </app-project-bottom-card>
  }

  <!-- 文件模态框 -->
  <app-project-files-modal
    [project]="project"
    [currentUser]="currentUser"
    [isVisible]="showFilesModal"
    (close)="closeFilesModal()">
  </app-project-files-modal>

  <!-- 成员模态框 -->
     <app-project-members-modal
     [project]="project"
     [groupChat]="groupChat"
     [currentUser]="currentUser"
     [cid]="cid"
     [isVisible]="showMembersModal"
     (close)="closeMembersModal()">
    </app-project-members-modal>

  <!-- 问题模态框 -->
  <app-project-issues-modal
    [project]="project"
    [currentUser]="currentUser"
    [isVisible]="showIssuesModal"
    (close)="closeIssuesModal()">
  </app-project-issues-modal>

  <!-- 🆕 停滞期和改图期状态标记（右下角） -->
  @if (!loading && !error && project) {
    <div class="project-status-badges">
      <!-- 停滞期标记 -->
      @if (isStalled) {
        <div class="status-badge stalled" (click)="cancelStagnation()">
          <div class="badge-icon">⏸️</div>
          <div class="badge-content">
            <div class="badge-title">停滞期</div>
            <div class="badge-reason">{{ getReasonText('stagnation') }}</div>
            @if (stagnationInfo.markedBy) {
              <div class="badge-meta">{{ stagnationInfo.markedBy }} 标记</div>
            }
          </div>
          <div class="badge-action">
            <svg class="icon" viewBox="0 0 512 512">
              <path fill="currentColor" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" opacity=".3"/>
              <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z"/>
            </svg>
          </div>
        </div>
      }
      
      <!-- 改图期标记 -->
      @if (isModification) {
        <div class="status-badge modification">
          <div class="badge-icon">🎨</div>
          <div class="badge-content">
            <div class="badge-title">改图期</div>
            <div class="badge-reason">{{ getReasonText('modification') }}</div>
            @if (modificationInfo.markedBy) {
              <div class="badge-meta">{{ modificationInfo.markedBy }} 标记</div>
            }
          </div>
          <div class="badge-tip">上传图片后自动取消</div>
        </div>
      }
    </div>
  }
</div>