79 lines
2.0 KiB
Vue
79 lines
2.0 KiB
Vue
<template>
|
|
<a-dropdown position="bl" :style="{ top: '52px' }">
|
|
<div class="avatar-container">
|
|
<a-avatar :size="32" :style="{ backgroundColor: '#3370ff' }">
|
|
<img alt="avatar" :src="userInfo.avatar" />
|
|
</a-avatar>
|
|
<div class="user-info">
|
|
<div class="user-info-name">{{ userInfo.nick_name }}</div>
|
|
<!-- <div class="user-info-desc">{{ userInfo.introduction }}</div> -->
|
|
</div>
|
|
</div>
|
|
<template #content>
|
|
<!-- <a-doption @click="$router.push('/profile')">
|
|
<template #icon>
|
|
<icon-settings />
|
|
</template>
|
|
<template #default>用户设置</template>
|
|
</a-doption> -->
|
|
<a-doption @click="handleLogout()">
|
|
<template #icon>
|
|
<icon-export />
|
|
</template>
|
|
<template #default>退出登陆</template>
|
|
</a-doption>
|
|
</template>
|
|
</a-dropdown>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getCurrentInstance } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import {
|
|
IconSettings,
|
|
IconExport,
|
|
} from '@arco-design/web-vue/es/icon';
|
|
import { useUserStore } from '@/store/userInfo';
|
|
import { clearLocalStorage } from '@/utils/storage';
|
|
|
|
const store = useUserStore();
|
|
const { userInfo } = storeToRefs(store);
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
const handleLogout = () => {
|
|
|
|
proxy.$modal.warning({
|
|
title: '提示',
|
|
content: '确定注销并退出登陆系统吗？',
|
|
hideCancel: false,
|
|
onOk:async() => {
|
|
const store = useUserStore();
|
|
await store.userLogut();
|
|
window.localStorage.removeItem('token');
|
|
clearLocalStorage();
|
|
proxy.$router.push('/login');
|
|
},
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.avatar-container {
|
|
display: flex;
|
|
cursor: pointer;
|
|
.user-info {
|
|
margin-left: 10px;
|
|
&-name {
|
|
color: var(--color-text-1);
|
|
font-weight: 700;
|
|
padding-top: 8px;
|
|
}
|
|
&-desc {
|
|
color: var(--color-text-1);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
</style> |