190 lines
4.0 KiB
Vue
190 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<keep-alive v-if="isKeepAlive">
|
|
<NuxtPage />
|
|
</keep-alive>
|
|
<NuxtPage v-else />
|
|
<back-top v-if="currentPath !== '/404'" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted } from "vue";
|
|
import { useRoute } from "#imports";
|
|
import BackTop from "@/components/back-top/back-top.vue";
|
|
import { useAppInit } from "@/composables/useAppInit.js";
|
|
|
|
// 获取当前路由对象
|
|
const route = useRoute();
|
|
// 计算当前路由的完整路径
|
|
const currentPath = computed(() => route.fullPath);
|
|
// 根据 meta 信息判断是否需要缓存页面
|
|
const isKeepAlive = computed(() => {
|
|
return route.meta.keepAlive;
|
|
});
|
|
|
|
// 应用初始化
|
|
const { initApp } = useAppInit();
|
|
|
|
onMounted(() => {
|
|
// 在应用挂载时初始化
|
|
initApp();
|
|
});
|
|
|
|
useHead({
|
|
title: "明阳良光",
|
|
meta: [
|
|
{
|
|
name: "viewport",
|
|
content: "width=device-width, initial-scale=1",
|
|
},
|
|
{
|
|
hid: "description",
|
|
name: "description",
|
|
content: "明阳良光",
|
|
},
|
|
{
|
|
name: "theme-color",
|
|
content: "#4f8cef",
|
|
},
|
|
],
|
|
link: [
|
|
{
|
|
hid: "favicon",
|
|
rel: "icon",
|
|
href: "/favicon.ico",
|
|
},
|
|
{
|
|
hid: "iconfont",
|
|
rel: "stylesheet",
|
|
href: "/static/font/iconfont.css",
|
|
},
|
|
],
|
|
script: [
|
|
{
|
|
innerHTML: `
|
|
(function() {
|
|
// 简化的客户端语言状态设置
|
|
if (typeof window !== 'undefined') {
|
|
try {
|
|
// 根据当前路径确定语言
|
|
const currentPath = window.location.pathname;
|
|
const currentLang = currentPath.startsWith('/cn') ? 'cn' : 'en';
|
|
|
|
// 设置语言属性
|
|
document.documentElement.setAttribute('lang', currentLang === 'cn' ? 'zh-CN' : 'en');
|
|
document.documentElement.setAttribute('data-locale', currentLang);
|
|
|
|
// 设置页面标题的语言属性
|
|
if (document.title) {
|
|
document.title = document.title + (currentLang === 'cn' ? ' - 明阳良光' : ' - Mingyang Liangguang');
|
|
}
|
|
} catch (e) {
|
|
console.warn('Language setup failed:', e);
|
|
// 出错时默认英文
|
|
document.documentElement.setAttribute('lang', 'en');
|
|
document.documentElement.setAttribute('data-locale', 'en');
|
|
}
|
|
}
|
|
})();
|
|
`,
|
|
type: "text/javascript",
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "./common/css/common.scss";
|
|
|
|
// 防止语言切换时的闪烁 - 优化版本
|
|
html:not([data-locale]) {
|
|
// 在语言未确定前隐藏内容
|
|
body {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
}
|
|
|
|
// 语言确定后显示内容
|
|
html[data-locale] {
|
|
body {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// 确保语言切换平滑
|
|
html {
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
// 语言特定的样式优化
|
|
html[data-locale="en"] {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
html[data-locale="cn"] {
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
|
|
"Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
// 防止水合不匹配时的闪烁
|
|
.navbar {
|
|
opacity: 1;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
// 确保内容在语言切换时不会跳动
|
|
* {
|
|
transition: none;
|
|
}
|
|
|
|
// 只有特定元素需要过渡效果
|
|
.navbar,
|
|
.menu-item,
|
|
.language-selector,
|
|
.mobile-menu {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
// 防止语言切换时的布局抖动
|
|
.language-selector {
|
|
min-width: 80px; // 确保语言选择器有固定宽度
|
|
}
|
|
|
|
.lang-text {
|
|
min-width: 40px; // 确保语言文本有固定宽度
|
|
text-align: center;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MiSans-Light;
|
|
src: url("/static/font/MiSans-Light.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MiSans-Bold;
|
|
src: url("/static/font/MiSans-Bold.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MiSans-Medium;
|
|
src: url("/static/font/MiSans-Medium.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MiSans-Regular;
|
|
src: url("/static/font/MiSans-Regular.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MiSans-Normal;
|
|
src: url("/static/font/MiSans-Normal.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: MiSans-SemiBold;
|
|
src: url("/static/font/MiSans-Semibold.ttf");
|
|
}
|
|
</style>
|