YuuMJ1997/mihomo-party
1
0
Fork 0
mirror of https://gh.catmak.name/https://github.com/mihomo-party-org/mihomo-party synced 2026-04-13 16:10:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: virtualize rule list in edit-rules modal

Browse Source
This commit is contained in:
Memory 2026-02-20 17:33:25 +08:00 committed by GitHub
parent a692dc9ead
commit 33a6e4517e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/renderer/src/components/profiles/edit-rules-modal.tsx
View File

@ -27,6 +27,7 @@ import React, {
import { getProfileStr, setRuleStr, getRuleStr } from '@renderer/utils/ipc'
import { useTranslation } from 'react-i18next'
import yaml from 'js-yaml'
import { Virtuoso } from 'react-virtuoso'
import { IoMdTrash, IoMdArrowUp, IoMdArrowDown, IoMdUndo } from 'react-icons/io'
import { MdVerticalAlignTop, MdVerticalAlignBottom } from 'react-icons/md'
import { platform } from '@renderer/utils/init'
@ -1324,7 +1325,7 @@ const EditRulesModal: React.FC<Props> = (props) => {
onValueChange={setSearchTerm}
/>
</div>
<div className="flex flex-col gap-2 max-h-[calc(100vh-200px)] overflow-y-auto flex-1">
<div className="flex-1 min-h-0">
{isLoading ? (
<div className="flex items-center justify-center h-full py-8">
<Spinner size="lg" label={t('common.loading') || 'Loading...'} />
@ -1338,26 +1339,34 @@ const EditRulesModal: React.FC<Props> = (props) => {
: t('profiles.editRules.noRules')}
</div>
) : (
deferredFilteredRules.map((rule, index) => {
const originalIndex = ruleIndexMap.get(rule) ?? -1
const isDeleted = deletedRules.has(originalIndex)
const isPrependOrAppend =
prependRules.has(originalIndex) || appendRules.has(originalIndex)
return (
<RuleListItem
key={`${originalIndex}-${index}`}
rule={rule}
originalIndex={originalIndex}
isDeleted={isDeleted}
isPrependOrAppend={isPrependOrAppend}
rulesLength={rules.length}
onMoveUp={handleMoveRuleUp}
onMoveDown={handleMoveRuleDown}
onRemove={handleRemoveRule}
/>
)
})
<Virtuoso
style={{ height: '100%' }}
data={deferredFilteredRules}
computeItemKey={(index, rule) => {
const originalIndex = ruleIndexMap.get(rule) ?? -1
return `${originalIndex}-${index}`
}}
itemContent={(index, rule) => {
const originalIndex = ruleIndexMap.get(rule) ?? -1
const isDeleted = deletedRules.has(originalIndex)
const isPrependOrAppend =
prependRules.has(originalIndex) || appendRules.has(originalIndex)
return (
<div className="pb-2">
<RuleListItem
rule={rule}
originalIndex={originalIndex}
isDeleted={isDeleted}
isPrependOrAppend={isPrependOrAppend}
rulesLength={rules.length}
onMoveUp={handleMoveRuleUp}
onMoveDown={handleMoveRuleDown}
onRemove={handleRemoveRule}
/>
</div>
)
}}
/>
)}
</div>
</div>