mirror of
https://github.com/clash-verge-rev/clash-verge-rev.git
synced 2026-01-29 17:15:38 +08:00
feat(unfinished): rules editor
This commit is contained in:
MystiPanda
276
src/components/profile/rules-editor-viewer.tsx
Normal file
276
src/components/profile/rules-editor-viewer.tsx
Normal file
@@ -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",
|
||||
}));
|
||||
Reference in New Issue
Block a user