diff页面

2020-11-10 16:42:32 +08:00 · 2020-11-10 16:42:32 +08:00 · 2f755e8d65
parent 0dd33faeb5
commit 2f755e8d65
6 changed files with 56 additions and 156 deletions
--- a/src/forge/Component/Keys.jsx
+++ b/src/forge/Component/Keys.jsx
@ -6,7 +6,7 @@ import styled from 'styled-components';
 export default ({title , value , className})=>{
  const Keys = styled.span`
    display:flex;
-    align-item:center;
+    align-items:center;
    & span{
      display:block;
      height:20px;
--- a/src/forge/Main/CoderRootIndex.js
+++ b/src/forge/Main/CoderRootIndex.js
@ -97,17 +97,18 @@ class CoderRootIndex extends Component{
              (props) => (<FileNew {...this.props} {...props} {...this.state} getTopCount={this.getTopCount} />)
            }
          ></Route>
+
+          {/* diff */}
+          <Route path="/projects/:owner/:projectsId/commits/:sha"
+            render={
+              (props) => (<Diff {...this.props} {...props} {...this.state}/>)
+            }
+          ></Route>
          <Route path="/projects/:owner/:projectsId/commits"
            render={
              () => (<CoderRootCommit {...this.props} {...this.state} commit_class="main" getTopCount={this.getTopCount}  />)
            }
          ></Route>
-          {/* diff */}
-          <Route path="/projects/:owner/:projectsId/diff/:sha"
-            render={
-              () => (<Diff {...this.props} {...this.state}/>)
-            }
-          ></Route>

          <Route path="/projects/:owner/:projectsId/releases/:versionId/update"
            render={
@ -125,6 +126,7 @@ class CoderRootIndex extends Component{
              () => (<CoderRootVersion {...this.props} {...this.state} />)
            }
          ></Route>
+
          <Route path="/projects/:owner/:projectsId/tag"
            render={
              () => (<CoderRootTag {...this.props} {...this.state} />)
--- a/src/forge/Main/Diff.jsx
+++ b/src/forge/Main/Diff.jsx
@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { Button ,Spin } from "antd";
 import { truncateCommitId } from '../common/util';
-import Nodata from '../Nodata';
+import { getImageUrl } from 'educoder';
+import Files from '../Merge/Files';

 import User from "../Component/User";
 import Keys from "../Component/Keys";
@ -11,65 +12,34 @@ import axios from "axios";

 const Infos = styled.div`
  border: 1px solid #dddddd;
+  margin-bottom:15px;
  & .commitinfos {
    background-color: #f1f8ff;
    border-bottom: 1px solid #ddd;
    padding: 20px;
  }
  & > .f-wrap-between {
-    padding: 10px 24px;
+    padding: 10px 20px;
  }
 `;
-const Operation = styled.p`
-  border-bottom: 1px solid #eee;
-  padding: 12px 0px;
-  margin-top: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;

-const FileUl = styled.ul`
-  padding-top: 10px;
-  & li {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 20px;
-    line-height: 20px;
-    margin-bottom: 10px;
-  }
-`;
-const DetailP = styled.p`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 20px 12px 12px;
-  background-color: #fafafa;
-  border: 1px solid #dddddd;
-`;
-
-export default ({ projectDetail, match }) => {
+export default ({ match , history }) => {
  const [data, setData] = useState({undefined});
  const [commit, setCommit] = useState(undefined);
-  const [files, setFiles] = useState(undefined);
  const [parents, setParents] = useState(undefined);
  const [committer, setCommitter] = useState(undefined);
-  const [fileflag , setFileflag] = useState(false);
  const [isSpin, setIsSpin] = useState(true);

-  const repo_id = projectDetail && projectDetail.repo_id;
-  const { sha } = match.params;
+  const { sha , projectsId, owner } = match.params;
  useEffect(() => {
-    if (repo_id && sha) {
-      const url = `/repositories/${repo_id}/commits/${sha}.json`;
+    if (projectsId && owner && sha) {
+      const url = `/${owner}/${projectsId}/commits/${sha}.json`;
      axios
        .get(url)
        .then(result => {
          if (result) {
            setData(result.data);
            setCommit(result.data.commit);
-            setFiles(result.data.files);
            setParents(result.data.parents);
            setCommitter(result.data.committer || (result.data.commit && result.data.commit.committer));
            setIsSpin(false);
@ -79,72 +49,27 @@ export default ({ projectDetail, match }) => {
          console.log(error);
        });
    }
-  }, [repo_id, sha]);
-  const renderFiles = () => {
-    return (
-      <FileUl>
-        {
-          files && files.length > 0 && files.map((item,key)=>{
-            return(
-              <li>
-                <span className="mr30 task-hide flex1">
-                  <i className="iconfont icon-wenjia color-grey-3 font-16 mr8"></i>
-                  {item.Name}
-                </span>
-                <span>
-                  <label className="color-green mr20">+{item.Addition}</label>
-                  <label className="color-red">-{item.Deletion}</label>
-                </span>
-              </li>
-            )
-          })
-        }
-      </FileUl>
-    );
-  };
-
-  function changeFlag(){
-    let flag = !fileflag;
-    setFileflag(flag);
-  }
-
-  const filesDetail = () => {
-    return (
-      <div>
-        <DetailP>
-          <span>
-            <i className="iconfont icon-youjiantou mr4 font-15 color-grey-9"></i>
-            <span className="font-16 color-grey-3">README.md</span>
-          </span>
-          <Button>查看文件</Button>
-        </DetailP>
-      </div>
-    );
-  };
+  }, [projectsId , owner, sha]);

  return (
    <div className="main">
      <Spin spinning={isSpin}>
        <Infos>
          <div className="commitinfos">
-            <p className="f-wrap-between">
-              <span className="font-20 color-grey-3">
-                { commit && commit.title }
-              </span>
-              <Button type="primary">浏览代码</Button>
-            </p>
-            {commit && commit.message ? (
-              <pre className="mt10">{commit.message}</pre>
-            ) : (
-              ""
-            )}
+            <div className="f-wrap-between">
+              {commit && commit.message &&
+                <pre className="task-hide" style={{marginBottom:"0px",height:"28px",whiteSpace:"pre-wrap"}}>{commit.message}</pre>
+              }
+              <Button type="primary" onClick={()=>{history.push(`/projects/${owner}/${projectsId}?${sha && `branch=${truncateCommitId(sha)}`}`)}} className="ml30">浏览代码</Button>
+            </div>
          </div>
          <div className="f-wrap-between" style={{ alignItems: "center" }}>
            <ul className="df">
              <User
-                url={(committer && committer.image_url)|| "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3025493530,1989042357&fm=26&gp=0.jpg"}
+                url={(committer && getImageUrl(`images/${committer.image_url}`))|| "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3025493530,1989042357&fm=26&gp=0.jpg"}
                name={committer && committer.name}
              />
+              {committer && committer.time_from_now && <li className="ml20 mt2">{committer.time_from_now}</li>}
            </ul>
            <li className="df">
              {
@ -158,35 +83,12 @@ export default ({ projectDetail, match }) => {
            </li>
          </div>
        </Infos>
-        {
-          files && files.length > 0 ?
-          <React.Fragment>
-            <Operation>
-              <span className="files_info" onClick={changeFlag}>
-                <i className={fileflag ? "iconfont icon-sanjiaoxing-down mr8 color-grey-9 font-16":"iconfont icon-triangle mr8 color-grey-9 font-16"}></i>
-                <span className="color-grey-9">
-                  共有<span>{files && files.length}个文件被更改</span>，包括
-                  {data && data.additions ? (
-                    <span className="color-green">{data.additions}次插入</span>
-                  ) : (
-                    ""
-                  )}
-                  {data && data.additions && data.deletions ? "和" : ""}
-                  {data && data.deletions ? (
-                    <span className="color-red">{data.deletions}次删除</span>
-                  ) : (
-                    ""
-                  )}
-                </span>
-              </span>
-              <Button>双栏查看</Button>
-            </Operation>
-            {fileflag && renderFiles()}
-            {filesDetail()}
-          </React.Fragment>
-          :
-          <Nodata _html="暂无文件修改信息！"/>
-        }
+        <Files 
+          history={history} 
+          data={data} 
+          owner={owner} 
+          projectsId={projectsId} 
+        />
      </Spin>
    </div>
  );
--- a/src/forge/Merge/Commits.jsx
+++ b/src/forge/Merge/Commits.jsx
@ -4,8 +4,9 @@ import User from '../Component/User';
 import { truncateCommitId } from '../common/util';
 import { getImageUrl } from 'educoder';
 import Nodata from '../Nodata';
+import { Link } from 'react-router-dom';

-function Commits({commits}){
+function Commits({ commits , projectsId , owner }){
  return(
    commits && commits.length>0 ?
    <div className="pb20">
@ -20,11 +21,11 @@ function Commits({commits}){
                    <span className="commitKey" style={{marginLeft:0}}>{truncateCommitId(`${item.sha}`)}</span>
                    <p className="ml15 font-16 color-grey-3 task-hide" style={{maxWidth:"700px"}}>{item.message}</p>
                  </AlignCenter>
-                  {/* <Link to={""} className="color-blue">浏览代码</Link> */}
-                  <AlignCenter>
-                    <User url={getImageUrl(`images/${item.committer && item.committer.image_url}`)} name={`${item.committer && item.committer.name}`}></User><span>：提交于{item.time_from_now}</span>
-                  </AlignCenter>
+                  <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(item.sha)}`} className="color-blue">浏览代码</Link>
                </FlexAJ>
+                <AlignCenter className="mt15">
+                  <User url={getImageUrl(`images/${item.committer && item.committer.image_url}`)} name={`${item.committer && item.committer.name}`}></User><span>：提交于{item.time_from_now}</span>
+                </AlignCenter>
              </div>
            </div>
          )
--- a/src/forge/Merge/Files.jsx
+++ b/src/forge/Merge/Files.jsx
@ -1,16 +1,28 @@
-import React ,{useEffect,useState} from 'react';
+import React ,{useEffect,useState } from 'react';
+import { truncateCommitId } from '../common/util';
 import { AlignCenter , FlexAJ } from '../Component/layout';
 import { Button } from 'antd';
 import Nodata from '../Nodata';
+import './merge.css';
+
+function Files({data,history,owner,projectsId}){
+  const [ files , setFiles ] = useState(data && data.files);

-function Files({data,history,owner,projectsId,showDown}){
-  const [ files , setFiles ] = useState(undefined);
  useEffect(()=>{
    if(data){
      setFiles(data.files);
    }
  },[data])

+  function showDown(flag,index,isBin){
+    if(!isBin){
+      var lists = files.concat();
+      lists[index].flag = !flag ? true : false;
+      lists.splice();
+      setFiles(lists);
+    }
+  }
+
  return(
    files ? 
    <div>
@ -36,7 +48,7 @@ function Files({data,history,owner,projectsId,showDown}){
                      <span>{item.name}</span>
                    </AlignCenter>
                    <span>
-                      <Button className="mr20" onClick={()=>{history.push(`/projects/${owner}/${projectsId}?${item.sha ? `branch=${item.sha}&`:""}url=${item.name}`)}}>查看文件</Button>
+                      <Button className="mr20" onClick={()=>{history.push(`/projects/${owner}/${projectsId}?${item.sha ? `branch=${truncateCommitId(item.sha)}&`:""}url=${item.name}`)}}>查看文件</Button>
                      <span className="color-green">+{item.addition}</span>
                      <span className="color-red ml20">-{item.deletion}</span>
                    </span>
--- a/src/forge/Merge/merge_footer.js
+++ b/src/forge/Merge/merge_footer.js
@ -121,23 +121,6 @@ class MergeFooter extends Component {
    }).catch(error=>{})
  }

-  showDown=(flag,index,isBin)=>{
-    if(!isBin){
-      const { filesData } = this.state;
-      const { files } = filesData;
-  
-      let arr = files[index];
-      let f = files;
-      let d = filesData;
-      arr.flag = !flag ? true : false;
-  
-      f[index] = arr;
-      d.files = f;
-      this.setState({
-        filesData:d
-      });
-    }
-  }
  render() {
    const { projectsId , owner } = this.props.match.params;

@ -175,7 +158,7 @@ class MergeFooter extends Component {
              <TabPane tab={<span><span className="font-16">提交</span>
                {commitCount > 0 && <span className="tabNum">{commitCount}</span>}
              </span>} key="2">
-                <Commits {...this.props} commits={commitsData}></Commits>
+                <Commits {...this.props} commits={commitsData} projectsId={projectsId} owner={owner}></Commits>
              </TabPane>
            }
            {
@ -185,7 +168,7 @@ class MergeFooter extends Component {
                    {filesCount > 0 && <span className="tabNum">{filesCount}</span>}
                  </span>
                } key="3">
-                <Files {...this.props} data={filesData} projectsId={projectsId} owner={owner} showDown={this.showDown} />
+                <Files {...this.props} data={filesData} projectsId={projectsId} owner={owner}/>
              </TabPane>
            }