# 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` 以及二级页返回列表；页面内容与表面同步切换，无半透明旧页面、无水平溢出、无新增控制台错误。

