| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <script lang="ts" setup> |
| | | import type { FriendLite } from '../../types' |
| | | |
| | | import { ref, toRef } from 'vue' |
| | | |
| | | import { IconifyIcon as Icon } from '#/packages/icons/src' |
| | | |
| | | import { FriendItem } from '../../components/friend' |
| | | import { useFriendBuckets } from '../../composables/useFriendBuckets' |
| | | |
| | | defineOptions({ name: 'ImContactFriendList' }) |
| | | |
| | | const props = defineProps<{ |
| | | activeId?: number |
| | | friends: FriendLite[] |
| | | keyword: string |
| | | }>() |
| | | |
| | | const emit = defineEmits<{ |
| | | chat: [friend: FriendLite] |
| | | delete: [friend: FriendLite] |
| | | select: [friend: FriendLite] |
| | | }>() |
| | | |
| | | const expanded = ref(true) |
| | | |
| | | const { filtered, buckets } = useFriendBuckets(toRef(props, 'friends'), toRef(props, 'keyword')) |
| | | </script> |
| | | |
| | | <template> |
| | | <!-- |
| | | éè®¯å½ - 好ååç» |
| | | - èªæ²»ï¼æå ç¶æ + å
³é®åè¿æ»¤ + 忝忡¶ æ¬ç»ä»¶å
éç¯ |
| | | - 忝忡¶ / æ¼é³æç´¢å§æ useFriendBucketsï¼ä¸éæ©ç±»å¼¹çª FriendPickerPanel å
±ç¨ä¸ä»½è§å |
| | | - é䏿ç±ç¶çº§ activeId éä¼ ï¼chat / delete éä¼ å°ç¶çº§èµ° store æ¹é |
| | | --> |
| | | <div> |
| | | <!-- æå åç»å¤´ï¼åå·å¯¹é½å¾®ä¿¡ PCï¼15pxï¼ï¼hover æµ
åºè²åé¦ --> |
| | | <div |
| | | class="flex gap-2 items-center px-3.5 py-2.5 cursor-pointer select-none text-15px text-[var(--ant-color-text)] hover:bg-[var(--ant-color-fill-secondary)]" |
| | | @click="expanded = !expanded" |
| | | > |
| | | <Icon :icon="expanded ? 'ep:caret-bottom' : 'ep:caret-right'" :size="14" /> |
| | | <span class="flex-1">好å</span> |
| | | <span class="text-sm text-[var(--ant-color-text-secondary)]">{{ filtered.length }}</span> |
| | | </div> |
| | | <div v-show="expanded"> |
| | | <template v-for="bucket in buckets" :key="bucket.letter"> |
| | | <!-- 忝忡¶ headerï¼æµ
åº + å°åå·ï¼ä½ä¸ºå¥½åå表å
é¨åé --> |
| | | <div |
| | | class="pt-1 pb-0.5 px-3.5 text-12px text-[var(--ant-color-text-secondary)] bg-[var(--ant-color-fill-tertiary)]" |
| | | > |
| | | {{ bucket.letter }} |
| | | </div> |
| | | <FriendItem |
| | | v-for="friend in bucket.list" |
| | | :key="friend.id" |
| | | :friend="friend" |
| | | :active="activeId === friend.id" |
| | | @click="emit('select', friend)" |
| | | @chat="emit('chat', $event)" |
| | | @delete="emit('delete', $event)" |
| | | /> |
| | | </template> |
| | | <div |
| | | v-if="filtered.length === 0" |
| | | class="py-3 text-12px text-center text-[var(--ant-color-text-disabled)]" |
| | | > |
| | | {{ keyword ? '没æå¹é
ç好å' : 'ææ å¥½å' }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |