65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
'use client';
|
||
import type { Metadata } from 'next';
|
||
import '../globals.css';
|
||
import { useEffect, useState } from 'react';
|
||
|
||
interface LayoutProps {
|
||
children: React.ReactNode;
|
||
params: { locale: string };
|
||
}
|
||
|
||
export default function LocaleLayout({ children, params }: LayoutProps) {
|
||
// 直接使用 params.locale，避免水合错误
|
||
const locale = params.locale || 'zh-CN';
|
||
|
||
useEffect(() => {
|
||
// 同步URL中的语言参数和localStorage
|
||
if (params.locale) {
|
||
localStorage.setItem('language', params.locale);
|
||
document.documentElement.lang = params.locale;
|
||
}
|
||
|
||
// 监听语言变化
|
||
const handleLanguageChange = () => {
|
||
const savedLang = localStorage.getItem('language') || params.locale || 'zh-CN';
|
||
if (savedLang !== locale) {
|
||
// 如果localStorage中的语言与URL不匹配，重定向到正确的URL
|
||
window.location.href = `/${savedLang}${window.location.pathname.substring(window.location.pathname.indexOf('/', 1))}`;
|
||
}
|
||
};
|
||
|
||
window.addEventListener('storage', handleLanguageChange);
|
||
|
||
return () => {
|
||
window.removeEventListener('storage', handleLanguageChange);
|
||
};
|
||
}, [params.locale, locale]);
|
||
|
||
return (
|
||
<html lang={locale} data-oid="igtjek8">
|
||
<head data-oid="zmps16q">
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1"
|
||
data-oid="j0q4_yq"
|
||
/>
|
||
<meta name="robots" content="index, follow" data-oid="t1vprk8" />
|
||
<meta name="author" content="CloudTech" data-oid="h-qxvx6" />
|
||
<title data-oid="niq1f62">CloudTech - Professional Cloud Computing Platform</title>
|
||
<meta
|
||
name="description"
|
||
content="CloudTech provides professional cloud computing services for enterprise digital transformation"
|
||
data-oid="p-1zq94"
|
||
/>
|
||
<meta
|
||
name="keywords"
|
||
content="cloud computing, cloud services, digital transformation"
|
||
data-oid="xi3azhs"
|
||
/>
|
||
</head>
|
||
<body className="" data-oid="s4f3g.0">
|
||
{children}
|
||
</body>
|
||
</html>
|
||
);
|
||
}
|