YG_FT/docs/superpowers/plans/2026-07-10-multi-file-preview-selector.md

多文件预览下拉选择器 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: 为每个预览条目记录来源文件 ID；父页面按当前文件筛选原文与条目。预览组件只负责可搜索下拉选择器和当前文件双栏对照，不拼接不同文件的原文。

Tech Stack: Vue 3、TypeScript、Element Plus、SCSS、Node 回归脚本。

Global Constraints

• 预览主区保持原文与切片的双栏比例，不新增常驻第三栏。
• 下拉选择器必须支持 100 个文件的名称筛选。
• 切换文件不得丢失其他文件已编辑的切片内容。

---

Task 1: 锁定多文件来源映射

Files:

• Modify: frontend/scripts/regression-data-process-wizard.mjs
• Modify: frontend/src/views/data-process/create/types.ts
• Modify: frontend/src/views/data-process/create/previewModel.ts

Interfaces:

• Produces: PreviewItem.sourceFileId: string。

• Produces: buildPreviewItems(sourceText, processType, sourceFileId) 为同一文件生成带文件归属的唯一条目。

• Step 1: 写入失败断言

assert.match(typesSource, /sourceFileId/, 'PreviewItem 缺少来源文件标识')
assert.match(modelSource, /sourceFileId/, '切片生成没有写入来源文件标识')

• Step 2: 运行失败断言

Run: npm run test:data-process-wizard Expected: FAIL，提示缺少 sourceFileId。

• Step 3: 实现文件归属

export interface PreviewItem {
  sourceFileId: string
}

export function buildPreviewItems(sourceText: string, processType: ProcessType, sourceFileId: string) {
  // 每个 item 写入 sourceFileId，并以它构造稳定 ID。
}

• Step 4: 再次运行回归脚本

Run: npm run test:data-process-wizard Expected: 新断言通过；仅保留已知的布局失败（如存在）。

Task 2: 按文件驱动双栏预览

Files:

• Modify: frontend/src/views/data-process/DataProcessCreateView.vue

Interfaces:

• Consumes: PreviewItem.sourceFileId。

• Produces: activePreviewFile、activePreviewItems 与当前文件选择状态。

• Step 1: 为多文件下拉接线添加失败断言

assert.match(viewSource, /selectedPreviewFileId/, '父页面缺少当前预览文件状态')
assert.match(viewSource, /buildPreviewItems\(file\.content, processType\.value, String\(file\.uid\)\)/, '预览没有按文件分别生成')

• Step 2: 运行失败断言

Run: npm run test:data-process-wizard Expected: FAIL，提示缺少当前预览文件状态。

• Step 3: 最小实现

const activePreviewFile = computed(() => uploadedFiles.value.find((file) => String(file.uid) === selectedPreviewFileId.value))
const activePreviewItems = computed(() => previewItems.value.filter((item) => item.sourceFileId === selectedPreviewFileId.value))

• Step 4: 运行回归脚本

Run: npm run test:data-process-wizard Expected: 父页面多文件断言通过。

Task 3: 加入可搜索文件下拉框与布局修复

Files:

• Modify: frontend/src/views/data-process/create/PreviewCompareStep.vue
• Modify: frontend/src/views/data-process/DataProcessCreateView.vue
• Modify: frontend/scripts/regression-data-process-wizard.mjs

Interfaces:

• Consumes: files、selectedFileId、items、sourceText。

• Produces: update:selectedFileId 事件。

• Step 1: 添加失败断言

assert.match(previewSource, /filterable/, '文件选择器必须可搜索')
assert.match(previewSource, /当前文件/, '预览缺少当前文件切换器')

• Step 2: 运行失败断言

Run: npm run test:data-process-wizard Expected: FAIL，提示缺少可搜索的文件选择器。

• Step 3: 实现下拉框与响应式样式

<el-select filterable :model-value="selectedFileId" @update:model-value="emit('update:selectedFileId', $event)">
  <el-option v-for="file in files" :key="file.id" :label="file.name" :value="file.id" />
</el-select>

• Step 4: 将 .wizard-content 设为 min-height: 0 并运行验证

Run: npm run test:data-process-wizard && npm run type-check && npm run build Expected: 三个命令退出码均为 0。