<template> <n-dropdown trigger="hover" @select="handleSelect" :show-arrow="true" :options="options" > <div class="user-info-box"> <PersonIcon v-if="fallback" /> <n-avatar v-if="!fallback" round object-fit="cover" size="medium" :src="imageUrl" @error="errorHandle" /> </div> </n-dropdown> <!-- 系统设置 model --> <SystemSet v-model:modelShow="modelShow" /> </template> <script lang="ts" setup> import { h, ref, watchEffect } from 'vue' import { NAvatar, NText } from 'naive-ui' import { renderIcon } from '@/utils' import { openDoc, logout } from '@/utils' import { SystemSet } from './components/SystemSet/index' import { icon } from '@/plugins' const { DocumentTextIcon, ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5 const t = window['$t'] const modelShow = ref(false) const imageUrl = 'https://www.naiveui.com/assets/naivelogo.93278402.svg' // 是否失败 const fallback = ref(false) // 用户图标渲染 const renderUserInfo = () => { return h( 'div', { style: 'display: flex; align-items: center; padding: 8px 12px;' }, [ h(NAvatar, { round: true, style: 'margin-right: 12px;', src: imageUrl }), h('div', null, [ h('div', null, [ h(NText, { depth: 2 }, { default: () => '奔跑的面条' }) ]) ]) ] ) } const options = ref() const init = (doc: string, contact: string, sysSet: string, logout: string) => [ { label: '我的信息', key: 'info', type: 'render', render: renderUserInfo }, { type: 'divider', key: 'd1' }, { label: doc, key: 'doc', icon: renderIcon(DocumentTextIcon) }, { label: contact, key: 'contact', icon: renderIcon(ChatboxEllipsesIcon) }, { label: sysSet, key: 'sysSet', icon: renderIcon(SettingsSharpIcon) }, { type: 'divider', key: 'd3' }, { label: logout, key: 'logout', icon: renderIcon(LogOutOutlineIcon) } ] watchEffect(() => { options.value = init( t('global.doc'), t('global.contact'), t('global.sys_set'), t('global.logout') ) }) // 图片渲染错误 const errorHandle = (e: Event) => { fallback.value = true } // 系统设置 const sysSetHandle = () => { modelShow.value = true } const handleSelect = (key: string) => { switch (key) { case 'doc': openDoc() break case 'contact': openDoc() break case 'sysSet': sysSetHandle() break case 'logout': logout() break } } </script> <style lang="scss" scoped> .user-info-box { cursor: pointer; transform: scale(0.7); } </style>