通知板块 及 功能调整

src/App.vue

@@ -12,6 +12,8 @@
   import { UserService } from './api/usersApi'
   import { setThemeTransitionClass } from './utils/theme/animation'
   import { checkStorageCompatibility } from './utils/storage'
+  import { mittBus } from '@/utils/sys'
+  import appLogo from '@/assets/img/common/logox.png'
 
   const userStore = useUserStore()
   const { language } = storeToRefs(userStore)
@@ -32,14 +34,130 @@
     zh: zh,
     en: en
   }
+  const isSupported = ref(false)
+  const permissionStatus = ref('default')
+  // 检查浏览器支持情况
+  const checkSupport = () => {
+    if ('Notification' in window) {
+      isSupported.value = true
+      console.log('浏览器支持原生Notification API')
+    } else {
+      isSupported.value = false
+      console.log('⚠️ 浏览器不支持原生Notification API')
+    }
+  }
+  // 请求通知权限
+  const requestPermission = async () => {
+    if (!('Notification' in window)) {
+      console.log('浏览器不支持原生Notification API')
+      return
+    }
+    try {
+      const permission = await Notification.requestPermission()
+      permissionStatus.value = permission
+      if (permission === 'granted') {
+        console.log('用户已授予通知权限')
+      } else if (permission === 'denied') {
+        console.log('用户拒绝了通知权限')
+      } else {
+        console.log('用户暂时未授予通知权限')
+      }
+    } catch (error) {
+      console.log(`请求权限时出错:`)
+    }
+  }
+
+  // 显示基本通知（支持自定义标题与内容）
+  const showBasicNotification = (
+    title: string = '基本通知',
+    body: string = '这是一个使用浏览器原生API的系统通知'
+  ) => {
+    if (!('Notification' in window)) {
+      ElMessage({
+        message: '浏览器不支持原生Notification API',
+        type: 'warning'
+      })
+      return
+    }
+    if (Notification.permission !== 'granted') {
+      ElMessage({
+        message: '请先授予通知权限',
+        type: 'warning'
+      })
+      requestPermission()
+      return
+    }
+    try {
+      const iconUrl = appLogo || '/favicon.ico'
+      const notification = new Notification(title, {
+        body,
+        requireInteraction: true,
+        icon: iconUrl
+      })
+      notification.onclick = () => {
+        notification.close()
+      }
+    } catch (error) {}
+  }
+  const showEventNotification = () => {
+    if (Notification.permission !== 'granted') {
+      ElMessage({
+        message: '请先授予通知权限',
+        type: 'warning'
+      })
+      return
+    }
+    try {
+      const notification = new Notification('带事件监听的通知', {
+        body: '这个通知演示各种事件监听',
+        icon: 'https://element-plus.org/images/element-plus-logo.svg'
+      })
+      notification.onshow = () => {
+        console.log('通知显示事件触发')
+      }
+      notification.onclick = () => {
+        console.log('通知点击事件触发')
+        notification.close()
+      }
+      notification.onclose = () => {
+        console.log('通知关闭事件触发')
+      }
+      notification.onerror = (error) => {
+        // console.log(`通知错误事件: ${error.message}`)
+      }
+      console.log('已发送带事件监听的通知')
+    } catch (error) {
+      // console.log(`发送通知失败: ${error.message}`)
+    }
+  }
   onBeforeMount(() => {
     setThemeTransitionClass(true)
     setCompanyFromUrl()
   })
 
+  // 页面刷新时重置WebSocket重连次数，同时清理事件监听
+  onBeforeUnmount(() => {
+    import('@/utils/sys/wsClient').then(({ resetWebSocketReconnect }) => {
+      resetWebSocketReconnect()
+    })
+    mittBus.off('ws:message')
+  })
+
+  const handleWsMessageNotification = (data: any) => {
+    if (data && data.event === 'notify.receive') {
+      const notice = data?.data?.notice_data
+      const title = notice?.message?.title || '新通知'
+      const rawContent = notice?.message?.content || ''
+      const body = typeof rawContent === 'string' ? rawContent.replace(/<[^>]+>/g, '') : ''
+      showBasicNotification(title, body)
+    }
+  }
+
   onMounted(() => {
     // 检查存储兼容性
     checkStorageCompatibility()
+    checkSupport()
+    requestPermission()
     // 提升暗黑主题下页面刷新视觉体验
     setThemeTransitionClass(false)
     // 系统升级
@@ -48,11 +166,23 @@
     getUserInfo()
     // 初始化 WebSocket
     const { accessToken } = useUserStore()
-    // if (accessToken) {
-    //   import('@/utils/sys/wsClient').then(({ initWebSocket }) => {
-    //     initWebSocket(accessToken)
-    //   })
-    // }
+    // showEventNotification()
+    if (accessToken) {
+      import('@/utils/sys/wsClient').then(
+        ({ initWebSocket, resetWebSocketReconnect, getWebSocketStatus }) => {
+          // 页面刷新时重置重连次数
+          resetWebSocketReconnect()
+          initWebSocket(accessToken)
+          // 添加调试功能，可以在控制台查看WebSocket状态
+          // @ts-ignore
+          window.getWebSocketStatus = getWebSocketStatus
+          // console.log('WebSocket状态查看: window.getWebSocketStatus()')
+        }
+      )
+    }
+
+    // 监听ws消息，用于系统级通知
+    mittBus.on('ws:message', handleWsMessageNotification)
   })
 
   // 获取用户信息