feat(i18n): 添加个人资料和OAuth页面的多语言支持

1oca1h0st · 1oca1h0st · commit 5cf4cfc70213 · 2025-12-27T11:00:07.000+08:00
diff --git a/web/src/locales/en-US/oauth.json b/web/src/locales/en-US/oauth.json
@@ -0,0 +1,27 @@
+{
+  "error": {
+    "title": "OAuth2 Login Issue",
+    "loginFailed": "Login Failed",
+    "errorDetails": "Error Details",
+    "provider": "Provider",
+    "providers": {
+      "github": "GitHub",
+      "cloudflare": "Cloudflare"
+    },
+    "reasons": {
+      "title": "Possible reasons:",
+      "reason1": "• System is already bound to another OAuth2 account",
+      "reason2": "• Each system can only bind one OAuth2 user",
+      "reason3": "• Please contact the administrator or log in with the bound account"
+    },
+    "actions": {
+      "retryLogin": "Retry Login",
+      "goHome": "Go Home"
+    },
+    "help": "If you need help, please contact the system administrator",
+    "defaultError": "OAuth2 login failed"
+  },
+  "success": {
+    "processing": "Completing authentication..."
+  }
+}
diff --git a/web/src/locales/en-US/settings.json b/web/src/locales/en-US/settings.json
@@ -95,6 +95,27 @@
       "resetSuccessDesc": "Settings have been restored to default values"
     }
   },
+  "profile": {
+    "title": "Personal Profile",
+    "description": "Manage your personal information and account settings",
+    "avatar": {
+      "title": "Avatar",
+      "description": "Upload your avatar image, square images recommended",
+      "uploadButton": "Upload New Avatar"
+    },
+    "fields": {
+      "username": "Username",
+      "usernamePlaceholder": "Enter username",
+      "email": "Email Address",
+      "emailPlaceholder": "Enter email address",
+      "password": "Change Password",
+      "passwordPlaceholder": "Enter new password"
+    },
+    "actions": {
+      "reset": "Reset",
+      "save": "Save Changes"
+    }
+  },
   "security": {
     "basic": {
       "title": "Basic Security Settings",
diff --git a/web/src/locales/zh-CN/oauth.json b/web/src/locales/zh-CN/oauth.json
@@ -0,0 +1,27 @@
+{
+  "error": {
+    "title": "OAuth2 登录遇到问题",
+    "loginFailed": "登录失败",
+    "errorDetails": "错误详情",
+    "provider": "提供者",
+    "providers": {
+      "github": "GitHub",
+      "cloudflare": "Cloudflare"
+    },
+    "reasons": {
+      "title": "可能的原因：",
+      "reason1": "• 可能的原因：系统已绑定其他 OAuth2 账户",
+      "reason2": "• 每个系统只能绑定一个 OAuth2 用户",
+      "reason3": "• 请联系管理员或使用已绑定的账户登录"
+    },
+    "actions": {
+      "retryLogin": "重新登录",
+      "goHome": "返回首页"
+    },
+    "help": "如需帮助，请联系系统管理员",
+    "defaultError": "OAuth2 登录失败"
+  },
+  "success": {
+    "processing": "正在完成认证..."
+  }
+}
diff --git a/web/src/locales/zh-CN/settings.json b/web/src/locales/zh-CN/settings.json
@@ -95,6 +95,27 @@
       "resetSuccessDesc": "设置已恢复默认值"
     }
   },
+  "profile": {
+    "title": "个人资料",
+    "description": "管理您的个人资料信息和账户设置",
+    "avatar": {
+      "title": "头像",
+      "description": "上传您的头像图片，建议使用正方形图片",
+      "uploadButton": "上传新头像"
+    },
+    "fields": {
+      "username": "用户名",
+      "usernamePlaceholder": "请输入用户名",
+      "email": "邮箱地址",
+      "emailPlaceholder": "请输入邮箱地址",
+      "password": "修改密码",
+      "passwordPlaceholder": "输入新密码"
+    },
+    "actions": {
+      "reset": "重置",
+      "save": "保存更改"
+    }
+  },
   "security": {
     "basic": {
       "title": "基础安全设置",
diff --git a/web/src/pages/oauth-error/index.tsx b/web/src/pages/oauth-error/index.tsx
@@ -4,6 +4,7 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 import { useTheme } from "next-themes";
 import { useIsSSR } from "@react-aria/ssr";
 import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faShieldAlt,
@@ -14,6 +15,7 @@ import {
 
 export default function OAuthErrorPage() {
   const navigate = useNavigate();
+  const { t } = useTranslation("oauth");
   const [searchParams] = useSearchParams();
   const [errorMessage, setErrorMessage] = useState("");
   const [provider, setProvider] = useState("");
@@ -25,12 +27,12 @@ export default function OAuthErrorPage() {
 
   useEffect(() => {
     // 从 URL 参数获取错误信息
-    const error = searchParams.get("error") || "OAuth2 登录失败";
+    const error = searchParams.get("error") || t("error.defaultError");
     const providerParam = searchParams.get("provider") || "";
 
     setErrorMessage(decodeURIComponent(error));
     setProvider(providerParam);
-  }, [searchParams]);
+  }, [searchParams, t]);
 
   const handleRetryLogin = () => {
     navigate("/login");
@@ -66,7 +68,7 @@ export default function OAuthErrorPage() {
               <h1 className="text-2xl font-bold text-foreground">
                 NodePassDash
               </h1>
-              <p className="text-small text-default-500">OAuth2 登录遇到问题</p>
+              <p className="text-small text-default-500">{t("error.title")}</p>
             </CardHeader>
 
             <CardBody className="px-8 pb-8">
@@ -89,32 +91,32 @@ export default function OAuthErrorPage() {
                 {/* 错误信息 */}
                 <div className="text-center space-y-3">
                   <h2 className="text-xl font-semibold text-danger">
-                    登录失败
+                    {t("error.loginFailed")}
                   </h2>
 
                   <div className="p-4 bg-danger-50 border border-danger-200 rounded-lg">
                     <p className="text-danger text-sm font-medium mb-2">
-                      错误详情
+                      {t("error.errorDetails")}
                     </p>
                     <p className="text-danger-600 text-xs break-words">
                       {errorMessage}
                     </p>
                     {provider && (
                       <p className="text-danger-500 text-xs mt-2">
-                        提供者:{" "}
+                        {t("error.provider")}:{" "}
                         {provider === "github"
-                          ? "GitHub"
+                          ? t("error.providers.github")
                           : provider === "cloudflare"
-                            ? "Cloudflare"
+                            ? t("error.providers.cloudflare")
                             : provider}
                       </p>
                     )}
                   </div>
 
                   <div className="text-small text-default-500 space-y-1">
-                    <p>• 可能的原因：系统已绑定其他 OAuth2 账户</p>
-                    <p>• 每个系统只能绑定一个 OAuth2 用户</p>
-                    <p>• 请联系管理员或使用已绑定的账户登录</p>
+                    <p>{t("error.reasons.reason1")}</p>
+                    <p>{t("error.reasons.reason2")}</p>
+                    <p>{t("error.reasons.reason3")}</p>
                   </div>
                 </div>
 
@@ -127,7 +129,7 @@ export default function OAuthErrorPage() {
                     startContent={<FontAwesomeIcon icon={faRedo} />}
                     onPress={handleRetryLogin}
                   >
-                    重新登录
+                    {t("error.actions.retryLogin")}
                   </Button>
 
                   <Button
@@ -138,15 +140,15 @@ export default function OAuthErrorPage() {
                     variant="bordered"
                     onPress={handleGoHome}
                   >
-                    返回首页
+                    {t("error.actions.goHome")}
                   </Button>
                 </div>
 
                 {/* 帮助信息 */}
                 <div className="text-center">
                   <div className="inline-flex items-center gap-2 text-xs text-default-400">
                     <FontAwesomeIcon icon={faInfoCircle} />
-                    <span>如需帮助，请联系系统管理员</span>
+                    <span>{t("error.help")}</span>
                   </div>
                 </div>
               </motion.div>
diff --git a/web/src/pages/oauth-success/index.tsx b/web/src/pages/oauth-success/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { Spinner } from "@heroui/react";
+import { useTranslation } from "react-i18next";
 
 import { useAuth } from "@/components/auth/auth-provider";
 
@@ -10,6 +11,7 @@ import { useAuth } from "@/components/auth/auth-provider";
  */
 export default function OAuthSuccessPage() {
   const navigate = useNavigate();
+  const { t } = useTranslation("oauth");
   const [searchParams] = useSearchParams();
   const { setToken, setUserDirectly } = useAuth();
 
@@ -55,7 +57,7 @@ export default function OAuthSuccessPage() {
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-default-100">
       <div className="text-center">
         <Spinner size="lg" />
-        <p className="mt-4 text-default-500">正在完成认证...</p>
+        <p className="mt-4 text-default-500">{t("success.processing")}</p>
       </div>
     </div>
   );
diff --git a/web/src/pages/settings/components/profile-settings.tsx b/web/src/pages/settings/components/profile-settings.tsx
@@ -7,6 +7,7 @@ import {
   Button,
   Avatar,
 } from "@heroui/react";
+import { useTranslation } from "react-i18next";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faUser,
@@ -16,13 +17,15 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 export function ProfileSettings() {
+  const { t } = useTranslation("settings");
+
   return (
     <Card>
       <CardHeader>
         <div className="flex flex-col gap-1">
-          <h3 className="text-xl font-semibold text-foreground">个人资料</h3>
+          <h3 className="text-xl font-semibold text-foreground">{t("profile.title")}</h3>
           <p className="text-small text-default-500">
-            管理您的个人资料信息和账户设置
+            {t("profile.description")}
           </p>
         </div>
       </CardHeader>
@@ -35,12 +38,12 @@ export function ProfileSettings() {
             src="https://ui.shadcn.com/avatars/01.png"
           />
           <div>
-            <h4 className="text-lg font-medium text-foreground">头像</h4>
+            <h4 className="text-lg font-medium text-foreground">{t("profile.avatar.title")}</h4>
             <p className="text-small text-default-500">
-              上传您的头像图片，建议使用正方形图片
+              {t("profile.avatar.description")}
             </p>
             <Button className="mt-2" color="primary" size="sm" variant="light">
-              上传新头像
+              {t("profile.avatar.uploadButton")}
             </Button>
           </div>
         </div>
@@ -56,8 +59,8 @@ export function ProfileSettings() {
                   icon={faCircleCheck}
                 />
               }
-              label="用户名"
-              placeholder="请输入用户名"
+              label={t("profile.fields.username")}
+              placeholder={t("profile.fields.usernamePlaceholder")}
               startContent={
                 <FontAwesomeIcon
                   className="text-default-400 pointer-events-none flex-shrink-0"
@@ -71,8 +74,8 @@ export function ProfileSettings() {
           <div className="space-y-2">
             <Input
               defaultValue="admin@example.com"
-              label="邮箱地址"
-              placeholder="请输入邮箱地址"
+              label={t("profile.fields.email")}
+              placeholder={t("profile.fields.emailPlaceholder")}
               startContent={
                 <FontAwesomeIcon
                   className="text-default-400 pointer-events-none flex-shrink-0"
@@ -86,8 +89,8 @@ export function ProfileSettings() {
           {/* Password */}
           <div className="space-y-2">
             <Input
-              label="修改密码"
-              placeholder="输入新密码"
+              label={t("profile.fields.password")}
+              placeholder={t("profile.fields.passwordPlaceholder")}
               startContent={
                 <FontAwesomeIcon
                   className="text-default-400 pointer-events-none flex-shrink-0"
@@ -102,9 +105,9 @@ export function ProfileSettings() {
         {/* Actions */}
         <div className="flex justify-end gap-3 pt-4">
           <Button color="danger" variant="light">
-            重置
+            {t("profile.actions.reset")}
           </Button>
-          <Button color="primary">保存更改</Button>
+          <Button color="primary">{t("profile.actions.save")}</Button>
         </div>
       </CardBody>
     </Card>
