webb2b/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="!state.isMobile">
                <template v-for="(item, index) in $route.matched" :key="index">
                    <el-breadcrumb-item :to="{ path: item.path }">
                        <!--<i :class="item.meta.icon" v-if="item.meta.icon"></i>-->
                        <span>{{ item.meta.title ?? 'item.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="unreadList.length > 0">
                    <app-icon icon="g-icon--notice" @click="openComponent('notice')" />
                </el-badge>
                <app-icon icon="ChatDotRound" @click="routerTo('bargain_buy')" />
                <app-icon icon="SetUp" @click="openComponent('calculator')" />
                <app-icon icon="Collection" @click="openComponent('certificate')" />
                <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" trigger="click">
                <span class="user-dropdown__link">
                    <img class="g-image--avatar" :title="getAccountName()" />
                    <span v-if="!state.isMobile">{{ getAccountName() }}</span>
                    <app-icon class="el-icon--right" icon="ArrowDown" />
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <!-- <el-dropdown-item icon="Key">修改密码</el-dropdown-item> -->
                        <el-dropdown-item icon="SwitchButton" @click="signOut()">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <component :is="componentMap.get(componentId)" v-bind="{ dataList }" @closed="closeComponent"
            v-if="componentId" />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
import client from '@/utils/client'
import { useUserStore } from '@/stores'
import { useSign } from '@/business/sign'
import { useComponent } from '@/hooks/component'
import { useNotice } from '@/business/notice'
import AppIcon from '@pc/components/base/icon/index.vue'

const componentMap = new Map<string, unknown>([
    ['notice', defineAsyncComponent(() => import('./components/notice/index.vue'))],
    ['calculator', defineAsyncComponent(() => import('./components/calculator/index.vue'))],
    ['certificate', defineAsyncComponent(() => import('./components/certificate/index.vue'))],
])

const { componentId, openComponent, closeComponent } = useComponent()
const { dataList, unreadList, getNoticeList } = useNotice()
const { state } = client
const { signOut } = useSign()
const { getAccountName } = useUserStore()
const router = useRouter()
const fullScreen = ref(false)

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

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

// 路由跳转
const routerTo = (name: string) => {
    router.push({ name })
}

getNoticeList()

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

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