docs: 添加数据任务 mock 实施计划
This commit is contained in:
caoxiaozhu
182
docs/superpowers/plans/2026-07-10-dataset-task-mock-data.md
Normal file
182
docs/superpowers/plans/2026-07-10-dataset-task-mock-data.md
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
# Dataset Task Mock Data 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:** 在数据集管理页的“数据任务”页签展示 4 条任务产出 Mock 数据，并让“本地上传”与“数据任务”按来源稳定分流。
|
||||||
|
|
||||||
|
**Architecture:** 保持 `mockDatasets` 为唯一数据源，在 `DatasetItem` 上增加可选来源字段，并由列表页计算属性按来源过滤。使用一个无新增依赖的 Node 回归脚本锁定类型、Mock 数量、数据名称和页签过滤规则。
|
||||||
|
|
||||||
|
**Tech Stack:** Vue 3、TypeScript 5.7、Element Plus、Node.js 回归脚本、Vite 6
|
||||||
|
|
||||||
|
## Global Constraints
|
||||||
|
|
||||||
|
- `source` 只允许 `upload` 或 `task`，并保持可选以兼容暂未返回该字段的接口数据。
|
||||||
|
- 未携带 `source` 的数据归入“本地上传”。
|
||||||
|
- 现有 6 条 Mock 数据标记为 `upload`，新增 4 条 Mock 数据标记为 `task`。
|
||||||
|
- 不新增依赖，不修改后端接口，不实现真实的数据任务关联。
|
||||||
|
- 搜索、分页、预览、下载和删除按钮保持现有行为。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
- `frontend/scripts/regression-dataset-task-tab.mjs`：静态回归检查，验证来源类型、Mock 数据和页签过滤规则。
|
||||||
|
- `frontend/package.json`：注册 `test:dataset-task-tab` 命令。
|
||||||
|
- `frontend/src/types/index.ts`：定义 `DatasetSource` 并扩展 `DatasetItem`。
|
||||||
|
- `frontend/src/mock/data.ts`：标记 6 条上传数据并新增 4 条任务数据。
|
||||||
|
- `frontend/src/views/dataset/DatasetListView.vue`：按 `source` 过滤两个页签。
|
||||||
|
|
||||||
|
### Task 1: 数据任务 Mock 数据与页签分流
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `frontend/scripts/regression-dataset-task-tab.mjs`
|
||||||
|
- Modify: `frontend/package.json`
|
||||||
|
- Modify: `frontend/src/types/index.ts:58-78`
|
||||||
|
- Modify: `frontend/src/mock/data.ts:100-108`
|
||||||
|
- Modify: `frontend/src/views/dataset/DatasetListView.vue:16-23`
|
||||||
|
|
||||||
|
**Interfaces:**
|
||||||
|
- Consumes: `getDatasetList(): Promise<DatasetItem[]>` 与现有 `DataTablePage` 的 `data` 属性。
|
||||||
|
- Produces: `DatasetSource = 'upload' | 'task'`、`DatasetItem.source?: DatasetSource`，以及按来源过滤后的 `filteredDataList`。
|
||||||
|
|
||||||
|
- [ ] **Step 1: 写入会失败的回归检查并注册命令**
|
||||||
|
|
||||||
|
创建 `frontend/scripts/regression-dataset-task-tab.mjs`：
|
||||||
|
|
||||||
|
```js
|
||||||
|
import assert from 'node:assert/strict'
|
||||||
|
import { readFile } from 'node:fs/promises'
|
||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
|
import path from 'node:path'
|
||||||
|
|
||||||
|
const scriptDir = path.dirname(fileURLToPath(import.meta.url))
|
||||||
|
const typesPath = path.resolve(scriptDir, '../src/types/index.ts')
|
||||||
|
const dataPath = path.resolve(scriptDir, '../src/mock/data.ts')
|
||||||
|
const viewPath = path.resolve(scriptDir, '../src/views/dataset/DatasetListView.vue')
|
||||||
|
|
||||||
|
const [typesSource, dataSource, viewSource] = await Promise.all([
|
||||||
|
readFile(typesPath, 'utf8'),
|
||||||
|
readFile(dataPath, 'utf8'),
|
||||||
|
readFile(viewPath, 'utf8'),
|
||||||
|
])
|
||||||
|
|
||||||
|
assert.match(typesSource, /export type DatasetSource = 'upload' \| 'task'/)
|
||||||
|
assert.match(typesSource, /source\?: DatasetSource/)
|
||||||
|
|
||||||
|
assert.equal((dataSource.match(/source: 'upload'/g) || []).length, 6)
|
||||||
|
assert.equal((dataSource.match(/source: 'task'/g) || []).length, 4)
|
||||||
|
|
||||||
|
for (const name of [
|
||||||
|
'客服对话清洗集',
|
||||||
|
'通用指令构造集',
|
||||||
|
'用户反馈脱敏集',
|
||||||
|
'多轮对话增强集',
|
||||||
|
]) {
|
||||||
|
assert.ok(dataSource.includes(`name: '${name}'`), `缺少数据任务 Mock：${name}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
assert.match(viewSource, /item\.source === 'task'/)
|
||||||
|
assert.match(viewSource, /item\.source !== 'task'/)
|
||||||
|
assert.doesNotMatch(viewSource, /数据任务产生的数据集[\s\S]*?return \[\]/)
|
||||||
|
|
||||||
|
console.log('数据任务 Mock 数据与页签分流回归检查通过')
|
||||||
|
```
|
||||||
|
|
||||||
|
在 `frontend/package.json` 的 `scripts` 中加入：
|
||||||
|
|
||||||
|
```json
|
||||||
|
"test:dataset-task-tab": "node scripts/regression-dataset-task-tab.mjs"
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: 运行回归检查并确认红灯**
|
||||||
|
|
||||||
|
Run: `cd frontend && npm run test:dataset-task-tab`
|
||||||
|
|
||||||
|
Expected: FAIL，首个断言提示缺少 `DatasetSource`。
|
||||||
|
|
||||||
|
- [ ] **Step 3: 增加来源类型**
|
||||||
|
|
||||||
|
在 `frontend/src/types/index.ts` 的数据集类型区加入并使用：
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export type DatasetType = 'train' | 'test' | 'eval' | 'val' | 'other'
|
||||||
|
export type DatasetStorage = 'local' | 'cloud' | 'minio'
|
||||||
|
export type DatasetSource = 'upload' | 'task'
|
||||||
|
|
||||||
|
export interface DatasetItem {
|
||||||
|
id: number | string
|
||||||
|
name: string
|
||||||
|
type: DatasetType | string
|
||||||
|
storage_type: DatasetStorage | string
|
||||||
|
source?: DatasetSource
|
||||||
|
size?: string | number
|
||||||
|
count?: number
|
||||||
|
description?: string
|
||||||
|
create_time?: string
|
||||||
|
files?: DatasetFile[]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 4: 标记现有数据并添加 4 条任务数据**
|
||||||
|
|
||||||
|
将 `frontend/src/mock/data.ts` 的 `mockDatasets` 更新为：
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export const mockDatasets: DatasetItem[] = [
|
||||||
|
{ id: 1, name: '金融问答-训练集', type: 'train', storage_type: 'local', source: 'upload', size: '128 MB', count: 8560, description: '金融领域问答对', create_time: '2025-12-20T08:00:00Z' },
|
||||||
|
{ id: 2, name: '法律文书-训练集', type: 'train', storage_type: 'local', source: 'upload', size: '256 MB', count: 15230, description: '法律文书数据集', create_time: '2025-12-25T10:30:00Z' },
|
||||||
|
{ id: 3, name: '客服对话-训练集', type: 'train', storage_type: 'minio', source: 'upload', size: '512 MB', count: 24500, description: '客服对话记录', create_time: '2026-01-05T14:20:00Z' },
|
||||||
|
{ id: 4, name: '金融评测集', type: 'eval', storage_type: 'local', source: 'upload', size: '32 MB', count: 1200, description: '金融领域评测', create_time: '2026-01-10T09:15:00Z' },
|
||||||
|
{ id: 5, name: '通用能力评测', type: 'eval', storage_type: 'local', source: 'upload', size: '64 MB', count: 3500, description: '通用能力评测数据集', create_time: '2026-01-12T11:30:00Z' },
|
||||||
|
{ id: 6, name: '医疗问答-训练集', type: 'train', storage_type: 'local', source: 'upload', size: '180 MB', count: 9800, description: '医疗问答对', create_time: '2026-02-01T15:00:00Z' },
|
||||||
|
{ id: 7, name: '客服对话清洗集', type: 'train', storage_type: 'minio', source: 'task', size: '96 MB', count: 18240, description: '由客服问答数据清洗任务生成', create_time: '2026-07-08T06:28:00Z' },
|
||||||
|
{ id: 8, name: '通用指令构造集', type: 'train', storage_type: 'local', source: 'task', size: '148 MB', count: 12600, description: '由指令微调数据构造任务生成', create_time: '2026-07-09T01:42:00Z' },
|
||||||
|
{ id: 9, name: '用户反馈脱敏集', type: 'test', storage_type: 'minio', source: 'task', size: '72 MB', count: 9340, description: '由敏感信息脱敏任务生成', create_time: '2026-07-09T09:18:00Z' },
|
||||||
|
{ id: 10, name: '多轮对话增强集', type: 'eval', storage_type: 'local', source: 'task', size: '41 MB', count: 2780, description: '由多轮对话拼接任务生成', create_time: '2026-07-10T02:06:00Z' },
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 5: 实现两个页签的来源过滤**
|
||||||
|
|
||||||
|
将 `frontend/src/views/dataset/DatasetListView.vue` 的 `filteredDataList` 更新为：
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const filteredDataList = computed(() => {
|
||||||
|
if (activeTab.value === 'task') {
|
||||||
|
return dataList.value.filter((item) => item.source === 'task')
|
||||||
|
}
|
||||||
|
|
||||||
|
return dataList.value.filter((item) => item.source !== 'task')
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 6: 运行针对性回归检查并确认绿灯**
|
||||||
|
|
||||||
|
Run: `cd frontend && npm run test:dataset-task-tab`
|
||||||
|
|
||||||
|
Expected: PASS，输出 `数据任务 Mock 数据与页签分流回归检查通过`。
|
||||||
|
|
||||||
|
- [ ] **Step 7: 运行类型检查和生产构建**
|
||||||
|
|
||||||
|
Run: `cd frontend && npm run type-check`
|
||||||
|
|
||||||
|
Expected: PASS；若仓库原有错误仍存在，保存完整输出并确认本任务修改文件不在错误列表中。
|
||||||
|
|
||||||
|
Run: `cd frontend && npx vite build`
|
||||||
|
|
||||||
|
Expected: PASS，并生成 `dist` 产物。
|
||||||
|
|
||||||
|
- [ ] **Step 8: 页面烟雾验证**
|
||||||
|
|
||||||
|
启动开发服务器后打开数据集管理页，验证“本地上传”总数为 6，切换“数据任务”后总数为 4，搜索“脱敏”只显示“用户反馈脱敏集”，且预览、下载、删除按钮可见。
|
||||||
|
|
||||||
|
- [ ] **Step 9: 提交实现**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add frontend/package.json \
|
||||||
|
frontend/scripts/regression-dataset-task-tab.mjs \
|
||||||
|
frontend/src/types/index.ts \
|
||||||
|
frontend/src/mock/data.ts \
|
||||||
|
frontend/src/views/dataset/DatasetListView.vue
|
||||||
|
git commit -m "feat: 添加数据任务 mock 数据"
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user