# 二级页面路由转场设计 ## 目标 消除列表页进入新建、详情、编辑等二级页面时的透明闪烁,使路由内容与页面表面模式在同一帧完成切换。 ## 根因 `MainLayout.vue` 使用 `transition name="fade" mode="out-in"`。路由变化时, `route.meta.pageSurface` 会立即切换外层画布模式,但旧页面仍执行 150ms 的离场淡出, 因此旧列表会短暂显示在新页面的白色画布中并处于半透明状态。 ## 已选方案 移除主布局的页面级 `transition` 和对应 `.fade-*` 样式,让 `router-view` 组件立即替换。 列表、详情、新建和编辑页面的表面模式将与内容同步切换。 保留组件内部动效,包括弹窗、折叠、按钮状态、批量操作栏等局部交互动画。 ## 验收标准 1. `MainLayout.vue` 不再使用页面级 ``。 2. 主布局不再包含 `.fade-enter-*` 或 `.fade-leave-*` 透明度规则。 3. 列表进入新建、列表进入训练日志、二级页面返回列表时,不出现旧页面半透明中间帧。 4. 页面表面分类和根 `PageCard` 扁平化逻辑保持不变。 5. 页面无水平溢出,控制台无新增错误。