# 训练日志详情页双栏改版设计

**日期**：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 元数据，无法提交设计文档或代码提交；所有变更保持小范围、可直接审阅。