126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
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> |