refactor: 新建合并请求路由改造

src/App.js

@@ -97,10 +97,10 @@ const ProjectIndex = Loadable({
 	loading: Loading,
 });
 
-const CreateMerge = Loadable({
+// const CreateMerge = Loadable({
-  loader: () => import('./forge/Merge/NewMerge'),
+//   loader: () => import('./forge/Merge/NewMerge'),
-  loading: Loading,
+//   loading: Loading,
-})
+// })
 
 // 此处仅维护前端可能的一级路由，不用进行项目或者组织判断的字段。
 const keyWord = ["explore", "settings", "setting", "mulan", "wiki", "issues", "setting", "trending", "code", "projects", "pulls", "mine", "login", "register", "email", "export", "nopage", "404", "403", "500", "501", "search", "organize"];
@@ -279,7 +279,7 @@ class App extends Component {
 							} />
 
 							{/* 项目PR */}
-							<Route path="/:owner/:projectsId/pulls/new"
+							<Route path="/:owner/:projectsId/compare"
 								render={
 									(props) => (<ProjectDetail {...this.props} {...props} {...this.state} />)
 								}

src/forge/Main/CoderDepot.jsx

@@ -425,7 +425,7 @@ function CoderDepot(props){
                         <div className="addOptionBtn">
                           {
                             baseOperate &&
-                            <CheckProfile {...props} sureFunc={()=>urlLink(`/${owner}/${projectsId}/pulls/new/${branchName || defaultBranch}`)} >+ 合并请求</CheckProfile>
+                            <CheckProfile {...props} sureFunc={()=>urlLink(`/${owner}/${projectsId}/compare/${branchName || defaultBranch}`)} >+ 合并请求</CheckProfile>
                           }
                           {
                             baseOper &&

src/forge/Main/Detail.js

@@ -70,7 +70,7 @@ const MergeIndexDetail = Loadable({
 })
 
 const CreateMerge = Loadable({
-  loader: () => import('../Merge/NewMerge'),
+  loader: () => import('../Merge/CreateMerge'),
   loading: Loading,
 })
 
@@ -150,7 +150,9 @@ function checkPathname(projectsId, owner, pathname) {
       name = "about"
     } else if (url.indexOf("/issues") > -1 || url.indexOf("Milepost") > 0) {
       name = "issues";
-    } else if (url.indexOf("/pulls") > -1) {
+    } else if (url.indexOf("/pulls") > -1 || url.indexOf("/compare") > -1) {
+      // /pulls，合并请求除新建合并请求外，
+      // /compare，新建合并请求
       name = "pulls"
     } else if (url.indexOf("/milestones") > -1) {
       name = "milestones"
@@ -713,17 +715,17 @@ class Detail extends Component {
                   }
                 ></Route>
                 {/* 新建合并请求 */}
-                <Route path="/:owner/:projectsId/pulls/new/:branch"
+                {/* <Route path="/:owner/:projectsId/compare/:branch"
+                  render={
+                    (props) => (<CreateMerge {...this.props} {...props} {...this.state} {...common} is_fork={true} />)
+                  }
+                ></Route> */}
+                <Route path="/:owner/:projectsId/compare"
                   render={
                     (props) => (<CreateMerge {...this.props} {...props} {...this.state} {...common} is_fork={true} />)
                   }
                 ></Route>
-                <Route path="/:owner/:projectsId/pulls/new"
+                <Route path="/:owner/:projectsId/pulls/:mergeId/updatemerge"
-                  render={
-                    (props) => (<CreateMerge {...this.props} {...props} {...this.state} {...common} is_fork={true} />)
-                  }
-                ></Route>
-                <Route path="/:owner/:projectsId/pulls/:mergeId/UpdateMerge"
                   render={
                     (props) => (<UpdateMerge {...this.props} {...props} {...this.state} {...common} />)
                   }

src/forge/Main/tree/Index.jsx

@@ -91,7 +91,7 @@ function Index(props) {
                             <div className="treeabout">
                               {
                                 (isManager || isDeveloper) && (projectDetail && projectDetail.type!==2) &&
-                                <Link to={`/${owner}/${projectsId}/pulls/new/${i.name}`} className="btn-83">+ 合并请求</Link>
+                                <Link to={`/${owner}/${projectsId}/compare/${i.name}`} className="btn-83">+ 合并请求</Link>
                               }
                               <Dropdown overlay={menu(i.zip_url,i.tar_url)} trigger={['click']} placement="bottomRight">
                                 <a className="btn-83 ml15">下载<i className="iconfont icon-sanjiaoxing-down font-14"></i></a>

src/forge/Merge/CreateMerge.js

@@ -0,0 +1,413 @@
+import React, { Component } from 'react';
+import { Input, Select, Spin, Alert } from 'antd';
+import axios from 'axios';
+import MergeForm from './merge_form';
+import MergeFooter from './merge_footer';
+
+import '../Order/order.css';
+import './merge.css';
+
+/**
+ * 根据url获取目标仓库、目标分支、源仓库、源分支
+ * 路由规则：owner/projectId/compare/merge...pullowner:pullBranch
+ * 可能存在的情况
+ * 1、代码库首页跳转，仓库相同，目标分支为默认分支，owner/projectId/compare/pullBranch
+ * 2、代码库分支列表，仓库相同，目标分支为默认分支，owner/projectId/compare/pullBranch
+ * 3、合并请求列表页（新建、无数据时的提示），仓库相同，源、目标都为默认分支，owner/projectId/compare
+ * 4、新建页面，切换分支、切换目标仓库、刷新页面等，存在所有可能情况
+ */
+function getBranchParams(pathname) {
+  const result = {
+    // 目标仓库所有者
+    mergeOwner: undefined,
+    // 目标分支
+    mergeBranch: 'master',
+    // 源仓库所有者
+    pullOwner: undefined,
+    // 源分支
+    pullBranch: 'master',
+    // 仓库名称
+    projectId: undefined,
+  };
+  // 去掉第一个字符/
+  const _pathname = pathname.slice(1);
+  const [ownerProject, branchUrl] = _pathname.split('/compare');
+  const [mergeOwner, projectId] = ownerProject.split('/');
+  // 同仓库时
+  result.mergeOwner = mergeOwner;
+  result.pullOwner = mergeOwner;
+  result.projectId = projectId;
+  if (branchUrl) {
+    // 如果存在具体的分支
+    const _branchUrl = branchUrl.slice(1);
+    if (_branchUrl.indexOf('...') > -1) {
+      // 存在源分支与目标分支
+      const [mergeBranch, pullObj] = _branchUrl.split('...');
+      result.mergeBranch = mergeBranch;
+      if (pullObj.indexOf(':') > -1) {
+        // 存在源仓库
+        const [pullOwner, pullBranch] = pullObj.split(':');
+        result.pullOwner = pullOwner;
+        result.pullBranch = pullBranch;
+      } else {
+        result.pullBranch = pullObj;
+      }
+    } else {
+      result.pullBranch = _branchUrl;
+    }
+  }
+  return result;
+}
+
+const Option = Select.Option;
+
+class CreateMerge extends Component {
+  constructor(props) {
+    super(props);
+    const { pullBranch, mergeBranch } = getBranchParams(
+      this.props.location.pathname
+    );
+    this.state = {
+      data: undefined,
+      pullBranches: undefined,
+      mergeBranches: undefined,
+      mergeProjects: undefined,
+      merge: mergeBranch || 'master',
+      pull: pullBranch || 'master',
+      id: undefined,
+      // isFork: false,
+      projects_names: undefined,
+      isSpin: true,
+      showMessage: false,
+      merge_head: false, // 是否向fork后的源项目发起合并请求
+      defaultMessage: '必须选择不同的分支',
+      project_id: undefined, // 当前项目的id，也即开始发送合并请求的源项目id
+      merge_project_user: undefined,
+      comparesData: undefined, //提交和文件的内容，保存compare接口返回的数据
+      // 比较分支时的加载效果
+      isCompareSpin: true,
+      // 是否是初次加载，用这个字段来控制提示组件和文件组件的显示、隐藏比直接用isCompareSpin交互友好些
+      isFirstLoading: true,
+    };
+  }
+
+  componentDidMount = () => {
+    // 初始化时根据url获取目标仓库、分支，源仓库、分支；
+    // 再获取对应的仓库列表、分支列表
+    // 再调用比较接口
+    const branchParams = getBranchParams(this.props.location.pathname);
+    console.log('componentDidMount branchParams', branchParams);
+    this.getMergeInfo(branchParams);
+  };
+
+  componentDidUpdate = (preProps) => {
+    // url变化触发时（切换源分支、切换目标仓库、切换目标分支；回退）
+    const oldPathname = preProps.location.pathname;
+    const newPathname = this.props.location.pathname;
+    if (oldPathname !== newPathname) {
+      const branchParams = getBranchParams(newPathname);
+      console.log('componentDidUpdate branchParams', branchParams);
+      this.getMergeInfo(branchParams);
+    }
+  };
+
+  //获取新建合并请求数据
+  getMergeInfo = (branchParams) => {
+    this.setState({ isSpin: true });
+    const { pullOwner, pullBranch, mergeOwner, mergeBranch, projectId } =
+      branchParams;
+    const url = `/${pullOwner}/${projectId}/pulls/new.json`;
+    axios
+      .get(url)
+      .then((result) => {
+        if (result) {
+          this.setState({
+            // isFork: result.data.is_fork,
+            projects_names: result.data.projects_names,
+            mergeProjects: result.data.merge_projects,
+            pullBranches: result.data.branches,
+            mergeBranches: result.data.branches,
+            project_id: result.data.project_id,
+            id: result.data.id,
+            merge: mergeBranch,
+            pull: pullBranch,
+          });
+        }
+        if (pullOwner !== mergeOwner) {
+          this.getBranchList(mergeOwner, projectId);
+        }
+        this.compareProject(result.data.id, branchParams);
+        this.setState({ isSpin: false });
+      })
+      .catch((error) => {
+        this.setState({ isSpin: false });
+        console.log(error);
+      });
+  };
+
+  // compare接口，获取分支对比信息
+  compareProject = (baseid, branchParams) => {
+    // const { project } = this.props;
+    // const { owner, projectsId } = this.props.match.params;
+    const projectObj = this.props.project;
+    const { pullOwner, pullBranch, mergeOwner, mergeBranch, projectId } =
+      branchParams;
+
+    let url = `/${mergeOwner}/${projectId}/compare`;
+    if (projectObj) {
+      if (baseid === projectObj.id) {
+        url += `/${pullBranch}...${mergeBranch}.json`;
+      } else {
+        url += `/${mergeBranch}...${pullOwner}/${projectId}:${pullBranch}.json`;
+      }
+      this.setState({ isSpin: false, isCompareSpin: true });
+      axios
+        .get(url)
+        .then((result) => {
+          if (result) {
+            if (result.data.status === 0) {
+              this.setState({
+                showMessage: false,
+              });
+            } else {
+              this.setState({
+                showMessage: true,
+                defaultMessage: result.data.message,
+              });
+            }
+            this.setState({
+              comparesData: result.data,
+            });
+          }
+          this.setState({
+            isFirstLoading: false,
+            isSpin: false,
+            isCompareSpin: false,
+          });
+        })
+        .catch((error) => {
+          this.setState({ isSpin: false, isCompareSpin: false });
+        });
+    }
+  };
+
+  // 根据所有者、仓库名，获取分支列表，目前仅涉及目标仓库分支查询
+  getBranchList = (login, projectId) => {
+    this.setState({ isSpin: true });
+    const url = `/${login}/${projectId}/pulls/get_branches.json`;
+    axios
+      .get(url)
+      .then((result) => {
+        if (result) {
+          this.setState({
+            mergeBranches: result.data,
+          });
+        }
+        this.setState({ isSpin: false });
+      })
+      .catch((error) => {
+        this.setState({ isSpin: false });
+        console.log(error);
+      });
+  };
+
+  // 切换分支事件
+  selectBrach = (type, value) => {
+    const { pullOwner, pullBranch, mergeOwner, mergeBranch, projectId } =
+      getBranchParams(this.props.location.pathname);
+    let _url = `/${mergeOwner}/${projectId}/compare/`;
+    // type为pull时，pullBranch取value，否则取原有值
+    // type为pull时，mergeBranch取原有值，否则取value
+    let _pullBranch = type === 'pull' ? value : pullBranch;
+    let _mergeBranch = type === 'pull' ? mergeBranch : value;
+    if (pullOwner === mergeOwner) {
+      // 如果仓库相同, compare/目标分支...源分支
+      _url += `${_mergeBranch}...${_pullBranch}`;
+    } else {
+      // 如果仓库不同, compare/目标分支...源分支
+      _url += `${_mergeBranch}...${pullOwner}:${_pullBranch}`;
+    }
+    this.props.history.push(_url);
+  };
+
+  // 切换仓库响应事件，目前仅目标分支可切换仓库
+  selectProjectName = (value) => {
+    const { projects_names, id } = this.state;
+    const { pullOwner, pullBranch } = getBranchParams(
+      this.props.location.pathname
+    );
+    let arr =
+      projects_names && projects_names.filter((item) => item.id === value);
+    let identifier = arr && arr[0].project_id;
+    let login = arr && arr[0].project_user_login;
+    // 目标仓库与源仓库不是一个仓库
+    let is_fork = parseInt(value, 10) !== parseInt(id, 10);
+    this.setState({
+      isSpin: true,
+      // merge_head: is_fork,
+      data: {
+        is_original: is_fork,
+        fork_project_id: is_fork ? id : '',
+        merge_user_login: is_fork
+          ? projects_names[0].project_user_login
+          : undefined,
+      },
+    });
+    if (login === pullOwner) {
+      // 如果切换后, 仓库与源仓库一致了
+      this.props.history.push(
+        `/${login}/${identifier}/compare/master...${pullBranch}`
+      );
+    } else {
+      this.props.history.push(
+        `/${login}/${identifier}/compare/master...${pullOwner}:${pullBranch}`
+      );
+    }
+    // this.newMergelist(login, identifier);
+  };
+
+  // 渲染分支列表
+  renderBrances = (list) => {
+    if (list && list.length > 0) {
+      return list.map((item, key) => {
+        return (
+          <Option key={key + 1} value={item.name}>
+            {item.name}
+          </Option>
+        );
+      });
+    }
+  };
+
+  // 渲染项目列表
+  renderProjectNames = (list) => {
+    if (list && list.length > 0) {
+      return list.map((item, key) => {
+        return (
+          <Option key={key + 1} value={item.id}>
+            {item.project_name}
+          </Option>
+        );
+      });
+    }
+  };
+
+  // 渲染html内容
+  withHtml = (html) => {
+    return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
+  };
+
+  render() {
+    const {
+      data,
+      pullBranches,
+      mergeBranches,
+      mergeProjects,
+      pull,
+      merge,
+      isSpin,
+      isCompareSpin,
+      isFirstLoading,
+      showMessage,
+      defaultMessage,
+      projects_names,
+      id,
+      comparesData,
+    } = this.state;
+
+    let { project } = this.props;
+
+    return (
+      <div>
+        <Spin spinning={isSpin}>
+          <div className="main">
+            <div className="merge-header width100 inline-block">
+              <div className="width40 pull-left">
+                <div className="color-grey-3 mb10 fwb">源分支:</div>
+                <Input.Group compact className="display-flex">
+                  <Select
+                    value={id}
+                    className="hide-1 task-hide flex1"
+                    disabled
+                  >
+                    {this.renderProjectNames(projects_names)}
+                  </Select>
+                  <Select
+                    value={pull}
+                    onSelect={(e) => this.selectBrach('pull', e)}
+                    showSearch
+                    className="merge-flex1 flex1"
+                  >
+                    {this.renderBrances(pullBranches)}
+                  </Select>
+                </Input.Group>
+              </div>
+              <div className="width10 pull-left text-center mt25">
+                <i
+                  className={'iconfont icon-youjiang color-grey-c font-32'}
+                ></i>
+              </div>
+              <div className="width40 pull-left">
+                <div>
+                  <div className="color-grey-3 mb10 fwb">目标分支:</div>
+                  <Input.Group compact className="display-flex">
+                    <Select
+                      value={project && project.id}
+                      className="hide-1 task-hide flex1"
+                      onSelect={(e) => this.selectProjectName(e)}
+                    >
+                      {this.renderProjectNames(mergeProjects)}
+                    </Select>
+                    <Select
+                      value={merge}
+                      onSelect={(e) => this.selectBrach('merge', e)}
+                      showSearch
+                      className="merge-flex1 flex1"
+                    >
+                      {this.renderBrances(mergeBranches)}
+                    </Select>
+                  </Input.Group>
+                </div>
+              </div>
+            </div>
+            {/* 非加载状态且有提示 */}
+            {!isCompareSpin && showMessage && (
+              <div className="mb20">
+                <Alert
+                  description={this.withHtml(defaultMessage)}
+                  type="error"
+                />
+              </div>
+            )}
+            {/* 非加载状态且可以提交 */}
+            {!isCompareSpin && !showMessage && (
+              <MergeForm
+                {...this.props}
+                merge_type="new"
+                data={data}
+                merge={merge}
+                pull={pull}
+                files_count={
+                  comparesData &&
+                  comparesData.diff &&
+                  comparesData.diff.files_count
+                }
+                commits_count={comparesData && comparesData.commits_count}
+              ></MergeForm>
+            )}
+          </div>
+          {!isFirstLoading && (
+            <MergeFooter
+              {...this.props}
+              merge={merge}
+              pull={pull}
+              comparesData={comparesData}
+            ></MergeFooter>
+          )}
+        </Spin>
+      </div>
+    );
+  }
+}
+
+export default CreateMerge;

src/forge/Merge/MergeLinkFooter.jsx

@@ -111,10 +111,10 @@ class MergeFooter extends Component {
     } = this.state;
 
     // 评论数量优先取Comment组件中列表接口返回的，其次取合并请求详情接口中的，都没有取默认值0
-    const commentsTotalCount =
+    const commentsTotalCount = parseInt(
-      this.state.commentsTotalCount ||
+      this.state.commentsTotalCount || data.comments_total_count || 0,
-      (data.comments_total_count && parseInt(data.comments_total_count, 10)) ||
+      10
-      0;
+    );
 
     return (
       <div className="main" style={{ paddingTop: '0px' }}>
@@ -128,7 +128,7 @@ class MergeFooter extends Component {
               tab={
                 <Link to={`/${owner}/${projectsId}/pulls/${mergeId}`}>
                   <span className="font-16">评论</span>
-                  {commentsTotalCount && (
+                  {commentsTotalCount > 0 && (
                     <span className="tabNum">{commentsTotalCount}</span>
                   )}
                 </Link>

src/forge/Merge/MessageCount.js

@@ -445,7 +445,7 @@ class MessageCount extends Component {
                             type="green"
                             ghost
                             className="ml20"
-                            onClick={()=>{this.props.history.push(`/${owner}/${projectsId}/pulls/${mergeId}/UpdateMerge`);}}
+                            onClick={()=>{this.props.history.push(`/${owner}/${projectsId}/pulls/${mergeId}/updatemerge`);}}
                           >
                             编辑
                           </Button>

src/forge/Merge/NewMerge.js

@@ -194,7 +194,7 @@ class NewMerge extends Component {
     // this.ischeckmerge();
     let { id ,merge , pull } = this.state;
     if(type==="pull"){
-      this.props.history.push(`/${owner}/${projectsId}/pulls/new/${pull}`)
+      this.props.history.push(`/${owner}/${projectsId}/compare/${pull}`)
       this.compareProject(id,value,merge);
     }else{
       this.compareProject(id,pull,value);
@@ -216,7 +216,7 @@ class NewMerge extends Component {
         merge_user_login: is_fork_id ? projects_names[0].project_user_login : undefined
       }
     })
-    this.props.history.push(`/${login}/${identifier}/pulls/new`);
+    this.props.history.push(`/${login}/${identifier}/compare`);
     this.newMergelist(login,identifier);
   };
 

src/forge/Merge/merge.js

@@ -213,7 +213,7 @@ class merge extends Component {
 
   checkOperation() {
     const { projectsId,owner } = this.props.match.params;
-    this.props.history.push(`/${owner}/${projectsId}/pulls/new`);
+    this.props.history.push(`/${owner}/${projectsId}/compare`);
   }
   render() {
     const { projectsId , owner } = this.props.match.params;

src/forge/Merge/merge_footer.js

@@ -1,169 +1,84 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
-import { Tabs, Spin } from "antd";
+import { Tabs } from 'antd';
-import "../Order/order.css";
+import Commits from './Commits';
-import "./merge.css";
+import Files from './Files';
-import Commits from "./Commits";
+
-import Comments from "../comments/comments";
+import '../Order/order.css';
-import Files from "./Files";
+import './merge.css';
-import axios from 'axios';
+
 const { TabPane } = Tabs;
 
 class MergeFooter extends Component {
-  constructor(props){
+  constructor(props) {
     super(props);
-    this.state={
+    this.state = {
-      pageData:undefined,
+      activeKey: '1',
-      commitsData:undefined,
+    };
-      filesData:undefined,
-      isSpin:false,
-      activeKey:"1",
-      commitCount:0,
-      filesCount:0
-    }
   }
-  componentDidMount=()=>{
+
-    const { footer_type ,data } = this.props;
+  changeTab = (index) => {
-    if(footer_type){
-      const { projectsId , owner , mergeId } = this.props.match.params;
-      this.getCommit(owner,projectsId,mergeId);
-      this.getFile(owner,projectsId,mergeId);
-    }
     this.setState({
-      activeKey:footer_type ? "1" : "2",
+      activeKey: index,
-      commitCount:data && data.commits_count,
+    });
-      filesCount:data && data.files_count
+  };
-    })
-  }
-  componentDidUpdate=(prevProps)=>{
-    const { comparesData } = this.props;
-    const { footer_type } = this.props;
-    if(footer_type){
-      const { data } = this.props;
-      if(data !== prevProps.data){
-        this.setState({
-          commitCount:data && data.commits_count,
-          filesCount:data && data.files_count
-        })
-      }
-    }
-    if(comparesData !== prevProps.comparesData){
-      this.setState({
-        activeKey:footer_type ? "1" : "2"
-      })
-      this.changeTab(footer_type ? "1" : "2");
-    }
-  }
-
-  changeTab=(index)=>{
-    this.setState({
-      isSpin:true
-    })
-    this.setState({
-      activeKey:index
-    })
-    const { footer_type , comparesData } = this.props;
-    const { projectsId , owner , mergeId } = this.props.match.params;
-
-    if(footer_type){
-      if(index === "2"){
-        this.getCommit(owner,projectsId,mergeId);
-      }else if(index === "3"){
-        this.getFile(owner,projectsId,mergeId);
-      }else{
-        this.setState({
-          isSpin:false
-        })
-      }
-    }else{
-      this.setState({
-        commitsData:comparesData.commits,
-        filesData:comparesData.diff,
-        commitCount:comparesData.commits_count,
-        filesCount:comparesData.diff && comparesData.diff.files_count,
-        isSpin:false
-      })
-    }
-  }
-
-  getCommit =(owner,projectsId,mergeId)=>{
-    const url = `/${owner}/${projectsId}/pulls/${mergeId}/commits.json`;
-    axios.get(url).then(result=>{
-      if(result){
-        this.setState({
-          commitsData:result.data.commits,
-          isSpin:false,
-          commitCount:result.data.commits_count
-        })
-      }
-    }).catch(error=>{})
-  }
-  
-  getFile =(owner,projectsId,mergeId)=>{
-    const url = `/${owner}/${projectsId}/pulls/${mergeId}/files.json`;
-    axios.get(url).then(result=>{
-      if(result){
-        this.setState({
-          filesData:result.data,
-          isSpin:false,
-          filesCount:result.data.files_count,
-        })
-      }
-    }).catch(error=>{})
-  }
 
   render() {
-    const { projectsId , owner } = this.props.match.params;
+    const { projectsId, owner } = this.props.match.params;
+    const { comparesData = {} } = this.props;
+    const { commits, diff, commits_count } = comparesData;
+    const { activeKey } = this.state;
 
-    const { footer_type, order_id, data , comparesData } = this.props;
+    return (commits && commits.length === 0) || !diff ? (
-    let { isSpin , activeKey , filesCount, commitCount , filesData , commitsData } = this.state;
+      ''
-
+    ) : (
-    return (
+      <div className="main mergeRequest" style={{ paddingTop: '0px' }}>
-      !footer_type && !comparesData || (comparesData && ((comparesData.commits && comparesData.commits.length===0)||(comparesData && !comparesData.diff)) )?"":
+        <Tabs
-      <div className="main mergeRequest" style={{paddingTop:"0px"}}>
+          activeKey={activeKey}
-        <Spin spinning={isSpin}>
+          className="custom-commit-tabs"
-          <Tabs
+          animated={false}
-            activeKey={activeKey}
+          onChange={this.changeTab}
-            className="custom-commit-tabs"
+        >
-            animated={false}
+          {commits && commits.length > 0 && (
-            onChange={this.changeTab}
+            <TabPane
-          >
+              tab={
-            {
+                <span>
-              footer_type &&
+                  <span className="font-16">提交</span>
-              <TabPane
+                  {commits_count > 0 && (
-                tab={
+                    <span className="tabNum">{commits_count}</span>
-                  <span><span className="font-16">评论</span>
+                  )}
-                    {data && parseInt(data.comments_count) > 0 && <span className="tabNum">{data.comments_count}</span>}
+                </span>
-                  </span>
+              }
-                } key="1">
+              key="1"
-                <Comments
+            >
-                  order_id={order_id}
+              <Commits
-                  showNotification={this.props.showNotification}
+                {...this.props}
-                  only_show_content={true}
+                commits={commits}
-                  {...this.props}
+                projectsId={projectsId}
-                />
+                owner={owner}
-              </TabPane>
+              ></Commits>
-            }
+            </TabPane>
-            {
+          )}
-              commitsData && commitsData.length > 0 &&
+          {diff && diff.files && diff.files.length > 0 && (
-              <TabPane tab={<span><span className="font-16">提交</span>
+            <TabPane
-                {commitCount > 0 && <span className="tabNum">{commitCount}</span>}
+              tab={
-              </span>} key="2">
+                <span>
-                <Commits {...this.props} commits={commitsData} projectsId={projectsId} owner={owner}></Commits>
+                  <span className="font-16">文件</span>
-              </TabPane>
+                  {diff.files_count > 0 && (
-            }
+                    <span className="tabNum">{diff.files_count}</span>
-            {
+                  )}
-              filesData && filesData.files && filesData.files.length>0 &&
+                </span>
-                <TabPane tab={
+              }
-                  <span><span className="font-16">文件</span>
+              key="3"
-                    {filesCount > 0 && <span className="tabNum">{filesCount}</span>}
+            >
-                  </span>
+              <Files
-                } key="3">
+                {...this.props}
-                <Files {...this.props} data={filesData} projectsId={projectsId} owner={owner}/>
+                data={diff}
-              </TabPane>
+                projectsId={projectsId}
-            }
+                owner={owner}
-            
+              />
-          </Tabs>
+            </TabPane>
-        </Spin>
+          )}
+        </Tabs>
       </div>
     );
   }

src/forge/Merge/merge_form.js

@@ -165,7 +165,8 @@ class MergeForm extends Component {
               this.setState({
                 isSpin: false,
               });
-              this.props.history.push(`/${owner}/${projectsId}/pulls`);
+              const { pull_request_id } = result.data;
+              this.props.history.push(`/${owner}/${projectsId}/pulls/${pull_request_id}`);
               const { getDetail } = this.props;
               getDetail && getDetail();
             } else {

src/forge/Merge/no_data.js

@@ -12,7 +12,7 @@ class Nodata extends Component{
           <h3>欢迎使用合并请求！</h3>
         
           <div className="color-grey-8">
-          合并请求可以帮助您与他人协作编写代码。在使用之前，请先创建一个 <Link className="color-blue" to={`/${owner}/${projectsId}/pulls/new`}>合并请求</Link>
+          合并请求可以帮助您与他人协作编写代码。在使用之前，请先创建一个 <Link className="color-blue" to={`/${owner}/${projectsId}/compare`}>合并请求</Link>
           </div>
         </div>
       </div>