diff --git a/docs/superpowers/plans/2026-07-10-data-process-status-tabs-removal.md b/docs/superpowers/plans/2026-07-10-data-process-status-tabs-removal.md new file mode 100644 index 0000000..f8fed01 --- /dev/null +++ b/docs/superpowers/plans/2026-07-10-data-process-status-tabs-removal.md @@ -0,0 +1,117 @@ +# 数据处理任务状态切换移除 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: 编写失败的回归检查** + +```js +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` 中增加: + +```json +"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: 提交回归检查** + +```bash +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`: + +```ts +import { ref } from 'vue' +``` + +删除 `activeTab` 和 `filteredDataList`,并将表格数据源改为: + +```vue + +``` + +同时删除整个 `#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: 提交实现** + +```bash +git add frontend/src/views/data-process/DataProcessListView.vue +git commit -m "refactor: 移除数据处理状态切换" +```