4.1 KiB
数据处理任务状态切换移除 Implementation Plan
For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: 移除数据处理任务列表左上角的三个状态切换按钮，并让表格始终展示全部任务。
Architecture: 保持现有 DataTablePage 结构不变，仅删除 DataProcessListView.vue 内部的页签状态、派生筛选数据、标题插槽和专用样式。新增一个轻量源码回归脚本，锁定“无状态切换组件且表格直接使用完整数据源”的行为。
Tech Stack: Vue 3、TypeScript、Element Plus、Node.js assert、Vue SFC parser
Task 1: 增加状态切换移除回归检查
Files:
-
Create:
frontend/scripts/regression-data-process-list.mjs -
Modify:
frontend/package.json -
Test:
frontend/scripts/regression-data-process-list.mjs -
Step 1: 编写失败的回归检查
import assert from 'node:assert/strict'
import { readFile } from 'node:fs/promises'
import { fileURLToPath } from 'node:url'
import path from 'node:path'
import { parse as parseSfc } from '@vue/compiler-sfc'
const scriptDir = path.dirname(fileURLToPath(import.meta.url))
const viewPath = path.resolve(scriptDir, '../src/views/data-process/DataProcessListView.vue')
const source = await readFile(viewPath, 'utf8')
const { descriptor, errors } = parseSfc(source, { filename: viewPath })
assert.equal(errors.length, 0, `数据处理任务列表模板无法解析：${errors[0]}`)
assert.ok(descriptor.template?.content.trim(), '数据处理任务列表缺少可渲染模板')
assert.match(source, /:data="dataList"/, '任务表格必须直接展示完整任务数据')
assert.doesNotMatch(source, /activeTab|filteredDataList/, '不应保留状态切换筛选逻辑')
assert.doesNotMatch(source, /全部任务|处理中|已完成/, '不应保留状态切换按钮文案')
assert.doesNotMatch(source, /capsule-tabs|capsule-tab-item/, '不应保留状态切换专用样式')
console.log('数据处理任务列表状态切换移除回归检查通过')
在 frontend/package.json 的 scripts 中增加：
"test:data-process-list": "node scripts/regression-data-process-list.mjs"
- Step 2: 运行检查并确认先失败
Run: npm run test:data-process-list
Expected: FAIL，错误指出任务表格尚未直接使用 dataList，或仍存在状态切换逻辑。
- Step 3: 提交回归检查
git add frontend/package.json frontend/scripts/regression-data-process-list.mjs
git commit -m "test: 覆盖数据处理任务列表布局"
Task 2: 移除状态切换组件和筛选逻辑
Files:
-
Modify:
frontend/src/views/data-process/DataProcessListView.vue -
Test:
frontend/scripts/regression-data-process-list.mjs -
Step 1: 实现最小改动
将脚本导入改为仅保留 ref：
import { ref } from 'vue'
删除 activeTab 和 filteredDataList，并将表格数据源改为：
<DataTablePage
title=""
:data="dataList"
searchable
:search-fields="['name']"
create-text="新建数据处理任务"
create-to="/data-process/create"
row-key="id"
:page-size="10"
>
同时删除整个 #title 插槽以及 .capsule-tabs、.capsule-tab-item 样式，仅保留操作按钮样式。
- Step 2: 运行目标回归检查
Run: npm run test:data-process-list
Expected: PASS，输出 数据处理任务列表状态切换移除回归检查通过。
- Step 3: 运行前端类型检查
Run: npm run type-check
Expected: PASS，退出码为 0。
- Step 4: 检查差异和格式
Run: git diff --check && git diff -- frontend/src/views/data-process/DataProcessListView.vue frontend/package.json frontend/scripts/regression-data-process-list.mjs
Expected: git diff --check 无输出，差异仅包含状态切换移除及对应测试。
- Step 5: 提交实现
git add frontend/src/views/data-process/DataProcessListView.vue
git commit -m "refactor: 移除数据处理状态切换"