refactor: admin language first

src/App.tsx

@@ -10,6 +10,7 @@ import ErrorPage from "./pages/ErrorPage"
 import NotFound from "./pages/NotFound"
 import Server from "./pages/Server"
 import ServerDetail from "./pages/ServerDetail"
+import { useTranslation } from "react-i18next"
 
 const App: React.FC = () => {
   const { data: settingData, error } = useQuery({
@@ -18,6 +19,7 @@ const App: React.FC = () => {
     refetchOnMount: true,
     refetchOnWindowFocus: true,
   })
+  const { i18n } = useTranslation()
 
   const InjectContext = useCallback((content: string) => {
     const tempDiv = document.createElement("div")
@@ -46,7 +48,7 @@ const App: React.FC = () => {
     Array.from(tempDiv.childNodes).forEach((node) => {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node as HTMLElement
-        ;(handlers[element.tagName] || handlers.DEFAULT)(element)
+          ; (handlers[element.tagName] || handlers.DEFAULT)(element)
       } else if (node.nodeType === Node.TEXT_NODE) {
         document.body.appendChild(document.createTextNode(node.textContent || ""))
       }
@@ -61,6 +63,10 @@ const App: React.FC = () => {
     return null
   }
 
+  if (settingData?.data?.language && !localStorage.getItem("language")) {
+    i18n.changeLanguage(settingData?.data?.language)
+  }
+
   if (settingData?.data?.custom_code) {
     InjectContext(settingData?.data?.custom_code)
   }

src/components/LanguageSwitcher.tsx

@@ -23,7 +23,7 @@ export function LanguageSwitcher() {
   const localeItems = [
     { name: t("language.zh-CN"), code: "zh-CN" },
     { name: t("language.zh-TW"), code: "zh-TW" },
-    { name: t("language.en"), code: "en" },
+    { name: t("language.en-US"), code: "en-US" },
   ]
 
   return (

src/i18n.js

@@ -6,7 +6,7 @@ import zhCNTranslation from "./locales/zh-CN/translation.json"
 import zhTWTranslation from "./locales/zh-TW/translation.json"
 
 const resources = {
-  en: {
+  "en-US": {
     translation: enTranslation,
   },
   "zh-CN": {
@@ -18,13 +18,13 @@ const resources = {
 }
 
 const getStoredLanguage = () => {
-  return localStorage.getItem("language") || "en"
+  return localStorage.getItem("language") || "en-US"
 }
 
 i18n.use(initReactI18next).init({
   resources,
   lng: getStoredLanguage(), // 使用localStorage中存储的语言或默认值
-  fallbackLng: "en", // 当前语言的翻译没有找到时，使用的备选语言
+  fallbackLng: "en-US", // 当前语言的翻译没有找到时，使用的备选语言
   interpolation: {
     escapeValue: false, // react已经安全地转义
   },

src/locales/en/translation.json

@@ -79,7 +79,7 @@
   "language": {
     "zh-CN": "简体中文",
     "zh-TW": "繁體中文",
-    "en": "English"
+    "en-US": "English"
   },
   "theme": {
     "light": "Light",

src/locales/zh-TW/translation.json

@@ -79,7 +79,7 @@
   "language": {
     "zh-CN": "简体中文",
     "zh-TW": "繁體中文",
-    "en": "English"
+    "en-US": "English"
   },
   "theme": {
     "light": "亮色",