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-18 09:48:18
|
|||
|
|
-->
|
|||
|
|
<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>
|