|
@@ -1,152 +0,0 @@
|
|
|
-<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">{{ userInfo.real_name }}</span>
|
|
|
- <HcIcon name="arrow-down-s" 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)">
|
|
|
- <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 { 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.getUserInfo)
|
|
|
-const refreshLock = ref(false)
|
|
|
-
|
|
|
-//监听
|
|
|
-watch(() => store.getUserInfo, (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-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: black;
|
|
|
- }
|
|
|
- .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>
|