5.5 KiB
训练日志详情页双栏改版 Implementation Plan
For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: 将训练日志详情首屏改造成用户选定的双栏任务档案布局，同时保持原有数据与日志行为。
Architecture: 继续由 TrainingLogView.vue 负责数据加载与页面编排，仅重写首屏模板和 scoped SCSS。使用原生语义元素与 CSS Grid，不新增依赖或全局组件，避免影响其他详情页。
Tech Stack: Vue 3、TypeScript、Element Plus、SCSS、Node.js 原生断言脚本
Global Constraints
- 保留所有 API 请求、5 秒轮询、指标解析、ECharts 和日志输出逻辑。
- 使用现有 Indigo/Slate 视觉 token，不改全局主题。
- 灰色
#f3f5f8只作为应用外壳留白；所有业务路由必须渲染在统一的白色圆角页面画布内。 - 缺失参数显示“未配置”，缺失输出模型显示“暂未生成”。
<= 1100px主体改单栏，折叠按钮具备aria-expanded。- 不新增依赖。
Task 1: 锁定布局与可访问性回归
Files:
- Create:
frontend/scripts/regression-training-log-layout.mjs - Modify:
frontend/package.json - Test:
frontend/scripts/regression-training-log-layout.mjs
Interfaces:
-
Consumes:
frontend/src/views/system/TrainingLogView.vue源文件。 -
Produces:
npm run test:training-log-layout专项回归命令。 -
Step 1: 写入失败测试
测试必须断言：双栏容器、任务/数据集/运行概况分组、语义化参数折叠按钮、aria-expanded、缺失值文案和 1100px 响应式断点存在；首屏旧 el-descriptions 结构已移除。
- Step 2: 运行并确认 RED
Run: cd frontend && npm run test:training-log-layout
Expected: FAIL，提示缺少 .overview-layout 等新结构。
- Step 3: 在 package scripts 暴露测试命令
"test:training-log-layout": "node scripts/regression-training-log-layout.mjs"
Task 2: 实现双栏任务档案首屏
Files:
- Modify:
frontend/src/views/system/TrainingLogView.vue - Test:
frontend/scripts/regression-training-log-layout.mjs
Interfaces:
-
Consumes: 现有
task、dataset、modelsStore、枚举映射与paramsExpanded。 -
Produces:
.overview-layout、.profile-section、.runtime-panel、.parameter-groups和语义化.params-toggle-button。 -
Step 1: 重写任务与数据集模板
使用一个顶层 PageCard 承载任务头和双栏内容；左栏用定义列表表达任务信息，数据集使用名称/类型/描述加指标带；右栏使用纵向运行概况项。
- Step 2: 重写参数分组模板
训练参数和 LoRA 参数改为双列轻分隔行，所有缺失值用 未配置，折叠按钮绑定 :aria-expanded="paramsExpanded"。
- Step 3: 实现视觉与响应式 SCSS
添加双栏、信息行、指标带、焦点态和 @media (max-width: 1100px) / 700px 规则；不修改全局样式。
- Step 4: 运行并确认 GREEN
Run: cd frontend && npm run test:training-log-layout
Expected: PASS，输出“训练日志详情布局回归检查通过”。
Task 2.5: 统一页面背景与内容表面
Files:
-
Modify:
frontend/src/styles/index.scss -
Modify:
frontend/src/layouts/MainLayout.vue -
Modify:
frontend/src/views/system/TrainingLogView.vue -
Create:
frontend/scripts/regression-page-surface.mjs -
Step 1: 先写并运行背景层回归检查
Run: cd frontend && npm run test:page-surface
Expected: 首次 FAIL，提示缺少 --app-shell-bg 和全局 .page-canvas。
- Step 2: 添加全局背景与表面 token
定义灰色外壳 --app-shell-bg: #f3f5f8、白色页面画布 --app-page-bg: #ffffff 和白色内容表面 --app-surface-bg: #ffffff。在 MainLayout 中用 .page-canvas 包裹所有业务路由，并消除直接根 PageCard 的重复阴影。
- Step 3: 运行并确认 GREEN
Run: cd frontend && npm run test:page-surface
Expected: PASS，输出“全局页面背景与内容表面回归检查通过”。
Task 3: 类型、构建与视觉 QA
Files:
- Create:
design-qa.md - Modify:
frontend/src/views/system/TrainingLogView.vue（仅在 QA 发现 P0/P1/P2 时）
Interfaces:
-
Consumes: 选定视觉稿、浏览器渲染截图。
-
Produces: 通过的类型检查、生产构建和
design-qa.md。 -
Step 1: 静态验证
Run: cd frontend && npm run type-check
Expected: 项目引用模式能检查真实源码；若仓库原有错误仍存在，输出中不得包含本次修改的训练日志页、布局或全局样式。
Run: cd frontend && npx vite build
Expected: exit 0。
Run: cd frontend && npm run build
Expected: 在类型检查修复前仍会被仓库原有错误阻断，必须记录实际错误文件。
- Step 2: 启动并检查页面
启动 Vite，打开 /login，使用 mock 账号进入 /training-log/1，在 1440px 宽视口检查双栏、折叠交互和控制台错误。
- Step 3: 执行 Design QA
将选定视觉稿与实现截图放在同一比较输入中，检查字体、间距、颜色、图标、文案和交互；修复所有 P0/P1/P2 后更新 design-qa.md 为 final result: passed。
- Step 4: 最终验证
重新运行专项回归、类型检查和构建，并记录实际结果。