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>
|
|||
|
|
);
|
|||
|
|
}
|