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

UPDATELOG.md

@@ -50,6 +50,7 @@
  - 添加了Zashboard的一键跳转URL
  - 使用操作系统默认的窗口管理器
  - 切换、升级、重启内核的状态管理
+ - 增加了一键随机API端口和密钥/单独刷新按钮
 
 #### 优化了：
  - 系统代理 Bypass 设置
@@ -74,6 +75,7 @@
  - 优化窗口状态初始化逻辑和添加缺失的权限设置
  - 异步化配置：优化端口查找和配置保存逻辑
  - 重构事件通知机制到独立线程，避免前端卡死
+ - 优化端口设置，每个端口可随机设置端口号
 
 ## v2.2.3
 

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

src/components/setting/mods/controller-viewer.tsx

@@ -1,20 +1,90 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
-import { List, ListItem, ListItemText, TextField } from "@mui/material";
-import { useClashInfo } from "@/hooks/use-clash";
 import { BaseDialog, DialogRef } from "@/components/base";
+import { useClashInfo } from "@/hooks/use-clash";
 import { showNotice } from "@/services/noticeService";
+import {
+  ContentCopy,
+  RefreshRounded
+} from "@mui/icons-material";
+import {
+  Alert,
+  Box,
+  FormControlLabel,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  Snackbar,
+  Switch,
+  TextField,
+  Tooltip
+} from "@mui/material";
+import { useLocalStorageState, useLockFn } from "ahooks";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+// 随机端口和密码生成
+const generateRandomPort = (): number => {
+  return Math.floor(Math.random() * (65535 - 1024 + 1)) + 1024;
+};
+
+const generateRandomPassword = (length: number = 32): string => {
+  const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+[]{}|;:'\",.<>/?";
+  let password = "";
+
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * charset.length);
+    password += charset.charAt(randomIndex);
+  }
+
+  return password;
+};
+
+// 初始化执行一次随机生成
+const useAppInitialization = (autoGenerate: boolean, onGenerate: () => void) => {
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    if (!initialized && autoGenerate) {
+      onGenerate();
+      setInitialized(true);
+    }
+  }, [initialized, autoGenerate, onGenerate]);
+};
 
 export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
+  // 防止数值null
+  const [autoGenerateState, setAutoGenerate] = useLocalStorageState<boolean>(
+    'autoGenerateConfig',
+    { defaultValue: false as boolean }
+  );
+  const autoGenerate = autoGenerateState!;
+
+  const [copySuccess, setCopySuccess] = useState<null | string>(null);
+
   const { clashInfo, patchInfo } = useClashInfo();
 
   const [controller, setController] = useState(clashInfo?.server || "");
   const [secret, setSecret] = useState(clashInfo?.secret || "");
 
+  // 初始化生成随机配置
+  useAppInitialization(autoGenerate, () => {
+    const port = generateRandomPort();
+    const password = generateRandomPassword();
+
+    const host = controller.split(':')[0] || '127.0.0.1';
+    const newController = `${host}:${port}`;
+
+    setController(newController);
+    setSecret(password);
+
+    patchInfo({ "external-controller": newController, secret: password });
+
+    showNotice('info', t("Auto generated new config on startup"), 1000);
+  });
+
   useImperativeHandle(ref, () => ({
     open: () => {
       setOpen(true);
@@ -34,6 +104,38 @@ export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
     }
   });
 
+  // 生成随机端口
+  const handleGeneratePort = useLockFn(async () => {
+    if (!autoGenerate) {
+      const port = generateRandomPort();
+      const host = controller.split(':')[0] || '127.0.0.1';
+      setController(`${host}:${port}`);
+      showNotice('success', t("Random port generated"), 1000);
+    }
+    return Promise.resolve();
+  });
+
+  // 生成随机 Secret
+  const handleGenerateSecret = useLockFn(async () => {
+    if (!autoGenerate) {
+      const password = generateRandomPassword();
+      setSecret(password);
+      showNotice('success', t("Random secret generated"), 1000);
+    }
+    return Promise.resolve();
+  });
+
+  // 复制到剪贴板
+  const handleCopyToClipboard = useLockFn(async (text: string, type: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopySuccess(type);
+      setTimeout(() => setCopySuccess(null), 2000);
+    } catch (err) {
+      showNotice('error', t("Failed to copy"), 2000);
+    }
+  });
+
   return (
     <BaseDialog
       open={open}
@@ -46,32 +148,120 @@ export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
       onOk={onSave}
     >
       <List>
-        <ListItem sx={{ padding: "5px 2px" }}>
+        <ListItem sx={{ padding: "5px 2px", display: "flex", justifyContent: "space-between" }}>
+          <Box display="flex" alignItems="center" gap={1}>
             <ListItemText primary={t("External Controller")} />
+            <Tooltip title={t("Generate Random Port")}>
+              <IconButton
+                size="small"
+                onClick={handleGeneratePort}
+                color="primary"
+                disabled={autoGenerate}
+              >
+                <RefreshRounded fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          <Box display="flex" alignItems="center" gap={1}>
             <TextField
               autoComplete="new-password"
               size="small"
-            sx={{ width: 175 }}
+              sx={{ width: 175, opacity: autoGenerate ? 0.7 : 1 }}
               value={controller}
               placeholder="Required"
               onChange={(e) => setController(e.target.value)}
+              disabled={autoGenerate}
             />
+            {autoGenerate && (
+
+              <Tooltip title={t("Copy to clipboard")}>
+                <IconButton
+                  size="small"
+                  onClick={() => handleCopyToClipboard(controller, "controller")}
+                  color="primary"
+                >
+                  <ContentCopy fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            )}
+          </Box>
         </ListItem>
 
-        <ListItem sx={{ padding: "5px 2px" }}>
+        <ListItem sx={{ padding: "5px 2px", display: "flex", justifyContent: "space-between" }}>
+          <Box display="flex" alignItems="center" gap={1}>
             <ListItemText primary={t("Core Secret")} />
+            <Tooltip title={t("Generate Random Secret")}>
+              <IconButton
+                size="small"
+                onClick={handleGenerateSecret}
+                color="primary"
+                disabled={autoGenerate}
+              >
+                <RefreshRounded fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          <Box display="flex" alignItems="center" gap={1}>
             <TextField
               autoComplete="new-password"
               size="small"
-            sx={{ width: 175 }}
+              sx={{ width: 175, opacity: autoGenerate ? 0.7 : 1 }}
               value={secret}
               placeholder={t("Recommended")}
               onChange={(e) =>
                 setSecret(e.target.value?.replace(/[^\x00-\x7F]/g, ""))
               }
+              disabled={autoGenerate}
+            />
+            {autoGenerate && (
+              <Tooltip title={t("Copy to clipboard")}>
+                <IconButton
+                  size="small"
+                  onClick={() => handleCopyToClipboard(secret, "secret")}
+                  color="primary"
+                >
+                  <ContentCopy fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            )}
+          </Box>
+        </ListItem>
+
+        <ListItem sx={{ padding: "5px 2px", display: "flex", justifyContent: "space-between" }}>
+          <ListItemText primary={t("Auto Random Config")} secondary={
+            autoGenerate
+              ? t("Automatically generate new config on application startup")
+              : t("Manual configuration")
+          } />
+          <FormControlLabel
+            control={
+              <Switch
+                checked={autoGenerate}
+                onChange={() => setAutoGenerate(!autoGenerate)}
+                color="primary"
+              />
+            }
+            label={autoGenerate ? t("On") : t("Off")}
+            labelPlacement="start"
           />
         </ListItem>
       </List>
+
+      <Snackbar
+        open={copySuccess !== null}
+        autoHideDuration={2000}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      >
+        <Alert
+          severity="success"
+          sx={{ width: '100%' }}
+        >
+          {copySuccess === "controller"
+            ? t("Controller address copied to clipboard")
+            : t("Secret copied to clipboard")
+          }
+        </Alert>
+      </Snackbar>
     </BaseDialog>
   );
 });

src/components/setting/mods/web-ui-viewer.tsx

@@ -67,13 +67,13 @@ export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
         url = url.replaceAll("%port", port || "9097");
         url = url.replaceAll(
           "%secret",
-          encodeURIComponent(clashInfo.secret || "")
+          encodeURIComponent(clashInfo.secret || ""),
         );
       }
 
       await openWebUrl(url);
     } catch (e: any) {
-      showNotice('error', e.message || e.toString());
+      showNotice("error", e.message || e.toString());
     }
   });
 

src/components/setting/setting-clash.tsx

@@ -1,30 +1,29 @@
-import { useRef, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { TextField, Select, MenuItem, Typography } from "@mui/material";
-import {
-  SettingsRounded,
-  ShuffleRounded,
-  LanRounded,
-} from "@mui/icons-material";
 import { DialogRef, Switch } from "@/components/base";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 import { useClash } from "@/hooks/use-clash";
-import { GuardState } from "./mods/guard-state";
+import { useListen } from "@/hooks/use-listen";
-import { WebUIViewer } from "./mods/web-ui-viewer";
-import { ClashPortViewer } from "./mods/clash-port-viewer";
-import { ControllerViewer } from "./mods/controller-viewer";
-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";
 import { updateGeoData } from "@/services/api";
-import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import { invoke_uwp_tool } from "@/services/cmds";
-import { NetworkInterfaceViewer } from "./mods/network-interface-viewer";
+import { showNotice } from "@/services/noticeService";
-import { DnsViewer } from "./mods/dns-viewer";
+import getSystem from "@/utils/get-system";
+import {
+  LanRounded,
+  SettingsRounded
+} from "@mui/icons-material";
+import { MenuItem, Select, TextField, Typography } from "@mui/material";
 import { invoke } from "@tauri-apps/api/core";
 import { useLockFn } from "ahooks";
-import { useListen } from "@/hooks/use-listen";
+import { useRef, useState } from "react";
-import { showNotice } from "@/services/noticeService";
+import { useTranslation } from "react-i18next";
+import { ClashCoreViewer } from "./mods/clash-core-viewer";
+import { ClashPortViewer } from "./mods/clash-port-viewer";
+import { ControllerViewer } from "./mods/controller-viewer";
+import { DnsViewer } from "./mods/dns-viewer";
+import { GuardState } from "./mods/guard-state";
+import { NetworkInterfaceViewer } from "./mods/network-interface-viewer";
+import { SettingItem, SettingList } from "./mods/setting-comp";
+import { WebUIViewer } from "./mods/web-ui-viewer";
 
 const isWIN = getSystem() === "windows";
 
@@ -50,13 +49,6 @@ const SettingClash = ({ onError }: Props) => {
 
   // 独立跟踪DNS设置开关状态
   const [dnsSettingsEnabled, setDnsSettingsEnabled] = useState(() => {
-    // 尝试从localStorage获取之前保存的状态
-    // 如果重装（或删除数据更新）前开关处于关闭状态，重装后会获取到错误的状态
-    // const savedState = localStorage.getItem("dns_settings_enabled");
-    // if (savedState !== null) {
-    //   return savedState === "true";
-    // }
-    // 如果没有保存的状态，则从verge配置中获取
     return verge?.enable_dns_settings ?? false;
   });
 
@@ -88,24 +80,18 @@ const SettingClash = ({ onError }: Props) => {
   // 实现DNS设置开关处理函数
   const handleDnsToggle = useLockFn(async (enable: boolean) => {
     try {
-      // 立即更新UI状态
       setDnsSettingsEnabled(enable);
-      // 保存到localStorage，用于记住用户的选择
       localStorage.setItem("dns_settings_enabled", String(enable));
-      // 更新verge配置
       await patchVerge({ enable_dns_settings: enable });
       await invoke("apply_dns_config", { apply: enable });
       setTimeout(() => {
         mutateClash();
-      }, 500); // 延迟500ms确保后端完成处理
+      }, 500);
     } catch (err: any) {
-      // 如果出错，恢复原始状态
       setDnsSettingsEnabled(!enable);
       localStorage.setItem("dns_settings_enabled", String(!enable));
       showNotice('error', err.message || err.toString());
-      await patchVerge({ enable_dns_settings: !enable }).catch(() => {
+      await patchVerge({ enable_dns_settings: !enable }).catch(() => {});
-        // 忽略恢复状态时的错误
-      });
       throw err;
     }
   });
@@ -219,22 +205,10 @@ const SettingClash = ({ onError }: Props) => {
 
       <SettingItem
         label={t("Port Config")}
-        extra={
-          <TooltipIcon
-            title={t("Random Port")}
-            color={enable_random_port ? "primary" : "inherit"}
-            icon={ShuffleRounded}
-            onClick={() => {
-              showNotice('success', t("Restart Application to Apply Modifications"), 1000);
-              onChangeVerge({ enable_random_port: !enable_random_port });
-              patchVerge({ enable_random_port: !enable_random_port });
-            }}
-          />
-        }
       >
         <TextField
           autoComplete="new-password"
-          disabled={enable_random_port}
+          disabled={false}
           size="small"
           value={verge_mixed_port ?? 7897}
           sx={{ width: 100, input: { py: "7.5px", cursor: "pointer" } }}

src/locales/en.json

@@ -274,11 +274,11 @@
   "Unified Delay Info": "When unified delay is turned on, two delay tests will be performed to eliminate the delay differences between different types of nodes caused by connection handshakes, etc",
   "Log Level": "Log Level",
   "Log Level Info": "This parameter is valid only for kernel log files in the log directory Service folder",
-  "Port Config": "Port Config",
+  "Port Configuration": "Port Configuration",
   "Random Port": "Random Port",
   "Mixed Port": "Mixed Port",
   "Socks Port": "Socks Port",
-  "Http Port": "Http(s) Port",
+  "HTTP Port": "Http(s) Port",
   "Redir Port": "Redir Port",
   "Tproxy Port": "Tproxy Port",
   "External": "External",
@@ -392,7 +392,7 @@
   "Stopping Core...": "Stopping Core...",
   "Restarting Core...": "Restarting Core...",
   "Installing Service...": "Installing Service...",
-  "Uninstall Service":"Uninstall Service",
+  "Uninstall Service": "Uninstall Service",
   "Service Installed Successfully": "Service Installed Successfully",
   "Service is ready and core restarted": "Service is ready and core restarted",
   "Core restarted. Service is now available.": "Core restarted. Service is now available.",
@@ -615,5 +615,14 @@
   "Originals Only": "Originals Only",
   "No (IP Banned By Disney+)": "No (IP Banned By Disney+)",
   "Unsupported Country/Region": "Unsupported Country/Region",
-  "Failed (Network Connection)": "Failed (Network Connection)"
+  "Failed (Network Connection)": "Failed (Network Connection)",
+  "Auto Random Config": "Auto Random Config",
+  "Automatically generate new config on application startup": "Automatically generate new config on application startup",
+  "Manual configuration": "Manual configuration",
+  "Controller address copied to clipboard": "Controller address copied to clipboard",
+  "Secret copied to clipboard": "Secret copied to clipboard",
+  "Copy to clipboard": "Copy to clipboard",
+  "Generate Random Secret": "Generate Random Secret",
+  "Generate Random Port": "Generate Random Port",
+  "Port Config": "Port Config"
 }

src/locales/zh.json

@@ -274,13 +274,13 @@
   "Unified Delay Info": "开启统一延迟时，会进行两次延迟测试，以消除连接握手等带来的不同类型节点的延迟差异",
   "Log Level": "日志等级",
   "Log Level Info": "仅对日志目录 Service 文件夹下的内核日志文件生效",
-  "Port Config": "端口设置",
+  "Port Configuration": "端口设置",
   "Random Port": "随机端口",
   "Mixed Port": "混合代理端口",
   "Socks Port": "SOCKS 代理端口",
-  "Http Port": "HTTP(S) 代理端口",
+  "HTTP Port": "HTTP(S) 代理端口",
   "Redir Port": "Redir 透明代理端口",
-  "TPROXY Port": "TPROXY 透明代理端口",
+  "Tproxy Port": "TPROXY 透明代理端口",
   "External": "外部控制",
   "External Controller": "外部控制器监听地址",
   "Core Secret": "API 访问密钥",
@@ -392,7 +392,7 @@
   "Stopping Core...": "内核停止中...",
   "Restarting Core...": "内核重启中...",
   "Installing Service...": "安装服务中...",
-  "Uninstall Service":"卸载服务",
+  "Uninstall Service": "卸载服务",
   "Service Installed Successfully": "已成功安装服务",
   "Service is ready and core restarted": "服务已就绪，内核已重启",
   "Core restarted. Service is now available.": "内核已重启，服务已就绪",
@@ -615,5 +615,14 @@
   "Originals Only": "仅限原创",
   "No (IP Banned By Disney+)": "不支持（IP被Disney+禁止）",
   "Unsupported Country/Region": "不支持的国家/地区",
-  "Failed (Network Connection)": "测试失败（网络连接问题）"
+  "Failed (Network Connection)": "测试失败（网络连接问题）",
+  "Auto Random Config": "一键随机端口和密码",
+  "Automatically generate new config on application startup": "自动随机API端口和密码,重新进入设置即可随机！",
+  "Manual configuration": "手动配置",
+  "Controller address copied to clipboard": "API端口已经复制到剪贴板",
+  "Secret copied to clipboard": "API密钥已经复制到剪贴板",
+  "Copy to clipboard": "点击我复制",
+  "Generate Random Secret": "随机API密钥",
+  "Generate Random Port": "随机API端口",
+  "Port Config": "端口设置"
 }