bread

src/components/Layout/Breadcrumb/index.js

@@ -1,61 +0,0 @@
-import React from 'react'
-import items from 'menu.js'
-import {Breadcrumb, Icon} from 'antd'
-import {Logger} from '../../utils/lib.js'
-
-const logger = Logger.getLogger('Breadcrumb')
-
-const Bread = React.createClass({
-  getInitialState() {
-    let iconMap = new Map()
-    let nameMap = new Map()
-    items.forEach((level1) => {
-      nameMap.set(level1.key, level1.name)
-      iconMap.set(level1.key, level1.icon)
-      if (level1.child) {
-        level1.child.forEach((level2) => {
-          nameMap.set(level2.key, level2.name)
-          if (level2.child) {
-            level2.child.forEach((level3) => {
-              nameMap.set(level3.key, level3.name)
-            })
-          }
-        })
-      }
-    })
-    iconMap.set("error", "frown")
-    nameMap.set("error", "页面未找到")
-    return {iconMap, nameMap}
-  },
-  render() {
-    let itemArray = []
-    const _this = this
-    itemArray.push(
-      <Breadcrumb.Item key="systemHome" href="javascript:;"><Icon type="home"/></Breadcrumb.Item>
-    )
-    for (const route of this.props.routes) {
-      const name = _this.state.nameMap.get(route.path)
-      if (name) {
-        const icon = _this.state.iconMap.get(route.path)
-        if (icon) {
-          itemArray.push(
-            <Breadcrumb.Item key={name}><Icon type={icon}/> {name}</Breadcrumb.Item>
-          )
-        } else {
-          itemArray.push(
-            <Breadcrumb.Item key={name}>{name}</Breadcrumb.Item>
-          )
-        }
-      }
-    }
-    return (
-      <div className="ant-layout-breadcrumb">
-        <Breadcrumb>
-          {itemArray}
-        </Breadcrumb>
-      </div>
-    )
-  }
-})
-
-export default Bread

src/components/Layout/Header.jsx

@@ -19,7 +19,7 @@ function Header({ location }) {
   return (
     <div className={styles.header}>
       <Menu className="header-menu" mode="horizontal">
-        <SubMenu title={<span><Icon type="user" />吴彦祖</span>}>
+        <SubMenu style={{float:'right'}} title={<span><Icon type="user" />吴彦祖</span>}>
           <Menu.Item key="signOut">
             <a>注销</a>
           </Menu.Item>

src/components/Layout/Sidebar/index.js

@@ -1,117 +0,0 @@
-import React from 'react'
-import { Link } from 'react-router'
-import { Menu, Icon } from 'antd'
-import Logger from '../../utils/logger'
-import items from 'menu.js'
-
-const SubMenu = Menu.SubMenu
-const MenuItem = Menu.Item
-const logger = Logger.getLogger('Sidebar')
-
-const Sider = React.createClass({
-  getInitialState() {
-    let fixed=false;
-    let fixedText="固定";
-    const paths = []
-    const defaultOpenKeys = []
-    if(window.localStorage.getItem("mgFixedSider")&&window.localStorage.getItem("mgFixedSider")=="true"){
-      fixed=true;
-      fixedText="取消";
-    }
-    const menu = items.map((level1) => {
-      paths.push(level1.key)
-      if (defaultOpenKeys.length === 0) {
-        defaultOpenKeys.push(level1.key)
-      }
-      if (level1.child) {
-        const level2menu = level1.child.map((level2) => {
-          paths.push(level2.key)
-          if (level2.child) {
-            const level3menu = level2.child.map((level3) => {
-              paths.push(level3.key)
-              const tmp = this.transFormMenuItem(level3, paths)
-              paths.pop()
-              return tmp
-            })
-            paths.pop()
-            return (
-              <SubMenu key={level2.key} title={level2.name}>
-                {level3menu}
-              </SubMenu>
-            )
-          } else {
-            const tmp = this.transFormMenuItem(level2, paths)
-            paths.pop()
-            return tmp
-          }
-        })
-        paths.pop()
-        return (
-          <SubMenu key={level1.key} title={<span> <Icon type={level1.icon} />{level1.name}</span>}>
-            {level2menu}
-          </SubMenu>
-        )
-      }
-      else {
-        const tmp = this.transFormMenuItem(level1, paths)
-        paths.pop()
-        return tmp
-      }
-    })
-    return {
-      fixed:fixed,
-      collapse: true,
-      fixedText:fixedText,
-      menu,
-    }
-  },
-  onCollapseChange() {
-    this.setState({
-      collapse: !this.state.collapse,
-    })
-  },
-  switchFixed(){
-    window.localStorage.setItem("mgFixedSider",!this.state.fixed);
-    this.setState({
-      fixed: !this.state.fixed
-    });
-    if(this.state.fixedText=="固定"){
-      this.setState({
-        fixed: !this.state.fixed,
-        fixedText:"取消"
-      });
-    } else {
-      this.setState({
-        fixed: !this.state.fixed,
-        fixedText:"固定"
-      });
-    }
-  },
-  transFormMenuItem(obj, paths) {
-    const parentPath = paths.join('/')
-    return (
-      <MenuItem key={obj.key}>
-        {obj.child ? obj.name : <Link to={`/${parentPath}`}> {obj.icon ? <Icon type={obj.icon} /> : ''} {obj.name}</Link> }
-      </MenuItem>
-    )
-  },
-  render() {
-    const collapse = this.state.collapse
-    return (
-        <div>
-          <div className="ant-layout-logo m-y">
-            <img src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
-            <span>Ant Design</span>
-         </div>
-          <Menu mode="inline" theme="dark" defaultSelectedKeys={['dashboard']}>
-            {this.state.menu}
-          </Menu>
-          <div className="ant-aside-action" onClick={this.onCollapseChange}>
-            {collapse ? <Icon type="right" /> : <Icon type="left" />}
-          </div>
-        </div>
-    )
-  }
-})
-
-module.exports = Sider

src/components/layout/bread.jsx

@@ -1,19 +1,52 @@
 import React, {PropTypes} from 'react'
 import {Breadcrumb, Icon} from 'antd'
+import {Link} from 'dva/router'
 import styles from './main.less'
+import {config, menu} from '../../utils'
+
+let pathSet = []
+const getPathSet = function (menuArray, parentPath) {
+  parentPath = parentPath || '/'
+  menuArray.map(item => {
+    pathSet[(parentPath + item.key).replace(/\//g, "-").hyphenToHump()] = {
+      path: parentPath + item.key,
+      name: item.name,
+      icon: item.icon || ''
+    }
+    if (!!item.child) {
+      getPathSet(item.child, parentPath + item.key + '/')
+    }
+  })
+}
+getPathSet(menu)
 
 function Bread({location}) {
+  let pathNames = []
+  location.pathname.substr(1).split('/').map((item, key) => {
+    if (key > 0) {
+      pathNames.push((pathNames[key - 1] + "-" + item).hyphenToHump())
+    } else {
+      pathNames.push(("-" + item).hyphenToHump())
+    }
+  })
+  const breads = pathNames.map((item, key) => {
+    return (
+      <Breadcrumb.Item key={key}>
+        <Link to={pathSet[item].path}>
+          {pathSet[item].icon
+            ? <Icon type={pathSet[item].icon}/>
+            : ''}
+          {pathSet[item].name}
+        </Link>
+      </Breadcrumb.Item>
+    )
+  })
+
   return (
     <div className={styles.bread}>
       <Breadcrumb>
-        <Breadcrumb.Item>Home</Breadcrumb.Item>
-        <Breadcrumb.Item>
-          <a href="">Application Center</a>
-        </Breadcrumb.Item>
-        <Breadcrumb.Item>
-          <a href="">Application List</a>
-        </Breadcrumb.Item>
-        <Breadcrumb.Item>An Application</Breadcrumb.Item>
+        <Breadcrumb.Item>仪表盘</Breadcrumb.Item>
+        {breads}
       </Breadcrumb>
     </div>
   )

src/components/layout/main.less

@@ -3,6 +3,7 @@
 .layout {
   position: relative;
   height: 100vh;
+  min-width: 1200px;
 
   .sider {
     width: 224px;
@@ -35,7 +36,10 @@
   }
 
   .header {
-    :global(.ant-menu-horizontal) {
+    :global .ant-menu-horizontal {
+      & > .ant-menu-submenu {
+        float: right;
+      }
       border: none;
     }
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
@@ -80,12 +84,14 @@
 
 :global .ant-menu-dark {
   .ant-menu-submenu-title:hover,
-  .ant-menu-submenu:hover{
+  .ant-menu-submenu:hover {
     color: @primary-color;
   }
-  .ant-menu-submenu-selected{
+
+  .ant-menu-submenu-selected {
     color: @primary-color;
-    &:not(.ant-menu-submenu-open){
+
+    &:not(.ant-menu-submenu-open) {
       background-color: rgba(255,255,255,0.05);
     }
   }

src/utils/index.js

@@ -2,8 +2,20 @@ import config from './config'
 import menu from './menu'
 import request from './request'
 
+// 连字符转驼峰
+String.prototype.hyphenToHump = function () {
+  return this.replace(/-(\w)/g, function () {
+    return arguments[1].toUpperCase()
+  })
+}
+
+// 驼峰转连字符
+String.prototype.humpToHyphen = function () {
+  return this.replace(/([A-Z])/g,"-$1").toLowerCase()
+}
+
 module.exports = {
   config,
   menu,
-  request,
+  request
 }