diff --git a/index.html b/index.html
index fbc0533..2f265c5 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,6 @@
 </head>
 
 <body>
-  <div id="appLoading"></div>
   <div id="app"></div>
   <script type="module" src="/src/main.ts"></script>
 </body>
diff --git a/src/App.vue b/src/App.vue
index 8998bc3..00d98e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
diff --git a/src/AppMain.vue b/src/AppMain.vue
new file mode 100644
index 0000000..d37c9d8
--- /dev/null
+++ b/src/AppMain.vue
@@ -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>
diff --git a/src/main.ts b/src/main.ts
index d4083cb..54ddfab 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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')
