更新

2022-11-11 14:52:20 +08:00 · 2022-11-11 14:52:20 +08:00 · 5fa0d547af
parent 3f63707fce
commit 5fa0d547af
6 changed files with 59 additions and 70 deletions
--- a/src/App.css
+++ b/src/App.css
@ -72,7 +72,8 @@ body {
 .markdown-body p {
  margin:10px 0px!important;
  font-size: 16px !important;
-  white-space: pre-wrap;
+  /* 用户提出多个徽章换行显示，p标签会换行显示 */
+  /* white-space: pre-wrap; */
 }

 .markdown-body>p {
--- a/src/forge/Component/SiderBar.js
+++ b/src/forge/Component/SiderBar.js
@ -36,7 +36,8 @@ function SiderBar(props) {
    //页面加载完成之后隐藏回到顶点
    $(".-task-sidebar .gotop").hide();
    // 意见反馈弹窗
-    if(search && search.indexOf('feedback') !== -1){
+    if(search && search.indexOf('feedback') !== -1 && search.indexOf('type=feedback') === -1){
+      // 用户已经在issue中反馈，刷新页面不弹出意见反馈
      setFeedBackModal(true)
    }
  },[])
--- a/src/forge/Main/Index.js
+++ b/src/forge/Main/Index.js
@ -19,11 +19,12 @@ const Search = Input.Search;
 class Index extends Component {
  constructor(props) {
    super(props);
+    const searchParams = new URLSearchParams(props.location.search.substring(1));
    this.state = {
      projectsList: undefined,
      page: 1,
      limit: 15,
-      search: undefined,
+      search: searchParams.get('search'),
      sort: undefined,
      total: 0,
      isSpin: true,
@ -125,47 +126,29 @@ class Index extends Component {
    const url = `/projects/group_type_list.json`;
    axios.get(url).then((result) => {
      if (result && result.data) {
-        this.setTypeList(result.data, undefined)
+        this.setState({
+          typeList: result.data
+        })
      }
    }).catch((error) => { })
  }

-  setTypeList = (list, active_type) => {
-    this.setState({
-      typeList: list.map((item, key) => {
-        return (
-          <li key={key} className={active_type && active_type === item.project_type ? 'active' : ''} onClick={() => this.changeType(`${item.project_type}`, list)}>
-            <p>
-              <span className="font-16">{item.name}</span>
-              <span className="color-blue">{item.projects_count}</span>
-            </p>
-          </li>
-        )
-      })
-    })
-  }
-
  // 切换类型
-  changeType = (type, list) => {
+  changeType = (type) => {
    this.setState({
      isSpin: true,
      project_type: type,
-      search: undefined,
-      category_id: undefined,
    },()=>{
-      this.setTypeList(list, type)
-      const { page, limit, sort , languageId } = this.state;
-      this.getListData(page, limit, undefined, sort, type, undefined , languageId);
+      const { page, limit, sort , languageId, search, category_id } = this.state;
+      this.getListData(page, limit, search, sort, type, category_id , languageId);
    })
  }

  // 获取类型
  getCategory = () => {
    const url = `/project_categories/group_list.json`;
-
    axios.get(url).then((result) => {
      if (result && result.data) {
-        
        this.setCategoryList(result.data, undefined);
      }
    }).catch((error) => { })
@ -177,39 +160,40 @@ class Index extends Component {
    })
  }

-  changeCategory = (id, list) => {
+  changeCategory = (id) => {
    this.setState({
      category_id: id,
      page: 1
    },()=>{
-      const { limit, sort, project_type , languageId } = this.state;
-      this.getListData(1, limit, undefined, sort, project_type, id , languageId);
+      const { limit, sort, project_type , languageId, search } = this.state;
+      this.getListData(1, limit, search, sort, project_type, id , languageId);
    });
  }

  // 排序
  ChangeSoryBy = (e) => {
    this.setState({
-      sort_by: e.key,
+      sort: e.key,
      page: 1,
-      search: undefined,
      isSpin: true
    })
-    const { limit, project_type, category_id , languageId } = this.state;
-    this.getListData(1, limit, undefined, e.key, project_type, category_id , languageId);
+    const { limit, search, project_type, category_id , languageId } = this.state;
+    this.getListData(1, limit, search, e.key, project_type, category_id , languageId);
  }

  // 搜索
  searchFun = (value) => {
+    // 用户主动搜索之后，刷新路由，解决用户刷新页面又搜索路由中的内容
+    if(this.props.location.search.indexOf('search') !== -1){
+      this.props.history.push(this.props.location.pathname);
+    }
    this.setState({
      page: 1,
      search: value,
-      isSpin: true,
-      project_type: undefined,
-      sort: "updated_on"
+      isSpin: true
    })
-    const { limit, sort, category_id , languageId } = this.state;
-    this.getListData(1, limit, value, sort, undefined, category_id , languageId);
+    const { limit, sort, category_id , languageId, project_type } = this.state;
+    this.getListData(1, limit, value, sort, project_type, category_id , languageId);
  }
  changeSearchValue = (e) => {
    this.setState({
@ -235,13 +219,14 @@ class Index extends Component {
      isSpin:true,
      languageId:e === 0 ?undefined:e
    })
-    const { page, limit, sort , project_type , category_id } = this.state;
-    this.getListData(page, limit, undefined, sort, project_type, category_id ,e === 0 ?undefined:e);
+    const { page, limit, sort , project_type , category_id, search } = this.state;
+    this.getListData(page, limit, search, sort, project_type, category_id ,e === 0 ?undefined:e);
  }

-  menu =()=> { 
+  menu =()=> {
+    const {sort} = this.state;
    return(
-      <Menu onClick={this.ChangeSoryBy}>
+      <Menu onClick={this.ChangeSoryBy} selectedKeys={[sort]}>
        <Menu.Item key="updated_on">更新时间排序</Menu.Item>
        <Menu.Item key="created_on">创建时间排序</Menu.Item>
        <Menu.Item key="forked_count">fork数量排序</Menu.Item>
@ -275,9 +260,7 @@ class Index extends Component {
  render() {
    const { current_user } = this.props;

-    const { projectsList , recommendList , languageList , languageId , 
-      isSpin, total, search, limit, page, typeList, categoryList , 
-      recommendOriList , CategoryList , category_id } = this.state;
+    const { projectsList , recommendList , languageList , languageId, isSpin, total, search, limit, page, typeList, categoryList, recommendOriList , CategoryList , category_id, project_type } = this.state;

      // const setting={
      //   dots: true,
@ -342,12 +325,21 @@ class Index extends Component {
        } */}
        <div className="ProjectListIndex">
          <div className="list-left">
-            <ul className="list-l-Menu">
-              <li className="MenuTitle"><i className="iconfont icon-xiangmuleixing color-grey-9 font-15 mr5"></i>项目类型</li>
-              {typeList}
+            <ul className="list-l-Menu" style={{padding: 0}}>
+              <li className="MenuTitle" onClick={() => {this.changeType(undefined)}}><i className="iconfont icon-xiangmuleixing color-grey-9 font-15 mr5"></i>项目类型</li>
+              {typeList && typeList.map((item, key) => {
+                return (
+                  <li key={key} className={project_type && project_type === item.project_type ? 'active' : ''} onClick={() => {this.changeType(`${item.project_type}`)}}>
+                    <p>
+                      <span className="font-16">{item.name}</span>
+                      <span className="color-blue">{item.projects_count}</span>
+                    </p>
+                  </li>
+                )
+              })}
            </ul>
-            <ul className="list-l-Menu">
-              <li className="MenuTitle"><i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i>项目类别</li>
+            <ul className="list-l-Menu mt20" style={{padding: 0}}>
+              <li className="MenuTitle" onClick={() => this.changeCategory(undefined)}><i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i>项目类别</li>
              {
                CategoryList && CategoryList.length > 0 ? CategoryList.map((item,key)=>{
                  return(
@ -397,6 +389,7 @@ class Index extends Component {
                    className="list-r-Search"
                    value={search}
                    onChange={this.changeSearchValue}
+                    allowClear
                  />
                </div>
                <div>
@ -410,14 +403,14 @@ class Index extends Component {
                      className="mr50"
                    >
                      <a className="ant-dropdown-link">
-                        <span className="color-blue font-16"><img src={img_new} alt="" width="13px" /> 新建</span>
+                        <span className="color-blue font-16"><i className="iconfont icon-xinjian1 font-14"></i> 新建</span>
                      </a>
                    </Popover>
                  }

                  <Popover content={this.menu()} trigger={['click']} placement='bottom'>
                    <a className="ant-dropdown-link">
-                      <span className="color-blue font-16">排序 <img src={img_array} alt="" width="10px" /></span>
+                      <span className="color-blue font-16">排序 <i className="iconfont icon-sanjiaoxing-down"></i></span>
                    </a>
                  </Popover>
                </div>
--- a/src/forge/Main/IndexItem.js
+++ b/src/forge/Main/IndexItem.js
@ -63,7 +63,7 @@ class IndexItem extends Component {
                    {
                      item.forked_count && item.forked_count>0 ?
                      <span>
-                        <i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork {item.forked_count}
+                        <i className="iconfont icon-fork mr3 font-16 color-blue"/>fork {item.forked_count}
                      </span>:""
                    }
                  </span>
--- a/src/forge/Main/projecthome/Index.jsx
+++ b/src/forge/Main/projecthome/Index.jsx
@ -29,8 +29,8 @@ function Index() {
  useEffect(()=>{
    setIsSpin(true);
    getProject();
-  },[cateID])
-  
+  },[cateID, search])
+
  function getCate() {
    const url = `/project_categories/pinned_index.json`;
    axios.get(url).then(result=>{
@ -40,14 +40,14 @@ function Index() {
    }).catch(error=>{})
  }

-  function getProject(searchValue) {
+  function getProject() {
    const url = `/projects.json`;
    axios.get(url,{
      params:{
        pinned:"d",
        category_id:cateID,
        limit:LIMIT,
-        search:searchValue
+        search:search
      }
    }).then(result=>{
      if(result && result.data){
@ -57,15 +57,10 @@ function Index() {
    }).catch(error=>{})
  }

-  function changeSearchValue(e){
-    setSearch(e.target.value);
+  function searchFun(value){
+    setSearch(value);
  }

-  function searchFun(value){
-    setIsSpin(true);
-    getProject(value);
-  }
-  
  return(
    <div>
      <SubBanner />
@ -94,12 +89,10 @@ function Index() {
                size="middle"
                onSearch={searchFun}
                className="list-r-Search"
-                value={search}
-                onChange={changeSearchValue}
                style={{width:"300px"}}
-                allowClear={true}
+                allowClear
              />
-              <Link to={`/explore/all`} target="_blank">更多<i className="iconfont icon-triangle font-12"></i></Link>
+              <Link to={`/explore/all${search ? '?search='+search : ''}`} target="_blank">更多<i className="iconfont icon-triangle font-12"></i></Link>
            </div>
            <Spin spinning={isSpin}>
              <div style={{minHeight:"400px"}}>
@ -148,7 +141,7 @@ function Index() {
            {
              projectsList && projectsList.length > 0 &&
              <div className="left-bottom-btn">
-                <Link to={`/explore/all`} target="_blank">查看更多开源项目<img src={more} alt="" /></Link>
+                <Link to={`/explore/all${search ? '?search='+search : ''}`} target="_blank">查看更多开源项目<img src={more} alt="" /></Link>
              </div>
            }
          </div>
--- a/src/forge/css/index.scss
+++ b/src/forge/css/index.scss
@ -278,6 +278,7 @@ form{
    line-height: 62px;
    border-bottom: 1px solid #E0E0E0;
    font-weight: 400;
+    cursor: pointer;
  }
  .ant-menu-inline{
    border:none;