refactor(projects): refactor app init loading [重构系统初始化的加载]

soybeanjs · Nov 16, 2022 · 57bfe27 · 57bfe27
1 parent fcc65c3
commit 57bfe27
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 149 deletions.
diff --git a/index.html b/index.html
@@ -3,25 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/resource/loading.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= appName %></title>
   </head>
   <body>
     <div id="app">
-      <div class="loading-container">
-        <div id="loadingLogo" class="loading-svg"></div>
-        <div class="loading-spin__container">
-          <div class="loading-spin">
-            <div class="left-0 top-0 loading-spin-item"></div>
-            <div class="left-0 bottom-0 loading-spin-item loading-delay-500"></div>
-            <div class="right-0 top-0 loading-spin-item loading-delay-1000"></div>
-            <div class="right-0 bottom-0 loading-spin-item loading-delay-1500"></div>
-          </div>
-        </div>
-        <div class="loading-title"><%= appTitle %></div>
-      </div>
-      <script src="/resource/loading.js"></script>
+      <div id="appLoading"></div>
     </div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/public/resource/loading.css b/public/resource/loading.css
diff --git a/public/resource/loading.js b/public/resource/loading.js
diff --git a/src/components/common/AppLoading.vue b/src/components/common/AppLoading.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="fixed-center flex-col">
+    <system-logo class="text-128px text-primary" />
+    <div class="w-56px h-56px my-36px">
+      <div class="relative h-full animate-spin">
+        <div
+          v-for="(item, index) in lodingClasses"
+          :key="index"
+          class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse"
+          :class="item"
+        ></div>
+      </div>
+    </div>
+    <h2 class="text-28px font-500 text-#646464">{{ title }}</h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EnumStorageKey } from '@/enum';
+import { useAppInfo } from '@/composables';
+import { getLocal } from '@/utils';
+
+const { title } = useAppInfo();
+
+const lodingClasses = [
+  'left-0 top-0',
+  'left-0 bottom-0 animate-delay-500',
+  'right-0 top-0 animate-delay-1000',
+  'right-0 bottom-0 animate-delay-1500'
+];
+
+function addThemeColorCssVars() {
+  const defaultColor = '#1890ff';
+  const themeColor = getLocal(EnumStorageKey['theme-color']) || defaultColor;
+  const cssVars = `--primary-color: ${themeColor}`;
+  document.documentElement.style.cssText = cssVars;
+}
+
+addThemeColorCssVars();
+</script>
+
+<style scoped></style>
diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import AppLoading from './components/common/AppLoading.vue';
 import { setupDirectives } from './directives';
 import { setupRouter } from './router';
 import { setupAssets } from './plugins';
@@ -10,6 +11,11 @@ async function setupApp() {
   // import assets: js、css
   setupAssets();
 
+  // app loading
+  const appLoading = createApp(AppLoading);
+
+  appLoading.mount('#appLoading');
+
   const app = createApp(App);
 
   // store plugin: pinia