readme-文件增加一个目录下拉icon

This commit is contained in:
caishi 2021-04-19 16:58:30 +08:00
parent 487a2f0495
commit b8d40259e5
4 changed files with 60 additions and 5 deletions

View File

@ -1,13 +1,49 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import RenderHtml from '../../components/render-html';
import { Dropdown , Menu , Spin } from 'antd';
import { Link } from 'react-router-dom';
const $ = window.$;
function CoderDepotReadme({ operate , history , readme , ChangeFile }){
const [ menuList ,setMenuList ] = useState(undefined);
useEffect(()=>{
if(readme && readme.content){
let path = history.location.pathname;
const items = $.map($("#readme").find("h1,h2,h3,h4,h5,h6"), function (el, _) {
const anchor = el.id;
const level = el.tagName.replace("H", "");
const href = `#${anchor}`;
return { href:`${path}${href}`,text:el.textContent , level:level }
});
setMenuList(items);
}
},[readme])
function menu(){
if(menuList && menuList.length > 0){
let hash = history.location.hash;
return(
<Menu className="menuslist">
{
menuList.map((item,key)=>{
return(
<Menu.Item key={item.id} className={decodeURI(hash).indexOf(item.text)>-1 ?"active":""}><Link to={`${item.href}`} style={{paddingLeft:`${item.level *10}px`}} title={item.text}>{item.text}</Link></Menu.Item>
)
})
}
</Menu>
)
}else{
return <Spin />
}
}
return(
<div className="commonBox" id="readme">
<div className="commonBox-title">
<span className="mr10">
<i className="iconfont icon-wenjian1 font-16 color-grey-9 fl mt3"></i>
</span>
<Dropdown overlay={menu()}>
<i className="iconfont icon-zhangjie1 font-16 color-grey-3 mr10"></i>
</Dropdown>
<span className="commonBox-title-read">README.md</span>
{
operate ?

View File

@ -286,4 +286,23 @@
.downMenu{
box-shadow: 0px 0px 9px rgba(134, 134, 134,0.4);
background-color: #fff;
}
.menuslist{
max-height: 200px;
overflow-y: auto;
padding:10px 15px;
border-radius: 4px;
.ant-dropdown-menu-item{
border-radius: 8px;
a{
width: 350px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.ant-dropdown-menu-item.active{
background-color: #e6f7ff;
}
}

View File

@ -21,7 +21,6 @@ body>.-task-title {
height: 100%;
min-height: 100%;
overflow: hidden;
padding-top:70px;
}
.newHeaders{
max-width: unset;

View File

@ -427,6 +427,7 @@ export function TPMIndexHOC(WrappedComponent) {
tip={this._gLoadingTip || "加载中..."}
>
<div className="newContainer newContainers">
<div style={{height:"70px"}}></div>
{
current_user &&
<WrappedComponent initCommonState={(user) => this.initCommonState(user)}