diff --git a/src/forge/Component/Keys.jsx b/src/forge/Component/Keys.jsx
index 9d05905b..80753447 100644
--- 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;
diff --git a/src/forge/Main/CoderRootIndex.js b/src/forge/Main/CoderRootIndex.js
index 51762c99..2aa8218f 100644
--- 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} />)
diff --git a/src/forge/Main/Diff.jsx b/src/forge/Main/Diff.jsx
index 28abe420..18eda5f2 100644
--- 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>
   );
diff --git a/src/forge/Merge/Commits.jsx b/src/forge/Merge/Commits.jsx
index 2cceb256..7e326bdf 100644
--- 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>
           )
diff --git a/src/forge/Merge/Files.jsx b/src/forge/Merge/Files.jsx
index 226ca5e2..7422a177 100644
--- 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>
diff --git a/src/forge/Merge/merge_footer.js b/src/forge/Merge/merge_footer.js
index 81ecae82..72608b71 100644
--- 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>
             }