Files

caoxiaozhu acdad260d7 docs: 添加设计文档与视觉走查记录

视觉走查记录、设计方案规格（specs）、实施计划（plans）及配套截图资产，覆盖路由过渡、页面表层级、数据处理向导、训练日志重设计等改进项。

2026-07-10 16:47:29 +08:00

3.6 KiB

Raw Blame History

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

日期：2026-07-10
页面：frontend/src/views/system/TrainingLogView.vue
视觉基准：用户选定的第 2 套方案（双栏任务档案型）
视觉稿：docs/superpowers/specs/assets/training-log-detail-option-2.png

目标

把当前多组带边框 el-descriptions 表格改成更易扫描的任务档案页：左侧聚合任务信息与数据集，右侧集中展示运行概况，下方用轻量折叠区呈现训练参数。数据请求、日志刷新、训练曲线和原始日志行为保持不变。

选定布局

页面顶部保留任务名与状态，并增加任务类型、创建时间等辅助上下文。
首屏主体使用 2fr / 0.9fr 双栏：
- 左栏依次为“任务信息”和“训练数据集”；
- 右栏为“运行概况”，集中展示时间、时长、存储、训练方式和训练方法。
数据集名称与描述优先，条数和大小放入同一条浅色指标带。
训练参数与 LoRA 参数使用同一卡片内的两个分组；标签和值采用轻分隔行，不再使用描边表格。
缺失值统一显示“未配置”，输出模型缺失显示“暂未生成”，避免大量孤立的 -。

视觉规则

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

3.6 KiB Raw Blame History Unescape Escape