/
demo.vue
77 lines (77 loc) · 2.51 KB
/
demo.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script>
import * as AllDemo from '../demo'
import Header from './header'
import zhCN from 'antd/locale-provider/zh_CN'
import enUS from 'antd/locale-provider/default'
export default {
render () {
const { name } = this.$route.params
let { lang } = this.$route.params
const titleMap = {}
const menuConfig = {
General: [],
Layout: [],
Navigation: [],
'Data Entry': [],
'Data Display': [],
Feedback: [],
Other: [],
}
for (const [title, d] of Object.entries(AllDemo)) {
const type = d.type || 'Other'
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
titleMap[key] = title
menuConfig[type] = menuConfig[type] || []
menuConfig[type].push(d)
}
const Demo = AllDemo[titleMap[name]]
const MenuGroup = []
for (const [type, menus] of Object.entries(menuConfig)) {
const MenuItems = []
menus.forEach(({ title, subtitle }) => {
const linkValue = lang === 'cn'
? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
: [<span>{title}</span>]
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
MenuItems.push(<a-menu-item key={key}>
<router-link to={{ path: `/${lang}/components/${key}` }}>{linkValue}</router-link>
</a-menu-item>)
})
MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
}
let locale = zhCN
if (lang !== 'cn') {
lang = 'us'
locale = enUS
}
return (
<div class='page-wrapper'>
<Header num={Object.keys(AllDemo).length}/>
<a-locale-provider locale={locale}>
<div class='main-wrapper'>
<a-row>
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
<a-menu
class='aside-container menu-site'
selectedKeys={[name]}
defaultOpenKeys={['Components']}
inlineIndent={40}
mode='inline'>
<a-sub-menu title='Components' key='Components'>
{MenuGroup}
</a-sub-menu>
</a-menu>
</a-col>
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
<div class='content main-container'>
{Demo ? <Demo key={lang}/> : '正在紧急开发中...'}
</div>
</a-col>
</a-row>
</div>
</a-locale-provider>
</div>
)
},
}
</script>