53 lines
2.8 KiB
JavaScript
53 lines
2.8 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Button, Tooltip, } from 'antd';
|
|
import { MenuFoldOutlined, MenuUnfoldOutlined, } from '@ant-design/icons';
|
|
import Styles from './web.pc.module.less';
|
|
import ArticleDetail from '../../article/detail';
|
|
import classNames from 'classnames';
|
|
export default function Render(props) {
|
|
const { data, methods } = props;
|
|
const { oakFullpath, menu, menuName, articles, highlightBgColor, activeColor, allowHiddenMenu } = data;
|
|
const { t } = methods;
|
|
const [selectedId, setSelectedId] = useState('');
|
|
const [menuHidden, setMenuHidden] = useState(false);
|
|
useEffect(() => {
|
|
if (selectedId === '' && articles && articles.length > 0) {
|
|
setSelectedId(articles[0].id);
|
|
}
|
|
}, [articles]);
|
|
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.menuTitle}>{menuName}</div>
|
|
{allowHiddenMenu && <Tooltip title={'隐藏菜单'}>
|
|
<Button type="text" icon={<MenuFoldOutlined />} size="small" onClick={() => setMenuHidden(true)}/>
|
|
</Tooltip>}
|
|
{(articles && articles?.length > 0) && articles.map((ele) => (<div key={ele.id} onClick={() => {
|
|
if (selectedId !== ele.id) {
|
|
setSelectedId(ele.id);
|
|
const scrollContainer = document.getElementById('articleBox');
|
|
setTimeout(function () {
|
|
scrollContainer?.scrollTo({
|
|
top: 0,
|
|
behavior: 'instant',
|
|
});
|
|
}, 100);
|
|
}
|
|
}} className={ele.id === selectedId ? classNames(Styles.article, Styles['article-selected']) : Styles.article}>
|
|
{ele.name}
|
|
</div>))}
|
|
</div>)}
|
|
<div className={Styles.docContainer} id="articleBox">
|
|
{selectedId && (<ArticleDetail oakPath={`$articleMenu/detail-articleDetail-${selectedId}`} oakId={selectedId} tocPosition='right' tocFixed={true}
|
|
// highlightBgColor={highlightBgColor}
|
|
activeColor={activeColor} style={{ width: '100%' }} scrollId={"articleBox"}/>)}
|
|
</div>
|
|
|
|
</div>);
|
|
}
|