From b38cdd4bb3e97009cb693dfe50885db2124336fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E7=AB=A5=E5=B4=87?=
 <hetongchong@MacBook-Pro.local>
Date: Thu, 10 Jun 2021 17:05:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9search=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=EF=BC=8C=E5=90=8C=E9=A1=B5=E6=90=9C=E7=B4=A2=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Component/HeadSearch.jsx |  2 +-
 src/modules/search/index.jsx       | 25 ++++++++++++++++++-------
 src/modules/search/index.scss      |  9 ++++++++-
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/forge/Component/HeadSearch.jsx b/src/forge/Component/HeadSearch.jsx
index 08881723..15ba6d44 100644
--- a/src/forge/Component/HeadSearch.jsx
+++ b/src/forge/Component/HeadSearch.jsx
@@ -24,7 +24,7 @@ export default ({history}) => {
               }, 500)
             }}
           >
-            <Search placeholder="请输入项目关键字"
+            <Search placeholder="请输入搜索关键字"
               className={`search-input mr20`}
               onSearch={onGlobalSearch}
               autoFocus={true}
diff --git a/src/modules/search/index.jsx b/src/modules/search/index.jsx
index ee3b40b5..483309d7 100644
--- a/src/modules/search/index.jsx
+++ b/src/modules/search/index.jsx
@@ -36,15 +36,20 @@ const GlobalSearch = ({ location, showNotification, history }) => {
   const [totalType4, setTotalType4] = useState(0);
   const [totalType5, setTotalType5] = useState(0);
 
+  const [ref, setRef] = useState(undefined);
+  const [focus, setFocus] = useState(0);
 
-  useEffect(() => {
-    setTerm(defaultValue);
-  }, defaultValue)
 
   useEffect(() => {
     searchDataList();
   }, [type, page, term, forcesearch]);
 
+  useEffect(() => {
+    if (ref) {
+      ref && ref.input.input.focus();
+    }
+  }, [focus])
+
 
   function searchFun(val) {
     setTerm(val);
@@ -55,7 +60,8 @@ const GlobalSearch = ({ location, showNotification, history }) => {
   function searchDataList() {
     const url = https + '/search';
     if (!term) {
-      showNotification('请输入关键字');
+      // showNotification('请输入关键字');
+      setFocus(focus + 1);
       return;
     }
     axios.defaults.withCredentials = true;
@@ -109,9 +115,12 @@ const GlobalSearch = ({ location, showNotification, history }) => {
   useEffect(() => {
     history.listen(historyLocation => {
       setSearchValue(historyLocation.search.split("=")[1] || "");
+      setTerm(historyLocation.search.split("=")[1] || "");
     })
   }, [history]);
 
+
+
   return (
     <div className="suit-main clearfix">
       <div className="search-head">
@@ -119,14 +128,16 @@ const GlobalSearch = ({ location, showNotification, history }) => {
         <Row className="search-box">
           <Col xs={20} sm={16} lg={13} >
             <Search
-              placeholder="输入关键字进行搜索"
+              placeholder="请输入搜索关键字"
               enterButton="搜索"
               size="large"
               onSearch={searchFun}
-              className="global-search"
+              className={{ 'global-search': true, "required-search": !searchValue }}
               value={searchValue}
               onChange={(e) => { setSearchValue(e.target.value) }}
+              ref={(el) => setRef(el)}
             />
+            {!searchValue && <span className="ant-form-explain">请输入搜索关键字</span>}
           </Col>
         </Row>
       </div>
@@ -232,7 +243,7 @@ const GlobalSearch = ({ location, showNotification, history }) => {
 
     </div>
   );
-  // }
 }
 
+
 export default SnackbarHOC()(TPMIndexHOC(GlobalSearch));
diff --git a/src/modules/search/index.scss b/src/modules/search/index.scss
index 3617ed6f..e3af7834 100644
--- a/src/modules/search/index.scss
+++ b/src/modules/search/index.scss
@@ -7,12 +7,19 @@
     width: 1200px;
     height: 110px;
     margin: 0 auto;
+    .ant-form-explain{
+      color: #f5222d;
+    }
   }
 
   .global-search {
     margin-top: 40px;
   }
-
+  .required-search{
+    .ant-input{
+      border-color: #f5222d !important;
+    }
+  }
   .ant-tabs-top {
     background: #eef2f5;
   }