列表以及详情头部更新

public/react/src/AppConfig.js

@@ -45,16 +45,9 @@ export function initAxiosInterceptors(props) {
     //      https://github.com/axios/axios/issues/1497
 
     // TODO 读取到package.json中的配置？
-			var //proxy = "http://localhost:3000"
-			 //proxy = "http://testbdweb.trustie.net"
-			 //proxy = "http://testbdweb.educoder.net"
-			// proxy = "https://testeduplus2.educoder.net"
-			//proxy="http://47.96.87.25:48080"
-			// proxy="https://pre-newweb.educoder.net"
-    //   proxy="https://test-newweb.educoder.net"
-      //proxy="https://test-jupyterweb.educoder.net"
-         //proxy="http://192.168.2.63:3001"
-           proxy="http://123.59.135.93:56666"
+            var 
+            // proxy="http://123.59.135.93:56666"
+            proxy="http://localhost:3000"
 
     // 在这里使用requestMap控制，避免用户通过双击等操作发出重复的请求；
     // 如果需要支持重复的请求，考虑config里面自定义一个allowRepeat参考来控制

public/react/src/forge/Main/Detail.js

@@ -8,6 +8,17 @@ import Loadable from 'react-loadable';
 import Loading from '../../Loading';
 
 import axios from 'axios';
+
+import img_1 from '../Images/1.png';
+import img_2 from '../Images/2.png';
+import img_3 from '../Images/3.png';
+import img_4 from '../Images/4.png';
+import img_6 from '../Images/6.png';
+import img_parise from '../Images/parise.png';
+import img_focus from '../Images/focus.png';
+import img_parised from '../Images/parised.png';
+import img_focused from '../Images/focused.png';
+import img_fork from '../Images/fork.png';
 const FileNew = Loadable({
 	loader: () => import('../Newfile/Index'),
 	loading: Loading,
@@ -277,43 +288,49 @@ class Detail extends Component{
     return(
       <div>
         <div className="detailHeader-wrapper">
-          <div className="normal f-wrap-between mb20">
-            <p className="font-18 color-blue df flex-1 lineH2" style={{alignItems:"center"}}>{projectDetail && projectDetail.author && projectDetail.author.name} / <span className="hide-1 flex-1">{ projectDetail && projectDetail.identifier }</span></p>
-
-            <span className="p-r-btn large">
-              <span>
-                <a onClick={()=>this.focusFunc(projectDetail && projectDetail.watched)}>
-                  <i className={projectDetail && projectDetail.watched ?"iconfont icon-yincang1 font-18 mr5 color-grey-6":"iconfont icon-xianshi font-18 mr5 color-grey-6"}></i>
-                  {projectDetail && projectDetail.watched ? '取消关注':'关注'}
-                </a>
-                <span>{watchers_count}</span>
-              </span>
-              <span>
-                <a onClick={()=>this.pariseFunc(projectDetail && projectDetail.praised)}>
-                  <i className={projectDetail && projectDetail.praised ?"iconfont icon-dianzan font-18 mr5 color-grey-6":"iconfont icon-dianzan-xian font-18 mr5 color-grey-6"}></i>
-                  {projectDetail && projectDetail.praised ? '取消点赞':'点赞'}
-                </a>
-                <span>{praises_count}</span>
+          <div className="normal">
+            <div className="f-wrap-between mb20">
+              <p className="font-18 color-white df flex-1 lineH2 mt15" style={{alignItems:"center"}}>
+                {projectDetail && projectDetail.author && projectDetail.author.name}
+                <span className="ml5 mr5">|</span>
+                <span className="hide-1 flex-1">{ projectDetail && projectDetail.identifier }</span>
+              </p>
+            </div>
+            <div className="f-wrap-between">
+              <ul className="headerMenu-wrapper">
+                <li className={(url.indexOf("coder")>0 || urlFlag)? "active" : ""}><Link to={`/projects/${projectsId}/coder`}><img alt="" src={img_1} width="24" />代码</Link></li>
+                <li className={url.indexOf("orders")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/orders`}><img alt="" src={img_2} width="12" />工单{projectDetail&&projectDetail.issues_count===0?"":projectDetail&&projectDetail.issues_count===0?projectDetail.issues_count:""}</Link></li>
+                <li className={url.indexOf("merge")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/merge`}><img alt="" src={img_3} width="17" />合并请求{projectDetail&&projectDetail.pull_requests_count===0?"":projectDetail&&projectDetail.pull_requests_count===0?projectDetail.pull_requests_count:""}</Link></li>
+                <li className={url.indexOf("version")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/version`}><img alt="" src={img_4} width="20" />版本发布</Link></li>
+                <li className={url.indexOf("trends")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/trends`}><img alt="" src={img_6} width="23" />动态</Link></li>
+                {
+                  isManager &&
+                    <li className={url.indexOf("setting")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/setting`}>仓库设置</Link></li>
+                }
+                <li className={url.indexOf("setting")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/setting`}>仓库设置</Link></li>
+              </ul>
+              <span className="df">
+                <span className="detail_tag_btn">
+                  <a className="detail_tag_btn_name" onClick={()=>this.focusFunc(projectDetail && projectDetail.watched)}>
+                    <img src={projectDetail && projectDetail.watched ? img_focused : img_focus} alt="" width="14px"/>
+                    {projectDetail && projectDetail.watched ? '取消关注':'关注'}
+                  </a>
+                  <span className="detail_tag_btn_count">{watchers_count}</span>
+                </span>
+                <span className="detail_tag_btn">
+                  <a className="detail_tag_btn_name" onClick={()=>this.pariseFunc(projectDetail && projectDetail.praised)}>
+                    <img src={projectDetail && projectDetail.praised ? img_parised : img_parise} width="13px" alt=""/>
+                    {projectDetail && projectDetail.praised ? '取消点赞':'点赞'}
+                  </a>
+                  <span className="detail_tag_btn_count">{praises_count}</span>
+                </span>
+                <span className="detail_tag_btn">
+                  <a className="detail_tag_btn_name" onClick={this.forkFunc}>
+                    <img src={img_fork} alt="" width="10px"/>Fork</a>
+                  <span className="detail_tag_btn_count">{forked_count}</span>
+                </span>
               </span>
-              <span>
-                <a onClick={this.forkFunc}><i className="iconfont icon-fork font-18 mr5 color-grey-6"></i>Fork</a>
-                <span>{forked_count}</span>
-              </span>
-            </span>
-          </div>
-          <div className="normal f-wrap-between">
-            <ul className="headerMenu-wrapper">
-              <li className={(url.indexOf("coder")>0 || urlFlag)? "active" : ""}><Link to={`/projects/${projectsId}/coder`}>代码</Link></li>
-              <li className={url.indexOf("orders")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/orders`}>工单{projectDetail&&projectDetail.issues_count===0?"":projectDetail&&projectDetail.issues_count===0?projectDetail.issues_count:""}</Link></li>
-              <li className={url.indexOf("merge")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/merge`}>合并请求{projectDetail&&projectDetail.pull_requests_count===0?"":projectDetail&&projectDetail.pull_requests_count===0?projectDetail.pull_requests_count:""}</Link></li>
-              <li className={url.indexOf("version")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/version`}>版本发布</Link></li>
-              <li className={url.indexOf("trends")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/trends`}>动态</Link></li>
-              {
-                isManager &&
-                  <li className={url.indexOf("setting")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/setting`}>仓库设置</Link></li>
-              }
-              <li className={url.indexOf("setting")>0 ? "active" : ""}><Link to={`/projects/${projectsId}/setting`}>仓库设置</Link></li>
-            </ul>
+            </div>
           </div>
         </div>
 

public/react/src/forge/Main/Index.js

@@ -8,8 +8,11 @@ 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';
+
 const Search = Input.Search;
-const { SubMenu } = Menu;
+
 class Index extends Component{
   constructor(props){
     super(props);
@@ -68,16 +71,6 @@ class Index extends Component{
     axios.get(url).then((result)=>{
       if(result && result.data){
         this.setTypeList(result.data, undefined)
-        // this.setState({
-        //   typeList:result.data && result.data.map((item,key)=>{
-        //     return(
-        //       <li className={active_id && parseInt(active_id) === item.id ? 'liactive' : ''} onClick={()=>this.changeType(`${item.project_type}`, `${item.id}`)}>
-        //         <span>{item.name}</span>
-        //         <span>{item.projects_count}</span>
-        //       </li>
-        //     )
-        //   })
-        // })
       }
     }).catch((error)=>{})
   }
@@ -86,9 +79,11 @@ class Index extends Component{
     this.setState({
       typeList:list.map((item)=>{
         return(
-          <li className={active_type && active_type === item.project_type ? 'liactive' : ''} onClick={()=>this.changeType(`${item.project_type}`, list)}>
-            <span>{item.name}</span>
-            <span>{item.projects_count}</span>
+          <li 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>
         )
       })
@@ -122,9 +117,11 @@ class Index extends Component{
     this.setState({
       categoryList:list.map((item)=>{
         return(
-          <li className={active_id && parseInt(active_id) === item.id ? 'liactive' : ''} onClick={()=>this.changeCategory(`${item.id}`,list)}>
-            <span>{item.name}</span>
-            <span>{item.projects_count}</span>
+          <li 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>
         )
       })
@@ -217,9 +214,21 @@ class Index extends Component{
               { categoryList }
             </ul>
           </div>
-          <div className="list-right">
+          <div className="list-right boxShandow padding0-25">
             <Spin spinning={isSpin}>
               <div className="list-r-operation">
+                <div>
+                  <Dropdown overlay={newItem} trigger={["click"]} placement='bottomRight' className="mr30">
+                    <a className="ant-dropdown-link">
+                      <span className="color-blue font-16"><img src={img_new} alt="" width="13px"/> 新建</span>
+                    </a>
+                  </Dropdown>
+                  <Dropdown overlay={menu} trigger={['click']} placement='bottomRight'>
+                    <a className="ant-dropdown-link">
+                      <span className="color-blue font-16">排序 <img src={img_array} alt="" width="10px"/></span>
+                    </a>
+                  </Dropdown>
+                </div>
                 <Search
                   placeholder="输入项目名称关键字进行搜索"
                   enterButton="搜索"
@@ -229,17 +238,6 @@ class Index extends Component{
                   value={search}
                   onChange={this.changeSearchValue}
                 />
-                <div>
-                  <Dropdown overlay={menu} trigger={['click']} placement='bottomRight'>
-                    <a className="ant-dropdown-link">
-                      排序 <Icon type="down" />
-                    </a>
-                  </Dropdown>
-                  <Dropdown overlay={newItem} trigger={["click"]} placement='bottomRight'>
-                    <a className="createBtn"> + 新建
-                    </a>
-                  </Dropdown>
-                </div>
               </div>
               <ListItem {...this.props} {...this.state} projects={projectsList}></ListItem>
               { pagination }

public/react/src/forge/Main/IndexItem.js

@@ -3,7 +3,7 @@ import { getImageUrl } from 'educoder';
 import { Link } from 'react-router-dom';
 import '../css/index.css'
 import './list.css';
-
+import img_parise from '../Images/parise.png';
 class IndexItem extends Component{
   
   render(){ 
@@ -17,21 +17,22 @@ class IndexItem extends Component{
             <div className="p-r-Infos">
               <div className="p-r-name">
                 <Link to={`/projects/${item.identifier}/coder`} className="hide-1 font-16 color-grey-3" style={{whiteSpace:"wrap"}}>{item.name}</Link>
+                
+              </div>
+              <div className="p-r-content">
+                <p className="break_word task-hide flex1" style={{maxHeight:"40px"}}>{item.description}</p>
                 <span className="p-r-tags">
-                  { item.forked_count ? <span><label>Fork</label><span>{ item.forked_count}</span></span>:"" }
-                  <span><label>Start</label><span>{ item.praises_count }</span></span>
+                  {/* { item.forked_count ? <span><label>Fork</label><span>{ item.forked_count}</span></span>:"" } */}
+                  <span className="pariseTag"><img src={img_parise} alt="" className="pariseImg"/>点赞 ({ item.praises_count })</span>
                   { item.language && item.language.id ? <span><label>{ item.language.name }</label></span>:"" }
                 </span>
               </div>
-              <div className="p-r-content">
-                <p className="break_word hide-2" style={{maxHeight:"40px"}}>{item.description}</p>
-              </div>
               <div className="p-r-about">
                 <span className="p-r-detail">
                   <span><label>浏览量：</label>{item.visits}</span>
                   { item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
+                  {item.last_update_time ? <span ><label>更新于</label>{item.time_ago}</span> : "" }
                 </span>
-                {item.last_update_time ? <span>更新于{item.time_ago}</span> : "" }
               </div>
             </div>
           </div>

public/react/src/forge/Main/list.css

@@ -3,8 +3,8 @@ body,#root{
 }
 .lineH2{line-height:2}
 .t_project_banner {
-  background: url(../../images/forge/project.jpg) no-repeat top center;
   height: 260px;
+  background: url(../Images/banner_list.png) no-repeat center;
   background-color: #050d34;
 }
 .ProjectListIndex{
@@ -30,30 +30,43 @@ body,#root{
   margin-bottom: 20px;
 }
 .list-l-Menu>li{
-  height: 40px;
-  line-height: 40px;
   font-size: 1rem;
   padding:0px 20px;
   box-sizing: border-box;
   color: #333;
+  position: relative;
+}
+.list-l-Menu>li > p{
+  height: 50px; 
+  line-height: 50px;
+  width: 100%;
+  border-bottom: 1px solid #eee;
   display: flex;
   justify-content: space-between;
   cursor: pointer;
 }
-.list-l-Menu li span:last-child{
+.list-l-Menu>li:last-child > p{
+  border-bottom: none;
+}
+.list-l-Menu li p span:last-child{
   color: #999;
 }
 .list-l-Menu .MenuTitle{
-  background-color: #efefef;
-  border-radius: 4px 4px 0px 0px;
   font-size: 16px;
+  background:url(../Images/dir.png) no-repeat;
+  background-size: 100% 100%;
+  color: #fff!important;
+  height: 50px;
+  line-height: 50px;
 }
-.list-l-Menu > li:not(.MenuTitle):hover{
-  background-color: #1890ff;
+.list-l-Menu:nth-child(2) .MenuTitle{
+  background:url(../Images/type.png) no-repeat;
+  background-size: 100% 100%;
 }
-.list-l-Menu > li:not(.MenuTitle):hover span{
-  color: #fff;
+.list-l-Menu > li:not(.MenuTitle):hover{
+  background-color: #ECF6FF;
 }
+
 /* 左侧menu */
 .list-l-Menu .ant-menu-inline{
   border:none;
@@ -64,17 +77,27 @@ body,#root{
 .list-l-Menu .ant-menu-item-group-title{
   padding:0px;
 }
-
+.list-l-Menu li.active::before{
+  position: absolute;
+  left: 0px;
+  top: 8px;
+  width: 2px;
+  content: '';
+  height: 34px;
+  background: #4CACFF;
+}
 .list-r-operation{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
-  padding:15px 0px 25px; 
+  padding:25px 0px; 
 }
 .list-r-Search{
   width: 400px;
-  margin-right: 20px;
+}
+.padding0-25{
+  padding:0px 25px;
 }
 .list-r-Search .ant-btn-lg{
   height: 38px;
@@ -94,7 +117,14 @@ body,#root{
 .p-r-Item{
   display: flex;
   padding:15px 0px;
-  border-top: 1px solid #eee;
+  box-shadow:0px 2px 20px 0px rgba(0,0,0,0.05);
+  border-radius:2px;
+  border:1px solid rgba(238,238,238,1);
+  margin-bottom: 15px;
+  padding:20px;
+}
+.boxShandow{
+  box-shadow:0px 2px 20px 10px rgba(0,0,0,0.03);
 }
 .p-r-photo{
   width: 42px;
@@ -151,15 +181,19 @@ body,#root{
 }
 .p-r-tags > span{
   margin-left: 15px;
-  border-radius: 4px;
-  border:1px solid #efefef;
-  background: #e2f0fd;
+  padding:0px 10px;
+  border-radius:15px;
+  background: #EBF4FE;
+  color: #333;
   height: 24px;
   line-height: 24px;
   display: block;
   font-size: 12px;
   display: flex;
 }
+.p-r-tags > span.pariseTag{
+  background: #FFF3DC;
+}
 .p-r-tags.large > span >label{
   padding:0px 12px;
 }
@@ -169,6 +203,12 @@ body,#root{
 .p-r-tags.large > span >span{
   padding:0px 6px;
 }
+.pariseImg{
+  width: 14px;
+  height: 12px;
+  margin-top: 6px;
+  margin-right: 3px;
+}
 .p-r-tags > span >span{
   display: block;
   background: #fff;
@@ -180,6 +220,7 @@ body,#root{
 .p-r-content{
   margin-top:10px;
   color: #666;
+  display: flex;
 }
 .p-r-detail > span{
   margin-right: 15px;
@@ -199,28 +240,57 @@ body,#root{
 
 /* -----------详情------------ */
 .detailHeader-wrapper{
-  background: #f7f7f7;
-  padding-top:20px;
-  border-bottom: 1px solid rgba(34,36,38,.15);
+  background:url(../Images/banner_sub.png) no-repeat center;
+  background-size: 100% 100%;
+  height: 120px;
 }
 .headerMenu-wrapper{
-  background: #f7f7f7;
   font-size: 16px;
   display: flex;
   flex-direction: row;
-  color: #999;
 }
 .headerMenu-wrapper li{
-  padding:6px 14px; 
+  padding:0px 18px; 
   position: relative;
-  text-align: center
+  text-align: center;
+  height: 30px;
+  line-height: 30px;
+}
+.headerMenu-wrapper li a{
+  color: #fff;
+  display: flex;
+  align-items: center;
+}
+.headerMenu-wrapper li a > img{
+  margin-right: 5px;
 }
 .headerMenu-wrapper li.active{
-  background: #fff;
-  margin-bottom: -1px;
-  border:1px solid rgba(34,36,38,.15);
-  border-bottom: none;
-  border-radius: 4px 4px 0px 0px;
+  background:linear-gradient(180deg,rgba(58,194,255,1) 0%,rgba(27,143,255,1) 100%);
+  border-radius: 15px;
+}
+.detail_tag_btn{
+  height:30px;
+  line-height: 30px;
+  border-radius:4px;
+  border:1px solid rgba(28,145,255,1);
+  display: flex;
+  align-items: center;
+  margin-left: 30px
+}
+.detail_tag_btn_name{
+  padding:0px 10px;
+  display: flex;
+  align-items: center;
+  color: #fff;
+}
+.detail_tag_btn_name img{
+  margin-right: 3px;
+}
+.detail_tag_btn_count{
+  padding:0px 10px;
+  color: #fff;
+  background: #1C91FF;
+  border-radius: 0px 4px 4px 0px;
 }
 /* 详情-代码 */
 .branch-wrapper{

public/react/src/forge/Settings/Collaborator.js

@@ -1,6 +1,6 @@
 import React , { Component } from 'react';
 import { Link } from 'react-router-dom';
-import { Input , AutoComplete , Dropdown , Menu , Icon , Spin } from 'antd';
+import { Input , AutoComplete , Dropdown , Menu , Icon , Spin , Pagination } from 'antd';
 import axios from 'axios';
 
 const { Option } = AutoComplete;
@@ -24,25 +24,27 @@ class Collaborator extends Component{
       user_id:undefined,
       userDataSource:undefined,
       page:1,
+      total_count:undefined,
       isSpin:true
     }
   }
 
   componentDidMount=()=>{
     if(this.props.project_id){
-      this.getMember(this.props.project_id);
+      const { page } = this.state;
+      this.getMember(this.props.project_id,page);
     }
   }
 
   componentDidUpdate=(prevState)=>{
     if(this.props.project_id && this.props.project_id !== prevState.project_id){
-      this.getMember(this.props.project_id);
+      const { page } = this.state;
+      this.getMember(this.props.project_id,page);
     }
   }
 
   // 获取项目协作者
-  getMember=(project_id)=>{
-    const { page } = this.state;
+  getMember=(project_id,page)=>{
     const url =  `/projects/${project_id}/members.json`;
     axios.get(url,{
       params:{
@@ -52,7 +54,8 @@ class Collaborator extends Component{
       if(result){
         this.setState({
           listData:result.data.members,
-          isSpin:false
+          isSpin:false,
+          total_count:result.data.total_count
         })
       }
     }).catch(error=>{
@@ -108,7 +111,7 @@ class Collaborator extends Component{
 
   // 修改权限
   changeOperaiton=(e,id)=>{
-    const { project_id } = this.props;
+    const { project_id , page } = this.props;
     this.setState({
       isSpin:true
     })
@@ -122,7 +125,7 @@ class Collaborator extends Component{
           isSpin:true
         })
         this.props.showNotification('权限修改成功!');
-        this.getMember(project_id);
+        this.getMember(project_id,page);
       }
     }).catch(error=>{
       console.log(error);
@@ -131,6 +134,7 @@ class Collaborator extends Component{
 
   // 删除协作者
   deleteUser=(id)=>{
+    const { page } = this.state;
     this.props.confirm({
       content:"确认将此成员从项目中移除？",
       onOk:()=>{
@@ -144,7 +148,7 @@ class Collaborator extends Component{
               isSpin:true
             })
             this.props.showNotification("成员删除成功！");
-            this.getMember(project_id);
+            this.getMember(project_id,page);
           }
         }).catch(error=>{
           console.log(error);
@@ -152,8 +156,15 @@ class Collaborator extends Component{
       }
     })
   }
+  changePage=(page)=>{
+    this.setState({
+      page
+    })
+    const { project_id } = this.props;
+    this.getMember(project_id,page);
+  }
   render(){
-    const { userDataSource , listData , isSpin } = this.state;
+    const { userDataSource , listData , isSpin , page , total_count } = this.state;
     // 获取当前项目的拥有者
     const { author } = this.props;
     const menu =(id)=> (
@@ -223,7 +234,13 @@ class Collaborator extends Component{
             <a className="small_submitBtn ml20" onClick={this.addCollaborator}>增加协作者</a>
           </div>
         </div>
-
+        {
+          total_count && total_count > LIMIT ?
+          <div className="edu-txt-center mt20 mb20">
+            <Pagination showQuickJumper pageSize={LIMIT} current={page} total={total_count} onChange={this.changePage}></Pagination>
+          </div>
+          :""
+        }
       </div>
     )
   }