180 lines
6.3 KiB
Markdown
180 lines
6.3 KiB
Markdown
## 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 有描述性的文本
|