mom-pro2-before.git

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

			import { computed, ref } from 'vue'

			import { IconifyIcon as Icon } from '#/packages/icons/src'

			import { Input, message } from 'ant-design-vue'

			import { PagedScroller } from '..'
			import { useFriendBuckets } from '../../composables/useFriendBuckets'
			import { useSelectedItems } from '../../composables/useSelectedItems'
			import { UserAvatar } from '../user'

			defineOptions({ name: 'ImFriendPickerPanel' })

			const props = withDefaults(
			defineProps<{
			/** ç¦ç¨ idï¼åè¡¨éå±ç¤ºç½®ç°ãä¸å¯å¾éãä¸è®¡å¥å·²éæ°ï¼å¸åï¼éè¯·å¥ç¾¤æ¶å·²å¨ç¾¤æåï¼ */
			disabledIds?: number[]
			/** å¨éå¥½ååè¡¨ */
			friends: FriendLite[]
			/** éè idï¼ä¸å±ç¤ºï¼hide > locked > disabledï¼ */
			hideIds?: number[]
			/** éå® idï¼é»è®¤å¾éãä¸å¯åæ¶ãè®¡å¥å·²éæ°ï¼å¸åï¼ç§èä¾§ +å»ºç¾¤éå®å¯¹æ¹ï¼ */
			lockedIds?: number[]
			/** å·²éæ°ä¸éï¼ä¸ä¼ æ <=0 æ¶ä¸é */
			maxSize?: number
			/** å·²éå¥½å idï¼v-modelï¼ï¼ææ°ç»é¡ºåºå³ä¸ºç¹å»é¡ºåº */
			selectedIds: number[]
			}>(),
			{
			lockedIds: () => [],
			disabledIds: () => [],
			hideIds: () => [],
			maxSize: 0
			}
			)

			const emit = defineEmits<{
			'update:selectedIds': [value: number[]]
			}>()

			const keyword = ref('')

			/** id â friend æ å°ï¼å·²éåæ¥ / ä¸æå¤å®å±ç¨ï¼é¿åæ¯æ¬¡ O(N) æ« */
			const byId = computed(() => {
			const map = new Map<number, FriendLite>()
			for (const friend of props.friends) {
			map.set(friend.id, friend)
			}
			return map
			})

			/** ä¸æ id éåï¼æ¯æ¬¡è¿æ»¤å¤ç¨ */
			const hideSet = computed(() => new Set(props.hideIds))
			const lockedSet = computed(() => new Set(props.lockedIds))
			const disabledSet = computed(() => new Set(props.disabledIds))
			const selectedSet = computed(() => new Set(props.selectedIds))

			/** åéå¥½åï¼åé¤ hideIdsï¼hide ä¼åçº§æé«ï¼ */
			const candidates = computed(() =>
			props.friends.filter((friend) => !hideSet.value.has(friend.id))
			)

			/** å§æ useFriendBucketsï¼æç´¢è§åå¤ç¨ï¼å·¦ä¾§åè¡¨ææ»å¨åé¡µæ¸²æ */
			const { filtered } = useFriendBuckets(candidates, keyword)

			/** å·²éæ° + å·²éå¥½ååè¡¨ï¼ä¸æä¼åçº§ + é¡ºåºæ¼æ¥ç± useSelectedItems ç»ä¸æ¿æ */
			const { selectedCount, selectedItems: selectedFriends } = useSelectedItems<FriendLite>(
			() => props.selectedIds,
			() => props.lockedIds,
			() => props.disabledIds,
			() => props.hideIds,
			byId
			)

			/** æ¯å¦è¢«éå® */
			function isLocked(friend: FriendLite): boolean {
			return lockedSet.value.has(friend.id)
			}

			/** æ¯å¦è¢«ç¦ç¨ï¼locked / hide å·²è¢«åç½®è¿æ»¤ï¼å©ä¸çæç® disabled */
			function isDisabled(friend: FriendLite): boolean {
			return !lockedSet.value.has(friend.id) && disabledSet.value.has(friend.id)
			}

			/** æ¯å¦éä¸ï¼locked è§ä¸ºæ°¸è¿éä¸ */
			function isSelected(friend: FriendLite): boolean {
			return selectedSet.value.has(friend.id)
			}

			/** åå½¢å¾éæç¤ºå¨ç classï¼éä¸ / éå®èµ°ç»¿åºï¼ç¦ç¨ç°åºï¼æªéç©ºå¿å */
			function getCheckClass(friend: FriendLite): string {
			if (isLocked(friend) \|\| isSelected(friend)) {
			return 'bg-[#07c160] border border-solid border-[#07c160]'
			}
			if (isDisabled(friend)) {
			return 'bg-[var(--ant-color-fill)] border border-solid border-[var(--ant-color-border)]'
			}
			return 'border border-solid border-[var(--ant-color-border)] bg-[var(--ant-color-bg-container)]'
			}

			/** åæ¢éä¸æï¼locked / disabled ä¸ååºï¼å³æ Ã ç§»é¤ / è¡ click é½èµ°è¿é */
			function handleToggle(friend: FriendLite) {
			if (isLocked(friend) \|\| isDisabled(friend)) {
			return
			}
			const next = [...props.selectedIds]
			const index = next.indexOf(friend.id)
			if (index === -1) {
			if (props.maxSize > 0 && selectedCount.value >= props.maxSize) {
			message.error(`æå¤éæ© ${props.maxSize} ä½å¥½å`)
			return
			}
			next.push(friend.id)
			} else {
			next.splice(index, 1)
			}
			emit('update:selectedIds', next)
			}
			</script>

			<template>
			<!--
			å¥½åéæ©é¢æ¿ï¼ç¨äºãæ°å»ºç¾¤è / éè¯·å¥½å / æ¨èæ¶åå»ºèå¤©ãçå¥½åéæ©åºæ¯
			- å·¦ï¼æç´¢ + å¥½ååè¡¨ï¼åå½¢å¾éï¼
			- å³ï¼å·²éæ°æ é¢ + å·²éå¥½ååè¡¨ï¼æç¹å»é¡ºåºï¼
			- Panel ä¸å¸¦ el-dialog å£³ï¼dialog ç±ä¸å¡å£³ææ
			- ä¸æè¯ä¹ï¼hide > locked > disabledï¼è¯¦è§ contractï¼
			-->
			<div class="flex h-full">
			<!-- å·¦æ -->
			<div
			class="flex flex-col flex-1 min-w-0 border-r border-r-solid border-[var(--ant-color-border-secondary)] bg-[var(--ant-color-fill-secondary)]"
			>
			<!-- æç´¢æ¡ -->
			<div class="flex-shrink-0 px-3 py-2">
			<Input v-model:value="keyword" placeholder="æç´¢å¥½å" allow-clear>
			<template #prefix>
			<Icon icon="ant-design:search-outlined" />
			</template>
			</Input>
			</div>

			<div class="flex-1 min-h-0">
			<PagedScroller v-if="filtered.length > 0" :items="filtered" :page-size="30" item-key="id">
			<template #default="{ item }">
			<div
			:key="(item as FriendLite).id"
			class="flex gap-2.5 items-center px-3 py-2 cursor-pointer hover:bg-[var(--ant-color-fill)]"
			:class="{
			'opacity-60 cursor-not-allowed hover:bg-transparent': isDisabled(item as FriendLite)
			}"
			@click="handleToggle(item as FriendLite)"
			>
			<!-- åå½¢å¾éæç¤ºå¨ï¼æªéç°è²ç©ºå¿åï¼éä¸å®å¿å¾®ä¿¡ç»¿ + ç½å¯¹å¾ï¼éå® / ç¦ç¨èµ°ç°åº -->
			<span
			class="flex flex-shrink-0 justify-center items-center w-5 h-5 rounded-full transition-colors"
			:class="getCheckClass(item as FriendLite)"
			>
			<Icon
			v-if="isSelected(item as FriendLite) \|\| isLocked(item as FriendLite)"
			icon="ant-design:check-outlined"
			:size="12"
			color="#fff"
			/>
			</span>
			<UserAvatar
			:id="(item as FriendLite).id"
			:url="(item as FriendLite).avatar"
			:name="(item as FriendLite).nickname"
			:size="36"
			:clickable="false"
			/>
			<!-- è¡åååï¼å¤æ³¨ä¼åï¼åè¡¨éä¸éå¤å±ç¤ºæµç§° -->
			<span
			class="flex-1 min-w-0 overflow-hidden text-sm truncate text-[var(--ant-color-text)]"
			>
			{{ (item as FriendLite).displayName \|\| (item as FriendLite).nickname }}
			</span>
			</div>
			</template>
			</PagedScroller>
			<div v-else class="py-10 text-13px text-center text-[var(--ant-color-text-disabled)]">
			{{ keyword ? 'æ²¡æå¹éçå¥½å' : 'ææ å¥½å' }}
			</div>
			</div>
			</div>

			<!-- å³æ -->
			<div class="flex flex-col flex-1 min-w-0">
			<!-- æ é¢ï¼å·²éæ°ï¼é«åº¦å¯¹é½å·¦ä¾§ input defaultï¼32pxï¼ï¼ä¿è¯ä¸¤ä¾§ç¬¬ä¸é¡¹èµ·ç¹åæ°´å¹³ -->
			<div
			class="flex-shrink-0 h-12 px-4 leading-[3rem] border-b border-b-solid text-13px text-[var(--ant-color-text-secondary)] border-[var(--ant-color-border-secondary)]"
			>
			å·²éæ© {{ selectedCount }} ä¸ªå¥½å
			</div>

			<!-- å·²éé¢è§ï¼æ selectedIds + lockedIds æ°ç»é¡ºåºï¼ç¹å»é¡ºåºï¼å±ç¤º -->
			<div class="flex-1">
			<div
			v-for="friend in selectedFriends"
			:key="friend.id"
			class="flex gap-2.5 items-center px-4 py-2"
			>
			<UserAvatar
			:id="friend.id"
			:url="friend.avatar"
			:name="friend.nickname"
			:size="36"
			:clickable="false"
			/>
			<span
			class="flex-1 min-w-0 overflow-hidden text-sm truncate text-[var(--ant-color-text)]"
			>
			{{ friend.displayName \|\| friend.nickname }}
			</span>
			<!-- éå®é¡¹ä¸æ¸²æ Ãï¼é¿åè¯¯ä»¥ä¸ºå¯ç§»é¤ -->
			<Icon
			v-if="!isLocked(friend)"
			icon="ant-design:close-outlined"
			:size="14"
			class="flex-shrink-0 cursor-pointer transition-colors text-[var(--ant-color-text-placeholder)] hover:text-[var(--ant-color-error)]"
			@click="handleToggle(friend)"
			/>
			</div>
			<div
			v-if="selectedFriends.length === 0"
			class="py-10 text-13px text-center text-[var(--ant-color-text-disabled)]"
			>
			è¯·ä»å·¦ä¾§éæ©å¥½å
			</div>
			</div>

			<!-- ä¸å¡å£³å¡é¢å¤åå®¹çä½ç½®ï¼FriendPickerPanel ä¸»æµåºæ¯ä¸éè¦ footer -->
			<div
			v-if="$slots.footer"
			class="flex-shrink-0 border-t border-t-solid border-[var(--ant-color-border-secondary)]"
			>
			<slot name="footer"></slot>
			</div>
			</div>
			</div>
			</template>