add 开发文档

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