From 210443c833b453319cddc782dda14e14ac261f65 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 19 Jun 2026 18:29:16 -0700
Subject: [PATCH] =?UTF-8?q?feat(im):=20=E4=BC=98=E5=8C=96=E5=85=8D?=
 =?UTF-8?q?=E6=89=93=E6=89=B0=E4=BC=9A=E8=AF=9D=E6=9C=AA=E8=AF=BB=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 免打扰会话保留头像小红点提示
- 会话预览行展示免打扰未读条数
- 总未读统计继续排除免打扰会话
- 同步 Vue3 + Vben 三端会话项展示
---
 .../conversation/conversation-item.vue        | 20 +++++++++++++++++--
 .../conversation/conversation-item.vue        | 20 +++++++++++++++++--
 .../conversation/conversation-item.vue        | 20 +++++++++++++++++--
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
index 938146e67..6911ba1c4 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
@@ -116,6 +116,15 @@ const atText = computed(() => {
   return ''
 })
 
+/** 免打扰会话未读条数文案 */
+const mutedUnreadText = computed(() => {
+  if (!props.conversation.silent || props.conversation.unreadCount <= 0) {
+    return ''
+  }
+  const count = props.conversation.unreadCount > 99 ? '99+' : props.conversation.unreadCount
+  return `[${count}条]`
+})
+
 /** 群聊未处理加群申请红字前缀；store 已经按「我管理的群」过滤过，count > 0 即可显示 */
 const requestText = computed(() => {
   if (!isGroup.value) {
@@ -204,7 +213,7 @@ function handleContextMenu(e: MouseEvent) {
     @click="handleClick"
     @contextmenu.prevent="handleContextMenu"
   >
-    <!-- 头像 + 未读提示；普通会话显示红色数字徽标，免打扰会话仅显示纯小红点（对齐微信，不暴露具体条数） -->
+    <!-- 头像 + 未读提示 -->
     <div class="relative">
       <GroupAvatar
         v-if="isGroup"
@@ -227,7 +236,7 @@ function handleContextMenu(e: MouseEvent) {
       >
         {{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
       </span>
-      <!-- 小红点：免打扰且有未读时仅提示存在新消息；切回非免打扰后用上面的数字徽标暴露累计未读 -->
+      <!-- 小红点：免打扰且有未读时提示存在新消息 -->
       <span
         v-show="conversation.silent && conversation.unreadCount > 0"
         class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-[#f56c6c] border border-solid border-white dark:border-[var(--ant-color-bg-container)] rounded-full box-border"
@@ -268,6 +277,13 @@ function handleContextMenu(e: MouseEvent) {
         >
           {{ atText }}
         </span>
+        <!-- 免打扰未读条数 -->
+        <span
+          v-if="mutedUnreadText"
+          class="flex-shrink-0 mr-1 text-12px text-[var(--ant-color-text-secondary)] whitespace-nowrap"
+        >
+          {{ mutedUnreadText }}
+        </span>
         <!-- 群聊最后一条发送者前缀：按 lastSenderId + 当前会话上下文实时算名字 -->
         <span
           v-if="showSendName"
diff --git a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
index c59389eb7..cfa50d6fd 100644
--- a/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
+++ b/apps/web-antdv-next/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
@@ -116,6 +116,15 @@ const atText = computed(() => {
   return ''
 })
 
+/** 免打扰会话未读条数文案 */
+const mutedUnreadText = computed(() => {
+  if (!props.conversation.silent || props.conversation.unreadCount <= 0) {
+    return ''
+  }
+  const count = props.conversation.unreadCount > 99 ? '99+' : props.conversation.unreadCount
+  return `[${count}条]`
+})
+
 /** 群聊未处理加群申请红字前缀；store 已经按「我管理的群」过滤过，count > 0 即可显示 */
 const requestText = computed(() => {
   if (!isGroup.value) {
@@ -204,7 +213,7 @@ function handleContextMenu(e: MouseEvent) {
     @click="handleClick"
     @contextmenu.prevent="handleContextMenu"
   >
-    <!-- 头像 + 未读提示；普通会话显示红色数字徽标，免打扰会话仅显示纯小红点（对齐微信，不暴露具体条数） -->
+    <!-- 头像 + 未读提示 -->
     <div class="relative">
       <GroupAvatar
         v-if="isGroup"
@@ -227,7 +236,7 @@ function handleContextMenu(e: MouseEvent) {
       >
         {{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
       </span>
-      <!-- 小红点：免打扰且有未读时仅提示存在新消息；切回非免打扰后用上面的数字徽标暴露累计未读 -->
+      <!-- 小红点：免打扰且有未读时提示存在新消息 -->
       <span
         v-show="conversation.silent && conversation.unreadCount > 0"
         class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-[#f56c6c] border border-solid border-white dark:border-[var(--ant-color-bg-container)] rounded-full box-border"
@@ -268,6 +277,13 @@ function handleContextMenu(e: MouseEvent) {
         >
           {{ atText }}
         </span>
+        <!-- 免打扰未读条数 -->
+        <span
+          v-if="mutedUnreadText"
+          class="flex-shrink-0 mr-1 text-12px text-[var(--ant-color-text-secondary)] whitespace-nowrap"
+        >
+          {{ mutedUnreadText }}
+        </span>
         <!-- 群聊最后一条发送者前缀：按 lastSenderId + 当前会话上下文实时算名字 -->
         <span
           v-if="showSendName"
diff --git a/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue b/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
index b5d923f7c..9b9770325 100644
--- a/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
+++ b/apps/web-ele/src/views/im/home/pages/conversation/components/conversation/conversation-item.vue
@@ -116,6 +116,15 @@ const atText = computed(() => {
   return ''
 })
 
+/** 免打扰会话未读条数文案 */
+const mutedUnreadText = computed(() => {
+  if (!props.conversation.silent || props.conversation.unreadCount <= 0) {
+    return ''
+  }
+  const count = props.conversation.unreadCount > 99 ? '99+' : props.conversation.unreadCount
+  return `[${count}条]`
+})
+
 /** 群聊未处理加群申请红字前缀；store 已经按「我管理的群」过滤过，count > 0 即可显示 */
 const requestText = computed(() => {
   if (!isGroup.value) {
@@ -204,7 +213,7 @@ function handleContextMenu(e: MouseEvent) {
     @click="handleClick"
     @contextmenu.prevent="handleContextMenu"
   >
-    <!-- 头像 + 未读提示；普通会话显示红色数字徽标，免打扰会话仅显示纯小红点（对齐微信，不暴露具体条数） -->
+    <!-- 头像 + 未读提示 -->
     <div class="relative">
       <GroupAvatar
         v-if="isGroup"
@@ -227,7 +236,7 @@ function handleContextMenu(e: MouseEvent) {
       >
         {{ conversation.unreadCount > 99 ? '99+' : conversation.unreadCount }}
       </span>
-      <!-- 小红点：免打扰且有未读时仅提示存在新消息；切回非免打扰后用上面的数字徽标暴露累计未读 -->
+      <!-- 小红点：免打扰且有未读时提示存在新消息 -->
       <span
         v-show="conversation.silent && conversation.unreadCount > 0"
         class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-[#f56c6c] border border-solid border-white dark:border-[var(--ant-color-bg-container)] rounded-full box-border"
@@ -268,6 +277,13 @@ function handleContextMenu(e: MouseEvent) {
         >
           {{ atText }}
         </span>
+        <!-- 免打扰未读条数 -->
+        <span
+          v-if="mutedUnreadText"
+          class="flex-shrink-0 mr-1 text-12px text-[var(--ant-color-text-secondary)] whitespace-nowrap"
+        >
+          {{ mutedUnreadText }}
+        </span>
         <!-- 群聊最后一条发送者前缀：按 lastSenderId + 当前会话上下文实时算名字 -->
         <span
           v-if="showSendName"