add 开发文档

web-react/package.json

@@ -29,6 +29,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-syntax-highlighter": "^15.4.3",
     "redux": "^4.1.0",
     "swiper": "^6.7.0",
     "web-vitals": "^1.0.1"

web-react/public/doc-code/api/setting.js

@@ -0,0 +1,14 @@
+export default {
+    /* 自定义的接口名称 */
+    apiName: [
+        /* 接口地址 */
+        url,
+        /* 请求类型 [get | post] */
+        'get',
+        /* axios所需的设置参数 */
+        options,
+    ],
+
+    /* 默认为get接口 */
+    apiPostName: getUrl
+}

web-react/public/doc-code/api/usage.js

@@ -0,0 +1,25 @@
+import { api } from 'common/api'
+
+api.apiName(params)
+    .then(res => {
+        /* ... */
+    })
+    .catch(error => {
+        /* catch */
+    })
+    .finally(() => {
+        /* finally */
+    })
+
+
+// 或者采用异步
+async function foo() {
+    try {
+        const res = await api.apiName(params)
+        /* ... */
+    } catch (error) {
+        /* catch */
+    } finally {
+        /* finally */
+    }
+}

web-react/public/doc-code/auth/index.js

@@ -0,0 +1,43 @@
+import { Auth } from 'components'
+import auth from 'components/authorized/handler'
+
+/**
+ * 简单的权限标识
+ */
+function foo1() {
+    return <Auth auth="permissions:name">
+        <a>连接</a>
+    </Auth>
+}
+
+/**
+ * 多个并且关系的权限标识
+ */
+function foo2() {
+    return <Auth auth={['permissions:name1', 'permissions:name2']}>
+        <a>连接</a>
+    </Auth>
+}
+
+/**
+ * 多个或者关系的权限标识
+ */
+function foo3() {
+    return <Auth auth={[['permissions:name1'], ['permissions:name2']]}>
+        <a>连接</a>
+    </Auth>
+}
+
+/**
+ * 前缀简化
+ */
+function foo4() {
+    return <Auth auth={{ 'permissions': ['name1', 'name2'] }}>
+        <a>连接</a>
+    </Auth>
+}
+
+/**
+ * 纯js
+ */
+const flag = auth('permissions:name') // => Boolean

web-react/src/pages/system/doc/back-end/database/index.jsx

@@ -0,0 +1,7 @@
+import React, { Component } from 'react'
+
+export default class index extends Component {
+    render() {
+        return <div></div>
+    }
+}

web-react/src/pages/system/doc/back-end/database/migrations.jsx

@@ -0,0 +1,83 @@
+import React, { Component } from 'react'
+import { Breadcrumb, Space, Tag, Typography } from 'antd'
+import Highlighter from 'pages/system/doc/highlighter'
+
+const { Title, Text } = Typography
+
+export default class migrations extends Component {
+    render() {
+        return (
+            <Space direction="vertical" className="w-100-p">
+                <Text>在建立或修改了实体类之后，可以将实体类更新到数据库。</Text>
+                <Text>
+                    在Visual Studio中选择
+                    <Breadcrumb separator=">">
+                        <Breadcrumb.Item>工具</Breadcrumb.Item>
+                        <Breadcrumb.Item>NuGet 包管理器</Breadcrumb.Item>
+                        <Breadcrumb.Item>程序包管理控制台</Breadcrumb.Item>
+                    </Breadcrumb>
+                    之后在打开的程序包管理控制台中，默认项目选择
+                    <Tag className="ml-xs" color="orange">
+                        Ewide.Database.Migrations
+                    </Tag>
+                    ，并在控制台中输入命令。
+                </Text>
+                <Title level={4}>生成迁移文件</Title>
+                <Highlighter code={"add-migration init -c 'DefaultDbContext'"} language={'c++'} />
+                <Text>其中</Text>
+                <ul>
+                    <li>
+                        <p>
+                            <Tag color="blue">add-migration</Tag>是固定的命令。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="blue">init</Tag>是自定义的数据库版本号。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="blue">-c</Tag>是固定的参数。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="blue">'DefaultDbContext'</Tag>是对应的DbContext。
+                        </p>
+                    </li>
+                </ul>
+                <h4>更新迁移到数据库</h4>
+                <Text>
+                    在确保
+                    <Tag className="ml-xs" color="orange">
+                        Ewide.Database.Migrations
+                    </Tag>
+                    中已经生成迁移文件之后，可以运行更新命令。
+                </Text>
+                <Highlighter
+                    code={"update-database -context 'DefaultDbContext'"}
+                    language={'c++'}
+                />
+                <Text>其中</Text>
+                <ul>
+                    <li>
+                        <p>
+                            <Tag color="blue">update-database</Tag>是固定的命令。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="blue">-context</Tag>是固定的参数。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="blue">'DefaultDbContext'</Tag>是对应的DbContext。
+                        </p>
+                    </li>
+                </ul>
+            </Space>
+        )
+    }
+}

web-react/src/pages/system/doc/back-end/index.jsx

@@ -0,0 +1,126 @@
+import React, { Component } from 'react'
+import { Anchor, Card, Col, Row, Typography } from 'antd'
+import { Container } from 'components'
+import Database from './database'
+import DatabaseMigrations from './database/migrations'
+
+const docs = [
+    {
+        title: '数据库',
+        component: Database,
+        children: [
+            {
+                title: '实体(N)',
+            },
+            {
+                title: '迁移',
+                component: DatabaseMigrations,
+            },
+        ],
+    },
+]
+
+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 mode="fluid">
+                        <Row gutter={[16, 24]} justify="center" align="middle">
+                            <Col span={4}>
+                                <Typography.Link
+                                    href="https://dotnet.microsoft.com/"
+                                    target="_blank"
+                                >
+                                    <img
+                                        src="https://dotnet.microsoft.com/static/images/redesign/downloads-dot-net-core.svg?v=p6MWQNHwEtnnx0MWJ-i7vCMt-sZmoBf6h-7XmdSs5RE"
+                                        width="128"
+                                        alt=""
+                                    />
+                                </Typography.Link>
+                            </Col>
+                            <Col span={4}>
+                                <Typography.Link
+                                    href="https://dotnetchina.gitee.io/furion/"
+                                    target="_blank"
+                                >
+                                    <img
+                                        src="https://dotnetchina.gitee.io/furion/img/furionlogo.png"
+                                        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-back-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-back-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-back-end-${i}`}
+                                            title={item.title}
+                                        >
+                                            {item.children &&
+                                                item.children.map((citem, ci) => (
+                                                    <Anchor.Link
+                                                        key={ci}
+                                                        href={`#doc-back-end-${i}-${ci}`}
+                                                        title={citem.title}
+                                                    />
+                                                ))}
+                                        </Anchor.Link>
+                                    ))}
+                                </Anchor>
+                            </Col>
+                        </Row>
+                    </Container>
+                </Card>
+            </div>
+        )
+    }
+}

web-react/src/pages/system/doc/front-end/api/index.jsx

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import { Space, Typography } from 'antd'
+
+const { Text } = Typography
+
+export default class index extends Component {
+    render() {
+        return (
+            <Space direction="vertical" className="w-100-p">
+                <Text>在本框架中，只需要进行简单的接口配置，就可以实现调用。</Text>
+            </Space>
+        )
+    }
+}

web-react/src/pages/system/doc/front-end/api/setting.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import { Space, Tag, Typography } from 'antd'
+import Highlighter from 'pages/system/doc/highlighter'
+
+const { Text } = Typography
+
+export default class setting extends Component {
+    render() {
+        return (
+            <Space direction="vertical" className="w-100-p">
+                <Text>
+                    维护接口地址在
+                    <Tag className="ml-xs" color="orange">
+                        /src/common/api/requests
+                    </Tag>
+                    中，通过每个子目录的
+                    <Tag className="ml-xs" color="orange">
+                        index.js
+                    </Tag>
+                    引入
+                </Text>
+                <Highlighter code={this.props.codes['api/setting.js']} language="javascript" />
+            </Space>
+        )
+    }
+}

web-react/src/pages/system/doc/front-end/api/usage.jsx

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import { Space, Typography } from 'antd'
+import Highlighter from 'pages/system/doc/highlighter'
+
+const { Text } = Typography
+
+export default class usage extends Component {
+    render() {
+        return (
+            <Space direction="vertical" className="w-100-p">
+                <Text>调用时需先引入。</Text>
+                <Text>接口的函数名对应到上面配置的接口名称即可。</Text>
+                <Highlighter code={this.props.codes['api/usage.js']} language="javascript" />
+            </Space>
+        )
+    }
+}

web-react/src/pages/system/doc/front-end/auth/index.jsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { Space, Tag, Typography } from 'antd'
+import Highlighter from 'pages/system/doc/highlighter'
+
+const { Text } = Typography
+
+export default class index extends Component {
+    render() {
+        return (
+            <Space direction="vertical" className="w-100-p">
+                <Text>
+                    在不少业务组件中，时常需要做到权限控制一些按钮的显示隐藏。如果只使用样式来隐藏按钮，是不安全的。
+                </Text>
+                <Text>所以在本框架中，推荐将按钮用全局的权限组件包裹来控制是否渲染。</Text>
+                <Highlighter code={this.props.codes['auth/index.js']} language="html" />
+                <Text>
+                    权限标识会读取全局用户信息中的
+                    <Tag className="ml-xs" color="orange">
+                        permissions
+                    </Tag>
+                    进行比对。
+                </Text>
+                <Text>权限组件插槽内的可以是任何元素，只要不符合条件，将不会渲染。</Text>
+            </Space>
+        )
+    }
+}

web-react/src/pages/system/doc/front-end/index.jsx

@@ -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>
+        )
+    }
+}

web-react/src/pages/system/doc/front-end/window/close.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import { Space, Tag, Typography } from 'antd'
+import Highlighter from 'pages/system/doc/highlighter'
+
+const { Title, Text } = Typography
+
+export default class close extends Component {
+    render() {
+        return (
+            <Space direction="vertical" className="w-100-p">
+                <Text>可调用全局方法关闭窗口</Text>
+                <Highlighter code={'window.closeContentWindow(key)'} language="javascript" />
+                <Title level={4}>键</Title>
+                <Text>
+                    <Tag>String | Number</Tag>
+                    非必传参数。指定关闭窗口的键。如果未指定键，则关闭当前选中的窗口。
+                </Text>
+            </Space>
+        )
+    }
+}

web-react/src/pages/system/doc/front-end/window/index.jsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { Space, Tag, Typography } from 'antd'
+
+const { Text } = Typography
+
+export default class index extends Component {
+    render() {
+        return (
+            <Space direction="vertical" className="w-100-p">
+                <Text>
+                    本框架是以
+                    <b>页签</b>
+                    形式打开业务组件（一般意义上的页面）。当然其中也有使用到路由，但只用于登录与主页的跳转。
+                </Text>
+                <Text>
+                    所有业务组件都放置于
+                    <Tag className="ml-xs" color="orange">
+                        /src/pages
+                    </Tag>
+                    目录下，打开窗口时默认只读取该目录下的组件。
+                </Text>
+                <Text>
+                    目前已对打开和关闭窗口的方法进行了全局化处理，可以在任何组件内轻松地使用。
+                </Text>
+            </Space>
+        )
+    }
+}

web-react/src/pages/system/doc/front-end/window/open.jsx

@@ -0,0 +1,80 @@
+import React, { Component } from 'react'
+import { Space, Tag, Typography } from 'antd'
+import Highlighter from 'pages/system/doc/highlighter'
+
+const { Title, Text } = Typography
+
+export default class open extends Component {
+    render() {
+        return (
+            <Space direction="vertical" className="w-100-p">
+                <Text>可调用全局方法打开窗口</Text>
+                <Highlighter code={'window.openContentWindow(settings)'} language="javascript" />
+                <Title level={4}>配置</Title>
+                <ul>
+                    <li>
+                        <p>
+                            <Tag color="red">key</Tag>
+                            <Tag>String | Number</Tag>
+                            非必要，窗口的唯一键。当下一次打开同键的窗口时，只切换到该窗口。如果未指定唯一键，将会自动生成随机键。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="red">icon</Tag>
+                            <Tag>String</Tag>非必要，窗口页签的图标。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="red">title</Tag>
+                            <Tag>String</Tag>
+                            非必要，窗口页签的标题。如果不指定标题，讲会以“新建窗口”显示。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="red">subTitle</Tag>
+                            <Tag>String</Tag>
+                            非必要，窗口页签的副标题。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="red">path</Tag>
+                            <Tag>String</Tag>必要，组件路径。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="red">param</Tag>
+                            <Tag>Object</Tag>非必要，传递参数。在业务组件中通过
+                            <Tag className="ml-xs" color="orange">
+                                props
+                            </Tag>
+                            接收。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="red">openType</Tag>
+                            <Tag>Number</Tag>
+                            打开类型：1、组件，2、iframe，3、新浏览器窗口。
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <Tag color="red">closable</Tag>
+                            <Tag>Boolean</Tag>非必要，设置是否可关闭窗口。默认为可关闭。
+                        </p>
+                    </li>
+                </ul>
+                <Text>通过菜单名打开窗口</Text>
+                <Highlighter
+                    code={'window.openContentWindowByMenuName(name)'}
+                    language="javascript"
+                />
+            </Space>
+        )
+    }
+}

web-react/src/pages/system/doc/front-end/window/reload.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import { Space, Tag, Typography } from 'antd'
+import Highlighter from 'pages/system/doc/highlighter'
+
+const { Title, Text } = Typography
+
+export default class reload extends Component {
+    render() {
+        return (
+            <Space direction="vertical" className="w-100-p">
+                <Text>可调用全局方法刷新窗口</Text>
+                <Highlighter code={'window.reloadContentWindow(key)'} language="javascript" />
+                <Title level={4}>键</Title>
+                <Text>
+                    <Tag>String | Number</Tag>
+                    非必传参数。指定刷新窗口的键。如果未指定键，则刷新当前选中的窗口。
+                </Text>
+            </Space>
+        )
+    }
+}

web-react/src/pages/system/doc/highlighter.jsx

@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+import { Button, message as Message, Space } from 'antd'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import { tomorrowNightEighties } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+
+const baseCopy = content => {
+    try {
+        const $textarea = document.createElement('textarea')
+        $textarea.style = 'opacity: 0;position: fixed;top: -10000;left: -10000'
+        document.body.append($textarea)
+        $textarea.value = content
+        $textarea.select()
+        document.execCommand('copy')
+        $textarea.remove()
+        Message.success('已复制到剪贴板')
+    } catch {
+        Message.error('复制失败')
+    }
+}
+
+const copy = code => {
+    baseCopy(code)
+}
+
+const copyTemplate = code => {
+    code =
+        '"' +
+        code
+            // 转义双引号 => \"
+            .replace(/"/g, '\\"')
+            // 转义$ => $$
+            .replace(/\$/g, '$$$$')
+            // 替换行首 => "
+            .replace(/\n/g, '"')
+            // 替换行末 = ",
+            .replace(/\r/g, '",\r') +
+        '"'
+    let flag = true
+    while (flag) {
+        const p = code.match(/\$\${.*?}/)
+        if (p && p[0]) {
+            code = code.replace(p[0], `$\{${p[0].slice(1)}}`)
+        } else {
+            flag = false
+        }
+    }
+    baseCopy(code)
+}
+
+export default class highlighter extends Component {
+    render() {
+        const { code, copyTemplate } = this.props
+
+        return (
+            <section>
+                <SyntaxHighlighter {...this.props} style={tomorrowNightEighties}>
+                    {code}
+                </SyntaxHighlighter>
+                <div className="text-right">
+                    <Space>
+                        {copyTemplate && (
+                            <Button size="small" type="dashed" onClick={() => copyTemplate(code)}>
+                                Copy template
+                            </Button>
+                        )}
+                        <Button size="small" type="dashed" onClick={() => copy(code)}>
+                            Copy
+                        </Button>
+                    </Space>
+                </div>
+            </section>
+        )
+    }
+}

web-react/src/pages/system/doc/index.jsx

@@ -0,0 +1,80 @@
+import React, { Component } from 'react'
+import { Tabs } from 'antd'
+import BackEnd from './back-end'
+import FrontEnd from './front-end'
+
+const tabs = [
+    {
+        title: '后端',
+        component: BackEnd,
+    },
+    {
+        title: '前端',
+        component: FrontEnd,
+    },
+]
+
+export default class index extends Component {
+    state = {
+        activeKey: '0',
+    }
+
+    codes = {}
+
+    constructor(props) {
+        super(props)
+
+        // 读取doc-code下所有文件内容
+        const files = require.context(
+            '../../../../public/doc-code',
+            true,
+            /\.(js|jsx|html|vue|css|less|json|cs)(\?.*)?$/
+        )
+        const codes = {}
+        files.keys().forEach(p => {
+            const filepath = p.slice(2)
+            const xhr = new XMLHttpRequest()
+            xhr.open('GET', `./doc-code/${filepath}`, false)
+            xhr.overrideMimeType('text/plain;charset=utf-8')
+            xhr.send(null)
+            codes[filepath] = xhr.responseText
+        })
+
+        console.log(codes)
+
+        this.codes = codes
+    }
+
+    render() {
+        const { activeKey } = this.state
+
+        return (
+            <div className="yo-form-page">
+                <div className="yo-form-page-layout">
+                    <div className="yo-tab-external-mount">
+                        <Tabs onChange={activeKey => this.setState({ activeKey })} centered>
+                            {tabs.map((item, i) => (
+                                <Tabs.TabPane key={i} forceRender={true} tab={item.title} />
+                            ))}
+                        </Tabs>
+                        <div className="yo-tab-external-mount-content">
+                            {tabs.map((item, i) => (
+                                <div
+                                    key={i}
+                                    className={[
+                                        'yo-tab-external-tabpane',
+                                        activeKey == i
+                                            ? 'yo-tab-external-tabpane-active'
+                                            : 'yo-tab-external-tabpane-inactive',
+                                    ].join(' ')}
+                                >
+                                    <item.component codes={this.codes} />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

web-react/yarn.lock

@@ -1191,7 +1191,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1":
   version "7.14.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
   integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
@@ -1827,6 +1827,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hast@^2.0.0":
+  version "2.3.2"
+  resolved "https://registry.nlark.com/@types/hast/download/@types/hast-2.3.2.tgz#236201acca9e2695e42f713d7dd4f151dc2982e4"
+  integrity sha1-I2IBrMqeJpXkL3E9fdTxUdwpguQ=
+  dependencies:
+    "@types/unist" "*"
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.1"
   resolved "https://registry.nlark.com/@types/html-minifier-terser/download/@types/html-minifier-terser-5.1.1.tgz?cache=0&sync_timestamp=1621241343144&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fhtml-minifier-terser%2Fdownload%2F%40types%2Fhtml-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@@ -1935,6 +1942,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/unist@*":
+  version "2.0.5"
+  resolved "https://registry.nlark.com/@types/unist/download/@types/unist-2.0.5.tgz#fdd299f23205c3455af88ce618dd65c14cb73e22"
+  integrity sha1-/dKZ8jIFw0Va+IzmGN1lwUy3PiI=
+
 "@types/webpack-sources@*":
   version "2.1.0"
   resolved "https://registry.nlark.com/@types/webpack-sources/download/@types/webpack-sources-2.1.0.tgz?cache=0&sync_timestamp=1621243863278&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fwebpack-sources%2Fdownload%2F%40types%2Fwebpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
@@ -3345,6 +3357,21 @@ char-regex@^1.0.2:
   resolved "https://registry.nlark.com/char-regex/download/char-regex-1.0.2.tgz?cache=0&sync_timestamp=1622809103243&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchar-regex%2Fdownload%2Fchar-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha1-10Q1giYhf5ge1Y9Hmx1rzClUXc8=
 
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.npm.taobao.org/character-entities-legacy/download/character-entities-legacy-1.1.4.tgz?cache=0&sync_timestamp=1615373299115&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcharacter-entities-legacy%2Fdownload%2Fcharacter-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha1-lLwYRdznClu50uzHSHJWYSk9j8E=
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.nlark.com/character-entities/download/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha1-4Sw5Obfq9OWxXnrUxeKOHUjFsWs=
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.npm.taobao.org/character-reference-invalid/download/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha1-CDMpzaDq4nKrPbvzfpo4LBOvFWA=
+
 check-types@^11.1.1:
   version "11.1.2"
   resolved "https://registry.npm.taobao.org/check-types/download/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"
@@ -3546,6 +3573,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.nlark.com/comma-separated-tokens/download/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha1-YyuAthF4Z6FY8QgK1Jiy++fj9eo=
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.nlark.com/commander/download/commander-2.20.3.tgz?cache=0&sync_timestamp=1622954303803&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcommander%2Fdownload%2Fcommander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -5176,6 +5208,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fault@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.npm.taobao.org/fault/download/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha1-6vz8Cm0hT8lGAeFw3ymVSk+ELxM=
+  dependencies:
+    format "^0.2.0"
+
 faye-websocket@^0.11.3:
   version "0.11.4"
   resolved "https://registry.nlark.com/faye-websocket/download/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
@@ -5394,6 +5433,11 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.npm.taobao.org/format/download/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.nlark.com/forwarded/download/forwarded-0.2.0.tgz?cache=0&sync_timestamp=1622503508967&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fforwarded%2Fdownload%2Fforwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -5733,6 +5777,22 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hast-util-parse-selector@^2.0.0:
+  version "2.2.5"
+  resolved "https://registry.nlark.com/hast-util-parse-selector/download/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
+  integrity sha1-1Xwj9NoWrjxjs7bKRhZoMxNJnDo=
+
+hastscript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.nlark.com/hastscript/download/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
+  integrity sha1-6HaNfqxWw/3qyKkoMNWOgR5b9kA=
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.nlark.com/he/download/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -5743,6 +5803,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.npm.taobao.org/hex-color-regex/download/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha1-TAb8y0YC/iYCs8k9+C1+fb8aio4=
 
+highlight.js@^10.4.1, highlight.js@~10.7.0:
+  version "10.7.3"
+  resolved "https://registry.nlark.com/highlight.js/download/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
+  integrity sha1-aXJy45kTVuQMPKxWanTu9oF1ZTE=
+
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.nlark.com/history/download/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -6169,6 +6234,19 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.npm.taobao.org/is-alphabetical/download/is-alphabetical-1.0.4.tgz?cache=0&sync_timestamp=1615453703061&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-alphabetical%2Fdownload%2Fis-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha1-nn1rlJFr4iFTdF0YTCmMv5hqaG0=
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.nlark.com/is-alphanumerical/download/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha1-frmiQx+FX2se8aeOMm31FWlsTb8=
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arguments@^1.0.4:
   version "1.1.0"
   resolved "https://registry.npm.taobao.org/is-arguments/download/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
@@ -6267,6 +6345,11 @@ is-date-object@^1.0.1:
   resolved "https://registry.nlark.com/is-date-object/download/is-date-object-1.0.4.tgz#550cfcc03afada05eea3dd30981c7b09551f73e5"
   integrity sha1-VQz8wDr62gXuo90wmBx7CVUfc+U=
 
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.npm.taobao.org/is-decimal/download/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha1-ZaOllYocW2OnBuGzM9fNn2MNP6U=
+
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.nlark.com/is-descriptor/download/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -6341,6 +6424,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.npm.taobao.org/is-hexadecimal/download/is-hexadecimal-1.0.4.tgz?cache=0&sync_timestamp=1615464641587&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-hexadecimal%2Fdownload%2Fis-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha1-zDXJdYjaS9Saju3WvECC1E3LI6c=
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/is-module/download/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -7398,6 +7486,14 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lowlight@^1.17.0:
+  version "1.20.0"
+  resolved "https://registry.nlark.com/lowlight/download/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
+  integrity sha1-3bGX0zRirQ2TvxnRe2wwGqOUGIg=
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~10.7.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npm.taobao.org/lru-cache/download/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -8304,6 +8400,18 @@ parse-asn1@^5.0.0, parse-asn1@^5.1.5:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/parse-entities/download/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha1-U8brW5MUofTsmfoP33zgHs2gy+g=
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.nlark.com/parse-json/download/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -9235,6 +9343,11 @@ pretty-format@^26.0.0, pretty-format@^26.6.0, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+prismjs@^1.22.0, prismjs@~1.24.0:
+  version "1.24.1"
+  resolved "https://registry.nlark.com/prismjs/download/prismjs-1.24.1.tgz#c4d7895c4d6500289482fa8936d9cdd192684036"
+  integrity sha1-xNeJXE1lACiUgvqJNtnN0ZJoQDY=
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/process-nextick-args/download/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -9294,6 +9407,13 @@ prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+property-information@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.nlark.com/property-information/download/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+  integrity sha1-YWdVRfsjAC8kXGVA7EYHfU2j7Wk=
+  dependencies:
+    xtend "^4.0.0"
+
 proxy-addr@~2.0.5:
   version "2.0.7"
   resolved "https://registry.nlark.com/proxy-addr/download/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -10017,6 +10137,17 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-syntax-highlighter@^15.4.3:
+  version "15.4.3"
+  resolved "https://registry.npm.taobao.org/react-syntax-highlighter/download/react-syntax-highlighter-15.4.3.tgz#fffe3286677ac470b963b364916d16374996f3a6"
+  integrity sha1-//4yhmd6xHC5Y7NkkW0WN0mW86Y=
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.22.0"
+    refractor "^3.2.0"
+
 react-textarea-autosize@^8.3.2:
   version "8.3.3"
   resolved "https://registry.nlark.com/react-textarea-autosize/download/react-textarea-autosize-8.3.3.tgz?cache=0&sync_timestamp=1622628433420&other_urls=https%3A%2F%2Fregistry.nlark.com%2Freact-textarea-autosize%2Fdownload%2Freact-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"
@@ -10137,6 +10268,15 @@ redux@^4.1.0:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+refractor@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.nlark.com/refractor/download/refractor-3.4.0.tgz#62bd274b06c942041f390c371b676eb67cb0a678"
+  integrity sha1-Yr0nSwbJQgQfOQw3G2dutnywpng=
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.24.0"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.npm.taobao.org/regenerate-unicode-properties/download/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -10904,6 +11044,11 @@ sourcemap-codec@^1.4.4:
   resolved "https://registry.npm.taobao.org/sourcemap-codec/download/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha1-6oBL2UhXQC5pktBaOO8a41qatMQ=
 
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.nlark.com/space-separated-tokens/download/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha1-hfMsPRDZaCAH6RdBTdxcJtGqaJk=
+
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.npm.taobao.org/spdx-correct/download/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"