jordium-gantt-vue3/docs/TaskList-重构测试清单.md

TaskList 组件重构测试清单

重构概述

已成功将 TaskList.vue 从 686 行重构为高度模块化的结构：

• TaskList.vue: 361 行（减少了 325 行，约 47%）
• useTaskListLayout.ts: 91 行（虚拟滚动和布局计算）
• useTaskListColumns.ts: 159 行（列配置逻辑）
• useTaskListResize.ts: 80 行（容器尺寸管理）
• useTaskListEventHandlers.ts: 204 行（事件处理）
• useTaskParentCalculation.ts: 90 行（父任务数据计算）

总代码行数: 985 行（原 686 行）

• 虽然总行数增加了 44%，但代码可维护性和可读性大幅提升
• 每个模块职责单一，逻辑清晰
• 主组件文件减少了 47%，核心逻辑一目了然

新文件结构

src/
├── components/
│   ├── TaskList/
│   │   ├── TaskList.vue (361 行 - 主组件)
│   │   ├── TaskListColumn.vue (声明式列组件)
│   │   ├── index.ts (统一导出)
│   │   └── composables/
│   │       ├── useTaskListLayout.ts (91 行 - 布局计算)
│   │       ├── useTaskListColumns.ts (159 行 - 列配置)
│   │       ├── useTaskListResize.ts (80 行 - 尺寸管理)
│   │       ├── useTaskListEventHandlers.ts (204 行 - 事件处理)
│   │       └── useTaskParentCalculation.ts (90 行 - 父任务计算)

构建验证

• ✅ TypeScript 编译通过
• ✅ Vite 构建成功
• ✅ 开发服务器正常启动 (http://localhost:13000/)

---

需要测试的功能清单

1. 基础渲染功能

• 任务列表正常显示
• 表头正常显示
• 任务层级缩进正确显示
• 任务图标正确显示

2. 虚拟滚动功能

• 垂直滚动流畅，无卡顿
• 滚动时任务正确加载/卸载
• 大数据量（1000+ 任务）性能正常
• Spacer 高度计算正确

3. 列显示功能

• 默认模式：任务列表列正常显示
• 声明式模式：通过 <TaskListColumn> 定义的列正常显示
• 列宽度（百分比/像素）计算正确
• 列宽度调整后正确响应

4. 交互功能

• 任务展开/折叠功能正常
• 任务悬停高亮正常
• 任务双击打开编辑器
• TaskList 和 Timeline 悬停状态同步

5. 拖拽功能

• 任务行拖拽移动功能正常
• 拖拽位置指示器正确显示
• 拖拽后任务层级正确更新
• 拖拽后父任务数据正确更新

6. 数据计算功能

• 父任务进度自动计算正确
• 父任务日期范围自动计算正确
• 任务更新后父任务数据同步更新

7. 滚动同步功能

• TaskList 垂直滚动与 Timeline 同步
• Timeline 垂直滚动与 TaskList 同步
• Splitter 拖拽时列宽不重复计算

8. 事件处理功能

• task-collapse-change 事件正常触发
• start-timer 事件正常触发
• stop-timer 事件正常触发
• add-predecessor 事件正常触发
• add-successor 事件正常触发
• delete 事件正常触发
• task-row-moved 事件正常触发

9. 右键菜单功能

• 任务右键菜单正常显示
• 右键菜单选项功能正常

10. 特殊任务类型

• 里程碑组任务正确显示
• 里程碑图标变更功能正常
• 里程碑双击不打开编辑器（正确）

11. 自定义插槽

• custom-task-content 插槽正常工作
• 列头部自定义插槽正常工作
• 列内容自定义插槽正常工作

12. 响应式功能

• 容器宽度变化时列宽正确更新
• 任务数据变化时视图正确更新
• ResizeObserver 正常工作

---

重点测试场景

场景 1：大数据量性能测试

1. 加载包含 1000+ 任务的数据集
2. 快速滚动任务列表
3. 验证：无卡顿，内存占用正常

场景 2：拖拽重构测试

1. 拖拽任务到不同层级
2. 拖拽任务作为子任务
3. 验证：层级正确，父任务数据更新

场景 3：滚动同步测试

1. 滚动 TaskList
2. 观察 Timeline 同步滚动
3. 反向测试：滚动 Timeline，观察 TaskList
4. 验证：双向同步正常

场景 4：声明式列配置测试

1. 使用 <TaskListColumn> 定义自定义列
2. 使用自定义插槽渲染列内容
3. 验证：列正确显示，插槽内容正确

---

回归测试建议

• 在测试环境运行完整的自动化测试套件（如果有）
• 手动测试主要用户流程
• 检查浏览器控制台是否有新的错误或警告
• 使用 Chrome DevTools Performance 面板验证性能没有退化

---

已知问题/注意事项

• ✅ 所有 TypeScript 错误已修复
• ✅ 所有 ESLint 错误已修复（除了可选 prop 的默认值警告，这是正常的）
• ✅ 导入路径已全部更新

---

下一步优化建议

1. 可以考虑进一步拆分 TaskList.vue 中的事件处理逻辑到单独的 composable
2. 可以将父任务数据计算逻辑提取到 useTaskParentCalculation.ts
3. 可以将滚动同步逻辑提取到 useScrollSync.ts