125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<n-layout-header bordered>
|
||
|
|
<div class="header-icon">
|
||
|
|
<img src="/logo.jpg">
|
||
|
|
<div class="header-icon__text">
|
||
|
|
<p class="cn">零枢</p>
|
||
|
|
<p class="en">ZeroNode</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<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 { 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'){
|
||
|
|
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-icon {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 100%;
|
||
|
|
gap: 12px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
height: 45px;
|
||
|
|
width: 45px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__text {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 45px;
|
||
|
|
|
||
|
|
.cn {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.en {
|
||
|
|
color: $primaryColor;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 右侧
|
||
|
|
.header-avatar {
|
||
|
|
&__info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
|
||
|
|
.username {
|
||
|
|
color: #606266;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|