From d595e723ea4dcb902ba0c1b62b5997b35744f94c Mon Sep 17 00:00:00 2001
From: hanpei <happysoftware@foxmail.com>
Date: Thu, 31 May 2018 18:17:30 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20=E7=82=B9=E5=87=BBHeader=E5=86=85?=
 =?UTF-8?q?=E7=9A=84=E8=A1=A8=E7=A4=BA=E6=8A=98=E5=8F=A0=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=9A=84=E5=9B=BE=E6=A0=87=EF=BC=8C=E4=B8=8D?=
 =?UTF-8?q?=E8=B5=B7=E4=BD=9C=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../containers/Layout/HeaderContainers.jsx    | 646 +++++++++---------
 .../containers/Layout/LayoutContainers.jsx    | 338 ++++-----
 2 files changed, 492 insertions(+), 492 deletions(-)

diff --git a/src/common/containers/Layout/HeaderContainers.jsx b/src/common/containers/Layout/HeaderContainers.jsx
index 7c889b1..0bc9e50 100644
--- a/src/common/containers/Layout/HeaderContainers.jsx
+++ b/src/common/containers/Layout/HeaderContainers.jsx
@@ -1,323 +1,323 @@
-// 顶部导航条
-import React from 'react'
-import {Menu, Icon, Layout, Badge, Modal, Form, Input, Row, Col, notification} from 'antd'
-
-import screenfull from 'screenfull'
-
-import styled from 'styled-components'
-import elf from '../../../elf'
-import { apiPost } from '../../../api/index'
-
-import userLogo from '../../../assets/images/b1.jpg'
-
-const { Header } = Layout
-const SubMenu = Menu.SubMenu
-const MenuItemGroup = Menu.ItemGroup
-const FormItem = Form.Item
-
-const UserDiv = styled.span `
-    position: relative;
-    display: inline-block;
-    width: 40px;
-    line-height: 1;
-    border-radius: 500px;
-    white-space: nowrap;
-    font-weight: bold;
-    i {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 10px;
-        height: 10px;
-        margin: 1px;
-        border-width: 2px;
-        border-style: solid;
-        border-radius: 100%;
-        border-color: #ffffff;
-        &.bottom {
-            left: auto;
-            top: auto;
-            bottom: 0;
-            right: 0;
-        }
-        &.on {
-            background-color: #6cc788;
-        }
-    }
-    img {
-        vertical-align: middle;
-        border-radius: 500px;
-        width: 100%;
-    }
-`
-
-class headerContainers extends React.Component {
-    // 展开状态
-    state = {
-        collapsed: false,
-        visible: false,
-        visible1: false
-    }
-    // 全屏操作
-    screenFull = () => {
-        if (screenfull.enabled) {
-            screenfull.request()
-        }
-    }
-
-    Logout = () => {
-        localStorage.removeItem('token')
-        window.location.href = '/login'
-    }
-    // 单击确定按钮提交表单
-    handleSubmit = async () => {
-        let adopt = false
-        this.props.form.validateFields(
-            (err) => {
-                if (err) {
-                    adopt = false
-                } else {
-                    adopt = true
-                }
-            },
-        )
-        if (adopt) {
-            let json = this.props.form.getFieldsValue()
-            /* if ((json.oldPassWord + '') === 'undefined' || (json.oldPassWord + '') === '') {
-                notification.open({
-                    message: '旧密码不能为空！',
-                    icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
-                })
-                return false
-            }
-            if ((json.passWord + '') === 'undefined' || (json.passWord + '') === '') {
-                notification.open({
-                    message: '新密码不能为空！',
-                    icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
-                })
-                return false
-            }*/
-            let pattern = /^(?![^a-zA-Z]+$)(?!\D+$).{6,12}/
-            if (!pattern.test(json.passWord)) {
-                notification.open({
-                    message: '密码长度6-12位，且必须同时含有数字和字母',
-                    icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
-                })
-                return false
-            }
-            if (json.confirmPassWord !== json.passWord) {
-                notification.open({
-                    message: '两次密码输入不一致！',
-                    icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
-                })
-                return false
-            }
-            let result = await apiPost(
-                '/system/updatePassWord',
-                json
-            )
-            notification.open({
-                message: result.data,
-                icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
-            })
-            if (result.data === '修改成功') {
-                this.setState({
-                    visible: false,
-                    isFirst: true
-                })
-                window.location.href = '/login'
-            }
-        }
-    }
-    handleSubmit2 = async () => {
-        let json = this.props.form.getFieldsValue()
-        let result = await apiPost(
-            '/system/updatePhone',
-            json
-        )
-        notification.open({
-            message: result.data,
-            icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
-        })
-        this.setState({visible: false,
-            visible1: false })
-    }
-    handleCancel = (e) => {
-        this.setState({ visible: false,
-            visible1: false})
-    }
-    updatePassword = () => {
-        this.setState({
-            visible: true,
-            visible1: false
-        })
-    }
-    updatePhone = () => {
-        this.setState({
-            visible1: true,
-            visible: false
-        })
-    }
-
-    // 打开 '个人设置'页面
-    // toOptions = () => {
-    //     // console.log(this)
-    //     this.props.route.history.push('/home/system/options')
-    // }
-
-    render () {
-        const { getFieldDecorator } = this.props.form
-        return (
-            <Header className="custom-theme"
-                style={{
-                    padding: 0,
-                    height: 65,
-                    background: elf.c.content
-                }}
-            >
-                <Modal
-                    maskClosable={ false }
-                    title="修改密码"
-                    style={{ top: 100 }}
-                    width={ 400 }
-                    visible={ this.state.visible }
-                    onOk={ this.handleSubmit }
-                    onCancel={ this.handleCancel }
-                >
-                    <Form layout="horizontal">
-                        <Row>
-                            <Col span={ 20 }>
-                                <FormItem label="旧密码" labelCol={{ span: 6 }}
-                                    wrapperCol={{ span: 16 }}
-                                >
-                                    {getFieldDecorator('oldPassWord', {
-                                        rules: [ {
-                                            required: true,
-                                            message: '旧密码不能为空'
-                                        }]
-                                    })(
-                                        <Input placeholder="请输入旧密码" />
-                                    )}
-                                </FormItem>
-                                <FormItem label="新密码" labelCol={{ span: 6 }}
-                                    wrapperCol={{ span: 16 }}
-                                >
-                                    {getFieldDecorator('passWord', {
-                                        rules: [ {
-                                            required: true,
-                                            message: '新密码不能为空'
-                                        }]
-                                    })(
-                                        <Input placeholder="请输入新密码" />
-                                    )}
-                                </FormItem>
-                                <FormItem label="确认密码" labelCol={{ span: 6 }}
-                                    wrapperCol={{ span: 16 }}
-                                >
-                                    {getFieldDecorator('confirmPassWord', {
-                                        rules: [ {
-                                            required: true,
-                                            message: '确认密码不能为空'
-                                        }]
-                                    })(
-                                        <Input placeholder="请再次输入新密码" />
-                                    )}
-                                </FormItem>
-                            </Col>
-                        </Row>
-                    </Form>
-                </Modal>
-                <Modal maskClosable={false}
-                    title="修改电话"
-                    style={{top: 100}}
-                    width={400}
-                    visible={this.state.visible1}
-                    onOk={this.handleSubmit2}
-                    onCancel={this.handleCancel}
-                >
-                    <Form layout="horizontal">
-                        <Row>
-                            <Col span={20}>
-                                <FormItem label="电话" labelCol={{ span: 6 }}
-                                    wrapperCol={{ span: 16 }}
-                                >
-                                    {getFieldDecorator('phone')(
-                                        <Input placeholder="请输入新的手机号或座机号码" />
-                                    )}
-                                </FormItem>
-                            </Col>
-                        </Row>
-                    </Form>
-                </Modal>
-                <Icon
-                    className="trigger custom-trigger"
-                    type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
-                    onClick={this.props.toggle}
-                    style={{
-                        fontSize: elf.f.text + 'px',
-                        lineHeight: '64px',
-                        // padding: '0',
-                        paddingLeft: `${elf.d.autoPadding}px`,
-                        cursor: 'pointer',
-                        transition: 'color .3s'
-                    }}
-                />
-                {/* 顶部导航菜单 */}
-                <Menu
-                    mode="horizontal"
-                    style={{
-                        background: elf.c.content,
-                        lineHeight: '64px',
-                        float: 'right'
-                    }}
-                >
-                    {/* 全屏按钮 */}
-                    <Menu.Item key="full" onClick={this.screenFull}>
-                        <Icon
-                            type="arrows-alt"
-                            onClick={this.screenFull}
-                        />
-                    </Menu.Item>
-
-                    {/* 用户消息 */}
-                    <Menu.Item key="1">
-                        <Badge count={25} overflowCount={10} style={{marginLeft: 10}}>
-                            <Icon type="notification" />
-                        </Badge>
-                    </Menu.Item>
-
-                    {/* 用户中心 */}
-                    <SubMenu
-                        title={
-                            <UserDiv className="avatar">
-                                <img src={ userLogo } alt="头像" />
-                                <i className="on bottom b-white" />
-                            </UserDiv>
-                        }
-                    >
-                        <MenuItemGroup style={{ paddingRight: '0' }}>
-                            <Menu.Item key="setting:3">
-                                <a onClick={this.updatePassword}>修改密码</a>
-                            </Menu.Item>
-                            <Menu.Item key="setting:4">
-                                <a onClick={this.updatePhone}>修改电话</a>
-                            </Menu.Item>
-                            <Menu.Item key="setting:5">
-                                <span onClick={this.Logout}>退出</span>
-                            </Menu.Item>
-                        </MenuItemGroup>
-                    </SubMenu>
-                </Menu>
-                <style>{`
-                    .ant-menu-submenu-horizontal > .ant-menu {
-                        width: 120px;
-                        left: -50px;
-                    }
-                `}</style>
-            </Header>
-
-        )
-    }
-}
-let HeaderContainers = Form.create()(headerContainers)
-export default HeaderContainers
+// 顶部导航条
+import React from 'react'
+import {Menu, Icon, Layout, Badge, Modal, Form, Input, Row, Col, notification} from 'antd'
+
+import screenfull from 'screenfull'
+
+import styled from 'styled-components'
+import elf from '../../../elf'
+import { apiPost } from '../../../api/index'
+
+import userLogo from '../../../assets/images/b1.jpg'
+
+const { Header } = Layout
+const SubMenu = Menu.SubMenu
+const MenuItemGroup = Menu.ItemGroup
+const FormItem = Form.Item
+
+const UserDiv = styled.span `
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    line-height: 1;
+    border-radius: 500px;
+    white-space: nowrap;
+    font-weight: bold;
+    i {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 10px;
+        height: 10px;
+        margin: 1px;
+        border-width: 2px;
+        border-style: solid;
+        border-radius: 100%;
+        border-color: #ffffff;
+        &.bottom {
+            left: auto;
+            top: auto;
+            bottom: 0;
+            right: 0;
+        }
+        &.on {
+            background-color: #6cc788;
+        }
+    }
+    img {
+        vertical-align: middle;
+        border-radius: 500px;
+        width: 100%;
+    }
+`
+
+class headerContainers extends React.Component {
+    // 展开状态
+    state = {
+        // collapsed: false,
+        visible: false,
+        visible1: false
+    }
+    // 全屏操作
+    screenFull = () => {
+        if (screenfull.enabled) {
+            screenfull.request()
+        }
+    }
+
+    Logout = () => {
+        localStorage.removeItem('token')
+        window.location.href = '/login'
+    }
+    // 单击确定按钮提交表单
+    handleSubmit = async () => {
+        let adopt = false
+        this.props.form.validateFields(
+            (err) => {
+                if (err) {
+                    adopt = false
+                } else {
+                    adopt = true
+                }
+            },
+        )
+        if (adopt) {
+            let json = this.props.form.getFieldsValue()
+            /* if ((json.oldPassWord + '') === 'undefined' || (json.oldPassWord + '') === '') {
+                notification.open({
+                    message: '旧密码不能为空！',
+                    icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
+                })
+                return false
+            }
+            if ((json.passWord + '') === 'undefined' || (json.passWord + '') === '') {
+                notification.open({
+                    message: '新密码不能为空！',
+                    icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
+                })
+                return false
+            }*/
+            let pattern = /^(?![^a-zA-Z]+$)(?!\D+$).{6,12}/
+            if (!pattern.test(json.passWord)) {
+                notification.open({
+                    message: '密码长度6-12位，且必须同时含有数字和字母',
+                    icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
+                })
+                return false
+            }
+            if (json.confirmPassWord !== json.passWord) {
+                notification.open({
+                    message: '两次密码输入不一致！',
+                    icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
+                })
+                return false
+            }
+            let result = await apiPost(
+                '/system/updatePassWord',
+                json
+            )
+            notification.open({
+                message: result.data,
+                icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
+            })
+            if (result.data === '修改成功') {
+                this.setState({
+                    visible: false,
+                    isFirst: true
+                })
+                window.location.href = '/login'
+            }
+        }
+    }
+    handleSubmit2 = async () => {
+        let json = this.props.form.getFieldsValue()
+        let result = await apiPost(
+            '/system/updatePhone',
+            json
+        )
+        notification.open({
+            message: result.data,
+            icon: <Icon type="smile-circle" style={{color: '#108ee9'}} />
+        })
+        this.setState({visible: false,
+            visible1: false })
+    }
+    handleCancel = (e) => {
+        this.setState({ visible: false,
+            visible1: false})
+    }
+    updatePassword = () => {
+        this.setState({
+            visible: true,
+            visible1: false
+        })
+    }
+    updatePhone = () => {
+        this.setState({
+            visible1: true,
+            visible: false
+        })
+    }
+
+    // 打开 '个人设置'页面
+    // toOptions = () => {
+    //     // console.log(this)
+    //     this.props.route.history.push('/home/system/options')
+    // }
+
+    render () {
+        const { getFieldDecorator } = this.props.form
+        return (
+            <Header className="custom-theme"
+                style={{
+                    padding: 0,
+                    height: 65,
+                    background: elf.c.content
+                }}
+            >
+                <Modal
+                    maskClosable={ false }
+                    title="修改密码"
+                    style={{ top: 100 }}
+                    width={ 400 }
+                    visible={ this.state.visible }
+                    onOk={ this.handleSubmit }
+                    onCancel={ this.handleCancel }
+                >
+                    <Form layout="horizontal">
+                        <Row>
+                            <Col span={ 20 }>
+                                <FormItem label="旧密码" labelCol={{ span: 6 }}
+                                    wrapperCol={{ span: 16 }}
+                                >
+                                    {getFieldDecorator('oldPassWord', {
+                                        rules: [ {
+                                            required: true,
+                                            message: '旧密码不能为空'
+                                        }]
+                                    })(
+                                        <Input placeholder="请输入旧密码" />
+                                    )}
+                                </FormItem>
+                                <FormItem label="新密码" labelCol={{ span: 6 }}
+                                    wrapperCol={{ span: 16 }}
+                                >
+                                    {getFieldDecorator('passWord', {
+                                        rules: [ {
+                                            required: true,
+                                            message: '新密码不能为空'
+                                        }]
+                                    })(
+                                        <Input placeholder="请输入新密码" />
+                                    )}
+                                </FormItem>
+                                <FormItem label="确认密码" labelCol={{ span: 6 }}
+                                    wrapperCol={{ span: 16 }}
+                                >
+                                    {getFieldDecorator('confirmPassWord', {
+                                        rules: [ {
+                                            required: true,
+                                            message: '确认密码不能为空'
+                                        }]
+                                    })(
+                                        <Input placeholder="请再次输入新密码" />
+                                    )}
+                                </FormItem>
+                            </Col>
+                        </Row>
+                    </Form>
+                </Modal>
+                <Modal maskClosable={false}
+                    title="修改电话"
+                    style={{top: 100}}
+                    width={400}
+                    visible={this.state.visible1}
+                    onOk={this.handleSubmit2}
+                    onCancel={this.handleCancel}
+                >
+                    <Form layout="horizontal">
+                        <Row>
+                            <Col span={20}>
+                                <FormItem label="电话" labelCol={{ span: 6 }}
+                                    wrapperCol={{ span: 16 }}
+                                >
+                                    {getFieldDecorator('phone')(
+                                        <Input placeholder="请输入新的手机号或座机号码" />
+                                    )}
+                                </FormItem>
+                            </Col>
+                        </Row>
+                    </Form>
+                </Modal>
+                <Icon
+                    className="trigger custom-trigger"
+                    type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'}
+                    onClick={this.props.toggle}
+                    style={{
+                        fontSize: elf.f.text + 'px',
+                        lineHeight: '64px',
+                        // padding: '0',
+                        paddingLeft: `${elf.d.autoPadding}px`,
+                        cursor: 'pointer',
+                        transition: 'color .3s'
+                    }}
+                />
+                {/* 顶部导航菜单 */}
+                <Menu
+                    mode="horizontal"
+                    style={{
+                        background: elf.c.content,
+                        lineHeight: '64px',
+                        float: 'right'
+                    }}
+                >
+                    {/* 全屏按钮 */}
+                    <Menu.Item key="full" onClick={this.screenFull}>
+                        <Icon
+                            type="arrows-alt"
+                            onClick={this.screenFull}
+                        />
+                    </Menu.Item>
+
+                    {/* 用户消息 */}
+                    <Menu.Item key="1">
+                        <Badge count={25} overflowCount={10} style={{marginLeft: 10}}>
+                            <Icon type="notification" />
+                        </Badge>
+                    </Menu.Item>
+
+                    {/* 用户中心 */}
+                    <SubMenu
+                        title={
+                            <UserDiv className="avatar">
+                                <img src={ userLogo } alt="头像" />
+                                <i className="on bottom b-white" />
+                            </UserDiv>
+                        }
+                    >
+                        <MenuItemGroup style={{ paddingRight: '0' }}>
+                            <Menu.Item key="setting:3">
+                                <a onClick={this.updatePassword}>修改密码</a>
+                            </Menu.Item>
+                            <Menu.Item key="setting:4">
+                                <a onClick={this.updatePhone}>修改电话</a>
+                            </Menu.Item>
+                            <Menu.Item key="setting:5">
+                                <span onClick={this.Logout}>退出</span>
+                            </Menu.Item>
+                        </MenuItemGroup>
+                    </SubMenu>
+                </Menu>
+                <style>{`
+                    .ant-menu-submenu-horizontal > .ant-menu {
+                        width: 120px;
+                        left: -50px;
+                    }
+                `}</style>
+            </Header>
+
+        )
+    }
+}
+let HeaderContainers = Form.create()(headerContainers)
+export default HeaderContainers
diff --git a/src/common/containers/Layout/LayoutContainers.jsx b/src/common/containers/Layout/LayoutContainers.jsx
index 187d4b1..4ac2de5 100644
--- a/src/common/containers/Layout/LayoutContainers.jsx
+++ b/src/common/containers/Layout/LayoutContainers.jsx
@@ -1,169 +1,169 @@
-/**
- * @author 闫晓迪
- * @email 929213769@qq.com
- * @create date 2017-09-06 03:06:07
- * @modify date 2017-09-06 03:06:07
- * @desc 内容部分 - 布局
-*/
-import React from 'react'
-import { Route } from 'react-router-dom'
-
-import styled from 'styled-components'
-import elf from '../../../elf'
-
-import SiderContainers from './SiderContainers'
-import HeaderContainers from './HeaderContainers'
-import TabsBox from './TabsBox'
-
-// Antd 布局组件
-import { Layout } from 'antd' // Icon
-const { Header, Sider } = Layout // Sider
-
-// let num = 1
-// let timer = (num2) => setTimeout(
-//     () => {
-//         if (num2 === num) {
-//             Modal.info({
-//                 title: '你已经有五分钟没有操作了,请输入密码后在操作！',
-//                 content: (
-//                     <div>
-//                         <span>密码</span><Input />
-//                     </div>
-//                 ),
-//                 onOk () {
-//                     alert('验证成功')
-//                 },
-//                 okText: '确定'
-//             })
-//         }
-//     },
-//     30000
-// )
-// window.onmousemove = () => {
-//     num = num + 1
-//     let num2 = num
-//     timer(num2)
-// }
-
-// 负责 渲染传递进来的 compObj
-const RouteWithSubRoutes = (route) => (
-    <Route path={ route.path } render={ props => (
-        // 把自路由向下传递来达到嵌套。
-        <TabsBox
-            route={ route }
-            tabsProps={ props }
-        />
-    )}
-    />
-)
-
-// 渲染内容
-const MainContent = ({ route }) => (
-    <div>
-        {
-            route.routes.map((route, i) => (
-                <RouteWithSubRoutes key={ i } { ...route } />
-            ))
-        }
-    </div>
-)
-
-// Logo 图片
-const logoObj = require('../../../assets/images/logo200X50.png')
-
-const LogoBox = styled.div `
-    width: 100%;
-    object-fit: cover;
-`
-// let switchingValue = 1
-
-class LayoutContainers extends React.Component {
-    state = {
-        collapsed: false
-    }
-
-    toggle = () => {
-        this.setState({
-            collapsed: !this.state.collapsed
-        })
-    }
-    // shouldComponentUpdate (nextProps, nextState) {
-    //     return false
-    // }
-    render () {
-        const { route } = this.props
-        return (
-            <Layout
-                style={{
-                    height: '100%'
-                }}
-            >
-                {/* 左侧导航栏 */}
-                <Sider
-                    width={ elf.d.asideWidth }
-                    trigger={ null }
-                    collapsible
-                    collapsed={ this.state.collapsed }
-                    style={{ overflowY: 'auto' }}
-                >
-                    <LogoBox className="logo">
-                        <img src={ logoObj } alt="Logo" />
-                    </LogoBox>
-
-                    <SiderContainers />
-                </Sider>
-
-                <Layout
-                    style={{
-                        width: `calc(100% - ${elf.d.asideWidth}px)`,
-                        background: '#FFF'
-                    }}
-                >
-                    <Header style={{ padding: 0 }} >
-                        {/*
-                            <Icon
-                                className="trigger"
-                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
-                                onClick={this.toggle}
-                            />
-                        */}
-                        <HeaderContainers route={ this.props } />
-                    </Header>
-
-                    <ContentBox>
-                        <MainContent route={route} />
-                    </ContentBox>
-
-                    {/* 底部 */}
-                    {/*
-                        <FooterBox>
-                            <p> 长江中心 PMS 物业管理系统 ©2016 Created by 上朝科技 </p>
-                        </FooterBox>
-                    */}
-                </Layout>
-            </Layout>
-        )
-    }
-}
-
-// 样式
-const ContentBox = styled.div `
-    padding: 24px;
-    margin-bottom: ${elf.d.autoMargin}px;
-    background: #fff;
-    min-height: 280px;
-    overflow: auto;
-    border-top: 2px solid rgb(233, 233, 233);
-`
-
-// const FooterBox = styled.footer`
-//     position: fixed;
-//     bottom: 0;
-//     width: calc(100% - 220px);
-//     height: ${elf.d.autoPadding * 2}px;
-//     text-align: center;
-//     line-height: ${elf.d.autoPadding * 2}px;
-//     background: ${elf.c.background};
-// `
-
-export default LayoutContainers
+/**
+ * @author 闫晓迪
+ * @email 929213769@qq.com
+ * @create date 2017-09-06 03:06:07
+ * @modify date 2017-09-06 03:06:07
+ * @desc 内容部分 - 布局
+*/
+import React from 'react'
+import { Route } from 'react-router-dom'
+
+import styled from 'styled-components'
+import elf from '../../../elf'
+
+import SiderContainers from './SiderContainers'
+import HeaderContainers from './HeaderContainers'
+import TabsBox from './TabsBox'
+
+// Antd 布局组件
+import { Layout } from 'antd' // Icon
+const { Header, Sider } = Layout // Sider
+
+// let num = 1
+// let timer = (num2) => setTimeout(
+//     () => {
+//         if (num2 === num) {
+//             Modal.info({
+//                 title: '你已经有五分钟没有操作了,请输入密码后在操作！',
+//                 content: (
+//                     <div>
+//                         <span>密码</span><Input />
+//                     </div>
+//                 ),
+//                 onOk () {
+//                     alert('验证成功')
+//                 },
+//                 okText: '确定'
+//             })
+//         }
+//     },
+//     30000
+// )
+// window.onmousemove = () => {
+//     num = num + 1
+//     let num2 = num
+//     timer(num2)
+// }
+
+// 负责 渲染传递进来的 compObj
+const RouteWithSubRoutes = (route) => (
+    <Route path={ route.path } render={ props => (
+        // 把自路由向下传递来达到嵌套。
+        <TabsBox
+            route={ route }
+            tabsProps={ props }
+        />
+    )}
+    />
+)
+
+// 渲染内容
+const MainContent = ({ route }) => (
+    <div>
+        {
+            route.routes.map((route, i) => (
+                <RouteWithSubRoutes key={ i } { ...route } />
+            ))
+        }
+    </div>
+)
+
+// Logo 图片
+const logoObj = require('../../../assets/images/logo200X50.png')
+
+const LogoBox = styled.div `
+    width: 100%;
+    object-fit: cover;
+`
+// let switchingValue = 1
+
+class LayoutContainers extends React.Component {
+    state = {
+        collapsed: false
+    }
+
+    toggle = () => {
+        this.setState({
+            collapsed: !this.state.collapsed
+        })
+    }
+    // shouldComponentUpdate (nextProps, nextState) {
+    //     return false
+    // }
+    render () {
+        const { route } = this.props
+        return (
+            <Layout
+                style={{
+                    height: '100%'
+                }}
+            >
+                {/* 左侧导航栏 */}
+                <Sider
+                    width={ elf.d.asideWidth }
+                    trigger={ null }
+                    collapsible
+                    collapsed={ this.state.collapsed }
+                    style={{ overflowY: 'auto' }}
+                >
+                    <LogoBox className="logo">
+                        <img src={ logoObj } alt="Logo" />
+                    </LogoBox>
+
+                    <SiderContainers />
+                </Sider>
+
+                <Layout
+                    style={{
+                        width: `calc(100% - ${elf.d.asideWidth}px)`,
+                        background: '#FFF'
+                    }}
+                >
+                    <Header style={{ padding: 0 }} >
+                        {/*
+                            <Icon
+                                className="trigger"
+                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
+                                onClick={this.toggle}
+                            />
+                        */}
+                        <HeaderContainers { ...this.props } collapsed={ this.state.collapsed } toggle={ this.toggle } />
+                    </Header>
+
+                    <ContentBox>
+                        <MainContent route={route} />
+                    </ContentBox>
+
+                    {/* 底部 */}
+                    {/*
+                        <FooterBox>
+                            <p> 长江中心 PMS 物业管理系统 ©2016 Created by 上朝科技 </p>
+                        </FooterBox>
+                    */}
+                </Layout>
+            </Layout>
+        )
+    }
+}
+
+// 样式
+const ContentBox = styled.div `
+    padding: 24px;
+    margin-bottom: ${elf.d.autoMargin}px;
+    background: #fff;
+    min-height: 280px;
+    overflow: auto;
+    border-top: 2px solid rgb(233, 233, 233);
+`
+
+// const FooterBox = styled.footer`
+//     position: fixed;
+//     bottom: 0;
+//     width: calc(100% - 220px);
+//     height: ${elf.d.autoPadding * 2}px;
+//     text-align: center;
+//     line-height: ${elf.d.autoPadding * 2}px;
+//     background: ${elf.c.background};
+// `
+
+export default LayoutContainers