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

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 { RuleItem } from "@/components/profile/rule-item";
import { BaseSearchBox } from "../base/base-search-box";
import { Virtuoso } from "react-virtuoso";
interface Props {
profileUid: string;
@ -350,13 +351,13 @@ 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
@ -435,7 +436,6 @@ export const RulesEditorViewer = (props: Props) => {
/>
</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,30 +470,32 @@ 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",
}}
</List>
<List
sx={{ height: "calc(100% - 16px)", width: "50%", padding: "0 10px" }}
>
<div style={{ position: "sticky", top: 0, zIndex: 10 }}>
<BaseSearchBox
matchCase={false}
onSearch={(match) => setMatch(() => match)}
/>
</div>
{prependSeq.length > 0 && (
<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}
>
<List sx={{ borderBottom: "solid 1px var(--divider-color)" }}>
<SortableContext
items={prependSeq.map((x) => {
return x;
@ -508,38 +508,40 @@ export const RulesEditorViewer = (props: Props) => {
type="prepend"
ruleRaw={item}
onDelete={() => {
setPrependSeq(prependSeq.filter((v) => v !== item));
setPrependSeq(
prependSeq.filter((v) => v !== item)
);
}}
/>
);
})}
</SortableContext>
</List>
</DndContext>
)}
<List>
{ruleList
.filter((item) => match(item))
.map((item, index) => {
);
} 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 && (
} else {
return (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
@ -550,7 +552,6 @@ export const RulesEditorViewer = (props: Props) => {
return x;
})}
>
<List sx={{ borderTop: "solid 1px var(--divider-color)" }}>
{appendSeq.map((item, index) => {
return (
<RuleItem
@ -563,11 +564,13 @@ export const RulesEditorViewer = (props: Props) => {
/>
);
})}
</List>
</SortableContext>
</DndContext>
)}
</div>
);
}
}}
/>
</List>
</DialogContent>
<DialogActions>