feat: refactor

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

@@ -13,14 +13,18 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import { BuildCircleRounded, InfoRounded } from "@mui/icons-material";
-import { changeProfileValid, getProfiles } from "@/services/cmds";
+import { InfoRounded } from "@mui/icons-material";
+import {
+  changeProfileValid,
+  getProfiles,
+  getRuntimeExists,
+} from "@/services/cmds";
 import { ModalHandler } from "@/hooks/use-modal-handler";
-import enhance, {
-  DEFAULT_FIELDS,
+import {
   HANDLE_FIELDS,
-  USE_FLAG_FIELDS,
-} from "@/services/enhance";
+  DEFAULT_FIELDS,
+  OTHERS_FIELDS,
+} from "@/utils/clash-fields";
 import Notice from "@/components/base/base-notice";
 
 interface Props {
@@ -36,19 +40,21 @@ const fieldSorter = (a: string, b: string) => {
   return 0;
 };
 
-const useFields = [...USE_FLAG_FIELDS].sort(fieldSorter);
+const otherFields = [...OTHERS_FIELDS].sort(fieldSorter);
 const handleFields = [...HANDLE_FIELDS, ...DEFAULT_FIELDS].sort(fieldSorter);
 
 const ClashFieldViewer = ({ handler }: Props) => {
   const { t } = useTranslation();
 
   const { data, mutate } = useSWR("getProfiles", getProfiles);
+  const { data: existsKeys = [] } = useSWR(
+    "getRuntimeExists",
+    getRuntimeExists
+  );
 
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState<string[]>([]);
 
-  const { config: enhanceConfig, use: enhanceUse } = enhance.getFieldsState();
-
   if (handler) {
     handler.current = {
       open: () => setOpen(true),
@@ -61,8 +67,8 @@ const ClashFieldViewer = ({ handler }: Props) => {
   }, [open]);
 
   useEffect(() => {
-    setSelected([...(data?.valid || []), ...enhanceUse]);
-  }, [data?.valid, enhanceUse]);
+    setSelected(data?.valid || []);
+  }, [data?.valid]);
 
   const handleChange = (item: string) => {
     if (!item) return;
@@ -75,7 +81,7 @@ const ClashFieldViewer = ({ handler }: Props) => {
   const handleSave = async () => {
     setOpen(false);
 
-    const oldSet = new Set([...(data?.valid || []), ...enhanceUse]);
+    const oldSet = new Set(data?.valid || []);
     const curSet = new Set(selected);
     const joinSet = new Set(selected.concat([...oldSet]));
 
@@ -103,10 +109,9 @@ const ClashFieldViewer = ({ handler }: Props) => {
           userSelect: "text",
         }}
       >
-        {useFields.map((item) => {
+        {otherFields.map((item) => {
           const inSelect = selected.includes(item);
-          const inConfig = enhanceConfig.includes(item);
-          const inConfigUse = enhanceUse.includes(item);
+          const inConfig = existsKeys.includes(item);
           const inValid = data?.valid?.includes(item);
 
           return (
@@ -119,8 +124,7 @@ const ClashFieldViewer = ({ handler }: Props) => {
               />
               <Typography width="100%">{item}</Typography>
 
-              {inConfigUse && !inValid && <InfoIcon />}
-              {!inSelect && inConfig && <WarnIcon />}
+              {!inSelect && inConfig && !inValid && <WarnIcon />}
             </Stack>
           );
         })}
@@ -159,15 +163,4 @@ function WarnIcon() {
   );
 }
 
-function InfoIcon() {
-  return (
-    <Tooltip title="This field is provided by Merge Profile.">
-      <BuildCircleRounded
-        color="info"
-        sx={{ cursor: "pointer", opacity: 0.5 }}
-      />
-    </Tooltip>
-  );
-}
-
 export default ClashFieldViewer;

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

@@ -10,8 +10,8 @@ import {
   DialogTitle,
 } from "@mui/material";
 import { InfoRounded } from "@mui/icons-material";
-import { atomThemeMode } from "../../../services/states";
-import { getRunningConfig } from "../../../services/cmds";
+import { atomThemeMode } from "@/services/states";
+import { getRuntimeYaml } from "@/services/cmds";
 
 import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js";
 import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js";
@@ -29,7 +29,7 @@ const ConfigViewer = () => {
   useEffect(() => {
     if (!open) return;
 
-    getRunningConfig().then((data) => {
+    getRuntimeYaml().then((data) => {
       const dom = editorRef.current;
 
       if (!dom) return;
@@ -56,7 +56,7 @@ const ConfigViewer = () => {
     <>
       <Dialog open={open} onClose={() => setOpen(false)}>
         <DialogTitle>
-          {t("Running Config")} <Chip label="ReadOnly" size="small" />
+          {t("Runtime Config")} <Chip label="ReadOnly" size="small" />
         </DialogTitle>
 
         <DialogContent sx={{ width: 520, pb: 1 }}>