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

91
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,13 +351,13 @@ 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
@ -435,7 +436,6 @@ export const RulesEditorViewer = (props: Props) => {
/> />
</Item> </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,30 +470,32 @@ export const RulesEditorViewer = (props: Props) => {
{t("Append Rule")} {t("Append Rule")}
</Button> </Button>
</Item> </Item>
</div> </List>
<div
style={{ <List
display: "inline-block", sx={{ height: "calc(100% - 16px)", width: "50%", padding: "0 10px" }}
width: "50%",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
padding: "0 10px",
}}
> >
<div style={{ position: "sticky", top: 0, zIndex: 10 }}>
<BaseSearchBox <BaseSearchBox
matchCase={false} matchCase={false}
onSearch={(match) => setMatch(() => match)} onSearch={(match) => setMatch(() => match)}
/> />
</div> <Virtuoso
{prependSeq.length > 0 && ( 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 <DndContext
sensors={sensors} sensors={sensors}
collisionDetection={closestCenter} collisionDetection={closestCenter}
onDragEnd={onPrependDragEnd} onDragEnd={onPrependDragEnd}
> >
<List sx={{ borderBottom: "solid 1px var(--divider-color)" }}>
<SortableContext <SortableContext
items={prependSeq.map((x) => { items={prependSeq.map((x) => {
return x; return x;
@ -508,38 +508,40 @@ export const RulesEditorViewer = (props: Props) => {
type="prepend" type="prepend"
ruleRaw={item} ruleRaw={item}
onDelete={() => { onDelete={() => {
setPrependSeq(prependSeq.filter((v) => v !== item)); setPrependSeq(
prependSeq.filter((v) => v !== item)
);
}} }}
/> />
); );
})} })}
</SortableContext> </SortableContext>
</List>
</DndContext> </DndContext>
)} );
} else if (index < ruleList.length + shift) {
<List> let newIndex = index - shift;
{ruleList
.filter((item) => match(item))
.map((item, index) => {
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 (
{appendSeq.length > 0 && (
<DndContext <DndContext
sensors={sensors} sensors={sensors}
collisionDetection={closestCenter} collisionDetection={closestCenter}
@ -550,7 +552,6 @@ export const RulesEditorViewer = (props: Props) => {
return x; return x;
})} })}
> >
<List sx={{ borderTop: "solid 1px var(--divider-color)" }}>
{appendSeq.map((item, index) => { {appendSeq.map((item, index) => {
return ( return (
<RuleItem <RuleItem
@ -563,11 +564,13 @@ export const RulesEditorViewer = (props: Props) => {
/> />
); );
})} })}
</List>
</SortableContext> </SortableContext>
</DndContext> </DndContext>
)} );
</div> }
}}
/>
</List>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>