fix(布局): 去掉 AppMain 的 transition，修复切页偶发整片空白

tuqin

2026-10-29 04693704fc6590966fe4ef9bada4186f3ea79169

fix(布局): 去掉 AppMain 的 transition，修复切页偶发整片空白

现象：点任意菜单时不时整片空白，刷新能显示一次，再切又一个空白；Network 无失败请求，
Console 无 JS 错误。

根因：AppMain.vue 里 <transition name="fade-transform" mode="out-in"> 包着 <keep-alive>，
Vue 3 下 out-in 模式要等旧组件退场动画结束才挂载新组件，与 keep-alive 的缓存复用
时序冲突，新组件偶发挂不上。本次给页面加了较多内容（systemConfig 440->590 行、
sampleManagement 540->743 行），组件初始化变慢，更容易撞上这个时序问题。

改法：去掉 transition 转场，保留 keep-alive（页面状态仍缓存）。稳定性优先于切页动画。
已验证构建产物中 fade-transform 引用为 0。

 src/layout/components/AppMain.vue

@@ -1,11 +1,17 @@
<template>

  <section class="app-main">

    <router-view v-slot="{ Component, route }">

      <transition name="fade-transform" mode="out-in">

        <keep-alive :include="tagsViewStore.cachedViews">

          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>

        </keep-alive>

      </transition>

      <!--

        原来这里包了一层 <transition name="fade-transform" mode="out-in">。

        Vue 3 下 transition 的 out-in 模式与 keep-alive 组合有已知缺陷：

        切页时旧组件先退场、新组件再挂载，若 keep-alive 命中缓存，

        退场动画与挂载时序会冲突，新组件偶发挂不上，表现为整片空白，

        刷新一次能恢复但再切一次又空白。

        这里去掉转场动画，保留 keep-alive（页面状态仍然缓存），稳定性优先。

      -->

      <keep-alive :include="tagsViewStore.cachedViews">

        <component v-if="!route.meta.link" :is="Component" :key="route.path"/>

      </keep-alive>

    </router-view>

    <iframe-toggle />

  </section>