v2.0.0-preview.1 - TaskList重构 - TaskRow组件拆分重构
This commit is contained in:
LINING-PC\lining
343
docs/TaskRow-重构测试清单-20241216.md
Normal file
343
docs/TaskRow-重构测试清单-20241216.md
Normal file
@@ -0,0 +1,343 @@
|
||||
# TaskRow 重构测试清单
|
||||
|
||||
**重构日期**: 2024-12-16
|
||||
**版本**: v1.6.1
|
||||
**重构范围**: Composables 合并优化 + 组件目录重组
|
||||
|
||||
---
|
||||
|
||||
## 📋 重构概述
|
||||
|
||||
### 变更内容
|
||||
1. **Composables 合并** (9个 → 5个)
|
||||
- `useTaskRowDragInteraction.ts` → `useTaskRowEventHandlers.ts`
|
||||
- `useTaskRowTimer.ts` → `useTaskRowContextMenu.ts`
|
||||
- `useTaskRowProgress.ts` + `useTaskRowStyles.ts` → `useTaskRowState.ts`
|
||||
|
||||
2. **组件目录重组**
|
||||
- 新建 `src/components/TaskList/taskRow/` 目录
|
||||
- 移动 5 个 TaskRow 相关组件到新目录
|
||||
|
||||
3. **引用路径更新**
|
||||
- 所有导入导出路径已更新
|
||||
- 样式导入路径已修正
|
||||
|
||||
---
|
||||
|
||||
## ✅ 基础功能测试
|
||||
|
||||
### 1. 构建与编译
|
||||
- [ ] `npm run build` 成功执行无错误
|
||||
- [ ] TypeScript 类型检查通过
|
||||
- [ ] Vite 构建输出正常
|
||||
- [ ] CSS 文件大小未异常增长 (预期: ~153KB)
|
||||
- [ ] JS 文件大小正常 (预期: ~3577KB)
|
||||
|
||||
### 2. 开发环境启动
|
||||
- [ ] `npm run dev` 成功启动
|
||||
- [ ] 浏览器无控制台错误
|
||||
- [ ] 热更新正常工作
|
||||
- [ ] 样式正确加载
|
||||
|
||||
---
|
||||
|
||||
## 🎯 TaskRow 核心功能测试
|
||||
|
||||
### 3. 任务行渲染
|
||||
- [ ] 普通任务行正确显示
|
||||
- [ ] 父任务行（story 类型）正确显示
|
||||
- [ ] 叶子任务行正确显示
|
||||
- [ ] 里程碑任务行正确显示
|
||||
- [ ] 里程碑分组行正确显示
|
||||
|
||||
### 4. 折叠/展开功能
|
||||
- [ ] 点击折叠按钮可以折叠子任务
|
||||
- [ ] 点击折叠按钮可以展开子任务
|
||||
- [ ] 折叠按钮图标旋转动画正常
|
||||
- [ ] Story 类型任务可以折叠/展开
|
||||
- [ ] 有子任务的普通任务可以折叠/展开
|
||||
- [ ] 里程碑分组不显示折叠按钮
|
||||
- [ ] 点击任务行（非按钮区域）也可触发折叠/展开
|
||||
|
||||
### 5. 任务图标显示
|
||||
- [ ] 父任务图标正确显示（文件夹图标）
|
||||
- [ ] Story 任务图标正确显示（书本图标）
|
||||
- [ ] 普通任务图标正确显示（复选框图标）
|
||||
- [ ] 里程碑分组图标正确显示（红色菱形，无发光效果）
|
||||
- [ ] `showTaskIcon=false` 时图标隐藏且保持对齐
|
||||
|
||||
### 6. 悬停效果 (Hover)
|
||||
- [ ] 鼠标悬停在任务行上时背景色变化
|
||||
- [ ] 悬停时行放大效果 (scale 1.02)
|
||||
- [ ] 悬停时阴影效果正常
|
||||
- [ ] 悬停时 z-index 提升（浮起效果）
|
||||
- [ ] 父任务悬停效果增强
|
||||
- [ ] 里程碑分组悬停时边框加粗
|
||||
- [ ] 任务类型左边框在悬停时正确加粗
|
||||
- [ ] **里程碑图标无红色发光效果（已修复）**
|
||||
|
||||
### 7. 拖拽功能
|
||||
- [ ] `enableDrag=true` 时可以拖拽任务行
|
||||
- [ ] 拖拽时鼠标指针变为 move
|
||||
- [ ] 拖拽时源任务行透明度降低
|
||||
- [ ] 拖拽目标位置高亮显示
|
||||
- [ ] 拖拽到其他任务后方显示蓝色下边框
|
||||
- [ ] 拖拽到任务内部（作为子任务）显示蓝色边框
|
||||
- [ ] 点击按钮、输入框等交互元素不触发拖拽
|
||||
- [ ] Splitter 拖拽时不触发行悬停效果
|
||||
|
||||
---
|
||||
|
||||
## 📊 数据显示测试
|
||||
|
||||
### 8. 列数据渲染
|
||||
- [ ] 任务名称列正确显示
|
||||
- [ ] 前置任务列格式化显示 (FS+2, SS-1 等)
|
||||
- [ ] 负责人列显示头像和姓名
|
||||
- [ ] 开始日期列正确显示
|
||||
- [ ] 结束日期列正确显示
|
||||
- [ ] 预估工时列正确显示
|
||||
- [ ] 实际工时列正确显示
|
||||
- [ ] 进度列显示百分比
|
||||
|
||||
### 9. 进度状态样式
|
||||
- [ ] 进度 0% 无特殊样式
|
||||
- [ ] 进度 1-99% 显示警告色 (warning)
|
||||
- [ ] 进度 100% 显示成功色 (success)
|
||||
- [ ] 超期且未完成显示危险色 (danger)
|
||||
|
||||
### 10. 计时器功能
|
||||
- [ ] 计时器正在运行时显示当前时长
|
||||
- [ ] 计时器格式为 HH:MM:SS
|
||||
- [ ] 停止计时后显示累计时长
|
||||
- [ ] 计时器每秒更新
|
||||
- [ ] 多个任务同时计时互不干扰
|
||||
|
||||
### 11. 徽章显示
|
||||
- [ ] 超时徽章正确显示（实际工时 > 预估工时）
|
||||
- [ ] 逾期徽章正确显示（当前日期 > 结束日期且未完成）
|
||||
- [ ] 逾期天数计算正确
|
||||
- [ ] 徽章文案国际化正确
|
||||
|
||||
---
|
||||
|
||||
## 🎨 样式与主题测试
|
||||
|
||||
### 12. 明亮模式样式
|
||||
- [ ] 任务行背景色正确
|
||||
- [ ] 父任务背景色正确
|
||||
- [ ] 里程碑分组渐变背景正确
|
||||
- [ ] 边框颜色正确
|
||||
- [ ] 文字颜色正确
|
||||
- [ ] 悬停效果颜色正确
|
||||
|
||||
### 13. 暗黑模式样式
|
||||
- [ ] 切换到暗黑模式后样式正确
|
||||
- [ ] 任务行背景色适配暗黑模式
|
||||
- [ ] 边框颜色适配暗黑模式
|
||||
- [ ] 文字颜色适配暗黑模式
|
||||
- [ ] 里程碑图标颜色适配 (#f67c7c)
|
||||
- [ ] 悬停阴影效果适配暗黑模式
|
||||
|
||||
### 14. 任务类型边框
|
||||
- [ ] Story 类型左边框为蓝色 (#409eff)
|
||||
- [ ] Task 类型左边框为橙色 (#e6a23c)
|
||||
- [ ] Milestone 类型左边框为红色 (#f56c6c)
|
||||
- [ ] 里程碑分组左边框为红色且宽度 3px
|
||||
- [ ] 悬停时边框加粗至 4-5px
|
||||
|
||||
---
|
||||
|
||||
## 🔧 交互功能测试
|
||||
|
||||
### 15. 双击事件
|
||||
- [ ] 双击任务行触发 `dblclick` 事件
|
||||
- [ ] 双击事件参数正确传递任务对象
|
||||
- [ ] 双击不会同时触发单击事件
|
||||
|
||||
### 16. 右键菜单
|
||||
- [ ] 右键点击任务行显示上下文菜单
|
||||
- [ ] 菜单位置跟随鼠标
|
||||
- [ ] 菜单选项正确显示（开始计时、停止计时等）
|
||||
- [ ] 点击菜单外部关闭菜单
|
||||
- [ ] 里程碑类型不显示右键菜单
|
||||
- [ ] 菜单操作触发正确的事件
|
||||
|
||||
### 17. 自定义行样式
|
||||
- [ ] `taskListRowClassName` 字符串模式正确应用
|
||||
- [ ] `taskListRowClassName` 函数模式正确计算
|
||||
- [ ] `taskListRowStyle` 对象模式正确应用
|
||||
- [ ] `taskListRowStyle` 函数模式正确计算
|
||||
- [ ] 自定义样式优先级高于默认样式
|
||||
|
||||
---
|
||||
|
||||
## 🔌 插槽与扩展测试
|
||||
|
||||
### 18. 自定义内容插槽
|
||||
- [ ] `#custom-task-content` 插槽正确渲染
|
||||
- [ ] 插槽接收的 props 数据完整
|
||||
- [ ] 插槽内容替换默认任务名称显示
|
||||
|
||||
### 19. 列级自定义插槽
|
||||
- [ ] `#column-{key}` 插槽正确渲染
|
||||
- [ ] 列插槽接收正确的 task、column、value 参数
|
||||
- [ ] 列插槽优先级高于 formatter 函数
|
||||
- [ ] 多个自定义列插槽可以共存
|
||||
|
||||
### 20. Formatter 函数
|
||||
- [ ] 列的 `formatter` 函数正确调用
|
||||
- [ ] Formatter 接收正确的 task 和 column 参数
|
||||
- [ ] Formatter 返回值正确显示
|
||||
- [ ] Formatter 优先级低于插槽，高于默认渲染
|
||||
|
||||
---
|
||||
|
||||
## 📱 声明式渲染模式测试
|
||||
|
||||
### 21. 声明式列配置
|
||||
- [ ] `renderMode="declarative"` 正确切换渲染模式
|
||||
- [ ] 声明式列配置正确解析
|
||||
- [ ] 第一列保留折叠按钮和图标
|
||||
- [ ] 列对齐方式正确应用 (left/center/right)
|
||||
- [ ] 列宽度样式正确应用
|
||||
- [ ] 自定义 cssClass 正确应用
|
||||
|
||||
---
|
||||
|
||||
## 🧪 边界条件测试
|
||||
|
||||
### 22. 空数据与异常
|
||||
- [ ] 任务数据为空时不报错
|
||||
- [ ] 缺少必需字段时有默认值或占位符
|
||||
- [ ] 子任务数组为空时正确处理
|
||||
- [ ] 日期格式异常时不崩溃
|
||||
- [ ] 进度值超出 0-100 范围时正确处理
|
||||
|
||||
### 23. 大数据量测试
|
||||
- [ ] 100+ 任务渲染性能正常
|
||||
- [ ] 虚拟滚动正常工作
|
||||
- [ ] 展开/折叠大量子任务不卡顿
|
||||
- [ ] 拖拽大列表时性能正常
|
||||
|
||||
### 24. 多语言测试
|
||||
- [ ] 中文界面文案正确
|
||||
- [ ] 英文界面文案正确
|
||||
- [ ] 切换语言后徽章文案更新
|
||||
- [ ] 日期格式跟随语言设置
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Composables 单元测试
|
||||
|
||||
### 25. useTaskRowState
|
||||
- [ ] 任务缩进计算正确 (baseIndent + level * 20)
|
||||
- [ ] hasChildren 判断正确
|
||||
- [ ] 任务类型判断正确 (isStoryTask, isMilestoneGroup 等)
|
||||
- [ ] 进度样式类计算正确
|
||||
- [ ] 超时判断逻辑正确 (actualHours > estimatedHours)
|
||||
- [ ] 逾期天数计算正确（仅计算日期部分）
|
||||
- [ ] 自定义行样式计算正确
|
||||
|
||||
### 26. useTaskRowEventHandlers
|
||||
- [ ] 折叠/展开事件正确触发
|
||||
- [ ] 点击行事件正确触发
|
||||
- [ ] 双击事件正确触发且阻止冒泡
|
||||
- [ ] 悬停进入/离开事件正确触发
|
||||
- [ ] Splitter 拖拽时悬停事件被禁用
|
||||
- [ ] 拖拽鼠标按下事件正确处理
|
||||
- [ ] 拖拽悬停事件正确监听
|
||||
|
||||
### 27. useTaskRowContextMenu
|
||||
- [ ] 右键菜单显示/隐藏状态正确
|
||||
- [ ] 菜单位置计算正确
|
||||
- [ ] 删除任务事件正确触发
|
||||
- [ ] 计时器初始值正确
|
||||
- [ ] 计时器格式化正确 (HH:MM:SS)
|
||||
- [ ] 计时器更新逻辑正确
|
||||
- [ ] 组件卸载时定时器正确清理
|
||||
|
||||
---
|
||||
|
||||
## 🎭 回归测试
|
||||
|
||||
### 28. 与其他组件集成
|
||||
- [ ] TaskList 正确使用 TaskRow
|
||||
- [ ] GanttChart 中 TaskList 正常工作
|
||||
- [ ] Timeline 与 TaskList 联动正常
|
||||
- [ ] 任务行与甘特条联动高亮正常
|
||||
|
||||
### 29. Demo 验证
|
||||
- [ ] Demo 页面正常加载
|
||||
- [ ] 所有 Demo 示例正常工作
|
||||
- [ ] 自定义列 Demo 正常
|
||||
- [ ] 声明式渲染 Demo 正常
|
||||
- [ ] 大数据量 Demo 正常 (data-large-1m.json)
|
||||
|
||||
---
|
||||
|
||||
## 📝 代码质量检查
|
||||
|
||||
### 30. 代码规范
|
||||
- [ ] ESLint 无错误
|
||||
- [ ] TypeScript 严格模式通过
|
||||
- [ ] 无 `any` 类型滥用
|
||||
- [ ] 注释完整且准确
|
||||
|
||||
### 31. 性能优化验证
|
||||
- [ ] `computed` 正确使用，避免重复计算
|
||||
- [ ] `toRef` 仅用于会变化的 props
|
||||
- [ ] 事件监听器正确清理
|
||||
- [ ] Watch 懒加载逻辑正常（计时器）
|
||||
|
||||
---
|
||||
|
||||
## ✅ 测试通过标准
|
||||
|
||||
- [ ] **所有核心功能测试通过** (1-17)
|
||||
- [ ] **所有样式测试通过** (12-14)
|
||||
- [ ] **所有交互测试通过** (15-16)
|
||||
- [ ] **声明式渲染测试通过** (21)
|
||||
- [ ] **Composables 逻辑测试通过** (25-27)
|
||||
- [ ] **回归测试通过** (28-29)
|
||||
- [ ] **构建成功无警告**
|
||||
- [ ] **浏览器控制台无错误**
|
||||
|
||||
---
|
||||
|
||||
## 🐛 已知问题记录
|
||||
|
||||
| 问题 | 状态 | 描述 | 解决方案 |
|
||||
|------|------|------|----------|
|
||||
| 里程碑图标红色发光 | ✅ 已修复 | 悬停时出现不必要的红色发光效果 | 移除所有 filter 和 animation 属性 |
|
||||
| - | - | - | - |
|
||||
|
||||
---
|
||||
|
||||
## 📌 测试注意事项
|
||||
|
||||
1. **测试环境**:
|
||||
- Node.js 版本: 建议 v18+
|
||||
- 浏览器: Chrome/Edge/Firefox 最新版
|
||||
- 屏幕分辨率: 1920x1080 及以上
|
||||
|
||||
2. **测试数据**:
|
||||
- 使用 `demo/data.json` 进行常规测试
|
||||
- 使用 `demo/data-large-1m.json` 进行性能测试
|
||||
|
||||
3. **回归测试建议**:
|
||||
- 与 v1.6.0 版本对比功能一致性
|
||||
- 重点测试拖拽、计时器、右键菜单功能
|
||||
|
||||
4. **性能基准**:
|
||||
- 构建时间: < 10s
|
||||
- 页面加载时间: < 2s
|
||||
- 列表滚动帧率: > 30fps
|
||||
|
||||
---
|
||||
|
||||
**测试人**: _______________
|
||||
**测试日期**: _______________
|
||||
**测试版本**: v1.6.1
|
||||
**测试结果**: [ ] 通过 / [ ] 不通过
|
||||
**备注**: _______________
|
||||
Reference in New Issue
Block a user