Refactor data refresh mechanism with conditional timer support

Co-authored-by: jxxghp <jxxghp@163.com>

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<DownloaderConf>({
   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(() => {

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> | void,
+    condition: Ref<boolean>,
+    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
   }
 }