You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<script setup lang='ts'>
|
|
import { computed } from 'vue'
|
|
import { NAvatar } from 'naive-ui'
|
|
import { useUserStore } from '@/store'
|
|
import defaultAvatar from '@/assets/avatar.jpg'
|
|
import { isString } from '@/utils/is'
|
|
|
|
const userStore = useUserStore()
|
|
|
|
const userInfo = computed(() => userStore.userInfo)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center overflow-hidden">
|
|
<div class="w-10 h-10 overflow-hidden rounded-full shrink-0">
|
|
<template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
|
|
<NAvatar
|
|
size="large"
|
|
round
|
|
:src="userInfo.avatar"
|
|
:fallback-src="defaultAvatar"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
<NAvatar size="large" round :src="defaultAvatar" />
|
|
</template>
|
|
</div>
|
|
<div class="flex-1 min-w-0 ml-2">
|
|
<h2 class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
|
|
{{ userInfo.name ?? 'ChenZhaoYu' }}
|
|
</h2>
|
|
<p class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap">
|
|
<span
|
|
v-if="isString(userInfo.description) && userInfo.description !== ''"
|
|
v-html="userInfo.description"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|