79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
<template>
|
|
<n-dropdown
|
|
trigger="click"
|
|
:options="userMenuOptions"
|
|
@select="handleUserMenuSelect"
|
|
>
|
|
<n-button quaternary>
|
|
<n-avatar
|
|
round
|
|
size="small"
|
|
:src="user?.avatar"
|
|
>
|
|
{{ user?.username?.charAt(0).toUpperCase() }}
|
|
</n-avatar>
|
|
<span class="username">{{ user?.username }}</span>
|
|
<Icon icon="tabler:chevron-down" />
|
|
</n-button>
|
|
</n-dropdown>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, h } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { NButton, NDropdown, NAvatar, useMessage } from 'naive-ui'
|
|
import { Icon } from '@iconify/vue'
|
|
import { useAuthStore } from '../stores/auth'
|
|
import { t } from '../i18n'
|
|
|
|
const router = useRouter()
|
|
const message = useMessage()
|
|
const authStore = useAuthStore()
|
|
|
|
const user = computed(() => authStore.user)
|
|
|
|
const userMenuOptions = computed(() => {
|
|
const options: any[] = [
|
|
{
|
|
label: t('Settings'),
|
|
key: 'settings',
|
|
icon: () => h(Icon, { icon: 'tabler:settings' })
|
|
},
|
|
{
|
|
type: 'divider'
|
|
},
|
|
{
|
|
label: t('Logout'),
|
|
key: 'logout',
|
|
icon: () => h(Icon, { icon: 'tabler:logout' })
|
|
}
|
|
]
|
|
|
|
return options
|
|
})
|
|
|
|
const handleUserMenuSelect = async (key: string) => {
|
|
if (key === 'logout') {
|
|
await authStore.logout()
|
|
// logout 函数内部已经处理了跳转，不需要再次跳转
|
|
} else if (key === 'settings') {
|
|
router.push({ name: 'Settings' })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.username {
|
|
margin-left: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 移动端隐藏用户名文字 */
|
|
@media (max-width: 768px) {
|
|
.username {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|