银川 1.联调产品维护页面 2.添加IM即时通讯模块

gaoluyang

2026-06-29 27cd042df9aca0383a49f3514bc21958dd890912

 src/views/im/home/components/picker/group-member-picker-panel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,242 @@
<script lang="ts" setup>
import type { GroupMemberLite } from '../group'

import { computed, ref } from 'vue'

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

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

import { PagedScroller } from '..'
import { useSelectedItems } from '../../composables/useSelectedItems'
import { GroupMemberGrid, GroupMemberItem } from '../group'
import { UserAvatar } from '../user'

defineOptions({ name: 'ImGroupMemberPickerPanel' })

const props = withDefaults(
  defineProps<{
    /** ç¦ç”¨ userId：列表里展示置灰、不可勾选、不计入已选数 */
    disabledIds?: number[]
    /** éšè— userId：不展示（hide > locked > disabled） */
    hideIds?: number[]
    /** é”å®š userId：默认勾选、不可取消、计入已选数 */
    lockedIds?: number[]
    /** å·²é€‰æ•°ä¸Šé™ï¼›ä¸ä¼ æˆ– <=0 æ—¶ä¸é™ */
    maxSize?: number
    /** ç¾¤æˆå‘˜åˆ—表 */
    members: GroupMemberLite[]
    /** å·²é€‰åŒºå±•ç¤ºå½¢æ€ï¼šé»˜è®¤ list å¯¹é½å¾®ä¿¡æ–°è§†è§‰ */
    selectedDisplay?: 'grid' | 'list'
    /** å·²é€‰ userId（v-model）；按数组顺序即为点击顺序 */
    selectedIds: number[]
  }>(),
  {
    lockedIds: () => [],
    disabledIds: () => [],
    hideIds: () => [],
    maxSize: 0,
    selectedDisplay: 'list'
  }
)

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

const keyword = ref('')

/** userId â†’ member æ˜ å°„，已选反查 / ä¸‰æ€åˆ¤å®šå…±ç”¨ */
const byId = computed(() => {
  const map = new Map<number, GroupMemberLite>()
  for (const member of props.members) {
    map.set(member.userId, member)
  }
  return map
})

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、剔除已退群（DISABLE）、按关键字大小写无关过滤 */
const shownMembers = computed(() => {
  const keywordLower = keyword.value.trim().toLowerCase()
  return props.members.filter(
    (member) =>
      !hideSet.value.has(member.userId) &&
      member.status !== CommonStatusEnum.DISABLE &&
      (!keywordLower || member.showName.toLowerCase().includes(keywordLower))
  )
})

/** å·²é€‰æ•° + å·²é€‰æˆå‘˜åˆ—表：三态优先级 + é¡ºåºæ‹¼æŽ¥ç”± useSelectedItems ç»Ÿä¸€æ‰¿æ‹… */
const { selectedCount, selectedItems: selectedMembers } = useSelectedItems<GroupMemberLite>(
  () => props.selectedIds,
  () => props.lockedIds,
  () => props.disabledIds,
  () => props.hideIds,
  byId
)

/** æ˜¯å¦è¢«é”å®š */
function isLocked(member: GroupMemberLite): boolean {
  return lockedSet.value.has(member.userId)
}

/** æ˜¯å¦è¢«ç¦ç”¨ï¼šlocked / hide å·²è¢«å‰ç½®è¿‡æ»¤ï¼Œå‰©ä¸‹çš„才算 disabled */
function isDisabled(member: GroupMemberLite): boolean {
  return !lockedSet.value.has(member.userId) && disabledSet.value.has(member.userId)
}

/** æ˜¯å¦é€‰ä¸­ï¼šlocked è§†ä¸ºæ°¸è¿œé€‰ä¸­ */
function isSelected(member: GroupMemberLite): boolean {
  return selectedSet.value.has(member.userId)
}

/** åœ†å½¢å‹¾é€‰æŒ‡ç¤ºå™¨çš„ class */
function getCheckClass(member: GroupMemberLite): string {
  if (isLocked(member) || isSelected(member)) {
    return 'bg-[#07c160] border border-solid border-[#07c160]'
  }
  if (isDisabled(member)) {
    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(member: GroupMemberLite) {
  if (isLocked(member) || isDisabled(member)) {
    return
  }
  const next = [...props.selectedIds]
  const index = next.indexOf(member.userId)
  if (index === -1) {
    if (props.maxSize > 0 && selectedCount.value >= props.maxSize) {
      message.error(`最多选择 ${props.maxSize} ä½æˆå‘˜`)
      return
    }
    next.push(member.userId)
  } else {
    next.splice(index, 1)
  }
  emit('update:selectedIds', next)
}
</script>

<template>
  <!--
    ç¾¤æˆå‘˜é€‰æ‹©é¢æ¿ï¼šç”¨äºŽã€Œç§»é™¤æˆå‘˜ / è®¾ç½®ç®¡ç†å‘˜ / è½¬è®©ç¾¤ä¸» / ç¦è¨€æˆå‘˜ã€ç­‰åœºæ™¯
    - å·¦ï¼šæœç´¢ + ç¾¤æˆå‘˜åˆ—表（圆形勾选）
    - å³ï¼šå·²é€‰æ•°æ ‡é¢˜ + å·²é€‰æˆå‘˜ï¼ˆlist / grid ä¸¤ç§å½¢æ€å¯é…ï¼Œé»˜è®¤ list å¯¹é½å¾®ä¿¡æ–°è§†è§‰ï¼‰
    - Panel ä¸å¸¦ el-dialog å£³ï¼›dialog ç”±ä¸šåŠ¡å£³æŒæœ‰
    - ä¸‰æ€è¯­ä¹‰ï¼šhide > locked > disabled
  -->
  <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 :items="shownMembers" :page-size="30" item-key="userId">
          <template #default="{ item }">
            <GroupMemberItem
              :member="item as GroupMemberLite"
              :height="46"
              @click="handleToggle(item as GroupMemberLite)"
            >
              <span
                class="flex flex-shrink-0 justify-center items-center w-5 h-5 rounded-full transition-colors"
                :class="getCheckClass(item as GroupMemberLite)"
              >
                <Icon
                  v-if="isSelected(item as GroupMemberLite) || isLocked(item as GroupMemberLite)"
                  icon="ant-design:check-outlined"
                  :size="12"
                  color="#fff"
                />
              </span>
            </GroupMemberItem>
          </template>
        </PagedScroller>
      </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>

      <div class="flex-1">
        <!-- list å½¢æ€ï¼šçºµå‘行，每行带 Ã— ç§»é™¤ï¼ˆlocked ä¸æ¸²æŸ“ Ã—） -->
        <template v-if="selectedDisplay === 'list'">
          <div
            v-for="member in selectedMembers"
            :key="member.userId"
            class="flex gap-2.5 items-center px-4 py-2"
          >
            <UserAvatar
              :id="member.userId"
              :url="member.avatar"
              :name="member.nickname"
              :size="36"
              :clickable="false"
            />
            <span
              class="flex-1 min-w-0 overflow-hidden text-sm truncate text-[var(--ant-color-text)]"
            >
              {{ member.showName }}
            </span>
            <Icon
              v-if="!isLocked(member)"
              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(member)"
            />
          </div>
        </template>

        <!-- grid å½¢æ€ï¼šå®«æ ¼é¢„览；非 locked æˆå‘˜å³ä¸Šè§’叠加 Ã— ç§»é™¤ï¼ˆlocked ä¸æ¸²æŸ“） -->
        <div v-else class="flex flex-wrap p-2.5">
          <GroupMemberGrid
            v-for="member in selectedMembers"
            :key="member.userId"
            :member="member"
          >
            <Icon
              v-if="!isLocked(member)"
              icon="ant-design:close-circle-filled"
              :size="16"
              class="absolute top-0 right-0 cursor-pointer transition-colors text-[var(--ant-color-text-placeholder)] hover:text-[var(--ant-color-error)]"
              @click="handleToggle(member)"
            />
          </GroupMemberGrid>
        </div>

        <div
          v-if="selectedMembers.length === 0"
          class="py-10 text-13px text-center text-[var(--ant-color-text-disabled)]"
        >
          è¯·ä»Žå·¦ä¾§é€‰æ‹©æˆå‘˜
        </div>
      </div>
    </div>
  </div>
</template>