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