79 lines
2.4 KiB
JavaScript
79 lines
2.4 KiB
JavaScript
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,
|
|
/\.(txt|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
|
|
})
|
|
|
|
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} {...this.props} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|