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