128 lines
4.5 KiB
Markdown
128 lines
4.5 KiB
Markdown
|
# 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 检查通过
|
|||
|
|
|
|||
|
|
### 用户体验指标
|
|||
|
|
- [ ] 页面切换动画流畅
|
|||
|
|
- [ ] 空数据状态友好提示
|
|||
|
|
- [ ] 错误处理完善
|
|||
|
|
- [ ] 响应式布局适配移动端
|