feat: Support config redir port and tproxy port

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

@@ -5,6 +5,8 @@ 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";
+import getSystem from "@/utils/get-system";
+const OS = getSystem();
 
 export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -13,6 +15,12 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
   const { verge, patchVerge } = useVerge();
 
   const [open, setOpen] = useState(false);
+  const [redirPort, setRedirPort] = useState(
+    verge?.verge_redir_port ?? clashInfo?.redir_port ?? 7895
+  );
+  const [tproxyPort, setTproxyPort] = useState(
+    verge?.verge_tproxy_port ?? clashInfo?.tproxy_port ?? 7896
+  );
   const [mixedPort, setMixedPort] = useState(
     verge?.verge_mixed_port ?? clashInfo?.mixed_port ?? 7897
   );
@@ -25,6 +33,8 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
 
   useImperativeHandle(ref, () => ({
     open: () => {
+      if (verge?.verge_redir_port) setRedirPort(verge?.verge_redir_port);
+      if (verge?.verge_tproxy_port) setTproxyPort(verge?.verge_tproxy_port);
       if (verge?.verge_mixed_port) setMixedPort(verge?.verge_mixed_port);
       if (verge?.verge_socks_port) setSocksPort(verge?.verge_socks_port);
       if (verge?.verge_port) setPort(verge?.verge_port);
@@ -35,6 +45,8 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
 
   const onSave = useLockFn(async () => {
     if (
+      redirPort === verge?.verge_redir_port &&
+      tproxyPort === verge?.verge_tproxy_port &&
       mixedPort === verge?.verge_mixed_port &&
       socksPort === verge?.verge_socks_port &&
       port === verge?.verge_port
@@ -42,11 +54,22 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
       setOpen(false);
       return;
     }
-    if (mixedPort === socksPort || mixedPort === port || socksPort === port) {
+
+    if (
+      new Set([redirPort, tproxyPort, mixedPort, socksPort, port]).size !== 5
+    ) {
       Notice.error("Port conflict!", 4000);
       return;
     }
     try {
+      if (OS !== "windows") {
+        await patchInfo({ "redir-port": redirPort });
+        await patchVerge({ verge_redir_port: redirPort });
+      }
+      if (OS === "linux") {
+        await patchInfo({ "tproxy-port": tproxyPort });
+        await patchVerge({ verge_tproxy_port: tproxyPort });
+      }
       await patchInfo({ "mixed-port": mixedPort });
       await patchInfo({ "socks-port": socksPort });
       await patchInfo({ port });
@@ -72,6 +95,35 @@ 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

src/hooks/use-clash.ts

@@ -49,11 +49,19 @@ export const useClashInfo = () => {
     patch: Partial<
       Pick<
         IConfigData,
-        "port" | "socks-port" | "mixed-port" | "external-controller" | "secret"
+        | "port"
+        | "socks-port"
+        | "mixed-port"
+        | "redir-port"
+        | "tproxy-port"
+        | "external-controller"
+        | "secret"
       >
     >
   ) => {
     const hasInfo =
+      patch["redir-port"] != null ||
+      patch["tproxy-port"] != null ||
       patch["mixed-port"] != null ||
       patch["socks-port"] != null ||
       patch["port"] != null ||
@@ -62,6 +70,26 @@ export const useClashInfo = () => {
 
     if (!hasInfo) return;
 
+    if (patch["redir-port"]) {
+      const port = patch["redir-port"];
+      if (port < 1000) {
+        throw new Error("The port should not < 1000");
+      }
+      if (port > 65536) {
+        throw new Error("The port should not > 65536");
+      }
+    }
+
+    if (patch["tproxy-port"]) {
+      const port = patch["tproxy-port"];
+      if (port < 1000) {
+        throw new Error("The port should not < 1000");
+      }
+      if (port > 65536) {
+        throw new Error("The port should not > 65536");
+      }
+    }
+
     if (patch["mixed-port"]) {
       const port = patch["mixed-port"];
       if (port < 1000) {

src/services/types.d.ts

@@ -142,6 +142,8 @@ interface IClashInfo {
   // status: string;
   mixed_port?: number; // clash mixed port
   socks_port?: number; // clash socks port
+  redir_port?: number; // clash redir port
+  tproxy_port?: number; // clash tproxy port
   port?: number; // clash http port
   server?: string; // external-controller
   secret?: string;
@@ -214,6 +216,8 @@ interface IVergeConfig {
   enable_random_port?: boolean;
   verge_mixed_port?: number;
   verge_socks_port?: number;
+  verge_redir_port?: number;
+  verge_tproxy_port?: number;
   verge_port?: number;
   enable_proxy_guard?: boolean;
   proxy_guard_duration?: number;