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

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>

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