refactor: clash-verge-service management (#4674)

* refactor: clash-verge-service management

* fix: correct service state checks in ProxyControlSwitches component
refactor: improve logging in service state update functions

* fix: add missing async handler for Windows and adjust logging import for macOS

* fix: streamline logging imports and add missing async handler for Windows

* refactor: remove unused useServiceStateSync hook and update imports in _layout

* refactor: remove unused useServiceStateSync import and clean up code in ProxyControlSwitches and _layout

* refactor: simplify service status checks and reduce wait time in useServiceInstaller hook

* refactor: remove unnecessary logging statements in service checks and IPC connection

* refactor: extract SwitchRow component for better code organization and readability

* refactor: enhance service state management and update related mutations in layout

* refactor: streamline core stopping logic and improve IPC connection logging

* refactor: consolidate service uninstallation logic and improve error handling

* fix: simplify conditional statements in CoreManager and service functions

* feat: add backoff dependency and implement retry strategy for IPC requests

* refactor: remove redundant Windows conditional and improve error handling in IPC tests

* test: improve error handling in IPC tests for message signing and verification

* fix: adjust IPC backoff retry parameters

* refactor: Remove service state tracking and related logic from service management

* feat: Enhance service status handling with logging and running mode updates

* fix: Improve service status handling with enhanced error logging

* fix: Ensure proper handling of service operations with error propagation

* refactor: Simplify service operation execution and enhance service status handling

* fix: Improve error message formatting in service operation execution and simplify service status retrieval

* refactor: Replace Cache with CacheProxy in multiple modules and update CacheEntry to be generic

* fix: Remove unnecessary success message from config validation

* refactor: Comment out logging statements in service version check and IPC request handling

src/components/shared/ProxyControlSwitches.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import {
   SettingsRounded,
@@ -19,8 +19,8 @@ import { useSystemProxyState } from "@/hooks/use-system-proxy-state";
 import { useSystemState } from "@/hooks/use-system-state";
 import { showNotice } from "@/services/noticeService";
 import { useServiceInstaller } from "@/hooks/useServiceInstaller";
-import { uninstallService, restartCore, stopCore } from "@/services/cmds";
 import { useLockFn } from "ahooks";
+import { useServiceUninstaller } from "@/hooks/useServiceUninstaller";
 
 interface ProxySwitchProps {
   label?: string;
@@ -28,10 +28,83 @@ interface ProxySwitchProps {
   noRightPadding?: boolean;
 }
 
+interface SwitchRowProps {
+  label: string;
+  active: boolean;
+  disabled?: boolean;
+  infoTitle: string;
+  onInfoClick?: () => void;
+  extraIcons?: React.ReactNode;
+  onToggle: (value: boolean) => Promise<void>;
+  onError?: (err: Error) => void;
+  highlight?: boolean;
+}
+
 /**
- * 可复用的代理控制开关组件
- * 包含 Tun Mode 和 System Proxy 的开关功能
+ * 抽取的子组件：统一的开关 UI
  */
+const SwitchRow = ({
+  label,
+  active,
+  disabled,
+  infoTitle,
+  onInfoClick,
+  extraIcons,
+  onToggle,
+  onError,
+  highlight,
+}: SwitchRowProps) => {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        p: 1,
+        pr: 2,
+        borderRadius: 1.5,
+        bgcolor: highlight
+          ? alpha(theme.palette.success.main, 0.07)
+          : "transparent",
+        opacity: disabled ? 0.6 : 1,
+        transition: "background-color 0.3s",
+      }}
+    >
+      <Box sx={{ display: "flex", alignItems: "center" }}>
+        {active ? (
+          <PlayCircleOutlineRounded sx={{ color: "success.main", mr: 1 }} />
+        ) : (
+          <PauseCircleOutlineRounded sx={{ color: "text.disabled", mr: 1 }} />
+        )}
+        <Typography
+          variant="subtitle1"
+          sx={{ fontWeight: 500, fontSize: "15px" }}
+        >
+          {label}
+        </Typography>
+        <TooltipIcon
+          title={infoTitle}
+          icon={SettingsRounded}
+          onClick={onInfoClick}
+          sx={{ ml: 1 }}
+        />
+        {extraIcons}
+      </Box>
+
+      <GuardState
+        value={active}
+        valueProps="checked"
+        onCatch={onError}
+        onFormat={(_, v) => v}
+        onGuard={onToggle}
+      >
+        <Switch edge="end" disabled={disabled} />
+      </GuardState>
+    </Box>
+  );
+};
+
 const ProxyControlSwitches = ({
   label,
   onError,
@@ -39,215 +112,115 @@ const ProxyControlSwitches = ({
 }: ProxySwitchProps) => {
   const { t } = useTranslation();
   const { verge, mutateVerge, patchVerge } = useVerge();
-  const theme = useTheme();
   const { installServiceAndRestartCore } = useServiceInstaller();
-
+  const { uninstallServiceAndRestartCore } = useServiceUninstaller();
   const { actualState: systemProxyActualState, toggleSystemProxy } =
     useSystemProxyState();
-
-  const { isAdminMode, isServiceMode, mutateRunningMode } = useSystemState();
-
-  const isTunAvailable = isServiceMode || isAdminMode;
+  const {
+    isServiceMode,
+    isTunModeAvailable,
+    mutateRunningMode,
+    mutateServiceOk,
+  } = useSystemState();
 
   const sysproxyRef = useRef<DialogRef>(null);
   const tunRef = useRef<DialogRef>(null);
 
   const { enable_tun_mode, enable_system_proxy } = verge ?? {};
 
-  // 确定当前显示哪个开关
-  const isSystemProxyMode = label === t("System Proxy") || !label;
-  const isTunMode = label === t("Tun Mode");
+  const showErrorNotice = useCallback(
+    (msg: string) => showNotice("error", t(msg)),
+    [t],
+  );
 
-  const onSwitchFormat = (
-    _e: React.ChangeEvent<HTMLInputElement>,
-    value: boolean,
-  ) => value;
-  const onChangeData = (patch: Partial<IVergeConfig>) => {
-    mutateVerge({ ...verge, ...patch }, false);
+  const handleTunToggle = async (value: boolean) => {
+    if (!isTunModeAvailable) {
+      const msg = "TUN requires Service Mode or Admin Mode";
+      showErrorNotice(msg);
+      throw new Error(t(msg));
+    }
+    mutateVerge({ ...verge, enable_tun_mode: value }, false);
+    await patchVerge({ enable_tun_mode: value });
   };
 
-  // 安装系统服务
-  const onInstallService = installServiceAndRestartCore;
-
-  // 卸载系统服务
-  const onUninstallService = useLockFn(async () => {
+  const onInstallService = useLockFn(async () => {
     try {
-      showNotice("info", t("Stopping Core..."));
-      await stopCore();
-      showNotice("info", t("Uninstalling Service..."));
-      await uninstallService();
-      showNotice("success", t("Service Uninstalled Successfully"));
-      showNotice("info", t("Restarting Core..."));
-      await restartCore();
+      await installServiceAndRestartCore();
       await mutateRunningMode();
-    } catch (err: unknown) {
-      showNotice("error", (err as Error).message || err?.toString());
-      try {
-        showNotice("info", t("Try running core as Sidecar..."));
-        await restartCore();
-        await mutateRunningMode();
-      } catch (e: unknown) {
-        showNotice("error", (e as Error)?.message || e?.toString());
-      }
+      await mutateServiceOk();
+    } catch (err) {
+      showNotice("error", (err as Error).message || String(err));
     }
   });
 
+  const onUninstallService = useLockFn(async () => {
+    try {
+      await uninstallServiceAndRestartCore();
+      await mutateRunningMode();
+      await mutateServiceOk();
+    } catch (err) {
+      showNotice("error", (err as Error).message || String(err));
+    }
+  });
+
+  const isSystemProxyMode = label === t("System Proxy") || !label;
+  const isTunMode = label === t("Tun Mode");
+
   return (
-    <Box sx={{ width: "100%" }}>
-      {/* 仅显示当前选中的开关 */}
+    <Box sx={{ width: "100%", pr: noRightPadding ? 1 : 2 }}>
       {isSystemProxyMode && (
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            p: 1,
-            pr: noRightPadding ? 1 : 2,
-            borderRadius: 1.5,
-            bgcolor: enable_system_proxy
-              ? alpha(theme.palette.success.main, 0.07)
-              : "transparent",
-            transition: "background-color 0.3s",
-          }}
-        >
-          <Box sx={{ display: "flex", alignItems: "center" }}>
-            {systemProxyActualState ? (
-              <PlayCircleOutlineRounded sx={{ color: "success.main", mr: 1 }} />
-            ) : (
-              <PauseCircleOutlineRounded
-                sx={{ color: "text.disabled", mr: 1 }}
-              />
-            )}
-
-            <Typography
-              variant="subtitle1"
-              sx={{ fontWeight: 500, fontSize: "15px" }}
-            >
-              {t("System Proxy")}
-            </Typography>
-            <TooltipIcon
-              title={t("System Proxy Info")}
-              icon={SettingsRounded}
-              onClick={() => sysproxyRef.current?.open()}
-              sx={{ ml: 1 }}
-            />
-          </Box>
-
-          <GuardState
-            value={systemProxyActualState}
-            valueProps="checked"
-            onCatch={onError}
-            onFormat={onSwitchFormat}
-            onGuard={(e) => toggleSystemProxy(e)}
-          >
-            <Switch edge="end" />
-          </GuardState>
-        </Box>
+        <SwitchRow
+          label={t("System Proxy")}
+          active={systemProxyActualState}
+          infoTitle={t("System Proxy Info")}
+          onInfoClick={() => sysproxyRef.current?.open()}
+          onToggle={(value) => toggleSystemProxy(value)}
+          onError={onError}
+          highlight={enable_system_proxy}
+        />
       )}
 
       {isTunMode && (
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            p: 1,
-            pr: noRightPadding ? 1 : 2,
-            borderRadius: 1.5,
-            bgcolor: enable_tun_mode
-              ? alpha(theme.palette.success.main, 0.07)
-              : "transparent",
-            opacity: !isTunAvailable ? 0.6 : 1,
-            transition: "background-color 0.3s",
-          }}
-        >
-          <Box sx={{ display: "flex", alignItems: "center" }}>
-            {enable_tun_mode ? (
-              <PlayCircleOutlineRounded sx={{ color: "success.main", mr: 1 }} />
-            ) : (
-              <PauseCircleOutlineRounded
-                sx={{ color: "text.disabled", mr: 1 }}
-              />
-            )}
-
-            <Typography
-              variant="subtitle1"
-              sx={{ fontWeight: 500, fontSize: "15px" }}
-            >
-              {t("Tun Mode")}
-            </Typography>
-            <TooltipIcon
-              title={t("Tun Mode Info")}
-              icon={SettingsRounded}
-              onClick={() => tunRef.current?.open()}
-              sx={{ ml: 1 }}
-            />
-
-            {!isTunAvailable && (
-              <TooltipIcon
-                title={t("TUN requires Service Mode or Admin Mode")}
-                icon={WarningRounded}
-                sx={{ color: "warning.main", ml: 1 }}
-              />
-            )}
-
-            {!isTunAvailable && (
-              <TooltipIcon
-                title={t("Install Service")}
-                icon={BuildRounded}
-                color="primary"
-                onClick={onInstallService}
-                sx={{ ml: 1 }}
-              />
-            )}
-
-            {isServiceMode && (
-              <TooltipIcon
-                title={t("Uninstall Service")}
-                icon={DeleteForeverRounded}
-                color="secondary"
-                onClick={onUninstallService}
-                sx={{ ml: 1 }}
-              />
-            )}
-          </Box>
-
-          <GuardState
-            value={enable_tun_mode ?? false}
-            valueProps="checked"
-            onCatch={onError}
-            onFormat={onSwitchFormat}
-            onChange={(e) => {
-              if (!isTunAvailable) {
-                showNotice(
-                  "error",
-                  t("TUN requires Service Mode or Admin Mode"),
-                );
-                return Promise.reject(
-                  new Error(t("TUN requires Service Mode or Admin Mode")),
-                );
-              }
-              onChangeData({ enable_tun_mode: e });
-            }}
-            onGuard={(e) => {
-              if (!isTunAvailable) {
-                showNotice(
-                  "error",
-                  t("TUN requires Service Mode or Admin Mode"),
-                );
-                return Promise.reject(
-                  new Error(t("TUN requires Service Mode or Admin Mode")),
-                );
-              }
-              return patchVerge({ enable_tun_mode: e });
-            }}
-          >
-            <Switch edge="end" disabled={!isTunAvailable} />
-          </GuardState>
-        </Box>
+        <SwitchRow
+          label={t("Tun Mode")}
+          active={!!enable_tun_mode}
+          infoTitle={t("Tun Mode Info")}
+          onInfoClick={() => tunRef.current?.open()}
+          onToggle={handleTunToggle}
+          onError={onError}
+          disabled={!isServiceMode}
+          highlight={!!enable_tun_mode}
+          extraIcons={
+            <>
+              {!isServiceMode && (
+                <TooltipIcon
+                  title={t("TUN requires Service Mode or Admin Mode")}
+                  icon={WarningRounded}
+                  sx={{ color: "warning.main", ml: 1 }}
+                />
+              )}
+              {!isServiceMode ? (
+                <TooltipIcon
+                  title={t("Install Service")}
+                  icon={BuildRounded}
+                  color="primary"
+                  onClick={onInstallService}
+                  sx={{ ml: 1 }}
+                />
+              ) : (
+                <TooltipIcon
+                  title={t("Uninstall Service")}
+                  icon={DeleteForeverRounded}
+                  color="secondary"
+                  onClick={onUninstallService}
+                  sx={{ ml: 1 }}
+                />
+              )}
+            </>
+          }
+        />
       )}
 
-      {/* 引用对话框组件 */}
       <SysproxyViewer ref={sysproxyRef} />
       <TunViewer ref={tunRef} />
     </Box>

src/hooks/use-system-state.ts

@@ -15,6 +15,8 @@ export function useSystemState() {
       revalidateOnFocus: false,
     },
   );
+  const isSidecarMode = runningMode === "Sidecar";
+  const isServiceMode = runningMode === "Service";
 
   // 获取管理员状态
   const { data: isAdminMode = false } = useSWR("isAdmin", isAdmin, {
@@ -22,24 +24,32 @@ export function useSystemState() {
     revalidateOnFocus: false,
   });
 
-  // 获取系统服务状态
-  const isServiceMode = runningMode === "Service";
-  const { data: isServiceOk = false } = useSWR(
+  const { data: isServiceOk = false, mutate: mutateServiceOk } = useSWR(
     "isServiceAvailable",
     isServiceAvailable,
     {
       suspense: false,
       revalidateOnFocus: false,
-      isPaused: () => !isServiceMode, // 仅在 Service 模式下请求
+      onSuccess: (data) => {
+        console.log("[useSystemState] 服务状态更新:", data);
+      },
+      onError: (error) => {
+        console.error("[useSystemState] 服务状态检查失败:", error);
+      },
+      isPaused: () => !isServiceMode, // 仅在非 Service 模式下暂停请求
     },
   );
 
+  const isTunModeAvailable = isAdminMode || isServiceOk;
+
   return {
     runningMode,
     isAdminMode,
-    isSidecarMode: runningMode === "Sidecar",
-    isServiceMode: runningMode === "Service",
+    isSidecarMode,
+    isServiceMode,
     isServiceOk,
+    isTunModeAvailable: isTunModeAvailable,
     mutateRunningMode,
+    mutateServiceOk,
   };
 }

src/hooks/useServiceInstaller.ts

@@ -1,121 +1,35 @@
-import { useTranslation } from "react-i18next";
-import { useLockFn } from "ahooks";
+import { installService, restartCore } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
-import {
-  installService,
-  isServiceAvailable,
-  restartCore,
-} from "@/services/cmds";
-import { useSystemState } from "@/hooks/use-system-state";
-import { mutate } from "swr";
+import { t } from "i18next";
+import { useCallback } from "react";
 
-export function useServiceInstaller() {
-  const { t } = useTranslation();
-  const { mutateRunningMode } = useSystemState();
-
-  const installServiceAndRestartCore = useLockFn(async () => {
-    try {
-      showNotice("info", t("Installing Service..."));
-      await installService();
-      showNotice("success", t("Service Installed Successfully"));
-
-      showNotice("info", t("Waiting for service to be ready..."));
-      let serviceReady = false;
-      for (let i = 0; i < 5; i++) {
-        try {
-          // 等待1秒再检查
-          await new Promise((resolve) => setTimeout(resolve, 1000));
-          const isAvailable = await isServiceAvailable();
-          if (isAvailable) {
-            serviceReady = true;
-            mutate("isServiceAvailable", true, false);
-            break;
-          }
-          // 最后一次尝试不显示重试信息
-          if (i < 4) {
-            showNotice(
-              "info",
-              t("Service not ready, retrying attempt {count}/{total}...", {
-                count: i + 1,
-                total: 5,
-              }),
-            );
-          }
-        } catch (error) {
-          console.error(t("Error checking service status:"), error);
-          if (i < 4) {
-            showNotice(
-              "error",
-              t(
-                "Failed to check service status, retrying attempt {count}/{total}...",
-                {
-                  count: i + 1,
-                  total: 5,
-                },
-              ),
-            );
-          }
-        }
-      }
-
-      if (!serviceReady) {
-        showNotice(
-          "info",
-          t(
-            "Service did not become ready after attempts. Proceeding with core restart.",
-          ),
-        );
-      }
-
-      showNotice("info", t("Restarting Core..."));
-      await restartCore();
-
-      // 核心重启后，再次确认并更新相关状态
-      await mutateRunningMode();
-      const finalServiceStatus = await isServiceAvailable();
-      mutate("isServiceAvailable", finalServiceStatus, false);
-
-      if (serviceReady && finalServiceStatus) {
-        showNotice("success", t("Service is ready and core restarted"));
-      } else if (finalServiceStatus) {
-        showNotice("success", t("Core restarted. Service is now available."));
-      } else if (serviceReady) {
-        showNotice(
-          "info",
-          t(
-            "Service was ready, but core restart might have issues or service became unavailable. Please check.",
-          ),
-        );
-      } else {
-        showNotice(
-          "error",
-          t(
-            "Service installation or core restart encountered issues. Service might not be available. Please check system logs.",
-          ),
-        );
-      }
-      return finalServiceStatus;
-    } catch (err: any) {
-      showNotice("error", err.message || err.toString());
-      // 尝试性回退或最终操作
-      try {
-        showNotice("info", t("Attempting to restart core as a fallback..."));
-        await restartCore();
-        await mutateRunningMode();
-        await isServiceAvailable().then((status) =>
-          mutate("isServiceAvailable", status, false),
-        );
-      } catch (recoveryError: any) {
-        showNotice(
-          "error",
-          t("Fallback core restart also failed: {message}", {
-            message: recoveryError.message,
-          }),
-        );
-      }
-      return false;
+const executeWithErrorHandling = async (
+  operation: () => Promise<void>,
+  loadingMessage: string,
+  successMessage?: string,
+) => {
+  try {
+    showNotice("info", t(loadingMessage));
+    await operation();
+    if (successMessage) {
+      showNotice("success", t(successMessage));
     }
-  });
+  } catch (err) {
+    const msg = (err as Error)?.message || String(err);
+    showNotice("error", msg);
+    throw err;
+  }
+};
 
+export const useServiceInstaller = () => {
+  const installServiceAndRestartCore = useCallback(async () => {
+    await executeWithErrorHandling(
+      () => installService(),
+      "Installing Service...",
+      "Service Installed Successfully",
+    );
+
+    await executeWithErrorHandling(() => restartCore(), "Restarting Core...");
+  }, []);
   return { installServiceAndRestartCore };
-}
+};

src/hooks/useServiceUninstaller.ts

@@ -0,0 +1,41 @@
+import { restartCore, stopCore, uninstallService } from "@/services/cmds";
+import { showNotice } from "@/services/noticeService";
+import { t } from "i18next";
+import { useSystemState } from "./use-system-state";
+import { useCallback } from "react";
+
+const executeWithErrorHandling = async (
+  operation: () => Promise<void>,
+  loadingMessage: string,
+  successMessage?: string,
+) => {
+  try {
+    showNotice("info", t(loadingMessage));
+    await operation();
+    if (successMessage) {
+      showNotice("success", t(successMessage));
+    }
+  } catch (err) {
+    const msg = (err as Error)?.message || String(err);
+    showNotice("error", msg);
+    throw err;
+  }
+};
+
+export const useServiceUninstaller = () => {
+  const { mutateRunningMode, mutateServiceOk } = useSystemState();
+
+  const uninstallServiceAndRestartCore = useCallback(async () => {
+    await executeWithErrorHandling(() => stopCore(), "Stopping Core...");
+
+    await executeWithErrorHandling(
+      () => uninstallService(),
+      "Uninstalling Service...",
+      "Service Uninstalled Successfully",
+    );
+
+    await executeWithErrorHandling(() => restartCore(), "Restarting Core...");
+  }, [mutateRunningMode, mutateServiceOk]);
+
+  return { uninstallServiceAndRestartCore };
+};

src/pages/_layout.tsx

@@ -208,6 +208,9 @@ const Layout = () => {
         mutate("getVergeConfig");
         mutate("getSystemProxy");
         mutate("getAutotemProxy");
+        // 运行模式变更时也需要刷新相关状态
+        mutate("getRunningMode");
+        mutate("isServiceAvailable");
       }),
 
       addListener("verge://notice-message", ({ payload }) =>