merge: 合并主分支改动并保留 ops 监控实现

合并 main 分支的最新改动到 ops 监控分支。
冲突解决策略：保留当前分支的 ops 相关改动，接受主分支的其他改动。

保留的 ops 改动：
- 运维监控配置和依赖注入
- 运维监控 API 处理器和中间件
- 运维监控服务层和数据访问层
- 运维监控前端界面和状态管理

接受的主分支改动：
- Linux DO OAuth 集成
- 账号过期功能
- IP 地址限制功能
- 用量统计优化
- 其他 bug 修复和功能改进

frontend/src/views/admin/AccountsView.vue

@@ -6,7 +6,8 @@
           <AccountTableFilters
             v-model:searchQuery="params.search"
             :filters="params"
-            @change="reload"
+            @update:filters="(newFilters) => Object.assign(params, newFilters)"
+            @change="debouncedReload"
             @update:searchQuery="debouncedReload"
           />
           <AccountTableActions
@@ -18,7 +19,7 @@
         </div>
       </template>
       <template #table>
-        <AccountBulkActionsBar :selected-ids="selIds" @delete="handleBulkDelete" @edit="showBulkEdit = true" @clear="selIds = []" @select-page="selectPage" />
+        <AccountBulkActionsBar :selected-ids="selIds" @delete="handleBulkDelete" @edit="showBulkEdit = true" @clear="selIds = []" @select-page="selectPage" @toggle-schedulable="handleBulkToggleSchedulable" />
         <DataTable :columns="cols" :data="accounts" :loading="loading">
           <template #cell-select="{ row }">
             <input type="checkbox" :checked="selIds.includes(row.id)" @change="toggleSel(row.id)" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500" />
@@ -69,6 +70,25 @@
           <template #cell-last_used_at="{ value }">
             <span class="text-sm text-gray-500 dark:text-dark-400">{{ formatRelativeTime(value) }}</span>
           </template>
+          <template #cell-expires_at="{ row, value }">
+            <div class="flex flex-col items-start gap-1">
+              <span class="text-sm text-gray-500 dark:text-dark-400">{{ formatExpiresAt(value) }}</span>
+              <div v-if="isExpired(value) || (row.auto_pause_on_expired && value)" class="flex items-center gap-1">
+                <span
+                  v-if="isExpired(value)"
+                  class="inline-flex items-center rounded-md bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-300"
+                >
+                  {{ t('admin.accounts.expired') }}
+                </span>
+                <span
+                  v-if="row.auto_pause_on_expired && value"
+                  class="inline-flex items-center rounded-md bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300"
+                >
+                  {{ t('admin.accounts.autoPauseOnExpired') }}
+                </span>
+              </div>
+            </div>
+          </template>
           <template #cell-actions="{ row }">
             <div class="flex items-center gap-1">
               <button @click="handleEdit(row)" class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400">
@@ -87,7 +107,7 @@
           </template>
         </DataTable>
       </template>
-      <template #pagination><Pagination v-if="pagination.total > 0" :page="pagination.page" :total="pagination.total" :page-size="pagination.page_size" @update:page="handlePageChange" /></template>
+      <template #pagination><Pagination v-if="pagination.total > 0" :page="pagination.page" :total="pagination.total" :page-size="pagination.page_size" @update:page="handlePageChange" @update:pageSize="handlePageSizeChange" /></template>
     </TablePageLayout>
     <CreateAccountModal :show="showCreate" :proxies="proxies" :groups="groups" @close="showCreate = false" @created="reload" />
     <EditAccountModal :show="showEdit" :account="edAcc" :proxies="proxies" :groups="groups" @close="showEdit = false" @updated="load" />
@@ -127,7 +147,7 @@ import AccountUsageCell from '@/components/account/AccountUsageCell.vue'
 import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
 import GroupBadge from '@/components/common/GroupBadge.vue'
 import PlatformTypeBadge from '@/components/common/PlatformTypeBadge.vue'
-import { formatRelativeTime } from '@/utils/format'
+import { formatDateTime, formatRelativeTime } from '@/utils/format'
 import type { Account, Proxy, Group } from '@/types'
 
 const { t } = useI18n()
@@ -155,7 +175,7 @@ const statsAcc = ref<Account | null>(null)
 const togglingSchedulable = ref<number | null>(null)
 const menu = reactive<{show:boolean, acc:Account|null, pos:{top:number, left:number}|null}>({ show: false, acc: null, pos: null })
 
-const { items: accounts, loading, params, pagination, load, reload, debouncedReload, handlePageChange } = useTableLoader<Account, any>({
+const { items: accounts, loading, params, pagination, load, reload, debouncedReload, handlePageChange, handlePageSizeChange } = useTableLoader<Account, any>({
   fetchFn: adminAPI.accounts.list,
   initialParams: { platform: '', type: '', status: '', search: '' }
 })
@@ -177,6 +197,7 @@ const cols = computed(() => {
     { key: 'usage', label: t('admin.accounts.columns.usageWindows'), sortable: false },
     { key: 'priority', label: t('admin.accounts.columns.priority'), sortable: true },
     { key: 'last_used_at', label: t('admin.accounts.columns.lastUsed'), sortable: true },
+    { key: 'expires_at', label: t('admin.accounts.columns.expiresAt'), sortable: true },
     { key: 'notes', label: t('admin.accounts.columns.notes'), sortable: false },
     { key: 'actions', label: t('admin.accounts.columns.actions'), sortable: false }
   )
@@ -188,6 +209,21 @@ const openMenu = (a: Account, e: MouseEvent) => { menu.acc = a; menu.pos = { top
 const toggleSel = (id: number) => { const i = selIds.value.indexOf(id); if(i === -1) selIds.value.push(id); else selIds.value.splice(i, 1) }
 const selectPage = () => { selIds.value = [...new Set([...selIds.value, ...accounts.value.map(a => a.id)])] }
 const handleBulkDelete = async () => { if(!confirm(t('common.confirm'))) return; try { await Promise.all(selIds.value.map(id => adminAPI.accounts.delete(id))); selIds.value = []; reload() } catch (error) { console.error('Failed to bulk delete accounts:', error) } }
+const handleBulkToggleSchedulable = async (schedulable: boolean) => {
+  const count = selIds.value.length
+  try {
+    const result = await adminAPI.accounts.bulkUpdate(selIds.value, { schedulable });
+    const message = schedulable
+      ? t('admin.accounts.bulkSchedulableEnabled', { count: result.success || count })
+      : t('admin.accounts.bulkSchedulableDisabled', { count: result.success || count });
+    appStore.showSuccess(message);
+    selIds.value = [];
+    reload()
+  } catch (error) {
+    console.error('Failed to bulk toggle schedulable:', error);
+    appStore.showError(t('common.error'))
+  }
+}
 const handleBulkUpdated = () => { showBulkEdit.value = false; selIds.value = []; reload() }
 const closeTestModal = () => { showTest.value = false; testingAcc.value = null }
 const closeStatsModal = () => { showStats.value = false; statsAcc.value = null }
@@ -203,6 +239,25 @@ const confirmDelete = async () => { if(!deletingAcc.value) return; try { await a
 const handleToggleSchedulable = async (a: Account) => { togglingSchedulable.value = a.id; try { await adminAPI.accounts.setSchedulable(a.id, !a.schedulable); load() } finally { togglingSchedulable.value = null } }
 const handleShowTempUnsched = (a: Account) => { tempUnschedAcc.value = a; showTempUnsched.value = true }
 const handleTempUnschedReset = async () => { if(!tempUnschedAcc.value) return; try { await adminAPI.accounts.clearError(tempUnschedAcc.value.id); showTempUnsched.value = false; tempUnschedAcc.value = null; load() } catch (error) { console.error('Failed to reset temp unscheduled:', error) } }
+const formatExpiresAt = (value: number | null) => {
+  if (!value) return '-'
+  return formatDateTime(
+    new Date(value * 1000),
+    {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    },
+    'sv-SE'
+  )
+}
+const isExpired = (value: number | null) => {
+  if (!value) return false
+  return value * 1000 <= Date.now()
+}
 
 onMounted(async () => { load(); try { const [p, g] = await Promise.all([adminAPI.proxies.getAll(), adminAPI.groups.getAll()]); proxies.value = p; groups.value = g } catch (error) { console.error('Failed to load proxies/groups:', error) } })
 </script>

frontend/src/views/admin/GroupsView.vue

@@ -16,6 +16,7 @@
                 type="text"
                 :placeholder="t('admin.groups.searchGroups')"
                 class="input pl-10"
+                @input="handleSearch"
               />
             </div>
           <Select
@@ -64,7 +65,7 @@
       </template>
 
       <template #table>
-        <DataTable :columns="columns" :data="displayedGroups" :loading="loading">
+        <DataTable :columns="columns" :data="groups" :loading="loading">
           <template #cell-name="{ value }">
             <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
           </template>
@@ -403,6 +404,62 @@
           </div>
         </div>
 
+        <!-- Claude Code 客户端限制（仅 anthropic 平台） -->
+        <div v-if="createForm.platform === 'anthropic'" class="border-t pt-4">
+          <div class="mb-1.5 flex items-center gap-1">
+            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+              {{ t('admin.groups.claudeCode.title') }}
+            </label>
+            <!-- Help Tooltip -->
+            <div class="group relative inline-flex">
+              <Icon
+                name="questionCircle"
+                size="sm"
+                :stroke-width="2"
+                class="cursor-help text-gray-400 transition-colors hover:text-primary-500 dark:text-gray-500 dark:hover:text-primary-400"
+              />
+              <div class="pointer-events-none absolute bottom-full left-0 z-50 mb-2 w-72 opacity-0 transition-all duration-200 group-hover:pointer-events-auto group-hover:opacity-100">
+                <div class="rounded-lg bg-gray-900 p-3 text-white shadow-lg dark:bg-gray-800">
+                  <p class="text-xs leading-relaxed text-gray-300">
+                    {{ t('admin.groups.claudeCode.tooltip') }}
+                  </p>
+                  <div class="absolute -bottom-1.5 left-3 h-3 w-3 rotate-45 bg-gray-900 dark:bg-gray-800"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <button
+              type="button"
+              @click="createForm.claude_code_only = !createForm.claude_code_only"
+              :class="[
+                'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
+                createForm.claude_code_only ? 'bg-primary-500' : 'bg-gray-300 dark:bg-dark-600'
+              ]"
+            >
+              <span
+                :class="[
+                  'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
+                  createForm.claude_code_only ? 'translate-x-6' : 'translate-x-1'
+                ]"
+              />
+            </button>
+            <span class="text-sm text-gray-500 dark:text-gray-400">
+              {{ createForm.claude_code_only ? t('admin.groups.claudeCode.enabled') : t('admin.groups.claudeCode.disabled') }}
+            </span>
+          </div>
+          <!-- 降级分组选择（仅当启用 claude_code_only 时显示） -->
+          <div v-if="createForm.claude_code_only" class="mt-3">
+            <label class="input-label">{{ t('admin.groups.claudeCode.fallbackGroup') }}</label>
+            <Select
+              v-model="createForm.fallback_group_id"
+              :options="fallbackGroupOptions"
+              :placeholder="t('admin.groups.claudeCode.noFallback')"
+            />
+            <p class="input-hint">{{ t('admin.groups.claudeCode.fallbackHint') }}</p>
+          </div>
+        </div>
+
       </form>
 
       <template #footer>
@@ -648,6 +705,62 @@
           </div>
         </div>
 
+        <!-- Claude Code 客户端限制（仅 anthropic 平台） -->
+        <div v-if="editForm.platform === 'anthropic'" class="border-t pt-4">
+          <div class="mb-1.5 flex items-center gap-1">
+            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+              {{ t('admin.groups.claudeCode.title') }}
+            </label>
+            <!-- Help Tooltip -->
+            <div class="group relative inline-flex">
+              <Icon
+                name="questionCircle"
+                size="sm"
+                :stroke-width="2"
+                class="cursor-help text-gray-400 transition-colors hover:text-primary-500 dark:text-gray-500 dark:hover:text-primary-400"
+              />
+              <div class="pointer-events-none absolute bottom-full left-0 z-50 mb-2 w-72 opacity-0 transition-all duration-200 group-hover:pointer-events-auto group-hover:opacity-100">
+                <div class="rounded-lg bg-gray-900 p-3 text-white shadow-lg dark:bg-gray-800">
+                  <p class="text-xs leading-relaxed text-gray-300">
+                    {{ t('admin.groups.claudeCode.tooltip') }}
+                  </p>
+                  <div class="absolute -bottom-1.5 left-3 h-3 w-3 rotate-45 bg-gray-900 dark:bg-gray-800"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <button
+              type="button"
+              @click="editForm.claude_code_only = !editForm.claude_code_only"
+              :class="[
+                'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
+                editForm.claude_code_only ? 'bg-primary-500' : 'bg-gray-300 dark:bg-dark-600'
+              ]"
+            >
+              <span
+                :class="[
+                  'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
+                  editForm.claude_code_only ? 'translate-x-6' : 'translate-x-1'
+                ]"
+              />
+            </button>
+            <span class="text-sm text-gray-500 dark:text-gray-400">
+              {{ editForm.claude_code_only ? t('admin.groups.claudeCode.enabled') : t('admin.groups.claudeCode.disabled') }}
+            </span>
+          </div>
+          <!-- 降级分组选择（仅当启用 claude_code_only 时显示） -->
+          <div v-if="editForm.claude_code_only" class="mt-3">
+            <label class="input-label">{{ t('admin.groups.claudeCode.fallbackGroup') }}</label>
+            <Select
+              v-model="editForm.fallback_group_id"
+              :options="fallbackGroupOptionsForEdit"
+              :placeholder="t('admin.groups.claudeCode.noFallback')"
+            />
+            <p class="input-hint">{{ t('admin.groups.claudeCode.fallbackHint') }}</p>
+          </div>
+        </div>
+
       </form>
 
       <template #footer>
@@ -774,6 +887,35 @@ const subscriptionTypeOptions = computed(() => [
   { value: 'subscription', label: t('admin.groups.subscription.subscription') }
 ])
 
+// 降级分组选项（创建时）- 仅包含 anthropic 平台且未启用 claude_code_only 的分组
+const fallbackGroupOptions = computed(() => {
+  const options: { value: number | null; label: string }[] = [
+    { value: null, label: t('admin.groups.claudeCode.noFallback') }
+  ]
+  const eligibleGroups = groups.value.filter(
+    (g) => g.platform === 'anthropic' && !g.claude_code_only && g.status === 'active'
+  )
+  eligibleGroups.forEach((g) => {
+    options.push({ value: g.id, label: g.name })
+  })
+  return options
+})
+
+// 降级分组选项（编辑时）- 排除自身
+const fallbackGroupOptionsForEdit = computed(() => {
+  const options: { value: number | null; label: string }[] = [
+    { value: null, label: t('admin.groups.claudeCode.noFallback') }
+  ]
+  const currentId = editingGroup.value?.id
+  const eligibleGroups = groups.value.filter(
+    (g) => g.platform === 'anthropic' && !g.claude_code_only && g.status === 'active' && g.id !== currentId
+  )
+  eligibleGroups.forEach((g) => {
+    options.push({ value: g.id, label: g.name })
+  })
+  return options
+})
+
 const groups = ref<Group[]>([])
 const loading = ref(false)
 const searchQuery = ref('')
@@ -791,16 +933,6 @@ const pagination = reactive({
 
 let abortController: AbortController | null = null
 
-const displayedGroups = computed(() => {
-  const q = searchQuery.value.trim().toLowerCase()
-  if (!q) return groups.value
-  return groups.value.filter((group) => {
-    const name = group.name?.toLowerCase?.() ?? ''
-    const description = group.description?.toLowerCase?.() ?? ''
-    return name.includes(q) || description.includes(q)
-  })
-})
-
 const showCreateModal = ref(false)
 const showEditModal = ref(false)
 const showDeleteDialog = ref(false)
@@ -821,7 +953,10 @@ const createForm = reactive({
   // 图片生成计费配置（仅 antigravity 平台使用）
   image_price_1k: null as number | null,
   image_price_2k: null as number | null,
-  image_price_4k: null as number | null
+  image_price_4k: null as number | null,
+  // Claude Code 客户端限制（仅 anthropic 平台使用）
+  claude_code_only: false,
+  fallback_group_id: null as number | null
 })
 
 const editForm = reactive({
@@ -838,7 +973,10 @@ const editForm = reactive({
   // 图片生成计费配置（仅 antigravity 平台使用）
   image_price_1k: null as number | null,
   image_price_2k: null as number | null,
-  image_price_4k: null as number | null
+  image_price_4k: null as number | null,
+  // Claude Code 客户端限制（仅 anthropic 平台使用）
+  claude_code_only: false,
+  fallback_group_id: null as number | null
 })
 
 // 根据分组类型返回不同的删除确认消息
@@ -864,7 +1002,8 @@ const loadGroups = async () => {
     const response = await adminAPI.groups.list(pagination.page, pagination.page_size, {
       platform: (filters.platform as GroupPlatform) || undefined,
       status: filters.status as any,
-      is_exclusive: filters.is_exclusive ? filters.is_exclusive === 'true' : undefined
+      is_exclusive: filters.is_exclusive ? filters.is_exclusive === 'true' : undefined,
+      search: searchQuery.value.trim() || undefined
     }, { signal })
     if (signal.aborted) return
     groups.value = response.items
@@ -883,6 +1022,15 @@ const loadGroups = async () => {
   }
 }
 
+let searchTimeout: ReturnType<typeof setTimeout>
+const handleSearch = () => {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    pagination.page = 1
+    loadGroups()
+  }, 300)
+}
+
 const handlePageChange = (page: number) => {
   pagination.page = page
   loadGroups()
@@ -908,6 +1056,8 @@ const closeCreateModal = () => {
   createForm.image_price_1k = null
   createForm.image_price_2k = null
   createForm.image_price_4k = null
+  createForm.claude_code_only = false
+  createForm.fallback_group_id = null
 }
 
 const handleCreateGroup = async () => {
@@ -949,6 +1099,8 @@ const handleEdit = (group: Group) => {
   editForm.image_price_1k = group.image_price_1k
   editForm.image_price_2k = group.image_price_2k
   editForm.image_price_4k = group.image_price_4k
+  editForm.claude_code_only = group.claude_code_only || false
+  editForm.fallback_group_id = group.fallback_group_id
   showEditModal.value = true
 }
 
@@ -966,7 +1118,12 @@ const handleUpdateGroup = async () => {
 
   submitting.value = true
   try {
-    await adminAPI.groups.update(editingGroup.value.id, editForm)
+    // 转换 fallback_group_id: null -> 0 (后端使用 0 表示清除)
+    const payload = {
+      ...editForm,
+      fallback_group_id: editForm.fallback_group_id === null ? 0 : editForm.fallback_group_id
+    }
+    await adminAPI.groups.update(editingGroup.value.id, payload)
     appStore.showSuccess(t('admin.groups.groupUpdated'))
     closeEditModal()
     loadGroups()

frontend/src/views/admin/ProxiesView.vue

@@ -85,6 +85,14 @@
             </span>
           </template>
 
+          <template #cell-account_count="{ value }">
+            <span
+              class="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800 dark:bg-dark-600 dark:text-gray-300"
+            >
+              {{ t('admin.groups.accountsCount', { count: value || 0 }) }}
+            </span>
+          </template>
+
           <template #cell-actions="{ row }">
             <div class="flex items-center gap-1">
               <button
@@ -511,7 +519,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
@@ -534,6 +542,7 @@ const columns = computed<Column[]>(() => [
   { key: 'name', label: t('admin.proxies.columns.name'), sortable: true },
   { key: 'protocol', label: t('admin.proxies.columns.protocol'), sortable: true },
   { key: 'address', label: t('admin.proxies.columns.address'), sortable: false },
+  { key: 'account_count', label: t('admin.proxies.columns.accounts'), sortable: true },
   { key: 'status', label: t('admin.proxies.columns.status'), sortable: true },
   { key: 'actions', label: t('admin.proxies.columns.actions'), sortable: false }
 ])
@@ -933,4 +942,9 @@ const confirmDelete = async () => {
 onMounted(() => {
   loadProxies()
 })
+
+onUnmounted(() => {
+  clearTimeout(searchTimeout)
+  abortController?.abort()
+})
 </script>

frontend/src/views/admin/RedeemView.vue

@@ -364,7 +364,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { useClipboard } from '@/composables/useClipboard'
@@ -693,4 +693,9 @@ onMounted(() => {
   loadCodes()
   loadSubscriptionGroups()
 })
+
+onUnmounted(() => {
+  clearTimeout(searchTimeout)
+  abortController?.abort()
+})
 </script>

frontend/src/views/admin/UsageView.vue

@@ -85,11 +85,49 @@ const exportToExcel = async () => {
       if (all.length >= total || res.items.length < 100) break; p++
     }
     if(!c.signal.aborted) {
-      // 动态加载 xlsx，降低首屏包体并减少高危依赖的常驻暴露面。
       const XLSX = await import('xlsx')
-      const ws = XLSX.utils.json_to_sheet(all); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Usage')
-      saveAs(new Blob([XLSX.write(wb, { bookType: 'xlsx', type: 'array' })], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), `usage_${Date.now()}.xlsx`)
-      appStore.showSuccess('Export Success')
+      const headers = [
+        t('usage.time'), t('admin.usage.user'), t('usage.apiKeyFilter'),
+        t('admin.usage.account'), t('usage.model'), t('admin.usage.group'),
+        t('usage.type'),
+        t('admin.usage.inputTokens'), t('admin.usage.outputTokens'),
+        t('admin.usage.cacheReadTokens'), t('admin.usage.cacheCreationTokens'),
+        t('admin.usage.inputCost'), t('admin.usage.outputCost'),
+        t('admin.usage.cacheReadCost'), t('admin.usage.cacheCreationCost'),
+        t('usage.rate'), t('usage.original'), t('usage.billed'),
+        t('usage.firstToken'), t('usage.duration'),
+        t('admin.usage.requestId'), t('usage.userAgent'), t('admin.usage.ipAddress')
+      ]
+      const rows = all.map(log => [
+        log.created_at,
+        log.user?.email || '',
+        log.api_key?.name || '',
+        log.account?.name || '',
+        log.model,
+        log.group?.name || '',
+        log.stream ? t('usage.stream') : t('usage.sync'),
+        log.input_tokens,
+        log.output_tokens,
+        log.cache_read_tokens,
+        log.cache_creation_tokens,
+        log.input_cost?.toFixed(6) || '0.000000',
+        log.output_cost?.toFixed(6) || '0.000000',
+        log.cache_read_cost?.toFixed(6) || '0.000000',
+        log.cache_creation_cost?.toFixed(6) || '0.000000',
+        log.rate_multiplier?.toFixed(2) || '1.00',
+        log.total_cost?.toFixed(6) || '0.000000',
+        log.actual_cost?.toFixed(6) || '0.000000',
+        log.first_token_ms ?? '',
+        log.duration_ms,
+        log.request_id || '',
+        log.user_agent || '',
+        log.ip_address || ''
+      ])
+      const ws = XLSX.utils.aoa_to_sheet([headers, ...rows])
+      const wb = XLSX.utils.book_new()
+      XLSX.utils.book_append_sheet(wb, ws, 'Usage')
+      saveAs(new Blob([XLSX.write(wb, { bookType: 'xlsx', type: 'array' })], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), `usage_${filters.value.start_date}_to_${filters.value.end_date}.xlsx`)
+      appStore.showSuccess(t('usage.exportSuccess'))
     }
   } catch (error) { console.error('Failed to export:', error); appStore.showError('Export Failed') }
   finally { if(exportAbortController === c) { exportAbortController = null; exporting.value = false; exportProgress.show = false } }

frontend/src/views/admin/UsersView.vue

@@ -893,12 +893,13 @@ const loadUsers = async () => {
         }
       }
     }
-  } catch (error) {
+  } catch (error: any) {
     const errorInfo = error as { name?: string; code?: string }
     if (errorInfo?.name === 'AbortError' || errorInfo?.name === 'CanceledError' || errorInfo?.code === 'ERR_CANCELED') {
       return
     }
-    appStore.showError(t('admin.users.failedToLoad'))
+    const message = error.response?.data?.detail || error.message || t('admin.users.failedToLoad')
+    appStore.showError(message)
     console.error('Error loading users:', error)
   } finally {
     if (abortController === currentAbortController) {
@@ -917,7 +918,9 @@ const handleSearch = () => {
 }
 
 const handlePageChange = (page: number) => {
-  pagination.page = page
+  // 确保页码在有效范围内
+  const validPage = Math.max(1, Math.min(page, pagination.pages || 1))
+  pagination.page = validPage
   loadUsers()
 }
 
@@ -943,6 +946,7 @@ const toggleBuiltInFilter = (key: string) => {
     visibleFilters.add(key)
   }
   saveFiltersToStorage()
+  pagination.page = 1
   loadUsers()
 }
 
@@ -957,6 +961,7 @@ const toggleAttributeFilter = (attr: UserAttributeDefinition) => {
     activeAttributeFilters[attr.id] = ''
   }
   saveFiltersToStorage()
+  pagination.page = 1
   loadUsers()
 }
 
@@ -1059,5 +1064,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside)
+  clearTimeout(searchTimeout)
+  abortController?.abort()
 })
 </script>