feat: Allow disable unused ports

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

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 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 { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
 import { useVerge } from "@/hooks/use-verge";
 import getSystem from "@/utils/get-system";
 const OS = getSystem();
@@ -18,26 +18,42 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
   const [redirPort, setRedirPort] = useState(
     verge?.verge_redir_port ?? clashInfo?.redir_port ?? 7895
   );
+  const [redirEnabled, setRedirEnabled] = useState(
+    verge?.verge_redir_enabled ?? true
+  );
   const [tproxyPort, setTproxyPort] = useState(
     verge?.verge_tproxy_port ?? clashInfo?.tproxy_port ?? 7896
   );
+  const [tproxyEnabled, setTproxyEnabled] = useState(
+    verge?.verge_tproxy_enabled ?? true
+  );
   const [mixedPort, setMixedPort] = useState(
     verge?.verge_mixed_port ?? clashInfo?.mixed_port ?? 7897
   );
   const [socksPort, setSocksPort] = useState(
     verge?.verge_socks_port ?? clashInfo?.socks_port ?? 7898
   );
+  const [socksEnabled, setSocksEnabled] = useState(
+    verge?.verge_socks_enabled ?? true
+  );
   const [port, setPort] = useState(
     verge?.verge_port ?? clashInfo?.port ?? 7899
   );
+  const [httpEnabled, setHttpEnabled] = useState(
+    verge?.verge_http_enabled ?? true
+  );
 
   useImperativeHandle(ref, () => ({
     open: () => {
       if (verge?.verge_redir_port) setRedirPort(verge?.verge_redir_port);
+      setRedirEnabled(verge?.verge_redir_enabled ?? true);
       if (verge?.verge_tproxy_port) setTproxyPort(verge?.verge_tproxy_port);
+      setTproxyEnabled(verge?.verge_tproxy_enabled ?? true);
       if (verge?.verge_mixed_port) setMixedPort(verge?.verge_mixed_port);
       if (verge?.verge_socks_port) setSocksPort(verge?.verge_socks_port);
+      setSocksEnabled(verge?.verge_socks_enabled ?? true);
       if (verge?.verge_port) setPort(verge?.verge_port);
+      setHttpEnabled(verge?.verge_http_enabled ?? true);
       setOpen(true);
     },
     close: () => setOpen(false),
@@ -49,7 +65,11 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
       tproxyPort === verge?.verge_tproxy_port &&
       mixedPort === verge?.verge_mixed_port &&
       socksPort === verge?.verge_socks_port &&
-      port === verge?.verge_port
+      port === verge?.verge_port &&
+      redirEnabled === verge?.verge_redir_enabled &&
+      tproxyEnabled === verge?.verge_tproxy_enabled &&
+      socksEnabled === verge?.verge_socks_enabled &&
+      httpEnabled === verge?.verge_http_enabled
     ) {
       setOpen(false);
       return;
@@ -77,10 +97,12 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
       if (OS !== "windows") {
         await patchInfo({ "redir-port": redirPort });
         await patchVerge({ verge_redir_port: redirPort });
+        await patchVerge({ verge_redir_enabled: redirEnabled });
       }
       if (OS === "linux") {
         await patchInfo({ "tproxy-port": tproxyPort });
         await patchVerge({ verge_tproxy_port: tproxyPort });
+        await patchVerge({ verge_tproxy_enabled: tproxyEnabled });
       }
       await patchInfo({ "mixed-port": mixedPort });
       await patchInfo({ "socks-port": socksPort });
@@ -88,6 +110,8 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
       await patchVerge({ verge_mixed_port: mixedPort });
       await patchVerge({ verge_socks_port: socksPort });
       await patchVerge({ verge_port: port });
+      await patchVerge({ verge_socks_enabled: socksEnabled });
+      await patchVerge({ verge_http_enabled: httpEnabled });
       setOpen(false);
       Notice.success("Change Clash port successfully!", 1000);
     } catch (err: any) {
@@ -107,35 +131,6 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
       onOk={onSave}
     >
       <List>
-        {OS !== "windows" && (
-          <ListItem sx={{ padding: "5px 2px" }}>
-            <ListItemText primary="Redir Port" />
-            <TextField
-              size="small"
-              autoComplete="off"
-              sx={{ width: 135 }}
-              value={redirPort}
-              onChange={(e) =>
-                setRedirPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
-              }
-            />
-          </ListItem>
-        )}
-        {OS === "linux" && (
-          <ListItem sx={{ padding: "5px 2px" }}>
-            <ListItemText primary="Tproxy Port" />
-            <TextField
-              size="small"
-              autoComplete="off"
-              sx={{ width: 135 }}
-              value={tproxyPort}
-              onChange={(e) =>
-                setTproxyPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
-              }
-            />
-          </ListItem>
-        )}
-
         <ListItem sx={{ padding: "5px 2px" }}>
           <ListItemText primary="Mixed Port" />
           <TextField
@@ -158,6 +153,17 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
             onChange={(e) =>
               setSocksPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
             }
+            InputProps={{
+              sx: { pr: 1 },
+              endAdornment: (
+                <Switch
+                  checked={socksEnabled}
+                  onChange={(_, c) => {
+                    setSocksEnabled(c);
+                  }}
+                />
+              ),
+            }}
           />
         </ListItem>
         <ListItem sx={{ padding: "5px 2px" }}>
@@ -170,8 +176,69 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
             onChange={(e) =>
               setPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
             }
+            InputProps={{
+              sx: { pr: 1 },
+              endAdornment: (
+                <Switch
+                  checked={httpEnabled}
+                  onChange={(_, c) => {
+                    setHttpEnabled(c);
+                  }}
+                />
+              ),
+            }}
           />
         </ListItem>
+        {OS !== "windows" && (
+          <ListItem sx={{ padding: "5px 2px" }}>
+            <ListItemText primary="Redir Port" />
+            <TextField
+              size="small"
+              autoComplete="off"
+              sx={{ width: 135 }}
+              value={redirPort}
+              onChange={(e) =>
+                setRedirPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
+              }
+              InputProps={{
+                sx: { pr: 1 },
+                endAdornment: (
+                  <Switch
+                    checked={redirEnabled}
+                    onChange={(_, c) => {
+                      setRedirEnabled(c);
+                    }}
+                  />
+                ),
+              }}
+            />
+          </ListItem>
+        )}
+        {OS === "linux" && (
+          <ListItem sx={{ padding: "5px 2px" }}>
+            <ListItemText primary="Tproxy Port" />
+            <TextField
+              size="small"
+              autoComplete="off"
+              sx={{ width: 135 }}
+              value={tproxyPort}
+              onChange={(e) =>
+                setTproxyPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
+              }
+              InputProps={{
+                sx: { pr: 1 },
+                endAdornment: (
+                  <Switch
+                    checked={tproxyEnabled}
+                    onChange={(_, c) => {
+                      setTproxyEnabled(c);
+                    }}
+                  />
+                ),
+              }}
+            />
+          </ListItem>
+        )}
       </List>
     </BaseDialog>
   );