/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout. You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */ import type { MenuDataItem , BasicLayoutProps as ProLayoutProps , Settings , } from '@ant-design/pro-layout' ; import ProLayout , { DefaultFooter } from '@ant-design/pro-layout' ; import { formatMessage , Link } from 'umi' ; import React , { useEffect } from 'react' ; import type { Dispatch } from 'redux' ; import { connect } from 'dva' ; import { GithubOutlined } from '@ant-design/icons' ; import { Result , Button } from 'antd' ; import Authorized from '@/utils/Authorized' ; import RightContent from '@/components/GlobalHeader/RightContent' ; import type { ConnectState } from '@/models/connect' ; import { isAntDesignPro , getAuthorityFromRouter } from '@/utils/utils' ; import logo from '../assets/logo.svg' ; const noMatch = ( < Result status = "403" title = "403" subTitle = "Sorry, you are not authorized to access this page." extra = { < Button type = "primary" > < Link to = "/user/login" > Go Login < /Link> < /Button>}/ > ) ; export type BasicLayoutProps = { breadcrumbNameMap : Record < string , MenuDataItem > ; route : ProLayoutProps [ 'route' ] & { authority : string [ ] ; } ; settings : Settings ; dispatch : Dispatch ; } & ProLayoutProps ; export type BasicLayoutContext = { [ K in 'location' ] : BasicLayoutProps [ K ] ; } & { breadcrumbNameMap : Record < string , MenuDataItem > ; } ; /** Use Authorized check all menu item */ const menuDataRender = ( menuList ) : MenuDataItem [ ] => menuList . map ( ( item ) => { const localItem = { ... item , children : item . children ? menuDataRender ( item . children ) : [ ] } ; return Authorized . check ( item . authority , localItem , null ) as MenuDataItem ; } ) ; const defaultFooterDom = ( < DefaultFooter copyright = "2019 蚂蚁金服体验技术部出品" links = { [ { key : 'Ant Design Pro' , title : 'Ant Design Pro' , href : 'https://pro.ant.design' , blankTarget : true , } , { key : 'github' , title : < GithubOutlined />, href : 'https://github.com/ant-design/ant-design-pro' , blankTarget : true , } , { key : 'Ant Design' , title : 'Ant Design' , href : 'https://ant.design' , blankTarget : true , } , ] } / > ) ; const footerRender = ( ) => { if ( ! isAntDesignPro ( ) ) { return defaultFooterDom ; } return ( < > { defaultFooterDom } < div style = { { padding : '0px 24px 24px' , textAlign : 'center' , } } > < a href = "https://www.netlify.com" target = "_blank" rel = "noopener noreferrer" > < img src = "https://www.netlify.com/img/global/badges/netlify-color-bg.svg" width = "82px" alt = "netlify logo" / > < /a> < /div> < />); } ; const BasicLayout = ( props ) => { const { dispatch , children , settings , location = { pathname : '/' , } , } = props ; /** Constructor */ useEffect ( ( ) => { if ( dispatch ) { dispatch ( { type : 'user/fetchCurrent' , } ) ; } } , [ ] ) ; /** Init variables */ const handleMenuCollapse = ( payload ) : void => { if ( dispatch ) { dispatch ( { type : 'global/changeLayoutCollapsed' , payload , } ) ; } } ; const authorized = getAuthorityFromRouter ( props . route . routes , location . pathname || '/' ) || { authority : undefined , } ; return ( < ProLayout logo = { logo } formatMessage = { formatMessage } menuHeaderRender = { ( logoDom , titleDom ) => ( < Link to = "/" > { logoDom } { titleDom } < /Link>)} onCollapse={handleMenuCollapse} menuItemRender={(menuItemProps, defaultDom) => { if ( menuItemProps . isUrl || menuItemProps . children || ! menuItemProps . path ) { return defaultDom ; } return < Link to = { menuItemProps . path } > { defaultDom } < /Link>; } } breadcrumbRender = { ( routers = [ ] ) => [ { path : '/' , breadcrumbName : '首页' , } , ... routers , ] } itemRender = { ( route , params , routes , paths ) => { const first = routes . indexOf ( route ) === 0 ; return first ? ( < Link to = { paths . join ( '/' ) } > { route . breadcrumbName } < /Link>) : (<span>{route.breadcrumbName}</span > ) ; } } footerRender = { footerRender } menuDataRender = { menuDataRender } rightContentRender = { ( ) => < RightContent />} {...props} {...settings}> < Authorized authority = { authorized ! . authority } noMatch = { noMatch } > { children } < /Authorized> < /ProLayout>); } ; export default connect ( ( { global , settings } ) => ( { collapsed : global . collapsed , settings , } ) ) ( BasicLayout ) ;