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