sionrui/openspec/changes/refactor-task-management/specs/task-management/spec.md

## 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 有描述性的文本