From 4211780b95c737989a62e6598728ff6e17b6b61b Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Fri, 15 Aug 2025 14:14:01 +0800
Subject: [PATCH] =?UTF-8?q?fix(SelectModelPopup):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E9=94=AE=E7=9B=98=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=E5=B9=B6?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=97=A0=E6=95=88=E7=9A=84useEffect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将键盘事件监听从window移动到Modal容器，避免事件冒泡问题
移除无效的useEffect并更新键盘事件类型定义
---
 .../Popups/SelectModelPopup/popup.tsx         | 102 +++++++++---------
 1 file changed, 49 insertions(+), 53 deletions(-)

diff --git a/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx b/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
index 3ea309f6a0..38a23b19fb 100644
--- a/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
+++ b/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
@@ -14,7 +14,6 @@ import React, {
   startTransition,
   useCallback,
   useDeferredValue,
-  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -212,10 +211,10 @@ const PopupContainer: React.FC<Props> = ({ model, resolve, modelFilter }) => {
 
   // 处理键盘导航
   const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
       const modelCount = modelItems.length
 
-      if (!open || modelCount === 0 || e.isComposing) return
+      if (!open || modelCount === 0 || e.nativeEvent.isComposing) return
 
       // 键盘操作时禁用鼠标 hover
       if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Enter', 'Escape'].includes(e.key)) {
@@ -277,11 +276,6 @@ const PopupContainer: React.FC<Props> = ({ model, resolve, modelFilter }) => {
     [modelItems, open, focusedItemKey, resolve, handleItemClick, setFocusedItemKey, listItems]
   )
 
-  useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [handleKeyDown])
-
   const onCancel = useCallback(() => {
     setOpen(false)
   }, [])
@@ -340,52 +334,54 @@ const PopupContainer: React.FC<Props> = ({ model, resolve, modelFilter }) => {
   )
 
   return (
-    <Modal
-      centered
-      open={open}
-      onCancel={onCancel}
-      afterClose={onAfterClose}
-      width={600}
-      transitionName="animation-move-down"
-      styles={{
-        content: {
-          borderRadius: 20,
-          padding: 0,
-          overflow: 'hidden',
-          paddingBottom: 16
-        },
-        body: {
-          maxHeight: 'inherit',
-          padding: 0
-        }
-      }}
-      closeIcon={null}
-      footer={null}>
-      {/* 搜索框 */}
-      <SelectModelSearchBar onSearch={setSearchText} />
-      <Divider style={{ margin: 0, marginTop: 4, borderBlockStartWidth: 0.5 }} />
+    <div onKeyDown={handleKeyDown}>
+      <Modal
+        centered
+        open={open}
+        onCancel={onCancel}
+        afterClose={onAfterClose}
+        width={600}
+        transitionName="animation-move-down"
+        styles={{
+          content: {
+            borderRadius: 20,
+            padding: 0,
+            overflow: 'hidden',
+            paddingBottom: 16
+          },
+          body: {
+            maxHeight: 'inherit',
+            padding: 0
+          }
+        }}
+        closeIcon={null}
+        footer={null}>
+        {/* 搜索框 */}
+        <SelectModelSearchBar onSearch={setSearchText} />
+        <Divider style={{ margin: 0, marginTop: 4, borderBlockStartWidth: 0.5 }} />
 
-      {listItems.length > 0 ? (
-        <ListContainer onMouseMove={() => !isMouseOver && setIsMouseOver(true)}>
-          <DynamicVirtualList
-            ref={listRef}
-            list={listItems}
-            size={listHeight}
-            getItemKey={getItemKey}
-            estimateSize={estimateSize}
-            isSticky={isSticky}
-            scrollPaddingStart={ITEM_HEIGHT} // 留出 sticky header 高度
-            overscan={5}
-            scrollerStyle={{ pointerEvents: isMouseOver ? 'auto' : 'none' }}>
-            {rowRenderer}
-          </DynamicVirtualList>
-        </ListContainer>
-      ) : (
-        <EmptyState>
-          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-        </EmptyState>
-      )}
-    </Modal>
+        {listItems.length > 0 ? (
+          <ListContainer onMouseMove={() => !isMouseOver && setIsMouseOver(true)}>
+            <DynamicVirtualList
+              ref={listRef}
+              list={listItems}
+              size={listHeight}
+              getItemKey={getItemKey}
+              estimateSize={estimateSize}
+              isSticky={isSticky}
+              scrollPaddingStart={ITEM_HEIGHT} // 留出 sticky header 高度
+              overscan={5}
+              scrollerStyle={{ pointerEvents: isMouseOver ? 'auto' : 'none' }}>
+              {rowRenderer}
+            </DynamicVirtualList>
+          </ListContainer>
+        ) : (
+          <EmptyState>
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          </EmptyState>
+        )}
+      </Modal>
+    </div>
   )
 }