add 开发文档
This commit is contained in:
205
web-react/src/pages/system/doc/front-end/index.jsx
Normal file
205
web-react/src/pages/system/doc/front-end/index.jsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Anchor, Card, Col, Row, Typography } from 'antd'
|
||||
import { Container } from 'components'
|
||||
|
||||
import Window from './window'
|
||||
import WindowOpen from './window/open'
|
||||
import WindowClose from './window/close'
|
||||
import WindowReload from './window/reload'
|
||||
|
||||
import Api from './api'
|
||||
import ApiSetting from './api/setting'
|
||||
import ApiUsage from './api/usage'
|
||||
|
||||
import Auth from './auth/index.jsx'
|
||||
|
||||
const docs = [
|
||||
{
|
||||
title: '窗口',
|
||||
component: Window,
|
||||
children: [
|
||||
{
|
||||
title: '打开窗口',
|
||||
component: WindowOpen,
|
||||
},
|
||||
{
|
||||
title: '关闭窗口',
|
||||
component: WindowClose,
|
||||
},
|
||||
{
|
||||
title: '重新加载窗口',
|
||||
component: WindowReload,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '接口',
|
||||
component: Api,
|
||||
children: [
|
||||
{
|
||||
title: '配置',
|
||||
component: ApiSetting,
|
||||
},
|
||||
{
|
||||
title: '调用',
|
||||
component: ApiUsage,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '权限渲染',
|
||||
component: Auth,
|
||||
},
|
||||
{
|
||||
title: '工具',
|
||||
},
|
||||
]
|
||||
|
||||
export default class index extends Component {
|
||||
container = window
|
||||
|
||||
setContainer = container => {
|
||||
this.container = (container || { parentNode: window }).parentNode
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div ref={this.setContainer}>
|
||||
<Card bordered={false} className="mb-none">
|
||||
<Container>
|
||||
<Row gutter={[16, 24]} justify="center" align="middle">
|
||||
<Col span={4}>
|
||||
<Typography.Link
|
||||
href="https://react.docschina.org/"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K"
|
||||
width="128"
|
||||
alt=""
|
||||
/>
|
||||
</Typography.Link>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Typography.Link
|
||||
href="https://ant-design.gitee.io/components/overview-cn/"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||||
width="128"
|
||||
alt=""
|
||||
/>
|
||||
</Typography.Link>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Typography.Link
|
||||
href="https://echarts.apache.org/zh/index.html"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"
|
||||
width="128"
|
||||
alt=""
|
||||
/>
|
||||
</Typography.Link>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Typography.Link href="http://lesscss.cn/" target="_blank">
|
||||
<img
|
||||
src="http://s.nodejs.cn/less/img/logo.png"
|
||||
width="128"
|
||||
alt=""
|
||||
/>
|
||||
</Typography.Link>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Typography.Link href="https://www.lodashjs.com/" target="_blank">
|
||||
<img
|
||||
src="https://www.lodashjs.com/img/lodash.png"
|
||||
width="128"
|
||||
alt=""
|
||||
/>
|
||||
</Typography.Link>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Typography.Link
|
||||
href="http://www.axios-js.com/zh-cn/"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="http://www.axios-js.com/logo.svg"
|
||||
width="128"
|
||||
alt=""
|
||||
/>
|
||||
</Typography.Link>
|
||||
</Col>
|
||||
</Row>
|
||||
<br />
|
||||
<Row gutter={16}>
|
||||
<Col flex="1">
|
||||
{docs.map((item, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<Container id={`doc-front-end-${i}`} mode="fluid">
|
||||
<section>
|
||||
<Typography.Title level={2}>
|
||||
{item.title}
|
||||
</Typography.Title>
|
||||
{item.component && (
|
||||
<item.component codes={this.props.codes} />
|
||||
)}
|
||||
{item.children &&
|
||||
item.children.map((citem, ci) => (
|
||||
<React.Fragment key={ci}>
|
||||
<section
|
||||
id={`doc-front-end-${i}-${ci}`}
|
||||
>
|
||||
<Typography.Title level={3}>
|
||||
{citem.title}
|
||||
</Typography.Title>
|
||||
{citem.component && (
|
||||
<citem.component
|
||||
codes={this.props.codes}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
<br />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</section>
|
||||
</Container>
|
||||
<br />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Col>
|
||||
<Col flex="240px">
|
||||
<Anchor
|
||||
getContainer={() => this.container}
|
||||
offsetTop={24}
|
||||
onClick={e => e.preventDefault()}
|
||||
>
|
||||
{docs.map((item, i) => (
|
||||
<Anchor.Link
|
||||
key={i}
|
||||
href={`#doc-front-end-${i}`}
|
||||
title={item.title}
|
||||
>
|
||||
{item.children &&
|
||||
item.children.map((citem, ci) => (
|
||||
<Anchor.Link
|
||||
key={ci}
|
||||
href={`#doc-front-end-${i}-${ci}`}
|
||||
title={citem.title}
|
||||
/>
|
||||
))}
|
||||
</Anchor.Link>
|
||||
))}
|
||||
</Anchor>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user