refactor: 优化全局加载状态计算

src/layouts/app-layout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SettingsDrawer, SyncCameraResultModal } from '@/components';
 import { useLineStationsQuery, useStompClient, useVerifyUserQuery } from '@/composables';
+import { LINE_ALARMS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_STATIONS_MUTATION_KEY, LINE_STATIONS_QUERY_KEY, STATION_ALARMS_MUTATION_KEY, STATION_DEVICES_MUTATION_KEY } from '@/constants';
 import { useAlarmStore, useSettingStore, useUserStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
 import { useIsFetching, useIsMutating, useMutation } from '@tanstack/vue-query';
@@ -43,10 +44,22 @@ const { syncCameraResult, afterCheckSyncCameraResult } = useStompClient();
 useVerifyUserQuery();
 useLineStationsQuery();
 
-// 带key的query和mutation用于全局轮询 可用于渲染loading状态
+// 全局loading状态依赖于轮询query的queryKey以及相关的mutationKey
-const fetchingCount = useIsFetching({ predicate: (query) => !!query.options.queryKey });
+const queryingCount = useIsFetching({
-const mutatingCount = useIsMutating({ predicate: (mutation) => !!mutation.options.mutationKey });
+  predicate: (query) => {
-const loadingCount = computed(() => fetchingCount.value + mutatingCount.value);
+    const pollingKeys = [LINE_STATIONS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_ALARMS_QUERY_KEY];
+    const queryKey = query.options.queryKey;
+    return !!queryKey && Array.isArray(queryKey) && pollingKeys.some((key) => queryKey.includes(key));
+  },
+});
+const mutatingCount = useIsMutating({
+  predicate: (mutation) => {
+    const mutationKeys = [LINE_STATIONS_MUTATION_KEY, STATION_DEVICES_MUTATION_KEY, STATION_ALARMS_MUTATION_KEY];
+    const mutationKey = mutation.options.mutationKey;
+    return !!mutationKey && Array.isArray(mutationKey) && mutationKeys.some((key) => mutationKey.includes(key));
+  },
+});
+const appLoading = computed(() => queryingCount.value + mutatingCount.value > 0);
 
 const onToggleMenuCollapsed = () => {
   menuCollpased.value = !menuCollpased.value;
@@ -169,7 +182,7 @@ function renderIcon(icon: Component): () => VNode {
         <NFlex justify="space-between" align="center" :size="8" style="width: 100%; height: 100%">
           <NFlex align="center">
             <h3 style="margin: 0 0 0 16px; cursor: pointer" @click="routeToRoot">网络设备管理平台</h3>
-            <NButton text size="tiny" :loading="loadingCount > 0"></NButton>
+            <NButton text size="tiny" :loading="appLoading"></NButton>
           </NFlex>
           <NFlex align="center" :size="0" style="height: 100%">
             <NDropdown trigger="hover" show-arrow :options="dropdownOptions" @select="onSelectDropdownOption">