chore: resolve deprecation warnings and add missing translations

src/components/setting/mods/clash-port-viewer.tsx

@@ -20,8 +20,6 @@ import getSystem from "@/utils/get-system";
 
 const OS = getSystem();
 
-interface ClashPortViewerProps {}
-
 interface ClashPortViewerRef {
   open: () => void;
   close: () => void;
@@ -30,10 +28,7 @@ interface ClashPortViewerRef {
 const generateRandomPort = () =>
   Math.floor(Math.random() * (65535 - 1025 + 1)) + 1025;
 
-export const ClashPortViewer = forwardRef<
+export const ClashPortViewer = forwardRef<ClashPortViewerRef>((_, ref) => {
-  ClashPortViewerRef,
-  ClashPortViewerProps
->((props, ref) => {
   const { t } = useTranslation();
   const { clashInfo, patchInfo } = useClashInfo();
   const { verge, patchVerge } = useVerge();
@@ -74,10 +69,10 @@ export const ClashPortViewer = forwardRef<
       manual: true,
       onSuccess: () => {
         setOpen(false);
-        showNotice("success", t("Port settings saved")); // 调用提示函数
+        showNotice("success", t("Port settings saved"));
       },
       onError: () => {
-        showNotice("error", t("Failed to save settings")); // 调用提示函数
+        showNotice("error", t("Failed to save port settings"));
       },
     },
   );
@@ -154,7 +149,7 @@ export const ClashPortViewer = forwardRef<
   return (
     <BaseDialog
       open={open}
-      title={t("Port Configuration")}
+      title={t("Port Config")}
       contentSx={{
         width: 400,
       }}
@@ -177,7 +172,7 @@ export const ClashPortViewer = forwardRef<
         <ListItem sx={{ padding: "4px 0", minHeight: 36 }}>
           <ListItemText
             primary={t("Mixed Port")}
-            primaryTypographyProps={{ fontSize: 12 }}
+            slotProps={{ primary: { sx: { fontSize: 12 } } }}
           />
           <div style={{ display: "flex", alignItems: "center" }}>
             <TextField
@@ -187,7 +182,7 @@ export const ClashPortViewer = forwardRef<
               onChange={(e) =>
                 setMixedPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
               }
-              inputProps={{ style: { fontSize: 12 } }}
+              slotProps={{ htmlInput: { style: { fontSize: 12 } } }}
             />
             <IconButton
               size="small"
@@ -209,7 +204,7 @@ export const ClashPortViewer = forwardRef<
         <ListItem sx={{ padding: "4px 0", minHeight: 36 }}>
           <ListItemText
             primary={t("Socks Port")}
-            primaryTypographyProps={{ fontSize: 12 }}
+            slotProps={{ primary: { sx: { fontSize: 12 } } }}
           />
           <div style={{ display: "flex", alignItems: "center" }}>
             <TextField
@@ -220,7 +215,7 @@ export const ClashPortViewer = forwardRef<
                 setSocksPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
               }
               disabled={!socksEnabled}
-              inputProps={{ style: { fontSize: 12 } }}
+              slotProps={{ htmlInput: { style: { fontSize: 12 } } }}
             />
             <IconButton
               size="small"
@@ -243,7 +238,7 @@ export const ClashPortViewer = forwardRef<
         <ListItem sx={{ padding: "4px 0", minHeight: 36 }}>
           <ListItemText
             primary={t("Http Port")}
-            primaryTypographyProps={{ fontSize: 12 }}
+            slotProps={{ primary: { sx: { fontSize: 12 } } }}
           />
           <div style={{ display: "flex", alignItems: "center" }}>
             <TextField
@@ -254,7 +249,7 @@ export const ClashPortViewer = forwardRef<
                 setHttpPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
               }
               disabled={!httpEnabled}
-              inputProps={{ style: { fontSize: 12 } }}
+              slotProps={{ htmlInput: { style: { fontSize: 12 } } }}
             />
             <IconButton
               size="small"
@@ -278,7 +273,7 @@ export const ClashPortViewer = forwardRef<
           <ListItem sx={{ padding: "4px 0", minHeight: 36 }}>
             <ListItemText
               primary={t("Redir Port")}
-              primaryTypographyProps={{ fontSize: 12 }}
+              slotProps={{ primary: { sx: { fontSize: 12 } } }}
             />
             <div style={{ display: "flex", alignItems: "center" }}>
               <TextField
@@ -289,7 +284,7 @@ export const ClashPortViewer = forwardRef<
                   setRedirPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
                 }
                 disabled={!redirEnabled}
-                inputProps={{ style: { fontSize: 12 } }}
+                slotProps={{ htmlInput: { style: { fontSize: 12 } } }}
               />
               <IconButton
                 size="small"
@@ -314,7 +309,7 @@ export const ClashPortViewer = forwardRef<
           <ListItem sx={{ padding: "4px 0", minHeight: 36 }}>
             <ListItemText
               primary={t("Tproxy Port")}
-              primaryTypographyProps={{ fontSize: 12 }}
+              slotProps={{ primary: { sx: { fontSize: 12 } } }}
             />
             <div style={{ display: "flex", alignItems: "center" }}>
               <TextField
@@ -325,7 +320,7 @@ export const ClashPortViewer = forwardRef<
                   setTproxyPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
                 }
                 disabled={!tproxyEnabled}
-                inputProps={{ style: { fontSize: 12 } }}
+                slotProps={{ htmlInput: { style: { fontSize: 12 } } }}
               />
               <IconButton
                 size="small"

src/locales/de.json

@@ -254,7 +254,6 @@
   "Unified Delay Info": "Wenn die einheitliche Latenz aktiviert ist, werden zwei Latenztests durchgeführt, um die Latenzunterschiede zwischen verschiedenen Knotentypen aufgrund von Verbindungsaufbau und anderen Faktoren zu eliminieren.",
   "Log Level": "Protokolliergrad",
   "Log Level Info": "Dies wirkt sich nur auf die Kernprotokolldateien im Verzeichnis Service im Protokollverzeichnis aus.",
-  "Port Configuration": "Porteinstellungen",
   "Random Port": "Zufälliger Port",
   "Mixed Port": "Mischter Proxy-Port",
   "Socks Port": "SOCKS-Proxy-Port",

src/locales/en.json

@@ -303,6 +303,8 @@
   "Http Port": "Http(s) Port",
   "Redir Port": "Redir Port",
   "Tproxy Port": "Tproxy Port",
+  "Port settings saved": "Port settings saved",
+  "Failed to save port settings": "Failed to save port settings",
   "External": "External",
   "Enable External Controller": "Enable External Controller",
   "External Controller": "External Controller",

src/locales/es.json

@@ -254,7 +254,6 @@
   "Unified Delay Info": "Al habilitar la latencia unificada, se realizarán dos pruebas de latencia para eliminar las diferencias de latencia entre diferentes tipos de nodos causadas por el handshake de conexión, etc.",
   "Log Level": "Nivel de registro",
   "Log Level Info": "Solo se aplica al archivo de registro del núcleo en la carpeta Service del directorio de registros.",
-  "Port Configuration": "Configuración de puertos",
   "Random Port": "Puerto aleatorio",
   "Mixed Port": "Puerto de proxy mixto",
   "Socks Port": "Puerto de proxy SOCKS",

src/locales/jp.json

@@ -254,7 +254,6 @@
   "Unified Delay Info": "統一遅延を有効にすると、2回の遅延テストが行われ、接続ハンドシェイクなどによる異なるタイプのノードの遅延差を解消します。",
   "Log Level": "ログレベル",
   "Log Level Info": "ログディレクトリのServiceフォルダ内のコアログファイルにのみ適用されます。",
-  "Port Configuration": "ポート設定",
   "Random Port": "ランダムポート",
   "Mixed Port": "混合プロキシポート",
   "Socks Port": "SOCKSプロキシポート",

src/locales/zh.json

@@ -303,6 +303,8 @@
   "Http Port": "HTTP(S) 代理端口",
   "Redir Port": "Redir 透明代理端口",
   "TPROXY Port": "TPROXY 透明代理端口",
+  "Port settings saved": "端口设置已保存",
+  "Failed to save port settings": "端口设置保存失败",
   "External": "外部控制",
   "Enable External Controller": "启用外部控制器",
   "External Controller": "外部控制器监听地址",

src/locales/zhtw.json

@@ -259,7 +259,6 @@
   "Unified Delay Info": "開啟統一延遲時，會進行兩次延遲測試，以消除連接握手等帶來的不同類型節點的延遲差異",
   "Log Level": "日誌等級",
   "Log Level Info": "僅對日誌目錄 Service 文件夾下的內核日誌文件生效",
-  "Port Configuration": "端口設置",
   "Random Port": "隨機端口",
   "Mixed Port": "混合代理端口",
   "Socks Port": "SOCKS 代理端口",