统一通知中心

web/src/layouts/AdminLayout.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Operation } from '@element-plus/icons-vue'
+import { Bell, Operation } from '@element-plus/icons-vue'
+import http from '../api/http'
 import { useAuthStore } from '../stores/auth'
 
+const unreadNotifCount = ref(0)
+
+async function pollUnread() {
+  try {
+    const { data } = await http.get('/notifications/unread-count')
+    unreadNotifCount.value = data.count
+  } catch (_) { /* ignore */ }
+}
+
 interface NavigationItem {
   path: string
   label: string
@@ -197,7 +207,11 @@ function signOut() {
   router.push('/login')
 }
 
-onMounted(() => auth.refresh().catch(() => undefined))
+onMounted(() => {
+  auth.refresh().catch(() => undefined)
+  pollUnread()
+  setInterval(pollUnread, 60000)
+})
 </script>
 
 <template>
@@ -229,6 +243,9 @@ onMounted(() => auth.refresh().catch(() => undefined))
         </div>
 
         <div class="user-block">
+          <el-badge :value="unreadNotifCount" :hidden="!unreadNotifCount" :max="99">
+            <el-button :icon="Bell" circle text @click="router.push('/notifications')" title="消息通知" />
+          </el-badge>
           <div class="avatar">{{ auth.user?.displayName?.slice(0, 1) ?? '管' }}</div>
           <div class="user-copy">
             <b>{{ auth.user?.displayName ?? '系统管理员' }}</b>