列表list

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

@@ -1,28 +1,42 @@
 import React , { Component } from 'react';
 
 import { Menu , Input , Dropdown , Icon, Result } from 'antd';
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom';
 import '../css/index.css'
 import './list.css';
 
+import ListItem from './IndexItem'
 import axios from 'axios';
 
 const Search = Input.Search;
 const { SubMenu } = Menu;
 class Index extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      projectsList:undefined,
+      page:1,
+      limit:15
+    }
+  }
   
   componentDidMount=()=>{
-    this.getListData();
+    const { page,limit } = this.state;
+    this.getListData(page,limit);
   }
 
-  getListData=()=>{
-    const {current_user} = this.props;
+  getListData=(page,limit)=>{
+    const { current_user } = this.props;
     const url = `/projects.json`;
-    axios.get(url,{
-      user_id:current_user && current_user.user_id
-    }).then((result)=>{
+    axios.get(url,{params:{
+      user_id:current_user && current_user.user_id,
+      page,
+      limit
+    }}).then((result)=>{
       if(result){
-        
+        this.setState({
+          projectsList:result.data
+        })
       }
     }).catch((error)=>{})
   }
@@ -38,6 +52,8 @@ class Index extends Component{
         </Menu.Item>
       </Menu>
     )
+
+    const { projectsList } = this.state;
     return(
       <div className="main ProjectListIndex">
         <div className="list-left">
@@ -94,20 +110,7 @@ class Index extends Component{
               </a>
             </Dropdown>
           </div>
-          <div className="project-list">
-            <div className="p-r-Item">
-              <img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></img>
-              <div className="p-r-Infos">
-                <p>C+++++++++++++++++++</p>
-                <span>
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                </span>
-              </div>
-            </div>   
-            <div></div>   
-          </div>
+          <ListItem {...this.props} {...this.state} projects={projectsList}></ListItem>
         </div>
       </div>
     )

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

@@ -0,0 +1,82 @@
+import React , { Component } from 'react';
+
+import { Menu , Input , Dropdown , Icon, Result } from 'antd';
+import { Link } from 'react-router-dom';
+import '../css/index.css'
+import './list.css';
+
+class IndexItem extends Component{
+  renderList=(list)=>{
+    if(list && list.length >0 ){
+      list.map((item,key)=>{
+        return(
+          <div className="p-r-Item">
+            <img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></img>
+            <div className="p-r-Infos">
+              <div className="p-r-name">
+                <Link to={""} className="hide-1 font-16 color-grey-3">{item.name}</Link>
+                <span className="p-r-tags">
+                  <span><label>Fork</label><span>{item.forked_count}</span></span>
+                  <span><label>Start</label><span>10</span></span>
+                  { item.language && item.language.id && <span><label>{ item.language.name }</label></span>}
+                  <span><label>Python</label></span>
+                </span>
+              </div>
+              <div className="p-r-content">
+                <p className="break_word hide-2">{item.description}</p>
+              </div>
+              <div className="p-r-name mt8 color-grey-6">
+                <span className="p-r-detail">
+                  <span><label>浏览量：</label>{item.visits}</span>
+                  { item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
+                </span>
+                <span>最后更新于9小时前</span>
+              </div>
+            </div>
+          </div>
+        )
+      })
+    }
+  }
+  render(){ 
+    const { projects } = this.props;
+
+    const renderList = (
+      projects && projects.length >0 && projects.map((item,key)=>{
+        return(
+          <div className="p-r-Item">
+            <img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></img>
+            <div className="p-r-Infos">
+              <div className="p-r-name">
+                <Link to={""} className="hide-1 font-16 color-grey-3">{item.name}</Link>
+                <span className="p-r-tags">
+                  { item.forked_count ? <span><label>Fork</label><span>{ item.forked_count}</span></span>:"" }
+                  { item.prasies_count ? <span><label>Start</label><span>{ item.prasies_count }</span></span>:"" }
+                  { item.language && item.language.id ? <span><label>{ item.language.name }</label></span>:"" }
+                  <span><label>Python</label></span>
+                </span>
+              </div>
+              <div className="p-r-content">
+                <p className="break_word hide-2">{item.description}</p>
+              </div>
+              <div className="p-r-name mt8 color-grey-6">
+                <span className="p-r-detail">
+                  <span><label>浏览量：</label>{item.visits}</span>
+                  { item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
+                </span>
+                <span>最后更新于9小时前</span>
+              </div>
+            </div>
+          </div>
+        )
+      })
+    )
+    console.log(renderList);
+    return(
+      <div className="project-list">
+        { renderList }
+      </div>
+    )
+  }
+}
+export default IndexItem;

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

@@ -11,6 +11,8 @@
 }
 .list-right{
   width:74%;
+  background: #fff;
+  padding:10px;
 }
 .list-l-Menu{
   border:1px solid #f4f4f4;
@@ -58,6 +60,7 @@
 .list-r-operation{
   display: flex;
   align-items: center;
+  padding:15px 0px 25px; 
 }
 .list-r-Search{
   flex: 1;
@@ -72,6 +75,7 @@
 .p-r-Item{
   display: flex;
   padding:15px 0px;
+  border-top: 1px solid #eee;
 }
 .p-r-photo{
   width: 42px;
@@ -80,14 +84,65 @@
   margin-right: 15px;
 }
 .p-r-Infos{
+  flex: 1;
+  width: 0;
+}
+.p-r-name{
   display: flex;
-  align-content: flex-start;
   justify-content: space-between;
 }
+.p-r-name > p{
+  flex: 1;
+  width: 0;
+}
+.p-r-tags{
+  display: flex;
+  opacity: 1;
+}
+.p-r-tags > span{
+  margin-left: 15px;
+  border-radius: 4px;
+  border:1px solid #efefef;
+  background: #fafafa;
+  height: 24px;
+  line-height: 24px;
+  display: block;
+  font-size: 12px;
+  display: flex;
+
+}
+.p-r-tags > span >label{
+  padding:0px 8px;
+}
+.p-r-tags > span >span{
+  display: block;
+  background: #fff;
+  border-left: #efefef;
+  padding:0px 4px;
+  border-radius: 0px 4px 4px 0px;
+}
+.p-r-content{
+  margin-top:10px;
+  color: #666;
+}
+.p-r-detail > span{
+  margin-right: 15px;
+  color: #666;
+}
+.p-r-detail > span > label{
+  color: #999;
+}
 
 @media screen and (max-width: 750px){
   .list-left,.list-right{
     width: 100%;
-    padding-right: 0px;
+    padding: 0px;
+  }
+}
+
+@media screen and (max-width: 370px){
+  .p-r-tags{
+    opacity: 0;
+    display: none;
   }
-}
+}

public/react/src/forge/css/index.css

@@ -23,6 +23,19 @@
     margin:10px auto;
   }
 }
+
+.hide-1{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.hide-2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 @media screen and (max-width: 1000px){
   .main{
     width: 750px;