feat: add use clash hook

src/components/setting/mods/clash-port-viewer.tsx

@@ -1,55 +1,37 @@
-import useSWR from "swr";
 import { forwardRef, useImperativeHandle, useState } from "react";
-import { useSetRecoilState } from "recoil";
 import { useTranslation } from "react-i18next";
 import { useLockFn } from "ahooks";
 import { List, ListItem, ListItemText, TextField } from "@mui/material";
-import { atomClashPort } from "@/services/states";
-import { getClashConfig } from "@/services/api";
-import { patchClashConfig } from "@/services/cmds";
+import { useClashInfo } from "@/hooks/use-clash";
 import { BaseDialog, DialogRef, Notice } from "@/components/base";
 
 export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
-  const { data: config, mutate: mutateClash } = useSWR(
-    "getClashConfig",
-    getClashConfig
-  );
+  const { clashInfo, patchInfo } = useClashInfo();
 
   const [open, setOpen] = useState(false);
-  const [port, setPort] = useState(config?.["mixed-port"] ?? 9090);
-
-  const setGlobalClashPort = useSetRecoilState(atomClashPort);
+  const [port, setPort] = useState(clashInfo?.port ?? 7890);
 
   useImperativeHandle(ref, () => ({
     open: () => {
-      if (config?.["mixed-port"]) {
-        setPort(config["mixed-port"]);
-      }
+      if (clashInfo?.port) setPort(clashInfo?.port);
       setOpen(true);
     },
     close: () => setOpen(false),
   }));
 
   const onSave = useLockFn(async () => {
-    if (port < 1000) {
-      return Notice.error("The port should not < 1000");
+    if (port === clashInfo?.port) {
+      setOpen(false);
+      return;
     }
-    if (port > 65536) {
-      return Notice.error("The port should not > 65536");
-    }
-
-    setOpen(false);
-    if (port === config?.["mixed-port"]) return;
-
     try {
-      await patchClashConfig({ "mixed-port": port });
-      setGlobalClashPort(port);
+      await patchInfo({ "mixed-port": port });
+      setOpen(false);
       Notice.success("Change Clash port successfully!", 1000);
-      mutateClash();
     } catch (err: any) {
-      Notice.error(err.message || err.toString(), 5000);
+      Notice.error(err.message || err.toString(), 4000);
     }
   });
 

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

@@ -1,17 +1,16 @@
-import useSWR from "swr";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { List, ListItem, ListItemText, TextField } from "@mui/material";
-import { getClashInfo, patchClashConfig } from "@/services/cmds";
-import { getAxios } from "@/services/api";
+import { useClashInfo } from "@/hooks/use-clash";
 import { BaseDialog, DialogRef, Notice } from "@/components/base";
 
 export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
-  const { data: clashInfo, mutate } = useSWR("getClashInfo", getClashInfo);
+  const { clashInfo, patchInfo } = useClashInfo();
+
   const [controller, setController] = useState(clashInfo?.server || "");
   const [secret, setSecret] = useState(clashInfo?.secret || "");
 
@@ -26,14 +25,11 @@ export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
 
   const onSave = useLockFn(async () => {
     try {
-      await patchClashConfig({ "external-controller": controller, secret });
-      mutate();
-      // 刷新接口
-      getAxios(true);
+      await patchInfo({ "external-controller": controller, secret });
       Notice.success("Change Clash Config successfully!", 1000);
       setOpen(false);
-    } catch (err) {
-      console.log(err);
+    } catch (err: any) {
+      Notice.error(err.message || err.toString(), 4000);
     }
   });
 

src/components/setting/mods/web-ui-viewer.tsx

@@ -1,23 +1,22 @@
-import useSWR from "swr";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { Button, Box, Typography } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
-import { getClashInfo, openWebUrl } from "@/services/cmds";
+import { openWebUrl } from "@/services/cmds";
 import { BaseDialog, BaseEmpty, DialogRef, Notice } from "@/components/base";
+import { useClashInfo } from "@/hooks/use-clash";
 import { WebUIItem } from "./web-ui-item";
 
 export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
+  const { clashInfo } = useClashInfo();
   const { verge, patchVerge, mutateVerge } = useVerge();
 
   const [open, setOpen] = useState(false);
   const [editing, setEditing] = useState(false);
 
-  const { data: clashInfo } = useSWR("getClashInfo", getClashInfo);
-
   useImperativeHandle(ref, () => ({
     open: () => setOpen(true),
     close: () => setOpen(false),
@@ -53,9 +52,7 @@ export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
       if (url.includes("%port") || url.includes("%secret")) {
         if (!clashInfo) throw new Error("failed to get clash info");
         if (!clashInfo.server?.includes(":")) {
-          throw new Error(
-            `failed to parse server with status ${clashInfo.status}`
-          );
+          throw new Error(`failed to parse the server "${clashInfo.server}"`);
         }
 
         const port = clashInfo.server