feat: 前端优化

2025-12-21 22:24:16 +08:00
parent d3a8ea1964
commit b80de78d7c
36 changed files with 3721 additions and 1205 deletions
--- a/openspec/changes/refactor-task-management/proposal.md
+++ b/openspec/changes/refactor-task-management/proposal.md
@@ -0,0 +1,127 @@
+# 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 检查通过
+
+### 用户体验指标
+- [ ] 页面切换动画流畅
+- [ ] 空数据状态友好提示
+- [ ] 错误处理完善
+- [ ] 响应式布局适配移动端
--- a/openspec/changes/refactor-task-management/specs/digital-human-task/spec.md
+++ b/openspec/changes/refactor-task-management/specs/digital-human-task/spec.md
@@ -0,0 +1,344 @@
+## ADDED Requirements
+
+### Requirement: 数字人任务列表显示
+
+数字人任务管理系统 SHALL 提供任务列表页面，用于查看和管理所有数字人生成任务。
+
+页面规范：
+- 路径：`/system/task-management/digital-human-task`
+- 布局：使用任务中心的左右分栏布局
+- 功能：显示、筛选、搜索、操作数字人任务
+
+#### Scenario: 显示数字人任务列表
+- **WHEN** 用户访问 `/system/task-management/digital-human-task`
+- **THEN** 显示数字人任务列表页面
+- **AND** 左侧导航中「数字人视频任务」项高亮
+- **AND** 右侧显示任务列表表格
+
+### Requirement: 任务列表表格列定义
+
+数字人任务列表 SHALL 显示以下列信息：
+
+列定义：
+- ID：任务唯一标识
+- 任务名称：用户设定的任务名称
+- 视频文件：原始视频文件信息
+- 文案内容：输入的文本内容（支持截断显示）
+- 音色：使用的音色配置
+- 状态：任务当前状态（pending/running/success/failed）
+- 进度：任务完成百分比（0-100）
+- 创建时间：任务创建的时间
+- 操作：可执行的操作按钮
+
+#### Scenario: 显示任务列表数据
+- **WHEN** 任务列表加载完成
+- **THEN** 表格显示所有任务的基本信息
+- **AND** 文案内容列使用 ellipsis 截断过长文本
+- **AND** 状态列使用彩色标签显示
+- **AND** 进度列显示进度条和百分比
+
+### Requirement: 任务状态管理
+
+数字人任务 SHALL 支持以下状态：
+
+状态定义：
+- `pending`：等待处理
+- `running`：处理中
+- `success`：已完成
+- `failed`：失败
+- `canceled`：已取消
+
+#### Scenario: 显示任务状态
+- **WHEN** 渲染任务列表中的状态列
+- **THEN** 根据任务状态显示对应颜色的标签
+- **AND** 状态标签文本为中文描述
+- **AND** 状态颜色映射：
+  - pending：灰色
+  - running：蓝色（带动画效果）
+  - success：绿色
+  - failed：红色
+  - canceled：橙色
+
+### Requirement: 任务操作功能
+
+数字人任务列表 SHALL 支持以下操作：
+
+操作定义：
+- 预览：查看生成结果视频
+- 下载：下载生成的视频文件
+- 删除：删除任务记录
+- 取消：取消正在运行的任务
+- 重试：重新执行失败的任务
+
+#### Scenario: 显示操作按钮
+- **WHEN** 渲染任务列表中的操作列
+- **THEN** 根据状态显示对应的任务操作按钮
+- **AND** 按钮显示规则：
+  - 所有任务：预览、删除
+  - pending/running 任务：取消
+  - success 任务：下载
+  - failed 任务：重试
+
+#### Scenario: 执行预览操作
+- **WHEN** 用户点击「预览」按钮
+- **THEN** 弹出视频预览窗口
+- **AND** 窗口显示生成的结果视频
+- **AND** 提供关闭按钮
+
+#### Scenario: 执行下载操作
+- **WHEN** 用户点击「下载」按钮
+- **THEN** 开始下载生成的视频文件
+- **AND** 文件名为「数字人视频_{任务ID}_{时间戳}.mp4」
+
+#### Scenario: 执行删除操作
+- **WHEN** 用户点击「删除」按钮
+- **THEN** 弹出确认对话框
+- **AND** 用户确认后删除任务
+- **AND** 删除后刷新列表
+
+#### Scenario: 执行取消操作
+- **WHEN** 用户点击「取消」按钮
+- **THEN** 调用取消 API
+- **AND** 任务状态变更为 canceled
+- **AND** 停止状态轮询
+
+#### Scenario: 执行重试操作
+- **WHEN** 用户点击「重试」按钮
+- **THEN** 调用重试 API
+- **AND** 任务状态变更为 pending
+- **AND** 重新开始状态轮询
+
+### Requirement: 筛选和搜索功能
+
+数字人任务列表 SHALL 支持以下筛选条件：
+
+筛选条件：
+- 任务状态：下拉选择（全部/待处理/处理中/已完成/失败）
+- 任务名称：文本搜索（支持模糊匹配）
+- 创建时间：日期范围选择
+
+#### Scenario: 按状态筛选
+- **WHEN** 用户选择任务状态下拉框
+- **THEN** 列表自动刷新，只显示对应状态的任务
+- **AND** 选择「全部状态」时显示所有任务
+
+#### Scenario: 按名称搜索
+- **WHEN** 用户在搜索框输入关键词
+- **AND** 按下回车键或点击搜索按钮
+- **THEN** 列表自动刷新，只显示名称包含关键词的任务
+- **AND** 搜索支持模糊匹配
+
+#### Scenario: 按时间范围筛选
+- **WHEN** 用户选择日期范围
+- **THEN** 列表自动刷新，只显示创建时间在范围内的任务
+- **AND** 日期格式为「YYYY-MM-DD」
+
+### Requirement: 分页功能
+
+数字人任务列表 SHALL 支持分页显示。
+
+分页规范：
+- 每页条数：支持 10/20/50/100 条选项
+- 页码跳转：支持输入页码直接跳转
+- 显示信息：显示「共 X 条记录，第 Y/Z 页」
+
+#### Scenario: 分页导航
+- **WHEN** 任务数量超过每页显示条数
+- **THEN** 表格底部显示分页组件
+- **AND** 用户可以切换页码
+- **AND** 用户可以切换每页条数
+
+### Requirement: 自动状态轮询
+
+数字人任务列表 SHALL 自动轮询正在运行的任务状态。
+
+轮询规范：
+- 轮询间隔：5 秒
+- 轮询范围：只轮询 status 为 pending 或 running 的任务
+- 页面隐藏：暂停轮询
+- 组件销毁：停止轮询
+
+#### Scenario: 自动轮询任务状态
+- **WHEN** 页面显示且有待处理/处理中的任务
+- **THEN** 每 5 秒发起一次 API 请求
+- **AND** 获取任务最新状态
+- **AND** 更新页面显示
+
+#### Scenario: 页面隐藏时暂停轮询
+- **WHEN** 用户切换到其他页面或最小化浏览器
+- **THEN** 暂停状态轮询
+- **AND** 页面重新可见时恢复轮询
+
+#### Scenario: 任务完成时停止轮询
+- **WHEN** 轮询发现任务状态变为 success/failed/canceled
+- **THEN** 从轮询列表中移除该任务
+- **AND** 当所有任务都完成时，停止轮询
+
+### Requirement: API 集成
+
+数字人任务列表 SHALL 集成以下 API：
+
+API 端点：
+- `getDigitalHumanTaskPage`：分页获取任务列表
+- `getDigitalHumanTask`：获取任务详情
+- `cancelTask`：取消任务
+- `retryTask`：重试任务
+- `deleteTask`：删除任务
+
+#### Scenario: 加载任务列表
+- **WHEN** 页面初始加载或筛选条件变化
+- **THEN** 调用 `getDigitalHumanTaskPage(params)`
+- **AND** 解析返回数据并更新表格显示
+
+#### Scenario: 获取任务详情
+- **WHEN** 用户点击预览按钮
+- **THEN** 调用 `getDigitalHumanTask(taskId)`
+- **AND** 根据返回数据显示预览内容
+
+#### Scenario: 取消任务
+- **WHEN** 用户点击取消按钮
+- **THEN** 调用 `cancelTask(taskId)`
+- **AND** 更新任务状态为 canceled
+- **AND** 停止该任务的轮询
+
+#### Scenario: 重试任务
+- **WHEN** 用户点击重试按钮
+- **THEN** 调用 `retryTask(taskId)`
+- **AND** 更新任务状态为 pending
+- **AND** 重新开始轮询
+
+#### Scenario: 删除任务
+- **WHEN** 用户确认删除任务
+- **THEN** 调用 `deleteTask(taskId)`
+- **AND** 从列表中移除该任务
+- **AND** 停止该任务的轮询
+
+### Requirement: 数据模型映射
+
+数字人任务列表 SHALL 使用以下数据模型：
+
+数据模型（基于 `TikDigitalHumanTaskDO`）：
+```typescript
+interface DigitalHumanTask {
+  id: number                    // 任务ID
+  taskName: string             // 任务名称
+  videoFileId: number          // 视频文件ID
+  videoUrl: string             // 视频文件URL
+  inputText: string            // 输入文本
+  voiceId: string              // 音色ID
+  speechRate: number           // 语速
+  emotion?: string             // 情感（可选）
+  instruction?: string         // 指令（可选）
+  status: string               // 任务状态
+  progress: number             // 进度百分比
+  currentStep?: string         // 当前步骤（可选）
+  resultVideoUrl?: string      // 结果视频URL（可选）
+  errorMessage?: string        // 错误信息（可选）
+  createTime: string           // 创建时间
+  finishTime?: string          // 完成时间（可选）
+}
+```
+
+#### Scenario: 映射 API 数据
+- **WHEN** API 返回任务数据
+- **THEN** 将数据映射为本地数据模型
+- **AND** 处理可选字段的空值情况
+- **AND** 格式化时间字段
+
+### Requirement: 错误处理
+
+数字人任务列表 SHALL 提供完善的错误处理机制。
+
+错误处理规范：
+- API 调用失败：显示错误提示和重试按钮
+- 网络异常：显示网络异常提示
+- 操作失败：显示具体错误信息
+- 空数据状态：显示「暂无数据」提示
+
+#### Scenario: API 调用失败
+- **WHEN** 获取任务列表时 API 返回错误
+- **THEN** 显示错误提示信息
+- **AND** 提供「重试」按钮
+- **AND** 用户点击重试后重新发起请求
+
+#### Scenario: 网络异常
+- **WHEN** 网络连接中断
+- **THEN** 显示网络异常提示
+- **AND** 自动检测网络恢复
+- **AND** 网络恢复后提示用户刷新页面
+
+#### Scenario: 操作失败
+- **WHEN** 执行任务操作时失败
+- **THEN** 显示具体错误信息
+- **AND** 提供重试选项
+- **AND** 不关闭对话框（如果适用）
+
+#### Scenario: 空数据状态
+- **WHEN** 任务列表为空
+- **THEN** 显示「暂无数字人任务」提示
+- **AND** 提供「去创建」按钮（如适用）
+
+### Requirement: 加载状态显示
+
+数字人任务列表 SHALL 显示适当的加载状态。
+
+加载状态规范：
+- 初始加载：显示骨架屏或加载动画
+- 数据刷新：显示表格 loading 状态
+- 操作进行：显示按钮 loading 状态
+
+#### Scenario: 初始加载状态
+- **WHEN** 页面首次加载
+- **THEN** 显示骨架屏或加载动画
+- **AND** 加载完成后显示实际内容
+
+#### Scenario: 数据刷新状态
+- **WHEN** 筛选条件变化或分页切换
+- **THEN** 表格显示 loading 状态
+- **AND** 加载完成后更新表格数据
+
+#### Scenario: 操作进行状态
+- **WHEN** 用户执行操作（取消、重试、删除）
+- **THEN** 对应的按钮显示 loading 状态
+- **AND** 操作完成后恢复正常状态
+
+### Requirement: 响应式适配
+
+数字人任务列表 SHALL 支持响应式设计。
+
+适配规范：
+- 桌面端：显示所有列
+- 平板端：隐藏部分次要列
+- 移动端：使用卡片布局或横向滚动
+
+#### Scenario: 平板端适配
+- **WHEN** 在平板设备上访问任务列表
+- **THEN** 隐藏「视频文件」和「音色」列
+- **AND** 保留核心列：ID、任务名称、状态、进度、操作
+
+#### Scenario: 移动端适配
+- **WHEN** 在手机设备上访问任务列表
+- **THEN** 使用卡片布局显示任务信息
+- **AND** 每个卡片包含任务的核心信息和操作按钮
+- **OR** 表格使用横向滚动显示所有列
+
+### Requirement: 性能优化
+
+数字人任务列表 SHALL 实施性能优化措施。
+
+优化措施：
+- 搜索防抖：搜索输入 300ms 后执行
+- 虚拟滚动：数据量 > 1000 条时启用
+- 内存管理：及时清理定时器和事件监听器
+- 图片懒加载：视频缩略图懒加载
+
+#### Scenario: 搜索防抖
+- **WHEN** 用户在搜索框输入内容
+- **THEN** 等待 300ms 无输入后执行搜索
+- **AND** 避免频繁的 API 调用
+
+#### Scenario: 虚拟滚动
+- **WHEN** 任务列表数据量超过 1000 条
+- **THEN** 启用虚拟滚动功能
+- **AND** 只渲染可见区域的行
+- **AND** 提升大数据量时的渲染性能
--- a/openspec/changes/refactor-task-management/specs/mix-task/spec.md
+++ b/openspec/changes/refactor-task-management/specs/mix-task/spec.md
@@ -0,0 +1,115 @@
+## MODIFIED Requirements
+
+### Requirement: 任务列表页面路径
+
+混剪任务管理系统 SHALL 将混剪任务列表页面路径从 `/material/mix-task` 变更为 `/system/task-management/mix-task`。
+
+#### Scenario: 访问混剪任务列表
+- **WHEN** 用户访问 `/system/task-management/mix-task`
+- **THEN** 显示混剪任务列表页面
+- **AND** 左侧导航中「混剪视频任务」项高亮
+
+### Requirement: 页面布局结构调整
+
+混剪任务列表页面 SHALL 使用任务中心的子页面布局，不再包含独立的顶部标题栏。
+
+#### Scenario: 显示混剪任务列表
+- **WHEN** 用户在任务中心访问混剪任务列表
+- **THEN** 页面不显示独立的标题栏
+- **AND** 页面内容适配任务中心的右侧内容区域
+
+### Requirement: 组件导入路径优化
+
+混剪任务列表页面 SHALL 使用 `@/` 别名路径导入组件和 API。
+
+#### Scenario: 导入通用组件
+- **WHEN** 混剪任务列表需要使用通用组件
+- **THEN** 使用 `@/views/task-management/components/ComponentName.vue` 导入
+- **AND** 不再使用 `../../` 等相对路径
+
+### Requirement: 筛选栏组件化
+
+混剪任务列表 SHALL 将筛选栏抽取为独立组件 `TaskFilterBar.vue`。
+
+#### Scenario: 使用筛选栏组件
+- **WHEN** 渲染混剪任务列表页面
+- **THEN** 使用 `<TaskFilterBar />` 组件显示筛选条件
+- **AND** 组件支持 v-model 双向绑定
+
+### Requirement: 状态标签组件化
+
+混剪任务列表 SHALL 将状态显示抽取为独立组件 `TaskStatusTag.vue`。
+
+#### Scenario: 显示任务状态
+- **WHEN** 渲染任务列表中的状态列
+- **THEN** 使用 `<TaskStatusTag :status="task.status" />` 组件
+- **AND** 组件根据状态值显示不同颜色的标签
+
+### Requirement: 操作按钮组件化
+
+混剪任务列表 SHALL 将操作按钮抽取为独立组件 `TaskActionButtons.vue`。
+
+#### Scenario: 显示任务操作按钮
+- **WHEN** 渲染任务列表中的操作列
+- **THEN** 使用 `<TaskActionButtons :task="task" />` 组件
+- **AND** 组件根据任务状态显示不同的操作按钮
+
+### Requirement: Composable 逻辑复用
+
+混剪任务列表 SHALL 使用 Composable 抽取通用逻辑。
+
+#### Scenario: 使用 useTaskList
+- **WHEN** 混剪任务列表需要加载数据
+- **THEN** 调用 `useTaskList(fetchApi)`
+- **AND** 使用返回的数据和方法渲染页面
+
+### Requirement: API 调用保持不变
+
+混剪任务列表 SHALL 继续使用 `MixTaskService` 调用后端 API。
+
+#### Scenario: 获取混剪任务列表
+- **WHEN** 页面需要加载任务列表
+- **THEN** 调用 `MixTaskService.getTaskPage(params)`
+
+### Requirement: 功能完整性保持
+
+混剪任务列表 SHALL 保持所有现有功能。
+
+#### Scenario: 所有功能正常工作
+- **WHEN** 用户使用混剪任务列表
+- **THEN** 筛选、搜索、分页、操作功能正常
+- **AND** 状态轮询机制正常
+- **AND** 错误处理机制正常
+
+### Requirement: 路由元信息配置
+
+混剪任务列表页面 SHALL 通过路由 meta 信息设置页面标题。
+
+#### Scenario: 设置页面标题
+- **WHEN** 用户访问混剪任务列表页面
+- **THEN** 浏览器标题栏显示「混剪任务」
+
+### Requirement: 性能优化实施
+
+混剪任务列表 SHALL 实施性能优化措施。
+
+#### Scenario: 性能优化实施
+- **WHEN** 任务列表渲染大量数据
+- **THEN** 使用防抖处理搜索输入
+- **AND** 页面隐藏时暂停轮询
+
+### Requirement: 向后兼容支持
+
+混剪任务列表 SHALL 提供向后兼容方案。
+
+#### Scenario: 兼容旧路径
+- **WHEN** 用户访问旧路径 `/material/mix-task`
+- **THEN** 系统重定向到 `/system/task-management/mix-task`
+
+### Requirement: 测试覆盖实施
+
+混剪任务列表 SHALL 实施完整的测试覆盖。
+
+#### Scenario: 编写测试用例
+- **WHEN** 混剪任务列表页面重构完成
+- **THEN** 编写组件渲染测试、API调用测试、用户交互测试
--- a/openspec/changes/refactor-task-management/specs/task-management/spec.md
+++ b/openspec/changes/refactor-task-management/specs/task-management/spec.md
@@ -0,0 +1,179 @@
+## ADDED Requirements
+
+### Requirement: 任务中心布局
+
+任务管理系统 SHALL 提供统一的左右分栏布局，用于管理不同类型的任务。
+
+布局规范：
+- 左侧导航区域：宽度固定为 240px，显示任务类型切换菜单
+- 右侧内容区域：自适应宽度，显示对应的任务列表页面
+- 左侧导航 SHALL 支持以下任务类型：
+  - 混剪视频任务
+  - 数字人视频任务
+
+#### Scenario: 显示任务中心布局
+- **WHEN** 用户访问 `/system/task-management` 路径
+- **THEN** 页面显示左右分栏布局
+- **AND** 左侧显示任务类型导航菜单
+- **AND** 右侧显示默认的任务列表（混剪视频任务）
+
+#### Scenario: 切换任务类型
+- **WHEN** 用户点击左侧导航中的「数字人视频任务」
+- **THEN** 右侧内容区域切换到数字人任务列表页面
+- **AND** 左侧导航中「数字人视频任务」项高亮显示
+
+### Requirement: 路由配置
+
+任务中心 SHALL 使用 Vue Router 的子路由机制，实现不同任务类型页面的切换。
+
+路由规范：
+- 根路径：`/system/task-management`
+- 子路径：
+  - `/system/task-management/mix-task` - 混剪任务列表
+  - `/system/task-management/digital-human-task` - 数字人任务列表
+- 默认重定向：访问 `/system/task-management` 时自动跳转到 `/system/task-management/mix-task`
+
+#### Scenario: 默认路由跳转
+- **WHEN** 用户访问 `/system/task-management`
+- **THEN** 系统自动重定向到 `/system/task-management/mix-task`
+- **AND** 显示混剪任务列表页面
+
+#### Scenario: 直接访问子路径
+- **WHEN** 用户直接访问 `/system/task-management/digital-human-task`
+- **THEN** 显示数字人任务列表页面
+- **AND** 左侧导航中「数字人视频任务」项高亮
+
+### Requirement: 导航高亮
+
+左侧导航 SHALL 高亮显示当前激活的任务类型。
+
+高亮规范：
+- 当前激活的导航项 SHALL 使用主色调背景色（`var(--color-primary)`）
+- 非激活项 SHALL 使用默认背景色
+- 鼠标悬停时 SHALL 显示悬停效果
+
+#### Scenario: 高亮当前任务类型
+- **WHEN** 用户在混剪任务列表页面
+- **THEN** 左侧导航中「混剪视频任务」项高亮显示
+- **AND** 「数字人视频任务」项保持默认状态
+
+### Requirement: 响应式适配
+
+任务中心布局 SHALL 支持响应式设计，在不同屏幕尺寸下正常显示。
+
+适配规范：
+- 桌面端（≥1200px）：左侧 240px，右侧自适应
+- 平板端（768px-1199px）：保持左右分栏，适当缩小左侧宽度
+- 移动端（<768px）：左侧导航可折叠或隐藏，右侧全屏显示
+
+#### Scenario: 平板端显示
+- **WHEN** 用户在平板设备上访问任务中心
+- **THEN** 左侧导航宽度调整为 200px
+- **AND** 右侧内容区域相应调整宽度
+
+#### Scenario: 移动端显示
+- **WHEN** 用户在手机设备上访问任务中心
+- **THEN** 左侧导航默认隐藏
+- **AND** 显示汉堡菜单按钮，点击后弹出导航菜单
+- **OR** 左侧导航固定在底部，作为标签栏显示
+
+### Requirement: 过渡动画
+
+任务类型切换时 SHALL 使用平滑的过渡动画。
+
+动画规范：
+- 使用 Vue Transition 组件实现
+- 动画时长：200-300ms
+- 动画类型：淡入淡出（fade）或滑动（slide）
+
+#### Scenario: 页面切换动画
+- **WHEN** 用户从混剪任务切换到数字人任务
+- **THEN** 右侧内容区域使用平滑过渡动画
+- **AND** 动画时长约 250ms
+- **AND** 动画效果为淡入淡出
+
+### Requirement: 组件化设计
+
+任务中心 SHALL 采用组件化设计，提高代码复用性和可维护性。
+
+组件规范：
+- Layout 组件：`TaskLayout.vue` - 布局容器
+- 通用组件：
+  - `TaskFilterBar.vue` - 筛选栏
+  - `TaskStatusTag.vue` - 状态标签
+  - `TaskActionButtons.vue` - 操作按钮
+- Composable：
+  - `useTaskList.js` - 列表通用逻辑
+  - `useTaskOperations.js` - 操作通用逻辑
+  - `useTaskPolling.js` - 轮询通用逻辑
+
+#### Scenario: 使用通用组件
+- **WHEN** 开发混剪任务列表页面
+- **THEN** 使用 `TaskFilterBar` 组件实现筛选功能
+- **AND** 使用 `TaskStatusTag` 组件显示任务状态
+- **AND** 使用 `TaskActionButtons` 组件实现操作按钮
+- **AND** 使用 `useTaskList` Composable 处理列表逻辑
+
+### Requirement: 状态管理
+
+任务中心 SHALL 使用组合式 API（Composition API）进行状态管理，避免全局状态污染。
+
+状态管理规范：
+- 每个任务列表页面独立管理自己的状态
+- 使用 `ref` 和 `reactive` 管理响应式数据
+- 组件销毁时清理所有副作用（定时器、事件监听器等）
+
+#### Scenario: 独立状态管理
+- **WHEN** 用户在混剪任务列表页面进行操作
+- **THEN** 操作只影响混剪任务列表的状态
+- **AND** 不影响数字人任务列表的状态
+
+#### Scenario: 清理副作用
+- **WHEN** 用户离开任务中心页面
+- **THEN** 所有定时器 SHALL 被清理
+- **AND** 所有事件监听器 SHALL 被移除
+- **AND** 避免内存泄漏
+
+### Requirement: 错误处理
+
+任务中心 SHALL 提供完善的错误处理机制，提升用户体验。
+
+错误处理规范：
+- API 调用失败时显示错误提示
+- 网络异常时显示重试按钮
+- 操作失败时显示具体错误信息
+- 加载状态使用骨架屏或加载动画
+
+#### Scenario: API 调用失败
+- **WHEN** 获取任务列表时 API 返回错误
+- **THEN** 显示错误提示信息
+- **AND** 提供「重试」按钮
+- **AND** 用户点击重试后重新发起请求
+
+#### Scenario: 网络异常
+- **WHEN** 网络连接中断
+- **THEN** 显示网络异常提示
+- **AND** 自动检测网络恢复
+- **AND** 网络恢复后提示用户刷新页面
+
+### Requirement: 无障碍访问
+
+任务中心 SHALL 遵循 Web 无障碍访问标准，支持键盘导航和屏幕阅读器。
+
+无障碍规范：
+- 所有交互元素支持键盘访问（Tab 键导航）
+- 提供适当的 ARIA 标签
+- 颜色对比度符合 WCAG 2.1 AA 标准
+- 焦点状态清晰可见
+
+#### Scenario: 键盘导航
+- **WHEN** 用户使用 Tab 键浏览任务中心页面
+- **THEN** 焦点 SHALL 按逻辑顺序移动
+- **AND** 所有交互元素都可以通过键盘访问
+- **AND** 焦点状态清晰可见
+
+#### Scenario: 屏幕阅读器支持
+- **WHEN** 用户使用屏幕阅读器访问任务中心
+- **THEN** 页面结构 SHALL 被正确朗读
+- **AND** 任务状态 SHALL 有适当的 ARIA 标签
+- **AND** 操作按钮 SHALL 有描述性的文本
--- a/openspec/changes/refactor-task-management/tasks.md
+++ b/openspec/changes/refactor-task-management/tasks.md
@@ -0,0 +1,189 @@
+# 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 人**