for_client/src/layout/modules/UserInfoBar.vue

<template>
    <el-dropdown size="large">
        <div class="header-bar user-info-bar">
            <img :alt="userInfo.account" :src="userInfo.avatar || avatarPng" class="user-avatar">
            <span class="user-name" :style="{ color: isYunNanProject ? 'black' : 'white' }">{{ userInfo.real_name }}</span>
            <HcIcon name="arrow-down-s" ui="arrow-icon" :style="{ color: isYunNanProject ? 'black' : 'white' }" />
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in options" :key="item.key">
                    <div class="hc-dropdown-item" @click="handleSelect(item.key)">
                        <HcIcon :name="item.icon" class="icon" />
                        <span class="label">{{ item.label }}</span>
                    </div>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '~src/store'
import website from '~src/config/index'
import avatarPng from '~src/assets/images/avatar.png'
import { LogOut, RefreshToken } from '~sto/user'
import { getStoreValue } from '~src/utils/storage'
import { calcDate, isNullES } from 'js-fast-way'

//事件
const emit = defineEmits(['load'])

//变量
const router = useRouter()
const store = useAppStore()
const userInfo = ref(store.getUserInfo)
const refreshLock = ref(false)
const projectId = ref(store.getProjectId)
// 判断是否为云南项目
const isYunNanProject = ref(projectId.value === '1904814720589430785')


// 添加watch来更新isYunNanProject
watch(() => store.getProjectId, (newProjectId) => {
    isYunNanProject.value = newProjectId === '1904814720589430785'
})
//监听
watch(() => store.getUserInfo, (info) => {
    userInfo.value = info
    emit('load', info)
})

onMounted(() => {
    getRefreshToken()
    emit('load', userInfo.value)
})

//刷新token
const getRefreshToken = () => {
    setInterval(() => {
        const token = getStoreValue('token', true) || {}
        const date = calcDate(token.datetime, new Date().getTime())
        if (isNullES(date)) return
        if (date.seconds >= website.tokenTime && !refreshLock.value) {
            refreshLock.value = true
            console.log('刷新token')
            RefreshToken().then(() => {
                refreshLock.value = false
            }).catch(() => {
                refreshLock.value = false
                router.push({ name: 'login-main' })
            })
        }
    }, 10000)
}

const options = [
    {
        key: 'my',
        label: '个人中心',
        icon: 'user-3',
    },
    {
        key: 'logout',
        label: '退出登录',
        icon: 'login-box',
    },
]

const handleSelect = (key) => {
    if (key === 'my') {
        router.push({ name: 'user-index' })
    } else if (key === 'logout') {
        LogOut().then()
        window.$message?.info('退出成功')
        router.push({ name: 'login-main' })
    }
}
</script>

<style lang="scss" scoped>
.user-info-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
    padding-left: 16px;
    margin-left: 4px;
    outline: none;
    .user-avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: white;
        object-fit: cover;
    }
    .user-name {
        font-size: 16px;
        margin-left: 10px;
        color: white;
    }
    .arrow-icon {
        margin-left: 5px;
        font-size: 20px;
        color: white;
    }
    &::before {
        position: absolute;
        content: '';
        left: 0;
        width: 0;
        height: 20px;
        border-left: 1px solid #7291ff;
    }
}
.hc-layout-box .hc-container-view.home .hc-header-view .hc-header-content .user-info-bar {
    color: inherit;
    .user-name {
        color: white;
    }
    .arrow-icon {
        color: white;
    }
    &::before {
        border-left: 1px solid white;
    }
}

.hc-dropdown-item {
    display: flex;
    align-items: center;
    .icon {
        font-size: 14px;
        margin-right: 8px;
    }
}
</style>