From 7553b0da8055539d86fc6e754e6562f610c11f18 Mon Sep 17 00:00:00 2001
From: fawney19 <elky0401@gmail.com>
Date: Fri, 19 Dec 2025 18:41:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=E4=BA=A4=E4=BA=92=E5=92=8CESC=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 自动刷新改为按钮切换模式，移除独立Switch开关
- 自动刷新间隔从30s改为10s
- ESC关闭弹窗后blur焦点，避免样式残留
---
 frontend/src/composables/useEscapeKey.ts      |  5 +++
 .../usage/components/UsageRecordsTable.vue    | 33 +++++++++----------
 frontend/src/views/shared/Usage.vue           |  2 +-
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/frontend/src/composables/useEscapeKey.ts b/frontend/src/composables/useEscapeKey.ts
index acb4094..4d85c65 100644
--- a/frontend/src/composables/useEscapeKey.ts
+++ b/frontend/src/composables/useEscapeKey.ts
@@ -45,6 +45,11 @@ export function useEscapeKey(
     // 执行回调
     callback()
 
+    // 移除当前元素的焦点，避免残留样式
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur()
+    }
+
     // 如果只监听一次，则移除监听器
     if (once) {
       removeEventListener()
diff --git a/frontend/src/features/usage/components/UsageRecordsTable.vue b/frontend/src/features/usage/components/UsageRecordsTable.vue
index b6d2a73..dc28d17 100644
--- a/frontend/src/features/usage/components/UsageRecordsTable.vue
+++ b/frontend/src/features/usage/components/UsageRecordsTable.vue
@@ -136,23 +136,20 @@
       <!-- 分隔线 -->
       <div class="hidden sm:block h-4 w-px bg-border" />
 
-      <!-- 刷新按钮 -->
-      <RefreshButton
-        v-if="!autoRefresh"
-        :loading="loading"
-        @click="$emit('refresh')"
-      />
-
-      <!-- 自动刷新开关 -->
-      <div class="flex items-center gap-2">
-        <Switch
-          :model-value="autoRefresh"
-          @update:model-value="$emit('update:autoRefresh', $event)"
+      <!-- 自动刷新按钮 -->
+      <Button
+        variant="ghost"
+        size="icon"
+        class="h-8 w-8"
+        :class="autoRefresh ? 'text-primary' : ''"
+        :title="autoRefresh ? '点击关闭自动刷新' : '点击开启自动刷新（每10秒刷新）'"
+        @click="$emit('update:autoRefresh', !autoRefresh)"
+      >
+        <RefreshCcw
+          class="w-3.5 h-3.5"
+          :class="autoRefresh ? 'animate-spin' : ''"
         />
-        <label class="text-xs text-muted-foreground cursor-pointer select-none" @click="$emit('update:autoRefresh', !autoRefresh)">
-          自动刷新
-        </label>
-      </div>
+      </Button>
     </template>
 
     <Table>
@@ -420,6 +417,7 @@ import { ref, computed, onUnmounted, watch } from 'vue'
 import {
   TableCard,
   Badge,
+  Button,
   Select,
   SelectTrigger,
   SelectValue,
@@ -432,9 +430,8 @@ import {
   TableHead,
   TableCell,
   Pagination,
-  RefreshButton,
-  Switch,
 } from '@/components/ui'
+import { RefreshCcw } from 'lucide-vue-next'
 import { formatTokens, formatCurrency } from '@/utils/format'
 import { formatDateTime } from '../composables'
 import { useRowClick } from '@/composables/useRowClick'
diff --git a/frontend/src/views/shared/Usage.vue b/frontend/src/views/shared/Usage.vue
index 40d7507..8156743 100644
--- a/frontend/src/views/shared/Usage.vue
+++ b/frontend/src/views/shared/Usage.vue
@@ -218,7 +218,7 @@ const hasActiveRequests = computed(() => activeRequestIds.value.length > 0)
 let autoRefreshTimer: ReturnType<typeof setInterval> | null = null
 let globalAutoRefreshTimer: ReturnType<typeof setInterval> | null = null
 const AUTO_REFRESH_INTERVAL = 1000 // 1秒刷新一次（用于活跃请求）
-const GLOBAL_AUTO_REFRESH_INTERVAL = 30000 // 30秒刷新一次（全局自动刷新）
+const GLOBAL_AUTO_REFRESH_INTERVAL = 10000 // 10秒刷新一次（全局自动刷新）
 const globalAutoRefresh = ref(false) // 全局自动刷新开关
 
 // 轮询活跃请求状态（轻量级，只更新状态变化的记录）