refactor: modularize frontend flows

src/App.vue

@@ -1,70 +1,16 @@
 <script setup lang="ts">
-import { ref, provide, onMounted, onUnmounted } from 'vue'
 import { RouterView } from 'vue-router'
 import ThemeToggle from './components/common/ThemeToggle.vue'
 import LanguageSwitcher from './components/common/LanguageSwitcher.vue'
-import { useRouter, useRoute } from 'vue-router'
 import AlertComponent from '@/components/common/AlertComponent.vue'
-import { useAlertStore } from '@/stores/alertStore'
-import { ConfigService } from '@/services'
-import type { ApiResponse, ConfigState } from '@/types'
-import { useTheme } from '@/composables/useTheme'
+import { useAppShell } from '@/composables'
 
-const isLoading = ref(false)
-const router = useRouter()
-const route = useRoute()
-const alertStore = useAlertStore()
-
-// 使用主题 composable
-const { isDarkMode, toggleTheme, initTheme } = useTheme()
-
-// 清理函数
-let cleanupThemeListener: (() => void) | null = null
-
-onMounted(() => {
-  // 初始化主题并设置监听器
-  cleanupThemeListener = initTheme()
-  ConfigService.getUserConfig().then((res: ApiResponse<ConfigState>) => {
-    if (res.code === 200 && res.detail) {
-      localStorage.setItem('config', JSON.stringify(res.detail))
-      if (
-        res.detail.notify_title &&
-        res.detail.notify_content &&
-        localStorage.getItem('notify') !== res.detail.notify_title + res.detail.notify_content
-      ) {
-        localStorage.setItem('notify', res.detail.notify_title + res.detail.notify_content)
-        alertStore.showAlert(res.detail.notify_title + ': ' + res.detail.notify_content, 'success')
-      }
-    }
-  })
-})
-
-onUnmounted(() => {
-  // 清理主题监听器
-  if (cleanupThemeListener) {
-    cleanupThemeListener()
-  }
-})
-
-router.beforeEach((to, from, next) => {
-  isLoading.value = true
-  next()
-})
-
-router.afterEach(() => {
-  setTimeout(() => {
-    isLoading.value = false
-  }, 200) // 添加一个小延迟，以确保组件已加载
-})
-
-provide('isDarkMode', isDarkMode)
-provide('toggleTheme', toggleTheme)
-provide('isLoading', isLoading)
+const { isDarkMode, isLoading, route, showGlobalControls } = useAppShell()
 </script>
 
 <template>
   <div :class="['app-container', isDarkMode ? 'dark' : 'light']">
-    <div class="fixed top-4 right-4 z-50 flex items-center space-x-3">
+    <div v-if="showGlobalControls" class="fixed top-4 right-4 z-50 flex items-center space-x-3">
       <LanguageSwitcher />
       <ThemeToggle v-model="isDarkMode" />
     </div>