optimized port settings and added one-click random API port and key/separate refresh button

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

@@ -1,286 +1,282 @@
+import { BaseDialog, Switch } from "@/components/base";
+import { useClashInfo } from "@/hooks/use-clash";
+import { useVerge } from "@/hooks/use-verge";
+import { showNotice } from "@/services/noticeService";
+import getSystem from "@/utils/get-system";
+import { Shuffle } from "@mui/icons-material";
+import { IconButton, List, ListItem, ListItemText, TextField } from "@mui/material";
+import { useLockFn } from "ahooks";
 import { forwardRef, useImperativeHandle, useState } from "react";
 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, Switch } from "@/components/base";
-import { useVerge } from "@/hooks/use-verge";
-import getSystem from "@/utils/get-system";
-import { showNotice } from "@/services/noticeService";
+
 const OS = getSystem();
 
-export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
-  const { t } = useTranslation();
+interface ClashPortViewerProps {}
 
-  const { clashInfo, patchInfo } = useClashInfo();
-  const { verge, patchVerge } = useVerge();
-  const [open, setOpen] = useState(false);
-  const [redirPort, setRedirPort] = useState(
-    verge?.verge_redir_port ?? clashInfo?.redir_port ?? 7895
-  );
-  const [redirEnabled, setRedirEnabled] = useState(
-    verge?.verge_redir_enabled ?? false
-  );
-  const [tproxyPort, setTproxyPort] = useState(
-    verge?.verge_tproxy_port ?? clashInfo?.tproxy_port ?? 7896
-  );
-  const [tproxyEnabled, setTproxyEnabled] = useState(
-    verge?.verge_tproxy_enabled ?? false
-  );
-  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 ?? false
-  );
-  const [port, setPort] = useState(
-    verge?.verge_port ?? clashInfo?.port ?? 7899
-  );
-  const [httpEnabled, setHttpEnabled] = useState(
-    verge?.verge_http_enabled ?? false
-  );
+interface ClashPortViewerRef {
+  open: () => void;
+  close: () => void;
+}
 
-  useImperativeHandle(ref, () => ({
-    open: () => {
-      if (verge?.verge_redir_port) setRedirPort(verge?.verge_redir_port);
-      setRedirEnabled(verge?.verge_redir_enabled ?? false);
-      if (verge?.verge_tproxy_port) setTproxyPort(verge?.verge_tproxy_port);
-      setTproxyEnabled(verge?.verge_tproxy_enabled ?? false);
-      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 ?? false);
-      if (verge?.verge_port) setPort(verge?.verge_port);
-      setHttpEnabled(verge?.verge_http_enabled ?? false);
-      setOpen(true);
-    },
-    close: () => setOpen(false),
-  }));
+const generateRandomPort = () => Math.floor(Math.random() * (65535 - 1025 + 1)) + 1025;
 
-  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 &&
-      redirEnabled === verge?.verge_redir_enabled &&
-      tproxyEnabled === verge?.verge_tproxy_enabled &&
-      socksEnabled === verge?.verge_socks_enabled &&
-      httpEnabled === verge?.verge_http_enabled
-    ) {
-      setOpen(false);
-      return;
-    }
+export const ClashPortViewer = forwardRef<ClashPortViewerRef, ClashPortViewerProps>(
+  (props, ref) => {
+    const { t } = useTranslation();
+    const { clashInfo, patchInfo } = useClashInfo();
+    const { verge, patchVerge } = useVerge();
+    const [open, setOpen] = useState(false);
 
-    if (
-      OS === "linux" &&
-      new Set([redirPort, tproxyPort, mixedPort, socksPort, port]).size !== 5
-    ) {
-      showNotice('error', t("Port Conflict"));
-      return;
-    }
-    if (
-      OS === "macos" &&
-      new Set([redirPort, mixedPort, socksPort, port]).size !== 4
-    ) {
-      showNotice('error', t("Port Conflict"));
-      return;
-    }
-    if (OS === "windows" && new Set([mixedPort, socksPort, port]).size !== 3) {
-      showNotice('error', t("Port Conflict"));
-      return;
-    }
-    try {
-      if (OS === "windows") {
+    // Mixed Port
+    const [mixedPort, setMixedPort] = useState(
+      verge?.verge_mixed_port ?? clashInfo?.mixed_port ?? 7897
+    );
+
+    // 其他端口状态
+    const [socksPort, setSocksPort] = useState(verge?.verge_socks_port ?? 7898);
+    const [socksEnabled, setSocksEnabled] = useState(verge?.verge_socks_enabled ?? false);
+    const [httpPort, setHttpPort] = useState(verge?.verge_port ?? 7899);
+    const [httpEnabled, setHttpEnabled] = useState(verge?.verge_http_enabled ?? false);
+    const [redirPort, setRedirPort] = useState(verge?.verge_redir_port ?? 7895);
+    const [redirEnabled, setRedirEnabled] = useState(verge?.verge_redir_enabled ?? false);
+    const [tproxyPort, setTproxyPort] = useState(verge?.verge_tproxy_port ?? 7896);
+    const [tproxyEnabled, setTproxyEnabled] = useState(verge?.verge_tproxy_enabled ?? false);
+
+    useImperativeHandle(ref, () => ({
+      open: () => {
+        setMixedPort(verge?.verge_mixed_port ?? clashInfo?.mixed_port ?? 7897);
+        setSocksPort(verge?.verge_socks_port ?? 7898);
+        setSocksEnabled(verge?.verge_socks_enabled ?? false);
+        setHttpPort(verge?.verge_port ?? 7899);
+        setHttpEnabled(verge?.verge_http_enabled ?? false);
+        setRedirPort(verge?.verge_redir_port ?? 7895);
+        setRedirEnabled(verge?.verge_redir_enabled ?? false);
+        setTproxyPort(verge?.verge_tproxy_port ?? 7896);
+        setTproxyEnabled(verge?.verge_tproxy_enabled ?? false);
+        setOpen(true);
+      },
+      close: () => setOpen(false),
+    }));
+
+    const onSave = useLockFn(async () => {
+      // 端口冲突检测
+      const portList = [
+        mixedPort,
+        socksEnabled ? socksPort : -1,
+        httpEnabled ? httpPort : -1,
+        redirEnabled ? redirPort : -1,
+        tproxyEnabled ? tproxyPort : -1
+      ].filter(p => p !== -1);
+
+      if (new Set(portList).size !== portList.length) {
+        showNotice("error", t("Port Conflict"));
+        return;
+      }
+
+      try {
+        // 更新Clash配置
         await patchInfo({
           "mixed-port": mixedPort,
           "socks-port": socksPort,
-          port,
-        });
+          port: httpPort,
+          "redir-port": redirPort,
+          "tproxy-port": tproxyPort
+        } as any);
+
+        // 更新Verge配置
         await patchVerge({
           verge_mixed_port: mixedPort,
           verge_socks_port: socksPort,
           verge_socks_enabled: socksEnabled,
-          verge_port: port,
+          verge_port: httpPort,
           verge_http_enabled: httpEnabled,
-        });
-      }
-      if (OS === "macos") {
-        await patchInfo({
-          "redir-port": redirPort,
-          "mixed-port": mixedPort,
-          "socks-port": socksPort,
-          port,
-        });
-        await patchVerge({
-          verge_redir_port: redirPort,
-          verge_redir_enabled: redirEnabled,
-          verge_mixed_port: mixedPort,
-          verge_socks_port: socksPort,
-          verge_socks_enabled: socksEnabled,
-          verge_port: port,
-          verge_http_enabled: httpEnabled,
-        });
-      }
-      if (OS === "linux") {
-        await patchInfo({
-          "redir-port": redirPort,
-          "tproxy-port": tproxyPort,
-          "mixed-port": mixedPort,
-          "socks-port": socksPort,
-          port,
-        });
-        await patchVerge({
           verge_redir_port: redirPort,
           verge_redir_enabled: redirEnabled,
           verge_tproxy_port: tproxyPort,
-          verge_tproxy_enabled: tproxyEnabled,
-          verge_mixed_port: mixedPort,
-          verge_socks_port: socksPort,
-          verge_socks_enabled: socksEnabled,
-          verge_port: port,
-          verge_http_enabled: httpEnabled,
+          verge_tproxy_enabled: tproxyEnabled
         });
-      }
-      setOpen(false);
-      showNotice('success', t("Clash Port Modified"));
-    } catch (err: any) {
-      showNotice('error', err.message || err.toString());
-    }
-  });
 
-  return (
-    <BaseDialog
-      open={open}
-      title={t("Port Config")}
-      contentSx={{ width: 300 }}
-      okBtn={t("Save")}
-      cancelBtn={t("Cancel")}
-      onClose={() => setOpen(false)}
-      onCancel={() => setOpen(false)}
-      onOk={onSave}
-    >
-      <List>
-        <ListItem sx={{ padding: "5px 2px" }}>
-          <ListItemText primary={t("Mixed Port")} />
-          <TextField
-            autoComplete="new-password"
-            size="small"
-            sx={{ width: 135 }}
-            value={mixedPort}
-            onChange={(e) =>
-              setMixedPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
-            }
-          />
-        </ListItem>
-        <ListItem sx={{ padding: "5px 2px" }}>
-          <ListItemText primary={t("Socks Port")} />
-          <TextField
-            autoComplete="new-password"
-            size="small"
-            sx={{ width: 135 }}
-            value={socksPort}
-            onChange={(e) =>
-              setSocksPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
-            }
-            slotProps={{
-              input: {
-                sx: { pr: 1 },
-                endAdornment: (
-                  <Switch
-                    checked={socksEnabled}
-                    onChange={(_, c) => {
-                      setSocksEnabled(c);
-                    }}
-                  />
-                ),
-              }
-            }}
-          />
-        </ListItem>
-        <ListItem sx={{ padding: "5px 2px" }}>
-          <ListItemText primary={t("Http Port")} />
-          <TextField
-            autoComplete="new-password"
-            size="small"
-            sx={{ width: 135 }}
-            value={port}
-            onChange={(e) =>
-              setPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
-            }
-            slotProps={{
-              input: {
-                sx: { pr: 1 },
-                endAdornment: (
-                  <Switch
-                    checked={httpEnabled}
-                    onChange={(_, c) => {
-                      setHttpEnabled(c);
-                    }}
-                  />
-                ),
-              }
-            }}
-          />
-        </ListItem>
-        {OS !== "windows" && (
-          <ListItem sx={{ padding: "5px 2px" }}>
-            <ListItemText primary={t("Redir Port")} />
-            <TextField
-              autoComplete="new-password"
-              size="small"
-              sx={{ width: 135 }}
-              value={redirPort}
-              onChange={(e) =>
-                setRedirPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
-              }
-              slotProps={{
-                input: {
-                  sx: { pr: 1 },
-                  endAdornment: (
-                    <Switch
-                      checked={redirEnabled}
-                      onChange={(_, c) => {
-                        setRedirEnabled(c);
-                      }}
-                    />
-                  ),
-                }
-              }}
+        setOpen(false);
+        showNotice("success", t("Port settings saved"));
+      } catch (err) {
+        showNotice("error", t("Failed to save settings"));
+      }
+    });
+
+    return (
+      <BaseDialog
+        open={open}
+        title={t("Port Configuration")}
+        contentSx={{ width: 360, padding: "8px" }}
+        okBtn={t("Save")}
+        cancelBtn={t("Cancel")}
+        onClose={() => setOpen(false)}
+        onOk={onSave}
+      >
+        <List sx={{ width: "100%" }}>
+          <ListItem sx={{ padding: "4px 0", minHeight: 36 }}>
+            <ListItemText
+              primary={t("Mixed Port")}
+              primaryTypographyProps={{ fontSize: 12 }}
             />
+            <div style={{ display: "flex", alignItems: "center" }}>
+              <TextField
+                size="small"
+                sx={{ width: 80, mr: 0.5, fontSize: 12 }}
+                value={mixedPort}
+                onChange={(e) => setMixedPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))}
+                inputProps={{ style: { fontSize: 12 } }}
+              />
+              <IconButton
+                size="small"
+                onClick={() => setMixedPort(generateRandomPort())}
+                title={t("Random Port")}
+                sx={{ mr: 0.5 }}
+              >
+                <Shuffle fontSize="small" />
+              </IconButton>
+              <Switch
+                size="small"
+                checked={true}
+                disabled={true}
+                sx={{ ml: 0.5, opacity: 0.7 }}
+              />
+            </div>
           </ListItem>
-        )}
-        {OS === "linux" && (
-          <ListItem sx={{ padding: "5px 2px" }}>
-            <ListItemText primary={t("Tproxy Port")} />
-            <TextField
-              autoComplete="new-password"
-              size="small"
-              sx={{ width: 135 }}
-              value={tproxyPort}
-              onChange={(e) =>
-                setTproxyPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))
-              }
-              slotProps={{
-                input: {
-                  sx: { pr: 1 },
-                  endAdornment: (
-                    <Switch
-                      checked={tproxyEnabled}
-                      onChange={(_, c) => {
-                        setTproxyEnabled(c);
-                      }}
-                    />
-                  ),
-                }
-              }}
+
+          <ListItem sx={{ padding: "4px 0", minHeight: 36 }}>
+            <ListItemText
+              primary={t("Socks Port")}
+              primaryTypographyProps={{ fontSize: 12 }}
             />
+            <div style={{ display: "flex", alignItems: "center" }}>
+              <TextField
+                size="small"
+                sx={{ width: 80, mr: 0.5, fontSize: 12 }}
+                value={socksPort}
+                onChange={(e) => setSocksPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))}
+                disabled={!socksEnabled}
+                inputProps={{ style: { fontSize: 12 } }}
+              />
+              <IconButton
+                size="small"
+                onClick={() => setSocksPort(generateRandomPort())}
+                title={t("Random Port")}
+                disabled={!socksEnabled}
+                sx={{ mr: 0.5 }}
+              >
+                <Shuffle fontSize="small" />
+              </IconButton>
+              <Switch
+                size="small"
+                checked={socksEnabled}
+                onChange={(_, c) => setSocksEnabled(c)}
+                sx={{ ml: 0.5 }}
+              />
+            </div>
           </ListItem>
-        )}
-      </List>
-    </BaseDialog>
-  );
-});
+
+          <ListItem sx={{ padding: "4px 0", minHeight: 36 }}>
+            <ListItemText
+              primary={t("HTTP Port")}
+              primaryTypographyProps={{ fontSize: 12 }}
+            />
+            <div style={{ display: "flex", alignItems: "center" }}>
+              <TextField
+                size="small"
+                sx={{ width: 80, mr: 0.5, fontSize: 12 }}
+                value={httpPort}
+                onChange={(e) => setHttpPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))}
+                disabled={!httpEnabled}
+                inputProps={{ style: { fontSize: 12 } }}
+              />
+              <IconButton
+                size="small"
+                onClick={() => setHttpPort(generateRandomPort())}
+                title={t("Random Port")}
+                disabled={!httpEnabled}
+                sx={{ mr: 0.5 }}
+              >
+                <Shuffle fontSize="small" />
+              </IconButton>
+              <Switch
+                size="small"
+                checked={httpEnabled}
+                onChange={(_, c) => setHttpEnabled(c)}
+                sx={{ ml: 0.5 }}
+              />
+            </div>
+          </ListItem>
+
+          {OS !== "windows" && (
+            <ListItem sx={{ padding: "4px 0", minHeight: 36 }}>
+              <ListItemText
+                primary={t("Redir Port")}
+                primaryTypographyProps={{ fontSize: 12 }}
+              />
+              <div style={{ display: "flex", alignItems: "center" }}>
+                <TextField
+                  size="small"
+                  sx={{ width: 80, mr: 0.5, fontSize: 12 }}
+                  value={redirPort}
+                  onChange={(e) => setRedirPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))}
+                  disabled={!redirEnabled}
+                  inputProps={{ style: { fontSize: 12 } }}
+                />
+                <IconButton
+                  size="small"
+                  onClick={() => setRedirPort(generateRandomPort())}
+                  title={t("Random Port")}
+                  disabled={!redirEnabled}
+                  sx={{ mr: 0.5 }}
+                >
+                  <Shuffle fontSize="small" />
+                </IconButton>
+                <Switch
+                  size="small"
+                  checked={redirEnabled}
+                  onChange={(_, c) => setRedirEnabled(c)}
+                  sx={{ ml: 0.5 }}
+                />
+              </div>
+            </ListItem>
+          )}
+
+          {OS === "linux" && (
+            <ListItem sx={{ padding: "4px 0", minHeight: 36 }}>
+              <ListItemText
+                primary={t("Tproxy Port")}
+                primaryTypographyProps={{ fontSize: 12 }}
+              />
+              <div style={{ display: "flex", alignItems: "center" }}>
+                <TextField
+                  size="small"
+                  sx={{ width: 80, mr: 0.5, fontSize: 12 }}
+                  value={tproxyPort}
+                  onChange={(e) => setTproxyPort(+e.target.value?.replace(/\D+/, "").slice(0, 5))}
+                  disabled={!tproxyEnabled}
+                  inputProps={{ style: { fontSize: 12 } }}
+                />
+                <IconButton
+                  size="small"
+                  onClick={() => setTproxyPort(generateRandomPort())}
+                  title={t("Random Port")}
+                  disabled={!tproxyEnabled}
+                  sx={{ mr: 0.5 }}
+                >
+                  <Shuffle fontSize="small" />
+                </IconButton>
+                <Switch
+                  size="small"
+                  checked={tproxyEnabled}
+                  onChange={(_, c) => setTproxyEnabled(c)}
+                  sx={{ ml: 0.5 }}
+                />
+              </div>
+            </ListItem>
+          )}
+        </List>
+      </BaseDialog>
+    );
+  }
+);