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

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

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