diff --git a/index.html b/index.html index c2e3809b..c62bd487 100644 --- a/index.html +++ b/index.html @@ -7,9 +7,7 @@ %VITE_APP_TITLE% -
-
-
+
diff --git a/src/App.vue b/src/App.vue index 1c72f305..22353307 100644 --- 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(() => { diff --git a/src/components/common/app-loading.vue b/src/components/common/app-loading.vue deleted file mode 100644 index af7e8f0c..00000000 --- a/src/components/common/app-loading.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - - - diff --git a/src/main.ts b/src/main.ts index 787e1973..efb97f89 100644 --- 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 index ba6dd083..5d10c3aa 100644 --- 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 new file mode 100644 index 00000000..d61bc58a --- /dev/null +++ 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(' { + return `
`; + }) + .join('\n'); + + const loading = ` +
+ ${logoWithClass} +
+
+ ${dot} +
+
+

${$t('system.title')}

+
`; + + const app = document.getElementById('app'); + + if (app) { + app.innerHTML = loading; + } +} diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts index bedd5216..df75b79f 100644 --- 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']