feat(i18n): add switch language in login page (#2835) (#310)

* feat(i18n): add switch language in login page

* Update LanguageSwitcher.tsx

public/locales/de-DE/application.json

@@ -51,7 +51,8 @@
     "logout": "Abmelden",
     "signingOut": "Wird abgemeldet...",
     "loggedOut": "Sie wurden abgemeldet",
-    "clickToRefresh": "Klicken Sie, um das CAPTCHA zu aktualisieren"
+    "clickToRefresh": "Klicken Sie, um das CAPTCHA zu aktualisieren",
+    "switchLanguage": "Sprache wechseln"
   },
   "navbar": {
     "notBefore": "Nicht vor",

public/locales/en-US/application.json

@@ -51,7 +51,8 @@
     "logout": "Sign out",
     "signingOut": "Signing out...",
     "loggedOut": "You are signed out now.",
-    "clickToRefresh": "Click to refresh"
+    "clickToRefresh": "Click to refresh",
+    "switchLanguage": "Switch Language"
   },
   "navbar": {
     "notBefore": "Not before",

public/locales/es-ES/application.json

@@ -51,7 +51,8 @@
     "logout": "Cerrar sesión",
     "signingOut": "Cerrando sesión...",
     "loggedOut": "Has cerrado sesión",
-    "clickToRefresh": "Haz clic para actualizar el código de verificación"
+    "clickToRefresh": "Haz clic para actualizar el código de verificación",
+    "switchLanguage": "Cambiar idioma"
   },
   "navbar": {
     "notBefore": "No antes de",

public/locales/fr-FR/application.json

@@ -51,7 +51,8 @@
     "logout": "Se déconnecter",
     "signingOut": "Déconnexion en cours...",
     "loggedOut": "Vous êtes maintenant déconnecté.",
-    "clickToRefresh": "Cliquez pour actualiser"
+    "clickToRefresh": "Cliquez pour actualiser",
+    "switchLanguage": "Changer de langue"
   },
   "navbar": {
     "notBefore": "Pas avant",

public/locales/it-IT/application.json

@@ -51,7 +51,8 @@
     "logout": "Logout",
     "signingOut": "Logout in corso...",
     "loggedOut": "Sei stato disconnesso",
-    "clickToRefresh": "Clicca per aggiornare il CAPTCHA"
+    "clickToRefresh": "Clicca per aggiornare il CAPTCHA",
+    "switchLanguage": "Cambia lingua"
   },
   "navbar": {
     "notBefore": "Non prima di",

public/locales/ja-JP/application.json

@@ -51,7 +51,8 @@
     "logout": "ログアウト",
     "signingOut": "ログアウト中...",
     "loggedOut": "ログアウトしました",
-    "clickToRefresh": "CAPTCHAを再読み込み"
+    "clickToRefresh": "CAPTCHAを再読み込み",
+    "switchLanguage": "言語を切り替え"
   },
   "navbar": {
     "notBefore": "～より前",

public/locales/ko-KR/application.json

@@ -51,7 +51,8 @@
     "logout": "로그아웃",
     "signingOut": "로그아웃 중...",
     "loggedOut": "로그아웃되었습니다",
-    "clickToRefresh": "클릭하여 보안문자 새로고침"
+    "clickToRefresh": "클릭하여 보안문자 새로고침",
+    "switchLanguage": "언어 전환"
   },
   "navbar": {
     "notBefore": "이전 아님",

public/locales/pt-BR/application.json

@@ -51,7 +51,8 @@
     "logout": "Sair",
     "signingOut": "Saindo...",
     "loggedOut": "Você saiu da conta",
-    "clickToRefresh": "Clique para atualizar o código"
+    "clickToRefresh": "Clique para atualizar o código",
+    "switchLanguage": "Mudar idioma"
   },
   "navbar": {
     "notBefore": "Não antes de",

public/locales/ru-RU/application.json

@@ -51,7 +51,8 @@
     "logout": "Выйти",
     "signingOut": "Выход из системы...",
     "loggedOut": "Вы вышли из системы",
-    "clickToRefresh": "Нажмите для обновления капчи"
+    "clickToRefresh": "Нажмите для обновления капчи",
+    "switchLanguage": "Сменить язык"
   },
   "navbar": {
     "notBefore": "Не раньше",

public/locales/zh-CN/application.json

@@ -51,7 +51,8 @@
     "logout": "退出登录",
     "signingOut": "正在退出登录...",
     "loggedOut": "您已退出登录",
-    "clickToRefresh": "点击刷新验证码"
+    "clickToRefresh": "点击刷新验证码",
+    "switchLanguage": "切换语言"
   },
   "navbar": {
     "notBefore": "不早于",

public/locales/zh-TW/application.json

@@ -51,7 +51,8 @@
     "logout": "退出登入",
     "signingOut": "正在退出登入...",
     "loggedOut": "您已退出登入",
-    "clickToRefresh": "點選重新整理驗證碼"
+    "clickToRefresh": "點選重新整理驗證碼",
+    "switchLanguage": "切換語言"
   },
   "navbar": {
     "notBefore": "不早於",

src/component/Common/LanguageSwitcher.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import i18next from "i18next";
+import { languages } from "../../i18n";
+import { useTranslation } from "react-i18next";
+import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
+import Translate from "../Icons/Translate.tsx";
+
+const LanguageSwitcher: React.FC = () => {
+  const { t } = useTranslation();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Tooltip title={t("login.switchLanguage")}>
+        <IconButton onClick={handleClick} sx={{ ml: 1 }}>
+          <Translate />
+        </IconButton>
+      </Tooltip>
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+        {languages.map((lang) => (
+          <MenuItem
+            key={lang.code}
+            selected={i18next.language === lang.code}
+            onClick={() => {
+              i18next.changeLanguage(lang.code);
+              handleClose();
+            }}
+            sx={{ fontSize: 14 }}
+          >
+            {lang.displayName}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};
+
+export default LanguageSwitcher;

src/component/Frame/HeadlessFrame.tsx

@@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector } from "../../redux/hooks.ts";
 import AutoHeight from "../Common/AutoHeight.tsx";
 import CircularProgress from "../Common/CircularProgress.tsx";
 import Logo from "../Common/Logo.tsx";
+import LanguageSwitcher from "../Common/LanguageSwitcher.tsx";
 import PoweredBy from "./PoweredBy.tsx";
 
 const Loading = () => {
@@ -54,13 +55,23 @@ const HeadlessFrame = () => {
                 padding: (theme) => `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(3)}`,
               }}
             >
-              <Logo
+              <Box
                 sx={{
-                  maxWidth: "40%",
-                  maxHeight: "40px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
                   mb: 2,
                 }}
-              />
+              >
+                <Logo
+                  sx={{
+                    maxWidth: "40%",
+                    maxHeight: "40px",
+                  }}
+                />
+                {/* 语言切换按钮 */}
+                <LanguageSwitcher />
+              </Box>
               <AutoHeight>
                 <div>
                   <Box