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