From b7a939ee855cb1cebb141e63745a200dd6daec9a Mon Sep 17 00:00:00 2001
From: lanyuanxiaoyao <lanyuanxiaoyao@gmail.com>
Date: Thu, 12 Dec 2024 22:05:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E5=B0=BE=E8=B7=B3?=
 =?UTF-8?q?=E8=BD=AC=E7=9A=84=E5=93=8D=E5=BA=94=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E5=BD=93=E6=96=B9=E5=90=91=E9=94=AE=E4=B8=80=E7=9B=B4=E6=8C=89?=
 =?UTF-8?q?=E4=BD=8F=E7=9A=84=E6=97=B6=E5=80=99=E4=B8=8D=E8=A7=A6=E5=8F=91?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E7=9B=B4=E5=88=B0=E5=86=8D=E7=82=B9=E4=B8=80?=
 =?UTF-8?q?=E6=AC=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VirtualList.vue | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/VirtualList.vue b/src/components/VirtualList.vue
index 0934acc..4684575 100644
--- a/src/components/VirtualList.vue
+++ b/src/components/VirtualList.vue
@@ -191,6 +191,10 @@ const lastReachBoundaryTime = ref<{ top: number; bottom: number }>({
   bottom: 0
 })
 
+// 添加新的状态变量用于追踪按键状���
+const isKeyPressed = ref<boolean>(false)
+let keyPressTimer: number | null = null
+
 /**
  * 处理键盘事件
  * 实现键盘导航、边界循环和项目选择功能
@@ -204,13 +208,25 @@ function handleKeyDown(e: KeyboardEvent): void {
       const item = props.data[selectedIndex.value]
       emit('click', { ...item, index: selectedIndex.value })
     }
-  } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+    return
+  }
+  
+  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
     e.preventDefault()
     
     const isFirstItem = selectedIndex.value === 0
     const isLastItem = selectedIndex.value === props.data.length - 1
     const now = Date.now()
     
+    // 只在首尾项时检查按键状态
+    if ((e.key === 'ArrowUp' && isFirstItem) || (e.key === 'ArrowDown' && isLastItem)) {
+      if (isKeyPressed.value) {
+        return
+      }
+      isKeyPressed.value = true
+      if (keyPressTimer) clearTimeout(keyPressTimer)
+    }
+    
     if (e.key === 'ArrowUp' && isFirstItem) {
       const timeSinceLastTop = now - lastReachBoundaryTime.value.top
       if (timeSinceLastTop < 5000) {
@@ -247,6 +263,7 @@ function handleKeyDown(e: KeyboardEvent): void {
       return
     }
     
+    // 非首尾项的正常导航逻辑
     isKeyboardNavigating.value = true
     if (keyboardTimer) clearTimeout(keyboardTimer)
     
@@ -277,6 +294,17 @@ function handleKeyDown(e: KeyboardEvent): void {
   }
 }
 
+// 添加键盘抬起事件处理函数
+function handleKeyUp(e: KeyboardEvent): void {
+  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+    // 设置一个短暂的延时，确保不会立即响应下一次按键
+    if (keyPressTimer) clearTimeout(keyPressTimer)
+    keyPressTimer = window.setTimeout(() => {
+      isKeyPressed.value = false
+    }, 50)
+  }
+}
+
 /**
  * 保持选中项在可视区域内
  * 如果选中项不可见，则滚动到合适位置
@@ -330,6 +358,7 @@ onMounted(() => {
   // 添加全局事件监听
   window.addEventListener('resize', updateContainerHeight)
   window.addEventListener('keydown', handleKeyDown)
+  window.addEventListener('keyup', handleKeyUp)
 })
 
 onBeforeUnmount(() => {
@@ -344,8 +373,10 @@ onBeforeUnmount(() => {
   
   window.removeEventListener('resize', updateContainerHeight)
   window.removeEventListener('keydown', handleKeyDown)
+  window.removeEventListener('keyup', handleKeyUp)
   if (keyboardTimer) clearTimeout(keyboardTimer)
   if (hoverTimer) clearTimeout(hoverTimer)
+  if (keyPressTimer) clearTimeout(keyPressTimer)
 })
 </script>