项目首页增加搜索功能

src/forge/Main/projecthome/Index.jsx

@@ -4,18 +4,21 @@ import SubBanner from './SubBanner';
 import SubUnitBanner from './SubUnitBanner';
 import Icon from '../img/index/icon.png';
 import { Link } from 'react-router-dom';
-import { Spin } from 'antd';
+import { Spin , Input } from 'antd';
 import SubList from './SubList';
 import more from '../img/index/more.png';
 import axios from 'axios';
 import { getImageUrl } from 'educoder';
 import Nodata from '../../Nodata';
 
+const { Search } = Input;
+
 const LIMIT = 20;
 function Index() {
 
   const [ cateList , setCateList ] = useState(undefined);
   const [ projectsList , setProjectsList ] = useState(undefined);
+  const [ search , setSearch ] = useState(undefined);
   const [ cateID, setCateID ] = useState(undefined);
   const [ isSpin, setIsSpin ] = useState(true);
 
@@ -37,13 +40,14 @@ function Index() {
     }).catch(error=>{})
   }
 
-  function getProject() {
+  function getProject(searchValue) {
     const url = `/projects.json`;
     axios.get(url,{
       params:{
         pinned:"d",
         category_id:cateID,
-        limit:LIMIT
+        limit:LIMIT,
+        search:searchValue
       }
     }).then(result=>{
       if(result && result.data){
@@ -53,6 +57,15 @@ function Index() {
     }).catch(error=>{})
   }
 
+  function changeSearchValue(e){
+    setSearch(e.target.value);
+  }
+
+  function searchFun(value){
+    setIsSpin(true);
+    getProject(value);
+  }
+  
   return(
     <div>
       <SubBanner />
@@ -74,6 +87,18 @@ function Index() {
           <div className="leftLists">
             <div className="leftTitles">
               <span>开源项目</span>
+
+              <Search
+                placeholder="输入项目名称关键字进行搜索"
+                enterButton="搜索"
+                size="middle"
+                onSearch={searchFun}
+                className="list-r-Search"
+                value={search}
+                onChange={changeSearchValue}
+                style={{width:"300px"}}
+                allowClear={true}
+              />
               <Link to={`/explore/all`} target="_blank">更多<i className="iconfont icon-triangle font-12"></i></Link>
             </div>
             <Spin spinning={isSpin}>

src/forge/Main/projecthome/Index.scss

@@ -350,7 +350,15 @@
         justify-content: space-between;
         border-bottom: 1px solid rgba(153, 153, 153, 0.16);
         padding:0px 20px;
-        span{
+        .ant-btn-primary{
+          background-color: #466AFF;
+          border-color: #466AFF;
+          &:hover,&:active{
+            background-color: rgba(70,106,255,0.8);
+            border-color: rgba(70,106,255,0.8);
+          }
+        }
+        &>span{
           font-size: 18px;
           font-weight: 500;
           color: #000000;