/**
 * 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 ProLayout , { MenuDataItem , BasicLayoutProps as ProLayoutProps , Settings , } from '@ant-design/pro-layout' ; import React , { useEffect , ReactElement } from 'react' ; import Link from 'umi/link' ; import { Dispatch } from 'redux' ; import { connect } from 'dva' ; import { formatMessage } from 'umi-plugin-react/locale' ; import Authorized from '@/utils/Authorized' ; import RightContent from '@/components/GlobalHeader/RightContent' ; import { ConnectState } from '@/models/connect' ; import { isAntDesignPro } from '@/utils/utils' ; import logo from '../assets/logo.svg' ; import { json } from 'body-parser' ; export interface BasicLayoutProps extends ProLayoutProps { breadcrumbNameMap : { [ path ] : MenuDataItem ; } ; settings : Settings ; dispatch : Dispatch ; } export type BasicLayoutContext = { [ K in 'location' ] : BasicLayoutProps [ K ] ; } & { breadcrumbNameMap : { [ path ] : 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 footerRender = ( _ , defaultDom ) => { if ( ! isAntDesignPro ( ) ) { return React . cloneElement ( defaultDom as ReactElement , { links : [ { key : '批处理管理1' , title : '批处理管理-1' , href : 'http://localhost:8000' , blankTarget : false , } , { key : '批处理管理2' , title : '批处理管理-2' , href : 'http://localhost:8000' , blankTarget : false , } , { key : '批处理管理3' , title : '批处理管理-3' , href : 'http://localhost:8000' , blankTarget : false , } , { key : '批处理管理4' , title : '批处理管理-4' , href : 'http://localhost:8000' , blankTarget : false , } , { key : '批处理管理5' , title : '批处理管理-5' , href : 'http://localhost:8000' , blankTarget : false , } , ] , copyright : '程序猿鹏哥工作室' } ) ; } return ( < > { defaultDom } < 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 } = props ; /**
     * constructor
     */ useEffect ( ( ) => { if ( dispatch ) { dispatch ( { type : 'user/fetchCurrent' , } ) ; dispatch ( { type : 'settings/getSetting' , } ) ; } } , [ ] ) ; /**
     * init variables
     */ const handleMenuCollapse = ( payload ) : void => { if ( dispatch ) { dispatch ( { type : 'global/changeLayoutCollapsed' , payload , } ) ; } } ; return ( < ProLayout logo = { logo } onCollapse = { handleMenuCollapse } menuItemRender = { ( menuItemProps , defaultDom ) => { if ( menuItemProps . isUrl ) { return defaultDom ; } return < Link to = { menuItemProps . path } > { defaultDom } < /Link>; } } breadcrumbRender = { ( routers = [ ] ) => [ { path : '/' , breadcrumbName : formatMessage ( { id : 'menu.home' , defaultMessage : 'Home' , } ) , } , ... 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 } formatMessage = { formatMessage } rightContentRender = { rightProps => < RightContent { ... rightProps } />} {...props} {...settings}> { children } < /ProLayout>); } ; export default connect ( ( { global , settings } ) => ( { collapsed : global . collapsed , settings , } ) ) ( BasicLayout ) ;