analysis/src/layout/modules/UserInfoBar.vue

<template>
    <el-dropdown size="large">
        <div class="hc-user-info-bar">
            <img :alt="userInfo.account" :src="userInfo.avatar || avatarPng" class="user-avatar">
            <div class="user-name">{{ userInfo.real_name || '还未登录' }}</div>
            <hc-icon name="more-2" fill ui="arrow-icon" />
        </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)">
                        <hc-icon :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 '~src/store/user'
import { calcDate, isNullES } from 'js-fast-way'
import { getStore } from 'hc-vue3-ui'

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

//变量
const router = useRouter()
const store = useAppStore()
const userInfo = ref(store.userInfo)
const refreshLock = ref(false)

//监听
watch(() => store.userInfo, (info) => {
    userInfo.value = info
    emit('load', info)
})

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

//刷新token
const getRefreshToken = () => {
    /*setInterval(() => {
        const token = getStore('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' })
            })
        }
    }, 10000)*/
}

const options = [{ key: 'logout', label: '退出登录', icon: 'login-box' }]

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

<style lang="scss" scoped>
.hc-user-info-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    cursor: pointer;
    outline: none;
    width: 100%;
    padding: 0 10px;
    .user-avatar {
        width: 26px;
        height: 26px;
        border-radius: 5px;
        background: white;
        object-fit: cover;
    }
    .user-name {
        flex: 1;
        font-size: 16px;
        margin-left: 10px;
        color: white;
    }
    .arrow-icon {
        margin-left: 5px;
        font-size: 20px;
        color: white;
    }
}
.hc-dropdown-item {
    display: flex;
    align-items: center;
    .icon {
        font-size: 14px;
        margin-right: 8px;
    }
}
</style>