From a56720855cf0c3ca38aea6da2a24c73e57ec1342 Mon Sep 17 00:00:00 2001
From: a408665321 <408665321@qq.com>
Date: Tue, 29 Sep 2026 11:51:09 +0800
Subject: [PATCH] fix(ui): refresh countdown when tab becomes visible

---
 .../components/account/UsageProgressBar.vue   |  7 ++++++-
 .../__tests__/UsageProgressBar.spec.ts        | 20 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/account/UsageProgressBar.vue b/frontend/src/components/account/UsageProgressBar.vue
index 1f7cde1645..a87b1da350 100644
--- a/frontend/src/components/account/UsageProgressBar.vue
+++ b/frontend/src/components/account/UsageProgressBar.vue
@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useIntervalFn } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import type { WindowStats } from '@/types'
@@ -97,6 +97,11 @@ const { pause: pauseClock, resume: resumeClock } = useIntervalFn(
   { immediate: false },
 )
 if (props.resetsAt) resumeClock()
+const refreshClockWhenVisible = () => {
+  if (!document.hidden && props.resetsAt) now.value = new Date()
+}
+onMounted(() => document.addEventListener('visibilitychange', refreshClockWhenVisible))
+onUnmounted(() => document.removeEventListener('visibilitychange', refreshClockWhenVisible))
 watch(
   () => props.resetsAt,
   (val) => {
diff --git a/frontend/src/components/account/__tests__/UsageProgressBar.spec.ts b/frontend/src/components/account/__tests__/UsageProgressBar.spec.ts
index e92268e597..8ef01a7231 100644
--- a/frontend/src/components/account/__tests__/UsageProgressBar.spec.ts
+++ b/frontend/src/components/account/__tests__/UsageProgressBar.spec.ts
@@ -68,6 +68,26 @@ describe('UsageProgressBar', () => {
     expect(wrapper.text()).not.toContain('usage.resetNow')
   })
 
+  it('refreshes an active window countdown when a background tab becomes visible', async () => {
+    const wrapper = mount(UsageProgressBar, {
+      props: {
+        label: '5h',
+        utilization: 12,
+        resetsAt: '2026-03-17T02:30:00Z',
+        color: 'indigo'
+      }
+    })
+
+    expect(wrapper.text()).toContain('2h 30m')
+    // Background tabs can throttle the periodic timer while time advances.
+    vi.setSystemTime(new Date('2026-03-17T01:00:00Z'))
+    document.dispatchEvent(new Event('visibilitychange'))
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('1h 30m')
+    wrapper.unmount()
+  })
+
   it('resetsAt 已过期且利用率大于 0 时显示「待刷新」', () => {
     const wrapper = mount(UsageProgressBar, {
       props: {