Hexo主题 微调

themes/Hexo/components/SearchInput.js

@@ -1,8 +1,9 @@
 import { useRouter } from 'next/router'
 import { useImperativeHandle, useRef, useState } from 'react'
+let lock = false
 
-const SearchInput = ({ currentTag, currentSearch, cRef }) => {
-  const [searchKey, setSearchKey] = useState(currentSearch || '')
+const SearchInput = (props) => {
+  const { currentSearch, cRef, className } = props
   const [onLoading, setLoadingState] = useState(false)
   const router = useRouter()
   const searchInputRef = useRef()
@@ -13,12 +14,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
       }
     }
   })
-  const handleSearch = (key) => {
+
+  const handleSearch = () => {
+    const key = searchInputRef.current.value
     if (key && key !== '') {
       setLoadingState(true)
-      router.push({ pathname: '/search', query: { s: key } }).then(r => {
-        setLoadingState(false)
-      })
+      location.href = '/search/' + key
     } else {
       router.push({ pathname: '/' }).then(r => {
       })
@@ -33,12 +34,19 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
   }
   const cleanSearch = () => {
     searchInputRef.current.value = ''
-    setSearchKey('')
   }
-  let lock = false
+
+  const [showClean, setShowClean] = useState(false)
   const updateSearchKey = (val) => {
-    if (!lock) {
-      setSearchKey(val)
+    if (lock) {
+      return
+    }
+    searchInputRef.current.value = val
+
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
     }
   }
   function lockSearchInput () {
@@ -48,8 +56,9 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
   function unLockSearchInput () {
     lock = false
   }
-  return <div className='flex'>
-    <input
+
+  return <div className={'flex w-full bg-gray-100 ' + className}>
+     <input
       ref={searchInputRef}
       type='text'
       className={'w-full rounded-lg text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'}
@@ -61,12 +70,12 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
       defaultValue={currentSearch}
     />
 
-    <div className='-ml-8 cursor-pointer  float-right items-center justify-center py-2'
-      onClick={() => { handleSearch(searchKey) }}>
+     <div className='-ml-8 cursor-pointer  float-right items-center justify-center py-2'
+      onClick={handleSearch}>
         <i className={`hover:text-black transform duration-200 text-gray-500 dark:text-gray-200 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
-    </div>
+     </div>
 
-    {(searchKey && searchKey.length &&
+     {(showClean &&
       <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
         <i className='hover:text-black transform duration-200 text-gray-400 dark:text-gray-300 cursor-pointer fas fa-times' onClick={cleanSearch} />
       </div>