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() 和动态类；断言状态样式为：

.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: 写入最小实现

在六个列表路由中加入：

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

在 MainLayout.vue 中使用：

const route = useRoute()

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

2.9 KiB Raw Permalink Blame History Unescape Escape

Page Surface Classification Implementation Plan

Global Constraints

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

2.9 KiB

Raw Permalink Blame History