第一次提交

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

@@ -0,0 +1,128 @@
+# 训练日志详情页双栏改版 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:** 继续由 `TrainingLogView.vue` 负责数据加载与页面编排，仅重写首屏模板和 scoped SCSS。使用原生语义元素与 CSS Grid，不新增依赖或全局组件，避免影响其他详情页。
+
+**Tech Stack:** Vue 3、TypeScript、Element Plus、SCSS、Node.js 原生断言脚本
+
+## Global Constraints
+
+- 保留所有 API 请求、5 秒轮询、指标解析、ECharts 和日志输出逻辑。
+- 使用现有 Indigo/Slate 视觉 token，不改全局主题。
+- 灰色 `#f3f5f8` 只作为应用外壳留白；所有业务路由必须渲染在统一的白色圆角页面画布内。
+- 缺失参数显示“未配置”，缺失输出模型显示“暂未生成”。
+- `<= 1100px` 主体改单栏，折叠按钮具备 `aria-expanded`。
+- 不新增依赖。
+
+---
+
+### Task 1: 锁定布局与可访问性回归
+
+**Files:**
+- Create: `frontend/scripts/regression-training-log-layout.mjs`
+- Modify: `frontend/package.json`
+- Test: `frontend/scripts/regression-training-log-layout.mjs`
+
+**Interfaces:**
+- Consumes: `frontend/src/views/system/TrainingLogView.vue` 源文件。
+- Produces: `npm run test:training-log-layout` 专项回归命令。
+
+- [ ] **Step 1: 写入失败测试**
+
+测试必须断言：双栏容器、任务/数据集/运行概况分组、语义化参数折叠按钮、`aria-expanded`、缺失值文案和 `1100px` 响应式断点存在；首屏旧 `el-descriptions` 结构已移除。
+
+- [ ] **Step 2: 运行并确认 RED**
+
+Run: `cd frontend && npm run test:training-log-layout`  
+Expected: FAIL，提示缺少 `.overview-layout` 等新结构。
+
+- [ ] **Step 3: 在 package scripts 暴露测试命令**
+
+```json
+"test:training-log-layout": "node scripts/regression-training-log-layout.mjs"
+```
+
+### Task 2: 实现双栏任务档案首屏
+
+**Files:**
+- Modify: `frontend/src/views/system/TrainingLogView.vue`
+- Test: `frontend/scripts/regression-training-log-layout.mjs`
+
+**Interfaces:**
+- Consumes: 现有 `task`、`dataset`、`modelsStore`、枚举映射与 `paramsExpanded`。
+- Produces: `.overview-layout`、`.profile-section`、`.runtime-panel`、`.parameter-groups` 和语义化 `.params-toggle-button`。
+
+- [ ] **Step 1: 重写任务与数据集模板**
+
+使用一个顶层 `PageCard` 承载任务头和双栏内容；左栏用定义列表表达任务信息，数据集使用名称/类型/描述加指标带；右栏使用纵向运行概况项。
+
+- [ ] **Step 2: 重写参数分组模板**
+
+训练参数和 LoRA 参数改为双列轻分隔行，所有缺失值用 `未配置`，折叠按钮绑定 `:aria-expanded="paramsExpanded"`。
+
+- [ ] **Step 3: 实现视觉与响应式 SCSS**
+
+添加双栏、信息行、指标带、焦点态和 `@media (max-width: 1100px)` / `700px` 规则；不修改全局样式。
+
+- [ ] **Step 4: 运行并确认 GREEN**
+
+Run: `cd frontend && npm run test:training-log-layout`  
+Expected: PASS，输出“训练日志详情布局回归检查通过”。
+
+### Task 2.5: 统一页面背景与内容表面
+
+**Files:**
+- Modify: `frontend/src/styles/index.scss`
+- Modify: `frontend/src/layouts/MainLayout.vue`
+- Modify: `frontend/src/views/system/TrainingLogView.vue`
+- Create: `frontend/scripts/regression-page-surface.mjs`
+
+- [ ] **Step 1: 先写并运行背景层回归检查**
+
+Run: `cd frontend && npm run test:page-surface`  
+Expected: 首次 FAIL，提示缺少 `--app-shell-bg` 和全局 `.page-canvas`。
+
+- [ ] **Step 2: 添加全局背景与表面 token**
+
+定义灰色外壳 `--app-shell-bg: #f3f5f8`、白色页面画布 `--app-page-bg: #ffffff` 和白色内容表面 `--app-surface-bg: #ffffff`。在 `MainLayout` 中用 `.page-canvas` 包裹所有业务路由，并消除直接根 `PageCard` 的重复阴影。
+
+- [ ] **Step 3: 运行并确认 GREEN**
+
+Run: `cd frontend && npm run test:page-surface`  
+Expected: PASS，输出“全局页面背景与内容表面回归检查通过”。
+
+### Task 3: 类型、构建与视觉 QA
+
+**Files:**
+- Create: `design-qa.md`
+- Modify: `frontend/src/views/system/TrainingLogView.vue`（仅在 QA 发现 P0/P1/P2 时）
+
+**Interfaces:**
+- Consumes: 选定视觉稿、浏览器渲染截图。
+- Produces: 通过的类型检查、生产构建和 `design-qa.md`。
+
+- [ ] **Step 1: 静态验证**
+
+Run: `cd frontend && npm run type-check`  
+Expected: 项目引用模式能检查真实源码；若仓库原有错误仍存在，输出中不得包含本次修改的训练日志页、布局或全局样式。
+
+Run: `cd frontend && npx vite build`  
+Expected: exit 0。
+
+Run: `cd frontend && npm run build`  
+Expected: 在类型检查修复前仍会被仓库原有错误阻断，必须记录实际错误文件。
+
+- [ ] **Step 2: 启动并检查页面**
+
+启动 Vite，打开 `/login`，使用 mock 账号进入 `/training-log/1`，在 1440px 宽视口检查双栏、折叠交互和控制台错误。
+
+- [ ] **Step 3: 执行 Design QA**
+
+将选定视觉稿与实现截图放在同一比较输入中，检查字体、间距、颜色、图标、文案和交互；修复所有 P0/P1/P2 后更新 `design-qa.md` 为 `final result: passed`。
+
+- [ ] **Step 4: 最终验证**
+
+重新运行专项回归、类型检查和构建，并记录实际结果。