提交 47889177 authored 作者: vipcxj's avatar vipcxj

文档模块改为动态加载

上级 ebe802bf
......@@ -17276,9 +17276,9 @@
}
},
"react-async-wrapper": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/react-async-wrapper/-/react-async-wrapper-1.0.4.tgz",
"integrity": "sha512-gHY931fE8/8Oqj6mzN6NhGUcJuJ5noYTtXhieZY/NQtKBhD7EAEMl75lZDEKqsoBx+q7Yqhu3qwEJdQBG1yvvw==",
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/react-async-wrapper/-/react-async-wrapper-1.0.5.tgz",
"integrity": "sha512-I56yhQARAtOVQH2sjD1BYGt9pBgbYrD0WeBoyyzgG7i+FB3nuu2hd1mVYY5Rp1jf6T8wni31un5x52ckUak4lQ==",
"requires": {
"hoist-non-react-statics": "^2.5.0",
"is-promise": "^2.1.0"
......
......@@ -35,7 +35,7 @@
"moment": "^2.22.1",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-async-wrapper": "^1.0.4",
"react-async-wrapper": "^1.0.5",
"react-dom": "^16.3.2",
"react-json-view": "^1.16.1",
"react-markdown": "^3.3.0",
......
import { makeAsync } from 'react-async-wrapper';
import md from '../markdown';
import React from 'react';
import cs from 'classnames';
import ReactMarkdown from 'react-markdown';
import { Spin } from 'antd';
import { AsyncComponent } from 'react-async-wrapper';
import { userApi } from '../../../../../services/interfaces';
import Code from '../code';
import styles from '../markdown.less';
import { processError } from '../../../../../utils/error';
export default (match) => {
const linkBase = `${match.url}/dynamic-interface`;
const pathBase = `${match.path}/dynamic-interface`;
return [
['addFamily', '新增两清'],
['addHouse', '新增房屋'],
['addPeople', '新增人口'],
['approveXieYi', '协议报审'],
['getClerks', '获取经办人'],
['getXieYiPdf', '获取协议pdf'],
['importFangYuan', '导入房源'],
['isLiangQingLocked', '查询两清是否锁定'],
['isXieYiApproved', '查询协议是否审核'],
['isXieYiLocked', '查询协议是否锁定'],
['lockLiangQing', '锁定两清'],
['lockXieYi', '锁定协议'],
['removeFamily', '删除两清'],
['removeFangYuan', '删除房源'],
['removeHouse', '删除房屋'],
['removePeople', '删除人口'],
['requestCancelXieYi', '申请撤销协议'],
['requestUnLockLiangQing', '申请解锁两清'],
['updateFamily', '更新两清'],
['updateHouse', '更新房屋'],
['updatePeople', '更新人口'],
['updateXieYi', '更新协议'],
['whetherCancelXieYi', '是否协议已撤销'],
['whetherUnLockLiangQing', '是否两清已解锁'],
].map(([name, showName]) => ({
const MarkDownWithLoading = ({ loading, source, height }) => (
<Spin spinning={loading} style={{ height, maxHeight: height }}>
<ReactMarkdown
source={source}
className={cs({
'markdown-body': true,
[styles.markdown]: true,
})}
renderers={{
code: Code,
}}
/>
</Spin>
);
export default (match, infoes, size) => {
const pathBase = `${match.path}/interface`;
// return [
// ['addFamily', '新增两清'],
// ['addHouse', '新增房屋'],
// ['addPeople', '新增人口'],
// ['approveXieYi', '协议报审'],
// ['getClerks', '获取经办人'],
// ['getXieYiPdf', '获取协议pdf'],
// ['importFangYuan', '导入房源'],
// ['isLiangQingLocked', '查询两清是否锁定'],
// ['isXieYiApproved', '查询协议是否审核'],
// ['isXieYiLocked', '查询协议是否锁定'],
// ['lockLiangQing', '锁定两清'],
// ['lockXieYi', '锁定协议'],
// ['removeFamily', '删除两清'],
// ['removeFangYuan', '删除房源'],
// ['removeHouse', '删除房屋'],
// ['removePeople', '删除人口'],
// ['requestCancelXieYi', '申请撤销协议'],
// ['requestUnLockLiangQing', '申请解锁两清'],
// ['updateFamily', '更新两清'],
// ['updateHouse', '更新房屋'],
// ['updatePeople', '更新人口'],
// ['updateXieYi', '更新协议'],
// ['whetherCancelXieYi', '是否协议已撤销'],
// ['whetherUnLockLiangQing', '是否两清已解锁'],
// ]
return infoes.map(({ name, showName }) => ({
name,
showName,
link: `${linkBase}/${name}`,
showName: showName || name,
key: `interface/${name}`,
path: `${pathBase}/${name}`,
component: makeAsync({})(import(`./${name}.md`).then(content => content.default || content).then(md)),
// component: makeAsync({})(import(`./${name}.md`).then(content => content.default || content).then(md)),
render: () => (
<div style={{
padding: 12,
background: '#fafafa',
width: '100%',
height: size.height,
overflow: 'scroll',
}}
>
<AsyncComponent
batch
onError={processError}
asyncProps={{
source: async () => userApi.getInterfaceDocument(name),
}}
>
<MarkDownWithLoading height={size.height - 24} />
</AsyncComponent>
</div>
),
}));
};
......@@ -16,8 +16,11 @@
}
}
.leftMenu {
width:250px;
width:300px;
height: 100%;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 8px;
float: left;
overflow-y: scroll;
}
......
/* eslint-disable no-undef */
import React from 'react';
import cs from 'classnames';
import { Link, Route, Switch } from 'dva/router';
import { Spin, Tree } from 'antd';
import { connect } from 'dva';
import { Route, Switch, routerRedux } from 'dva/router';
import { makeAsync } from 'react-async-wrapper';
import 'github-markdown-css';
import { withSize } from '../../../../components/hoc/size';
import { userApi } from '../../../../services/interfaces';
import { processError } from '../../../../utils/error';
import styles from './index.less';
import mdIndex from './index.md';
import mdAuth from './auth.md';
......@@ -12,51 +16,55 @@ import mdDyInt from './dynamic-interface/index.md';
import createPages from './dynamic-interface';
import md from './markdown';
const TreeNode = Tree.TreeNode;
class DocMainPage extends React.PureComponent {
onSelect = match => (key) => {
this.props.dispatch(routerRedux.push(`${match.url}/${key}`));
};
render() {
const { match, size } = this.props;
const pages = createPages(match);
const { match, size, infoes, loading } = this.props;
const pages = loading ? [] : createPages(match, infoes, size);
return (
<div className={styles.main} style={{ height: size.height }}>
<div className={cs('markdown-body', styles.leftMenu)}>
<ul className={styles.catalogue}>
<li>
<Link to={`${match.url}/index`}>前置说明</Link>
</li>
<li>
<Link to={`${match.url}/auth`}>登录与认证</Link>
</li>
<li>
<Link to={`${match.url}/domain`}>作用域</Link>
</li>
<li>
<Link to={`${match.url}/dynamic-interface`}>动态接口</Link>
<ul>
<Spin spinning={loading} style={{ height: size.height, maxHeight: size.height }}>
<div className={styles.main} style={{ height: size.height }}>
<div className={styles.leftMenu}>
<Tree defaultExpandAll onSelect={this.onSelect(match)}>
<TreeNode title="前置说明" key="index" />
<TreeNode title="登录与认证" key="auth" />
<TreeNode title="作用域" key="domain" />
<TreeNode title="动态接口" key="interface">
{
pages.map(page => (
<li key={page.name}><Link to={page.link}>{ page.showName }</Link></li>
<TreeNode title={page.showName} key={page.key} />
))
}
</ul>
</li>
</ul>
</div>
<div className={styles.contents}>
<Switch>
<Route path={`${match.path}/index`} component={md(mdIndex)} />
<Route path={`${match.path}/auth`} component={md(mdAuth)} />
<Route path={`${match.path}/domain`} component={md(mdDomain)} />
<Route path={`${match.path}/dynamic-interface`} exact component={md(mdDyInt)} />
{
pages.map(page => (
<Route key={page.name} path={page.path} component={page.component} />
))
}
</Switch>
</TreeNode>
</Tree>
</div>
<div className={styles.contents}>
<Switch>
<Route path={`${match.path}/index`} component={md(mdIndex)} />
<Route path={`${match.path}/auth`} component={md(mdAuth)} />
<Route path={`${match.path}/domain`} component={md(mdDomain)} />
<Route path={`${match.path}/dynamic-interface`} exact component={md(mdDyInt)} />
{
pages.map(page => (
<Route key={page.name} path={page.path} render={page.render} />
))
}
</Switch>
</div>
</div>
</div>
</Spin>
);
}
}
export default withSize(DocMainPage);
export default makeAsync({
batch: true,
onError: processError,
asyncProps: {
infoes: async () => userApi.getAllInterfaceInfoes(),
},
})(withSize(connect()(DocMainPage)));
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论