<script setup>
import {useI18n} from 'vue-i18n'
import {hideMinWindow1} from "@/components/floatingBubble/floating.js";
import AppSkeleton from '@/components/app-skeleton/index.vue'
const {t} = useI18n()
useHead({
  title: t('appSetting.appName'),
  meta: [
    {name: 'description', content: t('appSetting.appDescription')},
    {name: 'keywords', content: t('appSetting.appKeyWords')},
  ],
})


// 添加路由中间件来处理过渡方向
const router = useRouter()
const slideDirection = ref('slide-left')
// 记录路由历史
const routeHistory = ref([])

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>
    <!-- 骨架屏组件 -->

    <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>