forked from Gitlink/forgeplus-react
issue
This commit is contained in:
parent
6a3c5c8291
commit
424ca05ff6
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, LongWidth } from '../../Component/layout';
|
||||
import { Affix, Input, message, Spin, Tree } from 'antd';
|
||||
import { Box, LongWidth, FlexAJ } from '../../Component/layout';
|
||||
import { Affix, Button, Input, message, Spin, Tree } from 'antd';
|
||||
import Nodata from '../../Nodata';
|
||||
import nodata from '../img/nodata.png';
|
||||
import { tempEnum } from '../tempInfo';
|
||||
|
|
@ -20,7 +20,7 @@ function ProjectSource(props) {
|
|||
const [expandedKeys, setExpandedKeys] = useState(undefined);
|
||||
const [wiki, setWiki] = useState(undefined);
|
||||
const [wikiDetail, setWikiDetail] = useState(undefined);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(false);
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [wikiContMenu, setWikiContMenu] = useState(undefined);
|
||||
const { temp, history, data } = props;
|
||||
|
|
@ -46,7 +46,8 @@ function ProjectSource(props) {
|
|||
// 默认打开第一个wiki
|
||||
const firstWiki = findFirstWiki(menuList);
|
||||
if(firstWiki){
|
||||
setWiki(firstWiki.titleStr);
|
||||
setExpandedKeys([getParentKey(firstWiki.key, menuList)+"", firstWiki.key+""]);
|
||||
setWiki(firstWiki);
|
||||
}
|
||||
setFlattenedMenuList(generateList(menuList));
|
||||
setInitMenuList(menuList);
|
||||
|
|
@ -63,7 +64,7 @@ function ProjectSource(props) {
|
|||
// 获取wiki内容
|
||||
setLoading(true);
|
||||
getWiki({
|
||||
pageName: wiki,
|
||||
pageName: wiki.titleStr,
|
||||
...wikiParams
|
||||
}).then(res=>{
|
||||
setLoading(false);
|
||||
|
|
@ -75,7 +76,7 @@ function ProjectSource(props) {
|
|||
message.error("加载失败")
|
||||
}
|
||||
})
|
||||
}, [wiki])
|
||||
}, [wiki && wiki.titleStr])
|
||||
|
||||
useEffect(() => {
|
||||
if (scroller) {
|
||||
|
|
@ -95,7 +96,7 @@ function ProjectSource(props) {
|
|||
scroller
|
||||
.setup({
|
||||
step: '.wikiContentHC .markdown_anchors',
|
||||
offset: 0.3,
|
||||
offset: 0.2,
|
||||
})
|
||||
.onStepEnter(({ element }) => {
|
||||
[].forEach.call(document.querySelectorAll('.wikiContMenuBox li a'), node => {
|
||||
|
|
@ -108,16 +109,39 @@ function ProjectSource(props) {
|
|||
})
|
||||
}, [wikiDetail])
|
||||
|
||||
useEffect(() =>{
|
||||
const handleClick = (event) => {
|
||||
let target = event.target;
|
||||
if (target.tagName.toUpperCase() === 'A') {
|
||||
let ancher = target.getAttribute('href');
|
||||
if (ancher && ancher.startsWith('#')) {
|
||||
event.preventDefault()
|
||||
let viewEl = document.getElementById(ancher.replace('#', ''))
|
||||
if (viewEl) {
|
||||
viewEl.scrollIntoView(true);
|
||||
// 滚动结束后向下偏移170像素
|
||||
window.scrollBy(0,-170);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener("click", handleClick);
|
||||
return () => {
|
||||
document.removeEventListener("click", handleClick);
|
||||
};
|
||||
}, [])
|
||||
|
||||
function changeSearchValue(value) {
|
||||
if (value) {
|
||||
const va = value.trim();
|
||||
// 找到命中搜索的item的父元素
|
||||
const expandedKeys = flattenedMenuList.map(item => {
|
||||
if (item.title.match(new RegExp(value, 'i'))) {
|
||||
if (item.title.match(new RegExp(va, 'i'))) {
|
||||
return getParentKey(item.key, initMenuList);
|
||||
}
|
||||
return null;
|
||||
}).filter((item, i, self) => item && self.indexOf(item) === i);
|
||||
setSearchValue(value);
|
||||
setSearchValue(va);
|
||||
setExpandedKeys(expandedKeys);
|
||||
} else {
|
||||
setSearchValue("");
|
||||
|
|
@ -132,28 +156,26 @@ function ProjectSource(props) {
|
|||
|
||||
// 选中节点
|
||||
function selectTree(keys,event){
|
||||
let {titleStr, isFile} = event.node.props.dataRef;
|
||||
let {isFile} = event.node.props.dataRef;
|
||||
if(isFile){
|
||||
setWiki(titleStr);
|
||||
setWiki(event.node.props.dataRef);
|
||||
}
|
||||
}
|
||||
|
||||
function renderTreeNodes(data) {
|
||||
return data && data.length > 0 && data.map((item) => {
|
||||
const index = item.titleStr.indexOf(searchValue);
|
||||
const beforeStr = item.titleStr.substr(0, index);
|
||||
const afterStr = item.titleStr.substr(index + searchValue.length);
|
||||
const title = index > -1 ? (
|
||||
const matchResult = item.titleStr.match(new RegExp(searchValue, 'i'));
|
||||
const title = matchResult ? (
|
||||
<span>
|
||||
{beforeStr}
|
||||
<span style={{ color: '#f50' }}>{searchValue}</span>
|
||||
{afterStr}
|
||||
{item.titleStr.substr(0, matchResult.index)}
|
||||
<span style={{ color: '#f50' }}>{item.titleStr.substring(matchResult.index, matchResult.index+searchValue.length)}</span>
|
||||
{item.titleStr.substr(matchResult.index+searchValue.length)}
|
||||
</span>
|
||||
) : (
|
||||
<span>{item.titleStr}</span>
|
||||
);
|
||||
return (
|
||||
<TreeNode title={title} key={item.key + ""} dataRef={item} className='menuHcNode'>
|
||||
<TreeNode title={title} key={item.key + ""} dataRef={item} className='menuHcNode font-15'>
|
||||
{renderTreeNodes(item.children)}
|
||||
</TreeNode>
|
||||
);
|
||||
|
|
@ -183,9 +205,14 @@ function ProjectSource(props) {
|
|||
{wikiDetail && <LongWidth className='wikiContentBox'>
|
||||
<Box>
|
||||
<LongWidth>
|
||||
<div className='wikiTitleHC font-20 mb5'>{wikiDetail.name}</div>
|
||||
{wikiDetail.commit && <div className='wikiUpdateTimeHC font-15 mb20'>更新时间：{wikiDetail.commit.author.date}</div>}
|
||||
{wikiDetail.md_content && <RenderHtml className="wikiContentHC editor-content-panel" value={ Base64.decode(wikiDetail.md_content) } url={history.location}/>}
|
||||
<FlexAJ style={{alignItems: 'stretch'}}>
|
||||
<div>
|
||||
<div className='wikiTitleHC font-20 mb5'>{wikiDetail.name}</div>
|
||||
{wikiDetail.commit && <div className='wikiUpdateTimeHC font-15'>更新时间：{wikiDetail.commit.author.date || '刚刚'}</div>}
|
||||
</div>
|
||||
<Button onClick={()=>{wiki && window.open(`${data && data.gitlinkProject.wiki_url}/${wiki.titleStr}/${wiki.key}`)}} className='zone_apply_button' style={{width: '90px', height: '34px'}}>配置内容</Button>
|
||||
</FlexAJ>
|
||||
{wikiDetail.md_content && <RenderHtml className="wikiContentHC editor-content-panel mt20" value={ Base64.decode(wikiDetail.md_content) } url={history.location}/>}
|
||||
</LongWidth>
|
||||
{wikiContMenu && wikiContMenu !== "<ul></ul>" && <Affix offsetTop={80}>
|
||||
<div className='wikiContMenuBox font-15' dangerouslySetInnerHTML={{ __html: wikiContMenu }}></div>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ function ZoneVIP(props){
|
|||
<div className={`boxmain ${temp}_VIP_box`}>
|
||||
<p className="in_title">{ tempConfig[temp].member }</p>
|
||||
<p className="vip_sub_title">{ tempConfig[temp].vipDesc }</p>
|
||||
{ memberStatus === memberStatusEnum.notMember && <Button className="apply_button" onClick={ apply }>申请加入</Button> }
|
||||
{ memberStatus === memberStatusEnum.notMember && <Button className="zone_apply_button" onClick={ apply }>申请加入</Button> }
|
||||
{ memberStatus === memberStatusEnum.applying && <div className="mt20 tips" ><Icon type="check-circle" theme="filled" />您的申请已提交，请耐心等待管理员审核!</div> }
|
||||
<MemberApply visible={applyVisible} onOk={ onOk } onCancel={() => setApplyVisible(!applyVisible)} current_user={props.current_user}/>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
@import './theme.scss';
|
||||
|
||||
// 按钮
|
||||
.zone_apply_button {
|
||||
flex-grow: 0;
|
||||
margin-top: 20px;
|
||||
width: 111px;
|
||||
height: 40px;
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
font-size: 15px;
|
||||
&:hover, &:active, &:focus {
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.information_main{
|
||||
background-color:#f3f5f8;
|
||||
min-height: 100vh;
|
||||
|
|
@ -72,7 +87,7 @@
|
|||
line-height: 88px;
|
||||
border-bottom: none!important;
|
||||
padding:0px ;
|
||||
margin-right: 100px!important;
|
||||
margin-right: 80px!important;
|
||||
img{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -1010,19 +1025,6 @@
|
|||
}
|
||||
}
|
||||
.zone_VIP_box, .zone1_VIP_box {
|
||||
.apply_button {
|
||||
flex-grow: 0;
|
||||
margin-top: 20px;
|
||||
width: 111px;
|
||||
height: 40px;
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
font-size: 15px;
|
||||
&:hover, &:active, &:focus {
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
|
|
@ -1356,7 +1358,7 @@
|
|||
&::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
background-image: linear-gradient(269.73deg,#ffffff 0%,rgba(255, 255, 255, 0) 100%);
|
||||
background: #ffffff;
|
||||
padding: 25px 15px;
|
||||
.ant-tree.ant-tree-directory > .menuHcNode span.ant-tree-node-content-wrapper.ant-tree-node-selected, .ant-tree.ant-tree-directory .ant-tree-child-tree > .menuHcNode span.ant-tree-node-content-wrapper.ant-tree-node-selected{
|
||||
color: var(--primary-color);
|
||||
|
|
@ -1413,6 +1415,9 @@
|
|||
background-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import '../../components/ModalFun/index.scss';
|
|||
import { deleteWiki, findNodeByChildrenKey, findNodeByKey, getWiki, treeToMd, updateWiki } from '../../api';
|
||||
import { useEffect } from 'react';
|
||||
import { Base64 } from 'js-base64';
|
||||
import { splicingTabs } from '../../utils';
|
||||
const Search = Input.Search;
|
||||
const {DirectoryTree, TreeNode} = Tree;
|
||||
|
||||
|
|
@ -281,8 +282,10 @@ export default function Sidebar(props) {
|
|||
setVisible(false);
|
||||
message.success('重命名成功');
|
||||
}else{
|
||||
console.log('修改文件目录顺序成功');
|
||||
// message.success('修改文件目录顺序成功');
|
||||
}
|
||||
}else{
|
||||
message.error(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -447,10 +450,10 @@ export default function Sidebar(props) {
|
|||
dragObj = item;
|
||||
});
|
||||
// 如果拖拽的是目录，那么需要遍历所有的子节点，改变\t个数
|
||||
if(dragObj.title.indexOf('- ') !== -1){
|
||||
if(!dragObj.isFile){
|
||||
// 放入的节点标题
|
||||
const title = info.node.props.dataRef.title;
|
||||
const addBool = !info.dropToGap || ((info.node.props.children || []).length > 0 && dropPosition === 1)
|
||||
const addBool = !info.dropToGap
|
||||
upTitle(dragObj.children, addBool ? `\t${title}` : title);
|
||||
}
|
||||
|
||||
|
|
@ -459,52 +462,56 @@ export default function Sidebar(props) {
|
|||
|
||||
// dropToGap: true拖拽在节点中间 false拖拽到节点之上
|
||||
if (!info.dropToGap) {
|
||||
// 追加到尾部
|
||||
// 拖拽到节点之上->追加到尾部
|
||||
loop(data, dropKey, (item, index, arr) => {
|
||||
const {title} = item;
|
||||
const {title, key} = item;
|
||||
if(title.indexOf('- ') === -1){
|
||||
message.error('不能拖拽到页面上');
|
||||
return;
|
||||
}
|
||||
const childrenName = item.children.map(item=>item.title.trim());
|
||||
if(childrenName.includes(dragObj.title.trim())){
|
||||
const childrenName = item.children.map(item=>item.titleStr);
|
||||
if(childrenName.includes(dragObj.titleStr)){
|
||||
message.error('不能与同级目录名称相同');
|
||||
return;
|
||||
}
|
||||
dragObj.title = `\t${title.substring(0, title.indexOf('- '))}${dragObj.title.trim()}`;
|
||||
dragObj.title = `${splicingTabs(key.split('-').length)}${dragObj.title.trim()}`;
|
||||
item.children = item.children || [];
|
||||
item.children.push(dragObj);
|
||||
bool = true;
|
||||
});
|
||||
} else if (
|
||||
(info.node.props.children || []).length > 0 && // Has children
|
||||
dropPosition === 1 // On the bottom gap
|
||||
) {
|
||||
// 拖拽到目录节点下
|
||||
loop(data, dropKey, item => {
|
||||
const childrenName = item.children.map(item=>item.title.trim())
|
||||
if(childrenName.includes(dragObj.title.trim())){
|
||||
message.error('不能与同级目录名称相同');
|
||||
return;
|
||||
}
|
||||
const {title} = item;
|
||||
dragObj.title = `\t${title.substring(0, title.indexOf('- '))}${dragObj.title.trim()}`;
|
||||
item.children = item.children || [];
|
||||
item.children.unshift(dragObj);
|
||||
});
|
||||
bool = true;
|
||||
} else {
|
||||
}
|
||||
// else if (
|
||||
// (info.node.props.children || []).length > 0 && // Has children
|
||||
// dropPosition === 1 // On the bottom gap
|
||||
// ) {
|
||||
// // 拖拽到目录节点下
|
||||
// loop(data, dropKey, item => {
|
||||
// const childrenName = item.children.map(item=>item.title.trim())
|
||||
// if(childrenName.includes(dragObj.title.trim())){
|
||||
// message.error('不能与同级目录名称相同');
|
||||
// return;
|
||||
// }
|
||||
// console.log('item', item, 'dragObj', dragObj);
|
||||
// const {title} = item;
|
||||
// dragObj.title = `\t${title.substring(0, title.indexOf('- '))}${dragObj.title.trim()}`;
|
||||
// item.children = item.children || [];
|
||||
// item.children.unshift(dragObj);
|
||||
// });
|
||||
// bool = true;
|
||||
// }
|
||||
else {
|
||||
let ar;
|
||||
let i;
|
||||
loop(data, dropKey, (item, index, arr) => {
|
||||
ar = arr;
|
||||
i = index;
|
||||
});
|
||||
const childrenName = ar.map(item=>item.title.trim())
|
||||
if(childrenName.includes(dragObj.title.trim())){
|
||||
const childrenName = ar.map(item=>item.titleStr)
|
||||
if(childrenName.includes(dragObj.titleStr)){
|
||||
message.error('不能与同级目录名称相同');
|
||||
return;
|
||||
}
|
||||
dragObj.title = `${ar[i].title.substring(0, ar[i].title.indexOf('- '))}${dragObj.title.trim()}`;
|
||||
dragObj.title = `${splicingTabs(ar[i].key.split('-').length-1)}${dragObj.title.trim()}`;
|
||||
if (dropPosition === -1) {
|
||||
ar.splice(i, 0, dragObj);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
// 拼接\t
|
||||
export function splicingTabs(count) {
|
||||
var tabs = "";
|
||||
for (var i = 0; i < count; i++) {
|
||||
tabs += "\t";
|
||||
}
|
||||
return tabs;
|
||||
}
|
||||
Loading…
Reference in New Issue