U:调整数据监听位置，增加切换后取消监听

src/NetVizor.Frontend/src/main.ts

@@ -41,11 +41,6 @@ httpConfig.setConfig({
 
 // http 注册
 import httpPlugin from './plugins/http'
-import { useApplicationStore } from '@/stores/application'
-
-// 注册消息监听
-const useApplicationStore1 = useApplicationStore()
-useApplicationStore1.subscribe()
 
 // httpPlugin.install(app)
 

src/NetVizor.Frontend/src/stores/application.ts

@@ -3,6 +3,8 @@ import { defineStore, storeToRefs } from 'pinia'
 import { useWebSocketStore } from '@/stores/websocketStore'
 import { WebSocketResponse } from '@/types/websocket'
 import { ApplicationType } from '@/types/infoModel'
+import { httpClient } from '@/utils/http'
+import { ResponseModel, SubscriptionInfo } from '@/types/response'
 
 export const useApplicationStore = defineStore('applicationInfoSub', () => {
   const appInfos: Ref<ApplicationType[]> = ref([])
@@ -140,12 +142,27 @@ export const useApplicationStore = defineStore('applicationInfoSub', () => {
     )
   }
 
+  function unsubscribe() {
+    const subAppInfo: SubscriptionInfo = {
+      subscriptionType: 'AppDetailInfo',
+      interval: 1,
+    }
+    httpClient
+    .post(`/unsubscribe`, JSON.stringify(subAppInfo))
+    .then((res: ResponseModel) => {
+      console.log('取消订阅应用详细信息成功:', res)
+    })
+    .catch((err) => {
+      console.error('取消订阅应用详细信息失败:', err)
+    })
+  }
+
   return {
     subscribe, // 状态
     appInfos,
     selectedApp,
     inspectingAppDetails,
-
+    unsubscribe,
     // 计算属性
     activeApps,
     inactiveApps,

src/NetVizor.Frontend/src/views/MonitorView/index.vue

@@ -34,6 +34,7 @@
 defineOptions({
   name: 'MonitorView',
 })
+import { useApplicationStore } from '@/stores/application'
 
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import MonitorSidebar from './MonitorSidebar.vue'
@@ -118,8 +119,15 @@ const resetLayout = () => {
   inspectorWidth.value = 350
 }
 
+// 注册消息监听
+const useApplicationStore1 = useApplicationStore()
+
 // 键盘快捷键
 onMounted(() => {
+  // 创建事件绑定
+  useApplicationStore1.subscribe()
+
+
   const handleKeydown = (event: KeyboardEvent) => {
     if (event.ctrlKey && event.key === 'r') {
       event.preventDefault()
@@ -135,6 +143,11 @@ onMounted(() => {
     document.removeEventListener('mouseup', stopResize)
   })
 })
+
+onUnmounted(() => {
+  useApplicationStore1.unsubscribe()
+})
+
 </script>
 
 <style scoped>