import { Component , Vue , Prop } from 'vue-property-decorator' ; import { Icon , Dropdown , Menu } from 'ant-design-vue' ; import { State , Action } from 'vuex-class' ; import PageStyleConfig from '../PageStyleConfig' ; import { language , loginInfo , tabItem , routesInfoMap } from '@/store/types' ; import styles from './index.less' ; @ Component export default class RightBox extends Vue { @ Prop ( String ) deviceType ! : string ; @ Prop ( Boolean ) top ! : boolean ; @ Prop ( String ) theme ! : string ; @ State ( state => state . language ) language ! : language ; @ State ( state => state . loginInfo ) loginInfo ! : loginInfo ; @ State ( state => state . tabList ) tabList ! : Array < tabItem > ; @ State ( state => state . routesInfoMap ) routesInfoMap ! : routesInfoMap ; @ Action ( 'toggleLanguage' ) toggleLanguage : Function ; @ Action ( 'logout' ) logout ! : Function ; @ Action ( 'clearTab' ) clearTab ! : Function ; private systemConfigVisible : boolean = false ; changeLanguage = ( key ) => ( ) : Function => this . toggleLanguage ( key ) ; toggleSystemConfigVisible ( ) { this . systemConfigVisible = ! this . systemConfigVisible ; } async startLogout ( ) { const res = await this . logout ( ) ; if ( ! res ) this . $message . error ( this . $locale [ this . language . current ] . login . logoutError ) ; this . clearTab ( { vm : this , tabList : this . tabList , routesInfoMap : this . routesInfoMap } ) ; this . $router . push ( { name : 'login' } ) ; } render ( ) { const { top , theme , language , loginInfo , deviceType } = this ; return < div class = { `${ styles . rightBox } ${ deviceType !== 'desktop' ? styles . rightBoxMobile : '' } ${ top ? styles [ theme ] : '' }` } > < Dropdown > < span class = { `${ styles . avaterWrap } system-theme-color` } > < div class = { styles . avater } > < div > < Icon type = "user" / > < /div> < /div> < span > { loginInfo . nickname } < /span> < /span> < Menu slot = "overlay" > < Menu . Item onClick = { this . startLogout } > < Icon type = "poweroff" / > 退出登录 < /Menu.Item> < /Menu> < /Dropdown> < Dropdown trigger = { [ 'click' ] } > < span class = "system-theme-color" > < Icon type = "global" / > < /span> < Menu slot = "overlay" > { language . list . map ( item => { return < Menu . Item onClick = { this . changeLanguage ( item . key ) } key = { item . key } > < span class = { styles . menuItem } > { item . name } < /span> < /Menu.Item>; } ) } < /Menu> < /Dropdown> < span class = "system-theme-color" onClick = { this . toggleSystemConfigVisible } > < Icon type = "setting" / > < /span> < PageStyleConfig close = { this . toggleSystemConfigVisible } visible = { this . systemConfigVisible } / > < /div>; } }