fix: adjust service mode ui

src/components/setting/mods/service-viewer.tsx

@@ -24,7 +24,11 @@ export const ServiceViewer = forwardRef<DialogRef, Props>((props, ref) => {
   const { data: status, mutate: mutateCheck } = useSWR(
     "checkService",
     checkService,
-    { revalidateIfStale: false, shouldRetryOnError: false }
+    {
+      revalidateIfStale: false,
+      shouldRetryOnError: false,
+      focusThrottleInterval: 36e5, // 1 hour
+    }
   );
 
   useImperativeHandle(ref, () => ({
@@ -64,9 +68,14 @@ export const ServiceViewer = forwardRef<DialogRef, Props>((props, ref) => {
 
   // fix unhandled error of the service mode
   const onDisable = useLockFn(async () => {
+    try {
       await patchVergeConfig({ enable_service_mode: false });
       mutateCheck();
       setOpen(false);
+    } catch (err: any) {
+      mutateCheck();
+      Notice.error(err.message || err.toString());
+    }
   });
 
   return (
@@ -81,8 +90,8 @@ export const ServiceViewer = forwardRef<DialogRef, Props>((props, ref) => {
 
       {(state === "unknown" || state === "uninstall") && (
         <Typography>
-          Information: Please make sure the Clash Verge Service is installed and
+          Information: Please make sure that the Clash Verge Service is
-          enabled
+          installed and enabled
         </Typography>
       )}
 

src/components/setting/setting-system.tsx

@@ -27,7 +27,11 @@ const SettingSystem = ({ onError }: Props) => {
   const { data: serviceStatus } = useSWR(
     isWIN ? "checkService" : null,
     checkService,
-    { revalidateIfStale: false, shouldRetryOnError: false }
+    {
+      revalidateIfStale: false,
+      shouldRetryOnError: false,
+      focusThrottleInterval: 36e5, // 1 hour
+    }
   );
 
   const serviceRef = useRef<DialogRef>(null);
@@ -70,16 +74,18 @@ const SettingSystem = ({ onError }: Props) => {
         <SettingItem
           label={t("Service Mode")}
           extra={
-            (serviceStatus === "active" || serviceStatus === "installed") && (
+            <IconButton
-              <PrivacyTipRounded
+              color="inherit"
-                fontSize="small"
+              size="small"
-                style={{ cursor: "pointer", opacity: 0.75 }}
               onClick={() => serviceRef.current?.open()}
+            >
+              <PrivacyTipRounded
+                fontSize="inherit"
+                style={{ cursor: "pointer", opacity: 0.75 }}
               />
-            )
+            </IconButton>
           }
         >
-          {serviceStatus === "active" || serviceStatus === "installed" ? (
           <GuardState
             value={enable_service_mode ?? false}
             valueProps="checked"
@@ -88,29 +94,29 @@ const SettingSystem = ({ onError }: Props) => {
             onChange={(e) => onChangeData({ enable_service_mode: e })}
             onGuard={(e) => patchVerge({ enable_service_mode: e })}
           >
-              <Switch edge="end" />
+            <Switch
+              edge="end"
+              disabled={
+                serviceStatus !== "active" && serviceStatus !== "installed"
+              }
+            />
           </GuardState>
-          ) : (
-            <IconButton
-              color="inherit"
-              size="small"
-              sx={{ my: "2px" }}
-              onClick={() => serviceRef.current?.open()}
-            >
-              <ArrowForward />
-            </IconButton>
-          )}
         </SettingItem>
       )}
 
       <SettingItem
         label={t("System Proxy")}
         extra={
-          <Settings
+          <IconButton
-            fontSize="small"
+            color="inherit"
-            style={{ cursor: "pointer", opacity: 0.75 }}
+            size="small"
             onClick={() => sysproxyRef.current?.open()}
+          >
+            <Settings
+              fontSize="inherit"
+              style={{ cursor: "pointer", opacity: 0.75 }}
             />
+          </IconButton>
         }
       >
         <GuardState