From 3cb42c5ea94ee2e3e0e624443615c2f1bb56c3de Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 4 Nov 2021 13:56:48 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=90=9C=E7=B4=A2=E6=A1=86=EF=BC=8C?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E7=A9=BA=E7=99=BD=E9=A1=B5=E9=9D=A2bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BlogPostListEmpty.js |  2 +-
 components/SearchInput.js       | 31 ++++++++++++++++++++++---------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/components/BlogPostListEmpty.js b/components/BlogPostListEmpty.js
index d40f51db..0cca9919 100644
--- a/components/BlogPostListEmpty.js
+++ b/components/BlogPostListEmpty.js
@@ -15,7 +15,7 @@ const BlogPostListEmpty = () => {
       })
     }, 3000)
   })
-  return <div className='w-full h-full flex justify-center mx-auto'>
+  return <div className='w-full h-full min-h-screen flex justify-center mx-auto'>
       <div className='align-middle text-center my-auto'>
         <p className='text-gray-500 dark:text-gray-300'>没有文章了，3秒后返回首页</p>
       </div>
diff --git a/components/SearchInput.js b/components/SearchInput.js
index e01b6a6a..0a64363c 100644
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -1,14 +1,15 @@
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 
 const SearchInput = ({ currentTag, currentSearch }) => {
   const { locale } = useGlobal()
   const [searchKey, setSearchKey] = useState(currentSearch)
   const router = useRouter()
-  const handleSearch = () => {
-    if (searchKey && searchKey !== '') {
-      router.push({ pathname: '/search', query: { s: searchKey } }).then(r => {
+  const searchInputRef = useRef()
+  const handleSearch = (key) => {
+    if (key && key !== '') {
+      router.push({ pathname: '/search', query: { s: key } }).then(r => {
       })
     } else {
       router.push({ pathname: '/' }).then(r => {
@@ -17,22 +18,34 @@ const SearchInput = ({ currentTag, currentSearch }) => {
   }
   const handleKeyUp = (e) => {
     if (e.keyCode === 13) {
-      handleSearch()
+      handleSearch(searchInputRef.current.value)
     }
   }
+  const cleanSearch = () => {
+    searchInputRef.current.value = ''
+    setSearchKey('')
+  }
+
+  const updateSearchKey = (val) => {
+    setSearchKey(val)
+  }
 
   return <div className='flex border dark:border-gray-600 w-full'>
     <input
+      id='searchInput'
+      ref={searchInputRef}
       type='text'
       placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
       className={'pl-2 w-full transition duration-200 leading-10 border-gray-300 bg-white text-black dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
-      onChange={e => setSearchKey(e.target.value)}
+      onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}
     />
-    <div className='py-3 px-5 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
-         onClick={handleSearch}>
-      <i className='fa fa-search text-black absolute cursor-pointer' />
+    { (searchKey && searchKey.length && <i className='fa fa-close text-gray-300 float-right p-3 cursor-pointer' onClick={ cleanSearch } />)}
+
+    <div className='py-3 px-4 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
+         onClick={() => { handleSearch(searchKey) }}>
+      <i className='fa fa-search text-black cursor-pointer' />
     </div>
   </div>
 }