mirror of
https://github.com/MengMengCode/CLICD.git
synced 2026-08-06 22:04:44 +08:00
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { ReactNode, createContext, useContext, useEffect, useMemo, useState } from 'react'
|
|
import { translateText } from '../utils/i18n'
|
|
import { getLanguage, updateLanguage } from '../services/api'
|
|
|
|
export type Language = 'zh' | 'en'
|
|
|
|
interface LanguageContextValue {
|
|
language: Language
|
|
setLanguage: (language: Language) => void
|
|
toggleLanguage: () => Promise<void>
|
|
t: (value: string) => string
|
|
}
|
|
|
|
const LanguageContext = createContext<LanguageContextValue | undefined>(undefined)
|
|
function initialLanguage(): Language {
|
|
return 'zh'
|
|
}
|
|
|
|
export function LanguageProvider({ children }: { children: ReactNode }) {
|
|
const [language, setLanguageState] = useState<Language>(initialLanguage)
|
|
|
|
const setLanguageLocal = (next: Language) => {
|
|
setLanguageState(next)
|
|
}
|
|
|
|
const setLanguage = (next: Language) => {
|
|
setLanguageLocal(next)
|
|
updateLanguage(next).catch(() => {})
|
|
}
|
|
|
|
const value = useMemo<LanguageContextValue>(() => ({
|
|
language,
|
|
setLanguage,
|
|
toggleLanguage: async () => {
|
|
const next = language === 'zh' ? 'en' : 'zh'
|
|
setLanguageLocal(next)
|
|
try {
|
|
const res = await updateLanguage(next)
|
|
setLanguageLocal(res.data.data?.language || next)
|
|
} catch {
|
|
setLanguageLocal(language)
|
|
}
|
|
},
|
|
t: (text: string) => language === 'en' ? translateText(text) : text,
|
|
}), [language])
|
|
|
|
useEffect(() => {
|
|
getLanguage()
|
|
.then((res) => {
|
|
const serverLanguage = res.data.data?.language
|
|
if (serverLanguage === 'zh' || serverLanguage === 'en') {
|
|
setLanguageLocal(serverLanguage)
|
|
}
|
|
})
|
|
.catch(() => {})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
document.documentElement.lang = language === 'en' ? 'en' : 'zh-CN'
|
|
document.documentElement.dataset.language = language
|
|
}, [language])
|
|
|
|
return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>
|
|
}
|
|
|
|
export function useLanguage() {
|
|
const context = useContext(LanguageContext)
|
|
if (!context) {
|
|
throw new Error('useLanguage must be used within LanguageProvider')
|
|
}
|
|
return context
|
|
}
|