refactor(projects): refactor app-loading

soybeanjs · Jan 20, 2024 · b4f3dd2 · b4f3dd2 · vercel · Jan 20, 2024
1 parent 726abe4
commit b4f3dd2
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 71 deletions.
diff --git a/index.html b/index.html
@@ -7,9 +7,7 @@
     <title>%VITE_APP_TITLE%</title>
   </head>
   <body>
-    <div id="app">
-      <div id="appLoading"></div>
-    </div>
+    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -4,7 +4,6 @@ import { NConfigProvider, darkTheme } from 'naive-ui';
 import { useAppStore } from './store/modules/app';
 import { useThemeStore } from './store/modules/theme';
 import { naiveDateLocales, naiveLocales } from './locales/naive';
-import AppLoading from './components/common/app-loading.vue';
 
 defineOptions({
   name: 'App'
@@ -25,22 +24,17 @@ const naiveDateLocale = computed(() => {
 </script>
 
 <template>
-  <Suspense>
-    <NConfigProvider
-      :theme="naiveDarkTheme"
-      :theme-overrides="themeStore.naiveTheme"
-      :locale="naiveLocale"
-      :date-locale="naiveDateLocale"
-      class="h-full"
-    >
-      <AppProvider>
-        <RouterView class="bg-layout" />
-      </AppProvider>
-    </NConfigProvider>
-    <template #fallback>
-      <AppLoading />
-    </template>
-  </Suspense>
+  <NConfigProvider
+    :theme="naiveDarkTheme"
+    :theme-overrides="themeStore.naiveTheme"
+    :locale="naiveLocale"
+    :date-locale="naiveDateLocale"
+    class="h-full"
+  >
+    <AppProvider>
+      <RouterView class="bg-layout" />
+    </AppProvider>
+  </NConfigProvider>
 </template>
 
 <style scoped></style>
diff --git a/src/components/common/app-loading.vue b/src/components/common/app-loading.vue
diff --git a/src/main.ts b/src/main.ts
@@ -1,16 +1,13 @@
 import { createApp } from 'vue';
 import './plugins/assets';
-import { setupDayjs, setupIconifyOffline, setupNProgress } from './plugins';
+import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
 import { setupStore } from './store';
 import { setupRouter } from './router';
 import { setupI18n } from './locales';
-import AppLoading from './components/common/app-loading.vue';
 import App from './App.vue';
 
 async function setupApp() {
-  const appLoading = createApp(AppLoading);
-
-  appLoading.mount('#appLoading');
+  setupLoading();
 
   setupNProgress();
 
@@ -27,8 +24,6 @@ async function setupApp() {
   setupI18n(app);
 
   app.mount('#app');
-
-  appLoading.unmount();
 }
 
 setupApp();
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
@@ -1,3 +1,4 @@
+export * from './loading';
 export * from './nprogress';
 export * from './iconify';
 export * from './dayjs';
diff --git a/src/plugins/loading.ts b/src/plugins/loading.ts
@@ -0,0 +1,45 @@
+// @unocss-include
+import { getRgbOfColor } from '@sa/utils';
+import { $t } from '@/locales';
+import { localStg } from '@/utils/storage';
+import systemLogo from '@/assets/svg-icon/logo.svg?raw';
+
+export function setupLoading() {
+  const themeColor = localStg.get('themeColor') || '#646cff';
+
+  const { r, g, b } = getRgbOfColor(themeColor);
+
+  const primaryColor = `--primary-color: ${r} ${g} ${b}`;
+
+  const loadingClasses = [
+    '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'
+  ];
+
+  const logoWithClass = systemLogo.replace('<svg', `<svg class="size-128px text-primary"`);
+
+  const dot = loadingClasses
+    .map(item => {
+      return `<div class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse ${item}"></div>`;
+    })
+    .join('\n');
+
+  const loading = `
+<div class="fixed-center flex-col" style="${primaryColor}">
+  ${logoWithClass}
+  <div class="w-56px h-56px my-36px">
+    <div class="relative h-full animate-spin">
+      ${dot}
+    </div>
+  </div>
+  <h2 class="text-28px font-500 text-#646464">${$t('system.title')}</h2>
+</div>`;
+
+  const app = document.getElementById('app');
+
+  if (app) {
+    app.innerHTML = loading;
+  }
+}
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
@@ -7,7 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    AppLoading: typeof import('./../components/common/app-loading.vue')['default']
     AppProvider: typeof import('./../components/common/app-provider.vue')['default']
     BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
     ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']