refactor: proxy control component and system settings UI

fix: handle tun toggle state after service uninstall

src/hooks/use-verge.ts

@@ -1,7 +1,14 @@
 import useSWR from "swr";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { getVergeConfig, patchVergeConfig } from "@/services/cmds";
+import { useSystemState } from "@/hooks/use-system-state";
+import { showNotice } from "@/services/noticeService";
 
 export const useVerge = () => {
+  const { t } = useTranslation();
+  const { isAdminMode, isServiceMode } = useSystemState();
+
   const { data: verge, mutate: mutateVerge } = useSWR(
     "getVergeConfig",
     async () => {
@@ -15,6 +22,29 @@ export const useVerge = () => {
     mutateVerge();
   };
 
+  const isTunAvailable = isServiceMode || isAdminMode;
+  const { enable_tun_mode } = verge ?? {};
+
+  // 当服务不可用且TUN模式开启时自动关闭TUN
+  useEffect(() => {
+    if (enable_tun_mode && !isTunAvailable) {
+      console.log("[useVerge] 检测到服务不可用，自动关闭TUN模式");
+
+      patchVergeConfig({ enable_tun_mode: false })
+        .then(() => {
+          mutateVerge();
+          showNotice(
+            "info",
+            t("TUN Mode automatically disabled due to service unavailable"),
+          );
+        })
+        .catch((err) => {
+          console.error("[useVerge] 自动关闭TUN模式失败:", err);
+          showNotice("error", t("Failed to disable TUN Mode automatically"));
+        });
+    }
+  }, [isTunAvailable, enable_tun_mode, mutateVerge, t]);
+
   return {
     verge,
     mutateVerge,