From 27cd042df9aca0383a49f3514bc21958dd890912 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 29 六月 2026 15:42:23 +0800
Subject: [PATCH] 银川 1.联调产品维护页面 2.添加IM即时通讯模块
---
src/views/im/home/components/group/group-member-item.vue | 84 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 84 insertions(+), 0 deletions(-)
diff --git a/src/views/im/home/components/group/group-member-item.vue b/src/views/im/home/components/group/group-member-item.vue
new file mode 100644
index 0000000..23085c1
--- /dev/null
+++ b/src/views/im/home/components/group/group-member-item.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { GroupMemberLite } from './group-member.vue'
+
+import { computed } from 'vue'
+
+import { DICT_TYPE } from '#/packages/constants/src'
+import { getDictLabel } from '#/packages/effects/hooks/src'
+
+import { ImGroupMemberRole } from '../../../utils/constants'
+import { UserAvatar } from '../user'
+
+defineOptions({ name: 'ImGroupMemberItem' })
+
+const props = withDefaults(
+ defineProps<{
+ active?: boolean
+ height?: number
+ member: GroupMemberLite
+ }>(),
+ {
+ height: 50,
+ active: false
+ }
+)
+
+defineEmits<{
+ click: [member: GroupMemberLite]
+}>()
+
+const avatarSize = computed(() => Math.ceil(props.height * 0.75))
+
+/** 瑙掕壊鏍囩鏂囨锛氭櫘閫氭垚鍛樹笉鏄剧ず锛屽叾浣欏彇 im_group_member_role 瀛楀吀 label */
+const roleLabel = computed(() => {
+ if (props.member.role == null || props.member.role === ImGroupMemberRole.NORMAL) {
+ return ''
+ }
+ return getDictLabel(DICT_TYPE.IM_GROUP_MEMBER_ROLE, props.member.role)
+})
+
+/** 瑙掕壊鏍囩鏍峰紡锛氱兢涓荤敤涓昏壊锛涚鐞嗗憳鐢ㄦ瑕佽壊 */
+const roleLabelClass = computed(() => {
+ if (props.member.role === ImGroupMemberRole.OWNER) {
+ return 'text-[var(--ant-color-primary)] bg-[var(--ant-color-primary-bg)]'
+ }
+ return 'text-[var(--ant-color-info)] bg-[var(--ant-color-fill)]'
+})
+</script>
+
+<template>
+ <!--
+ 缇ゆ垚鍛樿褰㈡��
+ - 妯帓銆佸甫 hover 鎬侊紱slot 鏀� checkbox / 鎿嶄綔鎸夐挳绛�
+ - 涓� GroupMember 鐨勫樊鍒細甯� hover 鎬� + slot 鎵╁睍鐐癸紝閫傚悎 selector / admin 鍒楄〃
+ -->
+ <div
+ class="relative flex gap-2.5 items-center mx-px px-4 box-border whitespace-nowrap rounded cursor-pointer transition-colors hover:bg-[var(--ant-color-fill)]"
+ :class="{ '!bg-[#e1eaf7] dark:!bg-[var(--ant-color-primary-bg-hover)]': active }"
+ :style="{ height: `${height }px` }"
+ @click="$emit('click', member)"
+ >
+ <UserAvatar
+ :id="member.userId"
+ :url="member.avatar"
+ :name="member.nickname"
+ :size="avatarSize"
+ :clickable="false"
+ />
+ <div
+ class="flex-1 h-full pl-1 overflow-hidden text-sm truncate text-[var(--ant-color-text)]"
+ :style="{ lineHeight: `${height }px` }"
+ >
+ {{ member.showName }}
+ </div>
+ <!-- 瑙掕壊鏍囩锛氱兢涓� / 绠＄悊鍛橈紱鏅�氭垚鍛樹笉鏄剧ず銆備粎鍦ㄤ紶鍏� member.role 鏃剁敓鏁� -->
+ <span
+ v-if="roleLabel"
+ class="px-1.5 py-px rounded text-xs whitespace-nowrap"
+ :class="roleLabelClass"
+ >
+ {{ roleLabel }}
+ </span>
+ <slot></slot>
+ </div>
+</template>
--
Gitblit v1.9.3