JS-Encoder · Longgererer · May 21, 2024 · May 21, 2024
diff --git a/src/App.vue b/src/App.vue
@@ -1,14 +1,17 @@
 <template>
-  <router-view v-slot="{ Component }">
-    <transition name="fade">
-      <component :is="Component" />
-    </transition>
-  </router-view>
+  <router-view></router-view>
+  <screen-loading v-if="pageLoading"></screen-loading>
 </template>
 
 <script setup lang="ts">
 import { DBService } from "@utils/services/indexed-db-service"
 import { dbConfig } from "@utils/config/indexed-db"
+import ScreenLoading from "@views/components/screen-loading/screen-loading.vue"
+import { useCommonStore } from "@store/common"
+import { storeToRefs } from "pinia"
+
+const commonStore = useCommonStore()
+const { pageLoading } = storeToRefs(commonStore)
 
 // 连接数据库
 new DBService(dbConfig).init()

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,9 +1,26 @@
 import { createRouter, createWebHistory } from "vue-router"
 import Home from "@/views/home/home.vue"
+import { useCommonStore } from "@store/common"
+
+const modules = import.meta.glob("@/views/**/*.vue")
+const lazyLoad = (componentPath: string) => {
+  const DELAY = 300
+  return () => new Promise((resolve, reject) => {
+    const { updatePageLoading } = useCommonStore()
+    const timer = setTimeout(() => {
+      updatePageLoading(true)
+    }, DELAY)
+    modules[`/src/views/${componentPath}.vue`]().then((component) => {
+      clearTimeout(timer)
+      updatePageLoading(false)
+      resolve(component)
+    })
+  })
+}
 
 const routes = [
   { path: "/", component: Home },
-  { path: "/code", component: () => import("@/views/instance/instance.vue") },
+  { path: "/code", component: lazyLoad("instance/instance") },
 ]
 
 const router = createRouter({

diff --git a/src/store/common.ts b/src/store/common.ts
@@ -5,13 +5,15 @@ interface ICommonStore {
   /** 显示的modal名称 */
   displayModal: ModalName | null,
   theme: Theme,
+  pageLoading: boolean,
 }
 
 export const useCommonStore = defineStore("common", {
   state: (): ICommonStore => {
     return {
       displayModal: null,
       theme: Theme.DARK,
+      pageLoading: false,
     }
   },
   actions: {
@@ -21,5 +23,8 @@ export const useCommonStore = defineStore("common", {
     updateTheme(theme: Theme): void {
       this.theme = theme
     },
+    updatePageLoading(state: boolean): void {
+      this.pageLoading = state
+    },
   },
 })
diff --git a/src/views/components/screen-loading/screen-loading.vue b/src/views/components/screen-loading/screen-loading.vue
@@ -0,0 +1,37 @@
+<template>
+  <teleport to="body">
+    <div class="page-loading fixed pos-origin bg-main3 flex-center">
+      <div class="loading flex-center">
+        <img style="width:48px;height:48px" src="../../../assets/images/logo.svg" alt="logo" />
+        <span class="logo-text code-font fw-bold ml-s primary1-text" title="JS-Encoder">JS-Encoder</span>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.page-loading {
+  width: 100vw;
+  height: 100vh;
+  .loading {
+    animation: shinning 3s ease infinite;
+    .logo-text {
+      font-size: 48px;
+    }
+  }
+}
+
+@keyframes shinning {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/views/home/home.vue b/src/views/home/home.vue
@@ -115,7 +115,6 @@ const handleJumpToInstance = (): void => {
   router.push("/code")
 }
 
-
 onMounted(() => {
   startTypewrite()
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -115,7 +115,6 @@ const handleJumpToInstance = (): void => { @@
       router.push("/code")
     }
     onMounted(() => {
       startTypewrite()
     })
@@ Expand Down @@