fix: 🐛 导航栏通知优化重构

src/layout/components/NavBar/components/Notification.vue

@@ -24,7 +24,7 @@
                       size="small"
                       class="w200px cursor-pointer !ml-2 !flex-1"
                       truncated
-                      @click="handleReadNotice(item.id)"
+                      @click="readNotice(item.id)"
                     >
                       {{ item.title }}
                     </el-text>
@@ -42,7 +42,7 @@
               </template>
               <el-divider />
               <div class="flex-x-between">
-                <el-link type="primary" :underline="false" @click="handleViewMore">
+                <el-link type="primary" :underline="false" @click="viewMoreNotice">
                   <span class="text-xs">查看更多</span>
                   <el-icon class="text-xs">
                     <ArrowRight />
@@ -70,7 +70,7 @@
                     <el-link
                       type="primary"
                       class="w200px cursor-pointer !ml-2 !flex-1"
-                      @click="handleReadNotice(item.id)"
+                      @click="readNotice(item.id)"
                     >
                       {{ item.title }}
                     </el-link>
@@ -92,7 +92,7 @@
                   v-if="tasks.length > 5"
                   type="primary"
                   :underline="false"
-                  @click="handleViewMore"
+                  @click="viewMoreNotice"
                 >
                   <span class="text-xs">查看更多</span>
                   <el-icon class="text-xs">
@@ -118,7 +118,7 @@
                     <el-link
                       type="primary"
                       class="w200px cursor-pointer !ml-2 !flex-1"
-                      @click="handleReadNotice(item.id)"
+                      @click="readNotice(item.id)"
                     >
                       {{ item.title }}
                     </el-link>
@@ -139,7 +139,7 @@
                   v-if="tasks.length > 5"
                   type="primary"
                   :underline="false"
-                  @click="handleViewMore"
+                  @click="viewMoreNotice"
                 >
                   <span class="text-xs">查看更多</span>
                   <el-icon class="text-xs">
@@ -176,17 +176,16 @@ const tasks = ref<any[]>([]);
 const noticeDetailRef = ref();
 
 import { useStomp } from "@/hooks/useStomp";
-
+const { subscribe, unsubscribe, isConnected } = useStomp({
-const { subscribe, disconnect } = useStomp({
   debug: true,
 });
 
-/**
+watch(
- * 订阅通知消息
+  () => isConnected.value,
- */
+  (connected) => {
-function subscribeNotice() {
+    if (connected) {
       subscribe("/user/queue/message", (message) => {
-    console.log("收到消息：", message);
+        console.log("收到通知消息：", message);
         const data = JSON.parse(message.body);
         const id = data.id;
         if (!notices.value.some((notice) => notice.id == id)) {
@@ -206,6 +205,8 @@ function subscribeNotice() {
         }
       });
     }
+  }
+);
 
 /**
  * 获取我的通知公告
@@ -217,7 +218,7 @@ function featchMyNotice() {
 }
 
 // 阅读通知公告
-function handleReadNotice(id: string) {
+function readNotice(id: string) {
   noticeDetailRef.value.openNotice(id);
   const index = notices.value.findIndex((notice) => notice.id === id);
   if (index >= 0) {
@@ -226,7 +227,7 @@ function handleReadNotice(id: string) {
 }
 
 // 查看更多
-function handleViewMore() {
+function viewMoreNotice() {
   router.push({ path: "/myNotice" });
 }
 
@@ -237,14 +238,12 @@ function markAllAsRead() {
   });
 }
 
-// 获取未读消息列表并连接 WebSocket
 onMounted(() => {
   featchMyNotice();
-  subscribeNotice();
 });
 
 onBeforeUnmount(() => {
-  disconnect();
+  unsubscribe("/user/queue/message");
 });
 </script>