Merge pull request #1933 from lxw15337674/feat/search

全局搜索弹窗代码优化
2026-05-14 15:09:22 +00:00 · 2024-03-04 14:38:11 +08:00
parent 07cc48fcc5 8af476f349
commit 80a7a9b2d8
3 changed files with 134 additions and 62 deletions
--- a/components/AlgoliaSearchModal.js
+++ b/components/AlgoliaSearchModal.js
@@ -1,10 +1,11 @@
-import { useState, useImperativeHandle, useRef } from 'react'
+import { useState, useImperativeHandle, useRef, useEffect } from 'react'
 import algoliasearch from 'algoliasearch'
 import replaceSearchResult from '@/components/Mark'
 import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
 import throttle from 'lodash/throttle'
 import { siteConfig } from '@/lib/config'
+import { useHotkeys } from 'react-hotkeys-hook';

 /**
 * 结合 Algolia 实现的弹出式搜索框
@@ -19,7 +20,62 @@ export default function AlgoliaSearchModal({ cRef }) {
  const [totalPage, setTotalPage] = useState(0)
  const [totalHit, setTotalHit] = useState(0)
  const [useTime, setUseTime] = useState(0)
+  const inputRef = useRef(null)
+  const [activeIndex, setActiveIndex] = useState(0)
+  useHotkeys('ctrl+k', (e) => {
+    e.preventDefault()
+    setIsModalOpen(true)
+  })
+  // 方向键调整选中
+  useHotkeys('down', (e) => {
+    e.preventDefault()
+    if (activeIndex < searchResults.length - 1) {
+      setActiveIndex(activeIndex + 1)
+    }
+  }, { enableOnFormTags: true })
+  useHotkeys('up', (e) => {
+    e.preventDefault()
+    if (activeIndex > 0) {
+      setActiveIndex(activeIndex - 1)
+    }
+  }, { enableOnFormTags: true })
+  // esc关闭
+  useHotkeys('esc', (e) => {
+    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) {
+      onJumpSearchResult(index)
+    }
+  }, { enableOnFormTags: true })

+  const resetSearch = () => {
+    setActiveIndex(0)
+    setKeyword('')
+    setSearchResults([])
+    setUseTime(0)
+    setTotalPage(0)
+    setTotalHit(0)
+    if (inputRef.current) inputRef.current.value = ''
+  }
+
+  useEffect(() => {
+    if (isModalOpen) {
+      setTimeout(() => {
+        inputRef.current?.focus()
+      }, 100)
+    } else {
+      resetSearch()
+    }
+  }, [isModalOpen])
  /**
     * 对外暴露方法
     */
@@ -45,6 +101,7 @@ export default function AlgoliaSearchModal({ cRef }) {
    setUseTime(0)
    setTotalPage(0)
    setTotalHit(0)
+    setActiveIndex(0)
    if (!query || query === '') {
      return
    }
@@ -56,7 +113,6 @@ export default function AlgoliaSearchModal({ cRef }) {
      setTotalPage(nbPages)
      setTotalHit(nbHits)
      setSearchResults(hits)
-
      const doms = document.getElementById('search-wrapper').getElementsByClassName('replace')

      setTimeout(() => {
@@ -65,7 +121,7 @@ export default function AlgoliaSearchModal({ cRef }) {
          search: query,
          target: {
            element: 'span',
-            className: 'text-blue-600 border-b border-dashed'
+            className: 'font-bold border-b border-dashed'
          }
        })
      }, 200) // 延时高亮
@@ -75,8 +131,8 @@ export default function AlgoliaSearchModal({ cRef }) {
  }

  // 定义节流函数，确保在用户停止输入一段时间后才会调用处理搜索的方法
-  const throttledHandleInputChange = useRef(throttle((query) => {
-    handleSearch(query, 0);
+  const throttledHandleInputChange = useRef(throttle((query, page = 0) => {
+    handleSearch(query, page);
  }, 1000));

  // 用于存储搜索延迟的计时器
@@ -115,19 +171,16 @@ export default function AlgoliaSearchModal({ cRef }) {
  if (!siteConfig('ALGOLIA_APP_ID')) {
    return <></>
  }
-
  return (
    <div
      id="search-wrapper"
-      className={`${
-        isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none'
-      } z-30 fixed h-screen w-screen left-0 top-0 mt-12 flex items-start justify-center`}
+      className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none'
+        } z-30 fixed h-screen w-screen left-0 top-0 mt-12 flex items-start justify-center`}
    >
      {/* 模态框 */}
      <div
-        className={`${
-          isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10'
-        } flex flex-col justify-between w-full min-h-[10rem] max-w-xl dark:bg-hexo-black-gray dark:border-gray-800 bg-white dark:bg- p-5 rounded-lg z-50 shadow border hover:border-blue-600 duration-300 transition-all `}
+        className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10'
+          } flex flex-col justify-between w-full min-h-[10rem] max-w-xl dark:bg-hexo-black-gray dark:border-gray-800 bg-white dark:bg- p-5 rounded-lg z-50 shadow border hover:border-blue-600 duration-300 transition-all `}
      >
        <div className="flex justify-between items-center">
          <div className="text-2xl text-blue-600 font-bold">搜索</div>
@@ -144,39 +197,53 @@ export default function AlgoliaSearchModal({ cRef }) {
          placeholder="在这里输入搜索关键词..."
          onChange={e => handleInputChange(e)}
          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}
        />

        {/* 标签组 */}
        <div className="mb-4">
          <TagGroups />
        </div>
-
+        {
+          searchResults.length === 0 && keyword && (
+            <div>
+              <p className="  text-slate-600 text-center my-4 text-base"> 无法找到相关结果
+                <span
+                  className='font-semibold'
+                >&quot;{keyword}&quot;</span></p>
+            </div>
+          )
+        }
        <ul>
-          {searchResults.map(result => (
-            <li key={result.objectID} className="replace my-2">
+          {searchResults.map((result, index) => (
+            <li key={result.objectID}
+              onMouseEnter={() => setActiveIndex(index)}
+              onClick={() => onJumpSearchResult(index)}
+              className={`cursor-pointer replace my-2 p-2 duration-100 ${activeIndex === index ? 'bg-blue-600 ' : ''}`}>
              <a
-                href={`${siteConfig('SUB_PATH', '')}/${result.slug}`}
-                className="font-bold hover:text-blue-600 text-black dark:text-gray-200"
+                className={`${activeIndex === index ? ' text-white' : ' text-black '}`}
              >
                {result.title}
              </a>
            </li>
          ))}
        </ul>
-
        <Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
-        <div>
-          {totalHit > 0 && (
-            <div>
-              共搜索到 {totalHit} 条结果，用时 {useTime} 毫秒
-            </div>
-          )}
-        </div>
-        <div className="text-gray-600 mt-2">
-          <span>
-            <i className="fa-brands fa-algolia"></i> Algolia 提供搜索服务
-          </span>{' '}
+        <div className='flex items-center justify-between mt-2 text-sm '>
+          <div>
+            {totalHit > 0 && (
+              <p>
+                共搜索到 {totalHit} 条结果，用时 {useTime} 毫秒
+              </p>
+            )}
+          </div>
+          <div className="text-gray-600  text-right">
+            <span >
+              <i className="fa-brands fa-algolia"></i> Algolia 提供搜索服务
+            </span>
+          </div>
        </div>
+
      </div>

      {/* 遮罩 */}
@@ -191,26 +258,26 @@ export default function AlgoliaSearchModal({ cRef }) {
 /**
 * 标签组
 */
-function TagGroups(props) {
+function TagGroups() {
  const { tagOptions } = useGlobal()
  //  获取tagOptions数组前十个
  const firstTenTags = tagOptions?.slice(0, 10)

  return <div id='tags-group' className='dark:border-gray-700 space-y-2'>
-            {
-                firstTenTags?.map((tag, index) => {
-                  return <Link passHref
-                        key={index}
-                        href={`/tag/${encodeURIComponent(tag.name)}`}
-                        className={'cursor-pointer inline-block whitespace-nowrap'}>
-                        <div className={' flex items-center text-black dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-yellow-600 hover:scale-110 hover:text-white rounded-lg px-2 py-0.5 duration-150 transition-all'}>
-                            <div className='text-lg'>{tag.name} </div>{tag.count ? <sup className='relative ml-1'>{tag.count}</sup> : <></>}
-                        </div>
+    {
+      firstTenTags?.map((tag, index) => {
+        return <Link passHref
+          key={index}
+          href={`/tag/${encodeURIComponent(tag.name)}`}
+          className={'cursor-pointer inline-block whitespace-nowrap'}>
+          <div className={' flex items-center text-black dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-yellow-600 hover:scale-110 hover:text-white rounded-lg px-2 py-0.5 duration-150 transition-all'}>
+            <div className='text-lg'>{tag.name} </div>{tag.count ? <sup className='relative ml-1'>{tag.count}</sup> : <></>}
+          </div>

-                    </Link>
-                })
-            }
-        </div>
+        </Link>
+      })
+    }
+  </div>
 }

 /**
@@ -222,24 +289,23 @@ function Pagination(props) {
  if (totalPage <= 0) {
    return <></>
  }
-  const pagesElement = []
+  return (
+    <div className='flex space-x-1 w-full justify-center py-1'>
+      {Array.from({ length: totalPage }, (_, i) => {
+        const classNames = page === i
+          ? 'font-bold text-white bg-blue-600 rounded'
+          : 'hover:text-blue-600 hover:font-bold'

-  for (let i = 0; i < totalPage; i++) {
-    const selected = page === i
-    pagesElement.push(getPageElement(i, selected, switchPage))
-  }
-  return <div className='flex space-x-1 w-full justify-center py-1'>
-        {pagesElement.map(p => p)}
-  </div>
-}
-
-/**
- * 获取分页按钮
- * @param {*} i
- * @param {*} selected
- */
-function getPageElement(i, selected, switchPage) {
-  return <div onClick={() => switchPage(i)} className={`${selected ? 'font-bold text-white bg-blue-600 rounded' : 'hover:text-blue-600 hover:font-bold'} text-center cursor-pointer  w-6 h-6 `}>
-    {i + 1}
-  </div>
+        return (
+          <div
+            onClick={() => switchPage(i)}
+            className={`text-center cursor-pointer w-6 h-6 ${classNames}`}
+            key={i}
+          >
+            {i + 1}
+          </div>
+        )
+      })}
+    </div>
+  )
 }
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-facebook": "^8.1.4",
+        "react-hotkeys-hook": "^4.5.0",
        "react-notion-x": "6.16.0",
        "react-share": "^4.4.1",
        "react-tweet-embed": "~2.0.0",
--- a/yarn.lock
+++ b/yarn.lock
@@ -4219,6 +4219,11 @@ react-hotkeys-hook@^3.0.3:
  dependencies:
    hotkeys-js "3.9.4"

+react-hotkeys-hook@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz#807b389b15256daf6a813a1ec09e6698064fe97f"
+  integrity sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==
+
 react-image@^4.0.3:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/react-image/-/react-image-4.1.0.tgz#92f2d4a809a178b3bf69acd7bad7da7aa5e7364c"