feat: windows service mode ui

src/components/setting/service-mode.tsx

@@ -0,0 +1,104 @@
+import useSWR, { useSWRConfig } from "swr";
+import { useLockFn } from "ahooks";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Stack,
+  Typography,
+} from "@mui/material";
+import {
+  checkService,
+  installService,
+  uninstallService,
+  patchVergeConfig,
+} from "../../services/cmds";
+import Notice from "../base/base-notice";
+import noop from "../../utils/noop";
+
+interface Props {
+  open: boolean;
+  enable: boolean;
+  onClose: () => void;
+  onError?: (err: Error) => void;
+}
+
+const ServiceMode = (props: Props) => {
+  const { open, enable, onClose, onError = noop } = props;
+
+  const { t } = useTranslation();
+  const { mutate } = useSWRConfig();
+  const { data: status } = useSWR("checkService", checkService, {
+    revalidateIfStale: true,
+    shouldRetryOnError: false,
+  });
+
+  const state = status != null ? status : "pending";
+
+  const onInstall = useLockFn(async () => {
+    try {
+      await installService();
+      mutate("checkService");
+      Notice.success("Service installed successfully");
+      onClose();
+    } catch (err: any) {
+      mutate("checkService");
+      onError(err);
+    }
+  });
+
+  const onUninstall = useLockFn(async () => {
+    try {
+      if (state === "active" && enable) {
+        await patchVergeConfig({ enable_service_mode: false });
+      }
+
+      await uninstallService();
+      Notice.success("Service uninstalled successfully");
+      mutate("checkService");
+      onClose();
+    } catch (err: any) {
+      mutate("checkService");
+      onError(err);
+    }
+  });
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{t("Service Mode")}</DialogTitle>
+
+      <DialogContent sx={{ width: 360, userSelect: "text" }}>
+        <Typography>Current State: {state}</Typography>
+
+        {(state === "unknown" || state === "uninstall") && (
+          <Typography>
+            Infomation: Please make sure the Clash Verge Service is installed
+            and enabled
+          </Typography>
+        )}
+
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ mt: 4, justifyContent: "flex-end" }}
+        >
+          {state === "uninstall" && (
+            <Button variant="contained" onClick={onInstall}>
+              Install
+            </Button>
+          )}
+
+          {(state === "active" || state === "installed") && (
+            <Button variant="outlined" onClick={onUninstall}>
+              Uninstall
+            </Button>
+          )}
+        </Stack>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ServiceMode;

src/components/setting/setting-system.tsx

@@ -1,24 +1,49 @@
 import useSWR, { useSWRConfig } from "swr";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Box, ListItemText, Switch, TextField } from "@mui/material";
-import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
+import {
+  Box,
+  IconButton,
+  ListItemText,
+  Switch,
+  TextField,
+} from "@mui/material";
+import { ArrowForward, PrivacyTipRounded } from "@mui/icons-material";
+import {
+  checkService,
+  getVergeConfig,
+  patchVergeConfig,
+} from "../../services/cmds";
 import { SettingList, SettingItem } from "./setting";
 import { CmdType } from "../../services/types";
 import GuardState from "./guard-state";
+import ServiceMode from "./service-mode";
 import SysproxyTooltip from "./sysproxy-tooltip";
+import getSystem from "../../utils/get-system";
 
 interface Props {
   onError?: (err: Error) => void;
 }
 
+const isWIN = getSystem() === "windows";
+
 const SettingSystem = ({ onError }: Props) => {
   const { t } = useTranslation();
   const { mutate } = useSWRConfig();
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
 
+  // service mode
+  const [serviceOpen, setServiceOpen] = useState(false);
+  const { data: serviceStatus } = useSWR(
+    isWIN ? "checkService" : null,
+    checkService,
+    { revalidateIfStale: true, shouldRetryOnError: false }
+  );
+
   const {
     enable_tun_mode,
     enable_auto_launch,
+    enable_service_mode,
     enable_silent_start,
     enable_system_proxy,
     system_proxy_bypass,
@@ -46,6 +71,56 @@ const SettingSystem = ({ onError }: Props) => {
         </GuardState>
       </SettingItem>
 
+      {isWIN && (
+        <SettingItem>
+          <ListItemText
+            primary={
+              <Box sx={{ display: "flex", alignItems: "center" }}>
+                <span style={{ marginRight: 4 }}>{t("Service Mode")}</span>
+
+                {(serviceStatus === "active" ||
+                  serviceStatus === "installed") && (
+                  <PrivacyTipRounded
+                    fontSize="small"
+                    onClick={() => setServiceOpen(true)}
+                  />
+                )}
+              </Box>
+            }
+          />
+
+          {serviceStatus === "active" || serviceStatus === "installed" ? (
+            <GuardState
+              value={enable_service_mode ?? false}
+              valueProps="checked"
+              onCatch={onError}
+              onFormat={onSwitchFormat}
+              onChange={(e) => onChangeData({ enable_service_mode: e })}
+              onGuard={(e) => patchVergeConfig({ enable_service_mode: e })}
+            >
+              <Switch edge="end" />
+            </GuardState>
+          ) : (
+            <IconButton
+              color="inherit"
+              size="small"
+              onClick={() => setServiceOpen(true)}
+            >
+              <ArrowForward />
+            </IconButton>
+          )}
+
+          {serviceOpen && (
+            <ServiceMode
+              open={serviceOpen}
+              enable={!!enable_service_mode}
+              onError={onError}
+              onClose={() => setServiceOpen(false)}
+            />
+          )}
+        </SettingItem>
+      )}
+
       <SettingItem>
         <ListItemText primary={t("Auto Launch")} />
         <GuardState
@@ -78,7 +153,7 @@ const SettingSystem = ({ onError }: Props) => {
         <ListItemText
           primary={
             <Box sx={{ display: "flex", alignItems: "center" }}>
-              {t("System Proxy")}
+              <span style={{ marginRight: 4 }}>{t("System Proxy")}</span>
               <SysproxyTooltip />
             </Box>
           }