fix: 优化自动刷新交互和ESC关闭样式

- 自动刷新改为按钮切换模式，移除独立Switch开关
- 自动刷新间隔从30s改为10s
- ESC关闭弹窗后blur焦点，避免样式残留

frontend/src/composables/useEscapeKey.ts

@@ -45,6 +45,11 @@ export function useEscapeKey(
     // 执行回调
     callback()
 
+    // 移除当前元素的焦点，避免残留样式
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur()
+    }
+
     // 如果只监听一次，则移除监听器
     if (once) {
       removeEventListener()

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')"
+      <!-- 自动刷新按钮 -->
+      <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' : ''"
         />
-
-      <!-- 自动刷新开关 -->
-      <div class="flex items-center gap-2">
-        <Switch
-          :model-value="autoRefresh"
-          @update:model-value="$emit('update:autoRefresh', $event)"
-        />
-        <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'

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) // 全局自动刷新开关
 
 // 轮询活跃请求状态（轻量级，只更新状态变化的记录）