From b63492199ab1fb05d4d04913877dbb6fbf356f90 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 20 May 2026 23:57:18 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E5=AF=B9=E9=BD=90?=
 =?UTF-8?q?=E5=BE=AE=E4=BF=A1=EF=BC=9A=E5=85=8D=E6=89=93=E6=89=B0=E4=BC=9A?=
 =?UTF-8?q?=E8=AF=9D=E6=94=B9=E5=B0=8F=E7=BA=A2=E7=82=B9=E3=80=81=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=20Tab=20=E4=BA=8C=E6=AC=A1=E7=82=B9=E5=87=BB=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=88=B0=E4=B8=8B=E4=B8=80=E6=9C=AA=E8=AF=BB=E3=80=81?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E5=B7=A5=E5=85=B7=E6=A0=8F=20hover=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/im/home/components/ToolBar.vue      | 77 ++++++++++---------
 .../conversation/ConversationItem.vue         |  9 ++-
 .../im/home/pages/conversation/index.vue      | 50 +++++++++++-
 src/views/im/home/store/uiStore.ts            | 18 ++++-
 4 files changed, 113 insertions(+), 41 deletions(-)

diff --git a/src/views/im/home/components/ToolBar.vue b/src/views/im/home/components/ToolBar.vue
index 122b66e8a..2ef5e24a7 100644
--- a/src/views/im/home/components/ToolBar.vue
+++ b/src/views/im/home/components/ToolBar.vue
@@ -3,7 +3,9 @@
     ToolBar：IM 左侧工具栏
     布局：顶部头像 → 中间三 Tab（消息/好友/群聊）→ 底部设置
   -->
-  <div class="flex flex-col items-center w-14 pt-4 pb-3 gap-2 flex-shrink-0 bg-[#2b2b2b]">
+  <div
+    class="flex flex-col items-center w-14 pt-4 pb-3 gap-2 flex-shrink-0 select-none bg-[#2b2b2b]"
+  >
     <!-- 顶部用户头像，点击跳个人中心；走 UserAvatar 统一首字 / 哈希配色规则 -->
     <div class="mb-2 cursor-pointer" @click="goProfile">
       <UserAvatar
@@ -16,43 +18,41 @@
 
     <!-- 中间三 Tab -->
     <div class="flex flex-col items-center gap-2 flex-1 w-full">
-      <el-tooltip v-for="item in tabs" :key="item.name" :content="item.label" placement="right">
-        <div
-          class="flex items-center justify-center w-10 h-10 rounded-lg text-[#a0a0a0] cursor-pointer transition-all hover:text-white hover:bg-white/10"
-          :class="{ 'bg-white/15 text-white': isActive(item.name) }"
-          @click="goTab(item.name)"
+      <div
+        v-for="item in tabs"
+        :key="item.name"
+        class="flex items-center justify-center w-10 h-10 rounded-lg text-[#a0a0a0] cursor-pointer transition-all hover:text-white hover:bg-white/10"
+        :class="{ 'bg-white/15 text-white': isActive(item.name) }"
+        @click="goTab(item.name)"
+      >
+        <el-badge
+          v-if="item.name === 'ImHomeConversation' && totalUnread > 0"
+          :value="totalUnread"
+          :max="99"
+          class="tool-bar__badge"
         >
-          <el-badge
-            v-if="item.name === 'ImHomeConversation' && totalUnread > 0"
-            :value="totalUnread"
-            :max="99"
-            class="tool-bar__badge"
-          >
-            <Icon :icon="item.icon" :size="22" />
-          </el-badge>
-          <el-badge
-            v-else-if="item.name === 'ImHomeContact' && unhandledRequestCount > 0"
-            :value="unhandledRequestCount"
-            :max="99"
-            class="tool-bar__badge"
-          >
-            <Icon :icon="item.icon" :size="22" />
-          </el-badge>
-          <Icon v-else :icon="item.icon" :size="22" />
-        </div>
-      </el-tooltip>
+          <Icon :icon="item.icon" :size="22" />
+        </el-badge>
+        <el-badge
+          v-else-if="item.name === 'ImHomeContact' && unhandledRequestCount > 0"
+          :value="unhandledRequestCount"
+          :max="99"
+          class="tool-bar__badge"
+        >
+          <Icon :icon="item.icon" :size="22" />
+        </el-badge>
+        <Icon v-else :icon="item.icon" :size="22" />
+      </div>
     </div>
 
     <!-- 底部设置按钮：点击跳个人中心 -->
     <div class="flex flex-col items-center gap-2 w-full">
-      <el-tooltip content="设置" placement="right">
-        <div
-          class="flex items-center justify-center w-10 h-10 rounded-lg text-[#a0a0a0] cursor-pointer transition-all hover:text-white hover:bg-white/10"
-          @click="goProfile"
-        >
-          <Icon icon="ant-design:setting-outlined" :size="22" />
-        </div>
-      </el-tooltip>
+      <div
+        class="flex items-center justify-center w-10 h-10 rounded-lg text-[#a0a0a0] cursor-pointer transition-all hover:text-white hover:bg-white/10"
+        @click="goProfile"
+      >
+        <Icon icon="ant-design:setting-outlined" :size="22" />
+      </div>
     </div>
   </div>
 </template>
@@ -64,6 +64,7 @@ import Icon from '@/components/Icon/src/Icon.vue'
 import { useUserStore } from '@/store/modules/user'
 import { useConversationStore } from '../store/conversationStore'
 import { useFriendStore } from '../store/friendStore'
+import { useImUiStore } from '../store/uiStore'
 import UserAvatar from './user/UserAvatar.vue'
 
 defineOptions({ name: 'ImToolBar' })
@@ -73,21 +74,25 @@ const router = useRouter()
 const userStore = useUserStore()
 const conversationStore = useConversationStore()
 const friendStore = useFriendStore()
+const uiStore = useImUiStore()
 
 const totalUnread = computed(() => conversationStore.getTotalUnread) // 消息 Tab 的红点：所有非免打扰会话的未读总和
 const unhandledRequestCount = computed(() => friendStore.getUnhandledRequestCount) // 通讯录 Tab 的红点：未处理好友申请数（接收方=我）
 
 const tabs = [
-  { name: 'ImHomeConversation', label: '消息', icon: 'ep:chat-round' },
-  { name: 'ImHomeContact', label: '通讯录', icon: 'mingcute:contacts-line' }
+  { name: 'ImHomeConversation', icon: 'ep:chat-round' },
+  { name: 'ImHomeContact', icon: 'mingcute:contacts-line' }
 ] // 两个主 Tab；用路由 name 而非 path，避免前缀 / 嵌套调整后失效
 
 /** 当前路由是否命中 Tab：直接比对 route.name */
 const isActive = (name: string) => route.name === name
 
-/** 切换 Tab：当前 Tab 已选中时跳过，避免无意义的导航 */
+/** 切换 Tab：当前已选中时，消息 Tab 触发"滚动到下一个未读"（对齐微信 PC），其它 Tab 无动作 */
 const goTab = (name: string) => {
   if (route.name === name) {
+    if (name === 'ImHomeConversation') {
+      uiStore.requestNextUnreadJump()
+    }
     return
   }
   router.push({ name })
diff --git a/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue b/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue
index 17db6420c..3c95dc3e6 100644
--- a/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue
+++ b/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue
@@ -2,10 +2,11 @@
   <div
     class="relative flex items-center gap-2.5 px-4 py-3 cursor-pointer transition-colors hover:bg-[var(--el-fill-color)]"
     :class="{ '!bg-[#d9ecff] dark:!bg-[var(--el-color-primary-light-8)]': isActive }"
+    :data-conversation-key="`${conversation.type}-${conversation.targetId}`"
     @click="handleClick"
     @contextmenu.prevent="handleContextMenu"
   >
-    <!-- 头像 + 未读徽标；免打扰会话不显示徽标 -->
+    <!-- 头像 + 未读提示；普通会话显示红色数字徽标，免打扰会话仅显示纯小红点（对齐微信，不暴露具体条数） -->
     <div class="relative">
       <GroupAvatar
         v-if="isGroup"
@@ -21,12 +22,18 @@
         :size="40"
         :clickable="false"
       />
+      <!-- 数字徽标：非免打扰且有未读时显示具体条数 -->
       <span
         v-show="!conversation.silent && conversation.unreadCount > 0"
         class="absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-1.5 text-11px leading-[18px] text-white text-center bg-[#f56c6c] border border-solid border-white dark:border-[var(--el-bg-color)] rounded-full box-border whitespace-nowrap"
       >
         {{ 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"
+      ></span>
     </div>
 
     <div class="flex-1 min-w-0">
diff --git a/src/views/im/home/pages/conversation/index.vue b/src/views/im/home/pages/conversation/index.vue
index 9c867d3a5..9819069ff 100644
--- a/src/views/im/home/pages/conversation/index.vue
+++ b/src/views/im/home/pages/conversation/index.vue
@@ -96,10 +96,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import Icon from '@/components/Icon/src/Icon.vue'
 import { useConversationStore } from '../../store/conversationStore'
 import { useGroupStore } from '../../store/groupStore'
+import { useImUiStore } from '../../store/uiStore'
 import { StorageKeys } from '../../../utils/storage'
 import { ImConversationType } from '../../../utils/constants'
 import { filterConversationsByKeyword, getConversationKey } from '../../../utils/conversation'
@@ -114,6 +115,7 @@ defineOptions({ name: 'ImMessagePage' })
 
 const conversationStore = useConversationStore()
 const groupStore = useGroupStore()
+const uiStore = useImUiStore()
 
 // ==================== 会话列表 ====================
 
@@ -171,7 +173,7 @@ const renderedPinnedConversations = computed(() =>
   pinnedExpanded.value ? pinnedConversations.value : pinnedGroups.value.visible
 )
 
-/** 与会话项右上角红点的可见条件保持一致：免打扰不亮，无未读不亮 */
+/** 置顶折叠时是否上浮到折叠头之上：仅以数字徽标为准；免打扰即便有未读也只展示小红点，不参与上浮 */
 function hasUnreadBadge(conversation: Conversation): boolean {
   return !conversation.silent && (conversation.unreadCount || 0) > 0
 }
@@ -220,4 +222,48 @@ function handleGroupCreated(groupId: number) {
     { silent: !!group.silent }
   )
 }
+
+// ==================== 滚动到下一个未读 ====================
+// 工具栏「消息」Tab 二次点击 → uiStore.nextUnreadJumpNonce 递增 → 本页 watch 滚动到下一条未读
+// 含免打扰会话（小红点也算未读）；通过维护 lastJumpedConversationKey 让连续点击顺序穿过整个未读列表
+
+/** 上次命中的未读会话 key；为空时从未读列表头开始 */
+let lastJumpedConversationKey: string | null = null
+
+/** 滚动到下一个未读会话（含免打扰）；目标被搜索框过滤或藏在置顶折叠区时先解除拦截再滚 */
+async function jumpToNextUnread() {
+  // 含免打扰的全量未读会话；空则直接返回
+  const unreadList = sortedConversations.value.filter((c) => (c.unreadCount || 0) > 0)
+  if (unreadList.length === 0) {
+    return
+  }
+  // 从上次命中那条往后推一位；首次或上次目标已读完不在列表里时，refIndex=-1，从头开始
+  const refIndex = lastJumpedConversationKey
+    ? unreadList.findIndex((c) => getConversationKey(c) === lastJumpedConversationKey)
+    : -1
+  const target = unreadList[(refIndex + 1) % unreadList.length]
+  const key = getConversationKey(target)
+  lastJumpedConversationKey = key
+
+  // 目标被搜索关键字过滤掉：清空 keyword 让它重新进入可见列表
+  if (keyword.value && !filteredConversations.value.some((c) => getConversationKey(c) === key)) {
+    keyword.value = ''
+  }
+  // 目标藏在置顶折叠区：临时展开；不写 localStorage，刷新后还原折叠态
+  const inFoldable = pinnedGroups.value.foldable.some((c) => getConversationKey(c) === key)
+  if (inFoldable && !pinnedExpanded.value) {
+    pinnedExpanded.value = true
+  }
+
+  // 等 keyword / pinnedExpanded 变化反应到 DOM 后再去取目标元素
+  await nextTick()
+  const el = document.querySelector(`[data-conversation-key="${key}"]`) as HTMLElement | null
+  if (!el) {
+    return
+  }
+  // block: 'start' 把目标会话顶到列表可视区第一行；对齐微信"切到下一个未读=列表的第一条"
+  el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+watch(() => uiStore.nextUnreadJumpNonce, jumpToNextUnread)
 </script>
diff --git a/src/views/im/home/store/uiStore.ts b/src/views/im/home/store/uiStore.ts
index 509f9060c..1e4be9707 100644
--- a/src/views/im/home/store/uiStore.ts
+++ b/src/views/im/home/store/uiStore.ts
@@ -1,5 +1,5 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 import { ImFriendAddSource } from '../../utils/constants'
 import type { GroupLite, User } from '../types'
@@ -116,6 +116,17 @@ export const useImUiStore = defineStore('imUiStore', () => {
     contextMenu.onSelect = null
   }
 
+  // ==================== 消息 Tab 跳转下一未读 ====================
+  // 在 ImHomeConversation 页面再次点击工具栏「消息」时触发；
+  // 通过递增 nonce 让 conversation/index.vue 的 watch 感知后执行滚动 + 高亮
+
+  const nextUnreadJumpNonce = ref(0)
+
+  /** 请求滚动到下一个未读会话（含免打扰） */
+  function requestNextUnreadJump() {
+    nextUnreadJumpNonce.value++
+  }
+
   return {
     userInfoCard,
     openUserInfoCard,
@@ -128,7 +139,10 @@ export const useImUiStore = defineStore('imUiStore', () => {
 
     contextMenu,
     openContextMenu,
-    closeContextMenu
+    closeContextMenu,
+
+    nextUnreadJumpNonce,
+    requestNextUnreadJump
   }
 })