重构自动刷新

package.json

@@ -66,5 +66,10 @@
   "engines": {
     "node": ">=20.0.0",
     "pnpm": ">=9.0.0"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
+    }
   }
 }

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;

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()

src/components/autoUpdateBtn.vue

@@ -1,19 +1,22 @@
 <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 />
     </a-button>
     <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>

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
     })

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

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()

src/global.d.ts

@@ -0,0 +1 @@
+type Timeout = ReturnType<typeof setTimeout>;

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,

src/locale/index.ts

@@ -48,6 +48,11 @@ const datetimeFormat = {
     hour: 'numeric',
     minute: 'numeric',
     second: 'numeric'
+  },
+  // 用于秒级倒计时的显示
+  'short-second': {
+    minute: 'numeric',
+    second: 'numeric'
   }
 } as const
 

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,

src/main.ts

@@ -3,13 +3,15 @@ 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'
 import { setGlobalOptions } from 'vue-request'
 
 const app = createApp(App)
 Message._context = app._context
+Notification._context = app._context
 
 setGlobalOptions({
   loadingDelay: 400,

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)
   }