blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-08-08 05:59:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: use suspense for apploading

Browse Source
This commit is contained in:
chansee97 2025-08-05 22:24:14 +08:00
parent a1085e1922
commit ade869ea30
4 changed files with 73 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -9,7 +9,6 @@
</head>
<body>
<div id="appLoading"></div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

30
src/App.vue
View File

@ -1,24 +1,18 @@
<script setup lang="ts">
import { naiveI18nOptions } from '@/utils'
import { darkTheme } from 'naive-ui'
import { useAppStore } from './store'
import AppMain from './AppMain.vue'
import AppLoading from './components/common/AppLoading.vue'
const appStore = useAppStore()
const naiveLocale = computed(() => {
return naiveI18nOptions[appStore.lang] ? naiveI18nOptions[appStore.lang] : naiveI18nOptions.enUS
},
)
// 使用 Suspense 处理异步组件加载
</script>
<template>
<n-config-provider
class="wh-full" inline-theme-disabled :theme="appStore.colorMode === 'dark' ? darkTheme : null"
:locale="naiveLocale.locale" :date-locale="naiveLocale.dateLocale" :theme-overrides="appStore.theme"
>
<naive-provider>
<router-view />
<Watermark :show-watermark="appStore.showWatermark" />
</naive-provider>
</n-config-provider>
<Suspense>
<!-- 异步组件 -->
<AppMain />
<!-- 加载状态 -->
<template #fallback>
<AppLoading />
</template>
</Suspense>
</template>

57
src/AppMain.vue Normal file
View File

@ -0,0 +1,57 @@
<script setup lang="ts">
import type { App } from 'vue'
import { installRouter } from '@/router'
import { installPinia } from '@/store'
import { naiveI18nOptions } from '@/utils'
import { darkTheme } from 'naive-ui'
import { useAppStore } from './store'
// 创建异步初始化 Promise - 这会让组件变成异步组件
const initializationPromise = (async () => {
// 获取当前应用实例
const app = getCurrentInstance()?.appContext.app
if (!app) {
throw new Error('Failed to get app instance')
}
// 注册模块 Pinia
await installPinia(app)
// 注册模块 Vue-router
await installRouter(app)
// 注册模块 指令/静态资源
const modules = import.meta.glob<{ install: (app: App) => void }>('./modules/*.ts', {
eager: true,
})
Object.values(modules).forEach(module => app.use(module))
return true
})()
// 等待初始化完成 - 这使得整个 setup 函数变成异步的
await initializationPromise
const appStore = useAppStore()
const naiveLocale = computed(() => {
return naiveI18nOptions[appStore.lang] ? naiveI18nOptions[appStore.lang] : naiveI18nOptions.enUS
})
</script>
<template>
<n-config-provider
class="wh-full"
inline-theme-disabled
:theme="appStore.colorMode === 'dark' ? darkTheme : null"
:locale="naiveLocale.locale"
:date-locale="naiveLocale.dateLocale"
:theme-overrides="appStore.theme"
>
<naive-provider>
<router-view />
<Watermark :show-watermark="appStore.showWatermark" />
</naive-provider>
</n-config-provider>
</template>

38
src/main.ts
View File

@ -1,35 +1,5 @@
import type { App } from 'vue'
import { installRouter } from '@/router'
import { installPinia } from '@/store'
import AppVue from './App.vue'
import AppLoading from './components/common/AppLoading.vue'
import App from './App.vue'
async function setupApp() {
// 载入全局loading加载状态
const appLoading = createApp(AppLoading)
appLoading.mount('#appLoading')
// 创建vue实例
const app = createApp(AppVue)
// 注册模块Pinia
await installPinia(app)
// 注册模块 Vue-router
await installRouter(app)
/* 注册模块 指令/静态资源 */
Object.values(
import.meta.glob<{ install: (app: App) => void }>('./modules/*.ts', {
eager: true,
}),
).map(i => app.use(i))
// 卸载载入动画
appLoading.unmount()
// 挂载
app.mount('#app')
}
setupApp()
// 创建应用实例并挂载
const app = createApp(App)
app.mount('#app')