feat: support random mixed port

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

@@ -4,30 +4,35 @@ import { useLockFn } from "ahooks";
 import { List, ListItem, ListItemText, TextField } from "@mui/material";
 import { useClashInfo } from "@/hooks/use-clash";
 import { BaseDialog, DialogRef, Notice } from "@/components/base";
+import { useVerge } from "@/hooks/use-verge";
 
 export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
   const { clashInfo, patchInfo } = useClashInfo();
+  const { verge, patchVerge } = useVerge();
 
   const [open, setOpen] = useState(false);
-  const [port, setPort] = useState(clashInfo?.port ?? 7890);
+  const [port, setPort] = useState(
+    verge?.verge_mixed_port ?? clashInfo?.port ?? 7890
+  );
 
   useImperativeHandle(ref, () => ({
     open: () => {
-      if (clashInfo?.port) setPort(clashInfo?.port);
+      if (verge?.verge_mixed_port) setPort(verge?.verge_mixed_port);
       setOpen(true);
     },
     close: () => setOpen(false),
   }));
 
   const onSave = useLockFn(async () => {
-    if (port === clashInfo?.port) {
+    if (port === verge?.verge_mixed_port) {
       setOpen(false);
       return;
     }
     try {
       await patchInfo({ "mixed-port": port });
+      await patchVerge({ verge_mixed_port: port });
       setOpen(false);
       Notice.success("Change Clash port successfully!", 1000);
     } catch (err: any) {

src/components/setting/setting-clash.tsx

@@ -7,9 +7,10 @@ import {
   MenuItem,
   Typography,
   IconButton,
+  Tooltip,
 } from "@mui/material";
-import { ArrowForward, Settings } from "@mui/icons-material";
-import { DialogRef } from "@/components/base";
+import { ArrowForward, Settings, Shuffle } from "@mui/icons-material";
+import { DialogRef, Notice } from "@/components/base";
 import { useClash } from "@/hooks/use-clash";
 import { GuardState } from "./mods/guard-state";
 import { WebUIViewer } from "./mods/web-ui-viewer";
@@ -20,6 +21,7 @@ import { SettingList, SettingItem } from "./mods/setting-comp";
 import { ClashCoreViewer } from "./mods/clash-core-viewer";
 import { invoke_uwp_tool } from "@/services/cmds";
 import getSystem from "@/utils/get-system";
+import { useVerge } from "@/hooks/use-verge";
 
 const isWIN = getSystem() === "windows";
 
@@ -32,12 +34,11 @@ const SettingClash = ({ onError }: Props) => {
 
   const { clash, version, mutateClash, patchClash } = useClash();
 
-  const {
-    ipv6,
-    "allow-lan": allowLan,
-    "log-level": logLevel,
-    "mixed-port": mixedPort,
-  } = clash ?? {};
+  const { verge, mutateVerge, patchVerge } = useVerge();
+
+  const { ipv6, "allow-lan": allowLan, "log-level": logLevel } = clash ?? {};
+
+  const { enable_random_port = false, verge_mixed_port } = verge ?? {};
 
   const webRef = useRef<DialogRef>(null);
   const fieldRef = useRef<DialogRef>(null);
@@ -49,7 +50,9 @@ const SettingClash = ({ onError }: Props) => {
   const onChangeData = (patch: Partial<IConfigData>) => {
     mutateClash((old) => ({ ...(old! || {}), ...patch }), false);
   };
-
+  const onChangeVerge = (patch: Partial<IVergeConfig>) => {
+    mutateVerge({ ...verge, ...patch }, false);
+  };
   return (
     <SettingList title={t("Clash Setting")}>
       <WebUIViewer ref={webRef} />
@@ -103,11 +106,32 @@ const SettingClash = ({ onError }: Props) => {
         </GuardState>
       </SettingItem>
 
-      <SettingItem label={t("Mixed Port")}>
+      <SettingItem
+        label={t("Mixed Port")}
+        extra={
+          <Tooltip title={t("Random Port")}>
+            <IconButton
+              color={enable_random_port ? "success" : "inherit"}
+              size="medium"
+              onClick={() => {
+                Notice.success(t("After restart to take effect"), 1000);
+                onChangeVerge({ enable_random_port: !enable_random_port });
+                patchVerge({ enable_random_port: !enable_random_port });
+              }}
+            >
+              <Shuffle
+                fontSize="inherit"
+                style={{ cursor: "pointer", opacity: 0.75 }}
+              />
+            </IconButton>
+          </Tooltip>
+        }
+      >
         <TextField
+          disabled={enable_random_port}
           autoComplete="off"
           size="small"
-          value={mixedPort ?? 0}
+          value={verge_mixed_port ?? 7890}
           sx={{ width: 100, input: { py: "7.5px", cursor: "pointer" } }}
           onClick={(e) => {
             portRef.current?.open();

src/locales/en.json

@@ -67,6 +67,8 @@
   "IPv6": "IPv6",
   "Log Level": "Log Level",
   "Mixed Port": "Mixed Port",
+  "Random Port": "Random Port",
+  "After restart to take effect": "After restart to take effect",
   "External": "External",
   "Clash Core": "Clash Core",
   "Grant": "Grant",

src/locales/ru.json

@@ -64,6 +64,8 @@
   "IPv6": "IPv6",
   "Log Level": "Уровень логов",
   "Mixed Port": "Смешанный порт",
+  "Random Port": "Случайный порт",
+  "After restart to take effect": "Чтобы изменения вступили в силу, необходимо перезапустить приложение",
   "Clash Core": "Ядро Clash",
   "Tun Mode": "Режим туннеля",
   "Service Mode": "Режим сервиса",

src/locales/zh.json

@@ -67,6 +67,8 @@
   "IPv6": "IPv6",
   "Log Level": "日志等级",
   "Mixed Port": "端口设置",
+  "Random Port": "随机端口",
+  "After restart to take effect": "重启后生效",
   "External": "外部控制",
   "Clash Core": "Clash 内核",
   "Grant": "授权",

src/services/types.d.ts

@@ -166,6 +166,8 @@ interface IVergeConfig {
   enable_service_mode?: boolean;
   enable_silent_start?: boolean;
   enable_system_proxy?: boolean;
+  enable_random_port?: boolean;
+  verge_mixed_port?: number;
   enable_proxy_guard?: boolean;
   proxy_guard_duration?: number;
   system_proxy_bypass?: string;