diff --git a/package.json b/package.json
index 91757f43..fb0a5369 100644
--- a/package.json
+++ b/package.json
@@ -66,5 +66,10 @@
   "engines": {
     "node": ">=20.0.0",
     "pnpm": ">=9.0.0"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "vue-request@2.0.4": "patches/vue-request@2.0.4.patch"
+    }
   }
 }
\ No newline at end of file
diff --git a/patches/vue-request@2.0.4.patch b/patches/vue-request@2.0.4.patch
new file mode 100644
index 00000000..c1d9385a
--- /dev/null
+++ b/patches/vue-request@2.0.4.patch
@@ -0,0 +1,43 @@
+diff --git a/CHANGELOG.md b/CHANGELOG.md
+deleted file mode 100644
+index d8211cb2878a897638fa9388fdde6788e2d7c509..0000000000000000000000000000000000000000
+diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
+deleted file mode 100644
+index ba64ecd5c9280d350fd865a298d03f03722c3797..0000000000000000000000000000000000000000
+diff --git a/README-en_US.md b/README-en_US.md
+deleted file mode 100644
+index dd6678fed1142bea8d86b2dd92ad6a53332e592f..0000000000000000000000000000000000000000
+diff --git a/dist/index.cjs.js b/dist/index.cjs.js
+index b3b8208c8ac04c4e056115c5a0efa46a7fbfb39c..e43868b41b48cb56ecf7b4daa79cd3df29606ccf 100644
+--- a/dist/index.cjs.js
++++ b/dist/index.cjs.js
+@@ -1168,6 +1168,7 @@ function useRequest(service, options, plugins) {
+ 
+ function usePagination(service) {
+   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
++  let plugins = arguments[2]
+   const defaultPaginationOptions = {
+     currentKey: 'current',
+     pageSizeKey: 'pageSize',
+@@ -1196,7 +1197,7 @@ function usePagination(service) {
+     params,
+     run,
+     ...rest
+-  } = useRequest(service, finallyOptions);
++  } = useRequest(service, finallyOptions, plugins);
+   const paging = paginationParams => {
+     const [oldPaginationParams, ...restParams] = params.value || [];
+     const newPaginationParams = {
+diff --git a/dist/types/index.d.ts b/dist/types/index.d.ts
+index ac0223505e0f07a59c66e7e8fdf4f886c1575de5..537e21159124531a5bc7aafd8d461119bb9733a8 100644
+--- a/dist/types/index.d.ts
++++ b/dist/types/index.d.ts
+@@ -20,7 +20,7 @@ interface PaginationQueryResult<R, P extends unknown[]> extends QueryResult<R, P
+     changePageSize: (pageSize: number) => void;
+     changePagination: (current: number, pageSize: number) => void;
+ }
+-declare function usePagination<R, P extends unknown[] = any>(service: Service<R, P>, options?: PaginationOptions<R, P>): PaginationQueryResult<R, P>;
++declare function usePagination<R, P extends unknown[] = any>(service: Service<R, P>, options?: PaginationOptions<R, P>, plugins?: PluginImplementType<R, P>[]): PaginationQueryResult<R, P>;
+ 
+ type CacheData<R = any, P = any> = {
+     data: R;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 091bdbd8..e03aed48 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+patchedDependencies:
+  vue-request@2.0.4:
+    hash: imva7qnbqmkxs76or73cwn5jom
+    path: patches/vue-request@2.0.4.patch
+
 importers:
 
   .:
@@ -64,7 +69,7 @@ importers:
         version: 9.13.1(vue@3.4.37(typescript@5.5.4))
       vue-request:
         specifier: ^2.0.4
-        version: 2.0.4(vue@3.4.37(typescript@5.5.4))
+        version: 2.0.4(patch_hash=imva7qnbqmkxs76or73cwn5jom)(vue@3.4.37(typescript@5.5.4))
       vue-router:
         specifier: ^4.4.3
         version: 4.4.3(vue@3.4.37(typescript@5.5.4))
@@ -5174,7 +5179,7 @@ snapshots:
       '@vue/devtools-api': 6.6.1
       vue: 3.4.37(typescript@5.5.4)
 
-  vue-request@2.0.4(vue@3.4.37(typescript@5.5.4)):
+  vue-request@2.0.4(patch_hash=imva7qnbqmkxs76or73cwn5jom)(vue@3.4.37(typescript@5.5.4)):
     dependencies:
       vue: 3.4.37(typescript@5.5.4)
       vue-demi: 0.14.10(vue@3.4.37(typescript@5.5.4))
diff --git a/src/App.vue b/src/App.vue
index 2cae17bb..0f6a7049 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,7 +58,7 @@ import pageHeader from './components/pageHeader.vue'
 import { useI18n } from 'vue-i18n'
 import { ArcoI18nMessages } from './locale'
 import { useEndpointStore, isModuleEnable } from './stores/endpoint'
-import { computed, defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent, watch } from 'vue'
 import './transition.less'
 
 const endPointStore = useEndpointStore()
diff --git a/src/components/autoUpdateBtn.vue b/src/components/autoUpdateBtn.vue
index 2a4b6948..b351c227 100644
--- a/src/components/autoUpdateBtn.vue
+++ b/src/components/autoUpdateBtn.vue
@@ -1,11 +1,14 @@
 <template>
-  <a-popover :trigger="tigger === 'switch' ? 'click' : 'hover'">
+  <a-popover>
     <a-button
       class="auto-update-btn"
-      :class="ticktock ? 'ticktock' : ''"
+      :class="{
+        loading: loadingStatus === 'loading' || loadingHolding,
+        'loading-holding': loadingStatus === 'idle' && loadingHolding
+      }"
       :type="autoUpdate.autoUpdate ? 'primary' : 'outline'"
       :shape="'circle'"
-      @click="() => tigger !== 'switch' && switchAutoUpdate()"
+      @click="() => autoUpdate.refresh()"
       ref="autoUpdateBtn"
     >
       <icon-sync />
@@ -13,7 +16,7 @@
     <template #title>
       <a-space>
         <div>{{ t('navbar.action.autoUpdate') }}</div>
-        <a-switch v-if="tigger === 'switch'" v-model="autoUpdate.autoUpdate" />
+        <a-switch v-model="autoUpdate.autoUpdate" />
       </a-space>
     </template>
     <template #content>
@@ -26,47 +29,53 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { useAutoUpdate } from '@/stores/autoUpdate'
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 const { t, d } = useI18n()
 const autoUpdate = useAutoUpdate()
-const ticktock = ref(false)
 const autoUpdateBtn = ref()
+const loadingHolding = ref(false)
 
-const props = defineProps<{
-  tigger: 'click' | 'switch'
-}>()
+let eventAbortController: AbortController
 
-const tigger = computed(() => props.tigger)
+onMounted(() => {
+  eventAbortController = new AbortController()
+  autoUpdateBtn.value.$el.addEventListener(
+    'animationstart',
+    () => {
+      loadingHolding.value = true
+    },
+    { signal: eventAbortController.signal }
+  )
+  autoUpdateBtn.value.$el.addEventListener(
+    'animationend',
+    () => {
+      loadingHolding.value = false
+    },
+    { signal: eventAbortController.signal }
+  )
+})
 
-watch(
-  () => autoUpdate.lastUpdate,
-  () => {
-    ticktock.value = true
-    const timmer = setTimeout(() => {
-      ticktock.value = false
-    }, 300)
-    autoUpdateBtn.value?.$el?.addEventListener(
-      'transitionend',
-      () => {
-        clearTimeout(timmer)
-        ticktock.value = false
-      },
-      { once: true }
-    )
-  }
-)
+onUnmounted(() => {
+  eventAbortController.abort()
+})
 
-const switchAutoUpdate = () => {
-  autoUpdate.autoUpdate = !autoUpdate.autoUpdate
-}
+const loadingStatus = computed(() => autoUpdate.status)
 </script>
 
 <style lang="less" scoped>
+.auto-update-btn:not(.arco-btn-primary) {
+  border-color: rgb(var(--gray-2));
+  color: rgb(var(--gray-8));
+}
+
 .auto-update-btn,
 .auto-update-btn:hover {
   font-size: 16px;
-  &.ticktock {
-    animation: whirl 0.3s ease-in-out 1;
+  &.loading {
+    animation: whirl 0.25s linear infinite;
+    &.loading-holding {
+      animation-iteration-count: 1;
+    }
   }
 }
 
@@ -75,7 +84,7 @@ const switchAutoUpdate = () => {
     transform: rotate(0deg);
   }
   100% {
-    transform: rotate(360deg);
+    transform: rotate(180deg);
   }
 }
 </style>
diff --git a/src/components/pageFooter.vue b/src/components/pageFooter.vue
index 1dbe3642..6f2821d3 100644
--- a/src/components/pageFooter.vue
+++ b/src/components/pageFooter.vue
@@ -78,9 +78,9 @@ watch(hasNewVersion, () => {
       title: t('footer.newVersion'),
       content: t('footer.newVersion.body', { version: latestVersion.value?.tagName }),
       footer: () =>
-        h(Button, { href: latestVersion.value?.url, type: 'primary' }, [
+        h(Button, { href: latestVersion.value?.url, type: 'primary' }, () =>
           t('footer.newVersion.updateNow')
-        ]),
+        ),
       duration: 5000,
       closable: true
     })
diff --git a/src/components/pageHeader.vue b/src/components/pageHeader.vue
index 85902c8b..7b78f022 100644
--- a/src/components/pageHeader.vue
+++ b/src/components/pageHeader.vue
@@ -96,7 +96,7 @@
         </a-dropdown>
         <a-space class="right-side" wrap>
           <template v-if="!disableAutoUpdate">
-            <auto-update-btn :tigger="mobileLayout === 0 ? 'switch' : 'click'" />
+            <auto-update-btn />
           </template>
           <div class="lang-selector">
             <a-dropdown
diff --git a/src/components/settingsModal.vue b/src/components/settingsModal.vue
index 97e98b0a..8c10294f 100644
--- a/src/components/settingsModal.vue
+++ b/src/components/settingsModal.vue
@@ -95,7 +95,7 @@ watch(
     if (IncorrectTokenError.is(error) || NeedInitError.is(error)) {
       handleCancel()
     } else if (GetManifestError.is(error)) {
-      Message.error(t(error.message))
+      !error.isManual && Message.error(t(error.message))
       if (!showModal.value && error.isApiWrong) {
         showModal.value = true
         initForm()
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 00000000..b0366d09
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1 @@
+type Timeout = ReturnType<typeof setTimeout>;
\ No newline at end of file
diff --git a/src/locale/en-US.ts b/src/locale/en-US.ts
index 3dca33f9..05792ed7 100644
--- a/src/locale/en-US.ts
+++ b/src/locale/en-US.ts
@@ -35,6 +35,12 @@ export default {
   'router.moduleNotEnable.tips': 'Please enable the feature in the configuration file',
   'router.moduleNotEnable.viewDoc': 'View Documentation',
 
+  'service.networkErrorRetry': 'Network failure, will retry in {time}.',
+  'service.networkErrorRetry.loading': 'Network failure, try to reloading...',
+  'service.networkErrorRetry.second': '1 second | {count} seconds',
+  'service.networkErrorRetry.cancel': 'Cancel Retry',
+  'service.networkErrorRetry.retry': 'Retry',
+
   ...settingsLocale,
   ...plusLocale,
   ...dashboardPageLocale,
diff --git a/src/locale/index.ts b/src/locale/index.ts
index 6fd9f451..ece519a2 100644
--- a/src/locale/index.ts
+++ b/src/locale/index.ts
@@ -48,6 +48,11 @@ const datetimeFormat = {
     hour: 'numeric',
     minute: 'numeric',
     second: 'numeric'
+  },
+  // 用于秒级倒计时的显示
+  'short-second': {
+    minute: 'numeric',
+    second: 'numeric'
   }
 } as const
 
diff --git a/src/locale/zh-CN.ts b/src/locale/zh-CN.ts
index def29800..69bdf2b2 100644
--- a/src/locale/zh-CN.ts
+++ b/src/locale/zh-CN.ts
@@ -34,6 +34,12 @@ export default {
   'router.moduleNotEnable.tips': '请在配置文件中开启相关功能',
   'router.moduleNotEnable.viewDoc': '查看文档',
 
+  'service.networkErrorRetry': '网络连接失败，将于{time}后重试',
+  'service.networkErrorRetry.loading': '网络连接失败，正在重新连接',
+  'service.networkErrorRetry.second': '{count}秒',
+  'service.networkErrorRetry.cancel': '取消重试',
+  'service.networkErrorRetry.retry': '重试',
+
   ...settingsLocale,
   ...plusLocale,
   ...dashboardPageLocale,
diff --git a/src/main.ts b/src/main.ts
index 907843f9..a91ddf49 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import './assets/main.less'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { Message } from '@arco-design/web-vue'
+import { Notification } from '@arco-design/web-vue';
 import App from './App.vue'
 import router from './router'
 import i18n from './locale'
@@ -10,6 +11,7 @@ import { setGlobalOptions } from 'vue-request'
 
 const app = createApp(App)
 Message._context = app._context
+Notification._context = app._context
 
 setGlobalOptions({
   loadingDelay: 400,
diff --git a/src/service/version.ts b/src/service/version.ts
index 23be0570..9b59eb15 100644
--- a/src/service/version.ts
+++ b/src/service/version.ts
@@ -9,7 +9,8 @@ export class GetManifestError extends Error {
   name = GetManifestError.name
   constructor(
     message: string,
-    public isApiWrong = true
+    public isApiWrong = true,
+    public isManual = false
   ) {
     super(message)
   }
diff --git a/src/stores/autoUpdate.ts b/src/stores/autoUpdate.ts
index d8702f85..17a06e4c 100644
--- a/src/stores/autoUpdate.ts
+++ b/src/stores/autoUpdate.ts
@@ -1,16 +1,157 @@
-import { computed, ref } from 'vue'
+import { onUnmounted, readonly, ref, watch } from 'vue'
 import { defineStore } from 'pinia'
 import { useStorage } from '@vueuse/core'
+import { type PluginImplementType } from 'vue-request'
+type MapValue<T> = T extends Map<any, infer V> ? V : never
+type status = 'idle' | 'loading'
+class AutoUpdateMessageChannel extends MessageChannel {
+  private count = 0
+  private refreshMap: Map<
+    number,
+    {
+      status: status
+      refresh: () => void
+    }
+  > = new Map()
+
+  constructor(onChange: (status: status) => void) {
+    super()
+    let lastStatus: status = 'idle'
+    this.port1.onmessage = () => {
+      const status = this.getStatus()
+      if (status !== lastStatus) {
+        lastStatus = status
+        onChange(status)
+      }
+    }
+  }
+
+  getStatus() {
+    for (const item of this.refreshMap.values()) {
+      if (item.status === 'loading') {
+        return 'loading'
+      }
+    }
+    return 'idle'
+  }
+
+  doRefresh() {
+    this.refreshMap.forEach((item) => {
+      item.refresh()
+    })
+  }
+
+  polling(refresh: () => void) {
+    const currentId = this.count++
+    const item: MapValue<typeof this.refreshMap> = {
+      status: 'idle',
+      refresh
+    }
+    this.refreshMap.set(currentId, item)
+    return (action: 'loading' | 'idle' | 'unmont') => {
+      if (action === 'unmont') {
+        this.refreshMap.delete(currentId)
+      } else {
+        item.status = action
+      }
+      this.port2.postMessage(null)
+    }
+  }
+}
+const isServer = typeof window === 'undefined'
+const isNil = (val: unknown) => val === null || val === undefined
+const isDocumentVisibility = () => {
+  if (isServer || isNil(window.document?.visibilityState)) return true
+  return window.document.visibilityState === 'visible'
+}
+const isOnline = () => (!isServer && window.navigator?.onLine) ?? true
 
 export const useAutoUpdate = defineStore('autoUpdate', () => {
   const lastUpdate = ref(new Date())
   const autoUpdate = useStorage('autoUpdate.enable', true)
   const interval = useStorage('autoUpdate.interval', 3000)
-  const pollingInterval = computed(() => {
-    return autoUpdate.value ? interval.value : -1
+  const status = ref<status>('idle')
+
+  const stopPollingWhenHiddenOrOffline = ref(false)
+  const isKeepPolling = () => isDocumentVisibility() && isOnline()
+  const pollingTimer = ref<ReturnType<typeof polling>>()
+  const polling = (pollingFunc: () => void) => {
+    let timerId: Timeout | undefined
+    if (autoUpdate.value) {
+      if (isKeepPolling()) {
+        timerId = setTimeout(pollingFunc, interval.value)
+      } else {
+        // stop polling
+        stopPollingWhenHiddenOrOffline.value = true
+        return
+      }
+    }
+
+    return () => timerId && clearTimeout(timerId)
+  }
+  const channel = new AutoUpdateMessageChannel((value) => {
+    status.value = value
+    if (value === 'idle') {
+      lastUpdate.value = new Date()
+      pollingTimer.value = polling(() => channel.doRefresh())
+    } else {
+      pollingTimer.value?.()
+    }
   })
-  function renewLastUpdate() {
-    lastUpdate.value = new Date()
+
+  const rePolling = () => {
+    if (stopPollingWhenHiddenOrOffline.value && isKeepPolling()) {
+      channel.doRefresh()
+      stopPollingWhenHiddenOrOffline.value = false
+    }
+  }
+
+  watch(autoUpdate, () => {
+    if (pollingTimer.value) {
+      pollingTimer.value()
+    }
+    if (autoUpdate.value) {
+      pollingTimer.value = polling(() => channel.doRefresh())
+    }
+  })
+
+  window.addEventListener('visibilitychange', () => isDocumentVisibility() && rePolling(), false)
+  window.addEventListener('online', rePolling, false)
+
+  return {
+    lastUpdate,
+    autoUpdate,
+    interval,
+    status: readonly(status),
+    polling: channel.polling.bind(channel),
+    refresh: () => {
+      pollingTimer.value?.()
+      channel.doRefresh()
+    }
   }
-  return { lastUpdate, autoUpdate, interval, pollingInterval, renewLastUpdate }
 })
+
+export const useAutoUpdatePlugin = <R, P extends any[]>(
+  queryInstance: Parameters<PluginImplementType<R, P>>[0]
+): ReturnType<PluginImplementType<R, P>> => {
+  const autoupdateStore = useAutoUpdate()
+  const callbackRef = ref<ReturnType<AutoUpdateMessageChannel['polling']>>()
+
+  callbackRef.value = autoupdateStore.polling(() => queryInstance.context.refresh())
+
+  onUnmounted(() => {
+    callbackRef.value?.('unmont')
+  })
+
+  return {
+    onBefore() {
+      callbackRef.value?.('loading')
+    },
+    onCancel() {
+      callbackRef.value?.('idle')
+    },
+    onAfter() {
+      callbackRef.value?.('idle')
+    }
+  }
+}
diff --git a/src/stores/endpoint.ts b/src/stores/endpoint.ts
index 36eadcaf..c9b7f026 100644
--- a/src/stores/endpoint.ts
+++ b/src/stores/endpoint.ts
@@ -1,6 +1,12 @@
 import { defineStore } from 'pinia'
 import { useStorage } from '@vueuse/core'
-import { getLatestVersion, getManifest, getPBHPlusStatus, setPHBPlusKey } from '@/service/version'
+import {
+  getLatestVersion,
+  getManifest,
+  getPBHPlusStatus,
+  setPHBPlusKey,
+  GetManifestError
+} from '@/service/version'
 import { computed, readonly, ref, type DeepReadonly } from 'vue'
 import type { donateStatus, release } from '@/api/model/manifest'
 import { IncorrectTokenError, login, NeedInitError } from '@/service/login'
@@ -8,6 +14,7 @@ import { compare } from 'compare-versions'
 import type { mainfest } from '@/api/model/manifest'
 import { basePath } from '@/router'
 import mitt from 'mitt'
+import networkFailRetryNotication from '@/utils/networkRetry'
 
 function newPromiseLock<T>() {
   let resolve!: (value: T | PromiseLike<T>) => void
@@ -78,12 +85,28 @@ export const useEndpointStore = defineStore('endpoint', () => {
     }
   }
 
-  const setEndpoint = async (value: string) => {
+  const setEndpoint = async (
+    value: string,
+    options?: {
+      retryOnNetWorkFail?: boolean
+    }
+  ) => {
     status.value = 'checking'
     endpoint.value = value
     pushLock()
     try {
-      serverManifest.value = await getManifest(value)
+      serverManifest.value = await (options?.retryOnNetWorkFail
+        ? networkFailRetryNotication(
+            () =>
+              getManifest(value)
+                .then((res) => [false, res] as const)
+                .catch((err) => {
+                  if (GetManifestError.is(err) && !err.isApiWrong) return [true, null]
+                  else throw err
+                }),
+            () => new GetManifestError('Manual Cancel', true, true)
+          )
+        : getManifest(value))
       try {
         await setAuthToken(authToken.value)
       } catch (err) {
@@ -136,7 +159,7 @@ export const useEndpointStore = defineStore('endpoint', () => {
     }
   }
   // init
-  setEndpoint(endpoint.value)
+  setEndpoint(endpoint.value, { retryOnNetWorkFail: true })
 
   setTimeout(async () => getPlusStatus(), 1000)
   setTimeout(async () => setAccessToken(accessToken.value), 3000)
diff --git a/src/utils/networkRetry.ts b/src/utils/networkRetry.ts
new file mode 100644
index 00000000..1c5ce7e8
--- /dev/null
+++ b/src/utils/networkRetry.ts
@@ -0,0 +1,104 @@
+import { Notification, Space, Button } from '@arco-design/web-vue'
+import { h } from 'vue'
+import i18n from '../locale'
+
+function minDelay<T>(promise: Promise<T>, delay: number): Promise<T> {
+  return Promise.all([promise, new Promise((resolve) => setTimeout(resolve, delay))] as const).then(
+    ([result]) => result
+  )
+}
+
+function networkFailRetryNotication<T>(
+  retry: () => Promise<readonly [false, T] | [true, any]>,
+  onCancel: () => Error
+): Promise<T> {
+  const NetWorkFailRetryNotificationId = 'network-error-retry' as const
+
+  function newCounter(count: number, update: (count: number) => void) {
+    const timmer = setInterval(() => {
+      if (count <= 0) {
+        update(0)
+        clearInterval(timmer)
+      } else {
+        count -= 1
+        update(count)
+      }
+    }, 1000)
+    update(count)
+    return timmer
+  }
+
+  let timmer: Timeout
+
+  function renderNotication(props: {
+    count: number
+    loading?: boolean
+    handleRetry: () => void
+    handleCancel: () => void
+  }) {
+    const { t } = i18n.global
+    Notification.warning({
+      id: NetWorkFailRetryNotificationId,
+      duration: 0,
+      footer: () =>
+        h(Space, null, () => [
+          h(Button, { onClick: props.handleRetry, type: 'primary', loading: props.loading }, () =>
+            t('service.networkErrorRetry.retry')
+          ),
+          h(Button, { onClick: props.handleCancel, disabled: props.loading }, () =>
+            t('service.networkErrorRetry.cancel')
+          )
+        ]),
+      content:
+        props.count > 0
+          ? t('service.networkErrorRetry', {
+              time: t('service.networkErrorRetry.second', props.count)
+            })
+          : t('service.networkErrorRetry.loading')
+    })
+  }
+
+  return new Promise<T>((resolve, reject) => {
+    const handleCancel = () => {
+      reject(onCancel())
+      clearInterval(timmer)
+      Notification.remove(NetWorkFailRetryNotificationId)
+    }
+    const handleRetry = (init = false) => {
+      timmer && clearInterval(timmer)
+      !init &&
+        renderNotication({
+          count: 0,
+          loading: true,
+          handleRetry,
+          handleCancel
+        })
+      return minDelay(retry(), 1000)
+        .then(([needRetry, res]) => {
+          if (needRetry) newTimmer()
+          else {
+            resolve(res)
+            Notification.remove(NetWorkFailRetryNotificationId)
+          }
+        })
+        .catch((err) => {
+          reject(err)
+          Notification.remove(NetWorkFailRetryNotificationId)
+        })
+    }
+    const newTimmer = () => {
+      timmer = newCounter(15, (count) => {
+        if (count === 0) handleRetry()
+        else
+          renderNotication({
+            count,
+            handleRetry,
+            handleCancel
+          })
+      })
+    }
+    handleRetry(true)
+  })
+}
+
+export default networkFailRetryNotication
diff --git a/src/views/banlist/components/banList.vue b/src/views/banlist/components/banList.vue
index 2df3d9fc..d6fcf53d 100644
--- a/src/views/banlist/components/banList.vue
+++ b/src/views/banlist/components/banList.vue
@@ -2,19 +2,36 @@
   <a-space direction="vertical" fill>
     <a-space class="list-header" wrap>
       <a-typography-text>{{ t('page.banlist.banlist.description') }}</a-typography-text>
-      <a-input-search :style="{ width: '250px' }" :placeholder="t('page.banlist.banlist.searchPlaceHolder')"
-        @search="handleSearch" allow-clear search-button />
+      <a-input-search
+        :style="{ width: '250px' }"
+        :placeholder="t('page.banlist.banlist.searchPlaceHolder')"
+        @search="handleSearch"
+        allow-clear
+        search-button
+      />
     </a-space>
-    <a-list :virtualListProps="{
-      height: virtualListHeight
-    }" ref="banlist" @reach-bottom="loadMore" :scrollbar="false" :data="list">
+    <a-list
+      :virtualListProps="{
+        height: virtualListHeight
+      }"
+      ref="banlist"
+      @reach-bottom="loadMore"
+      :scrollbar="false"
+      :data="list"
+    >
       <template #item="{ item, index }">
-        <a-list-item :style="{ marginBottom: index === list.length - 1 && loadingMore ? '50px' : undefined }">
+        <a-list-item
+          :style="{ marginBottom: index === list.length - 1 && loadingMore ? '50px' : undefined }"
+        >
           <banListItem :item="item" @unban="refresh()" />
         </a-list-item>
       </template>
       <template #scroll-loading>
-        <a-empty v-if="list.length === 0" :style="{ height: `${virtualListHeight}px` }" />
+        <a-spin
+          v-if="loading"
+          :style="{ height: `${virtualListHeight}px`, display: 'flex', alignItems: 'center' }"
+        />
+        <a-empty v-else-if="list.length === 0" :style="{ height: `${virtualListHeight}px` }" />
         <div style="position: absolute; transform: translateY(-50%)" v-if="loadingMore">
           <a-typography-text v-if="bottom">{{
             t('page.banlist.banlist.bottomReached')
@@ -29,7 +46,7 @@
 <script setup lang="ts">
 import { useRequest } from 'vue-request'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useAutoUpdate } from '@/stores/autoUpdate'
+import { useAutoUpdatePlugin } from '@/stores/autoUpdate'
 import { useEndpointStore } from '@/stores/endpoint'
 import { getBanList } from '@/service/banList'
 import type { BanList } from '@/api/model/banlist'
@@ -40,7 +57,6 @@ import banListItem from './banListItem.vue'
 
 const { height } = useWindowSize()
 const banlist = ref()
-const autoUpdateState = useAutoUpdate()
 const endpointState = useEndpointStore()
 const bottom = ref(false)
 const limit = ref(5)
@@ -60,7 +76,9 @@ async function getMoreBanList(): Promise<BanList[]> {
     let match = false
     // load more data until the limit or get the same data with the top one
     while (newData.length < limit.value && !match) {
-      const moreData = await (await getBanList(step, newData[newData.length - 1]?.banMetadata.banAt)).data
+      const moreData = await (
+        await getBanList(step, newData[newData.length - 1]?.banMetadata.banAt)
+      ).data
       for (const item of moreData) {
         if (item.banMetadata.randomId !== data.value[0].banMetadata.randomId) {
           newData.push(item)
@@ -80,11 +98,13 @@ async function getMoreBanList(): Promise<BanList[]> {
   return data.value
 }
 
-const { data, refresh, run } = useRequest(getMoreBanList, {
-  pollingInterval: computed(() => autoUpdateState.pollingInterval),
-  onSuccess: autoUpdateState.renewLastUpdate,
-  manual: true
-})
+const { data, refresh, run, loading } = useRequest(
+  getMoreBanList,
+  {
+    manual: true
+  },
+  [useAutoUpdatePlugin]
+)
 const handleSearch = (value: string) => {
   if (value) {
     const index = data.value?.map((item) => item.address).findIndex((item) => item.includes(value))
@@ -103,10 +123,12 @@ const loadMore = async () => {
   if (data.value.length <= limit.value) {
     const newData: BanList[] = []
     while (newData.length + data.value.length < limit.value && !bottom.value) {
-      const moreData = (await getBanList(
-        step,
-        (newData[newData.length - 1] || data.value[data.value.length - 1])?.banMetadata.banAt
-      )).data
+      const moreData = (
+        await getBanList(
+          step,
+          (newData[newData.length - 1] || data.value[data.value.length - 1])?.banMetadata.banAt
+        )
+      ).data
       if (moreData.length < step) {
         bottom.value = true
       }
diff --git a/src/views/banlog/components/banlogTable.vue b/src/views/banlog/components/banlogTable.vue
index 68ebd78a..e623232c 100644
--- a/src/views/banlog/components/banlogTable.vue
+++ b/src/views/banlog/components/banlogTable.vue
@@ -72,37 +72,38 @@
 </template>
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useAutoUpdate } from '@/stores/autoUpdate'
+import { useAutoUpdatePlugin } from '@/stores/autoUpdate'
 import { useEndpointStore } from '@/stores/endpoint'
 import { usePagination } from 'vue-request'
 import { getBanlogs } from '@/service/banLogs'
 import { formatFileSize } from '@/utils/file'
 import { useI18n } from 'vue-i18n'
 const forceLoading = ref(true)
-const autoUpdateState = useAutoUpdate()
 const endpointState = useEndpointStore()
 const { t, d } = useI18n()
 const { data, total, current, loading, pageSize, changeCurrent, changePageSize, refresh } =
-  usePagination(getBanlogs, {
-    defaultParams: [
-      {
-        page: 1,
-        pageSize: 10
+  usePagination(
+    getBanlogs,
+    {
+      defaultParams: [
+        {
+          page: 1,
+          pageSize: 10
+        }
+      ],
+      pagination: {
+        currentKey: 'page',
+        pageSizeKey: 'pageSize',
+        totalKey: 'data.total'
+      },
+      cacheKey: (params) =>
+        `${endpointState.endpoint}-banlogs-${params?.[0].page || 1}-${params?.[0].pageSize || 10}`,
+      onAfter: () => {
+        forceLoading.value = false
       }
-    ],
-    pagination: {
-      currentKey: 'page',
-      pageSizeKey: 'pageSize',
-      totalKey: 'data.total'
     },
-    pollingInterval: computed(() => autoUpdateState.pollingInterval),
-    cacheKey: (params) =>
-      `${endpointState.endpoint}-banlogs-${params?.[0].page || 1}-${params?.[0].pageSize || 10}`,
-    onSuccess: autoUpdateState.renewLastUpdate,
-    onAfter: () => {
-      forceLoading.value = false
-    }
-  })
+    [useAutoUpdatePlugin]
+  )
 
 watch([pageSize, current], () => {
   forceLoading.value = true
diff --git a/src/views/dashboard/components/clientStatus.vue b/src/views/dashboard/components/clientStatus.vue
index d2d0d0d7..571c150a 100644
--- a/src/views/dashboard/components/clientStatus.vue
+++ b/src/views/dashboard/components/clientStatus.vue
@@ -40,27 +40,28 @@
 </template>
 <script setup lang="ts">
 import { useEndpointStore } from '@/stores/endpoint'
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import TorrentListModal from './torrentListModal.vue'
 import ClientStatusCard from './clientStatusCard.vue'
 import EditDownloaderModal from './editDownloaderModal.vue'
-import { useAutoUpdate } from '@/stores/autoUpdate'
+import { useAutoUpdatePlugin } from '@/stores/autoUpdate'
 import { useRequest } from 'vue-request'
 import { getDownloaders } from '@/service/downloaders'
 import { type Downloader } from '@/api/model/downloader'
 const { t } = useI18n()
 const endpointState = useEndpointStore()
-const autoUpdateState = useAutoUpdate()
 const data = ref<Downloader[]>()
-const { refresh, loading } = useRequest(getDownloaders, {
-  pollingInterval: computed(() => autoUpdateState.pollingInterval),
-  cacheKey: () => `${endpointState.endpoint}-downloader`,
-  onSuccess: (res) => {
-    data.value = res.data
-  }
-})
-
+const { refresh, loading } = useRequest(
+  getDownloaders,
+  {
+    cacheKey: () => `${endpointState.endpoint}-downloader`,
+    onSuccess: (res) => {
+      data.value = res.data
+    }
+  },
+  [useAutoUpdatePlugin]
+)
 watch(() => endpointState.endpoint, refresh)
 
 const torrentList = ref<InstanceType<typeof TorrentListModal>>()
diff --git a/src/views/dashboard/components/clientStatusCard.vue b/src/views/dashboard/components/clientStatusCard.vue
index 272a14e9..948d7792 100644
--- a/src/views/dashboard/components/clientStatusCard.vue
+++ b/src/views/dashboard/components/clientStatusCard.vue
@@ -94,7 +94,7 @@ import {
 import { useRequest } from 'vue-request'
 import { DeleteDownloader, getClientStatus } from '@/service/downloaders'
 import { computed } from 'vue'
-import { useAutoUpdate } from '@/stores/autoUpdate'
+import { useAutoUpdatePlugin } from '@/stores/autoUpdate'
 import { useEndpointStore } from '@/stores/endpoint'
 import { Message } from '@arco-design/web-vue'
 const { t } = useI18n()
@@ -128,22 +128,20 @@ const emits = defineEmits<{
 }>()
 
 const downloader = computed(() => props.downloader)
-const autoUpdateState = useAutoUpdate()
 const endpointState = useEndpointStore()
 
 const getStatusSafe = (status: ClientStatus | undefined): string[] =>
   statusMap[status?.lastStatus ?? ClientStatusEnum.UNKNOWN] ?? statusMap[ClientStatusEnum.UNKNOWN]
 
-const { data: client } = useRequest(getClientStatus, {
-  pollingInterval: computed(() => autoUpdateState.pollingInterval),
-  onSuccess: autoUpdateState.renewLastUpdate,
-  cacheKey: () => `${endpointState.endpoint}-clientStatus-${downloader.value.name}`,
-  defaultParams: [downloader.value.name],
-  refreshDeps: [() => downloader.value.name],
-  refreshDepsAction: () => {
-    autoUpdateState.renewLastUpdate()
-  }
-})
+const { data: client } = useRequest(
+  getClientStatus,
+  {
+    cacheKey: () => `${endpointState.endpoint}-clientStatus-${downloader.value.name}`,
+    defaultParams: [downloader.value.name],
+    refreshDeps: [() => downloader.value.name]
+  },
+  [useAutoUpdatePlugin]
+)
 
 const handleDelete = async () => {
   try {
diff --git a/src/views/dashboard/components/statisticInfo.vue b/src/views/dashboard/components/statisticInfo.vue
index ab210a9d..75a66fd6 100644
--- a/src/views/dashboard/components/statisticInfo.vue
+++ b/src/views/dashboard/components/statisticInfo.vue
@@ -3,31 +3,54 @@
     <a-card :title="t('page.dashboard.statics.currentStatus')" hoverable>
       <a-grid :cols="24" :row-gap="16" class="panel">
         <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 6 }">
-          <a-statistic :title="t('page.dashboard.statics.checked')" :value="current?.checkCounter"
-            :value-from="previous.checkCounter" animation show-group-separator>
+          <a-statistic
+            :title="t('page.dashboard.statics.checked')"
+            :value="current?.checkCounter"
+            :value-from="previous.checkCounter"
+            animation
+            show-group-separator
+          >
             <template #suffix>
-              <a-typography-text>&nbsp;{{ t('page.dashboard.statics.times') }}
-              </a-typography-text></template>
+              <a-typography-text
+                >&nbsp;{{ t('page.dashboard.statics.times') }}
+              </a-typography-text></template
+            >
           </a-statistic>
         </a-grid-item>
         <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 6 }">
-          <a-statistic :title="t('page.dashboard.statics.banPeer')" :value="current?.peerBanCounter"
-            :value-from="previous.peerBanCounter" animation show-group-separator>
-            <template #suffix><a-typography-text>&nbsp;{{ t('page.dashboard.statics.times') }} </a-typography-text>
+          <a-statistic
+            :title="t('page.dashboard.statics.banPeer')"
+            :value="current?.peerBanCounter"
+            :value-from="previous.peerBanCounter"
+            animation
+            show-group-separator
+          >
+            <template #suffix
+              ><a-typography-text>&nbsp;{{ t('page.dashboard.statics.times') }} </a-typography-text>
             </template>
           </a-statistic>
         </a-grid-item>
         <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 6 }">
-          <a-statistic :title="t('page.dashboard.statics.unbanPeer')" :value="current?.peerUnbanCounter"
-            :value-from="previous.peerUnbanCounter" animation show-group-separator>
+          <a-statistic
+            :title="t('page.dashboard.statics.unbanPeer')"
+            :value="current?.peerUnbanCounter"
+            :value-from="previous.peerUnbanCounter"
+            animation
+            show-group-separator
+          >
             <template #suffix>
               <a-typography-text>&nbsp;{{ t('page.dashboard.statics.times') }} </a-typography-text>
             </template>
           </a-statistic>
         </a-grid-item>
         <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 6 }">
-          <a-statistic :title="t('page.dashboard.statics.currentBanIps')" :value="current?.bannedIpCounter"
-            :value-from="previous.bannedIpCounter" animation show-group-separator>
+          <a-statistic
+            :title="t('page.dashboard.statics.currentBanIps')"
+            :value="current?.bannedIpCounter"
+            :value-from="previous.bannedIpCounter"
+            animation
+            show-group-separator
+          >
             <template #suffix>
               <a-typography-text>&nbsp;{{ t('page.dashboard.statics.number') }} </a-typography-text>
             </template>
@@ -39,15 +62,14 @@
 </template>
 <script setup lang="ts">
 import { useRequest } from 'vue-request'
-import { useAutoUpdate } from '@/stores/autoUpdate'
+import { useAutoUpdatePlugin } from '@/stores/autoUpdate'
 import { useEndpointStore } from '@/stores/endpoint'
 import { getStatistic } from '@/service/downloaders'
 import type { Statistic } from '@/api/model/statistic'
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { isEqual } from 'lodash'
 const { t } = useI18n()
-const autoUpdateState = useAutoUpdate()
 const endpointStore = useEndpointStore()
 const previous = ref<Statistic>({
   checkCounter: 0,
@@ -57,16 +79,18 @@ const previous = ref<Statistic>({
   bannedIpCounter: 0
 })
 const current = ref<Statistic>(previous.value)
-const { refresh } = useRequest(getStatistic, {
-  pollingInterval: computed(() => autoUpdateState.pollingInterval),
-  onSuccess: (data) => {
-    const tempPrevious = current.value
-    current.value = data.data // 先刷新
-    if (!isEqual(data, tempPrevious)) previous.value = tempPrevious
-    autoUpdateState.renewLastUpdate()
+const { refresh } = useRequest(
+  getStatistic,
+  {
+    onSuccess: (data) => {
+      const tempPrevious = current.value
+      current.value = data.data // 先刷新
+      if (!isEqual(data, tempPrevious)) previous.value = tempPrevious
+    },
+    cacheKey: () => `${endpointStore.endpoint}-statistic`
   },
-  cacheKey: () => `${endpointStore.endpoint}-statistic`
-})
+  [useAutoUpdatePlugin]
+)
 
 watch(() => endpointStore.endpoint, refresh)
 </script>
diff --git a/src/views/ranks/components/rankTable.vue b/src/views/ranks/components/rankTable.vue
index 29a4e347..6217b547 100644
--- a/src/views/ranks/components/rankTable.vue
+++ b/src/views/ranks/components/rankTable.vue
@@ -47,12 +47,10 @@
 </template>
 <script setup lang="ts">
 import { getRanks } from '@/service/ranks'
-import { computed } from 'vue'
 import { usePagination } from 'vue-request'
-import { useAutoUpdate } from '@/stores/autoUpdate'
+import { useAutoUpdatePlugin } from '@/stores/autoUpdate'
 import { useI18n } from 'vue-i18n'
 import type { TableColumnData } from '@arco-design/web-vue'
-const autoUpdateState = useAutoUpdate()
 const { t } = useI18n()
 const columns: TableColumnData[] = [
   {
@@ -66,21 +64,24 @@ const columns: TableColumnData[] = [
 ]
 
 const { data, total, current, loading, pageSize, changeCurrent, changePageSize, run } =
-  usePagination(getRanks, {
-    defaultParams: [
-      {
-        page: 1,
-        pageSize: 20
+  usePagination(
+    getRanks,
+    {
+      defaultParams: [
+        {
+          page: 1,
+          pageSize: 20
+        }
+      ],
+      pagination: {
+        currentKey: 'page',
+        pageSizeKey: 'pageSize',
+        totalKey: 'data.total'
       }
-    ],
-    pagination: {
-      currentKey: 'page',
-      pageSizeKey: 'pageSize',
-      totalKey: 'data.total'
     },
-    pollingInterval: computed(() => autoUpdateState.pollingInterval),
-    onSuccess: autoUpdateState.renewLastUpdate
-  })
+    [useAutoUpdatePlugin]
+  )
+
 const handleSearch = (filter: string) => {
   run({
     page: 1,
diff --git a/src/views/rule-metrics/components/ruleMetricsTable.vue b/src/views/rule-metrics/components/ruleMetricsTable.vue
index d8094496..14a9f225 100644
--- a/src/views/rule-metrics/components/ruleMetricsTable.vue
+++ b/src/views/rule-metrics/components/ruleMetricsTable.vue
@@ -1,9 +1,18 @@
 <template>
-  <a-table :columns="columns" :data="data?.data.data" size="large" :loading="loading" column-resizable
-    filter-icon-align-left :pagination="{ showPageSize: true, baseSize: 4, bufferSize: 1 }">
+  <a-table
+    :columns="columns"
+    :data="data?.data.data"
+    size="large"
+    :loading="loading"
+    column-resizable
+    filter-icon-align-left
+    :pagination="{ showPageSize: true, baseSize: 4, bufferSize: 1 }"
+  >
     <template #empty> <a-empty /> </template>
     <template #type="{ record }">
-      <a-tag :color="getTagColor(record.type)">{{ data?.data.dict[record.type] ?? record.type }}</a-tag>
+      <a-tag :color="getTagColor(record.type)">{{
+        data?.data.dict[record.type] ?? record.type
+      }}</a-tag>
     </template>
     <template #ruleName="{ record }">
       <a-typography-text code>
@@ -13,9 +22,15 @@
     <template #hit-filter="{ filterValue, handleFilterConfirm, handleFilterReset }">
       <div class="search-box">
         <a-space>
-          <a-switch v-model="filterValue[0]" checked-value="yes" unchecked-value="no" @change="(value: string | number | boolean) =>
-              value === 'yes' ? handleFilterConfirm() : handleFilterReset()
-            " />
+          <a-switch
+            v-model="filterValue[0]"
+            checked-value="yes"
+            unchecked-value="no"
+            @change="
+              (value: string | number | boolean) =>
+                value === 'yes' ? handleFilterConfirm() : handleFilterReset()
+            "
+          />
           <a-typography-text>{{ t('page.ruleMetrices.metricsTable.filter') }}</a-typography-text>
         </a-space>
       </div>
@@ -24,22 +39,23 @@
 </template>
 <script setup lang="ts">
 import { useRequest } from 'vue-request'
-import { useAutoUpdate } from '@/stores/autoUpdate'
+import { useAutoUpdatePlugin } from '@/stores/autoUpdate'
 import { useEndpointStore } from '@/stores/endpoint'
-import { computed, watch } from 'vue'
+import { watch } from 'vue'
 import { getRuleStatic } from '@/service/ruleStatics'
 import type { RuleMetric } from '@/api/model/ruleStatics'
 import { useI18n } from 'vue-i18n'
 import type { TableColumnData } from '@arco-design/web-vue'
 import { getColor } from '@/utils/color'
-const autoUpdateState = useAutoUpdate()
 const { t } = useI18n()
 const endpointStore = useEndpointStore()
-const { data, refresh, loading } = useRequest(getRuleStatic, {
-  pollingInterval: computed(() => autoUpdateState.pollingInterval),
-  onSuccess: autoUpdateState.renewLastUpdate,
-  cacheKey: () => `${endpointStore.endpoint}-ruleStatic`
-})
+const { data, refresh, loading } = useRequest(
+  getRuleStatic,
+  {
+    cacheKey: () => `${endpointStore.endpoint}-ruleStatic`
+  },
+  [useAutoUpdatePlugin]
+)
 
 const getTagColor = (value: string): string => {
   if (!data.value?.data.dict[value]) {