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" [class.active]="activeDashboard === 'main'" (click)="switchDashboard('main')">工作台</button>
      <button class="nav-btn" [class.active]="activeDashboard === 'skills'" (click)="switchDashboard('skills')">能力雷达</button>
      <button class="nav-btn" [class.active]="activeDashboard === 'personal'" (click)="switchDashboard('personal')">个人看板</button>
    </nav>
  </header>

  <!-- 主要内容区域 - 工作台 -->
  <div *ngIf="activeDashboard === 'main'" class="dashboard-main">

    <!-- 视图切换按钮 -->
    <div class="view-toggle">
      <button class="toggle-btn" (click)="toggleView()">
        {{ viewMode === 'card' ? '切换为列表' : '切换为卡片' }}
      </button>
    </div>

    <!-- 卡片视图 -->
    @if (viewMode === 'card') {
      <!-- 核心信息卡片区域 - 每行列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 !== '投诉处理' && !task.isCompleted">
                <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>
    }

    <!-- 列表视图 -->
    @if (viewMode === 'list') {
      <section class="list-section">
        <div class="list-header">
          <div class="col urgency-col">紧急度</div>
          <div class="col project-col">项目</div>
          <div class="col title-col">任务</div>
          <div class="col stage-col">阶段</div>
          <div class="col deadline-col">截止时间</div>
          <div class="col left-col">剩余</div>
          <div class="col actions-col">操作</div>
        </div>
        <div class="list-body">
          @for (task of getTasksSortedByUrgency(); track task.id) {
            <div class="list-row">
              <div class="col urgency-col">
                <span class="urgency-dot" [ngClass]="getUrgencyClass(task)"></span>
                <span class="urgency-text">{{ getUrgencyLevel(task) }}</span>
              </div>
              <div class="col project-col">{{ task.projectName }}</div>
              <div class="col title-col">{{ task.title }}</div>
              <div class="col stage-col">{{ task.stage }}</div>
              <div class="col deadline-col">{{ task.deadline | date:'yyyy-MM-dd HH:mm' }}</div>
              <div class="col left-col">{{ getListTimeLeft(task) }}</div>
              <div class="col actions-col">
                <button class="btn-link" [routerLink]="['/designer/project-detail', task.projectId]">详情</button>
                <button class="btn-link" *ngIf="!task.isCompleted" (click)="markTaskAsCompleted(task.id)">完成</button>
              </div>
            </div>
          }
        </div>
      </section>
    }

  </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>