skycurtain/ndm-web-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yangsy
2025-12-25 00:38:48 +08:00
parent 4eb2a2ab3d
commit 9748b94046
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/layouts/app-layout.vue
View File

@@ -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状态
const fetchingCount = useIsFetching({ predicate: (query) => !!query.options.queryKey });
const mutatingCount = useIsMutating({ predicate: (mutation) => !!mutation.options.mutationKey });
const loadingCount = computed(() => fetchingCount.value + mutatingCount.value);
// 全局loading状态依赖于轮询query的queryKey以及相关的mutationKey
const queryingCount = useIsFetching({
predicate: (query) => {
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">