第一次提交

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