79 lines
2.5 KiB
Markdown
79 lines
2.5 KiB
Markdown
|
# Route Transition Removal 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:** `router-view` 直接渲染当前路由组件，不再包裹 Vue `transition`。页面表面仍由 `route.meta.pageSurface` 控制，因此内容和表面在同一轮渲染中同步更新。
|
|||
|
|
|
|||
|
|
**Tech Stack:** Vue 3、Vue Router 4、SCSS、Node.js 回归脚本
|
|||
|
|
|
|||
|
|
## Global Constraints
|
|||
|
|
|
|||
|
|
- 删除页面级透明度转场。
|
|||
|
|
- 保留组件内部动画。
|
|||
|
|
- 不改变路由表面分类、业务逻辑或数据加载流程。
|
|||
|
|
- 先写失败测试，再实现最小修复。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### Task 1: 移除主布局页面级透明转场
|
|||
|
|
|
|||
|
|
**Files:**
|
|||
|
|
- Modify: `frontend/scripts/regression-page-surface.mjs`
|
|||
|
|
- Modify: `frontend/src/layouts/MainLayout.vue`
|
|||
|
|
- Test: `frontend/scripts/regression-page-surface.mjs`
|
|||
|
|
|
|||
|
|
**Interfaces:**
|
|||
|
|
- Consumes: `router-view` 提供的当前路由组件。
|
|||
|
|
- Produces: 不带页面级透明度动画的同步路由内容渲染。
|
|||
|
|
|
|||
|
|
- [ ] **Step 1: 写入失败回归测试**
|
|||
|
|
|
|||
|
|
在 `regression-page-surface.mjs` 中断言主布局模板不包含页面级 `transition`，并断言主布局样式不包含 `.fade-enter-*` 或 `.fade-leave-*`。
|
|||
|
|
|
|||
|
|
- [ ] **Step 2: 运行测试并确认 RED**
|
|||
|
|
|
|||
|
|
Run: `npm run test:page-surface`
|
|||
|
|
|
|||
|
|
Expected: FAIL，提示主布局仍包含页面级透明转场。
|
|||
|
|
|
|||
|
|
- [ ] **Step 3: 写入最小实现**
|
|||
|
|
|
|||
|
|
将：
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<transition name="fade" mode="out-in">
|
|||
|
|
<component :is="Component" />
|
|||
|
|
</transition>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
改为：
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<component :is="Component" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
并删除主布局中的 `.fade-enter-active`、`.fade-leave-active`、`.fade-enter-from` 和 `.fade-leave-to` 样式。
|
|||
|
|
|
|||
|
|
- [ ] **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: exit code 0；允许项目既有字体解析和 chunk size 警告。
|
|||
|
|
|
|||
|
|
- [ ] **Step 6: 浏览器往返验证**
|
|||
|
|
|
|||
|
|
验证 `/fine-tune` → `/fine-tune/create`、`/fine-tune` → `/training-log/1` 以及二级页返回列表；页面内容与表面同步切换，无半透明旧页面、无水平溢出、无新增控制台错误。
|
|||
|
|
|