diff --git a/src/components/Layout/Breadcrumb/index.js b/src/components/Layout/Breadcrumb/index.js deleted file mode 100644 index bf06cfb..0000000 --- a/src/components/Layout/Breadcrumb/index.js +++ /dev/null @@ -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( - - ) - 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( - {name} - ) - } else { - itemArray.push( - {name} - ) - } - } - } - return ( -
- - {itemArray} - -
- ) - } -}) - -export default Bread diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx index d5c8d5a..c8d2a70 100644 --- a/src/components/Layout/Header.jsx +++ b/src/components/Layout/Header.jsx @@ -19,7 +19,7 @@ function Header({ location }) { return (
- 吴彦祖}> + 吴彦祖}> 注销 diff --git a/src/components/Layout/Sidebar/index.js b/src/components/Layout/Sidebar/index.js deleted file mode 100644 index 4bd6d16..0000000 --- a/src/components/Layout/Sidebar/index.js +++ /dev/null @@ -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 ( - - {level3menu} - - ) - } else { - const tmp = this.transFormMenuItem(level2, paths) - paths.pop() - return tmp - } - }) - paths.pop() - return ( - {level1.name}}> - {level2menu} - - ) - } - 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 ( - - {obj.child ? obj.name : {obj.icon ? : ''} {obj.name} } - - ) - }, - render() { - const collapse = this.state.collapse - return ( -
-
- - Ant Design -
- - {this.state.menu} - -
- {collapse ? : } -
-
- ) - } -}) - -module.exports = Sider diff --git a/src/components/layout/bread.jsx b/src/components/layout/bread.jsx index bee73fb..4fbcebd 100644 --- a/src/components/layout/bread.jsx +++ b/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 ( + + + {pathSet[item].icon + ? + : ''} + {pathSet[item].name} + + + ) + }) + return (
- Home - - Application Center - - - Application List - - An Application + 仪表盘 + {breads}
) diff --git a/src/components/layout/main.less b/src/components/layout/main.less index 4628678..d849768 100644 --- a/src/components/layout/main.less +++ b/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); } } diff --git a/src/utils/index.js b/src/utils/index.js index b977539..22e6e26 100644 --- a/src/utils/index.js +++ b/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 }