feat: system proxy setting

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>
   );
 };