69 lines
3.6 KiB
Markdown
69 lines
3.6 KiB
Markdown
# 训练日志详情页双栏改版设计
|
||
|
||
**日期**：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 元数据，无法提交设计文档或代码提交；所有变更保持小范围、可直接审阅。
|