12

app/app.vue

@@ -2,6 +2,8 @@
 import {useI18n} from 'vue-i18n'
 import {message} from '@/components/x-message/useMessage.js'
 import {hideMinWindow1} from "@/components/floatingBubble/floating.js";
+import AppSkeleton from '@/components/app-skeleton/index.vue'
+
 // message.success('success')
 useHead({
   title: useI18n().t('appSetting.appName'),
@@ -20,6 +22,34 @@ const { locale } = useI18n()
 // 记录路由历史
 const routeHistory = ref([])
 
+// 获取骨架屏状态
+const nuxtApp = useNuxtApp()
+const isSkeletonLoading = ref(true)
+
+// 在组件挂载后获取骨架屏状态
+onMounted(() => {
+  console.log('app.vue 已挂载，检查骨架屏状态')
+  
+  // 立即检查一次骨架屏状态
+  if (nuxtApp.$appSkeleton) {
+    console.log('找到骨架屏插件，当前状态:', nuxtApp.$appSkeleton.isLoading.value)
+    isSkeletonLoading.value = nuxtApp.$appSkeleton.isLoading.value
+    
+    // 监听骨架屏状态变化
+    watch(() => nuxtApp.$appSkeleton.isLoading.value, (newValue) => {
+      console.log('骨架屏状态变化:', newValue)
+      isSkeletonLoading.value = newValue
+    }, { immediate: true })
+  } else {
+    console.log('未找到骨架屏插件，将使用备用机制')
+    // 如果插件未加载，3秒后自动隐藏
+    setTimeout(() => {
+      isSkeletonLoading.value = false
+      console.log('备用机制：骨架屏已隐藏')
+    }, 3000)
+  }
+})
+
 router.beforeEach((to, from) => {
   // 记录路由历史
   routeHistory.value.push(from.path)
@@ -43,6 +73,9 @@ provide('slideDirection', slideDirection)
 
 <template>
   <client-only>
+    <!-- 骨架屏组件 -->
+    <AppSkeleton v-if="isSkeletonLoading" />
+    
     <VanConfigProvider>
       <NuxtLoadingIndicator
           color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)"/>

nuxt.config.js

@@ -1,6 +1,7 @@
 import dotenv from 'dotenv'
 import process from 'node:process'
 import preload from './app/utils/preload'
+import skeletonPreload from './app/utils/skeleton-preload'
 import { currentLocales } from './i18n/i18n'
 const envFile = process.env.ENV_FILE || '.env.test'
 dotenv.config({ path: `./env/${envFile}` })
@@ -81,6 +82,7 @@ export default defineNuxtConfig({
         { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#222222' },
       ],
       script: [
+        { innerHTML: skeletonPreload(), type: 'text/javascript', tagPosition: 'head' },
         { innerHTML: preload(), type: 'text/javascript', tagPosition: 'head' },
       ],
     },