diff --git a/src/forge/Component/Keys.jsx b/src/forge/Component/Keys.jsx
new file mode 100644
index 00000000..9d05905b
--- /dev/null
+++ b/src/forge/Component/Keys.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+
+
+export default ({title , value , className})=>{
+  const Keys = styled.span`
+    display:flex;
+    align-item:center;
+    & span{
+      display:block;
+      height:20px;
+      line-height:20px;
+      border-radius:18px;
+      padding:0px 12px;
+      color:#FD7700;
+      border:1px solid #FD7700;
+      background-color:#fff3DC;
+      ${ title && "margin-left:10px;"}
+    }
+`;
+  return(
+    <Keys className={className}>
+      { title && <label>{title}</label>}
+      <span>{value}</span>
+    </Keys>
+  )
+}
\ No newline at end of file
diff --git a/src/forge/Component/User.jsx b/src/forge/Component/User.jsx
new file mode 100644
index 00000000..1c6bf9a9
--- /dev/null
+++ b/src/forge/Component/User.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+
+export default ({ url , name , column })=>{
+  const Img = styled.span`
+    display:flex;
+    ${column && "flex-direction: column;text-align:center;"}
+    align-items: center;
+    & img{
+      width:30px;
+      height:30px;
+      border-radius:50%;
+    }
+    ${!column && `
+      & span{
+        margin-left:8px;
+      }`
+    }
+  `;
+  return(
+    <Img>
+      <img src={url} alt=""/>
+      <span>{name}</span>
+    </Img>
+  )
+}
\ No newline at end of file
diff --git a/src/forge/Main/CoderRootIndex.js b/src/forge/Main/CoderRootIndex.js
index d7be8486..56d1a428 100644
--- a/src/forge/Main/CoderRootIndex.js
+++ b/src/forge/Main/CoderRootIndex.js
@@ -34,6 +34,10 @@ const CoderRootVersionUpdate = Loadable({
   loader: () => import('../Version/New'),
   loading: Loading,
 })
+const Diff =  Loadable({
+  loader: () => import('./Diff'),
+  loading: Loading,
+})
 
 class CoderRootIndex extends Component{
   
@@ -47,6 +51,12 @@ class CoderRootIndex extends Component{
               (props) => (<CoderRootCommit {...this.props} {...props} {...this.state} />)
             }
           ></Route>
+          {/* diff */}
+          <Route path="/projects/:projectsId/diff/:commitId"
+            render={
+              (props) => (<Diff {...this.props} {...props} {...this.state}/>)
+            }
+          ></Route>
           <Route path="/projects/:projectsId/coders/version/new"
             render={
               (props) => (<CoderRootVersionNew {...this.props} {...props} {...this.state} />)
diff --git a/src/forge/Main/Detail.js b/src/forge/Main/Detail.js
index b0c173ae..16910b8d 100644
--- a/src/forge/Main/Detail.js
+++ b/src/forge/Main/Detail.js
@@ -534,7 +534,6 @@ class Detail extends Component {
               }
             ></Route>
 
-
             <Route path="/projects/:projectsId/merge"
               render={
                 (props) => (<MergeIndexDetail {...this.props} {...props} {...this.state} {...common}/>)
diff --git a/src/forge/Main/Diff.jsx b/src/forge/Main/Diff.jsx
new file mode 100644
index 00000000..25cfc7b6
--- /dev/null
+++ b/src/forge/Main/Diff.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from 'antd';
+import User from '../Component/User';
+import Keys from '../Component/Keys';
+
+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`
+  & li{
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+    height:20px;
+    line-height:20px;
+    margin-bottom:10px;
+  }
+`;
+
+const files = ()=>{
+  return(
+    <fileUl>
+      <li>
+        <span><i className="iconfont icon-wenjia color-grey-3 font-16 mr8"></i></span>
+      </li>
+    </fileUl>
+  )
+}
+
+export default () => {
+  return(
+    <div className="main">
+      <Infos>
+        <div className="commitinfos">
+          <p className="f-wrap-between">
+            <span className="font-20 color-grey-3">title</span>
+            <Button type="primary">浏览代码</Button>
+          </p>
+          <pre className="mt10">I wanner be a dancer \n I wanner be a dancer I wanner be a dancer</pre>
+        </div>
+        <div className="f-wrap-between" style={{alignItems:'center'}}>
+          <ul className="df">
+            <User url="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3025493530,1989042357&fm=26&gp=0.jpg" name="caicai" />
+          </ul>
+          <li className="df">
+            <Keys title="父节点" value={"dddddd"} className="mr20"></Keys>
+            <Keys title="当前节点" value={"dddddd"}></Keys>
+          </li>
+        </div>
+      </Infos>
+      <Operation>
+        <span>
+          <i className="iconfont icon-triangle mr8 color-grey-9 font-16"></i>
+          <span className="color-grey-9">
+            共有<span>3个文件被更改</span>，包括<span className="color-green">20次插入</span><span className="color-red">和3次删除</span>
+          </span>
+        </span>
+        <Button>双栏查看</Button>
+      </Operation>
+
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/forge/Order/order.js b/src/forge/Order/order.js
index 2b9fd204..77e9dbec 100644
--- a/src/forge/Order/order.js
+++ b/src/forge/Order/order.js
@@ -172,24 +172,31 @@ class order extends Component {
     const { current_user } = this.props;
     let option_id = e.key === "all" ? undefined : e.key;
 
+    let author_id = this.state.author_id;
+    let assigned_to_id = this.state.assigned_to_id;
+
     let select_params = this.state.select_params;
     select_params[`${id}`] = option_id;
     select_params.page = 1;
+
     if (current_user) {
-      if (this.state.select_params.author_id && parseInt(this.state.select_params.author_id) === current_user.user_id) {
-        select_params.author_id = current_user.user_id;
+      if (select_params.author_id && select_params.author_id === current_user.user_id) {
+        author_id = current_user.user_id;
       } else {
-        select_params.author_id = undefined;
+        author_id = undefined;
       }
-      if (this.state.select_params.assigned_to_id && parseInt(this.state.select_params.assigned_to_id) === current_user.user_id) {
-        select_params.assigned_to_id = current_user.user_id;
+      if (select_params.assigned_to_id && select_params.assigned_to_id === current_user.user_id) {
+        assigned_to_id = current_user.user_id;
       } else {
-        select_params.assigned_to_id = undefined;
+        assigned_to_id = undefined;
       }
     }
+
     this.setState({
       [`${id}s`] : name,
-      select_params
+      select_params,
+      author_id,
+      assigned_to_id
     });
     if(!toGet){
       this.getIssueList();