feat(i18n): add i18n for setting page

Author: AprilNEA

packages/frontend/src/locales/en-US/messages.po

@@ -35,6 +35,10 @@ msgstr "💡 The most common parameters used by services is a <0>period of 30 se
 msgid "AAGUID"
 msgstr "AAGUID"
 
+#: src/pages/settings.tsx:399
+msgid "About"
+msgstr "About"
+
 #: src/utilities/cryptography/fido/fido2.tsx:860
 msgid "About FIDO2"
 msgstr "About FIDO2"
@@ -70,6 +74,10 @@ msgstr "Algorithm:"
 msgid "Allow storing credentials on device"
 msgstr "Allow storing credentials on device"
 
+#: src/pages/settings.tsx:206
+msgid "Appearance"
+msgstr "Appearance"
+
 #: src/utilities/cryptography/fido/fido2.tsx:369
 msgid "Attestation"
 msgstr "Attestation"
@@ -154,6 +162,10 @@ msgstr "Based on your secret"
 msgid "Broadcast Address"
 msgstr "Broadcast Address"
 
+#: src/pages/settings.tsx:432
+msgid "Bug Reports and Feature Requests"
+msgstr "Bug Reports and Feature Requests"
+
 #: src/utilities/cryptography/oath/totp.tsx:165
 msgid "By default and to be compatible with Google Authenticator, the issuer is set in the query parameters and as the label prefix."
 msgstr "By default and to be compatible with Google Authenticator, the issuer is set in the query parameters and as the label prefix."
@@ -171,6 +183,10 @@ msgstr "Calculation Results"
 msgid "Challenge"
 msgstr "Challenge"
 
+#: src/pages/settings.tsx:419
+msgid "Change Log"
+msgstr "Change Log"
+
 #: src/utilities/cryptography/oath/totp.tsx:883
 msgid "Check Code"
 msgstr "Check Code"
@@ -183,6 +199,10 @@ msgstr "Check TOTP Code"
 msgid "CHECK TOTP CODE"
 msgstr "CHECK TOTP CODE"
 
+#: src/pages/settings.tsx:156
+msgid "Checking for updates"
+msgstr "Checking for updates"
+
 #: src/utilities/cryptography/oath/totp.tsx:714
 msgid "Checking..."
 msgstr "Checking..."
@@ -345,6 +365,10 @@ msgstr "Digits"
 msgid "Digits:"
 msgstr "Digits:"
 
+#: src/pages/settings.tsx:235
+msgid "Display Language"
+msgstr "Display Language"
+
 #: src/utilities/cryptography/fido/fido2.tsx:326
 msgid "Display Name"
 msgstr "Display Name"
@@ -406,6 +430,10 @@ msgstr "FIDO2 Authenticator"
 msgid "FIDO2 is a standard for passwordless authentication using public-key cryptography."
 msgstr "FIDO2 is a standard for passwordless authentication using public-key cryptography."
 
+#: src/pages/settings.tsx:448
+msgid "Follow DevUtility"
+msgstr "Follow DevUtility"
+
 #: src/utilities/cryptography/oath/totp.tsx:148
 msgid "For e.g the users email address. You must set label before to generate ProvisioningURI/QR code"
 msgstr "For e.g the users email address. You must set label before to generate ProvisioningURI/QR code"
@@ -418,6 +446,10 @@ msgstr "For subnetting and CIDR conversion. Enter data on the left, view results
 msgid "Format / Validate / Minify"
 msgstr "Format / Validate / Minify"
 
+#: src/pages/settings.tsx:203
+msgid "General"
+msgstr "General"
+
 #: src/utilities/cryptography/oath/totp.tsx:872
 msgid "Generate Code"
 msgstr "Generate Code"
@@ -817,6 +849,22 @@ msgstr "TOTP QR Code"
 msgid "Unknown"
 msgstr "Unknown"
 
+#: src/pages/settings.tsx:161
+msgid "Up to date"
+msgstr "Up to date"
+
+#: src/pages/settings.tsx:147
+msgid "Update"
+msgstr "Update"
+
+#: src/pages/settings.tsx:171
+msgid "Update Now"
+msgstr "Update Now"
+
+#: src/pages/settings.tsx:151
+msgid "Updating"
+msgstr "Updating"
+
 #: src/utilities/network/ip.tsx:306
 msgid "Usable Host Range"
 msgstr "Usable Host Range"
@@ -892,3 +940,7 @@ msgstr "windows"
 #: src/utilities/cryptography/oath/totp.tsx:224
 msgid "You must verify that the algorithm you want to use is supported by the application your clients might be using."
 msgstr "You must verify that the algorithm you want to use is supported by the application your clients might be using."
+
+#: src/pages/settings.tsx:251
+msgid "Zoom"
+msgstr "Zoom"

packages/frontend/src/pages/settings.tsx

@@ -13,6 +13,7 @@
  * See LICENSE file for details or contact [email protected]
  */
 
+import { Trans } from "@lingui/react/macro";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { check } from "@tauri-apps/plugin-updater";
 import {
@@ -45,7 +46,7 @@ import {
 import { Separator } from "@/components/ui/separator";
 
 interface SettingItemProps {
-  title: string;
+  title: React.ReactNode;
   description?: string;
   children: React.ReactNode;
 }
@@ -143,21 +144,21 @@ const UpdateItem = () => {
   );
 
   return (
-    <SettingItem title="更新">
+    <SettingItem title={<Trans>Update</Trans>}>
       <div className="flex items-center gap-3">
         {isUpdating ? (
           <Badge variant="secondary" className="text-xs">
-            正在更新中
+            <Trans>Updating</Trans>
             <Loader2Icon className="h-3 w-3 animate-spin" />
           </Badge>
         ) : isLoading ? (
           <Badge variant="secondary" className="text-xs">
-            检查更新中
+            <Trans>Checking for updates</Trans>
             <Loader2Icon className="h-3 w-3 animate-spin" />
           </Badge>
         ) : update === null ? (
           <Badge variant="secondary" className="text-xs">
-            已是最新
+            <Trans>Up to date</Trans>
           </Badge>
         ) : (
           <Button
@@ -167,7 +168,7 @@ const UpdateItem = () => {
               setIsUpdating(true);
             }}
           >
-            立刻更新
+            <Trans>Update Now</Trans>
           </Button>
         )}
       </div>
@@ -199,10 +200,10 @@ export default function SettingsPage() {
         {/* 通用设置 */}
         <Card>
           <CardHeader className="pb-4">
-            <CardTitle className="text-base font-medium">通用</CardTitle>
+            <CardTitle className="text-base font-medium"><Trans>General</Trans></CardTitle>
           </CardHeader>
           <CardContent className="space-y-6">
-            <SettingItem title="外观">
+            <SettingItem title={<Trans>Appearance</Trans>}>
               <div className="flex items-center gap-1 rounded-lg border p-1">
                 <Button
                   variant={settings.theme === "system" ? "secondary" : "ghost"}
@@ -231,7 +232,7 @@ export default function SettingsPage() {
               </div>
             </SettingItem>
 
-            <SettingItem title="显示语言">
+            <SettingItem title={<Trans>Display Language</Trans>}>
               <Select
                 value={settings.language}
                 onValueChange={(value) => updateSetting("language", value)}
@@ -247,7 +248,7 @@ export default function SettingsPage() {
               </Select>
             </SettingItem>
 
-            <SettingItem title="缩放">
+            <SettingItem title={<Trans>Zoom</Trans>}>
               <div className="flex items-center gap-2">
                 <Button
                   variant="outline"
@@ -395,7 +396,7 @@ export default function SettingsPage() {
         {/* 关于 */}
         <Card>
           <CardHeader className="pb-4">
-            <CardTitle className="text-base font-medium">关于</CardTitle>
+            <CardTitle className="text-base font-medium"><Trans>About</Trans></CardTitle>
           </CardHeader>
           <CardContent className="space-y-6">
             <UpdateItem />
@@ -415,7 +416,7 @@ export default function SettingsPage() {
                   className="flex items-center gap-1 hover:text-foreground transition-colors"
                 >
                   <DownloadIcon className="h-3.5 w-3.5" />
-                  更新记录
+                  <Trans>Change Log</Trans>
                 </button>
                 <button
                   type="button"
@@ -428,7 +429,7 @@ export default function SettingsPage() {
                   className="flex items-center gap-1 hover:text-foreground transition-colors"
                 >
                   <InfoIcon className="h-3.5 w-3.5" />
-                  错误报告和功能请求
+                  <Trans>Bug Reports and Feature Requests</Trans>
                 </button>
                 {/* <button
                   type="button"
@@ -444,7 +445,7 @@ export default function SettingsPage() {
 
             <div className="flex items-center justify-between text-sm text-muted-foreground">
               <div className="flex items-center gap-6">
-                <span>关注 DevUtility</span>
+                <span><Trans>Follow DevUtility</Trans></span>
                 {/* <span>隐私政策</span> */}
               </div>
               <div className="flex items-center gap-4">