7 天以前 91c82965b2d987452ca276e3a03b48c8dcda2ae9
src/views/im/home/pages/contact/friend-list.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,73 @@
<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>