yss-project/DASHBOARD-IMPLEMENTATION-CHECKLIST.md

组长端看板重构 - 实施清单

✅ 已完成

• [x] 创建 7 个子组件

  • DashboardMetricsComponent（统计指标卡片）
  • DashboardFilterBarComponent（筛选条件栏）
  • ProjectKanbanComponent（项目看板）
  • TodoSectionComponent（待办任务板块）
  • WorkloadGanttComponent（工作负载甘特图）
  • SmartMatchModalComponent（智能推荐弹窗）
  • DashboardAlertsComponent（预警提醒）

• [x] 简化 dashboard.ts 主组件

  • 删除迁移到子组件的方法（~700行代码）
  • 删除不再需要的属性和 ViewChild 引用
  • 简化 ngOnInit 和 ngOnDestroy
  • 优化事件处理方法

📋 待完成

1. 更新 dashboard.html 模板 ⚠️ 必需

需要将原有的 HTML 替换为使用新的子组件：

<!-- 替换统计指标部分 -->
<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>

<!-- 替换筛选条件栏 -->
<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)="onFilterChange($event)"
  (viewProject)="viewProjectDetails($event)">
</app-dashboard-filter-bar>

<!-- 替换项目看板 -->
<app-project-kanban
  *ngIf="!showGanttView"
  [corePhases]="corePhases"
  [projects]="filteredProjects"
  (viewProject)="viewProjectDetailsByPhase($event.projectId, $event.phaseId)"
  (openSmartMatch)="openSmartMatch($event)"
  (assignProject)="quickAssignProject($event)"
  (reviewProject)="reviewProjectQuality($event)">
</app-project-kanban>

<!-- 替换待办任务板块 -->
<app-todo-section
  [todoTasksFromIssues]="todoTasksFromIssues"
  [loadingTodoTasks]="loadingTodoTasks"
  [todoTaskError]="todoTaskError"
  [urgentEvents]="urgentEvents"
  [loadingUrgentEvents]="loadingUrgentEvents"
  (refresh)="refreshTodoTasks()"
  (navigateToIssue)="navigateToIssue($event)"
  (markAsRead)="markAsRead($event)"
  (projectClick)="viewProjectDetails($event)"
  (confirmEventOnTime)="confirmEventOnTime($event)"
  (markEventAsStagnant)="markEventAsStagnant($event)"
  (resolveUrgentEvent)="resolveUrgentEvent($event)"
  (createTodoFromEvent)="createTodoFromEvent($event)">
</app-todo-section>

<!-- 替换工作负载甘特图 -->
<app-workload-gantt
  *ngIf="showGanttView"
  [designerWorkloadMap]="designerWorkloadMap"
  [realDesigners]="realDesigners"
  [filteredProjects]="filteredProjects"
  (employeeClick)="onEmployeeClick($event)">
</app-workload-gantt>

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

<!-- 替换预警提醒 -->
<app-dashboard-alerts
  [showAlert]="showAlert"
  [overdueProjects]="overdueProjects"
  [urgentPinnedProjects]="urgentPinnedProjects"
  (viewAllOverdue)="viewAllOverdueProjects()"
  (closeAlert)="closeAlert()"
  (filterStatus)="filterByStatus($event)">
</app-dashboard-alerts>

2. 测试验证 ⚠️ 必需

功能测试

• 统计指标卡片显示正确
• 点击指标卡片能正确筛选
• 筛选条件栏所有筛选功能正常
• 搜索建议正常显示
• 项目看板正确展示四大阶段
• 项目卡片信息完整
• 待办任务正确加载
• 紧急事件标签筛选正常
• 工作负载甘特图正常渲染
• 点击甘特图显示设计师详情
• 智能推荐弹窗正常工作
• 预警提醒正常显示

性能测试

• 页面加载速度
• 筛选响应速度
• 甘特图渲染性能
• 大数据量下的表现

3. 样式调整 （可选）

如果子组件的样式需要调整：

• 检查各子组件的 SCSS 文件
• 确保样式与原设计一致
• 检查响应式布局

4. 优化改进 （可选）

• 添加加载动画
• 优化错误提示
• 添加空状态提示
• 实现数据缓存
• 添加更多交互反馈

🚨 重要提示

1. 模板更新是必需的：子组件已创建但没有在模板中使用，会导致功能不可用
2. 保持向后兼容：确保所有现有功能仍然正常工作
3. 逐步测试：建议一个组件一个组件地替换和测试
4. 备份原代码：在大规模修改前确保有备份

📝 替换顺序建议

建议按以下顺序替换和测试，降低风险：

1. DashboardMetricsComponent - 最简单，影响最小
2. DashboardAlertsComponent - 独立功能，易于测试
3. SmartMatchModalComponent - 弹窗组件，不影响主界面
4. DashboardFilterBarComponent - 核心筛选功能，需仔细测试
5. ProjectKanbanComponent - 主要展示组件，需全面测试
6. TodoSectionComponent - 复杂组件，包含多种交互
7. WorkloadGanttComponent - 最复杂，涉及 ECharts 渲染

🔗 相关文档

• 重构总结
• 组件使用示例

---

状态: 🟡 等待模板更新 优先级: 🔴 高 预计工作量: 2-4小时