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

2.5 KiB Raw Blame History Unescape Escape

Route Transition Removal Implementation Plan

Global Constraints

Task 1: 移除主布局页面级透明转场

2.5 KiB

Raw Blame History