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