u

code/link56/link56-frontend-new/src/layout/components/header.vue

@@ -6,7 +6,9 @@ import {
 import { useRoute, useRouter } from 'vue-router'
 import SafeImage from '@/components/SafeImage.vue'
 import { useUserStore } from '@/store/user'
+import { useWebSocket } from '@/store/websocket'
 
+const websocket = useWebSocket()
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
@@ -25,6 +27,7 @@ function navigateTo(path: string) {
 
 function exitLogin() {
   userStore.clear()
+  websocket.logout()
 
   router.push('/auth/login')
 }
@@ -57,14 +60,16 @@ function isActive(path: string) {
       <div class="action">
         <i-tdesign:search class="action-item" />
 
-        <i-tdesign:notification v-if="userStore.isLogined" class="action-item" />
+        <i-tdesign:notification v-if="userStore.isLogined" class="action-item" @click="navigateTo('/im')" />
 
         <template v-if="userStore.isLogined">
           <el-divider direction="vertical" />
 
           <el-dropdown>
             <div class="user">
-              <SafeImage :url="userStore.user.avatar || userStore.company.logo" :size="36" round />
+              <el-badge v-if="websocket.connected.value" :value="12" is-dot>
+                <SafeImage :url="userStore.user.avatar || userStore.company.logo" :size="36" round />
+              </el-badge>
               <div class="info">
                 <span class="name">{{ userStore.user.name }}</span>
                 <span class="company">{{ userStore.company.name }}</span>
@@ -183,6 +188,10 @@ function isActive(path: string) {
         cursor: pointer;
         outline: 0;
 
+        :deep(.el-badge__content.is-dot) {
+          width: 10px;
+          height: 10px;
+        }
         .info {
           display: flex;
           flex-direction: column;