From 3cdb03c71ff3f9ce2bb5df15a67e94754bb9db42 Mon Sep 17 00:00:00 2001
From: NowScott <nowscott@qq.com>
Date: Fri, 3 Apr 2026 16:14:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(HeaderBar):=20=E4=BC=98=E5=8C=96=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=A1=86=E4=BA=A4=E4=BA=92=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=AE=8C=E6=88=90=E5=92=8C=E6=8B=BC=E5=86=99?=
 =?UTF-8?q?=E6=A3=80=E6=9F=A5=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加 `isReadOnly` 状态以改善移动端用户体验，防止虚拟键盘在非聚焦时弹出。将输入框类型改为 `search`，并禁用自动完成和拼写检查，以减少干扰。
---
 components/HeaderBar.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/HeaderBar.js b/components/HeaderBar.js
index 75748e4..c819b51 100644
--- a/components/HeaderBar.js
+++ b/components/HeaderBar.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import ThemeToggleButton from './ThemeToggleButton';
 import { useStats } from '../contexts/StatsContext';
 import { HiOutlineInformationCircle, HiOutlineHome, HiOutlineSearch } from 'react-icons/hi';
@@ -10,6 +10,7 @@ const HeaderBar = ({ lastFetched, count, searchQuery, setSearchQuery }) => {
   const router = useRouter();
   const isHomePage = router.pathname === '/';
   const isAboutPage = router.pathname === '/about';
+  const [isReadOnly, setIsReadOnly] = useState(true);
 
   // 同步 props 到全局 stats (仅在 count 有意义时同步)
   useEffect(() => {
@@ -55,10 +56,16 @@ const HeaderBar = ({ lastFetched, count, searchQuery, setSearchQuery }) => {
                 rounded-full shadow-sm focus:shadow-md
                 focus:outline-none focus:ring-orange-500/20 dark:focus:ring-zinc-200/15
                 transition-[background-color,border-color,color,box-shadow] duration-400 placeholder:text-[#a36b5f] placeholder:tracking-normal dark:placeholder:text-zinc-400 dark:shadow-[0_0_0_1px_rgba(255,255,255,0.05)] dark:focus:shadow-[0_0_0_1px_rgba(255,255,255,0.22)]"
-                type="text"
+                type="search"
                 placeholder=""
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
+                autoComplete="one-time-code"
+                autoCorrect="off"
+                spellCheck="false"
+                readOnly={isReadOnly}
+                onFocus={() => setIsReadOnly(false)}
+                onBlur={() => setIsReadOnly(true)}
               />
               {!searchQuery && (
                 <>