forgeplus-react/src/forge/Settings/Index.js

import React, { Component } from "react";
import { Link, Route, Switch } from "react-router-dom";

import "../css/index.scss";
import "./setting.scss";

import Loadable from "react-loadable";
import Loading from "../../Loading";
import { Box, Long, Short, Gap } from '../Component/layout';
import {Badge} from 'antd'

const BranchNew = Loadable({
  loader: () => import("./BranchRule"),
  loading: Loading,
});
const Branch = Loadable({
  loader: () => import("./Branch"),
  loading: Loading,
});
const Audit = Loadable({
  loader: () => import("./Audit"),
  loading: Loading,
});
const Setting = Loadable({
  loader: () => import("./Setting"),
  loading: Loading,
});
const Collaborator = Loadable({
  loader: () => import("./Collaborator"),
  loading: Loading,
});
const Tags = Loadable({
  loader: () => import("./new_tags"),
  loading: Loading,
});
const Manage = Loadable({
  loader: () => import("./ManageWeb"),
  loading: Loading,
});
const ManageNew = Loadable({
  loader: () => import("./ManageWebNew"),
  loading: Loading,
});
class Index extends Component {
  render() {
    const { projectsId , owner } = this.props.match.params;
    const { pathname } = this.props.history.location;

    const flag = pathname === `/projects/${owner}/${projectsId}/setting`;
    return (
      <Box className="ProjectListIndex">
        <Short>
          <ul className="list-l-Menu">
            <li className={flag ? "active" : ""}>
              <p>
                <Link to={`/projects/${owner}/${projectsId}/setting`} className="w-100">
                  <i className="iconfont icon-huabanfuben font-18 mr10"></i>基本设置
                </Link>
              </p>
            </li>
            <li
              className={
                pathname.indexOf("setting/collaborator") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={`/projects/${owner}/${projectsId}/setting/collaborator`} className="w-100">
                  <i className="iconfont icon-chengyuan font-18 mr10"></i>
                  协作者管理
                </Link>
              </p>
            </li>
            <li
              className={
                pathname.indexOf("setting/audit") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={`/projects/${owner}/${projectsId}/setting/audit`} className="w-100">
                <i className="iconfont icon-zhongqingdianxinicon10 font-18 mr10"></i>
                {(this.props.projectDetail && this.props.projectDetail.pending_verify_count) ?  <Badge dot offset={[6,-2]}><span style={{color:'#05101a',fontSize:'16px'}}>审核管理</span></Badge> : '审核管理'}
                </Link>
              </p>
            </li>
            <li
              className={
                pathname.indexOf("setting/branch") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={`/projects/${owner}/${projectsId}/setting/branch`} className="w-100">
                <i className="iconfont icon-fenzhi font-20 mr10"></i>
                  分支设置
                </Link>
              </p>
            </li>
            <li
              className={pathname.indexOf("setting/tags") > -1 ? "active" : ""}
            >
              <p>
                <Link to={`/projects/${owner}/${projectsId}/setting/tags`} className="w-100">
                  <i className="iconfont icon-biaoqian3 font-18 mr10 color-grey-6"></i>
                  项目标签
                </Link>
              </p>
            </li>

            {/* <li
              className={
                pathname.indexOf("setting/manage") > -1 ? "active" : ""
              }
            >
              <p>
                <Link to={""} className="w-100">
                <i className="iconfont icon-zhongqingdianxinicon10 font-18 mr10"></i>
                  管理Web钩子
                </Link>
              </p>
            </li> */}
          </ul>
        </Short>
        <Long>
          <Gap className="list-r-Info">
            <Switch {...this.props}>
              {/* 协作者 */}
              <Route
                path="/projects/:owner/:projectsId/setting/collaborator"
                render={(props) => (
                  <Collaborator {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              {/* 修改仓库信息 */}
              <Route
                path="/projects/:owner/:projectsId/setting/tags"
                render={(props) => (
                  <Tags {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              <Route
                path="/projects/:owner/:projectsId/setting/branch/:branch"
                render={(props) => (
                  <BranchNew {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              <Route
                path="/projects/:owner/:projectsId/setting/audit"
                render={(props) => (
                  <Audit {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              <Route
                path="/projects/:owner/:projectsId/setting/branch"
                render={(props) => (
                  <Branch {...this.props} {...props } {...this.state} />
                )}
              ></Route>
              <Route
                path="/projects/:owner/:projectsId/setting/manage/new"
                render={(props) => (
                  <ManageNew {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              <Route
                path="/projects/:owner/:projectsId/setting/manage"
                render={(props) => (
                  <Manage {...this.props} {...props} {...this.state} />
                )}
              ></Route>
              {/* 修改仓库信息 */}
              <Route
                path="/projects/:owner/:projectsId/setting"
                render={(props) => (
                  <Setting {...this.props} {...props} {...this.state} />
                )}
              ></Route>
            </Switch>
          </Gap>
        </Long>
      </Box>
    );
  }
}
export default Index;