liveh5-nuxt/app/app.vue

<script setup>
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'),
  meta: [
    {name: 'description', content: useI18n().t('appSetting.appDescription')},
    {name: 'keywords', content: useI18n().t('appSetting.appKeyWords')},
  ],
})


// 添加路由中间件来处理过渡方向
const router = useRouter()
const route = useRoute()
const slideDirection = ref('slide-left')
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)
if (to.path==='/'){
  hideMinWindow1()
}
  // 如果是返回操作（在历史记录中找到目标路由）
  if (routeHistory.value.includes(to.path)) {
    slideDirection.value = 'slide-right'
    // 清除历史记录到返回的位置
    const index = routeHistory.value.indexOf(to.path)
    routeHistory.value = routeHistory.value.slice(0, index)
  } else {
    slideDirection.value = 'slide-left'
  }
})

// 提供过渡名称给页面组件
provide('slideDirection', slideDirection)
</script>

<template>
  <client-only>
    <!-- 骨架屏组件 -->
    <AppSkeleton v-if="isSkeletonLoading" />
    
    <VanConfigProvider>
      <NuxtLoadingIndicator
          color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)"/>
      <NuxtLayout>
        <NuxtPage :transition="{
        name: slideDirection
      }"/>
      </NuxtLayout>
    </VanConfigProvider>
  </client-only>
</template>

<style>
:root:root {
  --van-dialog-radius: 8px
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: 100%;
}

.slide-left-enter-from {
  transform: translateX(100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-from {
  transform: translateX(-100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}

:root {
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
}
.van-cell.van-field .van-cell__title, .van-cell__value{
  flex: initial;
}
</style>