# 页面表面分类设计

## 目标

修正主布局无条件套用白色页面画布的问题，使页面层级符合以下规则：

- 列表页已经拥有自己的白色卡片，因此直接放在灰色应用背景上。
- 表单页、详情页和对话页继续使用统一的白色圆角页面画布。
- 页面分类由路由显式声明，避免依赖路径字符串或 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` 取消白底、内边距、圆角和阴影。
- 浏览器分别检查一个列表页和一个详情页。