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;