GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(projects): refactor app-loading

Browse Source
This commit is contained in:
Soybean 2024-01-20 19:13:31 +08:00
parent 726abe4208
commit b4f3dd2f7a
7 changed files with 60 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -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>

28
src/App.vue
View File

@ -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>

43
src/components/common/app-loading.vue
View File

@ -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>

9
src/main.ts
View File

@ -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();

1
src/plugins/index.ts
View File

@ -1,3 +1,4 @@
export * from './loading';
export * from './nprogress';
export * from './iconify';
export * from './dayjs';

45
src/plugins/loading.ts Normal file
View 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
View File

@ -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']