'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 (
CloudTech - Professional Cloud Computing Platform
{children}
);
}