129 lines
5.5 KiB
Markdown
129 lines
5.5 KiB
Markdown
# 训练日志详情页双栏改版 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 暴露测试命令**
|
||
|
||
```json
|
||
"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: 最终验证**
|
||
|
||
重新运行专项回归、类型检查和构建，并记录实际结果。
|