# 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 人**