From 5ee3519c2175755ac89655ac350220ca85ee5d01 Mon Sep 17 00:00:00 2001
From: caishi <1149225589@qq.com>
Date: Wed, 8 Dec 2021 10:11:13 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E9=A6=96=E9=A1=B5=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Main/projecthome/Index.jsx  | 31 ++++++++++++++++++++++++---
 src/forge/Main/projecthome/Index.scss | 10 ++++++++-
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/forge/Main/projecthome/Index.jsx b/src/forge/Main/projecthome/Index.jsx
index 3d214010..3b56b455 100644
--- a/src/forge/Main/projecthome/Index.jsx
+++ b/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){
@@ -52,6 +56,15 @@ function Index() {
       }
     }).catch(error=>{})
   }
+
+  function changeSearchValue(e){
+    setSearch(e.target.value);
+  }
+
+  function searchFun(value){
+    setIsSpin(true);
+    getProject(value);
+  }
   
   return(
     <div>
@@ -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}>
diff --git a/src/forge/Main/projecthome/Index.scss b/src/forge/Main/projecthome/Index.scss
index 80742234..fd4b604e 100644
--- a/src/forge/Main/projecthome/Index.scss
+++ b/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;