feat: system proxy setting

src/components/setting/mods/sysproxy-tooltip.tsx

@@ -1,56 +0,0 @@
-import { useEffect, useState } from "react";
-import { InfoRounded } from "@mui/icons-material";
-import { ClickAwayListener, Tooltip } from "@mui/material";
-import { getSystemProxy } from "@/services/cmds";
-
-const SysproxyTooltip = () => {
-  const [open, setOpen] = useState(false);
-  const [info, setInfo] = useState<any>({});
-
-  const onShow = async () => {
-    const data = await getSystemProxy();
-    setInfo(data ?? {});
-    setOpen(true);
-  };
-
-  useEffect(() => {
-    if (!open) return;
-    const timer = setTimeout(() => setOpen(false), 2000);
-    return () => clearTimeout(timer);
-  }, [open]);
-
-  // todo: add error info
-  const showTitle = (
-    <div>
-      <div>Enable: {(!!info.enable).toString()}</div>
-      <div>Server: {info.server}</div>
-      <div>Bypass: {info.bypass}</div>
-    </div>
-  );
-
-  return (
-    <ClickAwayListener onClickAway={() => setOpen(false)}>
-      <Tooltip
-        PopperProps={{
-          disablePortal: true,
-        }}
-        onClose={() => setOpen(false)}
-        open={open}
-        disableFocusListener
-        disableHoverListener
-        disableTouchListener
-        placement="top"
-        title={showTitle}
-        arrow
-      >
-        <InfoRounded
-          fontSize="small"
-          style={{ cursor: "pointer", opacity: 0.75 }}
-          onClick={onShow}
-        />
-      </Tooltip>
-    </ClickAwayListener>
-  );
-};
-
-export default SysproxyTooltip;

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

@@ -0,0 +1,204 @@
+import useSWR from "swr";
+import { useEffect, useState } from "react";
+import { useLockFn } from "ahooks";
+import { useTranslation } from "react-i18next";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  InputAdornment,
+  List,
+  ListItem,
+  ListItemText,
+  styled,
+  Switch,
+  TextField,
+  Typography,
+} from "@mui/material";
+import {
+  getSystemProxy,
+  getVergeConfig,
+  patchVergeConfig,
+} from "@/services/cmds";
+import { ModalHandler } from "@/hooks/use-modal-handler";
+import Notice from "@/components/base/base-notice";
+
+interface Props {
+  handler: ModalHandler;
+}
+
+const FlexBox = styled("div")`
+  display: flex;
+  margin-top: 4px;
+
+  .label {
+    flex: none;
+    width: 80px;
+  }
+`;
+
+const SysproxyViewer = ({ handler }: Props) => {
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useState(false);
+
+  if (handler) {
+    handler.current = {
+      open: () => setOpen(true),
+      close: () => setOpen(false),
+    };
+  }
+
+  const { data: vergeConfig, mutate: mutateVerge } = useSWR(
+    "getVergeConfig",
+    getVergeConfig
+  );
+
+  const {
+    enable_system_proxy: enabled,
+    enable_proxy_guard,
+    system_proxy_bypass,
+    proxy_guard_duration,
+  } = vergeConfig ?? {};
+
+  const { data: sysproxy } = useSWR(
+    open ? "getSystemProxy" : null,
+    getSystemProxy
+  );
+
+  const [value, setValue] = useState({
+    guard: enable_proxy_guard,
+    bypass: system_proxy_bypass,
+    duration: proxy_guard_duration ?? 10,
+  });
+
+  useEffect(() => {
+    setValue({
+      guard: enable_proxy_guard,
+      bypass: system_proxy_bypass,
+      duration: proxy_guard_duration ?? 10,
+    });
+  }, [vergeConfig]);
+
+  const onSave = useLockFn(async () => {
+    if (value.duration < 5) {
+      Notice.error("Proxy guard duration at least 5 seconds");
+      return;
+    }
+
+    const patch: Partial<CmdType.VergeConfig> = {};
+
+    if (value.guard !== enable_proxy_guard) {
+      patch.enable_proxy_guard = value.guard;
+    }
+    if (value.duration !== proxy_guard_duration) {
+      patch.proxy_guard_duration = value.duration;
+    }
+    if (value.bypass !== system_proxy_bypass) {
+      patch.system_proxy_bypass = value.bypass;
+    }
+
+    try {
+      await patchVergeConfig(patch);
+      mutateVerge();
+      setOpen(false);
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  return (
+    <Dialog open={open} onClose={() => setOpen(false)}>
+      <DialogTitle>{t("System Proxy Setting")}</DialogTitle>
+
+      <DialogContent sx={{ width: 450, maxHeight: 300 }}>
+        <List>
+          <ListItem sx={{ padding: "5px 2px" }}>
+            <ListItemText primary={t("Proxy Guard")} />
+            <Switch
+              edge="end"
+              disabled={!enabled}
+              checked={value.guard}
+              onChange={(_, e) => setValue((v) => ({ ...v, guard: e }))}
+            />
+          </ListItem>
+
+          <ListItem sx={{ padding: "5px 2px" }}>
+            <ListItemText primary={t("Guard Duration")} />
+            <TextField
+              disabled={!enabled}
+              size="small"
+              value={value.duration}
+              sx={{ width: 100 }}
+              InputProps={{
+                endAdornment: <InputAdornment position="end">s</InputAdornment>,
+              }}
+              onChange={(e) => {
+                setValue((v) => ({
+                  ...v,
+                  duration: +e.target.value.replace(/\D/, ""),
+                }));
+              }}
+            />
+          </ListItem>
+
+          <ListItem sx={{ padding: "5px 2px", alignItems: "start" }}>
+            <ListItemText
+              primary={t("Proxy Bypass")}
+              sx={{ padding: "3px 0" }}
+            />
+            <TextField
+              disabled={!enabled}
+              size="small"
+              autoComplete="off"
+              multiline
+              rows={3}
+              sx={{ width: 280 }}
+              value={value.bypass}
+              onChange={(e) =>
+                setValue((v) => ({ ...v, bypass: e.target.value }))
+              }
+            />
+          </ListItem>
+        </List>
+
+        <Box sx={{ mt: 2.5 }}>
+          <Typography variant="body1" sx={{ fontSize: "18px", mb: 1 }}>
+            {t("Current System Proxy")}
+          </Typography>
+
+          <FlexBox>
+            <Typography className="label">Enable:</Typography>
+            <Typography className="value">
+              {(!!sysproxy?.enable).toString()}
+            </Typography>
+          </FlexBox>
+
+          <FlexBox>
+            <Typography className="label">Server:</Typography>
+            <Typography className="value">{sysproxy?.server || "-"}</Typography>
+          </FlexBox>
+
+          <FlexBox>
+            <Typography className="label">Bypass:</Typography>
+            <Typography className="value">{sysproxy?.bypass || "-"}</Typography>
+          </FlexBox>
+        </Box>
+      </DialogContent>
+
+      <DialogActions>
+        <Button variant="outlined" onClick={() => setOpen(false)}>
+          {t("Cancel")}
+        </Button>
+        <Button onClick={onSave} variant="contained">
+          {t("Save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default SysproxyViewer;

src/components/setting/setting-system.tsx

@@ -1,18 +1,19 @@
-import useSWR, { useSWRConfig } from "swr";
+import useSWR from "swr";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { IconButton, Switch, TextField } from "@mui/material";
-import { ArrowForward, PrivacyTipRounded } from "@mui/icons-material";
+import { IconButton, Switch } from "@mui/material";
+import { ArrowForward, PrivacyTipRounded, Settings } from "@mui/icons-material";
 import {
   checkService,
   getVergeConfig,
   patchVergeConfig,
 } from "@/services/cmds";
 import { SettingList, SettingItem } from "./setting";
+import useModalHandler from "@/hooks/use-modal-handler";
 import getSystem from "@/utils/get-system";
 import GuardState from "./mods/guard-state";
 import ServiceMode from "./mods/service-mode";
-import SysproxyTooltip from "./mods/sysproxy-tooltip";
+import SysproxyViewer from "./mods/sysproxy-viewer";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -22,8 +23,11 @@ const isWIN = getSystem() === "windows";
 
 const SettingSystem = ({ onError }: Props) => {
   const { t } = useTranslation();
-  const { mutate } = useSWRConfig();
-  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+
+  const { data: vergeConfig, mutate: mutateVerge } = useSWR(
+    "getVergeConfig",
+    getVergeConfig
+  );
 
   // service mode
   const [serviceOpen, setServiceOpen] = useState(false);
@@ -39,17 +43,19 @@ const SettingSystem = ({ onError }: Props) => {
     enable_service_mode,
     enable_silent_start,
     enable_system_proxy,
-    system_proxy_bypass,
-    enable_proxy_guard,
   } = vergeConfig ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
-    mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
+    mutateVerge({ ...vergeConfig, ...patch }, false);
   };
 
+  const sysproxyHandler = useModalHandler();
+
   return (
     <SettingList title={t("System Setting")}>
+      <SysproxyViewer handler={sysproxyHandler} />
+
       <SettingItem label={t("Tun Mode")}>
         <GuardState
           value={enable_tun_mode ?? false}
@@ -108,6 +114,31 @@ const SettingSystem = ({ onError }: Props) => {
         />
       )}
 
+      <SettingItem
+        label={t("System Proxy")}
+        extra={
+          <Settings
+            fontSize="small"
+            style={{ cursor: "pointer", opacity: 0.75 }}
+            onClick={() => sysproxyHandler.current.open()}
+          />
+        }
+      >
+        <GuardState
+          value={enable_system_proxy ?? false}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ enable_system_proxy: e })}
+          onGuard={async (e) => {
+            await patchVergeConfig({ enable_system_proxy: e });
+            mutateVerge(); // update bypass value
+          }}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
       <SettingItem label={t("Auto Launch")}>
         <GuardState
           value={enable_auto_launch ?? false}
@@ -133,56 +164,6 @@ const SettingSystem = ({ onError }: Props) => {
           <Switch edge="end" />
         </GuardState>
       </SettingItem>
-
-      <SettingItem label={t("System Proxy")} extra={<SysproxyTooltip />}>
-        <GuardState
-          value={enable_system_proxy ?? false}
-          valueProps="checked"
-          onCatch={onError}
-          onFormat={onSwitchFormat}
-          onChange={(e) => onChangeData({ enable_system_proxy: e })}
-          onGuard={async (e) => {
-            await patchVergeConfig({ enable_system_proxy: e });
-            mutate("getVergeConfig"); // update bypass value
-          }}
-        >
-          <Switch edge="end" />
-        </GuardState>
-      </SettingItem>
-
-      {enable_system_proxy && (
-        <SettingItem label={t("Proxy Guard")}>
-          <GuardState
-            value={enable_proxy_guard ?? false}
-            valueProps="checked"
-            onCatch={onError}
-            onFormat={onSwitchFormat}
-            onChange={(e) => onChangeData({ enable_proxy_guard: e })}
-            onGuard={(e) => patchVergeConfig({ enable_proxy_guard: e })}
-          >
-            <Switch edge="end" />
-          </GuardState>
-        </SettingItem>
-      )}
-
-      {enable_system_proxy && (
-        <SettingItem label={t("Proxy Bypass")}>
-          <GuardState
-            value={system_proxy_bypass ?? ""}
-            onCatch={onError}
-            onFormat={(e: any) => e.target.value}
-            onChange={(e) => onChangeData({ system_proxy_bypass: e })}
-            onGuard={(e) => patchVergeConfig({ system_proxy_bypass: e })}
-            waitTime={1000}
-          >
-            <TextField
-              autoComplete="off"
-              size="small"
-              sx={{ width: 120, input: { py: "7.5px" } }}
-            />
-          </GuardState>
-        </SettingItem>
-      )}
     </SettingList>
   );
 };

src/locales/en.json

@@ -65,8 +65,11 @@
   "Auto Launch": "Auto Launch",
   "Silent Start": "Silent Start",
   "System Proxy": "System Proxy",
+  "System Proxy Setting": "System Proxy Setting",
   "Proxy Guard": "Proxy Guard",
+  "Guard Duration": "Guard Duration",
   "Proxy Bypass": "Proxy Bypass",
+  "Current System Proxy": "Current System Proxy",
   "Theme Mode": "Theme Mode",
   "Theme Blur": "Theme Blur",
   "Theme Setting": "Theme Setting",

src/locales/zh.json

@@ -65,8 +65,11 @@
   "Auto Launch": "开机自启",
   "Silent Start": "静默启动",
   "System Proxy": "系统代理",
+  "System Proxy Setting": "系统代理设置",
   "Proxy Guard": "系统代理守卫",
+  "Guard Duration": "代理守卫间隔",
   "Proxy Bypass": "Proxy Bypass",
+  "Current System Proxy": "当前系统代理",
   "Theme Mode": "主题模式",
   "Theme Blur": "背景模糊",
   "Theme Setting": "主题设置",

src/services/cmds.ts

@@ -121,7 +121,11 @@ export async function patchVergeConfig(payload: CmdType.VergeConfig) {
 }
 
 export async function getSystemProxy() {
-  return invoke<any>("get_sys_proxy");
+  return invoke<{
+    enable: boolean;
+    server: string;
+    bypass: string;
+  }>("get_sys_proxy");
 }
 
 export async function changeClashCore(clashCore: string) {

src/services/types.d.ts

@@ -144,6 +144,7 @@ declare namespace CmdType {
     enable_silent_start?: boolean;
     enable_system_proxy?: boolean;
     enable_proxy_guard?: boolean;
+    proxy_guard_duration?: number;
     system_proxy_bypass?: string;
     web_ui_list?: string[];
     theme_setting?: {