website-client-Nigeria/src/app.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
	} from 'vue';
	import {
		useRoute
	} from '#imports';
	import BackTop from "@/components/back-top/back-top.vue";
	
	// 获取当前路由对象
	const route = useRoute();
	// 计算当前路由的完整路径
	const currentPath = computed(() => route.fullPath);
	// 根据 meta 信息判断是否需要缓存页面
	const isKeepAlive = computed(() => {
		return route.meta.keepAlive;
	});
	
	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'
			}
		],
		script: [{
			innerHTML: `
				(function() {
					// 立即执行函数，确保在任何Vue组件初始化前设置语言
					if (typeof window !== 'undefined') {
						try {
							// 优先使用cookie中的语言设置（与Nuxt i18n保持一致）
							let savedLang = 'en';
							
							// 1. 检查cookie
							const cookies = document.cookie.split(';');
							const localeCookie = cookies.find(cookie => 
								cookie.trim().startsWith('i18n_redirected=')
							);
							if (localeCookie) {
								const langValue = localeCookie.split('=')[1];
								if (['cn', 'en'].includes(langValue)) {
									savedLang = langValue;
								}
							}
							
							// 2. 如果没有cookie，检查localStorage
							if (savedLang === 'en') {
								const storedLang = localStorage.getItem('locale_lang');
								if (storedLang && ['cn', 'en'].includes(storedLang)) {
									savedLang = storedLang;
								}
							}
							
							// 3. 如果都没有，根据浏览器语言设置
							if (savedLang === 'en') {
								if (navigator.language.startsWith("en")) {
									savedLang = "en";
								} else if (navigator.language.includes("zh")) {
									savedLang = "cn";
								}
							}
							
							// 设置多个位置确保语言被正确读取
							document.documentElement.setAttribute('data-initial-lang', savedLang);
							document.documentElement.setAttribute('lang', savedLang === 'cn' ? 'zh-CN' : 'en');
							document.documentElement.setAttribute('data-locale', savedLang);
							window.__INITIAL_LANG__ = savedLang;
							
							// 为i18n设置初始语言
							window.__I18N_INITIAL_LOCALE__ = savedLang;
							
							// 确保cookie和localStorage同步
							if (savedLang !== 'en') {
								document.cookie = 'i18n_redirected=' + savedLang + '; path=/; max-age=31536000';
								localStorage.setItem('locale_lang', savedLang);
							}
						} catch (e) {
							const defaultLang = 'en';
							document.documentElement.setAttribute('data-initial-lang', defaultLang);
							document.documentElement.setAttribute('lang', 'en');
							document.documentElement.setAttribute('data-locale', defaultLang);
							window.__INITIAL_LANG__ = defaultLang;
							window.__I18N_INITIAL_LOCALE__ = defaultLang;
						}
					}
				})();
			`,
			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>