YG_FT/docs/superpowers/specs/2026-07-10-page-surface-classification-design.md

页面表面分类设计

目标

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

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