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

## ✅ 已完成

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

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

## 📋 待完成

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

需要将原有的 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 渲染

## 🔗 相关文档

- [重构总结](./DASHBOARD-REFACTOR-SUMMARY.md)
- [组件使用示例](./DASHBOARD-REFACTOR-SUMMARY.md#使用示例)

---

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