更新桌面图标徽章的逻辑

src/layouts/components/DefaultLayout.vue

@@ -13,6 +13,7 @@ import { NavMenu } from '@/@layouts/types'
 import { useDisplay } from 'vuetify'
 import { useI18n } from 'vue-i18n'
 import { filterMenusByPermission } from '@/utils/permission'
+import { checkUnreadOnStartup } from '@/utils/badge'
 
 const display = useDisplay()
 const appMode = inject('pwaMode')
@@ -24,6 +25,9 @@ const userStore = useUserStore()
 // 是否超级用户
 let superUser = userStore.superUser
 
+// ShortcutBar 引用
+const shortcutBarRef = ref<InstanceType<typeof ShortcutBar> | null>(null)
+
 // 获取用户权限信息
 const userPermissions = computed(() => ({
   is_superuser: userStore.superUser,
@@ -58,6 +62,26 @@ function goBack() {
   history.back()
 }
 
+// 检查未读消息并自动打开消息弹窗
+async function checkUnreadMessages() {
+  if (!superUser) {
+    return // 只有超级用户才能看到消息
+  }
+
+  try {
+    const unreadCount = await checkUnreadOnStartup()
+
+    if (unreadCount > 0) {
+      // 延迟2秒打开消息弹窗，确保页面和组件都已完全加载
+      setTimeout(() => {
+        shortcutBarRef.value?.openMessageDialog()
+      }, 2000)
+    }
+  } catch (error) {
+    // 静默处理错误
+  }
+}
+
 onMounted(() => {
   // 获取菜单列表
   startMenus.value = getMenuList(t('menu.start'))
@@ -65,6 +89,9 @@ onMounted(() => {
   subscribeMenus.value = getMenuList(t('menu.subscribe'))
   organizeMenus.value = getMenuList(t('menu.organize'))
   systemMenus.value = getMenuList(t('menu.system'))
+
+  // 检查未读消息
+  checkUnreadMessages()
 })
 </script>
 
@@ -86,7 +113,7 @@ onMounted(() => {
         <!-- 👉 Spacer -->
         <VSpacer />
         <!-- 👉 Shortcuts -->
-        <ShortcutBar v-if="superUser" />
+        <ShortcutBar v-if="superUser" ref="shortcutBarRef" />
         <!-- 👉 Notification -->
         <UserNofification />
         <!-- 👉 UserProfile -->

src/layouts/components/ShortcutBar.vue

@@ -9,6 +9,7 @@ import api from '@/api'
 import { useDisplay } from 'vuetify'
 import { getQueryValue } from '@/@core/utils'
 import { useI18n } from 'vue-i18n'
+import { clearAppBadge } from '@/utils/badge'
 
 // 国际化
 const { t } = useI18n()
@@ -103,6 +104,15 @@ function openDialog(dialogRef: any) {
   dialogRef.value = true
 }
 
+// 打开消息弹窗并清除徽章
+async function openMessageDialog() {
+  messageDialog.value = true
+  // 延迟清除徽章，确保对话框已经打开
+  setTimeout(async () => {
+    await clearAppBadge()
+  }, 500)
+}
+
 // 滚动到底部
 function scrollMessageToEnd() {
   // 使用更长的延迟确保DOM已更新
@@ -138,6 +148,16 @@ async function sendMessage() {
   }
 }
 
+// 供外部调用的打开消息弹窗方法
+function openMessageDialogFromExternal() {
+  openMessageDialog()
+}
+
+// 暴露方法给父组件
+defineExpose({
+  openMessageDialog: openMessageDialogFromExternal,
+})
+
 onMounted(() => {
   scrollMessageToEnd()
   const shortcut = getQueryValue('shortcut')
@@ -187,7 +207,7 @@ onMounted(() => {
               flat
               class="pa-2 d-flex align-center cursor-pointer transition-transform duration-300 hover:-translate-y-1 border h-full"
               hover
-              @click="openDialog(item.dialogRef)"
+              @click="item.dialog === 'message' ? openMessageDialog() : openDialog(item.dialogRef)"
             >
               <VAvatar variant="text" size="48" rounded="lg">
                 <VIcon color="primary" :icon="item.icon" size="24" />

src/layouts/components/UserNotification.vue

@@ -2,7 +2,6 @@
 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()
 
@@ -18,22 +17,6 @@ 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
@@ -41,8 +24,6 @@ function markAllAsRead() {
   notificationList.value.forEach(item => {
     item.read = true
   })
-  // 清除桌面图标徽章
-  clearBadge()
   appsMenu.value = false
 }
 
@@ -56,8 +37,6 @@ function startSSEMessager() {
         const noti: SystemNotification = JSON.parse(event.data)
         notificationList.value.unshift(noti)
         hasNewMessage.value = true
-        // 更新桌面图标徽章
-        updateBadge()
       }
     })
   }, 3000)