mom-pro2-before.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,79 @@
			<script lang="ts" setup>
			import type { FriendLite } from '../../types'

			import { useImUiStore } from '../../store/uiStore'
			import { UserAvatar } from '../user'

			defineOptions({ name: 'ImFriendItem' })

			const props = withDefaults(
			defineProps<{
			active?: boolean
			friend: FriendLite
			menu?: boolean // æ¯å¦å¯ç¨å³é®èåï¼å¨éæ©å¨å¼¹çªéä¸è¬å³é
			}>(),
			{
			active: false,
			menu: true
			}
			)

			const emit = defineEmits<{
			chat: [friend: FriendLite]
			click: [friend: FriendLite]
			delete: [friend: FriendLite]
			}>()

			const uiStore = useImUiStore()

			/** å³é®èåï¼åéæ¶æ¯ / å é¤å¥½å */
			function handleContextMenu(event: MouseEvent) {
			if (!props.menu) {
			return
			}
			uiStore.openContextMenu(
			{ x: event.clientX, y: event.clientY },
			[
			{ key: 'chat', name: 'åéæ¶æ¯' },
			{ key: 'delete', name: 'å é¤å¥½å' }
			],
			(item) => {
			if (item.key === 'chat') emit('chat', props.friend)
			else if (item.key === 'delete') emit('delete', props.friend)
			}
			)
			}
			</script>

			<template>
			<!--
			å¥½ååè¡é¡¹
			- å¤´å + æµç§°
			- éä¸æ active
			- å³é®èåï¼åæ¶æ¯ / å é¤å¥½åï¼ç±å¨å± ContextMenu æ¿æ¥
			-->
			<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', friend)"
			@contextmenu.prevent="handleContextMenu"
			>
			<!-- prefix slotï¼æ¾å¨å¤´ååï¼ç»éæ©ç±»å¼¹çªç checkbox / åç¹ç¨ï¼ä¸ä¼ åä¸æ¸²æ -->
			<slot name="prefix"></slot>
			<!-- å¤´å -->
			<UserAvatar
			:id="friend.id"
			:url="friend.avatar"
			:name="friend.nickname"
			:size="42"
			:clickable="false"
			/>
			<!-- åè¡å±ç¤º displayName ä¼åï¼æµç§°ä»å¨å¥½åè¯¦æé¢æ¿å±ç¤ºï¼åè¡¨éä¸éå¤ -->
			<div class="flex flex-1 min-w-0">
			<div class="overflow-hidden text-sm truncate text-[var(--ant-color-text)]">
			{{ friend.displayName \|\| friend.nickname }}
			</div>
			</div>
			<slot></slot>
			</div>
			</template>