# 训练日志详情页双栏改版 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: 最终验证**

重新运行专项回归、类型检查和构建，并记录实际结果。
