From 3f361631d03d96ca5138526ce5105c7a3c493e49 Mon Sep 17 00:00:00 2001
From: truewhile <62226914+truewhile@users.noreply.github.com>
Date: Fri, 11 Sep 2026 21:30:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=90=9C=E7=B4=A2=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E6=A1=86=E5=BC=82=E6=AD=A5=E5=93=8D=E5=BA=94=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E7=9A=84=E6=84=8F=E5=A4=96=E5=B1=95=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/LayoutHeaderSections.tsx | 24 +++++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/src/components/LayoutHeaderSections.tsx b/web/src/components/LayoutHeaderSections.tsx
index df82979..deb6f4d 100644
--- a/web/src/components/LayoutHeaderSections.tsx
+++ b/web/src/components/LayoutHeaderSections.tsx
@@ -114,16 +114,24 @@ function LayoutHeaderSearch() {
   const [loading, setLoading] = useState(false)
   const [results, setResults] = useState<Media[]>([])
   const containerRef = useRef<HTMLDivElement>(null)
+  const isOpenRef = useRef(false)
   // 递增序号守卫：快速连续输入时丢弃过期响应
   const searchSeqRef = useRef(0)
   const navigate = useNavigate()
 
+  const setSearchOpen = (open: boolean) => {
+    isOpenRef.current = open
+    setIsOpen(open)
+  }
+
   useEffect(() => {
     const trimmed = query.trim()
     if (!trimmed) {
       searchSeqRef.current += 1
       setResults([])
       setLoading(false)
+      isOpenRef.current = false
+      setIsOpen(false)
       return
     }
 
@@ -134,7 +142,7 @@ function LayoutHeaderSearch() {
         const res = await mediaAPI.search(trimmed, 8)
         if (seq !== searchSeqRef.current) return
         setResults(res.items || [])
-        setIsOpen(true)
+        if (isOpenRef.current) setIsOpen(true)
       } catch {
         // 请求失败时保留旧结果，避免网络抖动清空下拉
       } finally {
@@ -148,6 +156,7 @@ function LayoutHeaderSearch() {
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
       if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        isOpenRef.current = false
         setIsOpen(false)
       }
     }
@@ -156,14 +165,14 @@ function LayoutHeaderSearch() {
   }, [])
 
   const handleSelect = (item: Media) => {
-    setIsOpen(false)
+    setSearchOpen(false)
     setQuery('')
     navigate(favouriteMediaLink(item))
   }
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Escape') {
-      setIsOpen(false)
+      setSearchOpen(false)
     } else if (e.key === 'Enter' && results.length > 0) {
       handleSelect(results[0])
     }
@@ -180,11 +189,12 @@ function LayoutHeaderSearch() {
           type="text"
           value={query}
           onChange={(e) => {
-            setQuery(e.target.value)
-            if (e.target.value.trim()) setIsOpen(true)
+            const nextQuery = e.target.value
+            setQuery(nextQuery)
+            setSearchOpen(Boolean(nextQuery.trim()))
           }}
           onFocus={() => {
-            if (results.length > 0) setIsOpen(true)
+            if (query.trim()) setSearchOpen(true)
           }}
           onKeyDown={handleKeyDown}
           placeholder="搜索媒体…"
@@ -198,7 +208,7 @@ function LayoutHeaderSearch() {
             onClick={() => {
               setQuery('')
               setResults([])
-              setIsOpen(false)
+              setSearchOpen(false)
             }}
             className="absolute right-3 text-[var(--app-muted)] hover:text-[var(--app-text)] p-0.5 rounded-lg"
           >