feat: i18n supports

src/components/setting/setting-clash.tsx

@@ -1,5 +1,6 @@
 import useSWR, { useSWRConfig } from "swr";
 import { useSetRecoilState } from "recoil";
+import { useTranslation } from "react-i18next";
 import {
   ListItemText,
   TextField,
@@ -21,15 +22,16 @@ interface Props {
 }
 
 const SettingClash = ({ onError }: Props) => {
+  const { t } = useTranslation();
   const { mutate } = useSWRConfig();
   const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
   const { data: versionData } = useSWR("getVersion", getVersion);
 
   const {
-    ipv6 = false,
-    "allow-lan": allowLan = false,
-    "log-level": logLevel = "silent",
-    "mixed-port": mixedPort = 0,
+    ipv6,
+    "allow-lan": allowLan,
+    "log-level": logLevel,
+    "mixed-port": mixedPort,
   } = clashConfig ?? {};
 
   const setGlobalClashPort = useSetRecoilState(atomClashPort);
@@ -64,11 +66,11 @@ const SettingClash = ({ onError }: Props) => {
     : versionData?.version || "-";
 
   return (
-    <SettingList title="Clash Setting">
+    <SettingList title={t("Clash Setting")}>
       <SettingItem>
-        <ListItemText primary="Allow Lan" />
+        <ListItemText primary={t("Allow Lan")} />
         <GuardState
-          value={allowLan}
+          value={allowLan ?? false}
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
@@ -80,9 +82,9 @@ const SettingClash = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="IPv6" />
+        <ListItemText primary={t("IPv6")} />
         <GuardState
-          value={ipv6}
+          value={ipv6 ?? false}
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
@@ -94,9 +96,9 @@ const SettingClash = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Log Level" />
+        <ListItemText primary={t("Log Level")} />
         <GuardState
-          value={logLevel}
+          value={logLevel ?? "info"}
           onCatch={onError}
           onFormat={(e: any) => e.target.value}
           onChange={(e) => onChangeData({ "log-level": e })}
@@ -113,9 +115,9 @@ const SettingClash = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Mixed Port" />
+        <ListItemText primary={t("Mixed Port")} />
         <GuardState
-          value={mixedPort!}
+          value={mixedPort ?? 0}
           onCatch={onError}
           onFormat={(e: any) => +e.target.value?.replace(/\D+/, "")}
           onChange={(e) => onChangeData({ "mixed-port": e })}
@@ -127,7 +129,7 @@ const SettingClash = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Clash core" />
+        <ListItemText primary={t("Clash core")} />
         <Typography sx={{ py: 1 }}>{clashVer}</Typography>
       </SettingItem>
     </SettingList>

src/components/setting/setting-system.tsx

@@ -1,4 +1,5 @@
 import useSWR, { useSWRConfig } from "swr";
+import { useTranslation } from "react-i18next";
 import { Box, ListItemText, Switch, TextField } from "@mui/material";
 import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
 import { SettingList, SettingItem } from "./setting";
@@ -11,15 +12,16 @@ interface Props {
 }
 
 const SettingSystem = ({ onError }: Props) => {
+  const { t } = useTranslation();
   const { mutate } = useSWRConfig();
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
 
   const {
-    enable_tun_mode = false,
-    enable_auto_launch = false,
-    enable_system_proxy = false,
-    system_proxy_bypass = "",
-    enable_proxy_guard = false,
+    enable_tun_mode,
+    enable_auto_launch,
+    enable_system_proxy,
+    system_proxy_bypass,
+    enable_proxy_guard,
   } = vergeConfig ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
@@ -28,11 +30,11 @@ const SettingSystem = ({ onError }: Props) => {
   };
 
   return (
-    <SettingList title="System Setting">
+    <SettingList title={t("System Setting")}>
       <SettingItem>
-        <ListItemText primary="Tun Mode" />
+        <ListItemText primary={t("Tun Mode")} />
         <GuardState
-          value={enable_tun_mode}
+          value={enable_tun_mode ?? false}
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
@@ -44,9 +46,9 @@ const SettingSystem = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Auto Launch" />
+        <ListItemText primary={t("Auto Launch")} />
         <GuardState
-          value={enable_auto_launch}
+          value={enable_auto_launch ?? false}
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
@@ -61,13 +63,13 @@ const SettingSystem = ({ onError }: Props) => {
         <ListItemText
           primary={
             <Box sx={{ display: "flex", alignItems: "center" }}>
-              System Proxy
+              {t("System Proxy")}
               <SysproxyTooltip />
             </Box>
           }
         />
         <GuardState
-          value={enable_system_proxy}
+          value={enable_system_proxy ?? false}
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
@@ -83,9 +85,9 @@ const SettingSystem = ({ onError }: Props) => {
 
       {enable_system_proxy && (
         <SettingItem>
-          <ListItemText primary="Proxy Guard" />
+          <ListItemText primary={t("Proxy Guard")} />
           <GuardState
-            value={enable_proxy_guard}
+            value={enable_proxy_guard ?? false}
             valueProps="checked"
             onCatch={onError}
             onFormat={onSwitchFormat}
@@ -99,7 +101,7 @@ const SettingSystem = ({ onError }: Props) => {
 
       {enable_system_proxy && (
         <SettingItem>
-          <ListItemText primary="Proxy Bypass" />
+          <ListItemText primary={t("Proxy Bypass")} />
           <GuardState
             value={system_proxy_bypass ?? ""}
             onCatch={onError}

src/components/setting/setting-verge.tsx

@@ -1,5 +1,13 @@
 import useSWR, { useSWRConfig } from "swr";
-import { IconButton, ListItemText, Switch, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import {
+  IconButton,
+  ListItemText,
+  MenuItem,
+  Select,
+  Switch,
+  Typography,
+} from "@mui/material";
 import {
   getVergeConfig,
   openAppDir,
@@ -18,11 +26,11 @@ interface Props {
 }
 
 const SettingVerge = ({ onError }: Props) => {
+  const { t } = useTranslation();
   const { mutate } = useSWRConfig();
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
 
-  const { theme_mode = "light", theme_blur = false, traffic_graph } =
-    vergeConfig ?? {};
+  const { theme_mode, theme_blur, traffic_graph, language } = vergeConfig ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
@@ -30,9 +38,9 @@ const SettingVerge = ({ onError }: Props) => {
   };
 
   return (
-    <SettingList title="Verge Setting">
+    <SettingList title={t("Verge Setting")}>
       <SettingItem>
-        <ListItemText primary="Theme Mode" />
+        <ListItemText primary={t("Theme Mode")} />
         <GuardState
           value={theme_mode === "dark"}
           valueProps="checked"
@@ -48,9 +56,9 @@ const SettingVerge = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Theme Blur" />
+        <ListItemText primary={t("Theme Blur")} />
         <GuardState
-          value={theme_blur}
+          value={theme_blur ?? false}
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
@@ -62,7 +70,7 @@ const SettingVerge = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Traffic Graph" />
+        <ListItemText primary={t("Traffic Graph")} />
         <GuardState
           value={traffic_graph ?? true}
           valueProps="checked"
@@ -76,21 +84,37 @@ const SettingVerge = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Open App Dir" />
+        <ListItemText primary={t("Language")} />
+        <GuardState
+          value={language ?? "en"}
+          onCatch={onError}
+          onFormat={(e: any) => e.target.value}
+          onChange={(e) => onChangeData({ language: e })}
+          onGuard={(e) => patchVergeConfig({ language: e })}
+        >
+          <Select size="small" sx={{ width: 100 }}>
+            <MenuItem value="zh">中文</MenuItem>
+            <MenuItem value="en">English</MenuItem>
+          </Select>
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary={t("Open App Dir")} />
         <IconButton color="inherit" size="small" onClick={openAppDir}>
           <ArrowForward />
         </IconButton>
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Open Logs Dir" />
+        <ListItemText primary={t("Open Logs Dir")} />
         <IconButton color="inherit" size="small" onClick={openLogsDir}>
           <ArrowForward />
         </IconButton>
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Version" />
+        <ListItemText primary={t("Version")} />
         <Typography sx={{ py: "6px" }}>v{version}</Typography>
       </SettingItem>
     </SettingList>