69 lines
2.3 KiB
Vue
69 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
||
import { computed } from 'vue'
|
||
|
||
import { isPrivateConversation } from '#/views/im/utils/constants'
|
||
import {
|
||
type CardMessage,
|
||
type CardTarget,
|
||
getCardLabelInfo
|
||
} from '#/views/im/utils/message'
|
||
|
||
import { UserAvatar } from '../user'
|
||
|
||
defineOptions({ name: 'ImCardBubble' })
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
/** 名片数据；CardMessage（接收侧消息体）或 CardTarget（发送侧预览）共用结构 */
|
||
card: CardMessage | CardTarget
|
||
/** 是否显示 cursor: pointer；调用方负责绑 @click 监听 */
|
||
clickable?: boolean
|
||
}>(),
|
||
{ clickable: false }
|
||
)
|
||
|
||
/** 是否用户名片：决定 UserAvatar 是否带 id 触发 UserInfoCard */
|
||
const isUser = computed(() => isPrivateConversation(props.card.targetType))
|
||
/** 名片标签信息 */
|
||
const labelInfo = computed(() => getCardLabelInfo(props.card))
|
||
</script>
|
||
|
||
<template>
|
||
<!--
|
||
名片消息气泡 / 名片预览卡（240px）：用户名片 + 群名片通用
|
||
- 头像 + 名字 + 群成员数副标题（仅群名片）+ 底部分隔条「群名片 / 个人名片」
|
||
- 用户名片把 :id 传给 UserAvatar 让点击 avatar 弹 UserInfoCard；群名片不传 id
|
||
- 整卡 click 由调用方监听（@click），组件不内嵌业务逻辑
|
||
-->
|
||
<div
|
||
class="flex flex-col w-[240px] rounded-md overflow-hidden bg-[var(--ant-color-bg-container)] border border-solid border-[var(--im-border-color-lighter)]"
|
||
:class="{ 'cursor-pointer': clickable }"
|
||
>
|
||
<div class="flex gap-2.5 items-center px-3 py-2.5">
|
||
<UserAvatar
|
||
:id="isUser ? card.targetId : undefined"
|
||
:url="card.avatar"
|
||
:name="card.name"
|
||
:size="40"
|
||
:clickable="false"
|
||
/>
|
||
<div class="flex flex-col flex-1 min-w-0">
|
||
<div class="text-sm font-medium truncate text-[var(--ant-color-text)]">
|
||
{{ card.name }}
|
||
</div>
|
||
<div
|
||
v-if="!isUser && card.memberCount"
|
||
class="text-12px truncate text-[var(--ant-color-text-placeholder)]"
|
||
>
|
||
{{ card.memberCount }} 人群聊
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="px-3 py-1 text-12px border-t border-t-solid text-[var(--ant-color-text-placeholder)] border-[var(--im-border-color-lighter)] bg-[var(--ant-color-fill-tertiary)]"
|
||
>
|
||
{{ labelInfo.label }}
|
||
</div>
|
||
</div>
|
||
</template>
|