From 97a97d880499c3a4cc5543e6fdd08c8aaf87464d Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Mon, 9 Sep 2024 10:19:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=A8=E5=B1=80loading?=
 =?UTF-8?q?=E6=B6=88=E5=A4=B1=E6=97=B6=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/index.vue |  2 +-
 src/router/index.ts   |  5 ++++
 src/types/shims.d.ts  |  7 +++++
 vite/plugins.ts       | 64 +++++++++++++++++++++++++------------------
 4 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index a6778a22..cb75bdd3 100755
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -112,7 +112,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
           <Topbar />
           <div class="main">
             <RouterView v-slot="{ Component, route }">
-              <Transition name="slide-right" mode="out-in" appear>
+              <Transition name="slide-right" mode="out-in">
                 <KeepAlive :include="keepAliveStore.list">
                   <component :is="Component" v-show="!isLink" :key="route.fullPath" />
                 </KeepAlive>
diff --git a/src/router/index.ts b/src/router/index.ts
index b192ffad..e9533c56 100755
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+import { loadingFadeOut } from 'virtual:app-loading'
 import setupGuards from './guards'
 
 // 路由相关数据
@@ -13,4 +14,8 @@ const router = createRouter({
 
 setupGuards(router)
 
+router.isReady().then(() => {
+  loadingFadeOut()
+})
+
 export default router
diff --git a/src/types/shims.d.ts b/src/types/shims.d.ts
index 34ac4eec..bb19da7f 100755
--- a/src/types/shims.d.ts
+++ b/src/types/shims.d.ts
@@ -3,6 +3,13 @@ declare interface Window {
   mozDevicePixelRatio: any
 }
 
+declare module 'virtual:app-loading' {
+  const loadingFadeOut: () => void
+  export {
+    loadingFadeOut,
+  }
+}
+
 declare const __SYSTEM_INFO__: {
   pkg: {
     dependencies: Recordable<string>
diff --git a/vite/plugins.ts b/vite/plugins.ts
index afdfacb3..428e4b4e 100644
--- a/vite/plugins.ts
+++ b/vite/plugins.ts
@@ -124,34 +124,44 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
       }
     })(),
 
-    {
-      name: 'vite-plugin-loading',
-      enforce: 'pre',
-      transformIndexHtml: {
-        handler: async html => html.replace(/<\/body>/, `${
-          `<div data-app-loading>${await fs.readFileSync(path.resolve(process.cwd(), 'loading.html'), 'utf8')}</div>`
-        }</body>`),
-        order: 'pre',
-      },
-      transform: (code, id) => {
-        if (/src\/main.ts$/.test(id)) {
-          code = code.concat(`
-            const loadingEl = document.querySelector('[data-app-loading]')
-            if (loadingEl) {
-              loadingEl.style['pointer-events'] = 'none'
-              loadingEl.style.visibility = 'hidden'
-              loadingEl.style.opacity = 0
-              loadingEl.style.transition = 'all 0.5s ease-out'
-              loadingEl.addEventListener('transitionend', () => loadingEl.remove(), { once: true })
-            }
-          `)
-          return {
-            code,
-            map: null,
+    (function () {
+      const virtualModuleId = 'virtual:app-loading'
+      const resolvedVirtualModuleId = `\0${virtualModuleId}`
+      return {
+        name: 'vite-plugin-loading',
+        resolveId(id) {
+          if (id === virtualModuleId) {
+            return resolvedVirtualModuleId
           }
-        }
-      },
-    },
+        },
+        load(id) {
+          if (id === resolvedVirtualModuleId) {
+            return {
+              code: `
+                export function loadingFadeOut() {
+                  const loadingEl = document.querySelector('[data-app-loading]')
+                  if (loadingEl) {
+                    loadingEl.style['pointer-events'] = 'none'
+                    loadingEl.style.visibility = 'hidden'
+                    loadingEl.style.opacity = 0
+                    loadingEl.style.transition = 'all 0.5s ease-out'
+                    loadingEl.addEventListener('transitionend', () => loadingEl.remove(), { once: true })
+                  }
+                }
+              `,
+              map: null,
+            }
+          }
+        },
+        enforce: 'pre',
+        transformIndexHtml: {
+          handler: async html => html.replace(/<\/body>/, `${
+            `<div data-app-loading>${await fs.readFileSync(path.resolve(process.cwd(), 'loading.html'), 'utf8')}</div>`
+          }</body>`),
+          order: 'pre',
+        },
+      }
+    })(),
 
     // https://github.com/unplugin/unplugin-turbo-console
     TurboConsole(),