forgeplus-react/src/forge/Main/Detail.js

import React, { Component } from 'react';
import { Spin, Tooltip } from 'antd';
import { Link, Route, Switch } from 'react-router-dom';
import { Content, AlignTop } from '../Component/layout';
import DetailBanner from './sub/DetailBanner';
import cookie from 'react-cookies';
import '../css/index.scss'
import './list.scss';

import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC";


import Loadable from 'react-loadable';
import Loading from '../../Loading';

import axios from 'axios';

const Setting = Loadable({
  loader: () => import('../Settings/Index'),
  loading: Loading,
})
const TagList = Loadable({
  loader: () => import('../Order/Tags'),
  loading: Loading,
})
const OrderNew = Loadable({
  loader: () => import('../Order/New'),
  loading: Loading,
})
const OrderDetail = Loadable({
  loader: () => import('../Order/Detail'),
  loading: Loading,
})
const OrderIndex = Loadable({
  loader: () => import('../Order/order'),
  loading: Loading,
})
const CoderRootIndex = Loadable({
  loader: () => import('./CoderRootIndex'),
  loading: Loading,
})
const OrderMilepost = Loadable({
  loader: () => import('../Order/Milepost'),
  loading: Loading,
})

const OrdernewMilepost = Loadable({
  loader: () => import('../Order/newMilepost'),
  loading: Loading,
})

const OrderupdateMilepost = Loadable({
  loader: () => import('../Order/UpdateMilepost'),
  loading: Loading,
})

const OrderupdateDetail = Loadable({
  // loader: () => import('../Order/UpdateDetail'),
  loader: () => import('../Order/order_form'),
  loading: Loading,
})

const OrdercopyDetail = Loadable({
  loader: () => import('../Order/CopyDetail'),
  loading: Loading,
})

//合并请求
const MergeIndexDetail = Loadable({
  loader: () => import('../Merge/merge'),
  loading: Loading,
})

//合并请求
const QualityAnalyse = Loadable({
  loader: () => import('../Quality/index'),
  loading: Loading,
})

const CreateMerge = Loadable({
  loader: () => import('../Merge/CreateMerge'),
  loading: Loading,
})

const MessageCount = Loadable({
  loader: () => import('../Merge/MessageCount'),
  loading: Loading,
})

const UpdateMerge = Loadable({
  loader: () => import('../Merge/UpdateMerge'),
  loading: Loading,
})

const MilepostDetail = Loadable({
  loader: () => import('../Order/MilepostDetail'),
  loading: Loading,
})
const WatchUsers = Loadable({
  loader: () => import('../UsersList/watch_users'),
  loading: Loading,
})
const PraiseUsers = Loadable({
  loader: () => import('../UsersList/praise_users'),
  loading: Loading,
})
const ForkUsers = Loadable({
  loader: () => import('../UsersList/fork_users'),
  loading: Loading,
})
const Contribute = Loadable({
  loader: () => import('./sub/Contribute'),
  loading: Loading,
})

const CoderRootCommit = Loadable({
  loader: () => import('./CoderRootCommit'),
  loading: Loading,
})
const CoderDepot = Loadable({
  loader: () => import('./CoderDepot'),
  loading: Loading,
})

const TrendsIndex = Loadable({
  loader: () => import('../Activity/Activity'),
  loading: Loading,
})

const DevAbout = Loadable({
  loader: () => import('../About/Index'),
  loading: Loading,
})
const Source = Loadable({
  loader: () => import('../Source/Index'),
  loading: Loading,
})
const Server = Loadable({
  loader: () => import('../Server/Index'),
  loading: Loading,
})
const DevIndex = Loadable({
  loader: () => import('../DevOps/Index'),
  loading: Loading,
});
const Wiki = Loadable({
  loader: () => import('../Wiki/Index'),
  loading: Loading,
});
const WikiEdit = Loadable({
  loader: () => import('../Wiki/EditWiki'),
  loading: Loading,
});
/**
 * permission：Manager:管理员，Reporter：报告人员(只有读取权限)，Developer：开发人员（除不能设置仓库信息外）
 */
function checkPathname(projectsId, owner, pathname) {
  let name = "";
  if (pathname && pathname !== `/${owner}/${projectsId}`) {
    let url = pathname.split(`/${owner}/${projectsId}`)[1] || "";
    if (url.indexOf("/about") > -1) {
      name = "about"
    } else if (url.indexOf("/issues") > -1 || url.indexOf("Milepost") > 0) {
      name = "issues";
    } else if (url.indexOf("/pulls") > -1 || url.indexOf("/compare") > -1) {
      // /pulls，合并请求除新建合并请求外，
      // /compare，新建合并请求
      name = "pulls"
    } else if (url.indexOf("/milestones") > -1) {
      name = "milestones"
    } else if (url.indexOf("/activity") > -1) {
      name = "activity"
    } else if (url.indexOf("/settings") > -1) {
      name = "settings"
    } else if (url.indexOf(`/devops`) > -1) {
      name = "devops"
    } else if (url.indexOf(`/source`) > -1) {
      name = "source"
    } else if (url.indexOf(`/wiki`) > -1) {
      name = "wiki"
    } else if (url.indexOf(`/server`) > -1) {
      name = "server"
    }
  }
  return name;
}
class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      projectDetail: undefined,
      isManager: false,
      isReporter: false,
      isDeveloper: false,
      project_id: undefined,
      watchers_count: undefined,
      praises_count: undefined,
      forked_count: undefined,
      watched: false,
      praised: false,
      http_url: undefined,
      branchs: undefined,
      branchList: undefined,
      project: null,
      firstSync: false,
      secondSync: false,
      open_devops: false,
      forkSpin: false,
      // 默认分支
      defaultBranch: undefined,

      // 非本平台项目
      platform: false
    }
  }

  componentDidMount = () => {
    this.getProject();
    let history = this.props.location;
    this.clearIssueCookies(history);
  }

  componentDidUpdate = (prevState) => {
    let prevParam = prevState.match.params;
    let propsParam = this.props.match.params;
    if (prevState && this.props && (prevParam.projectsId !== propsParam.projectsId || prevParam.owner !== propsParam.owner)) {
      this.getProject();
    }

    this.props.history.listen((history) => {
      // 非issue链接地址清除cookie states，具体保存和操作在order.js页面
      this.clearIssueCookies(history);
    })
  }

  clearIssueCookies=(history)=>{
    const { pathname } = history;
    const { projectsId , owner } = this.props.match.params;
    let currentIssue = pathname.indexOf(`/${owner}/${projectsId}/issues`) === -1;
    if (currentIssue) {
      cookie.save('states', undefined,{ expires: 0,path:`/` });
    }
  }

  componentWillUnmount() {
    this.timerChannel && clearTimeout(this.timerChannel);
  }

  getProject = (num) => {
    const { projectsId, owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/simple.json`;
    axios.get(url).then((result) => {
      if (result && result.data) {
        this.setState({
          project: result.data,
          open_devops: result.data.open_devops,
          platform: result.data.platform && result.data.platform !== 'educoder'
        })

        if (result.data.type !== 0 && result.data.mirror_status === 1) {
          console.log("--------start channel --------");
          // 是镜像项目，且未完成迁移
          this.canvasChannel();
          if (num) {
            this.setState({
              secondSync: true,
              firstSync: false
            })
          } else {
            this.setState({
              firstSync: true,
              secondSync: false
            })
          }
        } else if (result.data.mirror_status === 2) {
          this.deleteProjectBack();
        } else {
          this.getBanner();
          this.getDetail();
          this.setState({
            firstSync: false,
            secondSync: false
          })
        }
      }
    })
  }

  // 工作流激活后修改状态
  changeOpenDevops = (flag) => {
    // this.setState({
    //   open_devops: flag
    // })
    this.getProject();
  }
  /**
   * 
   * @param {*} deleteFlag ：同步镜像需要提示成功，且未成功的情况下不需要删除项目
   */
  canvasChannel = (deleteFlag) => {
    const name = window.location.hostname === "localhost" ? "testforgeplus.trustie.net" : window.location.hostname;
    const actioncable = require("actioncable");
    var project = this.state.project;
    var cable = actioncable.createConsumer(`wss://${name}/cable`);
    this.canvasChannel1 = cable.subscriptions.create({
      channel: `MirrorProjectChannel`,
      id: project && project.id
    }, {
      connected: () => {
        console.log("###### channel connected! ######");
      },
      disconnected: () => {
        console.log("###### cannot connected! ######");
       },
      received: data => {
        console.log(`###### ---received data--- ######`);
        console.log(data);
        if (data) {
          if(deleteFlag){
            this.props.showNotification("镜像同步成功!");
            window.location.reload();
          }else{
            if (data.project && data.project.mirror_status === 2) {
              this.deleteProjectBack();
            }
            this.getDetail();
            this.getBanner();
          }
          this.setState({
            firstSync: false,
            secondSync: false
          });
          cable.subscriptions.consumer.disconnect();
        }
      },
      onerror:()=>{
        console.log("###### cannot connected! ######");
      }
    });

    this.timerChannel = setTimeout(this.reloadDetail,5000);
  }

  reloadDetail=()=>{
    if(this.state.firstSync||this.state.secondSync){
      window.location.reload();
    }
  }
  

  deleteProjectBack = () => {
    const { history } = this.props;
    const { projectsId, owner } = this.props.match.params;
    axios.delete(`/${owner}/${projectsId}.json`).then(res => {
      let hash = '/projects/mirror/new';
      if (res && res.data) {
        history.push({
          pathname: hash,
          mirror_status: 2
        });
      }
      else {
        window.location.hash = hash;
      }
    });
  }

  getDetail = () => {
    const { projectsId, owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/detail.json`;
    axios.get(url).then((result) => {
      if (result && result.data) {
        if (result.data.status === 404) {
          this.props.history.push('/nopage');
        }
        this.setState({
          projectDetail: result.data,
          project_id: result.data.project_id,
          isManager: result.data.permission && (result.data.permission === "Manager" || result.data.permission === "Admin" || result.data.permission === "Owner"),
          isReporter: result.data.permission && result.data.permission === "Reporter",
          isDeveloper: result.data.permission && result.data.permission === "Developer",
          http_url: result.data.clone_url,
          praised: result.data.praised,
          watched: result.data.watched,
          watchers_count: result.data.watchers_count,
          praises_count: result.data.praises_count,
          forked_count: result.data.forked_count,
          defaultBranch: result.data.default_branch
        })
      }
    }).catch((error) => { })
  }

  // 获取动态导航栏菜单
  getBanner() {
    const { projectsId, owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/menu_list.json`;
    axios.get(url).then(result => {
      if (result) {
        this.setState({
          bannerList: result.data
        })
      }
    }).catch(error => { })
  }

  // 关注和取消关注
  focusFunc = (flag) => {
    const { platform } = this.state;
    if (!platform) return;

    const { project_id } = this.state;
    axios({
      method: flag ? 'delete' : 'post',
      url: `/watchers/${flag ? 'unfollow' : 'follow'}.json`,
      params: {
        target_type: "project",
        id: project_id
      }
    }).then(result => {
      if (result && result.data.status === 0) {
        this.setWatchersCount(result.data.watchers_count, result.data.watched);
      }
    })
      .catch(error => {
        console.log(error);
      });
  }

  // 点赞和取消点赞
  pariseFunc = (flag) => {
    const { platform } = this.state;
    if (!platform) return;
    const { project_id } = this.state;
    axios({
      method: flag ? 'delete' : 'post',
      url: `/projects/${project_id}/praise_tread/${flag ? 'unlike' : 'like'}.json`
    }).then(result => {
      if (result && result.data.status === 0) {
        this.setPraisesCount(result.data.praises_count, result.data.praised)
      }
    })
      .catch(error => {
        console.log(error);
      });
  }

  setWatchersCount = (count, is_watched) => {
    this.setState({
      watched: is_watched,
      watchers_count: count
    })
  }

  setPraisesCount = (count, is_praised) => {
    this.setState({
      praised: is_praised,
      praises_count: count
    })
  }

  // fork项目
  forkFunc = () => {
    const { platform } = this.state;
    if (!platform) return;
    this.setState({
      forkSpin: true
    })
    const { current_user } = this.props
    const { projectsId, owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/forks.json`;
    axios.post(url).then(result => {
      if (result && result.data.status === 0) {
        if(result.data.message === "fork失败，你已拥有了这个项目"){
          this.props.history.push(`/${current_user && current_user.login}/${projectsId}`);
          return;
        }
        this.props.history.push(`/${current_user && current_user.login}/${result.data.identifier}`);
        this.props.showNotification(result.data.message);
      }
      this.setState({
        forkSpin: false
      })
    }).catch(error => {
      this.setState({
        forkSpin: false
      })
    })
  }

  // 同步镜像
  synchronismMirror = () => {
    const { platform } = this.state;
    if (!platform) return;
    const { projectsId, owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/sync_mirror.json`;
    axios.post(url).then(result => {
      if (result && result.data && result.data.status === 0) {
        this.setState({
          secondSync:true
        })
        this.canvasChannel(true);
      } else {
        this.props.showNotification("镜像同步失败!");
      }
    }).catch(error => {
      console.log(error);
    })
  }

  textFunc = (forked_from_project_id, fork_info) => {
    let type = fork_info && fork_info.fork_project_user_type;
    return forked_from_project_id && fork_info ?
      <div className="color-grey-9 df">
        <span>复刻自</span>
        <Link to={`/${fork_info.fork_project_user_login}`} className="show-user-link color-grey-6 ml5">{fork_info.fork_project_user_name}</Link>
        <span> / </span>
        <Link to={`/${fork_info.fork_project_user_login}/${fork_info.fork_project_identifier}`} className="color-grey-6 task-hide flex1" style={{ maxWidth: "400px" }} title={fork_info.fork_form_name}>{fork_info.fork_form_name}</Link>
      </div> : ""
  }


  render() {
    const { projectDetail, watchers_count, praises_count,
      forked_count, firstSync, secondSync,
      isManager, watched, praised,
      project, open_devops, platform, defaultBranch, bannerList, forkSpin } = this.state;
    const url = this.props.history.location.pathname;
    const urlArr = url.split("/");
    const urlFlag = (urlArr.length === 3);

    const { projectsId, owner } = this.props.match.params;
    const { current_user } = this.props;
    let pathname = checkPathname(projectsId, owner, url);

    const { state } = this.props.history.location;

    const common = {
      getDetail: this.getDetail,
      getBanner:this.getBanner,
      changeOpenDevops: this.changeOpenDevops,
      defaultBranch
    }
    return (
      <div>
        <div className="detailHeader-wrapper">
          <div className="normal">
            <AlignTop style={{ padding: "18px 0px 10px", justifyContent: "space-between" }}>
              <div>
                <AlignTop>
                  <div className="projectallName">
                    {project && project.author &&
                      <Link to={`/${project.author.login}`}>{project.author.name}</Link>
                    }
                    <span className="ml5 mr5">/</span>
                    <Link to={`/${owner}/${projectsId}`} className="projectN mt6">{projectDetail && projectDetail.name}</Link>
                  </div>
                  {projectDetail && projectDetail.private && <span className="privateTag mt6">私有</span>}
                  { !platform && <span className="privateTag red mt6">只读</span> }
                </AlignTop>
                <div className="mt8">
                  {
                    projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
                      this.textFunc(projectDetail.forked_from_project_id, projectDetail.fork_info)
                      : ""
                  }
                </div>
              </div>
              <div>
                {
                  firstSync ? "" :
                    <span className="df">
                      {
                        ((current_user && current_user.admin) || isManager) && (projectDetail && projectDetail.type && projectDetail.type === 2) ?
                          <a className="synchronism ml30" onClick={this.synchronismMirror}>同步镜像</a> : ""
                      }
                      <span className="detail_tag_btn">
                        <a className="detail_tag_btn_name" style={{ cursor: platform ? "pointer" : "default" }} onClick={() => this.focusFunc(watched)}>
                          <i className={watched ? "iconfont icon-shixing color-orange font-16 mr3" : "iconfont icon-kongxing color-grey-9 font-16 mr3"}></i>
                          <span>{watched ? '取消关注' : '关注'}</span>
                        </a>
                        {
                          watchers_count > 0 ?
                            platform ?
                              <Link className="detail_tag_btn_count" style={{ color: `#666` }} to={platform ? { pathname: `/${owner}/${projectsId}/following`, state } : ""}>
                                {watchers_count}
                              </Link>
                              :
                              <span className="detail_tag_btn_count">{watchers_count}</span>
                            : ""
                        }
                      </span>
                      <span className="detail_tag_btn">
                        <a className="detail_tag_btn_name" style={{ cursor: platform ? "pointer" : "default" }} onClick={() => this.pariseFunc(praised)}>
                          <i className={praised ? "iconfont icon-weibiaoti105 color-orange font-14 mr3" : "iconfont icon-guanzhu color-grey-9 font-14 mr3"}></i>
                          <span>{praised ? '取消点赞' : '点赞'}</span>
                        </a>
                        {
                          praises_count > 0 ?
                            platform ?
                              <Link className="detail_tag_btn_count" style={{ color: `#666` }} to={{ pathname: `/${owner}/${projectsId}/stargazers`, state }}>
                                {praises_count}
                              </Link> :
                              <span className="detail_tag_btn_count">{praises_count}</span>
                            : ""
                        }
                      </span>
                      <span className="detail_tag_btn" loading={forkSpin}>
                        <Tooltip title="复刻是fork的中文名，即复制代码仓库" placement="bottom">
                          <a className="detail_tag_btn_name" style={{ cursor: platform ? "pointer" : "default" }} onClick={this.forkFunc}>
                            <i className="iconfont icon-fork color-grey-9 mr3 font-16"></i><span>复刻(Fork)</span>
                          </a>
                        </Tooltip>
                        {
                          forked_count > 0 ?
                            platform ?
                              <Link className="detail_tag_btn_count" to={{ pathname: `/${owner}/${projectsId}/members`, state }}>
                                {forked_count}
                              </Link>
                              :
                              <span className="detail_tag_btn_count">{forked_count}</span>
                            : ""
                        }
                      </span>
                    </span>
                }
              </div>
            </AlignTop>
            {/* <div className="mt6" style={{minHeight:"20px"}}>
              {
                projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
                this.textFunc(projectDetail.forked_from_project_id,projectDetail.fork_info)
                :""
              }
              {
                projectDetail && projectDetail.type && projectDetail.type !== 0 ? 
                <span className="color-grey-9">镜像自 <a className="color-blue hoverLine" target="_blank" href={projectDetail.mirror_url}>{projectDetail.mirror_url}</a></span>
                :""
              }
            </div> */}
            {
              firstSync ? "" :
                <DetailBanner
                  history={this.props.history}
                  list={bannerList}
                  owner={owner}
                  projectsId={projectsId}
                  pathname={pathname}
                  state={state}
                  projectDetail={projectDetail}
                  open_devops={open_devops}
                  platform={platform}
                  urlFlag={urlFlag}
                  showNotification={this.props.showNotification}
                  current_user={current_user}
                />
            }
          </div>
        </div>
        {
          firstSync ?
            <Content className="spincontent">
              <Spin className="spinstyle" tip={project && `正在从 ${project.mirror_url} 迁移`} size="large" />
            </Content>
            :
            <Spin spinning={secondSync} className="spinstyle" tip="正在同步镜像" size="large">
              <Switch {...this.props}>
                {/* 服务 */}
                <Route path="/:owner/:projectsId/server"
                  render={
                    () => (<Server {...this.props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 资源 */}
                <Route path="/:owner/:projectsId/source"
                  render={
                    () => (<Source {...this.props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 主页 */}
                <Route path="/:owner/:projectsId/about"
                  render={
                    () => (<DevAbout {...this.props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* wiki新增文件 */}
                <Route path="/:owner/:projectsId/wiki/add"
                  render={
                    () => (<WikiEdit {...this.props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* wiki编辑文件 */}
                <Route path="/:owner/:projectsId/wiki/edit/:wikiName"
                  render={
                    () => (<WikiEdit {...this.props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* wiki */}
                <Route path="/:owner/:projectsId/wiki"
                  render={
                    () => (<Wiki {...this.props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 工作流 */}
                <Route path="/:owner/:projectsId/devops"
                  render={
                    () => (<DevIndex {...this.props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 标签列表 */}
                <Route path="/:owner/:projectsId/issues/tags"
                  render={
                    (props) => (<TagList {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 仓库设置 */}
                <Route path="/:owner/:projectsId/settings"
                  render={
                    (props) => (<Setting {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
               
                {/*修改里程碑*/}
                <Route path="/:owner/:projectsId/milestones/:meilid/edit"
                  render={
                    (props) => (<OrderupdateMilepost {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 新建里程碑 */}
                <Route path="/:owner/:projectsId/milestones/new"
                  render={
                    (props) => (<OrdernewMilepost {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                {/*里程碑详情*/}
                <Route path="/:owner/:projectsId/milestones/:meilid"
                  render={
                    (props) => (<MilepostDetail {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 里程碑 */}
                <Route path="/:owner/:projectsId/milestones"
                  render={
                    (props) => (<OrderMilepost {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 里程碑页面新建任务 */}
                <Route path="/:owner/:projectsId/issues/:milepostId/new"
                  render={
                    (props) => (<OrderNew {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 新建任务 */}
                <Route path="/:owner/:projectsId/issues/new"
                  render={
                    (props) => (<OrderNew {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 修改详情 edit*/}
                <Route path="/:owner/:projectsId/issues/:orderId/edit"
                  render={
                    (props) => (<OrderupdateDetail  {...this.props} {...props} {...this.state} {...common} form_type={"edit"}/>)
                  }
                ></Route>
                {/* 复制详情 copyetail*/}
                <Route path="/:owner/:projectsId/issues/:orderId/copyetail"
                  render={
                    (props) => (<OrderupdateDetail  {...this.props} {...props} {...this.state} {...common} form_type={"copy"}/>)
                  }
                ></Route>
               
                 {/* 任务详情 */}
                 <Route path="/:owner/:projectsId/issues/:orderId"
                  render={
                    (props) => (<OrderDetail {...this.props} {...this.state} {...props} {...common} />)
                  }
                ></Route>
                {/* 动态 */}
                {/* <Route path="/:owner/:projectsId/activity"
                  render={
                    (props) => (<TrendsIndex {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route> */}
                <Route path="/:owner/:projectsId/sonar"
                  render={
                    (props) => (<QualityAnalyse {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 代码Index */}
                <Route path="/:owner/:projectsId/issues"
                  render={
                    (props) => (<OrderIndex {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 新建合并请求 */}
                {/* <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/:mergeId/edit"
                  render={
                    (props) => (<UpdateMerge {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                <Route path="/:owner/:projectsId/pulls/:mergeId"
                  render={
                    (props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                <Route path="/:owner/:projectsId/pulls/:mergeId/commits"
                  render={
                    (props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                <Route path="/:owner/:projectsId/pulls/:mergeId/files"
                  render={
                    (props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                <Route path="/:owner/:projectsId/pulls/:mergeId/MergeSubmit"
                  render={
                    (props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>

                <Route path="/:owner/:projectsId/pulls"
                  render={
                    (props) => (<MergeIndexDetail {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                <Route path="/:owner/:projectsId/following"
                  render={
                    (props) => (<WatchUsers {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                <Route path="/:owner/:projectsId/stargazers"
                  render={
                    (props) => (<PraiseUsers {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                <Route path="/:owner/:projectsId/members"
                  render={
                    (props) => (<ForkUsers {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                {/* 贡献者列表 */}
                <Route path="/:owner/:projectsId/contribute"
                  render={
                    () => (<Contribute {...this.props} {...this.state} {...common} />)
                  }
                ></Route>

                {/* 代码库----详情页面 */}
                <Route path="/:owner/:projectsId/commits/branch/:branchName"
                  render={
                    (props) => (<CoderRootCommit {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                <Route path="/:owner/:projectsId/tree/:branchName"
                  render={
                    (props) => (<CoderDepot {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                <Route path="/:owner/:projectsId/:subIndex"
                  render={
                    (props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
                <Route path="/:owner/:projectsId"
                  render={
                    (props) => (<CoderDepot {...this.props} {...props} {...this.state} {...common} />)
                  }
                ></Route>
              </Switch>
            </Spin>
        }
      </div>
    )
  }
}

export default ImageLayerOfCommentHOC({
  imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
  parentSelector: ".newContainer",
})(Detail);