83 lines
2.3 KiB
Vue
83 lines
2.3 KiB
Vue
<!--
|
||
* @Description:
|
||
* @Author: zenghua.wang
|
||
* @Date: 2023-06-20 14:29:45
|
||
* @LastEditors: zenghua.wang
|
||
* @LastEditTime: 2025-02-14 11:39:56
|
||
-->
|
||
<template>
|
||
<el-dropdown class="layout-avatar">
|
||
<span class="el-dropdown-link">
|
||
<el-avatar :size="30" class="avatar" :src="userInfo.avatar || getAssetsFile('images/avatar.gif')" />
|
||
<span class="layout-avatar-name">{{ userInfo.userName || '游客' }}</span>
|
||
<el-icon class="el-icon--right">
|
||
<arrow-down />
|
||
</el-icon>
|
||
</span>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item :command="0"> 当前角色：{{ userInfo.nickName }} </el-dropdown-item>
|
||
<el-dropdown-item :command="5" divided @click="logOut">
|
||
<el-icon><SwitchButton /></el-icon>退出登录
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
|
||
<script setup name="layout-avatar">
|
||
import { computed } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
import { useUserStore } from '@/store/modules/user';
|
||
import { useTagsViewStore } from '@/store/modules/tagsView';
|
||
import { usePermissionStore } from '@/store/modules/permission';
|
||
import { getAssetsFile } from '@/utils';
|
||
import { LogOut } from '@/apis/login';
|
||
|
||
const router = useRouter();
|
||
const UserStore = useUserStore();
|
||
const TagsViewStore = useTagsViewStore();
|
||
const PermissionStore = usePermissionStore();
|
||
|
||
// 用户信息
|
||
const userInfo = computed(() => UserStore.getUserInfo());
|
||
|
||
const logOut = async () => {
|
||
ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}).then(async () => {
|
||
LogOut().then((res) => {
|
||
if (res.code === 200) {
|
||
UserStore.logout();
|
||
TagsViewStore.clearVisitedView();
|
||
PermissionStore.clearRoutes();
|
||
router.push({ path: '/login' });
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '退出登录成功！',
|
||
});
|
||
localStorage.removeItem('daimp-front-main_user_store');
|
||
}
|
||
});
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.layout-avatar {
|
||
&-name {
|
||
margin-left: 8px;
|
||
@include ellipsis;
|
||
}
|
||
.el-dropdown-link {
|
||
@include flex-row;
|
||
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
</style>
|