MTP20_WEB_GLOBAL/src/packages/pc/components/layouts/header/index.vue

<template>
    <div class="app-header">
        <div class="app-header__left">
            <slot name="left"></slot>
            <span>{{ globalStore.getSystemInfo('appName') }}</span>
        </div>
        <div class="app-header__right">
            <slot name="right"></slot>
            <div class="iconbar">
                <el-badge type="danger" :is-dot="noticeStore.unreadList.length > 0">
                    <app-icon icon="g-icon-notice" @click="openComponent('notice')" />
                </el-badge>
                <app-icon icon="Tickets" @click="openComponent('report')" />
                <app-icon icon="Setting" @click="openComponent('setting')" />
                <!-- <app-icon icon="g-icon-minimize" @click="exitFullSreen" v-if="fullScreen" />
                <app-icon icon="g-icon-maximize" @click="setFullSreen" v-else /> -->
            </div>
            <el-dropdown class="user-dropdown" effect="dark" trigger="click">
                <span class="user-dropdown__link">
                    <img class="g-image--avatar" :title="userStore.customerName" :src="userAvatar" />
                    <span v-if="!globalStore.isMobile">{{ userStore.customerName }}</span>
                    <app-icon class="el-icon--right" icon="ArrowDown" />
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :icon="Avatar" @click="openComponent('avater')">{{ t('operation.modifyavatar') }}</el-dropdown-item>
                        <el-dropdown-item :icon="Unlock" @click="openComponent('modify')">{{ t('routes.modifypwd') }}</el-dropdown-item>
                        <!-- <el-dropdown-item :icon="Delete" @click="openComponent('cancel')">注销账户</el-dropdown-item> -->
                        <el-dropdown-item :icon="SwitchButton"
                            @click="eventBus.$emit('LogoutNotify')">{{ t('common.logout') }}</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, computed, defineAsyncComponent } from 'vue'
import { SwitchButton, Unlock, Avatar } from '@element-plus/icons-vue'
import { getFileUrl, diffDays } from '@/filters'
import { useComponent } from '@/hooks/component'
import { useLoginStore, useUserStore, useGlobalStore, useNoticeStore, i18n } from '@/stores'
import { localData } from '@/stores/storage'
// import enUS from 'vant/es/locale/lang/en-US'
import eventBus from '@/services/bus'
import AppIcon from '@pc/components/base/icon/index.vue'

const componentMap = new Map<string, unknown>([
    ['notice', defineAsyncComponent(() => import('./components/notice/index.vue'))],
    ['modify', defineAsyncComponent(() => import('./components/modify/index.vue'))],
    // ['cancel', defineAsyncComponent(() => import('./components/cancel/index.vue'))],
    ['avater', defineAsyncComponent(() => import('./components/avater/index.vue'))],
    ['report', defineAsyncComponent(() => import('./components/report/index.vue'))],
    ['setting', defineAsyncComponent(() => import('./components/setting/index.vue'))],
])

const { componentId, openComponent, closeComponent } = useComponent()
const loginStore = useLoginStore()
const globalStore = useGlobalStore()
const userStore = useUserStore()
const noticeStore = useNoticeStore()
const fullScreen = ref(false)

const { t } = i18n.global

// 用户头像
const userAvatar = computed(() => {
    const file = userStore.userInfo?.headurl
    return file ? getFileUrl(file) : ''
})

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

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

onMounted(() => {
    const reportAgree = localData.getValue('reportAgree')
    const userReportAgree = reportAgree.find((e) => e.loginId === loginStore.loginId)
    /// 如果未同意 或者跨天
    if (!userReportAgree || diffDays(userReportAgree.agreedTime) > 0) {
        if (userReportAgree) {
            userReportAgree.isAgree = false
            localData.setValue('reportAgree', reportAgree)
        }
        openComponent('report')
    }
    // 监听全屏变化
    window.addEventListener('fullscreenchange', () => {
        if (document.fullscreenElement) {
            fullScreen.value = true;
        } else {
            fullScreen.value = false;
        }
    })
})
</script>

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