第一次提交

docs/superpowers/specs/2026-07-09-frontend-visual-refresh-design.md

@@ -0,0 +1,267 @@
+# 前端视觉与样式系统重构设计
+
+**日期**：2026-07-09
+**范围**：`frontend/` （Vue 3 + Element Plus + Pinia）
+**目标用户**：内部数据/算法工程师，桌面端浏览器使用
+
+## 背景与动机
+
+当前前端已用 Element Plus + 自定义 SCSS 变量搭起一套"深色侧边栏 + 浅色内容区"的现代 B 端布局，但实际页面观感"乱"且有功能性瑕疵，根因不是设计语言本身有问题，而是**设计系统没有真正落地**：
+
+- 颜色散落硬编码（`#1e293b`、`#475569`、`#909399`、`#1890ff`、`#67c23a`…）
+- Element Plus 旧默认色与新主题色（`#4f46e5`）并存
+- 用了 FontAwesome **4.7.0**（2017 年停止维护），大量 `fa-cogs`/`fa-hdd-o` 这种短横线后缀命名
+- 登录页（`LoginView.vue`）背景是纯色 `#dbe0f9`，与主应用玻璃拟态风格割裂
+- `AppHeader.vue:189` 引用了主题里**不存在**的 `--warning-color` 变量，导致回退到默认值
+- `index.scss` 内有 5+ 处 `!important`，说明覆盖策略不对
+- 装饰性动画（按钮悬停 `translateY(-1px)`、`pulse` 动画、过度渐变）增加视觉噪音
+
+本次重构目标是**收口样式系统**，让"主题改一处，全站生效"，并消除明显观感问题。
+
+## 范围与非范围
+
+### 范围内
+
+1. 统一颜色变量系统（消除硬编码、补齐缺失变量）
+2. 图标库迁移：FA4 → **Element Plus Icons**（`@element-plus/icons-vue`，已与 Element Plus 同步）
+3. 重新设计登录页，与主应用视觉一致
+4. 修复 `AppHeader.vue` 的 `--warning-color` 缺失问题
+5. 整理 `index.scss` 的 `!important` 覆盖，改用更高特异性选择器
+6. 适度降低装饰性效果：移除按钮悬停位移、统一卡片阴影阶梯
+
+### 非范围（本次不做）
+
+- 布局结构改动（保留 260px 侧边栏 + 60px 顶栏）
+- 深色模式切换
+- 任何业务逻辑修改
+- 移动端适配（当前项目无移动端需求）
+- `web/` 静态版不动
+
+## 方案选型
+
+### 选定方案：方案 A — 克制重塑
+
+保留现有"深色侧边栏 + 浅色内容区"骨架，做样式系统收口。
+
+**未选 方案 B（极简重做）**：改动面太广，10+ 视图都要适配，回报/风险比差。
+**未选 方案 C（全深色科技感）**：Element Plus 暗色需要大量单独调校，工作量与当前诉求不匹配。
+
+## 设计
+
+### 1. 颜色变量系统（`src/styles/index.scss` 重构）
+
+**目标**：所有颜色、阴影、圆角都走 CSS 变量；后续改主题只改 `:root` 即可。
+
+**新增/补齐变量**（`src/styles/index.scss` 顶部）：
+
+```scss
+:root {
+  /* Element Plus 主色（已有） */
+  --el-color-primary: #4f46e5;
+  --el-color-primary-light-3: #818cf8;
+  --el-color-primary-light-5: #a5b4fc;
+  --el-color-primary-light-7: #c7d2fe;
+  --el-color-primary-light-8: #e0e7ff;
+  --el-color-primary-light-9: #eef2ff;
+  --el-color-primary-dark-2: #4338ca;
+
+  /* 状态色（已有） */
+  --el-color-success: #10b981;
+  --el-color-warning: #f59e0b;       /* 修复：之前未显式定义 */
+  --el-color-danger: #ef4444;
+  --el-color-info: #64748b;
+
+  /* 项目别名（已有 + 新增） */
+  --primary-color: var(--el-color-primary);
+  --primary-hover: var(--el-color-primary-light-3);
+  --success-color: var(--el-color-success);
+  --warning-color: var(--el-color-warning);   /* 新增：修复 AppHeader 引用 */
+  --danger-color: var(--el-color-danger);
+
+  /* 圆角（已有） */
+  --el-border-radius-base: 8px;
+  --el-border-radius-small: 6px;
+  --el-border-radius-round: 20px;
+
+  /* ========== 新增：项目语义化变量 ========== */
+
+  /* 文字 */
+  --text-primary: #1e293b;            /* 替代硬编码 #1e293b */
+  --text-secondary: #475569;          /* 替代 #475569 */
+  --text-tertiary: #64748b;           /* 替代 #64748b */
+  --text-placeholder: #94a3b8;        /* 替代 #94a3b8 */
+
+  /* 背景 */
+  --bg-page: #f8fafc;                 /* 替代 --el-bg-color-page */
+  --bg-card: #ffffff;
+  --bg-subtle: #f1f5f9;               /* 替代硬编码 #f1f5f9 */
+  --bg-hover: #f8fafc;                /* 替代硬编码 #f8fafc */
+
+  /* 边框 */
+  --border-subtle: #e2e8f0;           /* 替代硬编码 #e2e8f0 */
+  --border-base: #f1f5f9;             /* 替代硬编码 #f1f5f9 */
+
+  /* 侧边栏（已有） */
+  --sidebar-bg: #0f172a;
+  --sidebar-text: #94a3b8;
+  --sidebar-active-bg: rgba(79, 70, 229, 0.15);
+  --sidebar-active-text: #ffffff;
+  --sidebar-section-title: #64748b;
+
+  /* 阴影（统一阶梯） */
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
+  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06);   /* 替代 --card-shadow */
+  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
+  --shadow-dialog: 0 20px 40px rgba(15, 23, 42, 0.12);
+
+  /* 尺寸 */
+  --header-height: 60px;
+  --sidebar-width: 260px;
+  --content-padding-x: 32px;
+  --content-padding-y: 32px;
+}
+```
+
+**改动原则**：
+- 组件 SCSS 内的硬编码颜色全部替换为对应变量
+- 任何新增颜色需求都先在 `:root` 定义，再引用
+- 不再使用 `!important`；如确需覆盖，提升特异性（如 `:deep(.el-button)`）
+
+### 2. 图标库迁移：FA4 → Element Plus Icons
+
+**为什么选 Element Plus Icons**：
+- 零新增依赖成本（仅在 `package.json` 增加一行）
+- 与 Element Plus 组件视觉风格天然一致
+- 树摇友好，按需引入
+- SVG 渲染，可继承 `currentColor` 与 `font-size`，比 FA 字体图标更现代
+
+**实施**：
+1. `npm i @element-plus/icons-vue`
+2. `main.ts` 全局注册常用图标（按需在组件内 import 也可）
+3. 替换规则（在每个 view/component 内做局部替换）：
+
+| FA4 类名 | Element Plus 图标 | 用在哪 |
+|---------|------------------|--------|
+| `fa-cogs` | `Setting` | 侧边栏"模型调优" |
+| `fa-line-chart` | `TrendCharts` | 侧边栏"模型评测" |
+| `fa-server` | `Monitor` | 侧边栏"模型推理" |
+| `fa-cube` | `Box` | 侧边栏"模型管理"、Logo |
+| `fa-file-text` | `Document` | 侧边栏"数据集" |
+| `fa-wrench` | `Tools` | 侧边栏"其他工具" |
+| `fa-bar-chart` | `DataAnalysis` | 侧边栏"平台性能" |
+| `fa-search` | `Search` | 搜索框前缀 |
+| `fa-plus` | `Plus` | 新建按钮 |
+| `fa-trash` | `Delete` | 删除按钮 |
+| `fa-arrow-left` | `ArrowLeft` | 返回按钮 |
+| `fa-microchip` | `Cpu` | 性能监控 |
+| `fa-database` | `Files` | 内存监控（数据文件堆） |
+| `fa-hdd-o` | `Box` | 磁盘监控（存储箱） |
+| `fa-sign-out` | `SwitchButton` | 退出登录 |
+| `fa-angle-down` | `ArrowDown` | 下拉箭头 |
+| `fa-user-circle-o` | `User` | 个人中心 |
+| `fa-cog` | `Setting` | 系统设置 |
+| `fa-stop-circle-o` | `VideoPause` | 停止训练 |
+| `fa-pencil` | `Edit` | 编辑 |
+| `fa-times` | `Close` | 关闭 |
+| `fa-globe` | `Connection` | 网络流量 |
+| `fa-info-circle` | `InfoFilled` | 系统信息 |
+| `fa-user-o` | `User` | 登录页账号图标 |
+| `fa-lock-o` | `Lock` | 登录页密码图标 |
+| `fa-sign-in` | `Right` | 登录按钮 |
+
+**注意点**：
+- 替换后调整图标尺寸（Element Plus Icons 用 `size` prop 或 CSS `font-size`）
+- 部分 FA4 类名（如 `fa-file-text-o`）在 FA5/FA6 已无 `-o` 后缀
+- `main.ts` 中删除 `import '@/assets/font-awesome/css/font-awesome.min.css'`
+- 删 `src/assets/font-awesome/` 整个目录（字体文件 100+KB）
+
+### 3. 登录页重新设计（`LoginView.vue`）
+
+**目标**：与主应用保持一致的视觉语言，背景改用渐变 + 玻璃卡片。
+
+**设计**：
+- 背景：渐变 `linear-gradient(135deg, #4f46e5 0%, #818cf8 50%, #c7d2fe 100%)`
+- 卡片：白色，圆角 16px，阴影 `var(--shadow-dialog)`
+- Logo 区域：上下结构（Logo 48px → 标题 24px → 副标题 14px 灰色）
+- 表单：单项之间 20px 间距，输入框 44px 高，圆角 8px
+- 按钮：主色实心，44px 高，全宽
+- 选项行：flex 布局，记住密码左、忘记密码右
+- 整体居中，最大宽 420px
+
+**关键 CSS 改动**：
+- 背景从 `#dbe0f9` 改为 `linear-gradient(135deg, #4f46e5 0%, #818cf8 50%, #c7d2fe 100%)`
+- 卡片圆角从 12px 提升到 16px
+- 阴影替换为 `var(--shadow-dialog)`
+- 所有内联颜色改用变量
+
+### 4. 修复 `AppHeader.vue` 的 `--warning-color` 缺失
+
+**问题**：`AppHeader.vue:189` 使用 `var(--warning-color)`，但 `index.scss` 里只定义了 `--danger-color`、`--success-color`，没有 `--warning-color`。
+
+**修复**：在 `:root` 中新增 `--warning-color: var(--el-color-warning);`（已在第 1 节列入）。
+
+### 5. 整理 `index.scss` 的 `!important`
+
+**现有 `!important` 用法**（来自 `index.scss`）：
+
+| 选择器 | 用途 | 现状 |
+|--------|------|------|
+| `.el-card { border: none !important; ... }` | 去掉 EP 默认边框 | 提升为 `.app-container .el-card` 或全局加 `:where()` 重置 |
+| `.el-tag { border: none !important; ... }` | 去掉 EP 默认边框 | 同上 |
+| `.el-dialog { border-radius: 16px !important; ... }` | 圆角和阴影 | 同上 |
+
+**改写策略**：
+- 用更高特异性选择器（如 `body .el-card`）替代 `!important`
+- 或用 CSS Layer (`@layer reset, overrides, components`) 控制优先级
+
+**本次采用**：直接提高特异性，避免引入 CSS Layer 复杂度（属于项目既定风格之外的引入，需要权衡）。
+
+### 6. 降低装饰性效果
+
+**调整清单**：
+- `index.scss` 移除 `.el-button:hover { transform: translateY(-1px); box-shadow: ...; }` — 改为仅改变背景色
+- `AppHeader.vue` 移除 `pulse` 动画，改为静态红色
+- 侧边栏菜单图标的 `transform: scale(1.1)` 悬停动画保留（这是细节点缀，不算噪音）
+- 卡片悬停 `transform` 动效保留（仅在 DataTablePage 等列表卡片上，目前没有，不新增）
+- 顶栏 `backdrop-filter: blur(12px)` 保留（玻璃感是这个项目的风格语言）
+
+## 实施步骤（落地顺序）
+
+按风险从低到高，便于逐步验证：
+
+1. **步骤 1**：扩展 `src/styles/index.scss` 变量（新增，不删除旧的）
+2. **步骤 2**：安装 `@element-plus/icons-vue`，在 `main.ts` 注册
+3. **步骤 3**：逐文件替换图标（按表格顺序）
+4. **步骤 4**：逐文件替换硬编码颜色为变量
+5. **步骤 5**：重新设计 `LoginView.vue`
+6. **步骤 6**：删除 `src/assets/font-awesome/` 目录和 `main.ts` 的 import
+7. **步骤 7**：运行 `npm run type-check` 和 `npm run build` 验证
+
+每步完成后截图（手动）确认未引入新问题。
+
+## 验证标准
+
+- [ ] `npm run type-check` 通过
+- [ ] `npm run build` 通过
+- [ ] 浏览器控制台无 CSS 警告（无未定义变量）
+- [ ] 全站不再有 `#1890ff`、`#67c23a`、`#e6a23c`、`#f56c6c` 这类 EP 旧色硬编码（grep 验证）
+- [ ] 全站不再有 `class="fa fa-` 的引用（grep 验证）
+- [ ] 全站不再有 `--warning-color` 这类指向不存在变量的引用
+- [ ] `grep -c "!important" src/styles/index.scss` 数量从当前值下降 50% 以上
+- [ ] 登录页与主应用风格一致
+
+## 风险与回退
+
+- **风险 1**：Element Plus Icons 不覆盖某些冷门 FA 图标（如 `fa-stop-circle-o` 训练停止）
+  - **应对**：在替换前先做一次图标对照表，确认每个 FA 类名都有 EP 对应项；没有则保留 FA4（不删除 FA 资源），但推进用 EP 主流图标
+- **风险 2**：CSS 变量替换漏掉某处导致视觉回退
+  - **应对**：分阶段提交，每阶段都跑 build；如有遗漏，EP 会回退到自身默认色
+- **风险 3**：`!important` 整理引入新覆盖问题
+  - **应对**：整理前先 `git diff` 对比编译产物颜色变化，保留 `git stash` 能力
+
+## 后续优化（不在本次范围）
+
+- 抽出 Design Token 文件（`tokens.scss`）做 Figma → Code 同步
+- 引入 UnoCSS 或 Windi CSS 做原子化样式（取决于团队接受度）
+- 给所有列表页加 skeleton 加载态
+- 暗色模式支持（需要先在 EP 主题层注册暗色）

docs/superpowers/specs/2026-07-10-data-process-create-wizard-design.md

@@ -0,0 +1,194 @@
+# 数据处理创建流程四步向导设计
+
+日期：2026-07-10
+
+## 1. 目标
+
+重构 `/data-process/create`，把当前职责混杂、步骤数量会变化的流程，调整为四个语义稳定、页面内容相互独立的步骤。用户在任一时刻只处理当前任务，同时始终知道所处阶段、前后关系和唯一主操作。
+
+本次设计沿用现有平台视觉语言：浅灰应用背景、单层白色页面画布、靛蓝主色、克制边框与阴影、固定四步进度导航和底部操作栏。不得出现页面白底中再次嵌套整页白色大卡片的双层白底。
+
+## 2. 固定流程
+
+顶部步骤数量始终为四个，不随结构化或非结构化类型变化：
+
+1. **创建任务**：填写任务信息、上传源文件并选择处理类型。
+2. **数据预览**：检查系统解析结果；非结构化数据进入切片预览，结构化数据进入记录预览。
+3. **开始生成**：确认摘要、启动生成并查看进度或错误。
+4. **结果编辑与保存**：检查并修改生成结果，通过校验后保存任务。
+
+步骤状态只有 `未开始`、`当前`、`已完成` 三种。用户返回已完成步骤时保留已经填写或编辑的内容，不因切换处理类型而静默清空任务名称、描述和上传文件。
+
+## 3. 第一步：创建任务
+
+页面只显示创建任务所需内容：
+
+- 任务名称和可选描述。
+- 结构化数据、非结构化数据两种处理类型。
+- 单文件上传区、文件格式和大小约束。
+- 上传后的基础识别结果：文件名、大小、格式、记录数或文本长度、校验状态。
+
+底部操作：`取消`、`保存草稿`、唯一主操作 `继续：数据预览`。
+
+切换处理类型时仅更新后续预览和生成策略；如果已经产生预览结果，需要明确提示预览将重新计算，确认后才清除后续步骤数据。
+
+## 4. 第二步：数据预览
+
+### 4.1 页面职责
+
+本页只负责核对源数据与系统预览结果的对应关系，并允许修改不合理的切片或记录内容。不得显示第一步的大量表单、第三步的生成进度或第四步的最终结果表格。
+
+页面顶部仅保留一行来源摘要，例如：
+
+`finance_qa.jsonl · 非结构化数据 · 8,560 个切片`
+
+### 4.2 非结构化数据：源文件与切片对照
+
+主体为同一白色画布中的左右分栏，使用竖向分隔线区分，不使用两个浮动大卡片：
+
+- **左侧约 58%：源文件阅读器**
+  - 只读展示完整源文件，支持滚动和行号。
+  - 当前切片对应的原文使用浅靛蓝背景高亮，并在左边缘显示定位条。
+  - 顶部提示当前定位，例如 `已定位到切片 #002`。
+  - 左侧原文始终保持源文件真实性，修改右侧切片不会直接改写源文件。
+
+- **右侧约 42%：切片内容**
+  - 上方为切片列表，支持按编号或内容搜索、仅查看已修改项。
+  - 每个切片显示编号、来源行范围、Token 数和修改状态。
+  - 下方为当前切片的可编辑正文、字符数、Token 数和自动保存状态。
+  - 提供上一片、下一片和恢复原始内容。
+
+### 4.3 对照定位交互
+
+右侧切片是主选择源，左侧原文是定位反馈：
+
+1. 用户点击右侧切片。
+2. 系统读取该切片保存的原始来源范围 `sourceStart`、`sourceEnd`。
+3. 左侧阅读器自动滚动到目标范围，并将对应原文高亮。
+4. 右侧切片进入选中态，左右使用一致的浅靛蓝语义色建立对应关系。
+5. 用户切换上一片或下一片时执行相同的同步定位。
+
+为了避免跳动，目标范围应滚动到阅读区中部；如果目标已完全可见，则只更新高亮，不重复滚动。
+
+### 4.4 编辑与来源映射
+
+- 编辑切片正文只改变待生成内容，来源映射仍指向最初的原文范围。
+- 编辑后显示 `已修改，草稿已自动保存`，并允许恢复到系统初始切片内容。
+- 修改后的文本与原文不再完全一致时，左侧仍高亮原始来源，右侧显示 `内容已调整`，避免误解为源文件被改写。
+- 手动新增的切片没有原始来源，显示 `手动新增，无源文件定位`，左侧清除高亮但保留当前位置。
+- 删除切片需要二次确认；删除只影响本次处理，不修改源文件。
+- 找不到来源范围或范围越界时，右侧显示 `无法定位原文`，左侧不进行错误滚动，用户仍可编辑该切片。
+
+### 4.5 结构化数据适配
+
+第二步的整体布局和交互不变，但语义调整为记录对照：
+
+- 左侧展示源文件中的表格行或原始 JSON 记录。
+- 右侧展示系统解析后的单条记录及字段值。
+- 点击右侧记录，左侧定位并高亮对应源行或 JSON 范围。
+
+这样可以保持四步流程稳定，同时避免对结构化数据使用不准确的“切片”文案。
+
+底部操作：`返回：创建任务`、`保存草稿`、唯一主操作 `确认预览并继续`。
+
+## 5. 第三步：开始生成
+
+页面只显示：
+
+- 任务名称、数据类型、文件、预览条目数和修改条目数的只读摘要。
+- 唯一启动操作 `开始生成`。
+- 启动后的进度、当前阶段、耗时和状态日志。
+- 失败时显示错误摘要与 `重试`；运行中提供 `停止生成`，停止前需要二次确认。
+
+启动前不显示底部“下一步”与页面内“开始生成”两个竞争按钮。生成成功后，唯一主操作切换为 `查看生成结果`。
+
+## 6. 第四步：结果编辑与保存
+
+结果不再使用一组原始 JSON 文本框堆叠展示，而采用结构化编辑列表：
+
+- 桌面端左侧为结果条目列表，支持搜索、错误筛选和已修改筛选。
+- 桌面端右侧为当前结果的字段编辑区；较窄窗口改为列表在上、编辑区在下。
+- 每条结果显示校验状态，错误定位到具体字段。
+- 支持上一条、下一条、恢复生成结果。
+- 保存前执行完整校验；有阻断错误时禁止保存并聚焦首个错误。
+
+底部操作：`返回：开始生成`、`保存草稿`、唯一主操作 `保存任务`。
+
+## 7. 状态与数据模型
+
+向导需要维护统一草稿状态：
+
+```ts
+interface DataProcessDraft {
+  task: TaskInfo
+  sourceFile: SourceFileMeta
+  processingType: 'structured' | 'unstructured'
+  previewItems: PreviewItem[]
+  selectedPreviewId: string | null
+  generation: GenerationState
+  results: ResultItem[]
+  currentStep: 1 | 2 | 3 | 4
+  dirty: boolean
+}
+
+interface PreviewItem {
+  id: string
+  originalContent: string
+  editedContent: string
+  sourceStart: number | null
+  sourceEnd: number | null
+  sourceStartLine: number | null
+  sourceEndLine: number | null
+  tokenCount: number
+  status: 'original' | 'modified' | 'manual' | 'invalid'
+}
+```
+
+源文件位置以字符偏移作为定位依据，行号用于展示。这样即使原文存在长行或不同换行符，也能稳定高亮准确范围。
+
+## 8. 页面组件边界
+
+- `DataProcessWizardShell`：固定四步导航、页面标题和底部操作栏。
+- `TaskSetupStep`：任务信息、类型和文件上传。
+- `PreviewStep`：数据预览容器，按处理类型选择预览器。
+- `SourceViewer`：源文件渲染、滚动定位和范围高亮。
+- `PreviewItemList`：切片或记录列表、搜索与选择。
+- `PreviewItemEditor`：当前条目编辑、状态和恢复。
+- `GenerationStep`：启动、进度、失败与重试。
+- `ResultReviewStep`：生成结果列表、字段编辑和保存校验。
+
+`SourceViewer` 不感知切片列表内部逻辑，只接收选中范围；`PreviewItemList` 不直接操纵滚动，只上报选中项。同步行为由 `PreviewStep` 统一协调。
+
+## 9. 异常与离开保护
+
+- 上传失败、解析失败、预览生成失败分别提供明确原因和重试入口。
+- 预览数据加载时显示骨架或局部加载状态，不能让整个白色画布闪烁或短暂回退到列表页。
+- 刷新、返回列表或关闭页面前，如果存在未持久化修改，必须提示保存草稿或放弃更改。
+- 自动保存失败时保留本地编辑内容，并显示可重试状态。
+- 生成过程中禁止无提示切换处理类型或替换源文件。
+
+## 10. 响应式与可访问性
+
+- 桌面端左右对照为默认布局，分栏宽度允许拖动但设置最小宽度。
+- 较窄窗口下改为上下布局：源文件在上，切片在下；选中切片后仍自动定位高亮。
+- 选中、高亮、修改和错误状态不能只依赖颜色，还需文字、图标或边缘标记。
+- 键盘支持上下切换切片、聚焦编辑器、保存草稿；滚动定位后不抢走编辑器焦点。
+
+## 11. 验收标准
+
+1. 结构化和非结构化流程都始终显示四个固定步骤。
+2. 每一步只包含该阶段必要内容，页面中不存在跨步骤主操作竞争。
+3. 点击任一有来源映射的右侧切片后，左侧在一次交互内定位并高亮准确原文范围。
+4. 已完全可见的范围不会产生多余滚动；不可定位时有明确反馈且不破坏编辑。
+5. 修改切片不会改写左侧源文件，高亮仍指向原始来源。
+6. 返回前一步再进入时，选中项、编辑内容、滚动上下文和草稿状态可恢复。
+7. 生成开始前只存在一个明确启动操作；生成成功后才允许进入结果编辑。
+8. 最终结果保存前执行字段级校验，阻断错误可准确定位。
+9. 路由切换不出现列表页或灰色背景闪烁，白色页面画布保持连续。
+10. 页面在常用桌面宽度下无横向溢出，底部操作栏不遮挡主体内容。
+
+## 12. 视觉参考
+
+- 当前流程截图：`docs/superpowers/specs/assets/data-process-create-audit/01-create-task.png`
+- 当前动态步骤截图：`docs/superpowers/specs/assets/data-process-create-audit/02-unstructured-step-change.png`
+- 最终左右对照修订稿：`/Users/caoxiaozhu/.codex/generated_images/019f4981-cb06-79f0-b387-1d685e74ceea/exec-c72de596-4c50-405b-8987-43d122e02b86.png`

docs/superpowers/specs/2026-07-10-data-process-status-tabs-removal-design.md

@@ -0,0 +1,27 @@
+# 数据处理任务状态切换移除设计
+
+## 目标
+
+移除数据处理任务列表左上角的“全部任务”“处理中”“已完成”状态切换组件。
+页面默认展示全部任务，用户仍可通过任务状态列查看每条任务的当前状态。
+
+## 改动范围
+
+- 删除 `DataProcessListView.vue` 中的状态切换按钮及标题插槽。
+- 删除仅服务于该组件的 `activeTab` 状态和 `filteredDataList` 计算逻辑。
+- 将任务表格的数据源直接绑定为完整的 `dataList`。
+- 删除仅服务于状态切换组件的胶囊样式。
+
+## 保留行为
+
+- 保留任务名称搜索。
+- 保留任务状态列及状态标签。
+- 保留新建任务、详情、删除和分页等现有行为。
+- 不修改任务 Mock 数据及后端接口设计。
+
+## 验证标准
+
+- 页面不再出现“全部任务”“处理中”“已完成”三个切换按钮。
+- 表格默认展示所有状态的任务。
+- 页面不存在遗留的状态切换变量、筛选分支或专用样式。
+- 前端类型检查和相关回归检查通过。

docs/superpowers/specs/2026-07-10-dataset-preview-header-actions-removal-design.md

@@ -0,0 +1,35 @@
+# 数据预览详情页头部操作移除设计
+
+## 目标
+
+移除数据预览详情页右上角的“打包下载”“删除”“返回”三个按钮，
+让该页面仅承担数据集文件与内容预览职责。
+
+## 范围
+
+- 删除 `DatasetPreviewView.vue` 的页头额外操作区域及其三个按钮。
+- 删除仅被这三个按钮使用的整包下载、删除和路由返回逻辑及依赖。
+- 保留文件列表中的单文件“预览”和“下载”操作。
+- 保留数据集信息、文件列表与内容预览区域。
+
+## 方案比较
+
+1. 直接删除页面头部按钮和失效逻辑（采用）：无隐藏交互与无用依赖，页面职责清晰。
+2. 使用 CSS 隐藏按钮：按钮逻辑仍留在页面中，键盘和后续维护可能误暴露功能。
+3. 增加运行时开关：为固定的展示要求引入无必要状态和分支。
+
+## 实现设计
+
+- 移除 `PageCard` 的 `extra` 插槽。
+- 从组件中移除 `useRouter`、`ElMessage`、`ElMessageBox`、`deleteDataset`、
+  `downloadDatasetUrl` 及对应处理函数。
+- 保留 `handleDownloadFile` 与 `downloadFileUrl`，确保文件级下载仍可用。
+- 新增回归检查，断言详情页不再含这三个页头按钮或其对应处理函数，
+  并断言文件级预览、下载操作仍存在。
+
+## 验收标准
+
+1. 数据预览详情页不显示“打包下载”“删除”“返回”按钮。
+2. 文件列表中的“预览”和“下载”按钮继续显示并可用。
+3. 页面不保留已删除头部操作的事件处理函数与未使用依赖。
+4. 针对性回归检查和生产构建通过。

docs/superpowers/specs/2026-07-10-dataset-task-mock-data-design.md

@@ -0,0 +1,58 @@
+# 数据集管理“数据任务”Mock 数据设计
+
+## 目标
+
+让数据集管理页的“数据任务”页签展示可用于界面演示的任务产出数据，
+同时保持“本地上传”页签、数据集预览和下载入口的现有行为。
+
+## 现状
+
+- 数据集列表统一从 `mockDatasets` 获取。
+- “本地上传”页签当前展示全部数据集。
+- “数据任务”页签固定返回空数组，因此始终为空。
+- 数据集详情、预览和下载均基于同一套 Mock 数据接口。
+
+## 方案比较
+
+1. 为数据集增加来源字段并统一过滤（采用）。单一数据源，页签语义清晰，
+   新增的任务数据可继续复用详情、预览和下载接口。
+2. 在列表页内单独维护任务数据。改动较少，但会形成第二份数据源，详情接口
+   无法自然找到这些记录。
+3. 从数据处理任务动态生成数据集。数据关联更强，但需要重构任务 Mock 数据，
+   超出本次只增加演示数据的范围。
+
+## 数据设计
+
+- 在 `DatasetItem` 中增加可选来源字段 `source`，取值为 `upload` 或 `task`。
+- 现有 6 条 Mock 数据明确标记为 `upload`。
+- 新增 4 条来源为 `task` 的 Mock 数据，覆盖训练集、评测集等类型，包含名称、
+  存储位置、大小、条数、描述和创建时间。
+- 新记录使用不重复的 ID，并保留现有 Mock 适配器的统一查询路径。
+
+## 页面行为
+
+- “本地上传”仅展示 `source !== 'task'` 的数据，兼容后端暂未返回来源字段的情况。
+- “数据任务”仅展示 `source === 'task'` 的数据。
+- 搜索、分页、预览、下载和删除按钮保持现有行为。
+- 切换页签后，公共列表组件会在数据变化时回到第一页并清空选中状态。
+
+## 异常与边界
+
+- 未携带 `source` 的真实接口数据默认归入“本地上传”，避免升级期间数据消失。
+- 任务数据 ID 不与现有数据冲突，详情查询仍能返回对应记录。
+- 本次不新增依赖，不修改后端接口，不实现真实的数据任务关联。
+
+## 验证
+
+- 先添加一个能验证来源字段和页签过滤规则的回归检查，再实现变更。
+- 运行项目类型检查与生产构建；若存在仓库原有错误，需确认本次改动文件没有
+  引入新的错误。
+- 启动页面后检查两个页签：本地上传显示 6 条，数据任务显示 4 条，任务数据可被
+  搜索且表格字段完整。
+
+## 验收标准
+
+1. “数据任务”页签展示 4 条假数据。
+2. “本地上传”页签不混入任务生成的数据。
+3. 两个页签的搜索、分页和操作列正常显示。
+4. 新增类型定义与 Mock 数据通过针对性回归检查。

docs/superpowers/specs/2026-07-10-page-surface-classification-design.md

@@ -0,0 +1,53 @@
+# 页面表面分类设计
+
+## 目标
+
+修正主布局无条件套用白色页面画布的问题，使页面层级符合以下规则：
+
+- 列表页已经拥有自己的白色卡片，因此直接放在灰色应用背景上。
+- 表单页、详情页和对话页继续使用统一的白色圆角页面画布。
+- 页面分类由路由显式声明，避免依赖路径字符串或 DOM 结构猜测。
+
+## 根因
+
+`MainLayout.vue` 当前无条件为所有子路由渲染 `.page-canvas`。同时，列表页通过
+`DataTablePage`、`.eval-card-container` 或 `.manage-card-container` 自带白色卡片，
+因此形成“灰色外层 → 白色页面画布 → 白色列表卡片”的重复层级。
+
+## 设计
+
+在列表路由的 `meta` 中增加 `pageSurface: 'self'`：
+
+- `/fine-tune`
+- `/model-eval`
+- `/model-inference`
+- `/model-manage`
+- `/data-process`
+- `/dataset`
+
+其他路由保持默认行为，不需要逐项声明，仍由主布局提供白色页面画布。
+
+`MainLayout.vue` 根据 `route.meta.pageSurface` 给 `.page-canvas` 添加
+`.is-self-surface` 状态类。该状态仅取消外层画布的白色背景、圆角、阴影和内边距，
+保留列表页自身的卡片样式。
+
+对于默认白色画布页面，如果路由直接输出 `PageCard`，可直接扁平化；如果由页面
+根容器包裹主 `PageCard`，根容器必须显式声明 `.page-card-host`。只有这两类主卡片
+改为透明、无圆角、无阴影，内部业务卡片不受影响，避免创建页出现“白色画布再套
+白色卡片”，同时不误伤训练日志的参数卡片。
+
+## 验收标准
+
+1. 六个列表路由只显示自身的一层白色卡片，外部可见灰色页面背景。
+2. `/training-log/:id`、创建页、编辑页等仍显示白色圆角页面画布。
+3. 不根据 URL 文本或 DOM 自动判断页面类型。
+4. 不改变列表、表单和详情页现有业务逻辑。
+5. 桌面宽度下不产生水平滚动。
+6. 创建训练任务等表单页只显示一层白色画布，根 `PageCard` 不形成第二层表面。
+
+## 测试策略
+
+- 静态回归脚本验证六个列表路由都声明 `pageSurface: 'self'`。
+- 静态回归脚本验证 `MainLayout` 根据路由 meta 设置状态类。
+- 静态回归脚本验证 `.is-self-surface` 取消白底、内边距、圆角和阴影。
+- 浏览器分别检查一个列表页和一个详情页。

docs/superpowers/specs/2026-07-10-preview-slice-edit-mode-design.md

@@ -0,0 +1,25 @@
+# 数据预览切片编辑模式
+
+## 目标
+
+第二步右侧区域不再把切片列表和正文编辑器上下堆叠。默认仅展示可搜索、可分页的切片列表；编辑时在同一右侧区域进入单独的编辑视图。
+
+## 列表模式
+
+- 每行显示切片编号与来源行号。
+- 每行右侧提供铅笔和垃圾桶图标按钮，分别用于编辑与删除。
+- 不显示 Token、修改状态和“仅看已修改”筛选。
+- 保留按编号或正文搜索及每页 6 条分页。
+
+## 编辑模式
+
+- 点击铅笔后，右侧替换为当前切片的编辑界面，左侧源文件继续高亮对应行。
+- 编辑使用组件内临时草稿；输入过程不更新父级预览数据。
+- “保存修改”将草稿写回父级数据并返回列表。
+- “取消”或“返回列表”丢弃未保存草稿并返回列表，用户可继续选择其他切片。
+- 删除继续使用确认弹窗；确认后删除该条并返回列表。
+
+## 边界与验证
+
+- 翻页、搜索或切换文件时，应退出编辑模式并丢弃未保存草稿，避免将内容写到错误条目。
+- 切片列表、编辑模式切换、保存和取消行为由向导回归脚本覆盖。

docs/superpowers/specs/2026-07-10-route-transition-design.md

@@ -0,0 +1,27 @@
+# 二级页面路由转场设计
+
+## 目标
+
+消除列表页进入新建、详情、编辑等二级页面时的透明闪烁，使路由内容与页面表面模式在同一帧完成切换。
+
+## 根因
+
+`MainLayout.vue` 使用 `transition name="fade" mode="out-in"`。路由变化时，
+`route.meta.pageSurface` 会立即切换外层画布模式，但旧页面仍执行 150ms 的离场淡出，
+因此旧列表会短暂显示在新页面的白色画布中并处于半透明状态。
+
+## 已选方案
+
+移除主布局的页面级 `transition` 和对应 `.fade-*` 样式，让 `router-view` 组件立即替换。
+列表、详情、新建和编辑页面的表面模式将与内容同步切换。
+
+保留组件内部动效，包括弹窗、折叠、按钮状态、批量操作栏等局部交互动画。
+
+## 验收标准
+
+1. `MainLayout.vue` 不再使用页面级 `<transition>`。
+2. 主布局不再包含 `.fade-enter-*` 或 `.fade-leave-*` 透明度规则。
+3. 列表进入新建、列表进入训练日志、二级页面返回列表时，不出现旧页面半透明中间帧。
+4. 页面表面分类和根 `PageCard` 扁平化逻辑保持不变。
+5. 页面无水平溢出，控制台无新增错误。
+

docs/superpowers/specs/2026-07-10-source-upload-file-list-design.md

@@ -0,0 +1,86 @@
+# 源数据上传紧凑文件列表设计
+
+日期：2026-07-10
+
+## 1. 目标
+
+优化数据处理创建页“源数据上传”区域中已选文件的呈现方式。当前每个文件
+占用一张独立的大卡片；文件数量增多时，页面会被文件清单拉长，用户也难以
+快速定位和删除某一文件。
+
+本次改动将已上传文件改为每页最多 10 条的紧凑列表，并让上传入口随文件状态切换：
+空状态使用大尺寸拖拽上传区，已有文件时切换为列表标题右侧的小型继续上传按钮。
+这样能保持文件状态和逐项删除能力，让大量文件的查看与操作集中在一个稳定区域内。
+
+## 2. 方案选择
+
+评估过三种方式：
+
+1. 文件名标签流：占用最少，但长文件名、状态与删除操作会拥挤，不适合本页。
+2. 折叠摘要：页面最短，但需要额外展开才能操作，增加一步操作成本。
+3. 固定高度紧凑列表：每个文件是一行，状态和删除按钮始终可见；超过可见
+   行数后在列表内滚动。
+
+采用第三种方案。它保留当前已有的逐项删除能力，同时解决页面高度随文件数
+量线性增长的问题。
+
+## 3. 布局与交互
+
+空状态只显示现有的大尺寸拖拽上传区及格式提示，用于首次添加文件。
+
+存在文件后，隐藏大尺寸拖拽上传区和其格式提示，在原位置显示文件列表：
+
+- 列表顶部左侧显示 `已添加 N 个文件`，其中 `N` 为当前文件数；右侧显示
+  小型 `继续上传` 按钮。
+- `继续上传` 复用原上传控件的多文件选择、格式限制、非自动上传和文件变更事件，
+  只改变触发入口的尺寸与位置。
+- 每页最多显示 10 行；超过 10 个文件时，在列表底部显示分页器，不使用长列表
+  或内部滚动承载额外文件。
+- 新增文件后自动切换到最后一页，确保用户能立刻看到刚添加的文件；删除当前页
+  的最后一个文件后，自动回退到仍有文件的最后一页。
+- 单行高度约 48px，使用细分隔线区分，不再使用外框、左侧绿条和大尺寸图标。
+- 每行从左至右依次为：文件类型图标、文件名、大小与条目数、校验状态、删除。
+- 文件名占据可伸缩区域；空间不足时省略，保留原始 `title` 以便悬停查看全名。
+- 删除按钮沿用红色文字链接，点击后继续使用当前的移除事件；不新增确认弹窗
+  或批量删除，以免改变既有操作语义。
+- 校验状态沿用绿色图标和“校验通过”文案；后续若存在失败状态，可在同一位置
+  显示错误文案而不改变列表结构。
+
+## 4. 视觉约束
+
+- 延续页面的靛蓝文件图标、绿色成功状态和红色危险操作色；继续上传按钮使用现有
+  主色的紧凑次级按钮样式。
+- 列表容器使用现有浅灰边框和 8px 圆角，背景保持白色；不新增大卡片层级。
+- 仅当文件数超过 10 个时显示分页器；分页器使用紧凑的上一页、页码、下一页布局，
+  不提供页大小选择或跳页输入，避免增加不必要的操作。
+- 在窄屏下，元信息可收缩，文件名仍保持最优先；删除按钮必须始终可见且可点按。
+
+## 5. 组件边界与数据流
+
+改动只在 `TaskSetupStep` 内完成：
+
+- 继续使用现有 `uploadedFiles` 属性和 `remove-file` 事件。
+- 不修改文件上传、格式限制、校验逻辑或父组件中的文件数据模型。
+- 新增的文件总数来自 `uploadedFiles.length`，每行信息继续来自现有文件元数据。
+
+## 6. 可访问性
+
+- 删除按钮继续使用真实的 `el-button`，确保键盘可聚焦和激活。
+- 文件名省略时通过原生 `title` 暴露完整名称。
+- 校验状态同时保留图标和文字，不能只依靠颜色传达结果。
+- 滚动列表不截断键盘焦点；聚焦到不可见的删除按钮时，浏览器应能将对应行带入
+  可见区域。
+
+## 7. 验收标准
+
+1. 尚未添加文件时，只显示大尺寸拖拽上传区与格式提示，不显示文件列表。
+2. 上传至少 1 个文件后，大尺寸上传区与格式提示不再显示；文件列表标题右侧显示
+   可继续选择多个文件的小型上传按钮。
+3. 上传 1 至 10 个文件时，所有文件在紧凑列表中直接可见，每行均可单独删除。
+4. 上传超过 10 个文件时，列表一次只渲染当前 10 条，分页器可切换其他文件页；
+   页面高度不随总文件数继续增长。
+5. 新增文件后自动显示最后一页；删除造成当前页没有文件时，自动回到有效页。
+6. 每一行均展示文件名、大小、可选条目数、校验状态和删除操作。
+7. 长文件名不会挤压删除按钮，且悬停时可获取完整名称。
+8. 处理类型切换、格式限制、首次上传、继续上传和删除事件的现有行为不变。
+9. 常用桌面宽度和窄屏下均无横向溢出，删除操作保持可访问。

docs/superpowers/specs/2026-07-10-training-log-detail-redesign.md

@@ -0,0 +1,68 @@
+# 训练日志详情页双栏改版设计
+
+**日期**：2026-07-10  
+**页面**：`frontend/src/views/system/TrainingLogView.vue`  
+**视觉基准**：用户选定的第 2 套方案（双栏任务档案型）  
+**视觉稿**：`docs/superpowers/specs/assets/training-log-detail-option-2.png`
+
+## 目标
+
+把当前多组带边框 `el-descriptions` 表格改成更易扫描的任务档案页：左侧聚合任务信息与数据集，右侧集中展示运行概况，下方用轻量折叠区呈现训练参数。数据请求、日志刷新、训练曲线和原始日志行为保持不变。
+
+## 选定布局
+
+1. 页面顶部保留任务名与状态，并增加任务类型、创建时间等辅助上下文。
+2. 首屏主体使用 `2fr / 0.9fr` 双栏：
+   - 左栏依次为“任务信息”和“训练数据集”；
+   - 右栏为“运行概况”，集中展示时间、时长、存储、训练方式和训练方法。
+3. 数据集名称与描述优先，条数和大小放入同一条浅色指标带。
+4. 训练参数与 LoRA 参数使用同一卡片内的两个分组；标签和值采用轻分隔行，不再使用描边表格。
+5. 缺失值统一显示“未配置”，输出模型缺失显示“暂未生成”，避免大量孤立的 `-`。
+
+## 视觉规则
+
+- 应用外壳使用 `--app-shell-bg: #f3f5f8`，灰色只作为页面四周的留白背景。
+- 每个业务路由统一渲染在 `--app-page-bg: #ffffff` 的白色圆角页面画布中，所有页面内容都基于这层白底布局。
+- 页面内部白色内容表面继续使用 `--app-surface-bg: #ffffff`；当路由根节点本身是 `PageCard` 时，移除其额外阴影和外边距，避免白底里再套一张重复大卡片。
+- 沿用项目现有 Indigo `#4f46e5`、Slate 灰阶和成功色 `#10b981`。
+- 一级卡片使用现有 `PageCard` 和 12px 实际圆角；内部块使用 8px 圆角。
+- 仅使用 `#e2e8f0` / `#f1f5f9` 轻分隔，不新增阴影层级和渐变。
+- 标题 18px/600，分组标题 16px/600，正文值 14px，辅助标签 12–13px。
+- 图标继续使用项目现有 Font Awesome 4，避免引入依赖或扩大本次改造范围。
+
+## 交互与响应式
+
+- 参数折叠头改为原生 `button`，提供 `aria-expanded`、可见焦点和至少 44px 点击高度。
+- 宽屏为双栏；`<= 1100px` 改为单栏；参数明细在窄屏下降为单列。
+- 保持 5 秒自动刷新、图表、汇总和原始日志逻辑不变。
+
+## 范围
+
+### 修改
+
+- `frontend/src/views/system/TrainingLogView.vue`
+- `frontend/src/layouts/MainLayout.vue`
+- `frontend/src/styles/index.scss`
+- `frontend/package.json`
+- `frontend/scripts/regression-training-log-layout.mjs`
+- `frontend/scripts/regression-page-surface.mjs`
+
+### 不修改
+
+- API、Pinia、类型定义、路由和 mock 数据。
+- 全局 `PageCard.vue`。
+- 训练曲线、训练汇总和日志输出的业务逻辑。
+
+## 验收标准
+
+- 首屏不再使用带边框的详情表格表达任务、数据集和训练参数。
+- 双栏信息架构与选定视觉稿一致，缺失值文案可读。
+- 参数折叠支持鼠标、键盘和辅助技术。
+- 1100px 以下无双栏挤压或横向滚动。
+- 两个专项回归脚本与 `npx vite build` 通过。
+- `npm run type-check` / `npm run build` 使用项目引用模式执行；当前仓库原有的 mock 与微调页面类型错误需如实记录，且本次改动文件不得出现在错误列表中。
+
+## 风险
+
+- 生成视觉稿只覆盖首屏，图表区继续沿用现状；实现以首屏信息架构为高保真目标。
+- 项目目录没有 Git 元数据，无法提交设计文档或代码提交；所有变更保持小范围、可直接审阅。