Austin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2024-11-16 03:32:36 +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 { RuleItem } from "@/components/profile/rule-item";
import { BaseSearchBox } from "../base/base-search-box";
import { Virtuoso } from "react-virtuoso";
interface Props {
profileUid: string;
@ -350,92 +351,91 @@ export const RulesEditorViewer = (props: Props) => {
<DialogTitle>{title ?? t("Edit Rules")}</DialogTitle>
<DialogContent sx={{ display: "flex", width: "auto", height: "100vh" }}>
<div
style={{
<List
sx={{
height: "calc(100% - 16px)",
width: "50%",
height: "100%",
padding: "0 10px",
}}
>
<List>
<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")} />
<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")} />
{ruleType.name === "RULE-SET" && (
<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)}
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>
{ruleType.noResolve && (
<Item>
<ListItemText primary={t("No Resolve")} />
<Switch
checked={noResolve}
onChange={() => setNoResolve(!noResolve)}
/>
</Item>
)}
</List>
)}
<Item>
<Button
fullWidth
@ -443,8 +443,6 @@ export const RulesEditorViewer = (props: Props) => {
onClick={() => {
try {
let raw = validateRule();
console.log(raw);
if (prependSeq.includes(raw)) return;
setPrependSeq([...prependSeq, raw]);
} catch (err: any) {
@ -463,7 +461,7 @@ export const RulesEditorViewer = (props: Props) => {
try {
let raw = validateRule();
if (appendSeq.includes(raw)) return;
setPrependSeq([...appendSeq, raw]);
setAppendSeq([...appendSeq, raw]);
} catch (err: any) {
Notice.error(err.message || err.toString());
}
@ -472,102 +470,107 @@ export const RulesEditorViewer = (props: Props) => {
{t("Append Rule")}
</Button>
</Item>
</div>
<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
.filter((item) => match(item))
.map((item, index) => {
<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={
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 (
<RuleItem
key={`${item}-${index}`}
type={deleteSeq.includes(item) ? "delete" : "original"}
ruleRaw={item}
key={`${ruleList[newIndex]}-${index}`}
type={
deleteSeq.includes(ruleList[newIndex])
? "delete"
: "original"
}
ruleRaw={ruleList[newIndex]}
onDelete={() => {
if (deleteSeq.includes(item)) {
setDeleteSeq(deleteSeq.filter((v) => v !== item));
if (deleteSeq.includes(ruleList[newIndex])) {
setDeleteSeq(
deleteSeq.filter((v) => v !== ruleList[newIndex])
);
} else {
setDeleteSeq([...deleteSeq, item]);
setDeleteSeq((prev) => [...prev, ruleList[newIndex]]);
}
}}
/>
);
})}
</List>
{appendSeq.length > 0 && (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={onAppendDragEnd}
>
<SortableContext
items={appendSeq.map((x) => {
return x;
})}
>
<List sx={{ borderTop: "solid 1px var(--divider-color)" }}>
{appendSeq.map((item, index) => {
return (
<RuleItem
key={`${item}-${index}`}
type="append"
ruleRaw={item}
onDelete={() => {
setAppendSeq(appendSeq.filter((v) => v !== item));
}}
/>
);
})}
</List>
</SortableContext>
</DndContext>
)}
</div>
} 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>
</DialogContent>
<DialogActions>