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

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调用测试、用户交互测试