YG_FT/docs/superpowers/plans/2026-07-10-dataset-task-mock-data.md

# 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 数据"
```