forgeplus-react/src/forge/Main/sub/DetailBanner.jsx

import React, { useEffect, useState } from 'react';
import { Skeleton , Tooltip,Badge } from 'antd';
import { Link } from 'react-router-dom';

function DetailBanner({ history,list , owner , projectsId , isManager , url , pathname , state , urlFlag , projectDetail , platform ,open_devops }){
  const [ menuName , setMenuName ] = useState(undefined);
  useEffect(()=>{
    if(list){
      // 没有资源库banner但是通过连接进资源库页面时
      if(pathname && pathname==="source"){
        let a = list.filter(item=>item.menu_name === "resources");
        if(a && a.length === 0){
          history.push(`/projects/${owner}/${projectsId}`);
        }
      }
      setMenuName(list);
    }
  },[list]);
  return(
    <div className="f-wrap-between mt15">
      {
        menuName && menuName.length> 0 && projectDetail ? 
        <ul className="headerMenu-wrapper">
          {
            menuName.map((item,key)=>{
              return(
                <React.Fragment>
                  {
                    item.menu_name === "home" &&
                    <li className={pathname==="about" ? "active" : ""}>
                      <Link to={{ pathname: `/projects/${owner}/${projectsId}/about`, state }}>
                        <i className={(pathname==="" || urlFlag) ? "iconfont icon-zhuye1 color-grey-3 mr5 font-14":"iconfont icon-zhuye1 color-grey-6 font-14 mr5"}></i>
                        <span>主页</span>
                        </Link>
                    </li>
                  }
                  {
                    item.menu_name === "code" &&
                    <li className={(pathname==="" || urlFlag) ? "active" : ""}>
                      <Link to={{ pathname: `/projects/${owner}/${projectsId}`, state }}>
                        <i className={(pathname==="" || urlFlag) ? "iconfont icon-daimaku color-grey-3 mr5 font-14":"iconfont icon-daimaku color-grey-6 font-14 mr5"}></i>
                        <span>代码</span>
                        </Link>
                    </li>
                  }
                  {
                    item.menu_name === "issues" &&
                    <li className={pathname==="issues" ? "active" : ""}>
                      <Tooltip title="易修是Issue的中文名，即问题列表" placement="bottom">
                        <Link to={{ pathname: `/projects/${owner}/${projectsId}/issues`, state }}>
                          <i className={pathname==="issues" ? "iconfont icon-renwu color-grey-3 mr5 font-14":"iconfont icon-renwu color-grey-6 font-14 mr5"}></i>
                          <span>易修</span>
                          {projectDetail && projectDetail.issues_count ? <span className="num">{projectDetail.issues_count}</span> : ""}
                        </Link>
                      </Tooltip>
                    </li>
                  }
                  {
                    item.menu_name === "pulls" && projectDetail && parseInt(projectDetail.type) !== 2 && platform ?
                    <li className={pathname==="pulls" ? "active" : ""}>
                      <Link to={{ pathname: `/projects/${owner}/${projectsId}/pulls`, state }}>
                        <i className={pathname==="pulls" ? "iconfont icon-hebingqingqiu1 color-grey-3 mr5 font-14":"iconfont icon-hebingqingqiu1 color-grey-6 font-14 mr5"}></i>
                        <span>合并请求</span>
                        {projectDetail && projectDetail.pull_requests_count ? <span className="num">{projectDetail.pull_requests_count}</span> : ""}
                      </Link>
                    </li>:""
                  }
                  {
                    item.menu_name === "devops" && platform ? 
                    <li className={pathname==="devops" ? "active" : ""}>
                      <Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/dispose`:""}`, state }}>
                        <i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流
                        {projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""} 
                      </Link>
                    </li>
                    :""
                  }
                  {/* {
                    item.menu_name === "resources" &&
                    <li className={pathname==="source" ? "active" : ""}>
                      <Link to={{ pathname: `/projects/${owner}/${projectsId}/source`, state }}>
                          <i className={pathname==="source" ? "iconfont icon-ziyuanpaihanghetuijian color-grey-3 mr5 font-14":"iconfont icon-ziyuanpaihanghetuijian color-grey-6 font-14 mr5"}></i>
                          <span>资源库</span>
                          {projectDetail && projectDetail.source_count ? <span className="num">{projectDetail.source_count}</span> :""}
                      </Link>
                    </li>
                  } */}
                  {
                    item.menu_name === "versions" &&
                    <li className={pathname==="milestones" ? "active" : ""}>
                      <Link to={{ pathname: `/projects/${owner}/${projectsId}/milestones`, state }}>
                          <i className={pathname==="milestones" ? "iconfont icon-lichengbei color-grey-3 mr5 font-14":"iconfont icon-lichengbei color-grey-6 font-14 mr5"}></i>
                          <span>里程碑</span>
                          {projectDetail && projectDetail.versions_count ? <span className="num">{projectDetail.versions_count}</span> :""}
                      </Link>
                    </li>
                  }
                  {
                    item.menu_name === "activity" &&
                     <li className={pathname==="activity" ? "active" : ""}>
                      <Link to={{ pathname: `/projects/${owner}/${projectsId}/activity`, state }}>
                        <i className={pathname==="activity" ? "iconfont icon-tongzhi color-grey-3 mr5 font-14":"iconfont icon-tongzhi color-grey-6 font-14 mr5"}></i>
                        <span>动态</span>
                      </Link>
                    </li>
                  }
                  {
                    item.menu_name === "setting" &&
                    <li className={pathname === "setting" ? "active" : ""}>
                      <Link to={`/projects/${owner}/${projectsId}/setting`}>
                        <i className={url && url.indexOf("/setting") > 0 ? "iconfont icon-cangku color-grey-3 mr5 font-14":"iconfont icon-cangku color-grey-6 font-14 mr5"}></i>
                        {projectDetail && projectDetail.pending_verify_count ? <Badge dot offset={[6,-2]}><span>设置</span></Badge> :'设置'}
                      </Link>
                    </li>
                  }
                  {
                  item.menu_name === "gantt" &&
                  <li className={pathname === "gantt" ? "active" : ""}>
                    <Link to={`/projects/${owner}/${projectsId}/gantt`}>
                      <i className={url && url.indexOf("/gantt") > 0 ? "iconfont icon-zuzhi color-grey-3 mr5 font-14":"iconfont icon-zuzhi color-grey-6 font-14 mr5"}></i>
                      <span>甘特图</span>
                    </Link>
                  </li>
                  }
                  {
                  item.menu_name === "sonar" &&
                  <li className={pathname === "sonar" ? "active" : ""}>
                    <Link to={`/projects/${owner}/${projectsId}/sonar`}>
                      <i className={url && url.indexOf("/sonar") > 0 ? "iconfont icon-tijiao color-grey-3 mr5 font-18":"iconfont icon-tijiao color-grey-6 font-18 mr5"}></i>
                      <span>质量分析/检测</span>
                    </Link>
                  </li>
                  }
                </React.Fragment>
              )
            })
          }
        </ul>
        :
        <Skeleton paragraph={false} active={true}/>
      }
    </div>
  )
}
export default DetailBanner;