From 84cce45151ac5cb0d881cd4ac3bd29f720106849 Mon Sep 17 00:00:00 2001
From: JSR <pandajsr72@gmail.com>
Date: Wed, 18 Mar 2026 19:03:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=90=9C=E7=B4=A2=E6=A1=86?=
 =?UTF-8?q?=E4=B8=8B=E6=96=B9=E4=B9=9D=E5=AE=AB=E6=A0=BC=E6=8B=BC=E9=9F=B3?=
 =?UTF-8?q?=E6=A8=A1=E6=8B=9F=E9=94=AE=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Home.tsx | 88 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 79 insertions(+), 9 deletions(-)

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 3fb36ea..be569c5 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -31,9 +31,11 @@ export const Home: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
   const [loading, setLoading] = useState(false)
   const [sortType, setSortType] = useState<SortType>("alphabet")
   const [searchKeyword, setSearchKeyword] = useState("")
+  const [showPinyinKeyboard, setShowPinyinKeyboard] = useState(false)
 
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const groupRefs = useRef<Record<string, HTMLDivElement | null>>({})
+  const searchAreaRef = useRef<HTMLDivElement>(null)
 
   const [selectedStudent, setSelectedStudent] = useState<student | null>(null)
   const [operationVisible, setOperationVisible] = useState(false)
@@ -92,6 +94,31 @@ export const Home: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
     return () => window.removeEventListener("ss:data-updated", onDataUpdated as any)
   }, [fetchData])
 
+  useEffect(() => {
+    const onDocumentClick = (e: MouseEvent) => {
+      const target = e.target as Node | null
+      if (searchAreaRef.current && target && !searchAreaRef.current.contains(target)) {
+        setShowPinyinKeyboard(false)
+      }
+    }
+    document.addEventListener("mousedown", onDocumentClick)
+    return () => document.removeEventListener("mousedown", onDocumentClick)
+  }, [])
+
+  const pinyinKeyRows = [
+    ["ABC", "DEF", "GHI"],
+    ["JKL", "MNO", "PQRS"],
+    ["TUV", "WXYZ", "⌫"],
+  ]
+
+  const handlePinyinKeyPress = (value: string) => {
+    if (value === "⌫") {
+      setSearchKeyword((prev) => prev.slice(0, -1))
+      return
+    }
+    setSearchKeyword((prev) => `${prev}${value.charAt(0).toLowerCase()}`)
+  }
+
   const getDisplayText = (name: string) => {
     if (!name) return ""
     return name.length > 2 ? name.substring(name.length - 2) : name
@@ -702,15 +729,58 @@ export const Home: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
           </p>
         </div>
 
-        <Space size="middle">
-          <Input
-            value={searchKeyword}
-            onChange={(e) => setSearchKeyword(e.target.value)}
-            placeholder={t("home.searchPlaceholder")}
-            prefix={<SearchOutlined />}
-            allowClear
-            style={{ width: "220px" }}
-          />
+        <Space size="middle" align="start">
+          <div ref={searchAreaRef} style={{ position: "relative", width: "220px" }}>
+            <Input
+              value={searchKeyword}
+              onChange={(e) => setSearchKeyword(e.target.value)}
+              onFocus={() => setShowPinyinKeyboard(true)}
+              onClick={() => setShowPinyinKeyboard(true)}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") setShowPinyinKeyboard(false)
+              }}
+              placeholder={t("home.searchPlaceholder")}
+              prefix={<SearchOutlined />}
+              allowClear
+              style={{ width: "220px" }}
+            />
+            {showPinyinKeyboard && (
+              <div
+                style={{
+                  position: "absolute",
+                  top: "calc(100% + 8px)",
+                  left: 0,
+                  width: "220px",
+                  padding: "8px",
+                  borderRadius: "10px",
+                  border: "1px solid var(--ss-border-color)",
+                  backgroundColor: "var(--ss-card-bg)",
+                  boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)",
+                  zIndex: 20,
+                }}
+              >
+                <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+                  {pinyinKeyRows.map((row, rowIndex) => (
+                    <div
+                      key={`pinyin-row-${rowIndex}`}
+                      style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "6px" }}
+                    >
+                      {row.map((keyValue) => (
+                        <Button
+                          key={keyValue}
+                          size="small"
+                          onClick={() => handlePinyinKeyPress(keyValue)}
+                          style={{ height: "28px", fontSize: "11px", padding: 0 }}
+                        >
+                          {keyValue}
+                        </Button>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
 
           <Select
             value={sortType}