admin-sjzx/src/layouts/admin/components/navMenus.vue

<template>
    <div class="nav-menus" :class="configStore.layout.layoutMode">
        <el-tooltip effect="dark" content="暂降事件" placement="bottom">
            <div @click="temporaryLandingEvent" class="nav-menu-item">
                <Icon
                    :color="configStore.getColorVal('headerBarTabColor')"
                    class="nav-menu-icon"
                    name="el-icon-BellFilled"
                    size="18"
                />
                <span class="nav-menu-text" v-if="globalPopUpRef?.eventList.length != 0">
                    {{ globalPopUpRef?.eventList.length || 0 }}
                </span>
            </div>
        </el-tooltip>
        <!-- <el-tooltip effect="dark" content="截图" placement="bottom">
            <div @click="savePng" class="nav-menu-item">
                <Icon
                    :color="configStore.getColorVal('headerBarTabColor')"
                    class="nav-menu-icon"
                    name="el-icon-Camera"
                    size="18"
                />
            </div>
        </el-tooltip>
        <el-tooltip effect="dark" :content="state.isFullScreen ? '缩小' : '放大'" placement="bottom">
            <div @click="onFullScreen" class="nav-menu-item" :class="state.isFullScreen ? 'hover' : ''">
                <Icon
                    :color="configStore.getColorVal('headerBarTabColor')"
                    class="nav-menu-icon"
                    v-if="state.isFullScreen"
                    name="fa-solid fa-compress"
                    size="18"
                />
                <Icon
                    :color="configStore.getColorVal('headerBarTabColor')"
                    class="nav-menu-icon"
                    v-else
                    name="fa-solid fa-expand"
                    size="18"
                />
            </div>
        </el-tooltip> -->
        <el-dropdown style="height: 100%" @command="handleCommand">
            <div class="admin-info" :class="state.currentNavMenu == 'adminInfo' ? 'hover' : ''">
                <el-avatar :size="25" fit="fill">
                    <img src="@/assets/avatar.png" alt="" />
                </el-avatar>
                <div class="admin-name">{{ adminInfo.nickname }}</div>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="adminInfo">个人资料</el-dropdown-item>
                    <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
                    <el-dropdown-item command="layout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <!-- <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
            <Icon
                :color="configStore.getColorVal('headerBarTabColor')"
                class="nav-menu-icon"
                name="fa fa-cogs"
                size="18"
            />
        </div> -->
        <Config />
        <PopupPwd ref="popupPwd" />
        <AdminInfo ref="popupAdminInfo" />
        <!-- <TerminalVue /> -->
        <!-- 全局暂降事件 -->
        <globalPopUp ref="globalPopUpRef" />
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import screenfull from 'screenfull'
import { useConfig } from '@/stores/config'
import { ElMessage } from 'element-plus'
import Config from './config.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import router from '@/router'
import globalPopUp from './globalPopUp.vue'
import { routePush } from '@/utils/router'
import { fullUrl } from '@/utils/common'
import html2canvas from 'html2canvas'
import PopupPwd from './popup/password.vue'
import AdminInfo from './popup/adminInfo.vue'
import { useNavTabs } from '@/stores/navTabs'

const adminInfo = useAdminInfo()
const navTabs = useNavTabs()
const configStore = useConfig()
const popupPwd = ref()
const popupAdminInfo = ref()
const state = reactive({
    isFullScreen: false,
    currentNavMenu: '',
    showLayoutDrawer: false,
    showAdminInfoPopover: false
})
const globalPopUpRef = ref()
const savePng = () => {
    html2canvas(document.body, {
        scale: 1,
        useCORS: true
    }).then(function (canvas) {
        var link = document.createElement('a')
        link.href = canvas.toDataURL('image/png')
        link.download = 'screenshot.png'
        link.click()
    })
}
const onFullScreen = () => {
    if (!screenfull.isEnabled) {
        ElMessage.warning('layouts.Full screen is not supported')
        return false
    }
    screenfull.toggle()
    screenfull.onchange(() => {
        state.isFullScreen = screenfull.isFullscreen
    })
}

const handleCommand = (key: string) => {
    console.log(key)
    switch (key) {
        case 'adminInfo':
            popupAdminInfo.value.open()
            break
        case 'changePwd':
            popupPwd.value.open()
            break
        case 'layout':
            navTabs.closeTabs()
            window.localStorage.clear()
            adminInfo.reset()
            router.push({ name: 'login' })
            break
        default:
            break
    }
}
const temporaryLandingEvent = () => {
    globalPopUpRef.value.open()
}
</script>

<style scoped lang="scss">
.nav-menus.Default {
    border-radius: var(--el-border-radius-base);
    box-shadow: var(--el-box-shadow-light);
}

.nav-menus {
    height: 60px;
    display: flex;
    align-items: center;
    // height: 100%;
    margin-left: auto;
    background-color: v-bind('configStore.getColorVal("headerBarBackground")');

    .nav-menu-item {
        position: relative;
        height: 100%;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .nav-menu-icon {
            box-sizing: content-box;
            color: v-bind('configStore.getColorVal("headerBarTabColor")');
        }

        &:hover {
            .icon {
                animation: twinkle 0.3s ease-in-out;
            }
        }
    }

    .admin-info {
        display: flex;
        height: 100%;
        padding: 0 10px;
        align-items: center;
        cursor: pointer;
        user-select: none;
        color: v-bind('configStore.getColorVal("headerBarTabColor")');

        &:hover {
            color: v-bind('configStore.getColorVal("headerBarTabActiveColor")');
        }
    }

    .admin-name {
        padding-left: 6px;
        white-space: nowrap;
    }

    .nav-menu-item:hover,
    .admin-info:hover,
    .nav-menu-item.hover,
    .admin-info.hover {
        background: v-bind('configStore.getColorVal("headerBarHoverBackground")');

        .nav-menu-icon {
            color: v-bind('configStore.getColorVal("headerBarTabActiveColor")') !important;
        }
    }
}

.dropdown-menu-box :deep(.el-dropdown-menu__item) {
    justify-content: center;
}

.admin-info-base {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 10px;

    .admin-info-other {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 0;

        .admin-info-name {
            font-size: var(--el-font-size-large);
        }
    }
}

.admin-info-footer {
    padding: 10px 0;
    margin: 0 -12px -12px -12px;
    display: flex;
    justify-content: space-around;
}

.pt2 {
    padding-top: 2px;
}

@keyframes twinkle {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.nav-menu-text {
    position: absolute;
    top: 13px;
    right: 7px;
    font-size: 12px;
    display: inline-block;
    background-color: #ff0000;
    color: #fff;
    border-radius: 5px;
    padding: 0 3px;
}
</style>