import { Component , Vue } from 'vue-property-decorator' ; import { Layout , Icon , Drawer } from 'ant-design-vue' ; import { State , Action } from 'vuex-class' ; import { siderMenu , deviceType , navLayout , tabMode , routesInfoMap , menuItem } from '@/store/types' ; import { theme } from '@/store/types' ; import { SiderMenu , Logo , TabTool , RightBox , TabManager } from '@/components' ; import styles from './index.less' ; const { Content , Sider , Header } = Layout ; @ Component export default class BasicLayout extends Vue { @ State ( 'theme' ) theme : theme ; @ State ( 'navLayout' ) navLayout : navLayout ; @ State ( 'fixedHeader' ) fixedHeader : boolean ; @ State ( 'fixedLeftMenu' ) fixedLeftMenu : boolean ; @ State ( 'tabTool' ) tabTool : boolean ; @ State ( 'tabActive' ) tabActive : string ; @ State ( 'tabMode' ) tabMode : tabMode ; @ State ( 'globalScroll' ) globalScroll : boolean ; @ State ( 'siderMenu' ) siderMenu : siderMenu ; @ State ( 'menuTree' ) menuTree : Array < menuItem > ; @ State ( 'deviceType' ) deviceType : deviceType ; @ State ( 'routesInfoMap' ) routesInfoMap : routesInfoMap ; @ Action ( 'handleTab' ) handleTab ! : Function ; @ Action ( 'openSiderSubMenu' ) openSiderSubMenu ! : Function ; @ Action ( 'toggleSiderMenuCollapsed' ) toggleSiderMenuCollapsed ! : Function ; protected mounted ( ) { this . $router . beforeEach ( this . listenRouteChange ) ; this . validateActiveRouter ( ) ; } listenRouteChange ( newpath , _oldpath , next ) { if ( this . routesInfoMap [ newpath . name ] && ! this . routesInfoMap [ newpath . name ] . public ) { this . handleTab ( { id : newpath . name , keyPath : newpath . path } ) ; } next ( ) ; } validateActiveRouter ( ) { if ( this . $route . name !== this . tabActive ) this . $router . push ( { name : this . tabActive } ) ; } render ( ) { const { theme , tabMode , tabTool , menuTree , navLayout , tabActive , deviceType , fixedHeader , globalScroll , siderMenu : { collapsed , open } , fixedLeftMenu } = this ; return < Layout > { navLayout === 'left' || deviceType === 'mobile' ? ( deviceType !== 'mobile' ? ( < Sider id = "s_siderMenu" theme = { theme } width = "256" class = { `${ theme === 'light' ? styles . siderMenuWrap : '' } ${ fixedLeftMenu ? styles . fixedLeftMenu : '' }` } trigger = { null } collapsible collapsed = { collapsed } > < Logo type = "menu" theme = { theme } / > < div class = { styles . leftMenuWrap } > < SiderMenu open = { open } theme = { theme } menu = { menuTree } tabActive = { tabActive } class = { styles . siderMenu } openSiderSubMenu = { this . openSiderSubMenu } / > < /div> < /Sider>) : < Drawer width = "256" placement = "left" closable = { false } visible = { ! collapsed } wrapClassName = { styles [ theme ] } onClose = { ( ) => this . toggleSiderMenuCollapsed ( deviceType ) } > < Logo type = "menu" theme = { theme } / > < SiderMenu open = { open } theme = { theme } menu = { menuTree } tabActive = { tabActive } class = { styles . siderMenu } deviceType = { this . deviceType } closeMenu = { ( ) => this . toggleSiderMenuCollapsed ( deviceType ) } openSiderSubMenu = { this . openSiderSubMenu } / > < /Drawer>) : null} < Layout class = { `${ fixedHeader && ! globalScroll ? styles . notGlobalScroll : '' }` } > { navLayout === 'left' || deviceType === 'mobile' ? < Header style = { fixedHeader && globalScroll ? { width : `calc(100% - ${ collapsed ? deviceType === 'mobile' ? 0 : 80 : 256 }px)` } : { } } class = { `${ styles . header } ${ styles [ theme + 'Header' ] } ${ fixedHeader && globalScroll ? styles . fixedHeader : '' }` } > < Icon title = "切换" class = { styles . trigger } type = { deviceType === 'mobile' ? 'menu' : collapsed ? 'menu-unfold' : 'menu-fold' } onClick = { ( ) => this . toggleSiderMenuCollapsed ( deviceType ) } /> { deviceType === 'desktop' ? < TabTool deviceType = { deviceType } mode = { tabMode } navLayout = { navLayout } show = { tabTool } / > : null } < RightBox deviceType = { deviceType } /> < /Header> : < Header style = { navLayout === 'top' && ! globalScroll ? { position : 'relative' } : { } } class = { `${ styles . header } ${ theme === 'light' ? styles . lightHeader : '' } ${ fixedHeader ? styles . fixedHeader : '' }` } > < Logo type = "top" theme = { theme } / > < div class = { styles . navTop } > < SiderMenu top theme = { theme } open = { open } menu = { menuTree } tabActive = { tabActive } class = { `${ styles . siderMenu } ${ styles . siderMenuTop } ${ theme === 'dark' ? styles . siderMenuTopDark : '' }` } openSiderSubMenu = { this . openSiderSubMenu } / > < /div> < RightBox top theme = { theme } deviceType = { deviceType } / > < /Header>} < Content class = { `${ navLayout === 'top' && deviceType === 'desktop' ? styles . contentTopNav : '' }
            ${ fixedHeader && globalScroll ? styles . paddingTopHeader : '' }
            ${ navLayout === 'top' && fixedHeader ? styles . topNavOwnerScroll : '' }
            ` } > { navLayout === 'top' && deviceType === 'desktop' ? < TabTool deviceType = { deviceType } mode = { tabMode } navLayout = { navLayout } show = { tabTool } / > : deviceType !== 'desktop' ? < TabManager menuCollapsed = { collapsed } deviceType = { deviceType } / > : null } < transition name = "router-fade" > < router - view > < /router-view> < /transition> < /Content> < /Layout> < /Layout>; } }