yss-project/src/app/pages/team-leader/dashboard/dashboard.html

<!-- 顶部导航栏 -->
<nav class="top-navbar">
  <div class="navbar-left">
    <h2 class="navbar-title">设计组长工作台</h2>
  </div>
  <div class="navbar-right">
    <div class="date-display">
      {{ currentDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }) }}
    </div>
    <div class="user-profile">
      <img [src]="currentUser.avatar" [alt]="currentUser.name + '头像'" class="user-avatar">
      <span class="user-name">{{ currentUser.name }}</span>
      <span class="user-role">{{ currentUser.roleName }}</span>
    </div>
  </div>
</nav>

<header class="dashboard-header">
  <!-- 核心数据指标卡片（扩展为6个） -->
  <app-dashboard-metrics
    [overdueCount]="overdueProjects.length"
    [dueSoonCount]="dueSoonProjects.length"
    [pendingApprovalCount]="pendingApprovalProjects.length"
    [pendingAssignmentCount]="pendingAssignmentProjects.length"
    [overloadedDesignersCount]="overloadedDesignersCount"
    [averageWorkloadRate]="averageWorkloadRate"
    (filterStatus)="filterByStatus($event)">
  </app-dashboard-metrics>
</header>

<main class="dashboard-main">
  <!-- 项目监控大盘 -->
  <section class="monitoring-section">
    <div class="section-header">
      <h2>项目监控大盘</h2>
      <div class="section-actions">
        @if (selectedStatus !== 'all') {
          <button class="btn-link" (click)="resetStatusFilter()">返回全部项目</button>
        }
      </div>
    </div>

    <!-- 工作量负载概览 -->
    <app-workload-gantt
      [designerWorkloadMap]="designerWorkloadMap"
      [realDesigners]="realDesigners"
      [filteredProjects]="filteredProjects"
      (employeeClick)="onEmployeeClick($event)">
    </app-workload-gantt>
    
    <!-- 视图切换按钮（固定在此位置便于切换） -->
    <div class="view-toggle-bar">
      <button class="btn-toggle-view" (click)="toggleView()">
        <span class="toggle-icon">{{ showGanttView ? '📋' : '📊' }}</span>
        <span class="toggle-text">{{ showGanttView ? '切换到项目看板' : '切换到时间轴视图' }}</span>
      </button>
    </div>
    
    <!-- 项目负载时间轴（切换视图时显示） -->
    @if (showGanttView) {
      <app-project-timeline 
        [projects]="projectTimelineData"
        [companyId]="currentUser.name"
        (projectClick)="onProjectTimelineClick($event)">
      </app-project-timeline>
    }

    @if (!showGanttView) {
      <app-dashboard-filter-bar
        [projects]="projects"
        [designers]="designers"
        [corePhases]="corePhases"
        [(searchTerm)]="searchTerm"
        [(selectedType)]="selectedType"
        [(selectedUrgency)]="selectedUrgency"
        [(selectedStatus)]="selectedStatus"
        [(selectedDesigner)]="selectedDesigner"
        [(selectedMemberType)]="selectedMemberType"
        [(selectedCorePhase)]="selectedCorePhase"
        [(selectedProjectId)]="selectedProjectId"
        [(selectedTimeWindow)]="selectedTimeWindow"
        (filterChange)="applyFilters()"
        (viewProject)="viewProjectDetails($event)">
      </app-dashboard-filter-bar>
      
      <!-- 项目看板组件 -->
      <app-project-kanban
        [corePhases]="corePhases"
        [projects]="filteredProjects"
        (viewProject)="viewProjectDetailsByPhase($event.projectId, $event.phaseId)"
        (openSmartMatch)="openSmartMatch($event)"
        (assignProject)="quickAssignProject($event)"
        (reviewProject)="reviewProjectQuality($event.projectId, $event.rating)">
      </app-project-kanban>
    }
  </section>

  <!-- 待办任务双栏布局（待办问题 + 紧急事件） -->
  <app-todo-section
    [todoTasksFromIssues]="todoTasksFromIssues"
    [loadingTodoTasks]="loadingTodoTasks"
    [todoTaskError]="todoTaskError"
    [urgentEvents]="urgentEvents"
    [loadingUrgentEvents]="loadingUrgentEvents"
    (refresh)="refreshTodoTasks()"
    (navigateToIssue)="navigateToIssue($event)"
    (markAsRead)="markAsRead($event)"
    (projectClick)="onProjectClick($event)"
    (confirmEventOnTime)="confirmEventOnTime($event)"
    (markEventAsStagnant)="markEventAsStagnant($event)"
    (resolveUrgentEvent)="resolveUrgentEvent($event)"
    (createTodoFromEvent)="createTodoFromEvent($event)">
  </app-todo-section>

  <!-- 超期/紧急项目提醒组件 -->
  <app-dashboard-alerts
    [showAlert]="showAlert"
    [overdueProjects]="overdueProjects"
    [urgentPinnedProjects]="urgentPinnedProjects"
    (viewAllOverdue)="viewAllOverdueProjects()"
    (closeAlert)="closeAlert()"
    (filterStatus)="filterByStatus($event)">
  </app-dashboard-alerts>
</main>

<!-- 员工详情面板组件 -->
<app-employee-detail-panel
  [visible]="showEmployeeDetailPanel"
  [employeeName]="selectedEmployeeName"
  [projects]="selectedEmployeeProjects"
  (close)="closeEmployeeDetailPanel()"
  (projectClick)="navigateToProjectFromPanel($event)">
</app-employee-detail-panel>

<!-- 智能推荐弹窗 -->
<app-smart-match-modal
  [visible]="showSmartMatch"
  [selectedProject]="selectedProject"
  [recommendations]="recommendations"
  (close)="closeSmartMatch()"
  (assign)="assignToDesigner($event)">
</app-smart-match-modal>