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';

const BranchNew = Loadable({
  loader: () => import("./BranchRule"),
  loading: Loading,
});
const Branch = Loadable({
  loader: () => import("./Branch"),
  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 Special = Loadable({
  loader: () => import("./SpecialProject"),
  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 { projectDetail } = this.props;

    const flag = pathname === `/projects/${owner}/${projectsId}/setting`;
    return (
      <div className="ProjectListIndex">
        <div style={{width:"28%",borderRadius:"5px",marginBottom:"30%"}}>
          <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/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"></i>
                  项目标签
                </Link>
              </p>
            </li>
            {
              projectDetail && projectDetail.permission && (projectDetail.permission === "Owner" || projectDetail.permission === "Admin") ?
              <li
                className={pathname.indexOf("setting/special") > -1 ? "active" : ""}
              >
                <p>
                  <Link to={`/projects/${owner}/${projectsId}/setting/special`} className="w-100">
                    <i className="iconfont icon-jingyan font-18 mr10"></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>
        </div>
        <div style={{width:"72%",borderRadius:"5px",marginBottom:"30px"}}>
          <div style={{paddingLeft:"20px",boxSizing:"border-box"}}>
            <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/special"
                render={(props) => (
                  <Special {...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/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>
          </div>
        </div>
      </div>
    );
  }
}
export default Index;