header

src/components/Layout/Header.jsx

@@ -5,12 +5,12 @@ import styles from './main.less'
 
 const SubMenu = Menu.SubMenu
 
-function Header({ location, user, logout, switchSider }) {
+function Header({  user, logout, switchSider, siderFold }) {
   let handleClickMenu = e => e.key === 'logout' && logout()
   return (
     <div className={styles.header}>
       <div className={styles.siderbutton} onClick={switchSider}>
-        <Icon type="menu-fold" />
+        <Icon type={siderFold?"menu-unfold":"menu-fold"} />
       </div>
       <Menu className="header-menu" mode="horizontal" onClick={handleClickMenu}>
         <SubMenu style={{ float: 'right' }}
@@ -25,8 +25,4 @@ function Header({ location, user, logout, switchSider }) {
   )
 }
 
-Header.propTypes = {
-  location: PropTypes.object,
-}
-
 export default Header

src/components/layout/main.less

@@ -79,6 +79,24 @@
         transition: @transition-ease-in-out;
       }
     }
+    .switchtheme{
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      height: 42px;
+      background-color: #494949;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 16px 0 24px;
+      :global{
+        .anticon{
+          min-width: 14px;
+          margin-right: 8px;
+          font-size: 14px;
+        }
+      }
+    }
   }
 
   .header {

src/components/layout/sider.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react'
-import { Menu, Icon } from 'antd'
+import { Menu, Icon, Switch } from 'antd'
 import { Link } from 'dva/router'
 import styles from './main.less'
 import { config, menu } from '../../utils'
@@ -28,7 +28,7 @@ const getMenus = function (menuArray,siderFold,parentPath) {
   })
 }
 
-function Sider({ siderFold,darkTheme }) {
+function Sider({ siderFold,darkTheme,changeTheme }) {
   return (
     <div>
       <div className={styles.logo}>
@@ -41,13 +41,12 @@ function Sider({ siderFold,darkTheme }) {
         defaultSelectedKeys={['dashboard']}>
         {getMenus(menu,siderFold)}
       </Menu>
+      {!siderFold?<div className={styles.switchtheme}>
+        <span><Icon type="bulb" />切换主题</span>
+        <Switch onChange={changeTheme} defaultChecked={true} checkedChildren="黑" unCheckedChildren="白" />
+      </div>:''}
     </div>
   )
 }
 
-Sider.propTypes = {
-  siderFold: PropTypes.bool,
-  darkTheme: PropTypes.bool
-}
-
 export default Sider

src/models/app.js

@@ -69,7 +69,14 @@ export default {
       yield put({
         type: 'switchSider'
       })
-    }
+    },
+    *changeTheme({
+      payload
+    }, {put}) {
+      yield put({
+        type: 'changeTheme'
+      })
+    },
   },
   reducers : {
     loginSuccess(state, action) {
@@ -116,6 +123,12 @@ export default {
         ...state,
         siderFold: !state.siderFold
       }
-    }
+    },
+    changeTheme(state) {
+      return {
+        ...state,
+        darkTheme: !state.darkTheme
+      }
+    },
   }
 }

src/routes/app.js

@@ -23,6 +23,7 @@ function App({children, location, dispatch, app}) {
   const headerProps = {
     user,
     location,
+    siderFold,
     logout() {
       dispatch({type: 'app/logout'})
     },
@@ -34,6 +35,9 @@ function App({children, location, dispatch, app}) {
   const siderProps = {
     siderFold,
     darkTheme,
+    changeTheme(){
+      dispatch({type: 'app/changeTheme'})
+    }
   }
 
   return (