From 2b24bcecf1dea2952ce703ed9483e0ac226fb712 Mon Sep 17 00:00:00 2001 From: liulun <412588801@qq.com> Date: Thu, 23 Mar 2017 15:21:02 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E8=BF=99=E5=87=A0=E8=A1=8C=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E6=B2=A1=E4=BB=80=E4=B9=88=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/UIElement/layer/index.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/routes/UIElement/layer/index.js b/src/routes/UIElement/layer/index.js index 24357fb..2d324a4 100644 --- a/src/routes/UIElement/layer/index.js +++ b/src/routes/UIElement/layer/index.js @@ -13,12 +13,7 @@ const IcoPage = () => { title: '默认弹层', content:
弹层内容
, }) - } else if (key === Enum.default) { - layer.open({ - title: '默认弹层', - content:
弹层内容
, - }) - } + } } return (
From 76d0af964f2b0021282493ff838ed9f63402bf6b Mon Sep 17 00:00:00 2001 From: zuiidea Date: Fri, 24 Mar 2017 11:20:27 +0800 Subject: [PATCH 2/2] fileName fist word toLocaleUpperCase --- src/components/Layout/Bread.js | 62 +++++ src/components/Layout/Footer.js | 9 + src/components/Layout/Header.js | 59 +++++ src/components/Layout/Menu.js | 79 ++++++ src/components/Layout/Sider.js | 39 +++ src/components/layout/Bread.js | 62 +++++ src/components/layout/Footer.js | 9 + src/components/layout/Header.js | 59 +++++ src/components/layout/Layout.less | 358 ++++++++++++++++++++++++++++ src/components/layout/Menu.js | 79 ++++++ src/components/layout/Sider.js | 39 +++ src/components/layout/index.js | 8 + src/routes/UIElement/layer/index.js | 2 +- 13 files changed, 863 insertions(+), 1 deletion(-) create mode 100644 src/components/Layout/Bread.js create mode 100644 src/components/Layout/Footer.js create mode 100644 src/components/Layout/Header.js create mode 100644 src/components/Layout/Menu.js create mode 100644 src/components/Layout/Sider.js create mode 100644 src/components/layout/Bread.js create mode 100644 src/components/layout/Footer.js create mode 100644 src/components/layout/Header.js create mode 100644 src/components/layout/Layout.less create mode 100644 src/components/layout/Menu.js create mode 100644 src/components/layout/Sider.js create mode 100644 src/components/layout/index.js diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js new file mode 100644 index 0000000..39a4b0f --- /dev/null +++ b/src/components/Layout/Bread.js @@ -0,0 +1,62 @@ +import React, { PropTypes } from 'react' +import { Breadcrumb, Icon } from 'antd' +import styles from './Layout.less' +import { menu } from '../../utils' + +let pathSet = [] +const getPathSet = function (menuArray, parentPath) { + parentPath = parentPath || '/' + menuArray.forEach(item => { + pathSet[(parentPath + item.key).replace(/\//g, '-').hyphenToHump()] = { + path: parentPath + item.key, + name: item.name, + icon: item.icon || '', + clickable: item.clickable === undefined, + } + if (item.child) { + getPathSet(item.child, `${parentPath}${item.key}/`) + } + }) +} +getPathSet(menu) + +function Bread ({ location }) { + let pathNames = [] + location.pathname.substr(1).split('/').forEach((item, key) => { + if (key > 0) { + pathNames.push((`${pathNames[key - 1]}-${item}`).hyphenToHump()) + } else { + pathNames.push((`-${item}`).hyphenToHump()) + } + }) + const breads = pathNames.map((item, key) => { + if (!(item in pathSet)) { + item = 'Dashboard' + } + return ( + + {pathSet[item].icon + ? + : ''} + {pathSet[item].name} + + ) + }) + + return ( +
+ + + 主页 + + {breads} + +
+ ) +} + +Bread.propTypes = { + location: PropTypes.object, +} + +export default Bread diff --git a/src/components/Layout/Footer.js b/src/components/Layout/Footer.js new file mode 100644 index 0000000..6dcc09f --- /dev/null +++ b/src/components/Layout/Footer.js @@ -0,0 +1,9 @@ +import React from 'react' +import styles from './Layout.less' +import { config } from '../../utils' + +const Footer = () =>
+ {config.footerText} +
+ +export default Footer diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js new file mode 100644 index 0000000..14e430d --- /dev/null +++ b/src/components/Layout/Header.js @@ -0,0 +1,59 @@ +import React, { PropTypes } from 'react' +import { Menu, Icon, Popover } from 'antd' +import styles from './Layout.less' +import Menus from './Menu' + +const SubMenu = Menu.SubMenu + +function Header ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys }) { + let handleClickMenu = e => e.key === 'logout' && logout() + const menusProps = { + siderFold: false, + darkTheme: false, + isNavbar, + handleClickNavMenu: switchMenuPopover, + location, + navOpenKeys, + changeOpenKeys, + } + return ( +
+ {isNavbar + ? }> +
+ +
+ + :
+ +
} + + + + {user.name} < /span>} + > + + 注销 + + + +
+ ) +} + +Header.propTypes = { + user: PropTypes.object, + logout: PropTypes.func, + switchSider: PropTypes.func, + siderFold: PropTypes.bool, + isNavbar: PropTypes.bool, + menuPopoverVisible: PropTypes.bool, + location: PropTypes.object, + switchMenuPopover: PropTypes.func, + navOpenKeys: PropTypes.array, + changeOpenKeys: PropTypes.func, +} + +export default Header diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js new file mode 100644 index 0000000..f5eeac4 --- /dev/null +++ b/src/components/Layout/Menu.js @@ -0,0 +1,79 @@ +import React, { PropTypes } from 'react' +import { Menu, Icon } from 'antd' +import { Link } from 'dva/router' +import { menu } from '../../utils' + +const topMenus = menu.map(item => item.key) +const getMenus = function (menuArray, siderFold, parentPath = '/') { + return menuArray.map(item => { + const linkTo = parentPath + item.key + if (item.child) { + return ( + {item.icon ? : ''}{siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name}}> + {getMenus(item.child, siderFold, `${linkTo}/`)} + + ) + } + return ( + + + {item.icon ? : ''} + {siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name} + + + ) + }) +} + +function Menus ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys }) { + const menuItems = getMenus(menu, siderFold) + + const getAncestorKeys = (key) => { + const map = { + '/navigation/navigation2': ['/navigation'], + } + return map[key] || [] + } + + const onOpenChange = (openKeys) => { + const latestOpenKey = openKeys.find(key => !(navOpenKeys.indexOf(key) > -1)) + const latestCloseKey = navOpenKeys.find(key => !(openKeys.indexOf(key) > -1)) + let nextOpenKeys = [] + if (latestOpenKey) { + nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey) + } + if (latestCloseKey) { + nextOpenKeys = getAncestorKeys(latestCloseKey) + } + changeOpenKeys(nextOpenKeys) + } + // 菜单栏收起时，不能操作openKeys + let menuProps = !siderFold ? { + onOpenChange, + openKeys: navOpenKeys, + } : {} + + return ( + + {menuItems} + + ) +} + +Menus.propTypes = { + siderFold: PropTypes.bool, + darkTheme: PropTypes.bool, + location: PropTypes.object, + isNavbar: PropTypes.bool, + handleClickNavMenu: PropTypes.func, + navOpenKeys: PropTypes.array, + changeOpenKeys: PropTypes.func, +} + +export default Menus diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js new file mode 100644 index 0000000..a143ef5 --- /dev/null +++ b/src/components/Layout/Sider.js @@ -0,0 +1,39 @@ +import React, { PropTypes } from 'react' +import { Icon, Switch } from 'antd' +import styles from './Layout.less' +import { config } from '../../utils' +import Menus from './Menu' + +function Sider ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys }) { + const menusProps = { + siderFold, + darkTheme, + location, + navOpenKeys, + changeOpenKeys, + } + return ( +
+
+ {'logo'} + {siderFold ? '' : {config.logoText}} +
+ + {!siderFold ?
+ 切换主题 + +
: ''} +
+ ) +} + +Sider.propTypes = { + siderFold: PropTypes.bool, + darkTheme: PropTypes.bool, + location: PropTypes.object, + changeTheme: PropTypes.func, + navOpenKeys: PropTypes.array, + changeOpenKeys: PropTypes.func, +} + +export default Sider diff --git a/src/components/layout/Bread.js b/src/components/layout/Bread.js new file mode 100644 index 0000000..39a4b0f --- /dev/null +++ b/src/components/layout/Bread.js @@ -0,0 +1,62 @@ +import React, { PropTypes } from 'react' +import { Breadcrumb, Icon } from 'antd' +import styles from './Layout.less' +import { menu } from '../../utils' + +let pathSet = [] +const getPathSet = function (menuArray, parentPath) { + parentPath = parentPath || '/' + menuArray.forEach(item => { + pathSet[(parentPath + item.key).replace(/\//g, '-').hyphenToHump()] = { + path: parentPath + item.key, + name: item.name, + icon: item.icon || '', + clickable: item.clickable === undefined, + } + if (item.child) { + getPathSet(item.child, `${parentPath}${item.key}/`) + } + }) +} +getPathSet(menu) + +function Bread ({ location }) { + let pathNames = [] + location.pathname.substr(1).split('/').forEach((item, key) => { + if (key > 0) { + pathNames.push((`${pathNames[key - 1]}-${item}`).hyphenToHump()) + } else { + pathNames.push((`-${item}`).hyphenToHump()) + } + }) + const breads = pathNames.map((item, key) => { + if (!(item in pathSet)) { + item = 'Dashboard' + } + return ( + + {pathSet[item].icon + ? + : ''} + {pathSet[item].name} + + ) + }) + + return ( +
+ + + 主页 + + {breads} + +
+ ) +} + +Bread.propTypes = { + location: PropTypes.object, +} + +export default Bread diff --git a/src/components/layout/Footer.js b/src/components/layout/Footer.js new file mode 100644 index 0000000..6dcc09f --- /dev/null +++ b/src/components/layout/Footer.js @@ -0,0 +1,9 @@ +import React from 'react' +import styles from './Layout.less' +import { config } from '../../utils' + +const Footer = () =>
+ {config.footerText} +
+ +export default Footer diff --git a/src/components/layout/Header.js b/src/components/layout/Header.js new file mode 100644 index 0000000..14e430d --- /dev/null +++ b/src/components/layout/Header.js @@ -0,0 +1,59 @@ +import React, { PropTypes } from 'react' +import { Menu, Icon, Popover } from 'antd' +import styles from './Layout.less' +import Menus from './Menu' + +const SubMenu = Menu.SubMenu + +function Header ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys }) { + let handleClickMenu = e => e.key === 'logout' && logout() + const menusProps = { + siderFold: false, + darkTheme: false, + isNavbar, + handleClickNavMenu: switchMenuPopover, + location, + navOpenKeys, + changeOpenKeys, + } + return ( +
+ {isNavbar + ? }> +
+ +
+ + :
+ +
} + + + + {user.name} < /span>} + > + + 注销 + + + +
+ ) +} + +Header.propTypes = { + user: PropTypes.object, + logout: PropTypes.func, + switchSider: PropTypes.func, + siderFold: PropTypes.bool, + isNavbar: PropTypes.bool, + menuPopoverVisible: PropTypes.bool, + location: PropTypes.object, + switchMenuPopover: PropTypes.func, + navOpenKeys: PropTypes.array, + changeOpenKeys: PropTypes.func, +} + +export default Header diff --git a/src/components/layout/Layout.less b/src/components/layout/Layout.less new file mode 100644 index 0000000..fcc402c --- /dev/null +++ b/src/components/layout/Layout.less @@ -0,0 +1,358 @@ +@import "../vars.less"; + +.layout { + position: relative; + height: 100vh; + + &.withnavbar { + .main { + margin-left: 0; + } + } + + &.fold { + .sider { + width: 42px; + + .logo { + img { + width: 28px; + margin: 6px 7px; + } + } + + :global { + .ant-menu-root { + width: 100%; + overflow: visible; + + & > .ant-menu-item { + padding: 0; + text-align: center; + + .anticon { + font-size: 14px; + margin-right: 0; + } + } + + & > .ant-menu-submenu { + & > .ant-menu-submenu-title { + padding: 0; + text-align: center; + + .anticon { + font-size: 14px; + margin-right: 0; + } + + &::after { + display: none; + } + } + } + } + } + } + + .main { + margin-left: 42px; + } + } + + .sider { + width: 224px; + background: #3e3e3e; + position: absolute; + overflow: visible; + padding-bottom: 24px; + height: 100vh; + transition: @transition-ease-out; + box-shadow: @shadow-1; + z-index: 520; + color: #999; + + &.light { + background: #fff; + + .switchtheme { + background: #fff; + border-top: solid 1px #f8f8f8; + } + } + + .logo { + text-align: center; + height: 40px; + line-height: 40px; + cursor: pointer; + margin: 28px 0; + transition: @transition-ease-out; + overflow: hidden; + + img { + width: 40px; + margin-right: 8px; + transition: @transition-ease-out; + } + + span { + vertical-align: text-bottom; + font-size: 16px; + text-transform: uppercase; + display: inline-block; + } + + .anticon { + transition: @transition-ease-out; + } + } + + .switchtheme { + width: 100%; + position: absolute; + bottom: 0; + height: 48px; + background-color: @dark-half; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 16px 0 24px; + overflow: hidden; + z-index: 1000; + + span { + white-space: nowrap; + overflow: hidden; + } + + :global { + .anticon { + min-width: 14px; + margin-right: 8px; + font-size: 14px; + } + } + } + + :global { + .ant-menu-dark, + .ant-menu-dark .ant-menu-sub { + color: #999; + } + + .ant-menu-root { + height: ~"calc(100vh - 144px)"; + overflow-x: hidden; + + &::-webkit-scrollbar-thumb { + background-color: transparent; + } + + &:hover { + &::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.2); + } + } + + &.ant-menu-vertical { + .ant-menu-sub { + height: 0; + opacity: 0; + transition: none; + } + + .ant-menu-submenu-active { + .ant-menu-sub { + height: auto; + opacity: 1; + } + } + } + } + + .ant-menu { + transition: @transition-ease-out; + + .ant-menu-item, + .ant-menu-submenu-title { + overflow: hidden; + white-space: normal; + } + } + } + } + + .header { + :global .ant-menu-horizontal { + & > .ant-menu-submenu { + float: right; + } + border: none; + } + box-shadow: @shadow-2; + position: relative; + + .siderbutton { + height: 47px; + width: 47px; + line-height: 47px; + text-align: center; + font-size: 18px; + cursor: pointer; + position: absolute; + transition: @transition-ease-in; + + &:hover { + color: @primary-color; + background-color: fade(@primary-color, 15%); + } + } + } + + .bread { + height: 64px; + line-height: 64px; + padding: 0 24px; + margin-bottom: -24px; + } + + .main { + margin-left: 224px; + overflow: auto; + height: 100vh; + transition: @transition-ease-out; + + :global { + .content-inner { + background: #fff; + padding: 24px; + box-shadow: @shadow-1; + min-height: e("calc(100vh - 184px)"); + } + } + + .container { + margin: 24px; + } + + .content { + min-height: e("calc(100vh - 184px)"); + position: relative; + } + } + + .footer { + height: 48px; + line-height: 48px; + text-align: center; + font-size: 12px; + color: #999; + background: #fff; + box-shadow: @shadow-2; + width: 100%; + } +} + +:global .ant-menu-dark { + color: #999; + background-color: #3e3e3e; + + .ant-menu-submenu-title:hover, + .ant-menu-submenu:hover { + color: @primary-color; + } + + .ant-menu-sub { + color: #999; + } + + .ant-menu-submenu-selected { + color: @primary-color; + + &:not(.ant-menu-submenu-open) { + background-color: @dark-half; + } + } + + .ant-menu-item, + .ant-menu-submenu-title { + & > a { + color: #999; + } + + &:hover > a { + color: @primary-color; + } + } + + &.ant-menu-inline { + .ant-menu-item-selected { + background-color: @dark-half; + } + } + + .ant-menu-item-selected { + color: @primary-color; + background-color: @dark-half; + + & > a { + color: @primary-color; + } + + &:hover { + background-color: @dark-half; + } + } +} + +.popovermenu { + width: 280px; + margin-left: 6px; + + :global .ant-popover-inner-content { + padding: 0; + + .ant-menu-inline .ant-menu-item, + .ant-menu-vertical .ant-menu-item { + border-right: 0; + height: 48px; + line-height: 48px; + } + + .ant-menu-inline .ant-menu-item-selected, + .ant-menu-inline .ant-menu-selected { + border-right: 0; + } + } +} + +.spin { + :global .ant-spin-container { + height: 100vh; + } +} +@media (max-width: 767px) { + .layout { + .main { + .container { + margin: 12px; + } + + .bread { + padding: 0 12px; + } + + .content { + min-height: e("calc(100vh - 160px)"); + } + + :global { + .content-inner { + padding: 12px; + min-height: e("calc(100vh - 160px)"); + } + } + } + } +} diff --git a/src/components/layout/Menu.js b/src/components/layout/Menu.js new file mode 100644 index 0000000..f5eeac4 --- /dev/null +++ b/src/components/layout/Menu.js @@ -0,0 +1,79 @@ +import React, { PropTypes } from 'react' +import { Menu, Icon } from 'antd' +import { Link } from 'dva/router' +import { menu } from '../../utils' + +const topMenus = menu.map(item => item.key) +const getMenus = function (menuArray, siderFold, parentPath = '/') { + return menuArray.map(item => { + const linkTo = parentPath + item.key + if (item.child) { + return ( + {item.icon ? : ''}{siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name}}> + {getMenus(item.child, siderFold, `${linkTo}/`)} + + ) + } + return ( + + + {item.icon ? : ''} + {siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name} + + + ) + }) +} + +function Menus ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys }) { + const menuItems = getMenus(menu, siderFold) + + const getAncestorKeys = (key) => { + const map = { + '/navigation/navigation2': ['/navigation'], + } + return map[key] || [] + } + + const onOpenChange = (openKeys) => { + const latestOpenKey = openKeys.find(key => !(navOpenKeys.indexOf(key) > -1)) + const latestCloseKey = navOpenKeys.find(key => !(openKeys.indexOf(key) > -1)) + let nextOpenKeys = [] + if (latestOpenKey) { + nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey) + } + if (latestCloseKey) { + nextOpenKeys = getAncestorKeys(latestCloseKey) + } + changeOpenKeys(nextOpenKeys) + } + // 菜单栏收起时，不能操作openKeys + let menuProps = !siderFold ? { + onOpenChange, + openKeys: navOpenKeys, + } : {} + + return ( + + {menuItems} + + ) +} + +Menus.propTypes = { + siderFold: PropTypes.bool, + darkTheme: PropTypes.bool, + location: PropTypes.object, + isNavbar: PropTypes.bool, + handleClickNavMenu: PropTypes.func, + navOpenKeys: PropTypes.array, + changeOpenKeys: PropTypes.func, +} + +export default Menus diff --git a/src/components/layout/Sider.js b/src/components/layout/Sider.js new file mode 100644 index 0000000..a143ef5 --- /dev/null +++ b/src/components/layout/Sider.js @@ -0,0 +1,39 @@ +import React, { PropTypes } from 'react' +import { Icon, Switch } from 'antd' +import styles from './Layout.less' +import { config } from '../../utils' +import Menus from './Menu' + +function Sider ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys }) { + const menusProps = { + siderFold, + darkTheme, + location, + navOpenKeys, + changeOpenKeys, + } + return ( +
+
+ {'logo'} + {siderFold ? '' : {config.logoText}} +
+ + {!siderFold ?
+ 切换主题 + +
: ''} +
+ ) +} + +Sider.propTypes = { + siderFold: PropTypes.bool, + darkTheme: PropTypes.bool, + location: PropTypes.object, + changeTheme: PropTypes.func, + navOpenKeys: PropTypes.array, + changeOpenKeys: PropTypes.func, +} + +export default Sider diff --git a/src/components/layout/index.js b/src/components/layout/index.js new file mode 100644 index 0000000..e927075 --- /dev/null +++ b/src/components/layout/index.js @@ -0,0 +1,8 @@ +import Header from './Header' +import Menu from './Menu' +import Bread from './Bread' +import Sider from './Sider' +import Footer from './Footer' +import styles from './Layout.less' + +export { Header, Menu, Bread, Sider, Footer, styles } diff --git a/src/routes/UIElement/layer/index.js b/src/routes/UIElement/layer/index.js index 2d324a4..6f4e5a6 100644 --- a/src/routes/UIElement/layer/index.js +++ b/src/routes/UIElement/layer/index.js @@ -13,7 +13,7 @@ const IcoPage = () => { title: '默认弹层', content:
弹层内容
, }) - } + } } return (