修改 通知详情样式 和 即时通讯

src/App.vue

@@ -16,7 +16,7 @@
   import appLogo from '@/assets/img/common/logox.png'
 
   const userStore = useUserStore()
-  const { language } = storeToRefs(userStore)
+  const { language, accessToken } = storeToRefs(userStore)
   function setCompanyFromUrl() {
     const userStore = useUserStore()
     const params = new URLSearchParams(window.location.search)
@@ -99,37 +99,6 @@
       }
     } 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()
@@ -165,14 +134,13 @@
     // 获取用户信息
     getUserInfo()
     // 初始化 WebSocket
-    const { accessToken } = useUserStore()
     // showEventNotification()
-    if (accessToken) {
+    if (accessToken.value) {
       import('@/utils/sys/wsClient').then(
         ({ initWebSocket, resetWebSocketReconnect, getWebSocketStatus }) => {
           // 页面刷新时重置重连次数
           resetWebSocketReconnect()
-          initWebSocket(accessToken)
+          initWebSocket(accessToken.value)
           // 添加调试功能，可以在控制台查看WebSocket状态
           // @ts-ignore
           window.getWebSocketStatus = getWebSocketStatus
@@ -185,6 +153,26 @@
     mittBus.on('ws:message', handleWsMessageNotification)
   })
 
+  // 登录后，accessToken 变更时立即初始化 WebSocket（无需刷新）
+  watch(accessToken, async (token) => {
+    if (token) {
+      const { initWebSocket, getWebSocketStatus } = await import('@/utils/sys/wsClient')
+      const status = getWebSocketStatus?.()
+      // 避免重复初始化：已连接或正在连接时不再初始化
+      if (
+        !status?.readyState ||
+        (status.readyState !== WebSocket.OPEN && status.readyState !== WebSocket.CONNECTING)
+      ) {
+        initWebSocket(token)
+      }
+    } else {
+      // 退出登录时，关闭并重置
+      const { closeWebSocket, resetWebSocketReconnect } = await import('@/utils/sys/wsClient')
+      closeWebSocket()
+      resetWebSocketReconnect()
+    }
+  })
+
   // 获取用户信息
   const getUserInfo = async () => {
     if (userStore.isLogin) {