| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <script lang="ts" setup> |
|---|
| | | import type { GroupLite } from '../../types' |
|---|
| | | |
|---|
| | | import GroupAvatar from './group-avatar.vue' |
|---|
| | | |
|---|
| | | defineOptions({ name: 'ImGroupItem' }) |
|---|
| | | |
|---|
| | | defineProps<{ |
|---|
| | | active?: boolean |
|---|
| | | group: GroupLite |
|---|
| | | }>() |
|---|
| | | |
|---|
| | | defineEmits<{ |
|---|
| | | click: [group: GroupLite] |
|---|
| | | }>() |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <!-- |
|---|
| | | 群åè¡é¡¹ |
|---|
| | | - 头å + 群å |
|---|
| | | - éä¸æ active |
|---|
| | | --> |
|---|
| | | <div |
|---|
| | | class="relative flex items-center gap-2.5 px-4 py-3 cursor-pointer transition-colors hover:bg-[var(--ant-color-fill)]" |
|---|
| | | :class="{ '!bg-[#d9ecff] dark:!bg-[var(--ant-color-primary-bg-hover)]': active }" |
|---|
| | | @click="$emit('click', group)" |
|---|
| | | > |
|---|
| | | <GroupAvatar |
|---|
| | | :group-id="group.id" |
|---|
| | | :url="group.showImage || group.showImageThumb" |
|---|
| | | :name="group.showGroupName || group.name" |
|---|
| | | :size="42" |
|---|
| | | /> |
|---|
| | | <div class="flex flex-1 min-w-0"> |
|---|
| | | <!-- åè¡å±ç¤ºç¾¤åï¼æåæ°ä»
å¨ç¾¤è¯¦æ
é¢æ¿å±ç¤ºï¼å表éä¸éå¤ --> |
|---|
| | | <div class="overflow-hidden text-sm truncate text-[var(--ant-color-text)]"> |
|---|
| | | {{ group.showGroupName || group.name }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <slot></slot> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
