5.8 KiB
5.8 KiB
Tasks: 重构任务管理模块并新增数字人任务列表
Phase 1: 基础架构搭建
-
1.1 创建目录结构
src/views/system/task-management/- 创建
layout/、mix-task/、digital-human-task/、components/、composables/子目录 - 创建
.gitkeep文件保持空目录结构
- 创建
-
1.2 实现核心布局组件
TaskLayout.vue- 实现左右分栏布局（左侧 240px，右侧自适应）
- 添加路由切换动画
- 高亮当前激活的导航项
- 实现响应式适配
-
1.3 配置路由规则
- 在
router/index.js中添加/system/task-management路由 - 配置子路由：
mix-task和digital-human-task - 设置默认重定向到
mix-task
- 在
-
1.4 创建通用 Composable
useTaskList.js：列表加载、分页、筛选逻辑useTaskOperations.js：任务操作（删除、取消、重试）useTaskPolling.js：状态轮询机制
Phase 2: 混剪模块迁移
-
2.1 迁移混剪任务列表
- 复制
views/material/MixTaskList.vue→task-management/mix-task/index.vue - 调整导入路径（使用
@/别名） - 移除顶部标题栏（布局组件处理）
- 适配新布局的样式
- 复制
-
2.2 提取通用组件
- 创建
components/TaskFilterBar.vue - 创建
components/TaskStatusTag.vue - 创建
components/TaskActionButtons.vue - 在混剪列表中应用这些组件
- 创建
-
2.3 测试混剪功能
- 验证列表加载正常
- 验证筛选和搜索功能
- 验证分页功能
- 验证任务操作（预览、下载、取消、删除、重试）
Phase 3: 数字人模块开发
-
3.1 创建数字人任务列表页面
- 创建
task-management/digital-human-task/index.vue - 实现表格列定义（ID、任务名、视频文件、文案、音色、状态、进度、时间、操作）
- 集成 API 调用（
getDigitalHumanTaskPage）
- 创建
-
3.2 实现数字人任务操作
- 预览：显示生成结果视频
- 下载：下载生成的视频文件
- 删除：删除任务（带确认弹窗）
- 取消：取消正在运行的任务
- 重试：重新生成失败的任务
-
3.3 实现状态轮询
- 每 5 秒检查一次运行中的任务状态
- 页面隐藏时暂停轮询
- 组件销毁时清理定时器
-
3.4 调试和测试
- 验证数据显示正确性
- 验证状态同步准确性
- 验证操作流程完整性
Phase 4: 导航和路由整合
-
4.1 更新侧边栏导航
- 修改
components/SidebarNav.vue - 移除「素材库」菜单组中的「混剪任务」
- 在「系统管理」菜单组下新增「任务管理」模块，包含：
- 混剪视频任务（
/system/task-management/mix-task） - 数字人视频任务（
/system/task-management/digital-human-task）
- 混剪视频任务（
- 修改
-
4.2 设置路由重定向（可选）
- 保留旧路由
/material/mix-task一段时间 - 配置重定向到
/system/task-management/mix-task
- 保留旧路由
-
4.3 导航测试
- 验证导航切换正常
- 验证激活状态高亮正确
- 验证页面标题更新
Phase 5: 测试和优化
-
5.1 功能测试
- 测试混剪任务列表所有功能
- 测试数字人任务列表所有功能
- 测试左右导航切换
- 测试筛选和搜索功能
- 测试分页功能
- 测试任务操作功能
-
5.2 兼容性测试
- 测试不同浏览器（Chrome、Firefox、Safari、Edge）
- 测试不同屏幕尺寸（桌面端、平板、手机）
- 测试 Vue DevTools 调试功能
-
5.3 性能优化
- 优化 API 调用频次
- 优化列表渲染性能（虚拟滚动，如需要）
- 优化轮询机制（智能暂停/恢复）
- 检查内存泄漏（定时器、事件监听器）
-
5.4 代码质量检查
- 运行 ESLint 检查
- 运行 TypeScript 类型检查（如果启用）
- 代码覆盖率检查
- 代码审查和重构
Phase 6: 文档和验收
-
6.1 更新文档
- 更新 API 文档（如果需要）
- 更新用户使用文档（如果需要）
- 更新开发文档（如果需要）
-
6.2 验收测试
- 功能验收：所有功能正常运行
- 性能验收：加载时间、响应时间符合要求
- UI 验收：布局、样式、交互符合设计要求
- 兼容性验收：在目标浏览器和设备上正常运行
-
6.3 部署准备
- 准备部署检查清单
- 确认回滚方案
- 确认监控和告警
验收标准
功能验收清单
- 混剪任务列表显示和操作正常
- 数字人任务列表显示和操作正常
- 左右导航切换流畅
- 筛选和搜索功能正常
- 分页功能正常
- 任务操作（预览、下载、取消、删除、重试）正常
- 状态轮询机制正常
- 错误处理完善
- 空数据状态友好提示
性能验收清单
- 列表初始加载时间 < 2秒
- 导航切换响应时间 < 100ms
- 轮询间隔合理（5-10秒）
- 页面切换无卡顿
- 内存占用合理（无内存泄漏）
代码质量验收清单
- ESLint 检查通过
- 无 TypeScript 类型错误（如果启用）
- 代码注释充分
- 代码结构清晰
- 组件职责单一
- 代码复用率高
风险监控
技术风险
- API 兼容性风险：持续监控 API 调用错误
- 样式冲突风险：检查浏览器控制台警告
- 性能风险：监控页面加载时间和内存使用
业务风险
- 用户体验风险：收集用户反馈
- 功能完整性风险：对比需求文档验证
- 回归风险：确保现有功能不受影响
资源估算
时间估算
- Phase 1: 1-2 小时
- Phase 2: 2-3 小时
- Phase 3: 3-4 小时
- Phase 4: 1 小时
- Phase 5: 2-3 小时
- Phase 6: 1 小时
总计：10-14 小时
人力估算
- 前端开发：1 人
- 测试：0.5 人
- 代码审查：0.5 人
总计：2 人