192 lines
11 KiB
JavaScript
192 lines
11 KiB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
|
|
import { Button, Divider, Tooltip, Space, Drawer } from 'antd';
|
|
import { EyeOutlined, CopyOutlined, MenuFoldOutlined, MenuUnfoldOutlined, PlusOutlined, EditOutlined, FileOutlined } from '@ant-design/icons';
|
|
import copy from 'copy-to-clipboard';
|
|
import TreeList from '../treeList';
|
|
import ArticleUpsert from '../../article/upsert';
|
|
import ArticleCell from '../../article/cell';
|
|
import Styles from './web.pc.module.less';
|
|
function BreadcrumbView(props) {
|
|
const { breadcrumbItems } = props;
|
|
return (<div style={{ fontSize: 14, display: 'flex', flexDirection: 'row', margin: 10 }}>
|
|
{breadcrumbItems?.map((breadcrumbItem, index) => {
|
|
return index !== breadcrumbItems.length - 1 ? (<div style={{ color: '#B2B2B2' }} key={index}>
|
|
{breadcrumbItem}
|
|
<span style={{ margin: '0 6px' }}>/</span>
|
|
</div>) : (<div className={Styles.breadcrumbItem} key={index}>
|
|
{breadcrumbItem}
|
|
</div>);
|
|
})}
|
|
</div>);
|
|
}
|
|
export default function Render(props) {
|
|
const { entity, entityId, oakFullpath, show, articleMenuId, width, articleId, tocPosition, highlightBgColor, onMenuViewById, onArticlePreview, onArticleEdit, origin, setCopyArticleUrl, scrollId } = props.data;
|
|
const { gotoDoc, setMessage, gotoArticleDetail } = props.methods;
|
|
const [editArticleId, setEditArticleId] = useState('');
|
|
const [breadcrumbItems, setBreadcrumbItems] = useState([]);
|
|
const [open, setOpen] = useState(true);
|
|
const [addOpen, setAddOpen] = useState(false);
|
|
const [selectedArticleId, setSelectedArticleId] = useState('');
|
|
const [defaultOpen, setDefaultOpen] = useState(true);
|
|
const [openArray, setOpenArray] = useState([]);
|
|
const [isEdit, setIsEdit] = useState(false);
|
|
const [searchOpen, setSearchOpen] = useState(false);
|
|
const [menuHidden, setMenuHidden] = useState(false);
|
|
const dropdownRef = useRef(null);
|
|
const changeIsEdit = () => {
|
|
setIsEdit(false);
|
|
};
|
|
const changeDefaultOpen = (defaultOpen, openArray) => {
|
|
setDefaultOpen(defaultOpen);
|
|
setOpenArray(openArray);
|
|
};
|
|
const changeAddOpen = (addOpen) => {
|
|
setAddOpen(addOpen);
|
|
};
|
|
const checkEditArticle = (articleId) => {
|
|
onArticleEdit && onArticleEdit(articleId);
|
|
setEditArticleId(articleId);
|
|
};
|
|
const getBreadcrumbItems = (breadcrumbItems) => {
|
|
setBreadcrumbItems(breadcrumbItems);
|
|
};
|
|
const changeDrawerOpen = (open) => {
|
|
setOpen(open);
|
|
};
|
|
useEffect(() => {
|
|
if (editArticleId) {
|
|
setSelectedArticleId(editArticleId);
|
|
changeIsEdit();
|
|
}
|
|
}, [editArticleId]);
|
|
useEffect(() => {
|
|
document.addEventListener('click', handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener('click', handleClickOutside);
|
|
};
|
|
}, []);
|
|
useEffect(() => {
|
|
if (articleId) {
|
|
setEditArticleId(articleId);
|
|
}
|
|
}, [articleId]);
|
|
const handleClickOutside = (event) => {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
setSearchOpen(false);
|
|
}
|
|
};
|
|
if (show === 'doc') {
|
|
if (width === 'xs') {
|
|
return (<div className={Styles.docContainer}>
|
|
<div className={Styles.docHeader}>
|
|
<div className={Styles.topBar}>
|
|
<div className={Styles.menuHeader} onClick={() => {
|
|
setOpen(true);
|
|
}}>
|
|
<div>帮助文档</div>
|
|
{open ? (<MenuFoldOutlined style={{
|
|
fontSize: 18,
|
|
}}/>) : (<MenuUnfoldOutlined style={{
|
|
fontSize: 18,
|
|
}}/>)}
|
|
</div>
|
|
<Divider style={{ margin: 0 }}/>
|
|
</div>
|
|
<div className={Styles.editor2}>
|
|
{editArticleId ? (<React.Fragment>
|
|
<BreadcrumbView breadcrumbItems={breadcrumbItems}/>
|
|
<ArticleCell oakId={editArticleId} oakAutoUnmount={true} oakPath={`$articleMenu/treeManager-ArticleCell-${editArticleId}`}/>
|
|
</React.Fragment>) : null}
|
|
</div>
|
|
</div>
|
|
<Drawer className={Styles.drawerPanel} open={open} onClose={() => {
|
|
setOpen(false);
|
|
}} placement="left" width={260}>
|
|
<TreeList oakPath={`$articleMenu/treeManager-TreeList`} entity={entity} entityId={entityId} onGrandChildEditArticleChange={checkEditArticle} show={show} articleMenuId={articleMenuId ? articleMenuId : undefined} getBreadcrumbItems={getBreadcrumbItems} breadcrumbItems={[]} drawerOpen={open} changeDrawerOpen={changeDrawerOpen} selectedArticleId={selectedArticleId ? selectedArticleId : undefined} defaultOpen={defaultOpen} changeDefaultOpen={changeDefaultOpen} openArray={openArray ? openArray : undefined} onMenuViewById={onMenuViewById} setCopyArticleUrl={setCopyArticleUrl}/>
|
|
</Drawer>
|
|
</div>);
|
|
}
|
|
return (<div className={Styles.docContainer}>
|
|
<div className={Styles.menu}></div>
|
|
<div className={Styles.menuFixed}>
|
|
<TreeList oakPath={`$articleMenu/treeManager-TreeList`} entity={entity} entityId={entityId} onGrandChildEditArticleChange={checkEditArticle} show={show} articleMenuId={articleMenuId ? articleMenuId : undefined} getBreadcrumbItems={getBreadcrumbItems} breadcrumbItems={[]} selectedArticleId={selectedArticleId ? selectedArticleId : undefined} defaultOpen={defaultOpen} changeDefaultOpen={changeDefaultOpen} openArray={openArray ? openArray : undefined} onMenuViewById={onMenuViewById} setCopyArticleUrl={setCopyArticleUrl}/>
|
|
</div>
|
|
<div className={Styles.editor}>
|
|
{editArticleId ? (<React.Fragment>
|
|
<BreadcrumbView breadcrumbItems={breadcrumbItems}/>
|
|
<ArticleCell oakId={editArticleId} oakAutoUnmount={true} oakPath={`$articleMenu/treeManager-ArticleCell-${editArticleId}`} scrollId={scrollId}/>
|
|
</React.Fragment>) : null}
|
|
</div>
|
|
</div>);
|
|
}
|
|
if (show === 'preview') {
|
|
return (<div className={Styles.previewContainer}>
|
|
<div className={Styles.menu}>
|
|
<TreeList oakPath={`$articleMenu/treeManager-TreeList`} entity={entity} entityId={entityId} onGrandChildEditArticleChange={checkEditArticle} show={show} getBreadcrumbItems={getBreadcrumbItems} breadcrumbItems={[]} selectedArticleId={selectedArticleId ? selectedArticleId : undefined} defaultOpen={defaultOpen} changeDefaultOpen={changeDefaultOpen} openArray={openArray ? openArray : undefined} onMenuViewById={onMenuViewById} setCopyArticleUrl={setCopyArticleUrl}/>
|
|
</div>
|
|
<div className={Styles.editor}>
|
|
{editArticleId ? (<div>
|
|
<div className={Styles.actions}>
|
|
<Space style={{ marginBottom: 10 }}>
|
|
<Button onClick={() => {
|
|
gotoArticleDetail(editArticleId);
|
|
}}>
|
|
<EyeOutlined />查看
|
|
</Button>
|
|
<Button onClick={() => {
|
|
const url = setCopyArticleUrl(editArticleId);
|
|
copy(url);
|
|
setMessage({
|
|
content: '复制成功',
|
|
type: 'success',
|
|
});
|
|
}}>
|
|
<CopyOutlined />复制链接
|
|
</Button>
|
|
{isEdit ? (<Button onClick={() => setIsEdit(false)}>
|
|
<FileOutlined />返回
|
|
</Button>) : (<Button onClick={() => setIsEdit(true)}>
|
|
<EditOutlined />更新
|
|
</Button>)}
|
|
</Space>
|
|
</div>
|
|
<BreadcrumbView breadcrumbItems={breadcrumbItems}/>
|
|
{isEdit ? (<ArticleUpsert key={editArticleId} oakId={editArticleId} oakAutoUnmount={true} oakPath={`$articleMenu/treeManager-ArticleUpsert-${editArticleId}`} changeIsEdit={changeIsEdit} tocPosition={tocPosition} highlightBgColor={highlightBgColor} origin={origin} scrollId={scrollId}/>) : (<ArticleCell key={editArticleId} oakId={editArticleId} oakAutoUnmount={true} oakPath={`$articleMenu/treeManager-ArticleCell-${editArticleId}`}/>)}
|
|
</div>) : null}
|
|
</div>
|
|
</div>);
|
|
}
|
|
return (<div className={Styles.container}>
|
|
{menuHidden ? (<div className={Styles.menu_hidden}>
|
|
<div className={Styles.menuHeader}>
|
|
<Tooltip title={'显示菜单'}>
|
|
<Button type="text" icon={<MenuUnfoldOutlined />} size="small" onClick={() => setMenuHidden(false)}/>
|
|
</Tooltip>
|
|
</div>
|
|
</div>) : (<div className={Styles.menu}>
|
|
<div className={Styles.menuHeader}>
|
|
<div className={Styles.menuTitle}>菜单</div>
|
|
<div className={Styles.menuActions}>
|
|
<Space size={4}>
|
|
<Tooltip title={'查看文档'}>
|
|
<Button type="text" icon={<EyeOutlined />} size="small" onClick={() => gotoDoc()}/>
|
|
</Tooltip>
|
|
<Tooltip title={'添加分类'}>
|
|
<Button type="text" icon={<PlusOutlined />} size="small" onClick={() => setAddOpen(true)}/>
|
|
</Tooltip>
|
|
|
|
<Tooltip title={'隐藏菜单'}>
|
|
<Button type="text" icon={<MenuFoldOutlined />} size="small" onClick={() => setMenuHidden(true)}/>
|
|
</Tooltip>
|
|
</Space>
|
|
</div>
|
|
</div>
|
|
<TreeList oakPath={`$articleMenu/treeManager-TreeList`} entity={entity} entityId={entityId} onGrandChildEditArticleChange={checkEditArticle} show={show} changeAddOpen={changeAddOpen} addOpen={addOpen} onMenuViewById={onMenuViewById} setCopyArticleUrl={setCopyArticleUrl}/>
|
|
</div>)}
|
|
|
|
<div className={Styles.editor}>
|
|
{editArticleId ? (<ArticleUpsert key={editArticleId} oakId={editArticleId} oakAutoUnmount={true} oakPath={`$articleMenu/treeManager-ArticleUpsert-${editArticleId}`} tocPosition={tocPosition} highlightBgColor={highlightBgColor} onArticlePreview={onArticlePreview} origin={origin} scrollId={scrollId}/>) : null}
|
|
</div>
|
|
</div>);
|
|
}
|