82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div :class="cardClass" @click="handleClick">
|
||
|
|
<img :src="user.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" :alt="user.username" class="user-avatar" />
|
||
|
|
<div class="user-info">
|
||
|
|
<h4 class="user-name">{{ user.nickname || user.username }}</h4>
|
||
|
|
<p class="user-role">{{ roleText }}</p>
|
||
|
|
<div class="user-badges">
|
||
|
|
<el-tag v-if="user.isMember" type="primary" size="small">会员</el-tag>
|
||
|
|
<el-tag v-if="user.isOnline" type="success" size="small">在线</el-tag>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import type { UserInfo } from '@/types/user'
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
user: UserInfo
|
||
|
|
clickable?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
clickable: false
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
click: [user: UserInfo]
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const roleText = computed(() => {
|
||
|
|
const roleMap: Record<string, string> = {
|
||
|
|
owner: '组长',
|
||
|
|
admin: '管理员',
|
||
|
|
member: '成员'
|
||
|
|
}
|
||
|
|
return roleMap[props.user.role || ''] || '成员'
|
||
|
|
})
|
||
|
|
|
||
|
|
const cardClass = computed(() => [
|
||
|
|
'user-card',
|
||
|
|
{ 'is-clickable': props.clickable }
|
||
|
|
])
|
||
|
|
|
||
|
|
const handleClick = () => {
|
||
|
|
if (props.clickable) {
|
||
|
|
emit('click', props.user)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.user-card {
|
||
|
|
@apply flex gap-3 p-4 bg-white rounded-xl transition-all duration-200;
|
||
|
|
|
||
|
|
&.is-clickable {
|
||
|
|
@apply cursor-pointer;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
@apply shadow-lg -translate-y-0.5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-avatar {
|
||
|
|
@apply w-14 h-14 rounded-full object-cover border-2 border-primary-200;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-name {
|
||
|
|
@apply text-base font-semibold text-gray-900;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-role {
|
||
|
|
@apply text-sm text-gray-500 mt-1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-badges {
|
||
|
|
@apply flex gap-2 mt-2;
|
||
|
|
}
|
||
|
|
</style>
|