Implement background optimization composable for data refresh and SSE

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

src/views/dashboard/AnalyticsNetwork.vue

@@ -3,9 +3,11 @@ import { useTheme } from 'vuetify'
 import { hexToRgb } from '@layouts/utils'
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
+import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
 
 // 国际化
 const { t } = useI18n()
+const { useDataRefresh } = useBackgroundOptimization()
 
 // 输入参数
 const props = defineProps({
@@ -29,9 +31,6 @@ const variableTheme = controlledComputed(
 
 const chartKey = ref(0)
 
-// 定时器
-let refreshTimer: NodeJS.Timeout | null = null
-
 // 时间序列 - 上行和下行流量
 const series = ref([
   {
@@ -161,23 +160,13 @@ async function getNetworkUsage() {
   }
 }
 
-onMounted(() => {
-  // 延迟启动，确保组件完全挂载
-  nextTick(() => {
-    getNetworkUsage()
-    refreshTimer = setInterval(() => {
-      getNetworkUsage()
-    }, 2000)
-  })
-})
-
-// 组件卸载时停止定时器
-onUnmounted(() => {
-  if (refreshTimer) {
-    clearInterval(refreshTimer)
-    refreshTimer = null
-  }
-})
+// 使用优化的数据刷新定时器
+useDataRefresh(
+  'dashboard-network',
+  getNetworkUsage,
+  2000, // 2秒间隔
+  true // 立即执行
+)
 
 onActivated(() => {
   nextTick(() => {

src/views/dashboard/AnalyticsProcesses.vue

@@ -3,9 +3,11 @@ import { formatSeconds } from '@/@core/utils/formatters'
 import api from '@/api'
 import type { Process } from '@/api/types'
 import { useI18n } from 'vue-i18n'
+import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
 
 // 国际化
 const { t } = useI18n()
+const { useDataRefresh } = useBackgroundOptimization()
 
 // 表头
 const headers = [
@@ -18,9 +20,6 @@ const headers = [
 // 数据列表
 const processList = ref<Process[]>([])
 
-// 定时器
-let refreshTimer: NodeJS.Timeout | null = null
-
 // 调用API加载数据
 async function loadProcessList() {
   try {
@@ -32,22 +31,13 @@ async function loadProcessList() {
   }
 }
 
-onMounted(() => {
-  loadProcessList()
-
-  // 启动定时器
-  refreshTimer = setInterval(() => {
-    loadProcessList()
-  }, 5000)
-})
-
-// 组件卸载时停止定时器
-onUnmounted(() => {
-  if (refreshTimer) {
-    clearInterval(refreshTimer)
-    refreshTimer = null
-  }
-})
+// 使用优化的数据刷新定时器
+useDataRefresh(
+  'dashboard-processes',
+  loadProcessList,
+  5000, // 5秒间隔
+  true // 立即执行
+)
 </script>
 
 <template>

src/views/dashboard/AnalyticsScheduler.vue

@@ -2,9 +2,11 @@
 import api from '@/api'
 import type { ScheduleInfo } from '@/api/types'
 import { useI18n } from 'vue-i18n'
+import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
 
 // 国际化
 const { t } = useI18n()
+const { useDataRefresh } = useBackgroundOptimization()
 
 // 输入参数
 const props = defineProps({
@@ -18,9 +20,6 @@ const props = defineProps({
 // 定时服务列表
 const schedulerList = ref<ScheduleInfo[]>([])
 
-// 定时器
-let refreshTimer: NodeJS.Timeout | null = null
-
 // 调用API加载定时服务列表
 async function loadSchedulerList() {
   if (!props.allowRefresh) {
@@ -35,22 +34,13 @@ async function loadSchedulerList() {
   }
 }
 
-onMounted(() => {
-  loadSchedulerList()
-
-  // 启动定时器
-  refreshTimer = setInterval(() => {
-    loadSchedulerList()
-  }, 60000)
-})
-
-// 组件卸载时停止定时器
-onUnmounted(() => {
-  if (refreshTimer) {
-    clearInterval(refreshTimer)
-    refreshTimer = null
-  }
-})
+// 使用优化的数据刷新定时器
+useDataRefresh(
+  'dashboard-scheduler',
+  loadSchedulerList,
+  60000, // 60秒间隔
+  true // 立即执行
+)
 </script>
 
 <template>