PageLayout.tsx
1.71 KB
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
import React, { FC } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import {
Link,
Switch,
withRouter,
RouteComponentProps,
Route,
} from 'react-router-dom';
import routes from '../router';
import './PageLayout.less';
const { Item } = Menu;
const { Header, Content, Sider } = Layout;
interface PageLayoutProp {}
const PageLayout:FC<PageLayoutProp & RouteComponentProps> = () => (
<Layout>
<Header className="header">
<div className="logo" />
</Header>
<Layout>
<Sider width={200} className="site-layout-background">
<Menu
mode="inline"
defaultSelectedKeys={['SystemSetting']}
style={{ height: '100%', borderRight: 0 }}
>
{routes.map(route => (
<Item key={route.key}>
<Link to={route.path}>
<span>{route.name}</span>
</Link>
</Item>
))}
</Menu>
</Sider>
<Layout style={{ padding: '0 24px 24px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<Content
className="site-layout-background"
style={{
padding: 24,
margin: 0,
minHeight: 280,
}}
>
<Switch>
{routes.map(route => (
<Route
key={route.key}
path={route.path}
component={route.component}
/>
))}
</Switch>
</Content>
</Layout>
</Layout>
</Layout>
)
export default withRouter(PageLayout);