feat: show service mode installation prompts in user mode

src/components/setting/setting-system.tsx

@@ -5,6 +5,8 @@ import {
   SettingsRounded,
   PlayArrowRounded,
   PauseRounded,
+  WarningRounded,
+  BuildRounded,
 } from "@mui/icons-material";
 import { useVerge } from "@/hooks/use-verge";
 import { DialogRef, Notice, Switch } from "@/components/base";
@@ -13,7 +15,14 @@ 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";
+import {
+  getSystemProxy,
+  getAutotemProxy,
+  getRunningMode,
+  installService,
+} from "@/services/cmds";
+import { useLockFn } from "ahooks";
+import { Box, Button, Tooltip } from "@mui/material";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -26,6 +35,13 @@ const SettingSystem = ({ onError }: Props) => {
 
   const { data: sysproxy } = useSWR("getSystemProxy", getSystemProxy);
   const { data: autoproxy } = useSWR("getAutotemProxy", getAutotemProxy);
+  const { data: runningMode, mutate: mutateRunningMode } = useSWR(
+    "getRunningMode",
+    getRunningMode,
+  );
+
+  // 是否以sidecar模式运行
+  const isSidecarMode = runningMode === "sidecar";
 
   const sysproxyRef = useRef<DialogRef>(null);
   const tunRef = useRef<DialogRef>(null);
@@ -54,6 +70,19 @@ const SettingSystem = ({ onError }: Props) => {
     await mutate("getAutotemProxy");
   };
 
+  // 安装系统服务
+  const onInstallService = useLockFn(async () => {
+    try {
+      Notice.info(t("Installing Service..."), 1000);
+      await installService();
+      Notice.success(t("Service Installed Successfully"), 2000);
+      // 重新获取运行模式
+      await mutateRunningMode();
+    } catch (err: any) {
+      Notice.error(err.message || err.toString(), 3000);
+    }
+  });
+
   return (
     <SettingList title={t("System Setting")}>
       <SysproxyViewer ref={sysproxyRef} />
@@ -62,11 +91,31 @@ const SettingSystem = ({ onError }: Props) => {
       <SettingItem
         label={t("Tun Mode")}
         extra={
-          <TooltipIcon
-            title={t("Tun Mode Info")}
-            icon={SettingsRounded}
-            onClick={() => tunRef.current?.open()}
-          />
+          <>
+            <TooltipIcon
+              title={t("Tun Mode Info")}
+              icon={SettingsRounded}
+              onClick={() => tunRef.current?.open()}
+            />
+            {isSidecarMode && (
+              <Tooltip title={t("TUN requires Service Mode")}>
+                <WarningRounded sx={{ color: "warning.main", mr: 1 }} />
+              </Tooltip>
+            )}
+            {isSidecarMode && (
+              <Tooltip title={t("Install Service")}>
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  size="small"
+                  onClick={onInstallService}
+                  sx={{ mr: 1, minWidth: "32px", p: "4px" }}
+                >
+                  <BuildRounded fontSize="small" />
+                </Button>
+              </Tooltip>
+            )}
+          </>
         }
       >
         <GuardState
@@ -75,13 +124,20 @@ const SettingSystem = ({ onError }: Props) => {
           onCatch={onError}
           onFormat={onSwitchFormat}
           onChange={(e) => {
+            // 当在sidecar模式下禁用切换
+            if (isSidecarMode) return;
             onChangeData({ enable_tun_mode: e });
           }}
           onGuard={(e) => {
+            // 当在sidecar模式下禁用切换
+            if (isSidecarMode) {
+              Notice.error(t("TUN requires Service Mode"), 2000);
+              return Promise.reject(new Error(t("TUN requires Service Mode")));
+            }
             return patchVerge({ enable_tun_mode: e });
           }}
         >
-          <Switch edge="end" />
+          <Switch edge="end" disabled={isSidecarMode} />
         </GuardState>
       </SettingItem>
       <SettingItem

src/locales/en.json

@@ -195,6 +195,8 @@
   "Settings": "Settings",
   "System Setting": "System Setting",
   "Tun Mode": "Tun (Virtual NIC) Mode",
+  "TUN requires Service Mode": "TUN mode requires service",
+  "Install Service": "Install Service",
   "Reset to Default": "Reset to Default",
   "Tun Mode Info": "Tun (Virtual NIC) mode: Captures all system traffic, when enabled, there is no need to enable system proxy.",
   "Stack": "Tun Stack",
@@ -365,6 +367,7 @@
   "Profile Reactivated": "Profile Reactivated",
   "Only YAML Files Supported": "Only YAML Files Supported",
   "Settings Applied": "Settings Applied",
+  "Installing Service...": "Installing Service...",
   "Service Installed Successfully": "Service Installed Successfully",
   "Service Uninstalled Successfully": "Service Uninstalled Successfully",
   "Proxy Daemon Duration Cannot be Less than 1 Second": "Proxy Daemon Duration Cannot be Less than 1 Second",

src/locales/zh.json

@@ -195,6 +195,8 @@
   "Settings": "设置",
   "System Setting": "系统设置",
   "Tun Mode": "TUN（虚拟网卡）模式",
+  "TUN requires Service Mode": "TUN 模式需要服务",
+  "Install Service": "安装服务",
   "Reset to Default": "重置为默认值",
   "Tun Mode Info": "TUN（虚拟网卡）模式接管系统所有流量，启用时无须打开系统代理",
   "Stack": "TUN 模式堆栈",
@@ -362,6 +364,7 @@
   "Profile Reactivated": "订阅已激活",
   "Only YAML Files Supported": "仅支持 YAML 文件",
   "Settings Applied": "设置已应用",
+  "Installing Service...": "安装服务中...",
   "Service Installed Successfully": "已成功安装服务",
   "Service Uninstalled Successfully": "已成功卸载服务",
   "Proxy Daemon Duration Cannot be Less than 1 Second": "代理守护间隔时间不得低于 1 秒",

src/services/cmds.ts

@@ -253,3 +253,13 @@ export async function scriptValidateNotice(status: string, msg: string) {
 export async function validateScriptFile(filePath: string) {
   return invoke<boolean>("validate_script_file", { filePath });
 }
+
+// 获取当前运行模式
+export const getRunningMode = async () => {
+  return invoke<string>("get_running_mode");
+};
+
+// 安装/重装系统服务
+export const installService = async () => {
+  return invoke<void>("install_service");
+};