From 65b0acdcb48294c33d19a338db8521ca654781da Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 6 Jul 2025 15:29:44 +0000 Subject: [PATCH] Refactor data refresh mechanism with conditional timer support Co-authored-by: jxxghp --- src/components/cards/DownloaderCard.vue | 17 ++-- src/composables/useBackgroundOptimization.ts | 84 +++++++++++++++++++- 2 files changed, 95 insertions(+), 6 deletions(-) diff --git a/src/components/cards/DownloaderCard.vue b/src/components/cards/DownloaderCard.vue index 713f4cb8..99ba6b4b 100644 --- a/src/components/cards/DownloaderCard.vue +++ b/src/components/cards/DownloaderCard.vue @@ -18,7 +18,7 @@ const display = useDisplay() // 获取i18n实例 const { t } = useI18n() -const { useDataRefresh } = useBackgroundOptimization() +const { useConditionalDataRefresh } = useBackgroundOptimization() // 定义输入 const props = defineProps({ @@ -63,9 +63,15 @@ const downloaderInfo = ref({ config: {}, }) +// 下载器是否应该刷新数据的计算属性 +const shouldRefresh = computed(() => props.allowRefresh && props.downloader.enabled) + // 调用API查询下载器数据 async function loadDownloaderInfo() { - if (!props.allowRefresh) { + if (!shouldRefresh.value) { + // 当下载器被禁用时,重置速率数据 + upload_rate.value = 0 + download_rate.value = 0 return } try { @@ -135,12 +141,13 @@ function onClose() { emit('close') } -// 使用优化的数据刷新定时器(只在下载器启用时激活) -const { stop: stopRefresh } = useDataRefresh( +// 使用条件性数据刷新定时器(只在下载器启用时运行) +const { stop: stopRefresh } = useConditionalDataRefresh( `downloader-${props.downloader.name}`, loadDownloaderInfo, + shouldRefresh, // 响应式条件:只有当allowRefresh为true且downloader启用时才运行 3000, // 3秒间隔 - props.downloader.enabled // 只在启用时执行 + true // 立即执行一次 ) onUnmounted(() => { diff --git a/src/composables/useBackgroundOptimization.ts b/src/composables/useBackgroundOptimization.ts index c4bef563..c193c940 100644 --- a/src/composables/useBackgroundOptimization.ts +++ b/src/composables/useBackgroundOptimization.ts @@ -200,11 +200,93 @@ export function useBackgroundOptimization() { } } + /** + * 使用条件性数据刷新定时器(用于需要动态启停的场景) + * @param id 定时器ID + * @param loadDataFunc 加载数据函数 + * @param condition 条件响应式引用,为true时启动定时器 + * @param interval 刷新间隔(毫秒) + * @param immediate 是否立即执行 + */ + const useConditionalDataRefresh = ( + id: string, + loadDataFunc: () => Promise | void, + condition: Ref, + interval: number = 3000, + immediate: boolean = true + ) => { + const loading = ref(false) + const isTimerActive = ref(false) + + const wrappedLoadData = async () => { + if (loading.value || !condition.value) return + + loading.value = true + try { + await loadDataFunc() + } catch (error) { + console.error(`条件数据刷新失败 [${id}]:`, error) + } finally { + loading.value = false + } + } + + const startTimer = () => { + if (!isTimerActive.value && condition.value) { + addBackgroundTimer( + id, + wrappedLoadData, + interval, + { + runInBackground: false, + skipInitialRun: !immediate + } + ) + isTimerActive.value = true + } + } + + const stopTimer = () => { + if (isTimerActive.value) { + removeBackgroundTimer(id) + isTimerActive.value = false + } + } + + onMounted(() => { + if (condition.value) { + startTimer() + } + + // 监听条件变化 + watch(condition, (newValue: boolean) => { + if (newValue) { + startTimer() + } else { + stopTimer() + } + }) + }) + + onUnmounted(() => { + stopTimer() + }) + + return { + loading, + refresh: wrappedLoadData, + stop: stopTimer, + start: startTimer, + isActive: isTimerActive + } + } + return { useSSE, useTimer, useDelayedSSE, useProgressSSE, - useDataRefresh + useDataRefresh, + useConditionalDataRefresh } } \ No newline at end of file