From 930c8427e0acebec8e4be8c5d9dd1c2bf2ef623f Mon Sep 17 00:00:00 2001 From: zuiidea Date: Fri, 24 Mar 2017 11:56:26 +0800 Subject: [PATCH] handle FileName --- src/components/Layout/Bread.js | 62 ------- src/components/Layout/Bread.less | 8 - src/components/Layout/Footer.js | 9 - src/components/Layout/Footer.less | 12 -- src/components/Layout/Header.js | 63 ------- src/components/Layout/Header.less | 57 ------ src/components/Layout/Layout.less | 293 ------------------------------ src/components/Layout/Menu.js | 80 -------- src/components/Layout/Sider.js | 39 ---- src/components/Layout/Sider.less | 1 - src/components/Layout/index.js | 8 - src/components/index.js | 4 +- src/components/layout/bread.js | 62 ------- src/components/layout/footer.js | 9 - src/components/layout/header.js | 63 ------- src/components/layout/menu.js | 80 -------- src/components/layout/sider.js | 39 ---- 17 files changed, 2 insertions(+), 887 deletions(-) delete mode 100644 src/components/Layout/Bread.js delete mode 100644 src/components/Layout/Bread.less delete mode 100644 src/components/Layout/Footer.js delete mode 100644 src/components/Layout/Footer.less delete mode 100644 src/components/Layout/Header.js delete mode 100644 src/components/Layout/Header.less delete mode 100644 src/components/Layout/Layout.less delete mode 100644 src/components/Layout/Menu.js delete mode 100644 src/components/Layout/Sider.js delete mode 100644 src/components/Layout/Sider.less delete mode 100644 src/components/Layout/index.js delete mode 100644 src/components/layout/bread.js delete mode 100644 src/components/layout/footer.js delete mode 100644 src/components/layout/header.js delete mode 100644 src/components/layout/menu.js delete mode 100644 src/components/layout/sider.js diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js deleted file mode 100644 index 5db9e34..0000000 --- a/src/components/Layout/Bread.js +++ /dev/null @@ -1,62 +0,0 @@ -import React, { PropTypes } from 'react' -import { Breadcrumb, Icon } from 'antd' -import styles from './Bread.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/Bread.less b/src/components/Layout/Bread.less deleted file mode 100644 index 9c091e5..0000000 --- a/src/components/Layout/Bread.less +++ /dev/null @@ -1,8 +0,0 @@ -@import "../vars.less"; - -.bread { - height: 64px; - line-height: 64px; - padding: 0 24px; - margin-bottom: -24px; -} diff --git a/src/components/Layout/Footer.js b/src/components/Layout/Footer.js deleted file mode 100644 index 6e7f6bb..0000000 --- a/src/components/Layout/Footer.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' -import styles from './Footer.less' -import { config } from '../../utils' - -const Footer = () =>
- {config.footerText} -
- -export default Footer diff --git a/src/components/Layout/Footer.less b/src/components/Layout/Footer.less deleted file mode 100644 index 9f5a967..0000000 --- a/src/components/Layout/Footer.less +++ /dev/null @@ -1,12 +0,0 @@ -@import "../vars.less"; - -.footer { - height: 48px; - line-height: 48px; - text-align: center; - font-size: 12px; - color: #999; - background: #fff; - box-shadow: @shadow-2; - width: 100%; -} diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js deleted file mode 100644 index f778050..0000000 --- a/src/components/Layout/Header.js +++ /dev/null @@ -1,63 +0,0 @@ -import React, { PropTypes } from 'react' -import { Menu, Icon, Popover } from 'antd' -import styles from './Header.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/Header.less b/src/components/Layout/Header.less deleted file mode 100644 index 1eca871..0000000 --- a/src/components/Layout/Header.less +++ /dev/null @@ -1,57 +0,0 @@ -@import "../vars.less"; - -.header { - :global .ant-menu-horizontal { - & > .ant-menu-submenu { - float: right; - } - border: none; - display: inline-block; - } - box-shadow: @shadow-2; - position: relative; - display: flex; - justify-content: space-between; - height: 47px; - background-color: #fff; - - .rightWarpper { - display: flex; - } - - .button { - width: 47px; - height: 47px; - line-height: 47px; - text-align: center; - font-size: 18px; - cursor: pointer; - transition: @transition-ease-in; - - &:hover { - color: @primary-color; - background-color: fade(@primary-color, 15%); - } - } -} - -.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; - } - } -} diff --git a/src/components/Layout/Layout.less b/src/components/Layout/Layout.less deleted file mode 100644 index 7c5e000..0000000 --- a/src/components/Layout/Layout.less +++ /dev/null @@ -1,293 +0,0 @@ -@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; - border-right: none; - - &::-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; - } - } - } - } - - .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; - } - } -} - -: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; - } - } -} - -.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 deleted file mode 100644 index 378bfc2..0000000 --- a/src/components/Layout/Menu.js +++ /dev/null @@ -1,80 +0,0 @@ -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 deleted file mode 100644 index a143ef5..0000000 --- a/src/components/Layout/Sider.js +++ /dev/null @@ -1,39 +0,0 @@ -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/Sider.less b/src/components/Layout/Sider.less deleted file mode 100644 index 9146181..0000000 --- a/src/components/Layout/Sider.less +++ /dev/null @@ -1 +0,0 @@ -@import "../vars.less"; diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js deleted file mode 100644 index e927075..0000000 --- a/src/components/Layout/index.js +++ /dev/null @@ -1,8 +0,0 @@ -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/components/index.js b/src/components/index.js index b4bf637..f89d434 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -3,12 +3,12 @@ import DropOption from './DropOption' import Iconfont from './Iconfont' import Search from './Search' import Editor from './Editor' -import * as Layout from './Layout/index.js' +// import * as Layout from './Layout/index.js' import layer from './layer' export { - Layout, + // Layout, DataTable, DropOption, Iconfont, diff --git a/src/components/layout/bread.js b/src/components/layout/bread.js deleted file mode 100644 index 5db9e34..0000000 --- a/src/components/layout/bread.js +++ /dev/null @@ -1,62 +0,0 @@ -import React, { PropTypes } from 'react' -import { Breadcrumb, Icon } from 'antd' -import styles from './Bread.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 deleted file mode 100644 index 6e7f6bb..0000000 --- a/src/components/layout/footer.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' -import styles from './Footer.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 deleted file mode 100644 index f778050..0000000 --- a/src/components/layout/header.js +++ /dev/null @@ -1,63 +0,0 @@ -import React, { PropTypes } from 'react' -import { Menu, Icon, Popover } from 'antd' -import styles from './Header.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 deleted file mode 100644 index 378bfc2..0000000 --- a/src/components/layout/menu.js +++ /dev/null @@ -1,80 +0,0 @@ -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 deleted file mode 100644 index a143ef5..0000000 --- a/src/components/layout/sider.js +++ /dev/null @@ -1,39 +0,0 @@ -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