import { useState, useEffect } from 'react'; import { useParams, useRouter } from 'next/navigation'; type Locale = 'zh-CN' | 'zh-TW' | 'en'; interface TranslationData { [key: string]: any; } const translations: Record> = { 'zh-CN': {}, 'zh-TW': {}, en: {}, }; // Load translation files dynamically const loadTranslations = async (locale: Locale, namespace: string): Promise => { if (translations[locale][namespace]) { return translations[locale][namespace]; } try { const response = await fetch(`/locales/${locale}/${namespace}.json`); if (!response.ok) { throw new Error(`HTTP ${response.status}`); } const data = await response.json(); translations[locale][namespace] = data; return data; } catch (error) { console.error(`Failed to load translation: ${locale}/${namespace}`, error); return {}; } }; export const useTranslation = (namespace: string = 'common') => { const params = useParams(); const router = useRouter(); const urlLocale = params?.locale as Locale; const [locale, setLocale] = useState(urlLocale || 'zh-CN'); const [translations, setTranslations] = useState({}); const [loading, setLoading] = useState(true); useEffect(() => { // 如果URL中有locale参数,优先使用URL中的语言 if (urlLocale && urlLocale !== locale) { setLocale(urlLocale); } }, [urlLocale, locale]); useEffect(() => { const loadData = async () => { setLoading(true); const data = await loadTranslations(locale, namespace); setTranslations(data); setLoading(false); }; loadData(); }, [locale, namespace]); const changeLocale = (newLocale: Locale) => { // 更新localStorage localStorage.setItem('language', newLocale); // 构建新的URL路径 const currentPath = window.location.pathname; const pathWithoutLocale = currentPath.replace(/^\/[^\/]+/, ''); const newPath = `/${newLocale}${pathWithoutLocale}`; // 导航到新的语言路径 router.push(newPath); }; const t = (key: string, defaultValue?: string): string => { const keys = key.split('.'); let value = translations; for (const k of keys) { if (value && typeof value === 'object' && k in value) { value = value[k]; } else { return defaultValue || key; } } return typeof value === 'string' ? value : defaultValue || key; }; return { t, locale, setLocale: changeLocale, loading, }; }; // 语言切换工具函数 export const getLocalizedPath = (path: string, locale: Locale): string => { return `/${locale}${path}`; }; // 验证locale是否有效 export const isValidLocale = (locale: string): locale is Locale => { return ['zh-CN', 'zh-TW', 'en'].includes(locale); }; export type { Locale };