89 lines
2.2 KiB
Vue
89 lines
2.2 KiB
Vue
<template>
|
|
<n-layout-header bordered>
|
|
<ls-logo/>
|
|
<div class="header-avatar">
|
|
<div class="header-avatar__info">
|
|
<n-avatar src="@/assets/images/luolan_avatar.jpg" round :size="45"
|
|
fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
|
|
</n-avatar>
|
|
<p class="username">白盐浊泉</p>
|
|
<n-dropdown :options="options" @select="handleSelect">
|
|
<n-icon :size="16" color="#000" style="cursor: pointer;">
|
|
<CaretDownOutline />
|
|
</n-icon>
|
|
</n-dropdown>
|
|
</div>
|
|
</div>
|
|
</n-layout-header>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import { removeToken } from '@/utils/auth';
|
|
import { useAuth0 } from '@auth0/auth0-vue';
|
|
import {
|
|
Pencil as EditIcon,
|
|
LogOutOutline as LogoutIcon,
|
|
PersonCircleOutline as UserIcon,
|
|
CaretDownOutline
|
|
} from '@vicons/ionicons5';
|
|
import { NIcon } from 'naive-ui';
|
|
const { logout } = useAuth0();
|
|
const router = useRouter();
|
|
function renderIcon(icon: Component) {
|
|
return () => {
|
|
return h(NIcon, null, {
|
|
default: () => h(icon)
|
|
})
|
|
}
|
|
}
|
|
const options = [
|
|
{
|
|
label: '用户资料',
|
|
key: 'profile',
|
|
icon: renderIcon(UserIcon)
|
|
},
|
|
{
|
|
label: '编辑用户资料',
|
|
key: 'editProfile',
|
|
icon: renderIcon(EditIcon)
|
|
},
|
|
{
|
|
label: '退出登录',
|
|
key: 'logout',
|
|
icon: renderIcon(LogoutIcon)
|
|
}
|
|
];
|
|
|
|
const handleSelect = (key: string | number) => {
|
|
if (key === 'logout') {
|
|
removeToken()
|
|
logout({ logoutParams: { returnTo: window.location.origin } });
|
|
router.push('/');
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang='scss'>
|
|
.n-layout-header {
|
|
height: 60px;
|
|
padding: 0 20px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
// 右侧
|
|
.header-avatar {
|
|
&__info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
.username {
|
|
color: #606266;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |