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

<div class="header">
  <div class="toolbar">
    <!-- <div class="buttons-start">
      <button class="back-button" (click)="goBack()">
        <svg class="icon" viewBox="0 0 512 512">
          <path fill="currentColor" d="M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48zm35.31 292.69a16 16 0 11-22.62 22.62l-96-96a16 16 0 010-22.62l96-96a16 16 0 0122.62 22.62L206.63 256z"/>
        </svg>
      </button>
    </div> -->
    <div class="title">{{ project?.get('title') || '项目详情' }}</div>
    <!-- <div class="buttons-end">
      <button class="icon-button">
        <svg class="icon" viewBox="0 0 512 512">
          <path fill="currentColor" d="M256 176a32 32 0 11-32 32 32 32 0 0132-32zM256 80a32 32 0 11-32 32 32 32 0 0132-32zM256 272a32 32 0 11-32 32 32 32 0 0132-32z"/>
        </svg>
      </button>
    </div> -->
  </div>

  <!-- 四阶段导航 -->
  <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'"
          (click)="switchStage(stage.id)">
          <div class="stage-circle">
            @if (getStageStatus(stage.id) === 'completed') {
              <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="M352 176L217.6 336 160 272"/>
              </svg>
            } @else {
              <span>{{ stage.number }}</span>
            }
          </div>
          <div class="stage-label">{{ stage.name }}</div>
        </div>
        @if (!$last) {
          <div class="stage-connector" [class.completed]="getStageStatus(stage.id) === 'completed'"></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="customer-quick-view">
      <div class="card">
        <div class="card-content">
          <div class="customer-info">
            <div class="avatar">
              @if (customer?.get('data')?.avatar) {
                <img [src]="customer?.get('data')?.avatar" alt="客户头像" />
              } @else {
                <svg class="icon avatar-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 60a60 60 0 11-60 60 60 60 0 0160-60zm0 336c-63.6 0-119.92-36.47-146.39-89.68C109.74 329.09 176.24 296 256 296s146.26 33.09 146.39 58.32C376.92 407.53 319.6 444 256 444z"/>
                </svg>
              }
            </div>
            <div class="info-text">
              <h3>{{ customer?.get('name') || '待设置' }}</h3>
              @if (canViewCustomerPhone) {
                <p>{{ customer?.get('mobile') }}</p>
              }
              <div class="tags">
                <span class="badge badge-primary">{{ customer?.get('source') }}</span>
                <span class="badge" [class.badge-success]="project.get('status') === '进行中'" [class.badge-warning]="project.get('status') !== '进行中'">
                  {{ project.get('status') }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 子路由内容（各阶段组件） -->
    <div class="stage-content">
      <router-outlet></router-outlet>
    </div>
  }
</div>