feat: finish clash field control

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

@@ -13,6 +13,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
+import { BuildCircleRounded, InfoRounded } from "@mui/icons-material";
 import { changeProfileValid, getProfiles } from "@/services/cmds";
 import { ModalHandler } from "@/hooks/use-modal-handler";
 import enhance, {
@@ -20,11 +21,10 @@ import enhance, {
   HANDLE_FIELDS,
   USE_FLAG_FIELDS,
 } from "@/services/enhance";
-import { BuildCircleRounded, InfoRounded } from "@mui/icons-material";
+import Notice from "@/components/base/base-notice";
 
 interface Props {
   handler: ModalHandler;
-  onError: (err: Error) => void;
 }
 
 const fieldSorter = (a: string, b: string) => {
@@ -39,7 +39,7 @@ const fieldSorter = (a: string, b: string) => {
 const useFields = [...USE_FLAG_FIELDS].sort(fieldSorter);
 const handleFields = [...HANDLE_FIELDS, ...DEFAULT_FIELDS].sort(fieldSorter);
 
-const ClashFieldViewer = ({ handler, onError }: Props) => {
+const ClashFieldViewer = ({ handler }: Props) => {
   const { t } = useTranslation();
 
   const { data, mutate } = useSWR("getProfiles", getProfiles);
@@ -56,8 +56,6 @@ const ClashFieldViewer = ({ handler, onError }: Props) => {
     };
   }
 
-  console.log("render");
-
   useEffect(() => {
     if (open) mutate();
   }, [open]);
@@ -85,8 +83,9 @@ const ClashFieldViewer = ({ handler, onError }: Props) => {
     try {
       await changeProfileValid([...new Set(selected)]);
       mutate();
+      Notice.success("Refresh clash config", 1000);
     } catch (err: any) {
-      onError(err);
+      Notice.error(err?.message || err.toString());
     }
   };
 
@@ -125,7 +124,11 @@ const ClashFieldViewer = ({ handler, onError }: Props) => {
           );
         })}
 
-        <Divider sx={{ my: 0.5 }} />
+        <Divider sx={{ my: 1 }}>
+          <Typography color="text.secondary" fontSize={14}>
+            Clash Verge Control Fields
+          </Typography>
+        </Divider>
 
         {handleFields.map((item) => (
           <Stack key={item} mb={0.5} direction="row" alignItems="center">

src/components/setting/setting-clash.tsx

-import useSWR, { useSWRConfig } from "swr";
+import useSWR from "swr";
 import { useSetRecoilState } from "recoil";
 import { useTranslation } from "react-i18next";
 import {
@@ -27,8 +27,11 @@ interface Props {
 
 const SettingClash = ({ onError }: Props) => {
   const { t } = useTranslation();
-  const { mutate } = useSWRConfig();
-  const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
+
+  const { data: clashConfig, mutate: mutateClash } = useSWR(
+    "getClashConfig",
+    getClashConfig
+  );
   const { data: versionData } = useSWR("getVersion", getVersion);
 
   const {
@@ -45,7 +48,7 @@ const SettingClash = ({ onError }: Props) => {
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<ApiType.ConfigData>) => {
-    mutate("getClashConfig", { ...clashConfig, ...patch }, false);
+    mutateClash((old) => ({ ...(old! || {}), ...patch }), false);
   };
   const onUpdateData = async (patch: Partial<ApiType.ConfigData>) => {
     await updateConfigs(patch);
@@ -64,7 +67,7 @@ const SettingClash = ({ onError }: Props) => {
     Notice.success("Change Clash port successfully!", 1000);
 
     // update the config
-    mutate("getClashConfig");
+    mutateClash();
   };
 
   // get clash core version
@@ -75,7 +78,7 @@ const SettingClash = ({ onError }: Props) => {
   return (
     <SettingList title={t("Clash Setting")}>
       <WebUIViewer handler={webUIHandler} onError={onError} />
-      <ClashFieldViewer handler={fieldHandler} onError={onError} />
+      <ClashFieldViewer handler={fieldHandler} />
 
       <SettingItem label={t("Allow Lan")}>
         <GuardState