83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<template>
|
|
<a-dropdown trigger="hover" placement="bottomRight">
|
|
<div class="user-dropdown-trigger">
|
|
<span class="user-name">{{ displayName }}</span>
|
|
<IconSettings class="user-icon" />
|
|
</div>
|
|
<template #content>
|
|
<a-doption @click="() => onMenuClick({ key: 'userinfo' })">
|
|
<b><i class="fa fa-user mr-2"></i>个人中心</b>
|
|
</a-doption>
|
|
<a-doption @click="() => onMenuClick({ key: 'settings' })">
|
|
<b><i class="fa fa-cog mr-2"></i>页面配置</b>
|
|
</a-doption>
|
|
<a-doption @click="() => onMenuClick({ key: 'logout' })">
|
|
<b class="text-red-500"><i class="fa fa-sign-in mr-2"></i>退出登录</b>
|
|
</a-doption>
|
|
</template>
|
|
</a-dropdown>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useUserStore, useAppStore } from '@/store';
|
|
import { IconSettings } from '@arco-design/web-vue/es/icon';
|
|
|
|
const router = useRouter();
|
|
const userStore = useUserStore();
|
|
const appStore = useAppStore();
|
|
|
|
const displayName = computed(() => {
|
|
return userStore.name || '--';
|
|
});
|
|
|
|
// 点击菜单
|
|
const onMenuClick = async (event: any) => {
|
|
const { key } = event;
|
|
|
|
if (key === 'logout') {
|
|
userStore.logout();
|
|
router.push({ name: 'login' });
|
|
} else if (key === 'userinfo') {
|
|
// TODO: 跳转到个人中心
|
|
// router.push({ name: 'Profile' });
|
|
console.log('跳转到个人中心');
|
|
} else if (key === 'settings') {
|
|
appStore.updateSettings({ globalSettings: true });
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-dropdown-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
padding: 0 8px;
|
|
flex-shrink: 0;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.user-dropdown-trigger:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.user-name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 150px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.user-icon {
|
|
font-size: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|
|
|