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