feat(unfinished): rules editor

package.json

@@ -35,6 +35,7 @@
     "dayjs": "1.11.5",
     "foxact": "^0.2.35",
     "i18next": "^23.11.5",
+    "js-yaml": "^4.1.0",
     "lodash-es": "^4.17.21",
     "meta-json-schema": "1.18.5-alpha6",
     "monaco-editor": "^0.49.0",
@@ -46,6 +47,7 @@
     "react-hook-form": "^7.52.0",
     "react-i18next": "^13.5.0",
     "react-markdown": "^9.0.1",
+    "react-monaco-editor": "^0.55.0",
     "react-router-dom": "^6.23.1",
     "react-transition-group": "^4.4.5",
     "react-virtuoso": "^4.7.11",
@@ -59,6 +61,7 @@
     "@tauri-apps/cli": "^1.5.14",
     "@types/fs-extra": "^9.0.13",
     "@types/js-cookie": "^3.0.6",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

pnpm-lock.yaml

@@ -58,6 +58,9 @@ importers:
       i18next:
         specifier: ^23.11.5
         version: 23.11.5
+      js-yaml:
+        specifier: ^4.1.0
+        version: 4.1.0
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -91,6 +94,9 @@ importers:
       react-markdown:
         specifier: ^9.0.1
         version: 9.0.1(@types/react@18.3.3)(react@18.3.1)
+      react-monaco-editor:
+        specifier: ^0.55.0
+        version: 0.55.0(@types/react@18.3.3)(monaco-editor@0.49.0)(react@18.3.1)
       react-router-dom:
         specifier: ^6.23.1
         version: 6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -125,6 +131,9 @@ importers:
       "@types/js-cookie":
         specifier: ^3.0.6
         version: 3.0.6
+      "@types/js-yaml":
+        specifier: ^4.0.9
+        version: 4.0.9
       "@types/lodash-es":
         specifier: ^4.17.12
         version: 4.17.12
@@ -2210,6 +2219,12 @@ packages:
         integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==,
       }
 
+  "@types/js-yaml@4.0.9":
+    resolution:
+      {
+        integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==,
+      }
+
   "@types/json-schema@7.0.15":
     resolution:
       {
@@ -3830,6 +3845,16 @@ packages:
       "@types/react": ">=18"
       react: ">=18"
 
+  react-monaco-editor@0.55.0:
+    resolution:
+      {
+        integrity: sha512-GdEP0Q3Rn1dczfKEEyY08Nes5plWwIYU4sWRBQO0+jsQWQsKMHKCC6+hPRwR7G/4aA3V/iU9jSmWPzVJYMVFSQ==,
+      }
+    peerDependencies:
+      "@types/react": ">=16 <= 18"
+      monaco-editor: ^0.44.0
+      react: ">=16 <= 18"
+
   react-refresh@0.14.2:
     resolution:
       {
@@ -5941,6 +5966,8 @@ snapshots:
 
   "@types/js-cookie@3.0.6": {}
 
+  "@types/js-yaml@4.0.9": {}
+
   "@types/json-schema@7.0.15": {}
 
   "@types/lodash-es@4.17.12":
@@ -6973,6 +7000,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  react-monaco-editor@0.55.0(@types/react@18.3.3)(monaco-editor@0.49.0)(react@18.3.1):
+    dependencies:
+      "@types/react": 18.3.3
+      monaco-editor: 0.49.0
+      prop-types: 15.8.1
+      react: 18.3.1
+
   react-refresh@0.14.2: {}
 
   react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):

src/components/profile/profile-item.tsx

@@ -19,10 +19,11 @@ import { RefreshRounded, DragIndicator } from "@mui/icons-material";
 import { useLoadingCache, useSetLoadingCache } from "@/services/states";
 import { updateProfile, viewProfile } from "@/services/cmds";
 import { Notice } from "@/components/base";
+import { RulesEditorViewer } from "@/components/profile/rules-editor-viewer";
 import { EditorViewer } from "@/components/profile/editor-viewer";
 import { ProfileBox } from "./profile-box";
 import parseTraffic from "@/utils/parse-traffic";
-import { ConfirmViewer } from "./confirm-viewer";
+import { ConfirmViewer } from "@/components/profile/confirm-viewer";
 import { open } from "@tauri-apps/api/shell";
 const round = keyframes`
   from { transform: rotate(0deg); }
@@ -481,8 +482,7 @@ export const ProfileItem = (props: Props) => {
         onChange={onChange}
         onClose={() => setFileOpen(false)}
       />
-      <EditorViewer
-        mode="profile"
+      <RulesEditorViewer
         property={option?.rules ?? ""}
         open={rulesOpen}
         language="yaml"

src/components/profile/rules-editor-viewer.tsx

@@ -0,0 +1,276 @@
+import { ReactNode, useEffect, useState, useRef, useCallback } from "react";
+import { useLockFn } from "ahooks";
+import yaml from "js-yaml";
+import { useTranslation } from "react-i18next";
+import {
+  Autocomplete,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  List,
+  ListItem,
+  ListItemText,
+  MenuItem,
+  Select,
+  TextField,
+  styled,
+} from "@mui/material";
+import { useThemeMode } from "@/services/states";
+import { readProfileFile, saveProfileFile } from "@/services/cmds";
+import { Notice } from "@/components/base";
+import getSystem from "@/utils/get-system";
+
+import MonacoEditor from "react-monaco-editor";
+import * as monaco from "monaco-editor";
+import { nanoid } from "nanoid";
+
+interface Props {
+  title?: string | ReactNode;
+  property: string;
+  open: boolean;
+  onClose: () => void;
+  onChange?: (prev?: string, curr?: string) => void;
+}
+
+const RuleTypeList = [
+  "DOMAIN",
+  "DOMAIN-SUFFIX",
+  "DOMAIN-KEYWORD",
+  "DOMAIN-REGEX",
+  "GEOSITE",
+  "IP-CIDR",
+  "IP-SUFFIX",
+  "IP-ASN",
+  "GEOIP",
+  "SRC-GEOIP",
+  "SRC-IP-ASN",
+  "SRC-IP-CIDR",
+  "SRC-IP-SUFFIX",
+  "DST-PORT",
+  "SRC-PORT",
+  "IN-PORT",
+  "IN-TYPE",
+  "IN-USER",
+  "IN-NAME",
+  "PROCESS-PATH",
+  "PROCESS-PATH-REGEX",
+  "PROCESS-NAME",
+  "PROCESS-NAME-REGEX",
+  "UID",
+  "NETWORK",
+  "DSCP",
+  "RULE-SET",
+  "SUB-RULE",
+  "MATCH",
+];
+
+export const RulesEditorViewer = (props: Props) => {
+  const { title, property, open, onClose, onChange } = props;
+  const { t } = useTranslation();
+
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(); // 编辑器实例
+  const monacoRef = useRef<typeof monaco>(); // monaco 实例
+  const monacoHoverProviderRef = useRef<monaco.IDisposable>(); // monaco 注册缓存
+  const monacoCompletionItemProviderRef = useRef<monaco.IDisposable>(); // monaco 注册缓存
+
+  // 获取编辑器实例
+  const editorDidMountHandle = useCallback(
+    (editor: monaco.editor.IStandaloneCodeEditor, monacoIns: typeof monaco) => {
+      editorRef.current = editor;
+      monacoRef.current = monacoIns;
+    },
+    []
+  );
+
+  const themeMode = useThemeMode();
+  const [prevData, setPrevData] = useState("");
+  const [currData, setCurrData] = useState("");
+  const [method, setMethod] = useState("append");
+  const [ruleType, setRuleType] = useState("DOMAIN");
+  const [ruleContent, setRuleContent] = useState("");
+  const [proxyPolicy, setProxyPolicy] = useState("");
+
+  const uri = monaco.Uri.parse(`${nanoid()}`);
+  const model = monaco.editor.createModel(prevData, "yaml", uri);
+
+  const fetchContent = async () => {
+    let data = await readProfileFile(property);
+    setCurrData(data);
+    setPrevData(data);
+  };
+
+  const addSeq = async () => {
+    let obj = yaml.load(currData) as ISeqProfileConfig;
+    if (!obj.prepend) {
+      obj = { prepend: [], append: [], delete: [] };
+    }
+    switch (method) {
+      case "append": {
+        obj.append.push(`${ruleType},${ruleContent},${proxyPolicy}`);
+        break;
+      }
+      case "prepend": {
+        obj.prepend.push(`${ruleType},${ruleContent},${proxyPolicy}`);
+        break;
+      }
+      case "delete": {
+        obj.delete.push(`${ruleType},${ruleContent},${proxyPolicy}`);
+        break;
+      }
+    }
+    let raw = yaml.dump(obj);
+
+    await saveProfileFile(property, raw);
+    setCurrData(raw);
+  };
+
+  useEffect(() => {
+    fetchContent();
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (editorRef.current) {
+        editorRef.current.dispose();
+      }
+      monacoCompletionItemProviderRef.current?.dispose();
+      monacoHoverProviderRef.current?.dispose();
+    };
+  }, [open]);
+
+  const onSave = useLockFn(async () => {
+    try {
+      await saveProfileFile(property, currData);
+      onChange?.(prevData, currData);
+      onClose();
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
+    }
+  });
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth>
+      <DialogTitle>{title ?? t("Edit File")}</DialogTitle>
+
+      <DialogContent sx={{ display: "flex", width: "auto", height: "100vh" }}>
+        <div
+          style={{
+            width: "50%",
+            height: "100%",
+          }}
+        >
+          <List>
+            <Item>
+              <ListItemText primary={t("Add Method")} />
+              <Select
+                size="small"
+                sx={{ width: "100px" }}
+                value={method}
+                onChange={(e) => {
+                  setMethod(e.target.value);
+                }}
+              >
+                <MenuItem key="prepend" value="prepend">
+                  <span style={{ fontSize: 14 }}>Prepend</span>
+                </MenuItem>
+                <MenuItem key="append" value="append">
+                  <span style={{ fontSize: 14 }}>Append</span>
+                </MenuItem>
+                <MenuItem key="delete" value="delete">
+                  <span style={{ fontSize: 14 }}>Delete</span>
+                </MenuItem>
+              </Select>
+            </Item>
+            <Item>
+              <ListItemText primary={t("Rule Type")} />
+              <Autocomplete
+                size="small"
+                sx={{ width: "300px" }}
+                value={ruleType}
+                options={RuleTypeList}
+                onChange={(_, v) => {
+                  if (v) setRuleType(v);
+                }}
+                renderInput={(params) => <TextField {...params} />}
+              />
+            </Item>
+            <Item>
+              <ListItemText primary={t("Rule Content")} />
+              <TextField
+                size="small"
+                value={ruleContent}
+                onChange={(e) => {
+                  setRuleContent(e.target.value);
+                }}
+              />
+            </Item>
+            <Item>
+              <ListItemText primary={t("Proxy Policy")} />
+              <TextField
+                size="small"
+                value={proxyPolicy}
+                onChange={(e) => {
+                  setProxyPolicy(e.target.value);
+                }}
+              />
+            </Item>
+          </List>
+          <Button fullWidth variant="contained" onClick={addSeq}>
+            Add
+          </Button>
+        </div>
+        <div
+          style={{
+            display: "inline-block",
+            width: "50%",
+            height: "100%",
+          }}
+        >
+          <MonacoEditor
+            language="yaml"
+            theme={themeMode === "light" ? "vs" : "vs-dark"}
+            height="100%"
+            value={currData}
+            onChange={setCurrData}
+            options={{
+              model,
+              tabSize: 2,
+              minimap: { enabled: false }, // 超过一定宽度显示minimap滚动条
+              mouseWheelZoom: true, // 按住Ctrl滚轮调节缩放比例
+              quickSuggestions: {
+                strings: true, // 字符串类型的建议
+                comments: true, // 注释类型的建议
+                other: true, // 其他类型的建议
+              },
+              padding: {
+                top: 33, // 顶部padding防止遮挡snippets
+              },
+              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
+                getSystem() === "windows" ? ", twemoji mozilla" : ""
+              }`,
+              fontLigatures: true, // 连字符
+              smoothScrolling: true, // 平滑滚动
+            }}
+            editorDidMount={editorDidMountHandle}
+          />
+        </div>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose} variant="outlined">
+          {t("Cancel")}
+        </Button>
+
+        <Button onClick={onSave} variant="contained">
+          {t("Save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+const Item = styled(ListItem)(() => ({
+  padding: "5px 2px",
+}));

src/services/types.d.ts

@@ -198,6 +198,12 @@ interface IVergeTestItem {
   url: string;
 }
 
+interface ISeqProfileConfig {
+  prepend: string[];
+  append: string[];
+  delete: string[];
+}
+
 interface IVergeConfig {
   app_log_level?: "trace" | "debug" | "info" | "warn" | "error" | string;
   language?: string;