Merge pull request #2141 from lxw15337674/feat/SearchModal

全局搜索弹窗夜间模式样式优化、移动端自适应。

Author: tangly1024

components/AlgoliaSearchModal.js

@@ -22,6 +22,7 @@ export default function AlgoliaSearchModal({ cRef }) {
   const [useTime, setUseTime] = useState(0)
   const inputRef = useRef(null)
   const [activeIndex, setActiveIndex] = useState(0)
+  const [isLoading, setIsLoading] = useState(false)
   useHotkeys('ctrl+k', (e) => {
     e.preventDefault()
     setIsModalOpen(true)
@@ -105,14 +106,15 @@ export default function AlgoliaSearchModal({ cRef }) {
     if (!query || query === '') {
       return
     }
-
+    setIsLoading(true)
     try {
       const res = await index.search(query, { page, hitsPerPage: 10 })
       const { hits, nbHits, nbPages, processingTimeMS } = res
       setUseTime(processingTimeMS)
       setTotalPage(nbPages)
       setTotalHit(nbHits)
       setSearchResults(hits)
+      setIsLoading(false)
       const doms = document.getElementById('search-wrapper').getElementsByClassName('replace')
 
       setTimeout(() => {
@@ -175,12 +177,12 @@ export default function AlgoliaSearchModal({ cRef }) {
     <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`}
+        } z-30 fixed h-screen w-screen left-0 top-0 sm:mt-12 flex items-start justify-center mt-0`}
     >
       {/* 模态框 */}
       <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 `}
+          } flex flex-col justify-between w-full min-h-[10rem] h-full md:h-fit 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 dark:text-yellow-600 font-bold">搜索</div>
@@ -205,21 +207,23 @@ export default function AlgoliaSearchModal({ cRef }) {
           <TagGroups />
         </div>
         {
-          searchResults.length === 0 && keyword && (
+          searchResults.length === 0 && keyword && !isLoading && (
             <div>
-              <p className="  text-slate-600 text-center my-4 text-base"> 无法找到相关结果
+              <p className=" text-slate-600 text-center my-4 text-base"> 无法找到相关结果
                 <span
                   className='font-semibold'
                 >&quot;{keyword}&quot;</span></p>
             </div>
           )
         }
-        <ul>
+        <ul className='flex-1 overflow-auto'>
           {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 dark:bg-yellow-600' : ''}`}>
+              className={`cursor-pointer replace my-2 p-2 duration-100 
+              rounded-lg
+              ${activeIndex === index ? 'bg-blue-600 dark:bg-yellow-600' : ''}`}>
               <a
                 className={`${activeIndex === index ? ' text-white' : ' text-black dark:text-gray-300 '}`}
               >
@@ -229,15 +233,15 @@ export default function AlgoliaSearchModal({ cRef }) {
           ))}
         </ul>
         <Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
-        <div className='flex items-center justify-between mt-2 text-sm dark:text-gray-300'>
+        <div className='flex items-center justify-between mt-2 sm:text-sm text-xs dark:text-gray-300'>
           <div>
             {totalHit > 0 && (
               <p>
                 共搜索到 {totalHit} 条结果，用时 {useTime} 毫秒
               </p>
             )}
           </div>
-          <div className="text-gray-600  text-right">
+          <div className="text-gray-600 dark:text-gray-300  text-right">
             <span >
               <i className="fa-brands fa-algolia"></i> Algolia 提供搜索服务
             </span>
@@ -294,7 +298,7 @@ function Pagination(props) {
       {Array.from({ length: totalPage }, (_, i) => {
         const classNames = page === i
           ? 'font-bold text-white bg-blue-600 dark:bg-yellow-600 rounded'
-          : 'hover:text-blue-600 hover:font-bold'
+          : 'hover:text-blue-600 hover:font-bold dark:text-gray-300'
 
         return (
           <div