YuuMJ1997/mihomo-party
1
0
Fork 0
mirror of https://gh.catmak.name/https://github.com/mihomo-party-org/mihomo-party synced 2026-04-18 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 { getProfileStr, setRuleStr, getRuleStr } from '@renderer/utils/ipc'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import yaml from 'js-yaml' import yaml from 'js-yaml'
import { Virtuoso } from 'react-virtuoso'
import { IoMdTrash, IoMdArrowUp, IoMdArrowDown, IoMdUndo } from 'react-icons/io' import { IoMdTrash, IoMdArrowUp, IoMdArrowDown, IoMdUndo } from 'react-icons/io'
import { MdVerticalAlignTop, MdVerticalAlignBottom } from 'react-icons/md' import { MdVerticalAlignTop, MdVerticalAlignBottom } from 'react-icons/md'
import { platform } from '@renderer/utils/init' import { platform } from '@renderer/utils/init'
@ -1324,7 +1325,7 @@ const EditRulesModal: React.FC<Props> = (props) => {
onValueChange={setSearchTerm} onValueChange={setSearchTerm}
/> />
</div> </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 ? ( {isLoading ? (
<div className="flex items-center justify-center h-full py-8"> <div className="flex items-center justify-center h-full py-8">
<Spinner size="lg" label={t('common.loading') || 'Loading...'} /> <Spinner size="lg" label={t('common.loading') || 'Loading...'} />
@ -1338,26 +1339,34 @@ const EditRulesModal: React.FC<Props> = (props) => {
: t('profiles.editRules.noRules')} : t('profiles.editRules.noRules')}
</div> </div>
) : ( ) : (
deferredFilteredRules.map((rule, index) => { <Virtuoso
const originalIndex = ruleIndexMap.get(rule) ?? -1 style={{ height: '100%' }}
const isDeleted = deletedRules.has(originalIndex) data={deferredFilteredRules}
const isPrependOrAppend = computeItemKey={(index, rule) => {
prependRules.has(originalIndex) || appendRules.has(originalIndex) const originalIndex = ruleIndexMap.get(rule) ?? -1
return `${originalIndex}-${index}`
return ( }}
<RuleListItem itemContent={(index, rule) => {
key={`${originalIndex}-${index}`} const originalIndex = ruleIndexMap.get(rule) ?? -1
rule={rule} const isDeleted = deletedRules.has(originalIndex)
originalIndex={originalIndex} const isPrependOrAppend =
isDeleted={isDeleted} prependRules.has(originalIndex) || appendRules.has(originalIndex)
isPrependOrAppend={isPrependOrAppend} return (
rulesLength={rules.length} <div className="pb-2">
onMoveUp={handleMoveRuleUp} <RuleListItem
onMoveDown={handleMoveRuleDown} rule={rule}
onRemove={handleRemoveRule} originalIndex={originalIndex}
/> isDeleted={isDeleted}
) isPrependOrAppend={isPrependOrAppend}
}) rulesLength={rules.length}
onMoveUp={handleMoveRuleUp}
onMoveDown={handleMoveRuleDown}
onRemove={handleRemoveRule}
/>
</div>
)
}}
/>
)} )}
</div> </div>
</div> </div>