190 lines
5.8 KiB
Markdown
190 lines
5.8 KiB
Markdown
|
# 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 人**
|