/**
 * 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 , DefaultFooter , } from '@ant-design/pro-layout' ; import React from 'react' ; import { Link , connect , Dispatch , Redirect } from 'umi' ; import { Result , Button , BackTop } from 'antd' ; import { GithubOutlined } from '@ant-design/icons' ; import Authorized from '@/utils/Authorized' ; import RightContent from '@/components/GlobalHeader/RightContent' ; import { AuthModelState , ConnectState } from '@/models/connect' ; import { getAuthorityFromRouter } from '@/utils/utils' ; import logo from '../assets/logo.svg' ; const noMatch = ( < Result status = { 403 } title = "403" subTitle = "抱歉，你无权访问该页面。" extra = { < Button type = "primary" > < Link to = "/" > 返回首页 < /Link> < /Button>}/ > ) ; export interface BasicLayoutProps extends ProLayoutProps { breadcrumbNameMap : { [ path ] : MenuDataItem ; } ; route : ProLayoutProps [ 'route' ] & { authority : string [ ] ; } ; settings : Settings ; dispatch : Dispatch ; auth : AuthModelState ; } 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 = ( ) => { const links = [ { key : 'Ant Design Pro' , title : 'Ant Design Pro' , href : 'https://pro.ant.design' , blankTarget : true , } , { key : 'github' , title : < GithubOutlined />, href : 'https://github.com/yanthink/blog-v2' , blankTarget : true , } , { key : 'Ant Design' , title : 'Ant Design' , href : 'https://ant.design' , blankTarget : true , } , ] ; const copyright = '2019 平凡的博客 粤ICP备18080782号-1' ; return < DefaultFooter links = { links } copyright = { copyright } / > ; } ; const BasicLayout = ( props ) => { const { dispatch , children , settings , location = { pathname : '/' , } , auth , } = props ; const handleMenuCollapse = ( payload ) : void => { if ( dispatch ) { dispatch ( { type : 'global/changeLayoutCollapsed' , payload , } ) ; } } ; const authorized = getAuthorityFromRouter ( props . route . routes as [ ] , location . pathname || '/' ) || { authority : undefined , } ; return ( < ProLayout logo = { logo } 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>) : (<>{route.breadcrumbName}</ > ) ; } } footerRender = { footerRender } menuDataRender = { menuDataRender } rightContentRender = { ( ) => < RightContent />} {...props} {...settings}> < Authorized authority = { authorized ! . authority } noMatch = { auth . logged ? noMatch : < Redirect to = "/articles/list" />}> { children } < /Authorized> < BackTop / > < /ProLayout>); } ; export default connect ( ( { global , settings , auth } ) => ( { collapsed : global . collapsed , settings , auth , } ) ) ( BasicLayout ) ;