From c07aef8f414a6fc8ddd75bc05609adfcdfd204e8 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Tue, 22 Oct 2024 16:17:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BD=91=E9=A1=B5=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E7=94=A8=E4=B8=8A=E4=B8=8B=E6=8C=89=E9=94=AE=E7=BF=BB?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AlgoliaSearchModal.js | 46 +++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/AlgoliaSearchModal.js b/components/AlgoliaSearchModal.js
index eac9d8bfdee..4a84c5aa177 100644
--- a/components/AlgoliaSearchModal.js
+++ b/components/AlgoliaSearchModal.js
@@ -44,6 +44,8 @@ export default function AlgoliaSearchModal({ cRef }) {
   const [useTime, setUseTime] = useState(0)
   const [activeIndex, setActiveIndex] = useState(0)
   const [isLoading, setIsLoading] = useState(false)
+  const [isInputFocused, setIsInputFocused] = useState(false)
+
   const inputRef = useRef(null)
   const router = useRouter()
 
@@ -54,13 +56,16 @@ export default function AlgoliaSearchModal({ cRef }) {
     e.preventDefault()
     setIsModalOpen(true)
   })
-  // 方向键调整选中
+  // 修改快捷键的使用逻辑
   useHotkeys(
     'down',
     e => {
-      e.preventDefault()
-      if (activeIndex < searchResults.length - 1) {
-        setActiveIndex(activeIndex + 1)
+      if (isInputFocused) {
+        // 只有在聚焦时才触发
+        e.preventDefault()
+        if (activeIndex < searchResults.length - 1) {
+          setActiveIndex(activeIndex + 1)
+        }
       }
     },
     { enableOnFormTags: true }
@@ -68,39 +73,40 @@ export default function AlgoliaSearchModal({ cRef }) {
   useHotkeys(
     'up',
     e => {
-      e.preventDefault()
-      if (activeIndex > 0) {
-        setActiveIndex(activeIndex - 1)
+      if (isInputFocused) {
+        e.preventDefault()
+        if (activeIndex > 0) {
+          setActiveIndex(activeIndex - 1)
+        }
       }
     },
     { enableOnFormTags: true }
   )
-  // esc关闭
   useHotkeys(
     'esc',
     e => {
-      e.preventDefault()
-      setIsModalOpen(false)
+      if (isInputFocused) {
+        e.preventDefault()
+        setIsModalOpen(false)
+      }
     },
     { enableOnFormTags: true }
   )
-
-  // 跳转Search结果
-  const onJumpSearchResult = () => {
-    if (searchResults.length > 0) {
-      window.location.href = `${siteConfig('SUB_PATH', '')}/${searchResults[activeIndex].slug}`
-    }
-  }
-  // enter跳转
   useHotkeys(
     'enter',
     e => {
-      if (searchResults.length > 0) {
+      if (isInputFocused && searchResults.length > 0) {
         onJumpSearchResult(index)
       }
     },
     { enableOnFormTags: true }
   )
+  // 跳转Search结果
+  const onJumpSearchResult = () => {
+    if (searchResults.length > 0) {
+      window.location.href = `${siteConfig('SUB_PATH', '')}/${searchResults[activeIndex].slug}`
+    }
+  }
 
   const resetSearch = () => {
     setActiveIndex(0)
@@ -261,6 +267,8 @@ export default function AlgoliaSearchModal({ cRef }) {
           type='text'
           placeholder='在这里输入搜索关键词...'
           onChange={e => handleInputChange(e)}
+          onFocus={() => setIsInputFocused(true)} // 聚焦时
+          onBlur={() => setIsInputFocused(false)} // 失去焦点时
           className='text-black dark:text-gray-200 bg-gray-50 dark:bg-gray-600 outline-blue-500 w-full px-4 my-2 py-1 mb-4 border rounded-md'
           ref={inputRef}
         />