Skip to content

Commit 61af816

Browse files
author
sky
committed
将侧边栏配置提取到src/constants/menus.js 便于手动修改菜单内容
# Conflicts: # .gitignore
1 parent e08a54c commit 61af816

File tree

3 files changed

+107
-72
lines changed

3 files changed

+107
-72
lines changed

‎src/components/SiderCustom.jsx

Lines changed: 10 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
* Created by hao.cheng on 2017/4/13.
33
*/
44
import React, { Component } from 'react';
5-
import { Layout, Menu, Icon } from 'antd';
6-
import { Link, withRouter } from 'react-router-dom';
5+
import { Layout } from 'antd';
6+
import { withRouter } from 'react-router-dom';
7+
import { menus } from '../constants/menus';
8+
import SiderMenu from './SiderMenu';
9+
710
const { Sider } = Layout;
8-
const SubMenu = Menu.SubMenu;
911

1012
class SiderCustom extends Component {
1113
state = {
@@ -24,7 +26,7 @@ class SiderCustom extends Component {
2426
this.setMenuOpen(nextProps)
2527
}
2628
setMenuOpen = props => {
27-
const {pathname} = props.location;
29+
const { pathname } = props.location;
2830
this.setState({
2931
openKey: pathname.substr(0, pathname.lastIndexOf('/')),
3032
selectedKey: pathname
@@ -59,82 +61,18 @@ class SiderCustom extends Component {
5961
trigger={null}
6062
breakpoint="lg"
6163
collapsed={this.props.collapsed}
62-
style={{overflowY: 'auto'}}
64+
style={{ overflowY: 'auto' }}
6365
>
6466
<div className="logo" />
65-
<Menu
67+
<SiderMenu
68+
menus={menus}
6669
onClick={this.menuClick}
6770
theme="dark"
6871
mode="inline"
6972
selectedKeys={[this.state.selectedKey]}
7073
openKeys={this.state.firstHide ? null : [this.state.openKey]}
7174
onOpenChange={this.openMenu}
72-
>
73-
<Menu.Item key="/app/dashboard/index">
74-
<Link to={'/app/dashboard/index'}><Icon type="mobile" /><span className="nav-text">首页</span></Link>
75-
</Menu.Item>
76-
<SubMenu
77-
key="/app/ui"
78-
title={<span><Icon type="scan" /><span className="nav-text">UI</span></span>}
79-
>
80-
81-
<Menu.Item key="/app/ui/buttons"><Link to={'/app/ui/buttons'}>按钮</Link></Menu.Item>
82-
<Menu.Item key="/app/ui/icons"><Link to={'/app/ui/icons'}>图标</Link></Menu.Item>
83-
<Menu.Item key="/app/ui/spins"><Link to={'/app/ui/spins'}>加载中</Link></Menu.Item>
84-
<Menu.Item key="/app/ui/modals"><Link to={'/app/ui/modals'}>对话框</Link></Menu.Item>
85-
<Menu.Item key="/app/ui/notifications"><Link to={'/app/ui/notifications'}>通知提醒框</Link></Menu.Item>
86-
<Menu.Item key="/app/ui/tabs"><Link to={'/app/ui/tabs'}>标签页</Link></Menu.Item>
87-
<Menu.Item key="/app/ui/banners"><Link to={'/app/ui/banners'}>轮播图</Link></Menu.Item>
88-
<Menu.Item key="/app/ui/wysiwyg"><Link to={'/app/ui/wysiwyg'}>富文本</Link></Menu.Item>
89-
<Menu.Item key="/app/ui/drags"><Link to={'/app/ui/drags'}>拖拽</Link></Menu.Item>
90-
<Menu.Item key="/app/ui/gallery"><Link to={'/app/ui/gallery'}>画廊</Link></Menu.Item>
91-
</SubMenu>
92-
<SubMenu
93-
key="/app/animation"
94-
title={<span><Icon type="rocket" /><span className="nav-text">动画</span></span>}
95-
>
96-
97-
<Menu.Item key="/app/animation/basicAnimations"><Link to={'/app/animation/basicAnimations'}>基础动画</Link></Menu.Item>
98-
<Menu.Item key="/app/animation/exampleAnimations"><Link to={'/app/animation/exampleAnimations'}>动画案例</Link></Menu.Item>
99-
</SubMenu>
100-
<SubMenu
101-
key="/app/table"
102-
title={<span><Icon type="copy" /><span className="nav-text">表格</span></span>}
103-
>
104-
105-
<Menu.Item key="/app/table/basicTable"><Link to={'/app/table/basicTable'}>基础表格</Link></Menu.Item>
106-
<Menu.Item key="/app/table/advancedTable"><Link to={'/app/table/advancedTable'}>高级表格</Link></Menu.Item>
107-
<Menu.Item key="/app/table/asynchronousTable"><Link to={'/app/table/asynchronousTable'}>异步表格</Link></Menu.Item>
108-
</SubMenu>
109-
<SubMenu
110-
key="/app/form"
111-
title={<span><Icon type="edit" /><span className="nav-text">表单</span></span>}
112-
>
113-
114-
<Menu.Item key="/app/basicForm"><Link to={'/app/form/basicForm'}>基础表单</Link></Menu.Item>
115-
</SubMenu>
116-
<SubMenu
117-
key="/app/chart"
118-
title={<span><Icon type="area-chart" /><span className="nav-text">图表</span></span>}
119-
>
120-
<Menu.Item key="/app/chart/echarts"><Link to={'/app/chart/echarts'}>echarts</Link></Menu.Item>
121-
<Menu.Item key="/app/chart/recharts"><Link to={'/app/chart/recharts'}>recharts</Link></Menu.Item>
122-
</SubMenu>
123-
<SubMenu
124-
key="sub4"
125-
title={<span><Icon type="switcher" /><span className="nav-text">页面</span></span>}
126-
>
127-
<Menu.Item key="/login"><Link to={'/login'}>登录</Link></Menu.Item>
128-
<Menu.Item key="/404"><Link to={'/404'}>404</Link></Menu.Item>
129-
</SubMenu>
130-
<SubMenu
131-
key="/app/auth"
132-
title={<span><Icon type="safety" /><span className="nav-text">权限管理</span></span>}
133-
>
134-
<Menu.Item key="/app/auth/basic"><Link to={'/app/auth/basic'}>基础演示</Link></Menu.Item>
135-
<Menu.Item key="/app/auth/routerEnter"><Link to={'/app/auth/routerEnter'}>路由拦截</Link></Menu.Item>
136-
</SubMenu>
137-
</Menu>
75+
/>
13876
<style>
13977
{`
14078
#nprogress .spinner{

‎src/components/SiderMenu.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { Menu, Icon } from 'antd';
3+
import { Link } from 'react-router-dom';
4+
5+
const renderMenuItem =
6+
({ key, title, icon, link, ...props }) =>
7+
<Menu.Item
8+
key={key || link}
9+
{...props}
10+
>
11+
<Link to={link || key}>
12+
{icon && <Icon type={icon} />}
13+
<span className="nav-text">{title}</span>
14+
</Link>
15+
</Menu.Item>;
16+
17+
const renderSubMenu =
18+
({ key, title, icon, link, sub, ...props }) =>
19+
<Menu.SubMenu
20+
key={key || link}
21+
title={
22+
<span>
23+
{icon && <Icon type={icon} />}
24+
<span className="nav-text">{title}</span>
25+
</span>
26+
}
27+
{...props}
28+
>
29+
{sub && sub.map(item => renderMenuItem(item))}
30+
</Menu.SubMenu>;
31+
32+
export default ({ menus, ...props }) => <Menu {...props}>
33+
{menus && menus.map(
34+
item => item.sub && item.sub.length ?
35+
renderSubMenu(item) : renderMenuItem(item)
36+
)}
37+
</Menu>;

‎src/constants/menus.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
export const menus = [
2+
{ key: '/app/dashboard/index', title: '首页', icon: 'mobile', },
3+
{
4+
key: '/app/ui', title: 'UI', icon: 'scan',
5+
sub: [
6+
{ key: '/app/ui/buttons', title: '按钮', icon: '', },
7+
{ key: '/app/ui/icons', title: '图标', icon: '', },
8+
{ key: '/app/ui/spins', title: '加载中', icon: '', },
9+
{ key: '/app/ui/modals', title: '对话框', icon: '', },
10+
{ key: '/app/ui/notifications', title: '通知提醒框', icon: '', },
11+
{ key: '/app/ui/tabs', title: '标签页', icon: '', },
12+
{ key: '/app/ui/banners', title: '轮播图', icon: '', },
13+
{ key: '/app/ui/wysiwyg', title: '富文本', icon: '', },
14+
{ key: '/app/ui/drags', title: '拖拽', icon: '', },
15+
{ key: '/app/ui/gallery', title: '画廊', icon: '', },
16+
],
17+
},
18+
{
19+
key: '/app/animation', title: '动画', icon: 'rocket',
20+
sub: [
21+
{ key: '/app/animation/basicAnimations', title: '基础动画', icon: '', },
22+
{ key: '/app/animation/exampleAnimations', title: '动画案例', icon: '', },
23+
],
24+
},
25+
{
26+
key: '/app/table', title: '表格', icon: 'copy',
27+
sub: [
28+
{ key: '/app/table/basicTable', title: '基础表格', icon: '', },
29+
{ key: '/app/table/advancedTable', title: '高级表格', icon: '', },
30+
{ key: '/app/table/asynchronousTable', title: '异步表格', icon: '', },
31+
],
32+
},
33+
{
34+
key: '/app/form', title: '表单', icon: 'edit',
35+
sub: [
36+
{ key: '/app/form/basicForm', title: '基础表单', icon: '', },
37+
],
38+
},
39+
{
40+
key: '/app/chart', title: '图表', icon: 'area-chart',
41+
sub: [
42+
{ key: '/app/chart/echarts', title: 'echarts', icon: '', },
43+
{ key: '/app/chart/recharts', title: 'recharts', icon: '', },
44+
],
45+
},
46+
{
47+
key: '/sub4', title: '页面', icon: 'switcher',
48+
sub: [
49+
{ key: '/login', title: '登录', icon: '', },
50+
{ key: '/404', title: '404', icon: '', },
51+
],
52+
},
53+
{
54+
key: '/app/auth', title: '权限管理', icon: 'safety',
55+
sub: [
56+
{ key: '/app/auth/basic', title: '基础演示', icon: '', },
57+
{ key: '/app/auth/routerEnter', title: '路由拦截', icon: '', },
58+
],
59+
},
60+
];

0 commit comments

Comments
 (0)