feat: windows service mode ui

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>
           }