118 lines
4.1 KiB
Markdown
118 lines
4.1 KiB
Markdown
# 数据处理任务状态切换移除 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
|
||
<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: 提交实现**
|
||
|
||
```bash
|
||
git add frontend/src/views/data-process/DataProcessListView.vue
|
||
git commit -m "refactor: 移除数据处理状态切换"
|
||
```
|