From 787ccc59ba89bacc075562a161ecf02bc76ebadc Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 24 七月 2026 17:15:53 +0800
Subject: [PATCH] 银川 1.采购申请添加入库状态查询条件
---
src/views/im/home/components/card/card-bubble.vue | 68 ++++++++++++++++++++++++++++++++++
1 files changed, 68 insertions(+), 0 deletions(-)
diff --git a/src/views/im/home/components/card/card-bubble.vue b/src/views/im/home/components/card/card-bubble.vue
new file mode 100644
index 0000000..0fb56da
--- /dev/null
+++ b/src/views/im/home/components/card/card-bubble.vue
@@ -0,0 +1,68 @@
+<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<{
+ /** 鍚嶇墖鏁版嵁锛汣ardMessage锛堟帴鏀朵晶娑堟伅浣擄級鎴� 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>
--
Gitblit v1.9.3