第一次提交

docs/superpowers/plans/2026-07-10-page-surface-classification.md

@@ -0,0 +1,94 @@
+# 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`，确认白色圆角页面画布仍存在。两个页面均不得水平溢出，控制台不得新增错误。