refactor(projects): refactor app-loading
This commit is contained in:
parent
726abe4208
commit
b4f3dd2f7a
@ -7,9 +7,7 @@
|
|||||||
<title>%VITE_APP_TITLE%</title>
|
<title>%VITE_APP_TITLE%</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app"></div>
|
||||||
<div id="appLoading"></div>
|
|
||||||
</div>
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
28
src/App.vue
28
src/App.vue
@ -4,7 +4,6 @@ import { NConfigProvider, darkTheme } from 'naive-ui';
|
|||||||
import { useAppStore } from './store/modules/app';
|
import { useAppStore } from './store/modules/app';
|
||||||
import { useThemeStore } from './store/modules/theme';
|
import { useThemeStore } from './store/modules/theme';
|
||||||
import { naiveDateLocales, naiveLocales } from './locales/naive';
|
import { naiveDateLocales, naiveLocales } from './locales/naive';
|
||||||
import AppLoading from './components/common/app-loading.vue';
|
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'App'
|
name: 'App'
|
||||||
@ -25,22 +24,17 @@ const naiveDateLocale = computed(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Suspense>
|
<NConfigProvider
|
||||||
<NConfigProvider
|
:theme="naiveDarkTheme"
|
||||||
:theme="naiveDarkTheme"
|
:theme-overrides="themeStore.naiveTheme"
|
||||||
:theme-overrides="themeStore.naiveTheme"
|
:locale="naiveLocale"
|
||||||
:locale="naiveLocale"
|
:date-locale="naiveDateLocale"
|
||||||
:date-locale="naiveDateLocale"
|
class="h-full"
|
||||||
class="h-full"
|
>
|
||||||
>
|
<AppProvider>
|
||||||
<AppProvider>
|
<RouterView class="bg-layout" />
|
||||||
<RouterView class="bg-layout" />
|
</AppProvider>
|
||||||
</AppProvider>
|
</NConfigProvider>
|
||||||
</NConfigProvider>
|
|
||||||
<template #fallback>
|
|
||||||
<AppLoading />
|
|
||||||
</template>
|
|
||||||
</Suspense>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
@ -1,43 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { getRgbOfColor } from '@sa/utils';
|
|
||||||
import { $t } from '@/locales';
|
|
||||||
import { localStg } from '@/utils/storage';
|
|
||||||
|
|
||||||
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 style = addThemeColorCssVars();
|
|
||||||
|
|
||||||
function addThemeColorCssVars() {
|
|
||||||
const themeColor = localStg.get('themeColor') || '#646cff';
|
|
||||||
|
|
||||||
const { r, g, b } = getRgbOfColor(themeColor);
|
|
||||||
|
|
||||||
const cssVars = `--primary-color: ${r} ${g} ${b}`;
|
|
||||||
|
|
||||||
return cssVars;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="fixed-center flex-col" :style="style">
|
|
||||||
<SystemLogo 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 loadingClasses"
|
|
||||||
: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">{{ $t('system.title') }}</h2>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
@ -1,16 +1,13 @@
|
|||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
import './plugins/assets';
|
import './plugins/assets';
|
||||||
import { setupDayjs, setupIconifyOffline, setupNProgress } from './plugins';
|
import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
|
||||||
import { setupStore } from './store';
|
import { setupStore } from './store';
|
||||||
import { setupRouter } from './router';
|
import { setupRouter } from './router';
|
||||||
import { setupI18n } from './locales';
|
import { setupI18n } from './locales';
|
||||||
import AppLoading from './components/common/app-loading.vue';
|
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
|
|
||||||
async function setupApp() {
|
async function setupApp() {
|
||||||
const appLoading = createApp(AppLoading);
|
setupLoading();
|
||||||
|
|
||||||
appLoading.mount('#appLoading');
|
|
||||||
|
|
||||||
setupNProgress();
|
setupNProgress();
|
||||||
|
|
||||||
@ -27,8 +24,6 @@ async function setupApp() {
|
|||||||
setupI18n(app);
|
setupI18n(app);
|
||||||
|
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
|
||||||
appLoading.unmount();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setupApp();
|
setupApp();
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
export * from './loading';
|
||||||
export * from './nprogress';
|
export * from './nprogress';
|
||||||
export * from './iconify';
|
export * from './iconify';
|
||||||
export * from './dayjs';
|
export * from './dayjs';
|
||||||
|
45
src/plugins/loading.ts
Normal file
45
src/plugins/loading.ts
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
1
src/typings/components.d.ts
vendored
1
src/typings/components.d.ts
vendored
@ -7,7 +7,6 @@ export {}
|
|||||||
|
|
||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
AppLoading: typeof import('./../components/common/app-loading.vue')['default']
|
|
||||||
AppProvider: typeof import('./../components/common/app-provider.vue')['default']
|
AppProvider: typeof import('./../components/common/app-provider.vue')['default']
|
||||||
BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
|
BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
|
||||||
ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
|
ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
|
||||||
|
Loading…
Reference in New Issue
Block a user