72540884fa
- 更新布局组件(layouts/components/) * 优化设置抽屉组件(SettingDrawer.vue) * 完善头部通知组件(Notices.vue) * 改进用户中心组件(UserCenter.vue) * 优化标签栏组件(TabBar.vue) - 完善工具指令和Hooks * 更新复制指令(directives/copy.ts) * 优化标签滚动Hook(hooks/useTabScroll.ts) 提升用户界面交互体验
103 lines
2.1 KiB
Vue
103 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { useAuthStore } from '@/store'
|
|
import { renderIcon } from '@/utils/icon'
|
|
import { coiMsgBox } from '@/utils/coi'
|
|
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.userCenter'),
|
|
key: 'userCenter',
|
|
icon: () => h(IconUser),
|
|
},
|
|
{
|
|
type: 'divider',
|
|
key: 'd1',
|
|
},
|
|
{
|
|
label: 'Github',
|
|
key: 'guthub',
|
|
icon: () => h(IconGithub),
|
|
},
|
|
{
|
|
label: 'Gitee',
|
|
key: 'gitee',
|
|
icon: renderIcon('simple-icons:gitee'),
|
|
},
|
|
{
|
|
label: 'Docs',
|
|
key: 'docs',
|
|
icon: () => h(IconBookOpen),
|
|
},
|
|
{
|
|
type: 'divider',
|
|
key: 'd1',
|
|
},
|
|
{
|
|
label: t('app.loginOut'),
|
|
key: 'loginOut',
|
|
icon: () => h(IconLogout),
|
|
},
|
|
]
|
|
})
|
|
async function handleSelect(key: string | number) {
|
|
if (key === 'loginOut') {
|
|
try {
|
|
await coiMsgBox(
|
|
t('app.loginOutContent'),
|
|
t('app.loginOutTitle'),
|
|
t('common.confirm'),
|
|
t('common.cancel'),
|
|
'info',
|
|
)
|
|
logout()
|
|
}
|
|
catch {
|
|
// 用户取消操作，不需要处理
|
|
}
|
|
}
|
|
if (key === 'userCenter')
|
|
router.push('/userCenter')
|
|
|
|
if (key === 'guthub')
|
|
window.open('https://github.com/chansee97/nova-admin')
|
|
|
|
if (key === 'gitee')
|
|
window.open('https://gitee.com/chansee97/nova-admin')
|
|
|
|
if (key === 'docs')
|
|
window.open('https://nova-admin-docs.pages.dev/')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-dropdown
|
|
trigger="click"
|
|
:options="options"
|
|
@select="handleSelect"
|
|
>
|
|
<n-avatar
|
|
round
|
|
class="cursor-pointer"
|
|
:src="userInfo?.avatar"
|
|
>
|
|
<template #fallback>
|
|
<div class="wh-full flex-center">
|
|
<icon-park-outline-user />
|
|
</div>
|
|
</template>
|
|
</n-avatar>
|
|
</n-dropdown>
|
|
</template>
|
|
|
|
<style scoped></style>
|