sionrui/openspec/changes/refactor-task-management/proposal.md

Change: 重构任务管理模块并新增数字人任务列表

Why

当前系统中混剪任务列表位于 MaterialList 模块下，结构不够清晰，且缺少数字人生成任务的列表管理。用户需要一个统一的、组件化的任务管理中心，能够：

1. 统一管理混剪和数字人任务
2. 提供一致的交互体验
3. 实现左右分栏布局，便于切换不同任务类型
4. 提升代码复用性和可维护性

What Changes

前端变更

• 新增 任务管理模块 task-management，包含左右分栏布局
• 新增 数字人任务列表页面 digital-human-task
• 迁移 混剪任务列表从 MaterialList 到 task-management/mix-task
• 重构 通用组件：筛选栏、状态标签、操作按钮等
• 更新 侧边栏导航：在「系统管理」菜单组下新增「任务管理」子菜单
• 移除 原「素材库」菜单组下的「混剪任务」项

后端变更

• 复用 现有 API：MixTaskService、DigitalHumanTaskService
• 无 数据库结构变更

目录结构变更

src/views/
├── task-management/                # [新增] 任务管理中心
│   ├── layout/
│   │   └── TaskLayout.vue         # 左右分栏布局
│   ├── mix-task/
│   │   └── index.vue              # 混剪任务列表（迁移）
│   ├── digital-human-task/
│   │   └── index.vue              # 数字人任务列表（新建）
│   ├── components/                # 通用组件
│   └── composables/               # 复用逻辑

Impact

受影响的 Specs

• mix-task：更新任务列表路径和组件结构
• digital-human-task：新增数字人任务管理规范
• task-management：新增任务中心布局规范

受影响的代码

• 前端路由配置（router/index.js）
• 侧边栏导航组件（SidebarNav.vue）
• 混剪任务列表（MixTaskList.vue → task-management/mix-task/index.vue）
• 数字人功能页面（复用现有 API）

Architecture Decisions

1. 布局设计

采用左右分栏布局：

• 左侧：任务类型导航（240px 固定宽度）
• 右侧：动态内容区域（自适应）
• 使用 Vue Router 的子路由机制实现内容切换

2. 组件复用

通过 Composable 提取通用逻辑：

• useTaskList：列表加载、分页、筛选
• useTaskOperations：任务操作（删除、取消、重试）
• useTaskPolling：状态轮询机制

3. 状态管理

• 使用组合式 API（Composition API）
• 避免全局状态，组件内部管理状态
• 路由切换时清理定时器，防止内存泄漏

4. 导航设计

在系统管理菜单组下新增「任务管理」模块：

• 路径：/system/task-management
• 子路由：
  • /system/task-management/mix-task - 混剪任务
  • /system/task-management/digital-human-task - 数字人任务
• 移除「素材库」下的「混剪任务」菜单项

Dependencies

• 依赖现有 API：MixTaskService、DigitalHumanTaskService
• 依赖现有 UI 组件库：Ant Design Vue
• 依赖现有路由系统：Vue Router 4

Risks

技术风险

• API 兼容性：数字人任务分页 API 参数可能与混剪任务不一致
  • 应对：在 Composable 中分别处理不同 API 的参数格式
• 样式冲突：原有组件样式可能与新布局冲突
  • 应对：使用 scoped CSS，避免全局样式污染
• 性能问题：两个列表同时轮询可能导致性能问题
  • 应对：实现智能轮询，页面隐藏时暂停

业务风险

• 用户迁移：原有混剪任务列表路径变更
  • 应对：保留旧路由一段时间，重定向到新路径
• 功能缺失：数字人任务列表功能可能不完整
  • 应对：参考混剪任务列表实现，确保功能对等

Rollback Plan

如需回滚：

1. 保留 MixTaskList.vue 文件
2. 恢复 router/index.js 中的原路由配置
3. 恢复 SidebarNav.vue 中的原菜单配置
4. 删除新创建的 task-management 目录

Success Metrics

功能指标

• 混剪任务列表功能 100% 保持
• 数字人任务列表功能完整实现
• 左右导航切换流畅（< 100ms）
• 列表加载时间 < 2秒

代码质量指标

• 代码复用率提升 30%（通过 Composable）
• 新增代码覆盖率 > 80%
• 无 TypeScript 类型错误
• ESLint 检查通过

用户体验指标

• 页面切换动画流畅
• 空数据状态友好提示
• 错误处理完善
• 响应式布局适配移动端