feat(im): 优化免打扰会话未读展示

- 免打扰会话保留头像小红点提示
- 会话预览行展示免打扰未读条数
- 总未读统计继续排除免打扰会话
- 同步 Vue3 + Vben 三端会话项展示
im
YunaiV 2026-06-19 18:29:31 -07:00
parent a5299ef2e8
commit b0dcc7c840
1 changed files with 18 additions and 2 deletions

View File

@ -6,7 +6,7 @@
@click="handleClick"
@contextmenu.prevent="handleContextMenu"
>
<!-- 头像 + 未读提示普通会话显示红色数字徽标免打扰会话仅显示纯小红点对齐微信不暴露具体条数 -->
<!-- 头像 + 未读提示 -->
<div class="relative">
<GroupAvatar
v-if="isGroup"
@ -29,7 +29,7 @@
>
{{ 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(--el-bg-color)] rounded-full box-border"
@ -71,6 +71,13 @@
>
{{ atText }}
</span>
<!-- 免打扰未读条数 -->
<span
v-if="mutedUnreadText"
class="flex-shrink-0 mr-1 text-12px text-[var(--el-text-color-secondary)] whitespace-nowrap"
>
{{ mutedUnreadText }}
</span>
<!-- 群聊最后一条发送者前缀 lastSenderId + 当前会话上下文实时算名字 -->
<span
v-if="showSendName"
@ -211,6 +218,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) {