<script setup lang="ts">
|
import { useAuthStore } from '@/store'
|
import { renderIcon } from '@/utils/icon'
|
import IconBookOpen from '~icons/icon-park-outline/book-open'
|
import IconGithub from '~icons/icon-park-outline/github'
|
import IconLogout from '~icons/icon-park-outline/logout'
|
import IconUser from '~icons/icon-park-outline/user'
|
|
const { t } = useI18n()
|
|
const { userInfo, logout } = useAuthStore()
|
const router = useRouter()
|
|
const options = computed(() => {
|
return [
|
{
|
label: t('app.loginOut'),
|
key: 'loginOut',
|
icon: () => h(IconLogout),
|
},
|
]
|
})
|
function handleSelect(key: string | number) {
|
if (key === 'loginOut') {
|
window.$dialog?.info({
|
title: t('app.loginOutTitle'),
|
content: t('app.loginOutContent'),
|
positiveText: t('common.confirm'),
|
negativeText: t('common.cancel'),
|
onPositiveClick: () => {
|
logout()
|
},
|
})
|
}
|
}
|
</script>
|
|
<template>
|
<n-dropdown
|
trigger="click"
|
:options="options"
|
@select="handleSelect"
|
>
|
<n-avatar
|
round
|
class="cursor-pointer w-[24px] h-[24px]"
|
:src="userInfo?.avatar"
|
>
|
<!-- 无 avatar 时:走默认插槽 -->
|
<div class="wh-full flex-center">
|
<icon-park-outline-user />
|
</div>
|
<!-- avatar 加载失败时:走 fallback 插槽 -->
|
<template #fallback>
|
<div class="wh-full flex-center">
|
<icon-park-outline-user />
|
</div>
|
</template>
|
</n-avatar>
|
</n-dropdown>
|
</template>
|
|
<style scoped></style>
|
