78 lines
3.0 KiB
Markdown
78 lines
3.0 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:** `PreviewCompareStep.vue` 保留切片筛选、分页和源文件定位，新增组件内编辑模式与临时草稿。父页面仅在收到保存事件时更新 `PreviewItem`，删除仍复用现有确认与删除事件。
|
||
|
||
**Tech Stack:** Vue 3 Composition API、TypeScript、Element Plus、Node 回归脚本。
|
||
|
||
## Global Constraints
|
||
|
||
- 列表行只展示编号、来源行号及编辑、删除图标操作。
|
||
- 编辑草稿未保存时不得更新 `PreviewItem.editedContent`。
|
||
- 搜索、分页或切换文件时退出编辑模式并丢弃草稿。
|
||
- 不新增依赖。
|
||
|
||
---
|
||
|
||
### Task 1: 切片列表与编辑模式切换
|
||
|
||
**Files:**
|
||
- Modify: `frontend/src/views/data-process/create/PreviewCompareStep.vue`
|
||
- Modify: `frontend/scripts/regression-data-process-wizard.mjs`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `PreviewItem`、`update:selectedId`、`update:item-content`、`remove:item`。
|
||
- Produces: `openEditor(item)`、`closeEditor()`、`saveEditor()` 与列表/编辑互斥渲染。
|
||
|
||
- [ ] **Step 1: Write the failing test**
|
||
|
||
在 `regression-data-process-wizard.mjs` 断言组件存在 `editingItemId` 和 `editorDraft`，列表以图标按钮触发 `openEditor` 与 `remove:item`，编辑模式拥有 `保存修改`、`取消` 与 `返回列表`，并且列表不再含 `item-token`、`item-status`、`modifiedOnly`。
|
||
|
||
- [ ] **Step 2: Run test to verify it fails**
|
||
|
||
Run: `npm run test:data-process-wizard`
|
||
|
||
Expected: FAIL，提示缺少单面板编辑模式结构。
|
||
|
||
- [ ] **Step 3: Write minimal implementation**
|
||
|
||
在组件中增加以下状态和行为：
|
||
|
||
```ts
|
||
const editingItemId = ref<string | null>(null)
|
||
const editorDraft = ref('')
|
||
|
||
function openEditor(item: PreviewItem) {
|
||
editingItemId.value = item.id
|
||
editorDraft.value = item.editedContent
|
||
}
|
||
|
||
function closeEditor() {
|
||
editingItemId.value = null
|
||
editorDraft.value = ''
|
||
}
|
||
|
||
function saveEditor() {
|
||
if (!editingItem.value) return
|
||
emit('update:item-content', editingItem.value.id, editorDraft.value)
|
||
closeEditor()
|
||
}
|
||
```
|
||
|
||
列表模式只渲染编号、来源和两个无文字图标按钮；编辑模式在同一位置渲染正文输入框以及返回、取消、保存操作。搜索、翻页、文件切换调用 `closeEditor()`。
|
||
|
||
- [ ] **Step 4: Run test to verify it passes**
|
||
|
||
Run: `npm run test:data-process-wizard`
|
||
|
||
Expected: `数据处理四步向导回归检查通过`。
|
||
|
||
- [ ] **Step 5: Build and visually verify**
|
||
|
||
Run: `npx vite build`
|
||
|
||
Expected: Vite completes successfully. Open the second wizard step, verify the list has only the two icon operations and that cancel does not change the selected slice content while save returns to the list.
|