From 33a6e4517e2f9f61312a808e8fa11163cc1a93a7 Mon Sep 17 00:00:00 2001
From: Memory <134070804+Memory2314@users.noreply.github.com>
Date: Fri, 20 Feb 2026 17:33:25 +0800
Subject: [PATCH] perf: virtualize rule list in edit-rules modal

---
 .../components/profiles/edit-rules-modal.tsx  | 51 +++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/renderer/src/components/profiles/edit-rules-modal.tsx b/src/renderer/src/components/profiles/edit-rules-modal.tsx
index c97d0f8..832c570 100644
--- a/src/renderer/src/components/profiles/edit-rules-modal.tsx
+++ b/src/renderer/src/components/profiles/edit-rules-modal.tsx
@@ -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>