forgeplus-react/src/forge/Main/Diff.jsx

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 User from "../Component/User";
import Keys from "../Component/Keys";

import axios from "axios";

const Infos = styled.div`
  border: 1px solid #dddddd;
  & .commitinfos {
    background-color: #f1f8ff;
    border-bottom: 1px solid #ddd;
    padding: 20px;
  }
  & > .f-wrap-between {
    padding: 10px 24px;
  }
`;
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 }) => {
  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;
  useEffect(() => {
    if (repo_id && sha) {
      const url = `/repositories/${repo_id}/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);
          }
        })
        .catch(error => {
          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>
    );
  };

  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>
          <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"}
                name={committer && committer.name}
              />
            </ul>
            <li className="df">
              {
                parents && parents.length > 0 && parents.map((item,key)=>{
                  return(
                    <Keys title="父节点" value={truncateCommitId(item.sha) } className="mr20"></Keys>
                  )
                })
              }
              <Keys title="当前节点" value={truncateCommitId(sha)}></Keys>
            </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="暂无文件修改信息！"/>
        }
      </Spin>
    </div>
  );
};