Change Index Page

src/AppConfig.js

@@ -65,7 +65,7 @@ export function initAxiosInterceptors(props) {
   // TODO 避免重复的请求 https://github.com/axios/axios#cancellation
   var 
   proxy = "http://localhost:3000"
-  proxy = "https://testforgeplus.trustie.net"
+  // proxy = "https://testforgeplus.trustie.net"
 
   const requestMap = {};
   window.setfalseInRequestMap = function (keyName) {

src/forge/Main/Index.js

@@ -1,12 +1,13 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { Menu, Input , Spin, Pagination , Popover } from 'antd';
-import '../css/index.scss'
-import './list.css';
-import ListItem from './IndexItem'
-import axios from 'axios';
-import img_new from '../Images/new.png';
-import img_array from '../Images/array.png';
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Menu, Input, Spin, Pagination, Popover, Affix } from "antd";
+import "../css/index.scss";
+import "./list.css";
+import ListItem from "./IndexItem";
+import axios from "axios";
+import img_new from "../Images/new.png";
+import img_array from "../Images/array.png";
+import banner_list from "../Images/banner_list.png";
 
 const Search = Input.Search;
 
@@ -23,119 +24,247 @@ class Index extends Component {
       isSpin: true,
       project_type: undefined,
       category_id: undefined,
+      language_id: undefined,
 
       typeList: undefined,
-      categoryList: undefined
-    }
-
+      categoryList: undefined,
+      languageSpin: false,
+      categorySPin: false,
+      menu_active_id: undefined,
+    };
   }
 
   componentDidMount = () => {
-    const { page, limit, search, sort, project_type, category_id } = this.state;
-    this.getListData(page, limit, search, sort, project_type, category_id);
+    const {
+      page,
+      limit,
+      search,
+      sort,
+      project_type,
+      category_id,
+      language_id,
+    } = this.state;
+    this.getListData(
+      page,
+      limit,
+      search,
+      sort,
+      project_type,
+      category_id,
+      language_id
+    );
 
     this.getType();
 
     this.getCategory();
-  }
+  };
 
   // 获取列表
-  getListData = (page, limit, search, sort, project_type, category_id) => {
+  getListData = (
+    page,
+    limit,
+    search,
+    sort,
+    project_type,
+    category_id,
+    language_id
+  ) => {
     const { current_user } = this.props;
     const url = `/projects.json`;
-    axios.get(url, {
-      params: {
-        user_id: current_user && current_user.user_id,
-        page,
-        limit,
-        search,
-        sort_by: sort,
-        project_type,
-        category_id
-      }
-    }).then((result) => {
-      if (result) {
-        this.setState({
-          projectsList: result.data.projects,
-          total: result.data.total_count,
-          isSpin: false
-        })
-      }
-    }).catch((error) => { })
-  }
+    axios
+      .get(url, {
+        params: {
+          user_id: current_user && current_user.user_id,
+          page,
+          limit,
+          search,
+          sort_by: sort,
+          category_id,
+          language_id,
+        },
+      })
+      .then((result) => {
+        if (result) {
+          this.setState({
+            projectsList: result.data.projects,
+            total: result.data.total_count,
+            isSpin: false,
+          });
+        }
+      })
+      .catch((error) => {});
+  };
 
   // 获取类型
   getType = () => {
+    this.setState({ languageSpin: true });
     const url = `/projects/group_type_list.json`;
-    axios.get(url).then((result) => {
-      if (result && result.data) {
-        this.setTypeList(result.data, undefined)
-      }
-    }).catch((error) => { })
-  }
+    axios
+      .get(url)
+      .then((result) => {
+        if (result && result.data) {
+          this.setTypeList(result.data, undefined);
+          this.setState({ languageSpin: false });
+        }
+      })
+      .catch((error) => {
+        this.setState({ languageSpin: false });
+      });
+  };
 
   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)}>
+          <li
+            key={key}
+            className={
+              active_type && parseInt(active_type) === parseInt(item.id)
+                ? "active"
+                : ""
+            }
+            onClick={() => this.changeType(`${item.id}`, list)}
+          >
             <p>
               <span className="font-16">{item.name}</span>
               <span className="color-blue">{item.projects_count}</span>
             </p>
           </li>
-        )
-      })
-    })
-  }
+        );
+      }),
+    });
+  };
 
   // 切换类型
   changeType = (type, list) => {
+    const { page, limit, sort, category_id, language_id } = this.state;
+    let new_language_id = type;
+    if (parseInt(language_id) === parseInt(new_language_id)) {
+      new_language_id = undefined;
+    }
     this.setState({
       isSpin: true,
-      project_type: type,
-      search: undefined
-    })
-    this.setTypeList(list, type)
-    const { page, limit, sort, category_id } = this.state;
-    this.getListData(page, limit, undefined, sort, type, category_id);
-  }
+      language_id: new_language_id,
+      search: undefined,
+    });
+    this.setTypeList(list, new_language_id);
+    // const { page, limit, sort, category_id, language_id } = this.state;
+    this.getListData(
+      page,
+      limit,
+      undefined,
+      sort,
+      undefined,
+      category_id,
+      new_language_id
+    );
+  };
 
   // 获取类型
   getCategory = () => {
+    this.setState({ categorySpin: true });
     const url = `/project_categories/group_list.json`;
 
-    axios.get(url).then((result) => {
-      if (result && result.data) {
-        this.setCategoryList(result.data, undefined);
-      }
-    }).catch((error) => { })
-  }
+    axios
+      .get(url)
+      .then((result) => {
+        if (result && result.data) {
+          this.setCategoryList(result.data, undefined);
+          this.setState({ categorySpin: false });
+        }
+      })
+      .catch((error) => {
+        this.setState({ categorySpin: false });
+      });
+  };
+  children_category = (childrens, list, active_id) => {
+    return (
+      <div className="category-popver-content">
+        {childrens.map((item, key) => {
+          return (
+            <div
+              key={key}
+              onClick={() => this.changeCategory(item.id, list, item.parent_id)}
+              className={
+                active_id && parseInt(active_id) === item.id
+                  ? "active category-popver"
+                  : "category-popver"
+              }
+            >
+              {item.name}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
 
-  setCategoryList = (list, active_id) => {
+  setCategoryList = (list, active_id, children_active_id = undefined) => {
     this.setState({
       categoryList: list.map((item, key) => {
         return (
-          <li key={key} className={active_id && parseInt(active_id) === item.id ? 'active' : ''} onClick={() => this.changeCategory(`${item.id}`, list)}>
-            <p>
-              <span className="font-16">{item.name}</span>
-              <span className="color-blue">{item.projects_count}</span>
-            </p>
+          <li
+            key={key}
+            className={
+              active_id && parseInt(active_id) === item.id ? "active" : ""
+            }
+          >
+            {item.children && item.children.length > 0 ? (
+              <Popover
+                content={this.children_category(
+                  item.children,
+                  list,
+                  children_active_id
+                )}
+                placement="right"
+                trigger="click"
+              >
+                <p>
+                  <span className="font-16">{item.name}</span>
+                  <i className="iconfont icon-youjiantou color-grey-9 font-12 ml5"></i>
+                  {/* <span className="color-blue">{item.projects_count}</span> */}
+                </p>
+              </Popover>
+            ) : (
+              <p onClick={() => this.changeCategory(`${item.id}`, list)}>
+                <span className="font-16">{item.name}</span>
+                <span></span>
+                {/* <span className="color-blue">{item.projects_count}</span> */}
+              </p>
+            )}
           </li>
-        )
-      })
-    })
-  }
-
-  changeCategory = (id, list) => {
-    this.setState({
-      category_id: id,
-      page: 1
+        );
+      }),
     });
-    this.setCategoryList(list, id)
-    const { limit, sort, project_type } = this.state;
-    this.getListData(1, limit, undefined, sort, project_type, id);
-  }
+  };
+
+  changeCategory = (id, list, parent_id = undefined) => {
+    const { limit, sort, category_id, language_id } = this.state;
+    let new_category_id = id;
+    if (parseInt(category_id) === parseInt(new_category_id)) {
+      new_category_id = undefined;
+    }
+    this.setState({
+      category_id: new_category_id,
+      page: 1,
+      search: undefined,
+      menu_active_id: new_category_id,
+    });
+    let active_id = parent_id ? parent_id : new_category_id;
+    let children_active_id = parent_id ? id : undefined;
+
+    this.setCategoryList(list, active_id, children_active_id);
+
+    this.getListData(
+      1,
+      limit,
+      undefined,
+      sort,
+      undefined,
+      new_category_id,
+      language_id
+    );
+  };
 
   // 排序
   ChangeSoryBy = (e) => {
@@ -143,11 +272,11 @@ class Index extends Component {
       sort_by: e.key,
       page: 1,
       search: undefined,
-      isSpin: true
-    })
+      isSpin: true,
+    });
     const { limit, project_type, category_id } = this.state;
     this.getListData(1, limit, undefined, e.key, project_type, category_id);
-  }
+  };
 
   // 搜索
   searchFun = (value) => {
@@ -156,24 +285,24 @@ class Index extends Component {
       search: value,
       isSpin: true,
       project_type: undefined,
-      sort: "updated_on"
-    })
+      sort: "updated_on",
+    });
     const { limit, sort, category_id } = this.state;
     this.getListData(1, limit, value, sort, undefined, category_id);
-  }
+  };
   changeSearchValue = (e) => {
     this.setState({
-      search: e.target.value
-    })
-  }
+      search: e.target.value,
+    });
+  };
   // 翻页
   ChangePage = (page) => {
     this.setState({
-      page
-    })
+      page,
+    });
     const { limit, search, sort, project_type, category_id } = this.state;
     this.getListData(page, limit, search, sort, project_type, category_id);
-  }
+  };
 
   render() {
     const { current_user } = this.props;
@@ -184,37 +313,78 @@ class Index extends Component {
         <Menu.Item key="forked_count">fork数据排序</Menu.Item>
         <Menu.Item key="praises_count">点赞数量排序</Menu.Item>
       </Menu>
-    )
+    );
     const newItem = (
       <Menu>
-        <Menu.Item key="created_mirror"><Link to={`/projects/mirror/new`}>新建镜像项目</Link></Menu.Item>
-        <Menu.Item key="created_deposit"><Link to={`/projects/deposit/new`}>新建托管项目</Link></Menu.Item>
+        <Menu.Item key="created_mirror">
+          <Link to={`/projects/mirror/new`}>新建镜像项目</Link>
+        </Menu.Item>
+        <Menu.Item key="created_deposit">
+          <Link to={`/projects/deposit/new`}>新建托管项目</Link>
+        </Menu.Item>
       </Menu>
-    )
+    );
 
-    const { projectsList, isSpin, total, search, limit, page, typeList, categoryList } = this.state;
+    const {
+      projectsList,
+      isSpin,
+      total,
+      search,
+      limit,
+      page,
+      typeList,
+      categoryList,
+      languageSpin,
+      categorySpin,
+    } = this.state;
 
-    const pagination = (
-      total && total > limit ?
+    const pagination =
+      total && total > limit ? (
         <div className="edu-txt-center pt30 mb30 border-top-grey">
-          <Pagination simple defaultCurrent={page} total={total} pageSize={limit} onChange={this.ChangePage}></Pagination>
-        </div> : ""
-    )
+          <Pagination
+            simple
+            defaultCurrent={page}
+            total={total}
+            pageSize={limit}
+            onChange={this.ChangePage}
+          ></Pagination>
+        </div>
+      ) : (
+        ""
+      );
     return (
       <div>
+        <div className="banner_list_img">
+          <img src={banner_list}></img>
+        </div>
         <p className="t_project_banner"></p>
         <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>
-            <ul className="list-l-Menu">
-              <li className="MenuTitle"><i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i>项目类别</li>
-              {categoryList}
-            </ul>
+            <Affix offsetTop={5}>
+              <Spin spinning={languageSpin}>
+                <ul className="list-l-Menu">
+                  <li className="MenuTitle">
+                    <i className="iconfont icon-bianchengyuyan color-grey-9 font-15 mr5"></i>
+                    语言
+                  </li>
+                  {typeList}
+                </ul>
+              </Spin>
+              <Spin spinning={categorySpin}>
+                <ul className="list-l-Menu">
+                  <li className="MenuTitle">
+                    <i className="iconfont icon-xiangmuleibie color-grey-9 font-15 mr5"></i>
+                    项目类别
+                  </li>
+                  {categoryList}
+                </ul>
+              </Spin>
+            </Affix>
           </div>
-          <div className="list-right boxShandow radius-2" style={{padding:0}}>
+          <div
+            className="list-right boxShandow radius-2"
+            style={{ padding: 0 }}
+          >
             <Spin spinning={isSpin}>
               <div className="list-r-operation">
                 <Search
@@ -227,29 +397,45 @@ class Index extends Component {
                   onChange={this.changeSearchValue}
                 />
                 <div>
-                  {
-                    current_user && current_user.login &&
-                    <Popover content={newItem} trigger={["click"]} placement='bottom' className="mr50">
+                  {current_user && current_user.login && (
+                    <Popover
+                      content={newItem}
+                      trigger={["click"]}
+                      placement="bottom"
+                      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">
+                          <img src={img_new} alt="" width="13px" /> 新建
+                        </span>
                       </a>
                     </Popover>
-                  }
+                  )}
 
-                  <Popover content={menu} trigger={['click']} placement='bottom'>
+                  <Popover
+                    content={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">
+                        排序 <img src={img_array} alt="" width="10px" />
+                      </span>
                     </a>
                   </Popover>
                 </div>
               </div>
-              <ListItem {...this.props} {...this.state} projects={projectsList}></ListItem>
+              <ListItem
+                {...this.props}
+                {...this.state}
+                projects={projectsList}
+              ></ListItem>
               {pagination}
             </Spin>
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 export default Index;

src/forge/Main/list.css

@@ -1,9 +1,17 @@
 
 .lineH2{line-height:2}
-.t_project_banner {
+/* .t_project_banner {
   height: 260px;
   background: url(../Images/banner_list.png) no-repeat center;
   background-color: #050d34;
+} */
+.banner_list_img{
+  max-height: 260px;
+}
+.banner_list_img img{
+  width: 100%;
+  height: 100%;
+
 }
 .ProjectListIndex{
   width: 1200px;
@@ -47,7 +55,7 @@
   flex-wrap: wrap;
   align-items: center;
   padding:25px 30px; 
-  border-bottom: 1px solid #E0E0E0;
+  border-bottom: 1px solid #eeeeee;
 }
 .list-r-Search{
   width: 400px;

src/forge/css/index.scss

@@ -3,7 +3,7 @@ ul,ol,dl{
 }
 /* #EAEBEC */
 .newMain{
-  background-color: #EAEBEC;
+  background-color: #fafafa;
 }
 .main{
   width: 1200px;
@@ -136,18 +136,41 @@ form{
   vertical-align: middle;
 }
 .pd510{padding: 5px 10px;}
-
+.list-l-Menu::-webkit-scrollbar,  .category-popver-content::-webkit-scrollbar { width: 0 !important }
+.category-popver{
+font-size: 14px;
+color: #333333;
+padding: 10px 16px;
+cursor: pointer;
+}
+.category-popver:hover, .category-popver.active{
+  background-color: #f8f8f8;
+}
+.category-popver-content{
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
+  max-height: 600px;
+  overflow-y: auto;
+}
 .list-l-Menu{
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
   margin-bottom: 12px;
   border-radius:2px;
-  border:1px solid rgba(221,221,221,1);
+  // border:1px solid rgba(221,221,221,1);
   background-color: #fff;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 5px;
+  min-height: 200px;
+  max-height: 40%;
+  overflow-y: auto;
   &>li{
     font-size: 1rem;
     padding:0px 0px 0px 20px;
     box-sizing: border-box;
     color: #333;
     position: relative;
+    border-radius: 5px;
     & > p{
       height: 62px; 
       line-height: 62px;
@@ -155,6 +178,7 @@ form{
       border-bottom: 1px solid #eee;
       display: flex;
       justify-content: space-between;
+      color: #666666;
       cursor: pointer;
       padding-right: 20px;
       a{
@@ -168,11 +192,11 @@ form{
       border-bottom: none;
     }
     &:not(.MenuTitle):hover{
-      background-color: #fafafa;
+      background-color: #f8f8f8;
     }
   }
   & li.active{
-    background-color: #fafafa;
+    background-color: #f8f8f8;
   }
   & li.active::before{
     position: absolute;
@@ -189,7 +213,7 @@ form{
     color: #333!important;
     height: 62px;
     line-height: 62px;
-    border-bottom: 1px solid #E0E0E0;
+    border-bottom: 1px solid #eeeeee;
     font-weight: 400;
   }
   .ant-menu-inline{