新增未读消息计数和桌面图标徽章更新功能

src/layouts/components/UserNotification.vue

@@ -2,6 +2,7 @@
 import { formatDateDifference } from '@core/utils/formatters'
 import { SystemNotification } from '@/api/types'
 import { useI18n } from 'vue-i18n'
+import { updateAppBadge, clearAppBadge } from '@/utils/badge'
 
 const { t } = useI18n()
 
@@ -17,6 +18,34 @@ let eventSource: EventSource | null = null
 // 弹窗
 const appsMenu = ref(false)
 
+// 未读消息数量
+const unreadCount = computed(() => {
+  return notificationList.value.filter(item => !item.read).length
+})
+
+// 更新桌面图标徽章
+async function updateBadge() {
+  const count = unreadCount.value
+  await updateAppBadge(count)
+}
+
+// 清除桌面图标徽章
+async function clearBadge() {
+  await clearAppBadge()
+}
+
+// 标记所有消息为已读
+function markAllAsRead() {
+  hasNewMessage.value = false
+  // 标记所有消息为已读
+  notificationList.value.forEach(item => {
+    item.read = true
+  })
+  // 清除桌面图标徽章
+  clearBadge()
+  appsMenu.value = false
+}
+
 // SSE持续接收消息
 function startSSEMessager() {
   // 延迟 3 秒启动 SSE，避免相关认证信息尚未写入 Cookie 导致 403
@@ -27,6 +56,8 @@ function startSSEMessager() {
         const noti: SystemNotification = JSON.parse(event.data)
         notificationList.value.unshift(noti)
         hasNewMessage.value = true
+        // 更新桌面图标徽章
+        updateBadge()
       }
     })
   }, 3000)
@@ -70,15 +101,7 @@ onBeforeUnmount(() => {
         <template #append>
           <VTooltip :text="t('notification.markRead')">
             <template #activator="{ props }">
-              <IconBtn
-                v-bind="props"
-                @click="
-                  () => {
-                    hasNewMessage = false
-                    appsMenu = false
-                  }
-                "
-              >
+              <IconBtn v-bind="props" @click="markAllAsRead">
                 <VIcon icon="mdi-email-check-outline" size="20" />
               </IconBtn>
             </template>