YG_FT/docs/superpowers/plans/2026-07-10-route-transition.md

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: 写入最小实现

将：

<transition name="fade" mode="out-in">
  <component :is="Component" />
</transition>

改为：

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