代码库-样式

2021-08-13 17:12:56 +08:00 · 2021-08-13 17:12:56 +08:00 · 37f608cdb8
parent 984856a29c
commit 37f608cdb8
16 changed files with 268 additions and 155 deletions
--- a/src/forge/Branch/CloneAddress.js
+++ b/src/forge/Branch/CloneAddress.js
@ -7,7 +7,7 @@ function CloneAddress({http_url , ssh_url , zip_url , tar_url}) {
  const [ key , setKey ] = useState("HTTP");
  return (
    <div className="downMenu">
-      <div style={{padding:"10px 20px 20px 20px",borderBottom:"1px solid #eee"}}>
+      <div style={{borderBottom:"1px solid #eee"}}>
        <Menu className="urlMenu" selectedKeys={[key]} mode={"horizontal"}>
          <Menu.Item key="HTTP" onClick={(e)=>{setKey(e.key)}}>HTTP</Menu.Item>
          <Menu.Item key="SSH" onClick={(e)=>{setKey(e.key)}}>SSH</Menu.Item>
--- a/src/forge/Branch/branch.scss
+++ b/src/forge/Branch/branch.scss
@ -48,7 +48,7 @@
 .branch-tagBox{
  border:1px solid #D0D0D0;
  border-radius: 3px;
-  height: 40px;
+  height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
@ -98,6 +98,7 @@
 .urlMenu{
  line-height: 30px;
  margin-bottom: 10px;
+  padding:15px 20px 0px 20px;
  border-bottom: none;
  li.ant-menu-item{
    height: 30px;
--- a/src/forge/Component/Component.scss
+++ b/src/forge/Component/Component.scss
@ -113,7 +113,14 @@ li.ant-menu-item{
  z-index: 10000;
 }
 .laterest{
-  color: #05690d;
+  background-color: #EF3131;
+  color: #fff;
+  font-size: 12px;
+  margin-left: 10px;
+  padding:0px 5px;
+  border-radius: 2px;
+  height: 18px;
+  line-height: 18px;
 }

@media screen and (max-width: 1800px){
@ -157,39 +164,88 @@ li.ant-menu-item{
 }

 .menuPanels{
-  width: 240px;
-  height: 180px;
+  width: 295px;
+  .leftline{
+    position: relative;
+    color: #666;
+    height: 16px;
+    &::before{
+      position: absolute;
+      left: -10px;
+      top:3px;
+      height: 12px;
+      width: 1px;
+      background-color: #666666;
+      content: "";
+    }
+  }
+  .ant-btn{
+    height: 36px;
+    line-height: 34px;
+    width: 83px;
+    text-align: center;
+    padding:0px ;
+    font-weight: 500;
+    font-size: 14px;
+    &.currentBtn{
+      cursor: default;
+      color: #333;
+      &:hover{
+        color: #333;
+        border-color: #d0d0d0;
+      }
+    }
+  }
+  .ant-btn-default{
+    color: #333;
+    border-color: #d0d0d0;
+    &:hover{
+      background: #F3F4F6;
+    }
+  }
+  .ant-btn-primary{
+    color: #fff;
+    background-color: #2A61FF;
+  }
+  .focusPanelHeadInfo{
+    padding:14px 16px;
+    border-bottom: 1px solid #eee;
+  }
  .ant-popover-content,.ant-popover-inner{
    height: 100%;
    width: 100%;
  }
+  .ant-popover-inner-content{
+    padding:0px;
+  }
 }
 .halfs{
  margin-top: 24px;
  padding:24px 0px 0px 0px;
  border-top: 1px solid #e8e8e8;
-  .attrPerson{
-    padding-bottom: 24px;
-  }
+}
+.aboutSubTitle{
+  display: flex;
+  align-items: center;
 }
 .menuinfos{
-  padding:15px 0px;
+  padding:10px 20px;
  &>a{
    display: flex;
    flex-direction: column;
    align-items: center;
-    border-right: 1px solid #eee;
    flex: 1;
    & >span:first-child{
-      font-size: 18px;
-      font-weight: 400;
+      font-size: 16px;
+      font-weight: 500;
      color: #333;
+      line-height: 22px;
    }
    & >span:last-child{
      color: #666;
-    }
-    &:last-child{
-      border-right: none;
+      font-weight: 400;
+      line-height: 20px;
+      margin-top: 6px;
    }
  }
 }
--- a/src/forge/Component/Contributors.jsx
+++ b/src/forge/Component/Contributors.jsx
@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { AlignCenter , FlexAJ  } from '../Component/layout';
 import { Link } from 'react-router-dom';
-import { Popover , Spin } from 'antd';
+import { Popover , Spin , Button } from 'antd';
 import { getImageUrl } from 'educoder';
 import './Component.scss';
 import { getUser } from '../GetData/getData';
 import axios from 'axios';

-function Contributors({contributors,owner,projectsId}){
+function Contributors({contributors,owner,projectsId,currentLogin}){
  const [ menuList ,setMenuList ]= useState([]);
  const [ list , setList ]= useState(undefined);
  const [ total , setTotal ]= useState(0);
@ -73,19 +73,18 @@ function Contributors({contributors,owner,projectsId}){
              <span>关注数</span>
            </a>
          </AlignCenter>
-          {
-            data.organizations && data.organizations.length > 0 ?
-            <AlignCenter className="font-12 pt4 pb4">
-              <span>所属组织：</span>
-              <div className="task-hide flex1">
-                {renderArray(data.organizations)}
-              </div>
-            </AlignCenter>
-            :""
-          }
-          {
-            data.location && <AlignCenter className="font-12 pt4 pb4"><span>所在地址:</span><span className="ml5">{data.location}</span></AlignCenter>
-          }
+          <div className={"pb20"} style={{display:"flex",justifyContent:'center'}}>
+            {
+              currentLogin && (currentLogin === data.login)
+              ?
+              <Button className="currentBtn">当前用户</Button>
+              :
+              data.is_watch ? 
+              <Button type={"default"} onClick={()=>FocusFunc(false,data.login)}>已关注</Button>
+              :
+              <Button type={"primary"} onClick={()=>FocusFunc(true,data.login)}>关注TA</Button>
+            }
+          </div>
        </Spin>
      )
      setMenu(ele);
--- a/src/forge/Component/LanguagePower.jsx
+++ b/src/forge/Component/LanguagePower.jsx
@ -25,7 +25,7 @@ function LanguagePower({languages}){
    }
  return(
    <div>
-      <p className="font-16 color-grey-6">开发语言</p>
+      <p className="font-16 color-ooo aboutSubTitle">开发语言</p>
      <div className="progress">
        {
          array && array.map((item,key)=>{
--- a/src/forge/Component/Releases.jsx
+++ b/src/forge/Component/Releases.jsx
@ -19,13 +19,12 @@ function Releases({owner,projectsId,releaseVersions , baseOperate , projectType}
          releaseVersions.list.map((item,key)=>{
            return(
            key === 0 &&<AlignTop className="mt10">
-              <i className="iconfont icon-biaoqian3 color-grey-6 font-18 mr10"></i>
              <div>
                <p className="font-16 color-grey-6">
                  <Link to={`/${owner}/${projectsId}/releases`}>{item.name}</Link>
                  <span className="font-12 laterest ml5">最新</span>
                </p>
-                <p className="color-grey-9 font-13">{item.created_at}</p>
+                <p className="color-grey-3 font-12">{item.created_at}</p>
              </div>
            </AlignTop>
            )
--- a/src/forge/Main/CoderDepot.jsx
+++ b/src/forge/Main/CoderDepot.jsx
@ -321,7 +321,7 @@ function CoderDepot(props){
              list = {mainFlag ? dirInfo : undefined}
            />
            <div className="drawerBtn" onClick={()=>setVisible(true)}>
-              <i className="iconfont icon-youjiantou font-16"></i>
+              <i className="iconfont icon-zuohuaicon font-14"></i>
              <span>目录</span>
            </div>
          </React.Fragment>
@ -334,7 +334,7 @@ function CoderDepot(props){
                <div className="panelmenu">
                  <FlexAJ>
                    <AlignCenter>
-                      <div className="mr20">
+                      <div className="mr30">
                        {
                          props && props.platform ?
                          <SelectBranch
@ -363,7 +363,7 @@ function CoderDepot(props){
                        </Link>
                      </AlignCenter>
                    </AlignCenter>
-                    <AlignCenter>
+                    <AlignCenter className="depotBtn">
                      {
                        baseOperate && ((projectDetail.type !== 2 && pullsFlag) || issuesFlag )&&
                        <div className="mr20 addOptionBtn">
@ -379,12 +379,12 @@ function CoderDepot(props){
                      }
                      { fileOperate &&
                        <Dropdown overlay={fileMenu()} className="mr10" trigger={['click']}>
-                          <Button type="default">文件 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-grey-9"></i></Button>
+                          <Button type="default">文件 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-grey-6 mr-5"></i></Button>
                        </Dropdown>
                      }
                      
                      <Dropdown overlay={downloadMenu} placement="bottomRight" trigger={['click']}>
-                        <Button type={'primary'}>下载 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-white"></i></Button>
+                        <Button type={'primary'}>下载 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-white mr-3"></i></Button>
                      </Dropdown>
                    </AlignCenter>
                  </FlexAJ>
@ -464,7 +464,7 @@ function CoderDepot(props){
                          <i onClick={()=>setOpenModal(true)} className="iconfont icon-anquanshezhi color-grey-9 font-15"></i>
                        }
                      </FlexAJ>
-                      {desc && <p className="font-14 color-grey-9 mb15 task-hide-2" style={{lineHeight:"22px",WebkitLineClamp:"4",textAlign:"justify",wordBreak:"break-all"}}>{desc}</p>}
+                      {desc && <p className="font-14 color-grey-3 mb15 task-hide-2" style={{lineHeight:"24px",WebkitLineClamp:"4",textAlign:"justify",wordBreak:"break-all"}}>{desc}</p>}
                      {
                        website &&
                        <div className="color-grey-6 df pinfos mb5">
@ -473,7 +473,7 @@ function CoderDepot(props){
                        </div>
                      }
                      <div className="pinfos mb5">
-                        <i className="iconfont icon-wenjian4 font-15 mr10"></i>
+                        <i className="iconfont icon-zishuwenjian_icon font-15 mr10"></i>
                        <a href="#readme">README.md</a>
                      </div>
                      <div className="color-grey-6 mb5">
@ -483,7 +483,7 @@ function CoderDepot(props){
                      {
                        projectDetail && projectDetail.license_name &&
                        <div>
-                          <i className="iconfont icon-tianping font-16 mr10 color-grey-3"></i>
+                          <i className="iconfont icon-xieyiicon font-16 mr10 color-grey-6"></i>
                          <span className="color-grey-6">{projectDetail.license_name}</span>
                        </div>
                      }
@ -499,7 +499,7 @@ function CoderDepot(props){
                      lesson_url &&
                      <div>
                        <Divider />
-                        <p className="font-16 color-grey-6">实践课程</p>
+                        <p className="font-16 color-ooo">实践课程</p>
                        <a href={lesson_url} target="_blank" className="color-grey-6" style={{textDecoration:"underline",wordBreak:"break-all"}}>{lesson_url}</a>
                      </div>
                    }
--- a/src/forge/Main/CoderDepotCatalogue.jsx
+++ b/src/forge/Main/CoderDepotCatalogue.jsx
@ -13,7 +13,7 @@ function CoderDepotCatalogue({item , goToSubRoot , owner , projectsId }){
    <li>
      <span>
        <a onClick={()=>goToSubRoot(item.path,item.type,item.name)} className={item.type === "submodule" && "submoduleStyle"}>
-          <i className={`iconfont ${typeIco[`${item.type}`]} color-blue-file mr5`}></i>{item.name}
+          <i className={`iconfont ${typeIco[`${item.type}`]} color-blue-file mr8`}></i>{item.name}
        </a>
      </span>
      <span title="init project">
--- a/src/forge/Main/CoderDepotReadme.jsx
+++ b/src/forge/Main/CoderDepotReadme.jsx
@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import RenderHtml from '../../components/render-html';
 import { AlignCenter } from '../Component/layout';
-import { Dropdown , Menu , Spin } from 'antd';
-import { Link } from 'react-router-dom';
+import { Dropdown , Anchor , Spin } from 'antd';

 import ReadmeCatelogue from './sub/ReadmeCatelogue';
 const $ = window.$;
@ -33,32 +32,35 @@ function CoderDepotReadme({ operate , history , readme , ChangeFile }){
  function menu(){
    if(menuList && menuList.length > 0){
      return(
-        <ReadmeCatelogue menuList={menuList}/>
+        <ReadmeCatelogue menuList={menuList} hash={history.location.hash}/>
      )
    }else{
      return <Spin />
    }
  }
+
  return(
    <div className="commonBox readBox" id="readme">
-      <div className="commonBox-title boxTitle">
-        <AlignCenter>
-          <Dropdown overlay={menu()} trigger={['click']} overlayClassName="menuslist">
-            <span className="catelogue">
-              <i className="iconfont icon-muluicon font-12 mr5"></i>
-              <span>目录</span>
-            </span>
-          </Dropdown>
-          <span className="commonBox-title-read">README.md</span>
-        </AlignCenter>
-        {
-          operate ?
-            <a className="ml20 pull-right" onClick={() =>ChangeFile(readme && readme.path, false)}>
-              <i className="iconfont icon-a-bianji font-17 color-grey-6"></i>
-            </a>
-          :""
-        }
-      </div>
+      <Anchor offsetTop={70} targetOffset={160}>
+        <div className="commonBox-title boxTitle">
+          <AlignCenter>
+            <Dropdown overlay={menu()} trigger={['hover']} overlayClassName="menuslist">
+              <span className="catelogue">
+                <i className="iconfont icon-muluicon font-12 mr5"></i>
+                <span>目录</span>
+              </span>
+            </Dropdown>
+            <span className="commonBox-title-read">README.md</span>
+          </AlignCenter>
+          {
+            operate ?
+              <a className="ml20 pull-right" onClick={() =>ChangeFile(readme && readme.path, false)}>
+                <i className="iconfont icon-a-bianji font-17 color-grey-6"></i>
+              </a>
+            :""
+          }
+        </div>
+      </Anchor>
      {
        content && 
        <div className="commonBox-info">
--- a/src/forge/Main/Detail.js
+++ b/src/forge/Main/Detail.js
@ -557,6 +557,18 @@ class Detail extends Component {
                }
              </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
--- a/src/forge/Main/Index.scss
+++ b/src/forge/Main/Index.scss
@ -108,6 +108,31 @@
  margin: 0 auto;
  .panelmenu{
    padding-top:30px;
+    .depotBtn{
+      .mr-5{
+        margin-right: -5px;
+      }
+      .ant-btn{
+        height: 36px;
+        line-height: 34px;
+        width: 83px;
+        text-align: center;
+        padding:0px ;
+        font-weight: 500;
+        font-size: 14px;
+      }
+      .ant-btn-default{
+        color: #333;
+        border-color: #d0d0d0;
+        &:hover{
+          background: #F3F4F6;
+        }
+      }
+      .ant-btn-primary{
+        color: #fff;
+        background-color: #2A61FF;
+      }
+    }
  }
  .addOptionBtn{
    height: 32px;
@ -140,15 +165,16 @@
    font-size: 12px;
  }
  .attrPerson{
-    padding-top: 15px;
+    padding-top: 12px;
    display: flex;
    flex-wrap: wrap;
+    padding-bottom: 2px;
    a{
-      margin: 10px 10px 0px 0px;
+      margin: 0px 17px 0px 0px;
      img{
        border-radius: 50%;
-        width: 35px;
-        height: 35px;
+        width: 40px;
+        height: 40px;
      }
      &:nth-child(6){
        margin-right: 0px;
@ -185,10 +211,11 @@
      padding-left: 15px;
      position: relative;
      min-width: 33.5%;
+      font-size: 12px;
+      font-weight: 400;
+      color: #666;
      span{
-        color: #666;
        &:last-child{
-          color: #999;
          margin-left: 5px;
        }
      }
@ -300,8 +327,10 @@
 .drawerBtn{
  position: fixed;
  left: -13px;
-  border:1px solid rgb(207,205,223);
-  width: 34px;
+  width: 33px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.09);
+  border: 1px solid #666666;
  border-radius: 0px 12px 12px 0px;
  height: 70px;
  top:50%;
@ -309,29 +338,35 @@
  cursor: pointer;
  display: flex;
  flex-direction: column;
-  align-items: flex-end;
+  align-items: center;
  justify-content: center;
+  padding-left: 7px;
  &:hover{
-    box-shadow: 1px 0px 7px rgba(0,0,0,0.1);
+    box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.09);
  }
  span{
    writing-mode: vertical-lr;
-    color: #202429;
+    color: #333;
    width: 25px;
+    font-size: 14px;
  }
  i{
-    color: #24292e;
-    height: 18px;
-    line-height: 18px;
-    width: 18px;
+    color: #333;
+    height: 14px;
+    line-height: 14px;
+    width: 14px;
+    margin-left: 2px;
+    margin-bottom: 3px;
  }
 }
 .downMenu{
-  width: 330px;
-  box-shadow: 0px 0px 9px rgba(134, 134, 134,0.4);
+  width: 329px;
  background-color: #fff;
-  .ant-menu-vertical .ant-menu-item:hover{
-    background-color: #e6f7ff;
+  box-shadow: 0px 1px 8px 1px rgba(212, 212, 212, 0.5);
+  padding-bottom: 14px;
+  .ant-menu-item{
+    height: 50px;
+    line-height: 50px;
  }
 }

@ -378,4 +413,10 @@
    white-space: pre-wrap;
    margin-bottom: 0px;
  }
+}
+.ant-anchor-wrapper{
+  padding-left: 2px;
+  .ant-anchor-ink::before{
+    background-color: #fff;
+  }
 }
--- a/src/forge/Main/list.scss
+++ b/src/forge/Main/list.scss
@ -220,49 +220,52 @@
 .detailHeader-wrapper{
  background-color:#FBFCFF;
  border-bottom:1px solid #e2e2e2;
-  /* box-shadow: 0px 2px 11px 0px#D0D0D0; */
 }
 .headerMenu-wrapper{
-  font-size: 16px;
  display: flex;
  flex-direction: row;
-}
-.headerMenu-wrapper li{
-  position: relative;
-  text-align: center;
-  height: 40px;
-  line-height: 28px;
-  padding:0px 20px;
-}
-.headerMenu-wrapper li a{
-  color: #666;
-}
-.headerMenu-wrapper li a > img{
-  margin-right: 8px;
-}
-.headerMenu-wrapper li a > span.num{
-  line-height: 24px;
-  margin-left: 5px;
-  margin-top: 2px;
-  font-size: 12px;
-  float: right;
-  color: #666!important;
-  background-color:  rgba(153, 153, 153, 0.13);;
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-}
-.headerMenu-wrapper li.active a,.headerMenu-wrapper li.active a i{
-  color: #2A61FF!important;
-}
-.headerMenu-wrapper li.active::after{
-  position: absolute;
-  bottom:0px;
-  height:2px;
-  background-color: #2A61FF;
-  content:'';
-  left: 0px;
-  width:100%;
+  cursor: pointer;
+  li{
+    font-size: 14px;
+    position: relative;
+    text-align: center;
+    height: 40px;
+    line-height: 28px;
+    padding:0px 20px;
+    & > a{
+      color: #666; 
+      &> img{
+        margin-right: 8px;
+      }
+      &> span.num{
+        line-height: 24px;
+        margin-left: 5px;
+        margin-top: 2px;
+        font-size: 12px;
+        float: right;
+        color: #666!important;
+        background-color:  rgba(153, 153, 153, 0.13);;
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+      }
+    }
+    &.active a,&.active a i{
+      color: #2A61FF!important;
+    }
+    &.active::after,&:hover::after{
+      position: absolute;
+      bottom:0px;
+      height:2px;
+      background-color: #2A61FF;
+      content:'';
+      left: 0px;
+      width:100%;
+    }
+    &:hover::after{
+      background-color: rgba(153, 153, 153, 0.2);;
+    }
+  }
 }
 .detail_tag_btn{
  height:34px;
@ -271,32 +274,36 @@
  border:1px solid #D0D0D0;
  display: flex;
  align-items: center;
-  margin-left: 30px;
+  margin-left: 10px;
  padding:0px;
  background-color:#FAFBFC;
  box-shadow: none;
-}
-.detail_tag_btn:hover{
-  background-color: #F3F4F6;
+  &:hover{
+    background-color: #F3F4F6;
+  }
+  .detail_tag_btn_name{
+    padding:0px 18px;
+    min-width: 82px;
+    text-align: center;
+    &:hover>span{
+      color: #333!important;
+    }
+    img{
+      margin-right: 10px;
+    }
+  }
+  .detail_tag_btn_count{
+    width: 42px;
+    text-align: center;
+    background: #fff;
+    border-radius: 0px 4px 4px 0px;
+    height:100%;
+    border-left: 1px solid #D0D0D0;
+  }
 }
 .ant-tooltip {
  max-width: fit-content!important;
 }
-.detail_tag_btn_name{
-  padding:0px 10px;
-  color: #666!important;
-}
-.detail_tag_btn_name img{
-  margin-right: 10px;
-}
-.detail_tag_btn_count{
-  width: 42px;
-  text-align: center;
-  background: #fff;
-  border-radius: 0px 4px 4px 0px;
-  height:100%;
-  border-left: 1px solid #D0D0D0;
-}
 .files-md{
  padding:20px;
 }
@ -347,6 +354,7 @@


 .gitAddressClone{
+  margin:0px 20px 14px 20px!important;
  display: flex;
  height: 40px;
  align-items: center;
@ -658,9 +666,7 @@
 .item:last-child{
  border-bottom:none;
 }
-.gitAddressClone{
-  margin: 0 !important;
-}
+
 .item_title small{
  font-weight: 400;
  margin-left: 10px;
--- a/src/forge/Main/sub/DetailBanner.jsx
+++ b/src/forge/Main/sub/DetailBanner.jsx
@ -18,7 +18,7 @@ function DetailBanner({ history,list , owner , projectsId , isManager , url , pa
    }
  },[list]);
  return(
-    <div className="f-wrap-between mt15">
+    <div className="f-wrap-between mt25">
      {
        menuName && projectDetail ? 
        <ul className="headerMenu-wrapper">
--- a/src/forge/Main/sub/ReadmeCatelogue.jsx
+++ b/src/forge/Main/sub/ReadmeCatelogue.jsx
@ -1,11 +1,11 @@
-import React , {useState } from 'react';
+import React , { useState , useEffect } from 'react';
 import { Anchor , Input } from 'antd';
 import './sub.scss';
+import { Base64 } from 'js-base64';

 const { Link } = Anchor;
-const { Search } = Input;

-function ReadmeCatelogue({ menuList }) {
+function ReadmeCatelogue({ menuList , hash }) {
  const [ goHref , setGoHref ] = useState("");
  const [ value , setValue ] = useState("");
  const [ menu , setMenu] = useState(menuList);
@ -18,7 +18,7 @@ function ReadmeCatelogue({ menuList }) {
  function changeValue(e) {
    setValue(e.target.value);
    if(e.target.value){
-      let m = menu.filter(i=>i.text.indexOf(e.target.value)>-1);
+      let m = menuList.filter(i=>i.text.indexOf(e.target.value)>-1);
      setMenu(m);
    }else{
      setMenu(menuList);
@ -41,7 +41,7 @@ function ReadmeCatelogue({ menuList }) {
              menu.map((item,key)=>{
                return(
                  <div style={{paddingLeft:`${item.level *10}px`}} className={goHref===item.href?"items active":"items"}>
-                    <Link href={`${item.href}`} title={item.text} />
+                    <Link href={`#${item.text}`} title={item.text} />
                  </div>
                )
              })
--- a/src/forge/Main/sub/sub.scss
+++ b/src/forge/Main/sub/sub.scss
@ -34,13 +34,10 @@
    padding:15px;
    border-bottom: 1px solid #eee;
  }
-  .anchorBox{
-    max-height: 255px;
-    overflow-y: auto;
-  }
  .ant-anchor-wrapper{
    margin-left: 0px;
    padding:5px 15px;
+    max-height: 255px!important;
    .items{
      border-radius: 4px;
      margin-bottom: 5px;
--- a/src/forge/css/index.scss
+++ b/src/forge/css/index.scss
@ -11,7 +11,7 @@ ul,ol,dl{
  font-size: 22px;
  font-weight: normal;
  line-height: 30px;
-  max-width: 700px;
+  max-width: 690px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;