From 5b85a4c46913ea5a531117f9e6cf9d95c70fafd5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 7 May 2026 22:17:03 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E6=B5=8F=E8=A7=88?=
 =?UTF-8?q?=E5=99=A8=E6=A0=87=E7=AD=BE=20title=20=E6=8B=BC=E4=B8=8A?=
 =?UTF-8?q?=E6=9C=AA=E8=AF=BB=E6=95=B0=E5=89=8D=E7=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/im/home/index.vue | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/views/im/home/index.vue b/src/views/im/home/index.vue
index b342a8798..ff9bff657 100644
--- a/src/views/im/home/index.vue
+++ b/src/views/im/home/index.vue
@@ -26,8 +26,10 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, watch } from 'vue'
+import { onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
 
+import { useAppStore } from '@/store/modules/app'
 import { useConversationStore } from './store/conversationStore'
 import { useImWebSocketStore } from './store/websocketStore'
 import { useFriendStore } from './store/friendStore'
@@ -48,6 +50,8 @@ import ContextMenu from './components/ContextMenu.vue'
 
 defineOptions({ name: 'ImIndex' })
 
+const route = useRoute()
+const appStore = useAppStore()
 const conversationStore = useConversationStore()
 const webSocketStore = useImWebSocketStore()
 const friendStore = useFriendStore()
@@ -170,4 +174,21 @@ watch(
     }
   }
 )
+
+/**
+ * 浏览器标签 title 拼上未读数前缀；例：(63条未读)芋道源码
+ *
+ * 路由切换时 router.afterEach 会调 useTitle 重置 title；用 nextTick 排在它之后再覆盖
+ * 一并监听 route.fullPath，IM 子路由切换（消息 / 通讯录）也能重新加上前缀
+ */
+watch(
+  [() => conversationStore.getTotalUnread, () => route.fullPath],
+  ([count]) => {
+    nextTick(() => {
+      const base = appStore.getTitle
+      document.title = count > 0 ? `(${count > 99 ? '99+' : count}条未读)${base}` : base
+    })
+  },
+  { immediate: true }
+)
 </script>