From 56e61428b0ba07d72b0ef43fc18c659face51d42 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Mon, 29 Jun 2026 17:14:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20PC=20=E7=AB=AF=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E3=80=8C=E6=B6=88=E6=81=AF=E3=80=8D?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3=E6=B7=BB=E5=8A=A0=E6=9C=AA=E8=AF=BB=E6=95=B0?=
 =?UTF-8?q?=E9=87=8F=E8=A7=92=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/layouts/AppLayout.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
index bb39d2d..c648bee 100644
--- a/frontend/src/layouts/AppLayout.vue
+++ b/frontend/src/layouts/AppLayout.vue
@@ -24,11 +24,13 @@ import {
   Wallet,
 } from '@element-plus/icons-vue'
 import { ensureSupportChat } from '@/features/chats/api/chats'
+import { useChatUnreadCount } from '@/features/chats/composables/useChatUnreadCount'
 import { useSessionStore } from '@/stores/session'
 
 const session = useSessionStore()
 const router = useRouter()
 const route = useRoute()
+const { unreadCount, unreadLabel } = useChatUnreadCount(route)
 
 const navItems = [
   { label: '首页', to: '/', icon: House },
@@ -132,6 +134,7 @@ async function handleSupportClick() {
         <RouterLink v-for="item in navItems" :key="item.to" class="pc-nav-link" :to="item.to">
           <el-icon><component :is="item.icon" /></el-icon>
           <span>{{ item.label }}</span>
+          <em v-if="item.to === '/messages' && unreadCount > 0" class="pc-nav-badge">{{ unreadLabel }}</em>
         </RouterLink>
       </nav>
 
@@ -400,6 +403,7 @@ async function handleSupportClick() {
 }
 
 .pc-nav-link {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 5px;
@@ -412,6 +416,23 @@ async function handleSupportClick() {
   transition: all 0.2s;
 }
 
+.pc-nav-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: #ef4444;
+  color: #fff;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 16px;
+  text-align: center;
+}
+
 .pc-nav-link:hover,
 .pc-nav-link.router-link-active {
   background: #fff3e8;