From d1b6e0fe8c5235f88bce11dbbb46326ec164f246 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Tue, 9 Apr 2019 16:46:31 +0800 Subject: [PATCH] use pro-layout Components --- package.json | 1 + src/components/GlobalHeader/index.tsx | 53 ---- src/components/IconFont/index.tsx | 9 - .../SettingDrawer/BlockCheckbox.tsx | 31 -- src/components/SettingDrawer/ThemeColor.less | 21 -- src/components/SettingDrawer/ThemeColor.tsx | 80 ------ src/components/SettingDrawer/index.less | 81 ------ src/components/SettingDrawer/index.tsx | 272 ------------------ src/components/SiderMenu/BaseMenu.tsx | 206 ------------- src/components/SiderMenu/SiderMenu.tsx | 124 -------- src/components/SiderMenu/SiderMenuUtils.ts | 33 --- src/components/SiderMenu/index.less | 105 ------- src/components/SiderMenu/index.tsx | 34 --- src/components/TopNavHeader/index.less | 72 ----- src/components/TopNavHeader/index.tsx | 59 ---- src/layouts/BasicLayout.less | 6 - src/layouts/BasicLayout.tsx | 142 ++------- src/layouts/Footer.tsx | 37 --- src/layouts/Header.less | 8 - src/layouts/Header.tsx | 179 ------------ src/models/connect.d.ts | 9 +- src/models/setting.ts | 4 +- 22 files changed, 39 insertions(+), 1527 deletions(-) delete mode 100644 src/components/GlobalHeader/index.tsx delete mode 100644 src/components/IconFont/index.tsx delete mode 100644 src/components/SettingDrawer/BlockCheckbox.tsx delete mode 100644 src/components/SettingDrawer/ThemeColor.less delete mode 100644 src/components/SettingDrawer/ThemeColor.tsx delete mode 100644 src/components/SettingDrawer/index.less delete mode 100644 src/components/SettingDrawer/index.tsx delete mode 100644 src/components/SiderMenu/BaseMenu.tsx delete mode 100644 src/components/SiderMenu/SiderMenu.tsx delete mode 100644 src/components/SiderMenu/SiderMenuUtils.ts delete mode 100644 src/components/SiderMenu/index.less delete mode 100644 src/components/SiderMenu/index.tsx delete mode 100644 src/components/TopNavHeader/index.less delete mode 100644 src/components/TopNavHeader/index.tsx delete mode 100644 src/layouts/BasicLayout.less delete mode 100644 src/layouts/Footer.tsx delete mode 100644 src/layouts/Header.less delete mode 100644 src/layouts/Header.tsx diff --git a/package.json b/package.json index 21e33fec..00fdc109 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "not ie <= 10" ], "dependencies": { + "@ant-design/pro-layout": "^4.0.3", "ant-design-pro": "^2.3.0", "antd": "^3.15.0", "classnames": "^2.2.6", diff --git a/src/components/GlobalHeader/index.tsx b/src/components/GlobalHeader/index.tsx deleted file mode 100644 index 4deb4a7a..00000000 --- a/src/components/GlobalHeader/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Component } from 'react'; -import { Icon } from 'antd'; -import Link from 'umi/link'; -import debounce from 'lodash/debounce'; -import styles from './index.less'; -import RightContent, { GlobalHeaderRightProps } from './RightContent'; - -type PartialGlobalHeaderRightProps = { - [K in - | 'onMenuClick' - | 'onNoticeClear' - | 'onNoticeVisibleChange' - | 'currentUser']?: GlobalHeaderRightProps[K] -}; - -export interface GlobalHeaderProps extends PartialGlobalHeaderRightProps { - collapsed?: boolean; - onCollapse?: (collapsed: boolean) => void; - isMobile?: boolean; - logo?: string; -} - -export default class GlobalHeader extends Component { - triggerResizeEvent = debounce(() => { - const event = document.createEvent('HTMLEvents'); - event.initEvent('resize', true, false); - window.dispatchEvent(event); - }); - componentWillUnmount() { - this.triggerResizeEvent.cancel(); - } - toggle = () => { - const { collapsed, onCollapse } = this.props; - if (onCollapse) onCollapse(!collapsed); - this.triggerResizeEvent(); - }; - render() { - const { collapsed, isMobile, logo } = this.props; - return ( -
- {isMobile && ( - - logo - - )} - - - - -
- ); - } -} diff --git a/src/components/IconFont/index.tsx b/src/components/IconFont/index.tsx deleted file mode 100644 index c438b44a..00000000 --- a/src/components/IconFont/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Icon } from 'antd'; -import defaultSettings from '../../../config/defaultSettings'; - -const { iconfontUrl } = defaultSettings; -const scriptUrl = iconfontUrl; -// 使用： -// import IconFont from '@/components/IconFont'; -// -export default Icon.createFromIconfontCN({ scriptUrl }); diff --git a/src/components/SettingDrawer/BlockCheckbox.tsx b/src/components/SettingDrawer/BlockCheckbox.tsx deleted file mode 100644 index 5ad7acfb..00000000 --- a/src/components/SettingDrawer/BlockCheckbox.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { Tooltip, Icon } from 'antd'; -import style from './index.less'; - -export interface BlockChecboxProps { - value: string; - onChange: (key: string) => void; - list: any[]; -} - -const BlockChecbox: React.FC = ({ value, onChange, list }) => ( -
- {list.map(item => ( - -
onChange(item.key)}> - {item.key} -
- -
-
- - ))} -
-); - -export default BlockChecbox; diff --git a/src/components/SettingDrawer/ThemeColor.less b/src/components/SettingDrawer/ThemeColor.less deleted file mode 100644 index 52e63bea..00000000 --- a/src/components/SettingDrawer/ThemeColor.less +++ /dev/null @@ -1,21 +0,0 @@ -.themeColor { - margin-top: 24px; - overflow: hidden; - .title { - margin-bottom: 12px; - color: rgba(0, 0, 0, 0.65); - font-size: 14px; - line-height: 22px; - } - .colorBlock { - float: left; - width: 20px; - height: 20px; - margin-right: 8px; - color: #fff; - font-weight: bold; - text-align: center; - border-radius: 2px; - cursor: pointer; - } -} diff --git a/src/components/SettingDrawer/ThemeColor.tsx b/src/components/SettingDrawer/ThemeColor.tsx deleted file mode 100644 index a3fc061a..00000000 --- a/src/components/SettingDrawer/ThemeColor.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import { Tooltip, Icon } from 'antd'; -import { formatMessage } from 'umi-plugin-locale'; -import styles from './ThemeColor.less'; - -export interface TagProps { - color: string; - check: boolean; - className?: string; - onClick?: () => void; -} - -const Tag: React.FC = ({ color, check, ...rest }) => ( -
- {check ? : ''} -
-); - -export interface ThemeColorProps { - colors?: any[]; - title?: string; - value: string; - onChange: (color: string) => void; -} - -const ThemeColor: React.FC = ({ colors, title, value, onChange }) => { - const colorList = colors || [ - { - key: 'dust', - color: '#F5222D', - }, - { - key: 'volcano', - color: '#FA541C', - }, - { - key: 'sunset', - color: '#FAAD14', - }, - { - key: 'cyan', - color: '#13C2C2', - }, - { - key: 'green', - color: '#52C41A', - }, - { - key: 'daybreak', - color: '#1890FF', - }, - { - key: 'geekblue', - color: '#2F54EB', - }, - { - key: 'purple', - color: '#722ED1', - }, - ]; - return ( -
-

{title}

-
- {colorList.map(({ key, color }) => ( - - onChange && onChange(color)} - /> - - ))} -
-
- ); -}; - -export default ThemeColor; diff --git a/src/components/SettingDrawer/index.less b/src/components/SettingDrawer/index.less deleted file mode 100644 index bb64b079..00000000 --- a/src/components/SettingDrawer/index.less +++ /dev/null @@ -1,81 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.content { - position: relative; - min-height: 100%; - background: #fff; - :global { - .ant-list-item { - span { - flex: 1; - } - } - } -} - -.blockChecbox { - display: flex; - .item { - position: relative; - margin-right: 16px; - // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - border-radius: @border-radius-base; - cursor: pointer; - img { - width: 48px; - } - } - .selectIcon { - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; - padding-top: 15px; - padding-left: 24px; - color: @primary-color; - font-weight: bold; - font-size: 14px; - } -} - -.color_block { - display: inline-block; - width: 38px; - height: 22px; - margin: 4px; - margin-right: 12px; - vertical-align: middle; - border-radius: 4px; - cursor: pointer; -} - -.title { - margin-bottom: 12px; - color: @heading-color; - font-size: 14px; - line-height: 22px; -} - -.handle { - position: absolute; - top: 240px; - right: 300px; - z-index: 0; - display: flex; - justify-content: center; - align-items: center; - width: 48px; - height: 48px; - font-size: 16px; - text-align: center; - background: @primary-color; - border-radius: 4px 0 0 4px; - cursor: pointer; - pointer-events: auto; -} - -.productionHint { - margin-top: 16px; - font-size: 12px; -} diff --git a/src/components/SettingDrawer/index.tsx b/src/components/SettingDrawer/index.tsx deleted file mode 100644 index 2201acb7..00000000 --- a/src/components/SettingDrawer/index.tsx +++ /dev/null @@ -1,272 +0,0 @@ -import { ConnectProps, ConnectState, SettingModelState } from '@/models/connect'; -import React, { Component } from 'react'; -import { Select, message, Drawer, List, Switch, Divider, Icon, Button, Alert, Tooltip } from 'antd'; -import { formatMessage } from 'umi-plugin-react/locale'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; -import { connect } from 'dva'; -import omit from 'omit.js'; -import styles from './index.less'; -import ThemeColor from './ThemeColor'; -import BlockCheckbox from './BlockCheckbox'; - -const { Option } = Select; -interface BodyProps { - title: string; - style?: React.CSSProperties; -} - -const Body: React.FC = ({ children, title, style }) => ( -
-

{title}

- {children} -
-); - -interface SettingItemProps { - title: React.ReactNode; - action: React.ReactElement; - disabled?: boolean; - disabledReason?: React.ReactNode; -} - -export interface SettingDrawerProps extends ConnectProps { - setting?: SettingModelState; -} - -export interface SettingDrawerState extends Partial { - collapse: boolean; -} - -@connect(({ setting }: ConnectState) => ({ setting })) -class SettingDrawer extends Component { - state: SettingDrawerState = { - collapse: false, - }; - - getLayoutSetting = (): SettingItemProps[] => { - const { setting } = this.props; - const { contentWidth, fixedHeader, layout, autoHideHeader, fixSiderbar } = setting!; - return [ - { - title: formatMessage({ id: 'app.setting.content-width' }), - action: ( - - ), - }, - { - title: formatMessage({ id: 'app.setting.fixedheader' }), - action: ( - this.changeSetting('fixedHeader', checked)} - /> - ), - }, - { - title: formatMessage({ id: 'app.setting.hideheader' }), - disabled: !fixedHeader, - disabledReason: formatMessage({ id: 'app.setting.hideheader.hint' }), - action: ( - this.changeSetting('autoHideHeader', checked)} - /> - ), - }, - { - title: formatMessage({ id: 'app.setting.fixedsidebar' }), - disabled: layout === 'topmenu', - disabledReason: formatMessage({ id: 'app.setting.fixedsidebar.hint' }), - action: ( - this.changeSetting('fixSiderbar', checked)} - /> - ), - }, - ]; - }; - - changeSetting = (key: string, value: any) => { - const { setting } = this.props; - const nextState = { ...setting! }; - nextState[key] = value; - if (key === 'layout') { - nextState.contentWidth = value === 'topmenu' ? 'Fixed' : 'Fluid'; - } else if (key === 'fixedHeader' && !value) { - nextState.autoHideHeader = false; - } - this.setState(nextState, () => { - const { dispatch } = this.props; - dispatch!({ - type: 'setting/changeSetting', - payload: this.state, - }); - }); - }; - - togglerContent = () => { - const { collapse } = this.state; - this.setState({ collapse: !collapse }); - }; - - renderLayoutSettingItem = (item: SettingItemProps) => { - const action = React.cloneElement(item.action, { - disabled: item.disabled, - }); - return ( - - - {item.title} - - - ); - }; - - render() { - const { setting } = this.props; - const { navTheme, primaryColor, layout, colorWeak } = setting!; - const { collapse } = this.state; - return ( - - - - } - style={{ - zIndex: 999, - }} - > -
- - this.changeSetting('navTheme', value)} - /> - - - this.changeSetting('primaryColor', color)} - /> - - - - - this.changeSetting('layout', value)} - /> - - - - - - - - this.changeSetting('colorWeak', checked)} - /> - ), - }, - ]} - /> - - - message.success(formatMessage({ id: 'app.setting.copyinfo' }))} - > - - - - {formatMessage({ id: 'app.setting.production.hint' })}{' '} - - src/defaultSettings.js - -
- } - /> - - - ); - } -} - -export default SettingDrawer; diff --git a/src/components/SiderMenu/BaseMenu.tsx b/src/components/SiderMenu/BaseMenu.tsx deleted file mode 100644 index 65c4be2d..00000000 --- a/src/components/SiderMenu/BaseMenu.tsx +++ /dev/null @@ -1,206 +0,0 @@ -import IconFont from '@/components/IconFont'; -import { isUrl } from '@/utils/utils'; -import { Icon, Menu } from 'antd'; -import { MenuMode, MenuTheme } from 'antd/es/menu'; -import classNames from 'classnames'; -import React, { Component } from 'react'; -import { RouterTypes } from 'umi'; -import Link from 'umi/link'; -import { urlToList } from '../_utils/pathTools'; -import styles from './index.less'; -import { getMenuMatches } from './SiderMenuUtils'; - -const { SubMenu } = Menu; - -// Allow menu.js config icon as string or ReactNode -// icon: 'setting', -// icon: 'icon-geren' #For Iconfont , -// icon: 'http://demo.com/icon.png', -// icon: , -const getIcon = (icon?: string | React.ReactNode) => { - if (typeof icon === 'string') { - if (isUrl(icon)) { - return icon} />; - } - if (icon.startsWith('icon-')) { - return ; - } - return ; - } - return icon; -}; - -export interface MenuDataItem { - authority?: string[] | string; - children?: MenuDataItem[]; - hideChildrenInMenu?: boolean; - hideInMenu?: boolean; - icon?: string; - locale?: string; - name?: string; - path: string; - [key: string]: any; -} - -export interface Route extends MenuDataItem { - routes?: Route[]; -} - -export interface BaseMenuProps extends Partial> { - className?: string; - collapsed?: boolean; - flatMenuKeys?: any[]; - handleOpenChange?: (openKeys: string[]) => void; - isMobile?: boolean; - menuData?: MenuDataItem[]; - mode?: MenuMode; - onCollapse?: (collapsed: boolean) => void; - onOpenChange?: (openKeys: string[]) => void; - openKeys?: string[]; - style?: React.CSSProperties; - theme?: MenuTheme; -} - -export default class BaseMenu extends Component { - static defaultProps: Partial = { - flatMenuKeys: [], - onCollapse: () => void 0, - isMobile: false, - openKeys: [], - collapsed: false, - handleOpenChange: () => void 0, - menuData: [], - onOpenChange: () => void 0, - }; - - /** - * 获得菜单子节点 - */ - getNavMenuItems = (menusData: MenuDataItem[] = []): React.ReactNode[] => { - return menusData - .filter(item => item.name && !item.hideInMenu) - .map(item => this.getSubMenuOrItem(item)) - .filter(item => item); - }; - - // Get the currently selected menu - getSelectedMenuKeys = (pathname: string): string[] => { - const { flatMenuKeys } = this.props; - return urlToList(pathname) - .map(itemPath => getMenuMatches(flatMenuKeys, itemPath).pop()) - .filter(item => item) as string[]; - }; - - /** - * get SubMenu or Item - */ - getSubMenuOrItem = (item: MenuDataItem): React.ReactNode => { - if ( - Array.isArray(item.children) && - !item.hideChildrenInMenu && - item.children.some(child => (child.name ? true : false)) - ) { - return ( - - {getIcon(item.icon)} - {item.name} - - ) : ( - item.name - ) - } - key={item.path} - > - {this.getNavMenuItems(item.children)} - - ); - } - return {this.getMenuItemPath(item)}; - }; - - /** - * 判断是否是http链接.返回 Link 或 a - * Judge whether it is http link.return a or Link - * @memberof SiderMenu - */ - getMenuItemPath = (item: MenuDataItem) => { - const { name } = item; - const itemPath = this.conversionPath(item.path); - const icon = getIcon(item.icon); - const { target } = item; - // Is it a http link - if (/^https?:\/\//.test(itemPath)) { - return ( - - {icon} - {name} - - ); - } - const { location, isMobile, onCollapse } = this.props; - return ( - onCollapse!(true) : void 0} - > - {icon} - {name} - - ); - }; - - conversionPath = (path: string) => { - if (path && path.indexOf('http') === 0) { - return path; - } - return `/${path || ''}`.replace(/\/+/g, '/'); - }; - - render() { - const { - openKeys, - theme, - mode, - location, - className, - collapsed, - handleOpenChange, - style, - menuData, - } = this.props; - // if pathname can't match, use the nearest parent's key - let selectedKeys = this.getSelectedMenuKeys(location!.pathname); - if (!selectedKeys.length && openKeys) { - selectedKeys = [openKeys[openKeys.length - 1]]; - } - let props = {}; - if (openKeys && !collapsed) { - props = { - openKeys: openKeys.length === 0 ? [...selectedKeys] : openKeys, - }; - } - const cls = classNames(className, { - 'top-nav-menu': mode === 'horizontal', - }); - - return ( - - {this.getNavMenuItems(menuData)} - - ); - } -} diff --git a/src/components/SiderMenu/SiderMenu.tsx b/src/components/SiderMenu/SiderMenu.tsx deleted file mode 100644 index f09e6273..00000000 --- a/src/components/SiderMenu/SiderMenu.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import { Layout } from 'antd'; -import classNames from 'classnames'; -import React, { Component, Suspense } from 'react'; -import Link from 'umi/link'; -import defaultSettings from '../../../config/defaultSettings'; -import PageLoading from '../PageLoading'; -import { BaseMenuProps } from './BaseMenu'; -import styles from './index.less'; -import { getDefaultCollapsedSubMenus } from './SiderMenuUtils'; - -const BaseMenu = React.lazy(() => import('./BaseMenu')); -const { Sider } = Layout; -const { title } = defaultSettings; -let firstMount: boolean = true; - -export interface SiderMenuProps extends BaseMenuProps { - logo?: string; - fixSiderbar?: boolean; -} - -interface SiderMenuState { - pathname?: string; - openKeys?: string[]; - flatMenuKeysLen?: number; -} - -export default class SiderMenu extends Component { - static defaultProps: Partial = { - flatMenuKeys: [], - onCollapse: () => void 0, - isMobile: false, - openKeys: [], - collapsed: false, - handleOpenChange: () => void 0, - menuData: [], - onOpenChange: () => void 0, - }; - - static getDerivedStateFromProps(props: SiderMenuProps, state: SiderMenuState) { - const { pathname, flatMenuKeysLen } = state; - if (props.location!.pathname !== pathname || props.flatMenuKeys!.length !== flatMenuKeysLen) { - return { - pathname: props.location!.pathname, - flatMenuKeysLen: props.flatMenuKeys!.length, - openKeys: getDefaultCollapsedSubMenus(props), - }; - } - return null; - } - - constructor(props: SiderMenuProps) { - super(props); - this.state = { - openKeys: getDefaultCollapsedSubMenus(props), - }; - } - - componentDidMount() { - firstMount = false; - } - - isMainMenu: (key: string) => boolean = key => { - const { menuData } = this.props; - return menuData!.some(item => { - if (key) { - return item.key === key || item.path === key; - } - return false; - }); - }; - - handleOpenChange: (openKeys: string[]) => void = openKeys => { - const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1; - if (moreThanOne) { - this.setState({ openKeys: [openKeys.pop()].filter(item => item) as string[] }); - } else { - this.setState({ openKeys: [...openKeys] }); - } - }; - - render() { - const { logo, collapsed, onCollapse, fixSiderbar, theme, isMobile } = this.props; - const { openKeys } = this.state; - const defaultProps = collapsed ? {} : { openKeys }; - - const siderClassName = classNames(styles.sider, { - [styles.fixSiderBar]: fixSiderbar, - [styles.light]: theme === 'light', - }); - return ( - { - if (firstMount || !isMobile) { - onCollapse!(collapse); - } - }} - width={256} - theme={theme} - className={siderClassName} - > - - }> - - - - ); - } -} diff --git a/src/components/SiderMenu/SiderMenuUtils.ts b/src/components/SiderMenu/SiderMenuUtils.ts deleted file mode 100644 index 14d24557..00000000 --- a/src/components/SiderMenu/SiderMenuUtils.ts +++ /dev/null @@ -1,33 +0,0 @@ -import pathToRegexp from 'path-to-regexp'; -import { urlToList } from '../_utils/pathTools'; -import { MenuDataItem, BaseMenuProps } from './BaseMenu'; - -/** - * Recursively flatten the data - * [{path:string},{path:string}] => {path,path2} - * @param menus - */ -export const getFlatMenuKeys = (menuData: MenuDataItem[] = []) => { - let keys: string[] = []; - menuData.forEach(item => { - keys.push(item.path); - if (item.children) { - keys = keys.concat(getFlatMenuKeys(item.children)); - } - }); - return keys; -}; - -export const getMenuMatches = (flatMenuKeys: string[] = [], path: string) => - flatMenuKeys.filter(item => item && pathToRegexp(item).test(path)); - -/** - * 获得菜单子节点 - */ -export const getDefaultCollapsedSubMenus = (props: BaseMenuProps) => { - const { location, flatMenuKeys } = props; - return urlToList(location!.pathname) - .map(item => getMenuMatches(flatMenuKeys, item)[0]) - .filter(item => item) - .reduce((acc, curr) => [...acc, curr], ['/']); -}; diff --git a/src/components/SiderMenu/index.less b/src/components/SiderMenu/index.less deleted file mode 100644 index 88722c87..00000000 --- a/src/components/SiderMenu/index.less +++ /dev/null @@ -1,105 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -@nav-header-height: @layout-header-height; - -.logo { - position: relative; - height: @nav-header-height; - padding-left: (@menu-collapsed-width - 32px) / 2; - overflow: hidden; - line-height: @nav-header-height; - background: #002140; - transition: all 0.3s; - img { - display: inline-block; - height: 32px; - vertical-align: middle; - } - h1 { - display: inline-block; - margin: 0 0 0 12px; - color: white; - font-weight: 600; - font-size: 20px; - font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; - vertical-align: middle; - } -} -.sider { - position: relative; - z-index: 10; - min-height: 100vh; - box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); - &.fixSiderBar { - position: fixed; - top: 0; - left: 0; - box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); - :global { - .ant-menu-root { - height: ~'calc(100vh - @{nav-header-height})'; - overflow-y: auto; - } - .ant-menu-inline { - border-right: 0; - .ant-menu-item, - .ant-menu-submenu-title { - width: 100%; - } - } - } - } - &.light { - background-color: white; - box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); - .logo { - background: white; - box-shadow: 1px 1px 0 0 @border-color-split; - h1 { - color: @primary-color; - } - } - :global(.ant-menu-light) { - border-right-color: transparent; - } - } -} - -.icon { - width: 14px; - vertical-align: baseline; -} - -:global { - .top-nav-menu li.ant-menu-item { - height: @nav-header-height; - line-height: @nav-header-height; - } - .drawer .drawer-content { - background: #001529; - } - .ant-menu-inline-collapsed { - & > .ant-menu-item .sider-menu-item-img + span, - & - > .ant-menu-item-group - > .ant-menu-item-group-list - > .ant-menu-item - .sider-menu-item-img - + span, - & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span { - display: inline-block; - max-width: 0; - opacity: 0; - } - } - .ant-menu-item .sider-menu-item-img + span, - .ant-menu-submenu-title .sider-menu-item-img + span { - opacity: 1; - transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out; - } - .ant-drawer-left { - .ant-drawer-body { - padding: 0; - } - } -} diff --git a/src/components/SiderMenu/index.tsx b/src/components/SiderMenu/index.tsx deleted file mode 100644 index ba5ab3da..00000000 --- a/src/components/SiderMenu/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { Drawer } from 'antd'; -import { SiderMenuProps } from './SiderMenu'; -import SiderMenu from './SiderMenu'; -import { getFlatMenuKeys } from './SiderMenuUtils'; - -export { SiderMenuProps }; -export { MenuDataItem, Route } from './BaseMenu'; - -const SiderMenuWrapper: React.FC = props => { - const { isMobile, menuData, collapsed, onCollapse } = props; - const flatMenuKeys = getFlatMenuKeys(menuData); - return isMobile ? ( - onCollapse!(true)} - style={{ - padding: 0, - height: '100vh', - }} - > - - - ) : ( - - ); -}; - -SiderMenuWrapper.defaultProps = { - onCollapse: () => void 0, -}; - -export default React.memo(SiderMenuWrapper); diff --git a/src/components/TopNavHeader/index.less b/src/components/TopNavHeader/index.less deleted file mode 100644 index aad3d74e..00000000 --- a/src/components/TopNavHeader/index.less +++ /dev/null @@ -1,72 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.head { - position: relative; - width: 100%; - height: @layout-header-height; - box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); - transition: background 0.3s, width 0.2s; - :global { - .ant-menu-submenu.ant-menu-submenu-horizontal { - height: 100%; - line-height: @layout-header-height; - .ant-menu-submenu-title { - height: 100%; - } - } - } - &.light { - background-color: #fff; - } - .main { - display: flex; - height: @layout-header-height; - padding-left: 24px; - &.wide { - max-width: 1200px; - margin: auto; - padding-left: 0; - } - .left { - display: flex; - flex: 1; - } - .right { - width: 324px; - } - } -} - -.logo { - position: relative; - width: 165px; - height: @layout-header-height; - overflow: hidden; - line-height: @layout-header-height; - transition: all 0.3s; - img { - display: inline-block; - height: 32px; - vertical-align: middle; - } - h1 { - display: inline-block; - margin: 0 0 0 12px; - color: #fff; - font-weight: 400; - font-size: 16px; - vertical-align: top; - } -} - -.light { - h1 { - color: #002140; - } -} - -.menu { - height: @layout-header-height; - line-height: @layout-header-height; - border: none; -} diff --git a/src/components/TopNavHeader/index.tsx b/src/components/TopNavHeader/index.tsx deleted file mode 100644 index 64665d6b..00000000 --- a/src/components/TopNavHeader/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { SiderMenuProps } from '@/components/SiderMenu'; -import React, { Component } from 'react'; -import Link from 'umi/link'; -import RightContent, { GlobalHeaderRightProps } from '../GlobalHeader/RightContent'; -import BaseMenu from '../SiderMenu/BaseMenu'; -import { getFlatMenuKeys } from '../SiderMenu/SiderMenuUtils'; -import styles from './index.less'; -import defaultSettings, { ContentWidth } from '../../../config/defaultSettings'; - -export interface TopNavHeaderProps extends SiderMenuProps, GlobalHeaderRightProps { - contentWidth?: ContentWidth; -} - -interface TopNavHeaderState { - maxWidth?: number; -} - -export default class TopNavHeader extends Component { - static getDerivedStateFromProps(props: TopNavHeaderProps) { - return { - maxWidth: - (props.contentWidth === 'Fixed' && window.innerWidth > 1200 ? 1200 : window.innerWidth) - - 280 - - 120 - - 40, - }; - } - - state: TopNavHeaderState = {}; - - maim: HTMLDivElement | null = null; - - render() { - const { theme, contentWidth, menuData, logo } = this.props; - const { maxWidth } = this.state; - const flatMenuKeys = getFlatMenuKeys(menuData); - return ( -
-
(this.maim = ref)} - className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`} - > -
- -
- -
-
- -
-
- ); - } -} diff --git a/src/layouts/BasicLayout.less b/src/layouts/BasicLayout.less deleted file mode 100644 index 60beb609..00000000 --- a/src/layouts/BasicLayout.less +++ /dev/null @@ -1,6 +0,0 @@ -@import '~antd/lib/style/themes/default.less'; - -.content { - margin: 24px; - padding-top: @layout-header-height; -} diff --git a/src/layouts/BasicLayout.tsx b/src/layouts/BasicLayout.tsx index 3b1d9a40..154b16f1 100644 --- a/src/layouts/BasicLayout.tsx +++ b/src/layouts/BasicLayout.tsx @@ -1,55 +1,19 @@ -import SiderMenu, { MenuDataItem, SiderMenuProps } from '@/components/SiderMenu'; -import { ConnectProps, ConnectState, SettingModelState } from '@/models/connect'; -import getPageTitle from '@/utils/getPageTitle'; -import { Layout } from 'antd'; -import classNames from 'classnames'; +import { ConnectState, ConnectProps } from '@/models/connect'; +import { formatMessage } from 'umi-plugin-react/locale'; import { connect } from 'dva'; -import React, { Suspense, useState } from 'react'; -import { ContainerQuery } from 'react-container-query'; -import DocumentTitle from 'react-document-title'; -import useMedia from 'react-media-hook2'; +import React, { useState } from 'react'; import logo from '../assets/logo.svg'; -import styles from './BasicLayout.less'; -import Footer from './Footer'; -import Header, { HeaderViewProps } from './Header'; -import PageHeaderWrapper from '@/components/PageHeaderWrapper'; -// lazy load SettingDrawer -const SettingDrawer = React.lazy(() => import('@/components/SettingDrawer')); +import { + BasicLayout as BasicLayoutComponents, + BasicLayoutProps as BasicLayoutComponentsProps, + MenuDataItem, + Settings, +} from '@ant-design/pro-layout'; -const { Content } = Layout; - -const query = { - 'screen-xs': { - maxWidth: 575, - }, - 'screen-sm': { - minWidth: 576, - maxWidth: 767, - }, - 'screen-md': { - minWidth: 768, - maxWidth: 991, - }, - 'screen-lg': { - minWidth: 992, - maxWidth: 1199, - }, - 'screen-xl': { - minWidth: 1200, - maxWidth: 1599, - }, - 'screen-xxl': { - minWidth: 1600, - }, -}; - -export interface BasicLayoutProps - extends ConnectProps, - SiderMenuProps, - HeaderViewProps, - Partial { +export interface BasicLayoutProps extends BasicLayoutComponentsProps, ConnectProps { breadcrumbNameMap: { [path: string]: MenuDataItem }; + settings: Settings; } export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & { @@ -57,89 +21,43 @@ export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & { }; const BasicLayout: React.FC = props => { - const { - breadcrumbNameMap, - dispatch, - children, - collapsed, - fixedHeader, - fixSiderbar, - layout: PropsLayout, - location, - menuData, - navTheme, - route, - } = props; + const { dispatch, children, route } = props; const { routes, authority } = route!; /** * constructor */ useState(() => { dispatch!({ type: 'user/fetchCurrent' }); - dispatch!({ type: 'setting/getSetting' }); + dispatch!({ type: 'settings/getSetting' }); dispatch!({ type: 'menu/getMenuData', payload: { routes, authority } }); }); /** * init variables */ - const isMobile = useMedia({ id: 'BasicLayout', query: '(max-width: 599px)' })[0]; - const hasLeftPadding = fixSiderbar && PropsLayout !== 'topmenu' && !isMobile; const handleMenuCollapse = (payload: boolean) => dispatch!({ type: 'global/changeLayoutCollapsed', payload }); - // Do not render SettingDrawer in production - // unless it is deployed in preview.pro.ant.design as demo - const renderSettingDrawer = () => - !(process.env.NODE_ENV === 'production' && APP_TYPE !== 'site') && ; - const layout = ( - - {PropsLayout === 'topmenu' && !isMobile ? null : ( - - )} - -
- - - {children} - - -