Austin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2024-11-16 11:42:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: optimize performance of the rule editor
Some checks are pending
Alpha Build / alpha (macos-latest, aarch64-apple-darwin) (push) Waiting to run
Details
Alpha Build / alpha (macos-latest, x86_64-apple-darwin) (push) Waiting to run
Details
Alpha Build / alpha (windows-latest, aarch64-pc-windows-msvc) (push) Waiting to run
Details
Alpha Build / alpha (windows-latest, i686-pc-windows-msvc) (push) Waiting to run
Details
Alpha Build / alpha (windows-latest, x86_64-pc-windows-msvc) (push) Waiting to run
Details
Alpha Build / alpha-for-linux (ubuntu-latest, aarch64-unknown-linux-gnu) (push) Waiting to run
Details
Alpha Build / alpha-for-linux (ubuntu-latest, armv7-unknown-linux-gnueabihf) (push) Waiting to run
Details
Alpha Build / alpha-for-linux (ubuntu-latest, i686-unknown-linux-gnu) (push) Waiting to run
Details
Alpha Build / alpha-for-linux (ubuntu-latest, x86_64-unknown-linux-gnu) (push) Waiting to run
Details
Alpha Build / alpha-for-fixed-webview2 (arm64, windows-latest, aarch64-pc-windows-msvc) (push) Waiting to run
Details
Alpha Build / alpha-for-fixed-webview2 (x64, windows-latest, x86_64-pc-windows-msvc) (push) Waiting to run
Details
Alpha Build / alpha-for-fixed-webview2 (x86, windows-latest, i686-pc-windows-msvc) (push) Waiting to run
Details
Alpha Build / Update tag (push) Blocked by required conditions
Details

Browse Source
This commit is contained in:
MystiPanda 2024-07-02 23:54:53 +08:00
parent 07c145c661
commit 7372f330a4
No known key found for this signature in database
1 changed files with 169 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,7 @@ import { Notice, Switch } from "@/components/base";
import getSystem from "@/utils/get-system"; 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";
interface Props { interface Props {
profileUid: string; profileUid: string;
@ -350,92 +351,91 @@ export const RulesEditorViewer = (props: Props) => {
<DialogTitle>{title ?? t("Edit Rules")}</DialogTitle> <DialogTitle>{title ?? t("Edit Rules")}</DialogTitle>
<DialogContent sx={{ display: "flex", width: "auto", height: "100vh" }}> <DialogContent sx={{ display: "flex", width: "auto", height: "100vh" }}>
<div <List
style={{ sx={{
height: "calc(100% - 16px)",
width: "50%", width: "50%",
height: "100%", padding: "0 10px",
}} }}
> >
<List> <Item>
<Item> <ListItemText primary={t("Rule Type")} />
<ListItemText primary={t("Rule Type")} /> <Autocomplete
<Autocomplete size="small"
size="small" sx={{ minWidth: "240px" }}
sx={{ minWidth: "240px" }} renderInput={(params) => <TextField {...params} />}
renderInput={(params) => <TextField {...params} />} options={rules}
options={rules} value={ruleType}
value={ruleType} getOptionLabel={(option) => option.name}
getOptionLabel={(option) => option.name} renderOption={(props, option) => (
renderOption={(props, option) => ( <li {...props} title={t(option.name)}>
<li {...props} title={t(option.name)}> {option.name}
{option.name} </li>
</li> )}
)} onChange={(_, value) => value && setRuleType(value)}
onChange={(_, value) => value && setRuleType(value)} />
/> </Item>
</Item> <Item sx={{ display: !(ruleType.required ?? true) ? "none" : "" }}>
<Item sx={{ display: !(ruleType.required ?? true) ? "none" : "" }}> <ListItemText primary={t("Rule Content")} />
<ListItemText primary={t("Rule Content")} />
{ruleType.name === "RULE-SET" && ( {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 <Autocomplete
size="small" size="small"
sx={{ minWidth: "240px" }} sx={{ minWidth: "240px" }}
renderInput={(params) => <TextField {...params} />} renderInput={(params) => <TextField {...params} />}
options={proxyPolicyList} options={ruleSetList}
value={proxyPolicy} value={ruleContent}
renderOption={(props, option) => ( onChange={(_, value) => value && setRuleContent(value)}
<li {...props} title={t(option)}> />
{option} )}
</li> {ruleType.name === "SUB-RULE" && (
)} <Autocomplete
onChange={(_, value) => value && setProxyPolicy(value)} 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>
{ruleType.noResolve && ( )}
<Item>
<ListItemText primary={t("No Resolve")} />
<Switch
checked={noResolve}
onChange={() => setNoResolve(!noResolve)}
/>
</Item>
)}
</List>
<Item> <Item>
<Button <Button
fullWidth fullWidth
@ -443,8 +443,6 @@ export const RulesEditorViewer = (props: Props) => {
onClick={() => { onClick={() => {
try { try {
let raw = validateRule(); let raw = validateRule();
console.log(raw);
if (prependSeq.includes(raw)) return; if (prependSeq.includes(raw)) return;
setPrependSeq([...prependSeq, raw]); setPrependSeq([...prependSeq, raw]);
} catch (err: any) { } catch (err: any) {
@ -463,7 +461,7 @@ export const RulesEditorViewer = (props: Props) => {
try { try {
let raw = validateRule(); let raw = validateRule();
if (appendSeq.includes(raw)) return; if (appendSeq.includes(raw)) return;
setPrependSeq([...appendSeq, raw]); setAppendSeq([...appendSeq, raw]);
} catch (err: any) { } catch (err: any) {
Notice.error(err.message || err.toString()); Notice.error(err.message || err.toString());
} }
@ -472,102 +470,107 @@ export const RulesEditorViewer = (props: Props) => {
{t("Append Rule")} {t("Append Rule")}
</Button> </Button>
</Item> </Item>
</div> </List>
<div
style={{
display: "inline-block",
width: "50%",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
padding: "0 10px",
}}
>
<div style={{ position: "sticky", top: 0, zIndex: 10 }}>
<BaseSearchBox
matchCase={false}
onSearch={(match) => setMatch(() => match)}
/>
</div>
{prependSeq.length > 0 && (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={onPrependDragEnd}
>
<List sx={{ borderBottom: "solid 1px var(--divider-color)" }}>
<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>
</List>
</DndContext>
)}
<List> <List
{ruleList sx={{ height: "calc(100% - 16px)", width: "50%", padding: "0 10px" }}
.filter((item) => match(item)) >
.map((item, index) => { <BaseSearchBox
matchCase={false}
onSearch={(match) => setMatch(() => match)}
/>
<Virtuoso
style={{ height: "calc(100% - 16px)", marginTop: "8px" }}
totalCount={
ruleList.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 < ruleList.length + shift) {
let newIndex = index - shift;
return ( return (
<RuleItem <RuleItem
key={`${item}-${index}`} key={`${ruleList[newIndex]}-${index}`}
type={deleteSeq.includes(item) ? "delete" : "original"} type={
ruleRaw={item} deleteSeq.includes(ruleList[newIndex])
? "delete"
: "original"
}
ruleRaw={ruleList[newIndex]}
onDelete={() => { onDelete={() => {
if (deleteSeq.includes(item)) { if (deleteSeq.includes(ruleList[newIndex])) {
setDeleteSeq(deleteSeq.filter((v) => v !== item)); setDeleteSeq(
deleteSeq.filter((v) => v !== ruleList[newIndex])
);
} else { } else {
setDeleteSeq([...deleteSeq, item]); setDeleteSeq((prev) => [...prev, ruleList[newIndex]]);
} }
}} }}
/> />
); );
})} } else {
</List> return (
<DndContext
{appendSeq.length > 0 && ( sensors={sensors}
<DndContext collisionDetection={closestCenter}
sensors={sensors} onDragEnd={onAppendDragEnd}
collisionDetection={closestCenter} >
onDragEnd={onAppendDragEnd} <SortableContext
> items={appendSeq.map((x) => {
<SortableContext return x;
items={appendSeq.map((x) => { })}
return x; >
})} {appendSeq.map((item, index) => {
> return (
<List sx={{ borderTop: "solid 1px var(--divider-color)" }}> <RuleItem
{appendSeq.map((item, index) => { key={`${item}-${index}`}
return ( type="append"
<RuleItem ruleRaw={item}
key={`${item}-${index}`} onDelete={() => {
type="append" setAppendSeq(appendSeq.filter((v) => v !== item));
ruleRaw={item} }}
onDelete={() => { />
setAppendSeq(appendSeq.filter((v) => v !== item)); );
}} })}
/> </SortableContext>
); </DndContext>
})} );
</List> }
</SortableContext> }}
</DndContext> />
)} </List>
</div>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>