20260819101952

code/fms/fms-vue/src/main.js

@@ -6,6 +6,8 @@ import './styles/demo.css'
 import App from './App.vue'
 import router from './router'
 import { initThemeSync } from './stores/app'
+import { useAuthStore } from '@/stores/auth'
+import { usePermissionStore } from '@/stores/permissions'
 
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
@@ -37,7 +39,35 @@ function showBootstrapError(error) {
 async function bootstrap() {
   try {
     await router.isReady()
+
+    // 登录态下，首屏需要先准备好菜单/权限数据再挂载布局，
+    // 否则挂载后菜单异步到达会“跳出”（对齐 cool-admin：菜单加载放在 mount 之前）
+    const authStore = useAuthStore()
+    if (authStore.isAuthenticated) {
+      const permissionStore = usePermissionStore()
+      await permissionStore.load().catch(() => {})
+    }
+
+    // 先把 boot 屏移出 #app，避免被 mount 整体替换而瞬间消失（那样没有过渡且会卡顿）
+    const boot = document.querySelector('#app-boot')
+    if (boot) document.body.appendChild(boot)
+
+    // 数据已就绪，挂载路由首屏（布局含完整菜单将一次性渲染出来）
     app.mount('#app')
+
+    // 下一帧启动 boot 屏的 opacity 淡出（合成属性，由 compositor 驱动，不被下方渲染阻塞）。
+    // 此时菜单已在布局中就位，淡出过程中直接露出完整页面，不会“跳出”。
+    requestAnimationFrame(() => {
+      if (boot) boot.classList.add('app-boot--hide')
+    })
+
+    if (boot) {
+      boot.addEventListener('transitionend', () => boot.remove(), { once: true })
+      // 兜底：防止 transitionend 未触发导致节点残留
+      setTimeout(() => {
+        if (boot.isConnected) boot.remove()
+      }, 600)
+    }
   } catch (error) {
     showBootstrapError(error)
   }