# Page Surface Classification 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:** 使用 Vue Router `meta.pageSurface` 做显式页面表面分类。主布局默认渲染白色画布，仅在 `pageSurface === 'self'` 时切换为透明、无内边距的承载容器。

**Tech Stack:** Vue 3、Vue Router 4、TypeScript、SCSS、Node.js 回归脚本

## Global Constraints

- 只给六个自带白色列表卡片的路由声明 `pageSurface: 'self'`。
- 其他路由默认继续使用白色页面画布。
- 不新增依赖，不修改业务逻辑。
- 先写失败测试，再实现最小修复。

---

### Task 1: 路由级页面表面分类

**Files:**
- Modify: `frontend/scripts/regression-page-surface.mjs`
- Modify: `frontend/src/router/index.ts`
- Modify: `frontend/src/layouts/MainLayout.vue`
- Test: `frontend/scripts/regression-page-surface.mjs`

**Interfaces:**
- Consumes: Vue Router 当前路由对象的 `route.meta.pageSurface`。
- Produces: `pageSurface: 'self'` 路由元数据和 `.page-canvas.is-self-surface` 布局状态。

- [ ] **Step 1: 写入失败回归测试**

在 `regression-page-surface.mjs` 中读取 `src/router/index.ts`，断言六个列表路由包含
`pageSurface: 'self'`；断言 `MainLayout` 使用 `useRoute()` 和动态类；断言状态样式为：

```scss
.page-canvas.is-self-surface {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
```

- [ ] **Step 2: 运行测试并确认 RED**

Run: `npm run test:page-surface`

Expected: FAIL，提示列表路由缺少 `pageSurface: 'self'` 或主布局缺少自表面状态。

- [ ] **Step 3: 写入最小实现**

在六个列表路由中加入：

```ts
meta: { title: '页面标题', pageSurface: 'self' },
```

在 `MainLayout.vue` 中使用：

```ts
const route = useRoute()
```

```vue
<div
  class="page-canvas"
  :class="{ 'is-self-surface': route.meta.pageSurface === 'self' }"
>
```

并加入透明承载容器样式。

- [ ] **Step 4: 运行专项测试并确认 GREEN**

Run: `npm run test:page-surface`

Expected: PASS，输出“全局页面背景与内容表面回归检查通过”。

- [ ] **Step 5: 运行相关回归与生产构建**

Run: `npm run test:training-log-layout`

Expected: PASS。

Run: `npx vite build`

Expected: build exit code 0；允许保留项目既有字体解析和 chunk size 警告。

- [ ] **Step 6: 浏览器视觉验证**

打开 `/fine-tune`，确认灰色背景上仅有列表自身白色卡片；打开
`/training-log/1`，确认白色圆角页面画布仍存在。两个页面均不得水平溢出，控制台不得新增错误。