shkong/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev synced 2025-05-05 04:53:44 +08:00
Code Packages Projects Releases Activity

feat: support edit rules file

Browse Source
This commit is contained in:
MystiPanda 2024-07-03 12:34:18 +08:00
parent f74f06e403
commit 1c5eab6055
3 changed files with 306 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

527
src/components/profile/rules-editor-viewer.tsx
View File

@ -36,6 +36,8 @@ import getSystem from "@/utils/get-system";
import { RuleItem } from "@/components/profile/rule-item"; import { RuleItem } from "@/components/profile/rule-item";
import { BaseSearchBox } from "../base/base-search-box"; import { BaseSearchBox } from "../base/base-search-box";
import { Virtuoso } from "react-virtuoso"; import { Virtuoso } from "react-virtuoso";
import MonacoEditor from "react-monaco-editor";
import { useThemeMode } from "@/services/states";
interface Props { interface Props {
profileUid: string; profileUid: string;
@ -230,8 +232,11 @@ const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];
export const RulesEditorViewer = (props: Props) => { export const RulesEditorViewer = (props: Props) => {
const { title, profileUid, property, open, onClose, onSave } = props; const { title, profileUid, property, open, onClose, onSave } = props;
const { t } = useTranslation(); const { t } = useTranslation();
const themeMode = useThemeMode();
const [prevData, setPrevData] = useState(""); const [prevData, setPrevData] = useState("");
const [currData, setCurrData] = useState("");
const [visible, setVisible] = useState(true);
const [match, setMatch] = useState(() => (_: string) => true); const [match, setMatch] = useState(() => (_: string) => true);
const [ruleType, setRuleType] = useState<(typeof rules)[number]>(rules[0]); const [ruleType, setRuleType] = useState<(typeof rules)[number]>(rules[0]);
@ -291,9 +296,28 @@ export const RulesEditorViewer = (props: Props) => {
setPrependSeq(obj.prepend || []); setPrependSeq(obj.prepend || []);
setAppendSeq(obj.append || []); setAppendSeq(obj.append || []);
setDeleteSeq(obj.delete || []); setDeleteSeq(obj.delete || []);
setPrevData(data); 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 () => { const fetchProfile = async () => {
let data = await readProfileFile(profileUid); let data = await readProfileFile(profileUid);
let groupsObj = yaml.load(data) as { "proxy-groups": [] }; let groupsObj = yaml.load(data) as { "proxy-groups": [] };
@ -338,11 +362,6 @@ export const RulesEditorViewer = (props: Props) => {
const handleSave = useLockFn(async () => { const handleSave = useLockFn(async () => {
try { try {
let currData = yaml.dump({
prepend: prependSeq,
append: appendSeq,
delete: deleteSeq,
});
await saveProfileFile(property, currData); await saveProfileFile(property, currData);
onSave?.(prevData, currData); onSave?.(prevData, currData);
onClose(); onClose();
@ -353,234 +372,292 @@ export const RulesEditorViewer = (props: Props) => {
return ( return (
<Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth> <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" }}> <DialogContent sx={{ display: "flex", width: "auto", height: "100vh" }}>
<List {visible ? (
sx={{ <>
height: "calc(100% - 16px)", <List
width: "50%", sx={{
padding: "0 10px", height: "calc(100% - 16px)",
}} width: "50%",
> padding: "0 10px",
<Item>
<ListItemText primary={t("Rule Type")} />
<Autocomplete
size="small"
sx={{ minWidth: "240px" }}
renderInput={(params) => <TextField {...params} />}
options={rules}
value={ruleType}
getOptionLabel={(option) => option.name}
renderOption={(props, option) => (
<li {...props} title={t(option.name)}>
{option.name}
</li>
)}
onChange={(_, value) => value && setRuleType(value)}
/>
</Item>
<Item sx={{ display: !(ruleType.required ?? true) ? "none" : "" }}>
<ListItemText primary={t("Rule Content")} />
{ruleType.name === "RULE-SET" && (
<Autocomplete
size="small"
sx={{ minWidth: "240px" }}
renderInput={(params) => <TextField {...params} />}
options={ruleSetList}
value={ruleContent}
onChange={(_, value) => value && setRuleContent(value)}
/>
)}
{ruleType.name === "SUB-RULE" && (
<Autocomplete
size="small"
sx={{ minWidth: "240px" }}
renderInput={(params) => <TextField {...params} />}
options={subRuleList}
value={ruleContent}
onChange={(_, value) => value && setRuleContent(value)}
/>
)}
{ruleType.name !== "RULE-SET" && ruleType.name !== "SUB-RULE" && (
<TextField
autoComplete="off"
size="small"
sx={{ minWidth: "240px" }}
value={ruleContent}
required={ruleType.required ?? true}
error={(ruleType.required ?? true) && !ruleContent}
placeholder={ruleType.example}
onChange={(e) => setRuleContent(e.target.value)}
/>
)}
</Item>
<Item>
<ListItemText primary={t("Proxy Policy")} />
<Autocomplete
size="small"
sx={{ minWidth: "240px" }}
renderInput={(params) => <TextField {...params} />}
options={proxyPolicyList}
value={proxyPolicy}
renderOption={(props, option) => (
<li {...props} title={t(option)}>
{option}
</li>
)}
onChange={(_, value) => value && setProxyPolicy(value)}
/>
</Item>
{ruleType.noResolve && (
<Item>
<ListItemText primary={t("No Resolve")} />
<Switch
checked={noResolve}
onChange={() => setNoResolve(!noResolve)}
/>
</Item>
)}
<Item>
<Button
fullWidth
variant="contained"
onClick={() => {
try {
let raw = validateRule();
if (prependSeq.includes(raw)) return;
setPrependSeq([...prependSeq, raw]);
} catch (err: any) {
Notice.error(err.message || err.toString());
}
}} }}
> >
{t("Prepend Rule")} <Item>
</Button> <ListItemText primary={t("Rule Type")} />
</Item> <Autocomplete
<Item> size="small"
<Button sx={{ minWidth: "240px" }}
fullWidth renderInput={(params) => <TextField {...params} />}
variant="contained" options={rules}
onClick={() => { value={ruleType}
try { getOptionLabel={(option) => option.name}
let raw = validateRule(); renderOption={(props, option) => (
if (appendSeq.includes(raw)) return; <li {...props} title={t(option.name)}>
setAppendSeq([...appendSeq, raw]); {option.name}
} catch (err: any) { </li>
Notice.error(err.message || err.toString()); )}
} onChange={(_, value) => value && setRuleType(value)}
}} />
> </Item>
{t("Append Rule")} <Item
</Button> sx={{ display: !(ruleType.required ?? true) ? "none" : "" }}
</Item> >
</List> <ListItemText primary={t("Rule Content")} />
<List {ruleType.name === "RULE-SET" && (
sx={{ height: "calc(100% - 16px)", width: "50%", padding: "0 10px" }} <Autocomplete
> size="small"
<BaseSearchBox sx={{ minWidth: "240px" }}
matchCase={false} renderInput={(params) => <TextField {...params} />}
onSearch={(match) => setMatch(() => match)} options={ruleSetList}
/> value={ruleContent}
<Virtuoso onChange={(_, value) => value && setRuleContent(value)}
style={{ height: "calc(100% - 16px)", marginTop: "8px" }}
totalCount={
filteredRuleList.length +
(prependSeq.length > 0 ? 1 : 0) +
(appendSeq.length > 0 ? 1 : 0)
}
increaseViewportBy={256}
itemContent={(index) => {
let shift = prependSeq.length > 0 ? 1 : 0;
if (prependSeq.length > 0 && index === 0) {
return (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={onPrependDragEnd}
>
<SortableContext
items={prependSeq.map((x) => {
return x;
})}
>
{prependSeq.map((item, index) => {
return (
<RuleItem
key={`${item}-${index}`}
type="prepend"
ruleRaw={item}
onDelete={() => {
setPrependSeq(
prependSeq.filter((v) => v !== item)
);
}}
/>
);
})}
</SortableContext>
</DndContext>
);
} else if (index < filteredRuleList.length + shift) {
let newIndex = index - shift;
return (
<RuleItem
key={`${filteredRuleList[newIndex]}-${index}`}
type={
deleteSeq.includes(filteredRuleList[newIndex])
? "delete"
: "original"
}
ruleRaw={filteredRuleList[newIndex]}
onDelete={() => {
if (deleteSeq.includes(filteredRuleList[newIndex])) {
setDeleteSeq(
deleteSeq.filter(
(v) => v !== filteredRuleList[newIndex]
)
);
} else {
setDeleteSeq((prev) => [
...prev,
filteredRuleList[newIndex],
]);
}
}}
/> />
); )}
} else { {ruleType.name === "SUB-RULE" && (
return ( <Autocomplete
<DndContext size="small"
sensors={sensors} sx={{ minWidth: "240px" }}
collisionDetection={closestCenter} renderInput={(params) => <TextField {...params} />}
onDragEnd={onAppendDragEnd} options={subRuleList}
> value={ruleContent}
<SortableContext onChange={(_, value) => value && setRuleContent(value)}
items={appendSeq.map((x) => { />
return x; )}
})} {ruleType.name !== "RULE-SET" &&
> ruleType.name !== "SUB-RULE" && (
{appendSeq.map((item, index) => { <TextField
return ( autoComplete="off"
<RuleItem size="small"
key={`${item}-${index}`} sx={{ minWidth: "240px" }}
type="append" value={ruleContent}
ruleRaw={item} required={ruleType.required ?? true}
onDelete={() => { error={(ruleType.required ?? true) && !ruleContent}
setAppendSeq(appendSeq.filter((v) => v !== item)); placeholder={ruleType.example}
}} onChange={(e) => setRuleContent(e.target.value)}
/> />
); )}
})} </Item>
</SortableContext> <Item>
</DndContext> <ListItemText primary={t("Proxy Policy")} />
); <Autocomplete
} size="small"
sx={{ minWidth: "240px" }}
renderInput={(params) => <TextField {...params} />}
options={proxyPolicyList}
value={proxyPolicy}
renderOption={(props, option) => (
<li {...props} title={t(option)}>
{option}
</li>
)}
onChange={(_, value) => value && setProxyPolicy(value)}
/>
</Item>
{ruleType.noResolve && (
<Item>
<ListItemText primary={t("No Resolve")} />
<Switch
checked={noResolve}
onChange={() => setNoResolve(!noResolve)}
/>
</Item>
)}
<Item>
<Button
fullWidth
variant="contained"
onClick={() => {
try {
let raw = validateRule();
if (prependSeq.includes(raw)) return;
setPrependSeq([...prependSeq, raw]);
} catch (err: any) {
Notice.error(err.message || err.toString());
}
}}
>
{t("Prepend Rule")}
</Button>
</Item>
<Item>
<Button
fullWidth
variant="contained"
onClick={() => {
try {
let raw = validateRule();
if (appendSeq.includes(raw)) return;
setAppendSeq([...appendSeq, raw]);
} catch (err: any) {
Notice.error(err.message || err.toString());
}
}}
>
{t("Append Rule")}
</Button>
</Item>
</List>
<List
sx={{
height: "calc(100% - 16px)",
width: "50%",
padding: "0 10px",
}}
>
<BaseSearchBox
matchCase={false}
onSearch={(match) => setMatch(() => match)}
/>
<Virtuoso
style={{ height: "calc(100% - 16px)", marginTop: "8px" }}
totalCount={
filteredRuleList.length +
(prependSeq.length > 0 ? 1 : 0) +
(appendSeq.length > 0 ? 1 : 0)
}
increaseViewportBy={256}
itemContent={(index) => {
let shift = prependSeq.length > 0 ? 1 : 0;
if (prependSeq.length > 0 && index === 0) {
return (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={onPrependDragEnd}
>
<SortableContext
items={prependSeq.map((x) => {
return x;
})}
>
{prependSeq.map((item, index) => {
return (
<RuleItem
key={`${item}-${index}`}
type="prepend"
ruleRaw={item}
onDelete={() => {
setPrependSeq(
prependSeq.filter((v) => v !== item)
);
}}
/>
);
})}
</SortableContext>
</DndContext>
);
} else if (index < filteredRuleList.length + shift) {
let newIndex = index - shift;
return (
<RuleItem
key={`${filteredRuleList[newIndex]}-${index}`}
type={
deleteSeq.includes(filteredRuleList[newIndex])
? "delete"
: "original"
}
ruleRaw={filteredRuleList[newIndex]}
onDelete={() => {
if (deleteSeq.includes(filteredRuleList[newIndex])) {
setDeleteSeq(
deleteSeq.filter(
(v) => v !== filteredRuleList[newIndex]
)
);
} else {
setDeleteSeq((prev) => [
...prev,
filteredRuleList[newIndex],
]);
}
}}
/>
);
} else {
return (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={onAppendDragEnd}
>
<SortableContext
items={appendSeq.map((x) => {
return x;
})}
>
{appendSeq.map((item, index) => {
return (
<RuleItem
key={`${item}-${index}`}
type="append"
ruleRaw={item}
onDelete={() => {
setAppendSeq(
appendSeq.filter((v) => v !== item)
);
}}
/>
);
})}
</SortableContext>
</DndContext>
);
}
}}
/>
</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)}
/> />
</List> )}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>

2
src/locales/en.json
View File

@ -64,6 +64,8 @@
"Delete Rule": "Delete Rule", "Delete Rule": "Delete Rule",
"Rule Condition Required": "Rule Condition Required", "Rule Condition Required": "Rule Condition Required",
"Invalid Rule": "Invalid Rule", "Invalid Rule": "Invalid Rule",
"Advanced": "Advanced",
"Visible": "Visible",
"DOMAIN": "Matches the full domain name", "DOMAIN": "Matches the full domain name",
"DOMAIN-SUFFIX": "Matches the domain suffix", "DOMAIN-SUFFIX": "Matches the domain suffix",
"DOMAIN-KEYWORD": "Matches the domain keyword", "DOMAIN-KEYWORD": "Matches the domain keyword",

2
src/locales/zh.json
View File

@ -64,6 +64,8 @@
"Delete Rule": "删除规则", "Delete Rule": "删除规则",
"Rule Condition Required": "规则条件缺失", "Rule Condition Required": "规则条件缺失",
"Invalid Rule": "无效规则", "Invalid Rule": "无效规则",
"Advanced": "高级",
"Visible": "可视化",
"DOMAIN": "匹配完整域名", "DOMAIN": "匹配完整域名",
"DOMAIN-SUFFIX": "匹配域名后缀", "DOMAIN-SUFFIX": "匹配域名后缀",
"DOMAIN-KEYWORD": "匹配域名关键字", "DOMAIN-KEYWORD": "匹配域名关键字",