mirror of
https://github.com/clash-verge-rev/clash-verge-rev
synced 2025-05-05 04:53:44 +08:00
feat: support edit rules file
This commit is contained in:
MystiPanda
parent
f74f06e403
commit
1c5eab6055
@ -36,6 +36,8 @@ import getSystem from "@/utils/get-system";
|
||||
import { RuleItem } from "@/components/profile/rule-item";
|
||||
import { BaseSearchBox } from "../base/base-search-box";
|
||||
import { Virtuoso } from "react-virtuoso";
|
||||
import MonacoEditor from "react-monaco-editor";
|
||||
import { useThemeMode } from "@/services/states";
|
||||
|
||||
interface Props {
|
||||
profileUid: string;
|
||||
@ -230,8 +232,11 @@ const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];
|
||||
export const RulesEditorViewer = (props: Props) => {
|
||||
const { title, profileUid, property, open, onClose, onSave } = props;
|
||||
const { t } = useTranslation();
|
||||
const themeMode = useThemeMode();
|
||||
|
||||
const [prevData, setPrevData] = useState("");
|
||||
const [currData, setCurrData] = useState("");
|
||||
const [visible, setVisible] = useState(true);
|
||||
const [match, setMatch] = useState(() => (_: string) => true);
|
||||
|
||||
const [ruleType, setRuleType] = useState<(typeof rules)[number]>(rules[0]);
|
||||
@ -291,9 +296,28 @@ export const RulesEditorViewer = (props: Props) => {
|
||||
setPrependSeq(obj.prepend || []);
|
||||
setAppendSeq(obj.append || []);
|
||||
setDeleteSeq(obj.delete || []);
|
||||
|
||||
setPrevData(data);
|
||||
setCurrData(data);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (currData === "") return;
|
||||
if (visible !== true) return;
|
||||
|
||||
let obj = yaml.load(currData) as { prepend: []; append: []; delete: [] };
|
||||
setPrependSeq(obj.prepend || []);
|
||||
setAppendSeq(obj.append || []);
|
||||
setDeleteSeq(obj.delete || []);
|
||||
}, [visible]);
|
||||
|
||||
useEffect(() => {
|
||||
if (prependSeq && appendSeq && deleteSeq)
|
||||
setCurrData(
|
||||
yaml.dump({ prepend: prependSeq, append: appendSeq, delete: deleteSeq })
|
||||
);
|
||||
}, [prependSeq, appendSeq, deleteSeq]);
|
||||
|
||||
const fetchProfile = async () => {
|
||||
let data = await readProfileFile(profileUid);
|
||||
let groupsObj = yaml.load(data) as { "proxy-groups": [] };
|
||||
@ -338,11 +362,6 @@ export const RulesEditorViewer = (props: Props) => {
|
||||
|
||||
const handleSave = useLockFn(async () => {
|
||||
try {
|
||||
let currData = yaml.dump({
|
||||
prepend: prependSeq,
|
||||
append: appendSeq,
|
||||
delete: deleteSeq,
|
||||
});
|
||||
await saveProfileFile(property, currData);
|
||||
onSave?.(prevData, currData);
|
||||
onClose();
|
||||
@ -353,9 +372,28 @@ export const RulesEditorViewer = (props: Props) => {
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth>
|
||||
<DialogTitle>{title ?? t("Edit Rules")}</DialogTitle>
|
||||
<DialogTitle>
|
||||
{
|
||||
<Box display="flex" justifyContent="space-between">
|
||||
{t("Edit Rules")}
|
||||
<Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setVisible((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
{visible ? t("Advanced") : t("Visible")}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent sx={{ display: "flex", width: "auto", height: "100vh" }}>
|
||||
{visible ? (
|
||||
<>
|
||||
<List
|
||||
sx={{
|
||||
height: "calc(100% - 16px)",
|
||||
@ -380,7 +418,9 @@ export const RulesEditorViewer = (props: Props) => {
|
||||
onChange={(_, value) => value && setRuleType(value)}
|
||||
/>
|
||||
</Item>
|
||||
<Item sx={{ display: !(ruleType.required ?? true) ? "none" : "" }}>
|
||||
<Item
|
||||
sx={{ display: !(ruleType.required ?? true) ? "none" : "" }}
|
||||
>
|
||||
<ListItemText primary={t("Rule Content")} />
|
||||
|
||||
{ruleType.name === "RULE-SET" && (
|
||||
@ -403,7 +443,8 @@ export const RulesEditorViewer = (props: Props) => {
|
||||
onChange={(_, value) => value && setRuleContent(value)}
|
||||
/>
|
||||
)}
|
||||
{ruleType.name !== "RULE-SET" && ruleType.name !== "SUB-RULE" && (
|
||||
{ruleType.name !== "RULE-SET" &&
|
||||
ruleType.name !== "SUB-RULE" && (
|
||||
<TextField
|
||||
autoComplete="off"
|
||||
size="small"
|
||||
@ -478,7 +519,11 @@ export const RulesEditorViewer = (props: Props) => {
|
||||
</List>
|
||||
|
||||
<List
|
||||
sx={{ height: "calc(100% - 16px)", width: "50%", padding: "0 10px" }}
|
||||
sx={{
|
||||
height: "calc(100% - 16px)",
|
||||
width: "50%",
|
||||
padding: "0 10px",
|
||||
}}
|
||||
>
|
||||
<BaseSearchBox
|
||||
matchCase={false}
|
||||
@ -569,7 +614,9 @@ export const RulesEditorViewer = (props: Props) => {
|
||||
type="append"
|
||||
ruleRaw={item}
|
||||
onDelete={() => {
|
||||
setAppendSeq(appendSeq.filter((v) => v !== item));
|
||||
setAppendSeq(
|
||||
appendSeq.filter((v) => v !== item)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
@ -581,6 +628,36 @@ export const RulesEditorViewer = (props: Props) => {
|
||||
}}
|
||||
/>
|
||||
</List>
|
||||
</>
|
||||
) : (
|
||||
<MonacoEditor
|
||||
height="100%"
|
||||
language="yaml"
|
||||
value={currData}
|
||||
theme={themeMode === "light" ? "vs" : "vs-dark"}
|
||||
options={{
|
||||
tabSize: 2, // 根据语言类型设置缩进大小
|
||||
minimap: {
|
||||
enabled: document.documentElement.clientWidth >= 1500, // 超过一定宽度显示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, // 平滑滚动
|
||||
}}
|
||||
onChange={(value) => setCurrData(value)}
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
|
||||
@ -64,6 +64,8 @@
|
||||
"Delete Rule": "Delete Rule",
|
||||
"Rule Condition Required": "Rule Condition Required",
|
||||
"Invalid Rule": "Invalid Rule",
|
||||
"Advanced": "Advanced",
|
||||
"Visible": "Visible",
|
||||
"DOMAIN": "Matches the full domain name",
|
||||
"DOMAIN-SUFFIX": "Matches the domain suffix",
|
||||
"DOMAIN-KEYWORD": "Matches the domain keyword",
|
||||
|
||||
@ -64,6 +64,8 @@
|
||||
"Delete Rule": "删除规则",
|
||||
"Rule Condition Required": "规则条件缺失",
|
||||
"Invalid Rule": "无效规则",
|
||||
"Advanced": "高级",
|
||||
"Visible": "可视化",
|
||||
"DOMAIN": "匹配完整域名",
|
||||
"DOMAIN-SUFFIX": "匹配域名后缀",
|
||||
"DOMAIN-KEYWORD": "匹配域名关键字",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user