forgeplus-react/src/forge/Merge/Commits.jsx

import React from 'react';
import { AlignCenter , FlexAJ } from '../Component/layout';
import User from '../Component/User';
import { truncateCommitId } from '../common/util';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';

function Commits({ commits , projectsId , owner }){
  return(
    <div className="pb20">
      {
        commits.map((item,key)=>{
          return(
            <div className="prCommits"> 
              <p className="prCreate">{item.created_at}</p>
              <div className="prInfo">
                <FlexAJ>
                  <AlignCenter>
                    <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`} className="commitKey" style={{marginLeft:0}}>{truncateCommitId(`${item.sha}`)}</Link>
                    <p className="ml15 font-16 color-grey-3 task-hide" style={{maxWidth:"700px"}}>{item.message}</p>
                  </AlignCenter>
                  <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(item.sha)}`} className="color-blue">浏览代码</Link>
                </FlexAJ>
                <AlignCenter className="mt15">
                  <User url={getImageUrl(`/${item.committer && item.committer.image_url}`)} name={`${item.committer && item.committer.name}`}></User><span>：提交于{item.time_from_now}</span>
                </AlignCenter>
              </div>
            </div>
          )
        })
      }
    </div>
  )
}
export default Commits;