a6a5c20705
- 删除了 app.vue 中的颜色模式相关代码 - 移除了 nuxt.config.js 中的 colorMode 配置 - 删除了 package.json 中的 @nuxtjs/color-mode 依赖 - 移除了 unocss 示例页面 - 注释掉了 liveRoom 页面中的视频播放代码
82 lines
1.9 KiB
Vue
82 lines
1.9 KiB
Vue
<script setup>
|
|
import {useI18n} from 'vue-i18n'
|
|
import {message} from '@/components/x-message/useMessage.js'
|
|
// 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 routeHistory = ref([])
|
|
|
|
router.beforeEach((to, from) => {
|
|
// 记录路由历史
|
|
routeHistory.value.push(from.path)
|
|
|
|
// 如果是返回操作（在历史记录中找到目标路由）
|
|
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>
|
|
<VanConfigProvider>
|
|
<NuxtLoadingIndicator
|
|
color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)"/>
|
|
<NuxtLayout>
|
|
<NuxtPage :transition="{
|
|
name: slideDirection
|
|
}"/>
|
|
</NuxtLayout>
|
|
</VanConfigProvider>
|
|
</template>
|
|
|
|
<style>
|
|
.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);
|
|
}
|
|
</style> |