refactor: reorganize files

src/layouts/app-layout.vue

@@ -1,33 +1,28 @@
 <script lang="ts">
-const SUBSCRIBE_TOPIC = '/topic/deviceAlarm';
-
 function renderIcon(icon: Component): () => VNode {
   return () => h(NIcon, null, { default: () => h(icon) });
 }
 </script>
 
 <script setup lang="ts">
-import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
-import SettingsDrawer from '@/components/global/settings-drawer.vue';
-import { useStationListQuery } from '@/composables/query';
+import { SettingsDrawer } from '@/components';
+import { useStompClient } from '@/composables';
+import { useStationListQuery } from '@/composables';
 import { STATION_LIST_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_ALARMS_QUERY_KEY } from '@/constants';
-import { useCurrentAlarmsStore } from '@/stores/current-alarms';
-import { useUserStore } from '@/stores/user';
-import { Client as StompClient } from '@stomp/stompjs';
+import { useCurrentAlarmsStore, useUserStore } from '@/stores';
 import { useIsFetching } from '@tanstack/vue-query';
 import { AlertFilled, BugFilled, CaretDownFilled, EnvironmentFilled, /* AreaChartOutlined, */ FileTextFilled, FundFilled, HddFilled, LogoutOutlined, SettingOutlined } from '@vicons/antd';
 import type { AxiosError } from 'axios';
-import { destr } from 'destr';
 import { NBadge, NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, h, onBeforeMount, onBeforeUnmount, onMounted, ref, watch, type Component, type VNode } from 'vue';
+import { computed, h, onBeforeMount, ref, watch, type Component, type VNode } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 
+useStompClient();
+
 const userStore = useUserStore();
 const { userInfo } = storeToRefs(userStore);
 
-const stompClient = ref<StompClient | null>(null);
-
 const currentAlarmsStore = useCurrentAlarmsStore();
 const { currentAlarmCount, needReload } = storeToRefs(currentAlarmsStore);
 
@@ -50,48 +45,6 @@ onBeforeMount(() => {
   userStore.userGetInfo().catch((err) => window.$message.error((err as AxiosError).message));
 });
 
-onMounted(() => {
-  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-  const { host } = window.location;
-  const endpoint = '/ws';
-  const brokerURL = `${protocol}//${host}${endpoint}`;
-  stompClient.value = new StompClient({
-    brokerURL,
-    reconnectDelay: 5000,
-    heartbeatIncoming: 10000,
-    heartbeatOutgoing: 10000,
-    // debug: (str) => {
-    //   console.log('Stomp调试:', str);
-    // },
-    onConnect: () => {
-      console.log('Stomp连接成功');
-      stompClient.value?.subscribe(SUBSCRIBE_TOPIC, (message) => {
-        const alarm = destr<NdmDeviceAlarmLogResultVO>(message.body);
-        // console.log(alarm);
-        if (alarm.alarmCategory === '1') {
-          currentAlarmCount.value++;
-        }
-      });
-    },
-    onDisconnect: () => {
-      console.log('Stomp连接断开');
-      stompClient.value?.unsubscribe(SUBSCRIBE_TOPIC);
-    },
-    onStompError: (frame) => {
-      console.log('Stomp错误', frame);
-    },
-    onWebSocketError: (event) => {
-      console.log('WebSocket错误', event);
-    },
-  });
-  stompClient.value.activate();
-});
-
-onBeforeUnmount(() => {
-  stompClient.value?.deactivate();
-  stompClient.value = null;
-});
-
 const route = useRoute();
 const router = useRouter();