forgeplus-react/src/glcc/help/index.jsx

62 lines
2.3 KiB
JavaScript

import { Base64 } from 'js-base64';
import React , { useEffect , useState } from 'react';
import NodataPanel from '../../components/nodata-panel';
import RenderHtml from '../../components/render-html';
import {getWiki, getMenuListAndSidebarData} from '../../forge/Wiki/api';
import bg from '../img/help_bg.png';
import './index.scss';
function Help(props) {
const {showNotification, history} = props;
const [fileArrInit, setFileArrInit] = useState(null);
const [checkItem, setCheckItem] = useState({});
const [itemDetail, setItemDetail] = useState({});
// locationStatus true 正式环境 false 测试环境或者开发环境
const locationStatus = window.location.host.indexOf("50008") !== -1 || window.location.host.indexOf("gitlink") !== -1;
const wikiParams = {
owner: locationStatus ? 'CCF-GLCC' : 'kkky',
repo: locationStatus ? 'glcc-help' : 'Javaaa',
projectId: locationStatus ? '1403908' : '736'
}
// 获取仓库wiki列表
useEffect(()=>{
getMenuListAndSidebarData(wikiParams).then(res=>{
const {wikiPages=[]} = res;
setFileArrInit(wikiPages.filter(item=>item.title !== "_Sidebar"));
if (wikiPages.length) {
setCheckItem(wikiPages[0]);
};
})
}, [])
// 获取选择wiki详情
useEffect(() => {
checkItem.title && getWiki({
...wikiParams,
pageName: checkItem.title,
}).then(res => {
if (res && res.code === 200) {
setItemDetail(res.data);
} else {
showNotification("加载失败")
}
});
}, [checkItem]);
return(
<div className="glcc_help">
{fileArrInit && fileArrInit.length === 0 ? <NodataPanel/> : <div className='help_main'>
<div className='menuList'>
<span className='font-18 mb15'>帮助文档</span>
{fileArrInit && fileArrInit.map(item => {
return <span className={`wiki_title font-15 mb15 ${item.title === checkItem.title? 'active' : ''}`} key={item.title} onClick={() => { setCheckItem(item) }}>{item.title}</span>})}
</div>
<div className="help_cntent pt10" >
{itemDetail && itemDetail.content_base64 && <RenderHtml value={ Base64.decode(itemDetail.content_base64) } url={history.location}/>}
<img src={bg} className='bg' alt='bg'/>
</div>
</div>}
</div>
)
}
export default Help;