layout

other/app.jsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { BrowserRouter as Router, Switch, Redirect, Route, Link } from 'react-router-dom';
+import { Button, Row, Col,Pagination } from 'antd';
+import './App.scss';
+export default class App extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			name: '飞鼠',
+			age: 18
+		};
+	}
+
+	heandleClick() {
+		this.setState({
+			age: this.state.age + 1
+		});
+	}
+
+	onValueChange() {
+		this.setState({
+			age: this.state.age + 1
+		});
+	}
+
+	render() {
+		return (
+			<div>
+				<Row>
+					<Pagination defaultCurrent={1} total={50} showSizeChanger />
+				</Row>
+				<Row>
+					<Col span={12}>
+						<h2>I am {this.state.name}</h2>
+						<p>I am {this.state.age}</p>
+						<div className="context">i am {this.state.name}</div>
+						<Button
+							onClick={e => {
+								this.heandleClick(e);
+							}}
+						>
+							加一岁
+						</Button>
+						<input
+							type="text"
+							onChange={e => {
+								this.onValueChange(e);
+							}}
+						/>
+					</Col>
+				</Row>
+				<Row>
+					<Col span={12}>
+						<div>
+							<Button type="primary">Primary</Button>
+							<Button>Default</Button>
+							<Button type="dashed">Dashed</Button>
+							<Button type="danger">Danger</Button>
+							<Button type="link">Link</Button>
+						</div>
+					</Col>
+				</Row>
+			</div>
+		);
+	}
+}

src/App.jsx

@@ -1,66 +1,35 @@
-import * as React from 'react';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { LocaleProvider } from 'antd';
+import zh_CN from 'antd/lib/locale-provider/zh_CN';
+import moment from 'moment';
+// import 'moment/locale/en-us';
 import { BrowserRouter as Router, Switch, Redirect, Route, Link } from 'react-router-dom';
-import { Button, Row, Col,Pagination } from 'antd';
 import './App.scss';
-export default class App extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			name: '飞鼠',
-			age: 18
-		};
-	}
-
-	heandleClick() {
-		this.setState({
-			age: this.state.age + 1
-		});
-	}
-
-	onValueChange() {
-		this.setState({
-			age: this.state.age + 1
-		});
-	}
+moment.locale('zh-cn');
+// Components
+import HLayout from 'component/layout/index.jsx';
+// Page
+import Home from 'page/home/index.jsx';
 
+class App extends React.Component {
 	render() {
 		return (
-			<div>
-				<Row>
-					<Pagination defaultCurrent={1} total={50} showSizeChanger />
-				</Row>
-				<Row>
-					<Col span={12}>
-						<h2>I am {this.state.name}</h2>
-						<p>I am {this.state.age}</p>
-						<div className="context">i am {this.state.name}</div>
-						<Button
-							onClick={e => {
-								this.heandleClick(e);
-							}}
-						>
-							加一岁
-						</Button>
-						<input
-							type="text"
-							onChange={e => {
-								this.onValueChange(e);
-							}}
-						/>
-					</Col>
-				</Row>
-				<Row>
-					<Col span={12}>
-						<div>
-							<Button type="primary">Primary</Button>
-							<Button>Default</Button>
-							<Button type="dashed">Dashed</Button>
-							<Button type="danger">Danger</Button>
-							<Button type="link">Link</Button>
-						</div>
-					</Col>
-				</Row>
-			</div>
+			<Router>
+				<HLayout>
+					<Switch>
+						<Route exact path="/" component={Home} />
+						<Redirect from="*" to="/" />
+					</Switch>
+				</HLayout>
+			</Router>
 		);
 	}
 }
+
+ReactDOM.render(
+	<LocaleProvider locale={zh_CN}>
+		<App />
+	</LocaleProvider>,
+	document.getElementById('app')
+);

src/App.scss

@@ -3,23 +3,5 @@
 	margin: 0;
 }
 #app {
-	padding: 0 15px;
-	p {
-		padding: 10px;
-		// background-color: $h-font-color;
-	}
-
-	.context {
-		font-size: 40px;
-		color: $h-font-color;
-	}
-
-	button {
-		// display: block;
-		// margin: 0 auto;
-		// font-size: 20px;
-		// padding: 20px;
-		// border-radius: 15px;
-		// cursor: pointer;
-	}
+	color: #fff;
 }

src/component/layout/index.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Layout } from 'antd';
+const { Header, Footer, Sider, Content } = Layout;
+import './index.scss';
+import TopNav from 'component/top-nav/index.jsx';
+import SideNav from 'component/side-nav/index.jsx';
+
+export default class HLayout extends React.Component {
+	render() {
+		return (
+			<div id="wrapper">
+				<Layout theme={'light'}>
+					<Sider
+						style={{
+							overflow: 'auto',
+							height: '100vh',
+							position: 'fixed',
+							left: 0
+						}}
+					>
+						<SideNav />
+					</Sider>
+					<Layout>
+						<Header>
+							<TopNav />
+						</Header>
+						<Content>{this.props.children}</Content>
+						<Footer>Footer</Footer>
+					</Layout>
+				</Layout>
+			</div>
+		);
+	}
+}

src/component/side-nav/index.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Menu, Icon, Button, Switch } from 'antd';
+import './index.scss';
+const SubMenu = Menu.SubMenu;
+export default class SideNav extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			theme: 'dark',
+			current: '0'
+		};
+	}
+	handleClick(e) {
+		console.log('click ', e);
+		this.setState({
+			current: e.key
+		});
+	}
+	render() {
+		return (
+			<div id="SideNav">
+				<div className="logo" />
+				<Menu
+					theme={this.state.theme}
+					onClick={e => {
+						this.handleClick(e);
+					}}
+					defaultOpenKeys={['0']}
+					selectedKeys={[this.state.current]}
+					mode="inline"
+				>
+					<Menu.Item key="0">
+						<Icon type="pie-chart" />
+						<span>Option 1</span>
+					</Menu.Item>
+					<SubMenu
+						key="sub1"
+						title={
+							<span>
+								<Icon type="mail" />
+								<span>Navigation One</span>
+							</span>
+						}
+					>
+						<Menu.Item key="1">Option 1</Menu.Item>
+						<Menu.Item key="2">Option 2</Menu.Item>
+						<Menu.Item key="3">Option 3</Menu.Item>
+						<Menu.Item key="4">Option 4</Menu.Item>
+					</SubMenu>
+					<SubMenu
+						key="sub2"
+						title={
+							<span>
+								<Icon type="appstore" />
+								<span>Navigtion Two</span>
+							</span>
+						}
+					>
+						<Menu.Item key="5">Option 5</Menu.Item>
+						<Menu.Item key="6">Option 6</Menu.Item>
+						<SubMenu key="sub3" title="Submenu">
+							<Menu.Item key="7">Option 7</Menu.Item>
+							<Menu.Item key="8">Option 8</Menu.Item>
+						</SubMenu>
+					</SubMenu>
+				</Menu>
+			</div>
+		);
+	}
+}

src/component/side-nav/index.scss

@@ -0,0 +1,10 @@
+#SideNav {
+	// height: 100vh;
+	// width: 256px;
+	// overflow-y: scroll;
+	.logo {
+		height: 32px;
+		background: rgba(255, 255, 255, 0.2);
+		margin: 16px;
+	}
+}

src/component/top-nav/index.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Menu, Icon } from 'antd';
+import './index.scss';
+const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;
+export default class TopNav extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			theme: 'dark',
+			current: 'mail'
+		};
+	}
+	handleClick() {
+		console.log('click ', e);
+		this.setState({
+			current: e.key
+		});
+	}
+	render() {
+		return (
+			<div id="TopNav">
+				<div className="logo" />
+				<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} style={{ lineHeight: '64px' }}>
+					<Menu.Item key="1">nav 1</Menu.Item>
+					<Menu.Item key="2">nav 2</Menu.Item>
+					<Menu.Item key="3">nav 3</Menu.Item>
+				</Menu>
+			</div>
+		);
+	}
+}

src/component/top-nav/index.scss

@@ -0,0 +1,3 @@
+#TopNav{
+	margin-left: 350px;
+}

src/index.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LocaleProvider } from 'antd';
-import zh_CN from 'antd/lib/locale-provider/zh_CN';
-import moment from 'moment';
-// import 'moment/locale/en-us';
-import App from './App.jsx';
-
-moment.locale('zh-cn');
-
-ReactDOM.render(
-	<LocaleProvider locale={zh_CN}>
-		<App />
-	</LocaleProvider>,
-	document.getElementById('app')
-);

webpack.config.js

@@ -5,7 +5,7 @@ const htmlPlugin = new HtmlWebpackPlugin({
   filename: './index.html'
 });
 module.exports = {
-  entry: './src/index.jsx',
+  entry: './src/App.jsx',
   resolve: {
     alias: {
       page: path.resolve(__dirname, 'src/page'),