提交页面

src/forge/Main/CoderDepot.jsx

@@ -146,12 +146,9 @@ function CoderDepot(props){
         setLastCommitAuthor(c && c.committer);
         setMainFlag(true);
         setReadOnly(true);
-<<<<<<< HEAD
-=======
         setReadme(result.data.readme);
         setEditReadme(false);
         setHide(true);
->>>>>>> 465ae57b071299c682f2c8d57d3380aa647c7d23
       }
       setTimeout(function(){setIsSpin(false);},500);
     }).catch(error=>{setIsSpin(false);})
@@ -193,12 +190,9 @@ function CoderDepot(props){
         setLastCommit(c && c.commit);
         setLastCommitAuthor(c && c.committer);
         setMainFlag(false);
-<<<<<<< HEAD
         setReadOnly(true);
-=======
         setReadOnly(!editReadme);
         setHide(true);
->>>>>>> 465ae57b071299c682f2c8d57d3380aa647c7d23
       }
       setTimeout(function(){setIsSpin(false);},500)
     }).catch(error=>{setIsSpin(false);})

src/forge/Main/CoderRootCommit.js

@@ -1,13 +1,17 @@
 import React , { Component } from 'react';
-import { Spin , Pagination } from 'antd';
+import { Spin , Pagination, Timeline } from 'antd';
 import { getImageUrl } from 'educoder';
 import { truncateCommitId } from '../common/util';
 import { AlignTop } from '../Component/layout';
 import SelectBranch from '../Branch/Select';
 import Nodata from '../Nodata';
 
+import Tree from './img/tree.png';
 import axios from 'axios';
 import {Link} from "react-router-dom";
+import CopyTool from '../Component/CopyTool';
+
+import './tree/Index.scss'
 
 function returnbar(str){
   if(str && str.length>0 && str.indexOf("%2F")>-1){
@@ -15,13 +19,14 @@ function returnbar(str){
   }
   return str;
 }
+//代码库--提交页面
 class CoderRootCommit extends Component{
   constructor(props){
     super(props)
     this.state={
       commitDatas:undefined,
       dataCount:undefined,
-      limit:20,
+      limit:10,
       page:1,
       isSpining:false,
       branchList:undefined
@@ -129,42 +134,56 @@ class CoderRootCommit extends Component{
             ></SelectBranch>
           </div>
           <Spin spinning={isSpining}>
-            <div className="commonBox">
+            {/* <div className="commonBox-title">
-              <div className="commonBox-title">
+              <div className="f-wrap-between" style={{alignItems:"center"}}>
-                <div className="f-wrap-between" style={{alignItems:"center"}}>
+                <span className="font-16">{dataCount}次提交代码({branch})</span>
-                  <span className="font-16">{dataCount}次提交代码({branch})</span>
-                </div>
               </div>
-              <div className="commitList">
+            </div> */}
-                {
+            <Timeline className="commitList">
-                  commitDatas && commitDatas.length > 0 && commitDatas.map((item,k)=>{
+              {
-                    return(
+                commitDatas && commitDatas.length > 0 && commitDatas.map((item,k)=>{
-                      <div key={k}>
+                  return(
-                        <AlignTop>
+                    <Timeline.Item key={k} dot={<i className="iconfont icon-shijian"></i>}>
-                          <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`} className="commitKey" style={{marginLeft:0,marginTop:"3px"}}>{truncateCommitId(`${item.sha}`)}</Link>
+                      <div className="commitList-item f-wrap-between">
-                          <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`} className="commitDesc">{item.message}</Link>
+                        <div>
-                        </AlignTop>
+                          <AlignTop>
-                        <p className="f-wrap-alignCenter mt15">
+                            {/* <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`} className="commitKey" style={{marginLeft:0,marginTop:"3px"}}>{truncateCommitId(`${item.sha}`)}</Link> */}
-                          {
+                            <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`} className="commitDesc font-14 color-grey-3 font-bd">{item.message}</Link>
-                            item.id ?
+                          </AlignTop>
-                            <Link to={`/${item.login}`} className="show-user-link">
+                          <p className="f-wrap-alignCenter mt15">
-                              {item.image_url?<img src={getImageUrl(`/${item.image_url}`)} alt="" width="28px" height="28px" className="mr15 radius"/>:""}
+                            {
-                              <label className="font-14 color-grey-6" style={{verticalAlign:'middle'}}>{item.name ?`${item.name}:`:""}提交于 {item.time_from_now}</label>
+                              item.id ?
-                            </Link>:
+                              <Link to={`/${item.login}`} className="show-user-link">
-                            <span className="show-user-link">
+                                {item.image_url?<img src={getImageUrl(`/${item.image_url}`)} alt="" width="28px" height="28px" className="mr8 radius"/>:""}
-                              {item.image_url?<img src={getImageUrl(`/${item.image_url}`)} alt="" width="28px" height="28px" className="mr15 radius"/>:""}
+                                <label className="font-14 color-grey-3" style={{verticalAlign:'middle'}}><label className="font-bd">{item.name ?`${item.name}  `:""}</label>提交于 {item.time_from_now}</label>
-                              <label className="font-14 color-grey-6" style={{verticalAlign:'middle'}}>{item.name ?`${item.name}:`:""}提交于 {item.time_from_now}</label>
+                              </Link>:
-                            </span>
+                              <span className="show-user-link">
-                          }
+                                {item.image_url?<img src={getImageUrl(`/${item.image_url}`)} alt="" width="28px" height="28px" className="mr8 radius"/>:""}
-                          
+                                <label className="font-14 color-grey-3" style={{verticalAlign:'middle'}}><label className="font-bd">{item.name ?`${item.name}  `:""}</label>提交于 {item.time_from_now}</label>
-                        </p> 
+                              </span>
+                            }
+                          </p>
+                        </div>
+                        <div>
+                          <div className="treecopy">
+                            <div>
+                              <span className="treecopy-cont">
+                                <img src={Tree} alt="sha" width={"16px"}/>
+                                <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`}>{truncateCommitId(`${item.sha}`)}</Link>
+                                <input type="text" id={`value${k}`} value={`${truncateCommitId(`${item.sha}`)}`}/>
+                              </span>
+                              <CopyTool beforeText="复制commit id" afterText="复制成功" inputId={`value${k}`}/>
+                            </div>
+                            <button className="btn-83">浏览文件</button>
+                          </div>
+                        </div>
                       </div>
-                    )
+                    </Timeline.Item>
-                  })
+                  )
-                }
+                })
-                {commitDatas && commitDatas.length === 0 && <Nodata _html="暂无数据"/>}
+              }
-              </div>
+              {commitDatas && commitDatas.length === 0 && <Nodata _html="暂无数据"/>}
-            </div>
+            </Timeline>
             {
               dataCount > limit ?
                 <div className="edu-txt-center pt30 mb30">

src/forge/Main/Index.scss

@@ -402,7 +402,6 @@
   cursor: pointer;
   background: #FAFBFC;
   border-radius: 4px;
-<<<<<<< HEAD
   .ant-dropdown-menu-item{
     border-radius: 8px;
     text-align: left!important;
@@ -412,7 +411,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
-=======
+  }
   border: 1px solid #D0D0D0;
   font-size: 15px;
   font-weight: normal;
@@ -425,7 +424,6 @@
   align-items: center;
   &:hover{
     background-color: #F3F4F6;
->>>>>>> 465ae57b071299c682f2c8d57d3380aa647c7d23
   }
   span{
     margin-top: 1px;

src/forge/Main/list.scss

@@ -718,12 +718,62 @@ a.color-grey-ccc:hover{
   padding:0px 30px;
   min-height: 400px;
 }
-.commitList > div{
+
-  border-bottom: 1px solid #EEEEEE;
+.main{
-  padding:16px 0px;
+  margin: 30px auto;
-}
+  .ant-timeline{
-.commitList > div:last-child{
+    margin-top: 28px;
-  border-bottom: none;
+    .commitList-item{
+      position: relative;
+      padding: 20px 20px;
+      background: #FAFCFF;
+      border: 1px solid rgba(42, 97, 255, 0.23);
+      border-radius: 4px;
+      margin-left: 16px;
+      align-items: center;
+      &:after,&:before{
+        content: "";
+        position: absolute; 
+        left: -10px; 
+        top: 10px;
+        border-top: 6px solid transparent; 
+        border-bottom: 6px solid transparent; 
+        border-right: 10px solid rgba(42, 97, 255, 0.23);
+      }
+      &:after{
+        left: -8px; 
+        border-right: 10px solid #FAFCFF;
+        &:hover{
+          border-right: 10px solid #EEF6FF;
+        }
+      }
+      &:hover{
+        background: #EEF6FF;
+        border: 1px solid rgba(42, 97, 255, 0.58);
+        &:after{
+          border-right: 10px solid #EEF6FF;
+        }
+        &:before{
+          border-right: 10px solid rgba(42, 97, 255, 0.58);
+        }
+      }
+      .treecopy-cont{
+        padding: 4px 15px;
+      }
+      .btn-83{
+        margin-left: 20px;
+      }
+    }
+    .ant-timeline-item{
+      padding: 8px 0 20px;
+    }
+    .ant-timeline-item-tail{
+      height: calc(100% - 20px);
+    }
+    .ant-timeline-item-head-custom{
+      top:20px;
+    }
+  }
 }
 
 

src/forge/Main/tree/Index.scss

@@ -34,48 +34,48 @@
         margin-right: 5px;
       }
     }
-    .treecopy{
-      flex:1;
-      display: flex;  
-      justify-content: center;      
-      &>div{
-        height: 32px;
-        background: #FAFBFC;
-        border-radius: 4px;
-        border: 1px solid #D0D0D0;
-        position: relative;
-        z-index: 1;
-        display: flex;
-        align-items: center;
-        &>span{
-          padding:0px 15px;
-          border-right: 1px solid rgba(153, 153, 153, 0.4);
-          height: 100%;
-          img{
-            margin-right: 4px;
-          }
-          a{
-            color: #466AFF;
-            &:hover{
-              text-decoration: underline;
-            }
-          }
-        }
-        &>i{
-          margin:0px 12px;
-          color: #333!important;
-        }
-        input{
-          position: absolute;
-          z-index: 0;
-          opacity: 0;
-          top: 32px;
-        }
-      }
-    }
     .treeabout{
       flex:1;
       text-align: right;
     }
   }
+}
+.treecopy{
+  flex:1;
+  display: flex;  
+  justify-content: center;      
+  &>div{
+    height: 32px;
+    background: #FAFBFC;
+    border-radius: 4px;
+    border: 1px solid #D0D0D0;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    &>span{
+      padding:0px 15px;
+      border-right: 1px solid rgba(153, 153, 153, 0.4);
+      height: 100%;
+      img{
+        margin-right: 4px;
+      }
+      a{
+        color: #466AFF;
+        &:hover{
+          text-decoration: underline;
+        }
+      }
+    }
+    &>i{
+      margin:0px 12px;
+      color: #333!important;
+    }
+    input{
+      position: absolute;
+      z-index: 0;
+      opacity: 0;
+      top: 32px;
+    }
+  }
 }

src/forge/css/index.scss

@@ -91,10 +91,7 @@ ul,ol,dl{
 }
 .commitDesc{
   flex:1;
-  margin-left:20px;
+  line-height:20px;
-  font-size:16px;
-  color:#333;
-  line-height:26px;
   word-break: break-all;
 }
 
@@ -297,10 +294,14 @@ form{
   border-radius: 5px;
   font-weight: 500;
   color: #333333!important;
-  &:hover,&:active{
+  &:hover{
     background: #F3F4F6;
     color: #333333!important;
   }
+  &:active{
+    background: #D0D0D0;
+    color: #333333!important;
+  }
 }
 a.hover:hover{
   text-decoration: underline;