Merge remote-tracking branch 'origin/dev_pro2.0' into dev_pro2.0

gaoluyang

4 小时以前 cb9cd49627b65a4c0e137e08063271a8cefe1826

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,64 @@
<script lang="ts" setup>
import { computed } from 'vue'

import { ImFriendAddSource } from '../../../utils/constants'
import { UserAvatar } from '../user'

defineOptions({ name: 'ImGroupMember' })

const props = withDefaults(
  defineProps<{
    active?: boolean // é€‰ä¸­æ€ï¼ˆ@候选键盘高亮等）
    clickable?: boolean // å¤´åƒç‚¹å‡»æ˜¯å¦å¼¹ UserInfoCard；@候选场景通常禁用（避免嵌套交互）
    groupName?: string // ç¾¤åï¼šåŠ å¥½å‹æ—¶æ‹¼ã€Œæˆ‘是 'XX ç¾¤' çš„ YY」话术，落库 add_source=GROUP
    height?: number // è¡Œé«˜ï¼ˆpx），影响头像大小
    member: GroupMemberLite
  }>(),
  {
    height: 50,
    active: false,
    clickable: false,
    groupName: ''
  }
)

/** ç¾¤æˆå‘˜ç»“构（跨多处使用，放这里做窄接口；独立于 types/index.ts） */
export interface GroupMemberLite {
  userId: number // ç”¨æˆ·ç¼–号；特殊值见 IM_AT_ALL_USER_ID（@ å…¨ä½“成员）
  nickname: string // çœŸå®žæ˜µç§°ï¼šæ°¸è¿œæ˜¯ç”¨æˆ·çš„ nickname，专给 UserAvatar è‰²å¡ç”¨ï¼Œä¿è¯åŒä¸€ä¸ªäººè‰²å¡é¦–字母在所有界面一致
  showName: string // å±•ç¤ºæ˜µç§°ï¼šå¥½å‹å¤‡æ³¨ > ç”¨æˆ·ç¾¤å¤‡æ³¨ï¼ˆdisplayUserName） > çœŸå®žæ˜µç§°ï¼ˆnickname），给"显示给用户看"的位置用（行内文字、@候选标签等）
  avatar?: string
  status?: number
  role?: number // æˆå‘˜è§’色，仅在群信息抽屉等需要展示角色标签的场景透传；@候选 / å·²è¯»åˆ—表等场景可不传
}

const avatarSize = computed(() => Math.ceil(props.height * 0.75))
</script>

<template>
  <!--
    ç¾¤æˆå‘˜å•è¡Œ
    è·¨å­åŸŸå¤ç”¨ï¼š@候选 (MentionPicker) / å·²è¯»åˆ—表 (MessageReadStatus) / ç¾¤æˆå‘˜å®«æ ¼ (ConversationGroupSide)
  -->
  <div
    class="relative flex items-center px-[5px] box-border whitespace-nowrap"
    :class="{ 'bg-[#e1eaf7] dark:bg-[var(--ant-color-primary-bg)]': active }"
    :style="{ height: `${height }px` }"
  >
    <UserAvatar
      :size="avatarSize"
      :name="member.nickname"
      :url="member.avatar"
      :clickable="clickable"
      :id="member.userId"
      :add-source="ImFriendAddSource.GROUP"
      :add-source-extra="groupName"
    />
    <div
      class="flex-1 h-full pl-2.5 overflow-hidden text-sm text-left truncate text-[var(--ant-color-text)]"
      :style="{ lineHeight: `${height }px` }"
    >
      {{ member.showName }}
    </div>
  </div>
</template>