Update On Mon Jul 15 20:32:26 CEST 2024

clash-verge-rev/src/components/setting/setting-system.tsx

@@ -1,13 +1,13 @@
 import useSWR from "swr";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { PrivacyTipRounded, SettingsRounded } from "@mui/icons-material";
+import { SettingsRounded } from "@mui/icons-material";
 import { checkService } from "@/services/cmds";
 import { useVerge } from "@/hooks/use-verge";
-import { DialogRef, Switch } from "@/components/base";
+import { DialogRef, Notice, Switch } from "@/components/base";
 import { SettingList, SettingItem } from "./mods/setting-comp";
 import { GuardState } from "./mods/guard-state";
-import { ServiceViewer } from "./mods/service-viewer";
+import { ServiceSwitcher } from "./mods/service-switcher";
 import { SysproxyViewer } from "./mods/sysproxy-viewer";
 import { TunViewer } from "./mods/tun-viewer";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
@@ -20,22 +20,23 @@ const SettingSystem = ({ onError }: Props) => {
   const { t } = useTranslation();
 
   const { verge, mutateVerge, patchVerge } = useVerge();
-
   // service mode
-  const { data: serviceStatus } = useSWR("checkService", checkService, {
-    revalidateIfStale: false,
-    shouldRetryOnError: false,
-    focusThrottleInterval: 36e5, // 1 hour
-  });
+  const { data: serviceStatus, mutate: mutateServiceStatus } = useSWR(
+    "checkService",
+    checkService,
+    {
+      revalidateIfStale: false,
+      shouldRetryOnError: false,
+      focusThrottleInterval: 36e5, // 1 hour
+    }
+  );
 
-  const serviceRef = useRef<DialogRef>(null);
   const sysproxyRef = useRef<DialogRef>(null);
   const tunRef = useRef<DialogRef>(null);
 
   const {
     enable_tun_mode,
     enable_auto_launch,
-    enable_service_mode,
     enable_silent_start,
     enable_system_proxy,
   } = verge ?? {};
@@ -49,7 +50,6 @@ const SettingSystem = ({ onError }: Props) => {
     <SettingList title={t("System Setting")}>
       <SysproxyViewer ref={sysproxyRef} />
       <TunViewer ref={tunRef} />
-      <ServiceViewer ref={serviceRef} enable={!!enable_service_mode} />
 
       <SettingItem
         label={t("Tun Mode")}
@@ -66,38 +66,33 @@ const SettingSystem = ({ onError }: Props) => {
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
-          onChange={(e) => onChangeData({ enable_tun_mode: e })}
-          onGuard={(e) => patchVerge({ enable_tun_mode: e })}
+          onChange={(e) => {
+            if (serviceStatus !== "active") {
+              onChangeData({ enable_tun_mode: false });
+            } else {
+              onChangeData({ enable_tun_mode: e });
+            }
+          }}
+          onGuard={(e) => {
+            if (serviceStatus !== "active" && e) {
+              Notice.error(t("Please Enable Service Mode"));
+              return Promise.resolve();
+            } else {
+              return patchVerge({ enable_tun_mode: e });
+            }
+          }}
         >
           <Switch edge="end" />
         </GuardState>
       </SettingItem>
 
-      <SettingItem
-        label={t("Service Mode")}
-        extra={
-          <TooltipIcon
-            title={t("Service Mode Info")}
-            icon={PrivacyTipRounded}
-            onClick={() => serviceRef.current?.open()}
-          />
-        }
-      >
-        <GuardState
-          value={enable_service_mode ?? false}
-          valueProps="checked"
-          onCatch={onError}
-          onFormat={onSwitchFormat}
-          onChange={(e) => onChangeData({ enable_service_mode: e })}
-          onGuard={(e) => patchVerge({ enable_service_mode: e })}
-        >
-          <Switch
-            edge="end"
-            disabled={
-              serviceStatus !== "active" && serviceStatus !== "installed"
-            }
-          />
-        </GuardState>
+      <SettingItem label={t("Service Mode")}>
+        <ServiceSwitcher
+          status={serviceStatus ?? "unknown"}
+          mutate={mutateServiceStatus}
+          patchVerge={patchVerge}
+          onChangeData={onChangeData}
+        />
       </SettingItem>
 
       <SettingItem