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

<div class="dashboard-container">
  <header class="dashboard-header">
    <div class="header-content">
      <h1>设计师工作台</h1>
      
      <!-- 请假申请按钮 -->
      <button class="leave-btn" (click)="openLeaveModal()" title="申请请假">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/>
        </svg>
        申请请假
      </button>
    </div>
    
    <!-- 顶部导航 -->
    <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>
  
  <!-- 请假申请弹窗 -->
  @if (showLeaveModal) {
    <div class="modal-overlay" (click)="closeLeaveModal()">
      <div class="modal-content leave-modal" (click)="$event.stopPropagation()">
        <div class="modal-header">
          <h3>申请请假</h3>
          <button class="close-btn" (click)="closeLeaveModal()">×</button>
        </div>
        
        <div class="modal-body">
          <div class="form-group">
            <label>请假类型</label>
            <select [(ngModel)]="leaveForm.type" class="form-control">
              <option value="annual">年假</option>
              <option value="sick">病假</option>
              <option value="personal">事假</option>
              <option value="other">其他</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>开始日期</label>
            <input 
              type="date" 
              [(ngModel)]="leaveForm.startDate" 
              class="form-control"
              [min]="today"
            >
          </div>
          
          <div class="form-group">
            <label>结束日期</label>
            <input 
              type="date" 
              [(ngModel)]="leaveForm.endDate" 
              class="form-control"
              [min]="leaveForm.startDate || today"
            >
          </div>
          
          <div class="form-group">
            <label>请假原因</label>
            <textarea 
              [(ngModel)]="leaveForm.reason" 
              class="form-control" 
              rows="4"
              placeholder="请输入请假原因..."
            ></textarea>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="btn btn-cancel" (click)="closeLeaveModal()">取消</button>
          <button class="btn btn-submit" (click)="submitLeaveApplication()">提交申请</button>
        </div>
      </div>
    </div>
  }
  
  <!-- 我的请假记录（可选，显示在个人看板） -->
  @if (activeDashboard === 'personal' && leaveApplications.length > 0) {
    <div class="leave-records-section">
      <h4>我的请假记录</h4>
      <div class="records-list">
        @for (leave of leaveApplications; track leave.id) {
          <div class="record-item" [class]="leave.status">
            <div class="record-header">
              <span class="record-type">{{ getLeaveTypeText(leave.type) }}</span>
              <span class="record-status" [class]="leave.status">
                {{ getLeaveStatusText(leave.status) }}
              </span>
            </div>
            <div class="record-body">
              <p class="record-date">
                {{ leave.startDate | date:'yyyy-MM-dd' }} 至 {{ leave.endDate | date:'yyyy-MM-dd' }}
                （共{{ leave.days }}天）
              </p>
              <p class="record-reason">{{ leave.reason }}</p>
            </div>
            <div class="record-footer">
              <span class="record-time">{{ leave.createdAt | date:'yyyy-MM-dd HH:mm' }}</span>
            </div>
          </div>
        }
      </div>
    </div>
  }
</div>