54 lines
2.3 KiB
Markdown
54 lines
2.3 KiB
Markdown
# 页面表面分类设计
|
||
|
||
## 目标
|
||
|
||
修正主布局无条件套用白色页面画布的问题，使页面层级符合以下规则：
|
||
|
||
- 列表页已经拥有自己的白色卡片，因此直接放在灰色应用背景上。
|
||
- 表单页、详情页和对话页继续使用统一的白色圆角页面画布。
|
||
- 页面分类由路由显式声明，避免依赖路径字符串或 DOM 结构猜测。
|
||
|
||
## 根因
|
||
|
||
`MainLayout.vue` 当前无条件为所有子路由渲染 `.page-canvas`。同时，列表页通过
|
||
`DataTablePage`、`.eval-card-container` 或 `.manage-card-container` 自带白色卡片，
|
||
因此形成“灰色外层 → 白色页面画布 → 白色列表卡片”的重复层级。
|
||
|
||
## 设计
|
||
|
||
在列表路由的 `meta` 中增加 `pageSurface: 'self'`：
|
||
|
||
- `/fine-tune`
|
||
- `/model-eval`
|
||
- `/model-inference`
|
||
- `/model-manage`
|
||
- `/data-process`
|
||
- `/dataset`
|
||
|
||
其他路由保持默认行为，不需要逐项声明，仍由主布局提供白色页面画布。
|
||
|
||
`MainLayout.vue` 根据 `route.meta.pageSurface` 给 `.page-canvas` 添加
|
||
`.is-self-surface` 状态类。该状态仅取消外层画布的白色背景、圆角、阴影和内边距，
|
||
保留列表页自身的卡片样式。
|
||
|
||
对于默认白色画布页面，如果路由直接输出 `PageCard`，可直接扁平化；如果由页面
|
||
根容器包裹主 `PageCard`，根容器必须显式声明 `.page-card-host`。只有这两类主卡片
|
||
改为透明、无圆角、无阴影，内部业务卡片不受影响，避免创建页出现“白色画布再套
|
||
白色卡片”，同时不误伤训练日志的参数卡片。
|
||
|
||
## 验收标准
|
||
|
||
1. 六个列表路由只显示自身的一层白色卡片，外部可见灰色页面背景。
|
||
2. `/training-log/:id`、创建页、编辑页等仍显示白色圆角页面画布。
|
||
3. 不根据 URL 文本或 DOM 自动判断页面类型。
|
||
4. 不改变列表、表单和详情页现有业务逻辑。
|
||
5. 桌面宽度下不产生水平滚动。
|
||
6. 创建训练任务等表单页只显示一层白色画布，根 `PageCard` 不形成第二层表面。
|
||
|
||
## 测试策略
|
||
|
||
- 静态回归脚本验证六个列表路由都声明 `pageSurface: 'self'`。
|
||
- 静态回归脚本验证 `MainLayout` 根据路由 meta 设置状态类。
|
||
- 静态回归脚本验证 `.is-self-surface` 取消白底、内边距、圆角和阴影。
|
||
- 浏览器分别检查一个列表页和一个详情页。
|