feat: Add system proxy status indicators

src/components/setting/setting-system.tsx

@@ -1,7 +1,11 @@
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { SettingsRounded } from "@mui/icons-material";
+import {
+  SettingsRounded,
+  PlayArrowRounded,
+  PauseRounded,
+} from "@mui/icons-material";
 import { useVerge } from "@/hooks/use-verge";
 import { DialogRef, Notice, Switch } from "@/components/base";
 import { SettingList, SettingItem } from "./mods/setting-comp";
@@ -9,6 +13,7 @@ import { GuardState } from "./mods/guard-state";
 import { SysproxyViewer } from "./mods/sysproxy-viewer";
 import { TunViewer } from "./mods/tun-viewer";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import { getSystemProxy, getAutotemProxy } from "@/services/cmds";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -19,6 +24,9 @@ const SettingSystem = ({ onError }: Props) => {
 
   const { verge, mutateVerge, patchVerge } = useVerge();
 
+  const { data: sysproxy } = useSWR("getSystemProxy", getSystemProxy);
+  const { data: autoproxy } = useSWR("getAutotemProxy", getAutotemProxy);
+
   const sysproxyRef = useRef<DialogRef>(null);
   const tunRef = useRef<DialogRef>(null);
 
@@ -27,13 +35,25 @@ const SettingSystem = ({ onError }: Props) => {
     enable_auto_launch,
     enable_silent_start,
     enable_system_proxy,
+    proxy_auto_config,
   } = verge ?? {};
 
+  const isProxyEnabled = proxy_auto_config
+    ? autoproxy?.enable
+    : sysproxy?.enable;
+
   const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<IVergeConfig>) => {
     mutateVerge({ ...verge, ...patch }, false);
   };
 
+  const updateProxyStatus = async () => {
+    // 等待一小段时间让系统代理状态变化
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await mutate("getSystemProxy");
+    await mutate("getAutotemProxy");
+  };
+
   return (
     <SettingList title={t("System Setting")}>
       <SysproxyViewer ref={sysproxyRef} />
@@ -73,6 +93,11 @@ const SettingSystem = ({ onError }: Props) => {
               icon={SettingsRounded}
               onClick={() => sysproxyRef.current?.open()}
             />
+            {isProxyEnabled ? (
+              <PlayArrowRounded sx={{ color: "success.main", mr: 1 }} />
+            ) : (
+              <PauseRounded sx={{ color: "error.main", mr: 1 }} />
+            )}
           </>
         }
       >
@@ -82,7 +107,10 @@ const SettingSystem = ({ onError }: Props) => {
           onCatch={onError}
           onFormat={onSwitchFormat}
           onChange={(e) => onChangeData({ enable_system_proxy: e })}
-          onGuard={(e) => patchVerge({ enable_system_proxy: e })}
+          onGuard={async (e) => {
+            await patchVerge({ enable_system_proxy: e });
+            await updateProxyStatus();
+          }}
         >
           <Switch edge="end" />
         </GuardState>