yss-project/src/app/pages/designer/dashboard/dashboard.html

<div class="dashboard-container">
  <header class="dashboard-header">
    <h1>设计师工作台</h1>
    
    <!-- 顶部导航 -->
    <nav class="dashboard-nav">
      <button class="nav-btn active" (click)="switchDashboard('main')">工作台</button>
      <button class="nav-btn" (click)="switchDashboard('skills')">能力雷达</button>
      <button class="nav-btn" (click)="switchDashboard('personal')">个人看板</button>
    </nav>
  </header>

  <!-- 主要内容区域 - 工作台 -->
  <div *ngIf="activeDashboard === 'main'" class="dashboard-main">
    <!-- 核心信息卡片区域 - 每行列3张卡片 -->
    <section class="core-cards-section">
      <div class="cards-grid">
        <!-- 紧急任务卡片 -->
        <div *ngFor="let task of urgentTasks" class="core-card urgent-card">
          <div class="card-header">
            <span class="card-badge urgent">紧急</span>
            <h3>{{ task.title }}</h3>
          </div>
          <div class="card-content">
            <p class="project-name">项目: {{ task.projectName }}</p>
            <p class="countdown">剩余: {{ getTaskCountdown(task.id) }}</p>
          </div>
          <div class="card-actions">
            <button [routerLink]="['/designer/project-detail', task.projectId]" class="btn-primary">
              立即处理
            </button>
          </div>
        </div>
        
        <!-- 待办任务卡片 -->
        <div *ngFor="let task of getTopTasks(6 - urgentTasks.length)" class="core-card task-card">
          <div class="card-header">
            <span class="card-badge" [class.overdue]="task.isOverdue">
              {{ task.stage }}
              <span *ngIf="task.isOverdue">/超期</span>
            </span>
            <h3>{{ task.title }}</h3>
          </div>
          <div class="card-content">
            <p class="project-name">项目: {{ task.projectName }}</p>
            <p class="deadline" [class.overdue]="task.isOverdue">
              截止: {{ task.deadline | date:'yyyy-MM-dd HH:mm' }}
            </p>
            
            <!-- 进度条 -->
            <div class="task-progress" *ngIf="task.stage !== '完成'">
              <div class="progress-bar">
                <div class="progress-fill" [style.width]="getTaskStageProgress(task.id) + '%'">
                </div>
              </div>
              <p class="progress-text">{{ getTaskStageProgress(task.id) }}%</p>
            </div>
          </div>
          <div class="card-actions">
            <button *ngIf="!task.isCompleted" (click)="markTaskAsCompleted(task.id)" class="btn-secondary">
              标记完成
            </button>
            <button [routerLink]="['/designer/project-detail', task.projectId]" class="btn-primary">
              查看详情
            </button>
          </div>
        </div>
        
        <!-- 项目饱和度卡片 -->
        <div class="core-card workload-card" *ngIf="(urgentTasks.length + tasks.length) < 6">
          <div class="card-header">
            <span class="card-badge workload">饱和度</span>
            <h3>当前工作量</h3>
          </div>
          <div class="card-content">
            <div class="workload-indicator">
              <div class="workload-circle" [style.background]="getWorkloadColor()">
                <span class="workload-percentage">{{ workloadPercentage }}%</span>
              </div>
            </div>
            <p class="workload-status">{{ getWorkloadStatus() }}</p>
          </div>
          <div class="card-actions">
            <button class="btn-secondary" (click)="switchDashboard('personal')">
              查看详情
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- 附加信息区域 -->
    <section class="additional-info-section">
      <!-- 待处理反馈区域 -->
      <div class="info-column" *ngIf="pendingFeedbacks.length > 0">
        <div class="section-header">
          <h2>待处理反馈</h2>
        </div>
        
        <div class="feedback-list">
          <div *ngFor="let item of pendingFeedbacks" class="feedback-item">
            <div class="feedback-content">
              <p class="feedback-title">⚠️ {{ item.task.title }} - 客户反馈</p>
              <p class="feedback-project">项目: {{ item.task.projectName }}</p>
              <p class="feedback-summary">反馈: {{ !item.feedback.isSatisfied ? '不满意' : '满意' }}</p>
            </div>
            <div class="feedback-actions">
              <button (click)="handleFeedback(item.task.id)" class="btn-handle-feedback">
                处理反馈
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 代班信息区域 -->
      <div class="info-column" *ngIf="shiftTasks.length > 0">
        <div class="section-header">
          <h2>👥 代班信息</h2>
          <button class="add-shift-btn" (click)="openShiftModal()">
            添加代班任务
          </button>
        </div>
        <div class="shift-list">
          <div class="shift-item" *ngFor="let shift of shiftTasks">
            <div class="shift-header">
              <div class="shift-project">{{ shift.projectName }}</div>
              <div class="shift-priority" [class.priority-high]="shift.priority === '高'" [class.priority-medium]="shift.priority === '中'" [class.priority-low]="shift.priority === '低'">
                {{ shift.priority }}级
              </div>
            </div>
            <div class="shift-details">
              <div class="shift-task">{{ shift.taskDescription }}</div>
              <div class="shift-time">代班时间: {{ shift.shiftDate }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 时间预警区域 -->
      <div class="info-column" *ngIf="overdueTasks.length > 0">
        <div class="section-header">
          <h2>⏰ 时间预警</h2>
        </div>
        
        <div class="warning-list">
          <div *ngFor="let task of overdueTasks" class="warning-item">
            <div class="warning-content">
              <p class="warning-title">{{ task.title }} - 已超期</p>
              <p class="warning-detail">项目: {{ task.projectName }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部信息分层展示 -->
    <div class="bottom-sections">
      <!-- 能力雷达区域 -->
      <section class="bottom-section">
        <app-skill-radar></app-skill-radar>
      </section>
    </div>
  </div>

  <!-- 能力雷达单独视图 -->
  <div *ngIf="activeDashboard === 'skills'" class="skills-view">
    <app-skill-radar></app-skill-radar>
  </div>

  <!-- 个人看板单独视图 -->
  <div *ngIf="activeDashboard === 'personal'" class="personal-view">
    <app-personal-board></app-personal-board>
  </div>

  <!-- 提醒话术弹窗 -->
  <div *ngIf="reminderMessage" class="reminder-modal">
    <div class="modal-content">
      <h3>提醒话术</h3>
      <p>{{ reminderMessage }}</p>
      <button (click)="clearReminder()" class="btn-close">关闭</button>
    </div>
  </div>
</div>