feat: 全局加载 loading-page

src/App.vue

@@ -4,6 +4,14 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup lang="ts">
+import { loadingPage } from "@/utils/loading-page";
+
+loadingPage.start();
+
+onMounted(() => {
+  loadingPage.done(200);
+});
+</script>
 
 <style lang="scss" scoped></style>

src/layout/index.vue

@@ -7,11 +7,17 @@
 </template>
 
 <script setup lang="ts">
+import { loadingPage } from "@/utils/loading-page";
 // 引入组件-异步组件
 const layouts = {
   defaults: defineAsyncComponent(() => import("@/layout/layout-defaults/index.vue")),
   mixing: defineAsyncComponent(() => import("@/layout/layout-mixing/index.vue"))
 };
+
+onMounted(() => {
+  // 页面渲染完毕，结束loading
+  loadingPage.done(200);
+});
 </script>
 
 <style lang="scss" scoped></style>

src/router/route-output.ts

@@ -6,6 +6,7 @@ import { useUserInfoStore } from "@/store/modules/user-info";
 import { useRoutesListStore } from "@/store/modules/route-list";
 import { deepClone, arrayFlattened } from "@/utils/index";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
+import { loadingPage } from "@/utils/loading-page";
 
 /**
  * 初始化
@@ -14,6 +15,8 @@ import { useRoutingMethod } from "@/hooks/useRoutingMethod";
  * 3、设置完整的路由，顶层路由 + 一维路由数组，addRoute动态添加路由，KeepAlive支持二级路由缓存
  */
 export async function initSetRouter() {
+  // 初始化路由，渲染loading
+  loadingPage.start();
   const store = useRoutesListStore(pinia);
   // 根据角色权限过滤树
   let filteredTree = filterByRole(dynamicRoutes[0].children);

src/style/index.scss

@@ -1,25 +1,26 @@
-@import "./global-theme.scss";
-@import "./global-transition.scss";
-@import "./global-style.scss";
-* {
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body,
-#app {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-}
-
-html {
-  font-size: 14px;
-}
-
-#app {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
+@import "./global-theme.scss";
+@import "./global-transition.scss";
+@import "./global-style.scss";
+@import "./loading-page.scss";
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+html {
+  font-size: 14px;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}

src/style/loading-page.scss

@@ -0,0 +1,50 @@
+.loading-page {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+/* HTML: <div class="dc-loader"></div> */
+.dc-loader {
+  width: 45px;
+  aspect-ratio: 1;
+  --c: no-repeat linear-gradient(rgb(var(--primary-6)) 0 0);
+  background:
+    var(--c) 0% 50%,
+    var(--c) 50% 50%,
+    var(--c) 100% 50%;
+  background-size: 20% 100%;
+  animation: l1 1s infinite linear;
+}
+@keyframes l1 {
+  0% {
+    background-size:
+      20% 100%,
+      20% 100%,
+      20% 100%;
+  }
+  33% {
+    background-size:
+      20% 10%,
+      20% 100%,
+      20% 100%;
+  }
+  50% {
+    background-size:
+      20% 100%,
+      20% 10%,
+      20% 100%;
+  }
+  66% {
+    background-size:
+      20% 100%,
+      20% 100%,
+      20% 10%;
+  }
+  100% {
+    background-size:
+      20% 100%,
+      20% 100%,
+      20% 100%;
+  }
+}

src/utils/loading-page.ts

@@ -0,0 +1,29 @@
+/**
+ * 全局加载 loading-page
+ * @method start 创建 loading
+ * @method done 移除 loading
+ */
+export const loadingPage = {
+  // 开始渲染loading
+  start: () => {
+    // 获取顶层body
+    // 将新创建的dc-loader元素（div）插入到body元素的子元素列表中的指定位置（在指定元素之前）
+    // 插入的位置是作为body元素的第一个子元素，即页面的最顶部位置
+    const bodyDom: Element = document.body;
+    const div = document.createElement("div");
+    div.className = "loading-page";
+    const loader = document.createElement("div");
+    loader.className = "dc-loader";
+    div.appendChild(loader);
+    bodyDom.insertBefore(div, bodyDom.firstChild);
+  },
+  // 结束渲染loading
+  done: (time: number = 0) => {
+    setTimeout(() => {
+      // 找到第一个匹配对象
+      // 找到loading-page的父节点，移除loading-page
+      const dom = document.querySelector(".loading-page");
+      dom?.parentNode?.removeChild(dom);
+    }, time);
+  }
+};