MTP2.0_NEWMANAGE_WEB/src/packages/pc/components/layouts/header/index.vue

<template>
    <div class="app-header">
        <div class="app-header__left">
            <slot name="left"></slot>
            <el-breadcrumb :separator-icon="ArrowRight" v-show="!globalStore.isMobile">
                <template v-for="(item, index) in $route.matched" :key="index">
                    <el-breadcrumb-item>
                        <!--<i :class="item.meta.icon" v-if="item.meta.icon"></i>-->
                        <span>{{ t('routes.'+(item.name ?? item.meta.name)) }}</span>
                    </el-breadcrumb-item>
                </template>
            </el-breadcrumb>
        </div>
        <div class="app-header__right">
            <slot name="right"></slot>
            <div class="iconbar">
                <!-- <el-badge type="danger" is-dot>
                    <span class="g-icon--notice"></span>
                </el-badge> -->
                <span class="g-icon--minimize" @click="exitFullSreen" v-if="fullScreen"></span>
                <span class="g-icon--maximize" @click="setFullSreen" v-else></span>
            </div>
            <el-dropdown class="user-dropdown" trigger="click">
                <span class="g-icon--language"></span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <template v-for="item in getLanguageList()" :key="item.value">
                            <el-dropdown-item @click="switchLanguage(item.value)">{{ item.label }}</el-dropdown-item>
                        </template>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown class="user-dropdown" trigger="click">
                <span class="user-dropdown__link">
                    <span>{{ userStore.userInfo.username }}</span>
                    <span>({{ userStore.userInfo.logincode }})</span>
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :icon="Key" @click="openComponent('Password')">{{ t('operation.modifypwd')
                        }}</el-dropdown-item>
                        <el-dropdown-item :icon="SwitchButton" @click="eventBus.$emit('Logout')">{{
                            t('operation.loginout') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <component ref="componentRef" :is="componentMap.get(componentId)" @closed="closeComponent" v-if="componentId" />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineAsyncComponent } from 'vue'
import { ArrowRight, Key, SwitchButton, ArrowDown } from '@element-plus/icons-vue'
import { useComponent } from '@/hooks/component'
import { getLanguageList, Language } from '@/constants/language'
import { useGlobalStore, useUserStore, i18n } from '@/stores'
import { localData } from '@/stores/storage'
import eventBus from '@/services/bus'

const componentMap = new Map<string, unknown>([
    ['Password', defineAsyncComponent(() => import('@pc/views/auth/password/index.vue'))], // 修改密码
])

const globalStore = useGlobalStore()
const userStore = useUserStore()
const fullScreen = ref(false)

const { global: { t } } = i18n

const { componentRef, componentId, openComponent, closeComponent } = useComponent()

// 全屏
const setFullSreen = () => {
    document.documentElement.requestFullscreen();
}

// 退出全屏
const exitFullSreen = () => {
    document.exitFullscreen();
}

// 切换语言
const switchLanguage = (lange: Language) => {
    i18n.global.locale = lange
    localData.setValue('appLanguage', lange)
}

onMounted(() => {
    // 监听全屏变化
    window.addEventListener('fullscreenchange', () => {
        if (document.fullscreenElement) {
            fullScreen.value = true;
        } else {
            fullScreen.value = false;
        }
    })
})
</script>

<style lang="less" scoped>
@import './index.less';
</style>