fix(admin/usage): 恢复成本 Tooltip 明细并优化账号筛选

问题修复:
- 恢复 Cost Tooltip 的成本分项明细 (input_cost, output_cost, cache 成本)
- 修复 Token Tooltip 双分隔线显示问题
- 修复 Tooltip 翻译键缺失问题，新增 costDetails/tokenDetails
- 恢复 Excel 导出格式化 (aoa_to_sheet + 翻译列头)

功能优化:
- 账号筛选从前端搜索改为后端搜索，避免一次加载 1000 条数据
- 行为与用户/API Key 筛选保持一致 (debounce + 后端分页)

frontend/src/components/admin/usage/UsageFilters.vue

@@ -85,9 +85,40 @@
         </div>
 
         <!-- Account Filter -->
-        <div class="w-full sm:w-auto sm:min-w-[220px]">
+        <div ref="accountSearchRef" class="usage-filter-dropdown relative w-full sm:w-auto sm:min-w-[220px]">
           <label class="input-label">{{ t('admin.usage.account') }}</label>
-          <Select v-model="filters.account_id" :options="accountOptions" searchable @change="emitChange" />
+          <input
+            v-model="accountKeyword"
+            type="text"
+            class="input pr-8"
+            :placeholder="t('admin.usage.searchAccountPlaceholder')"
+            @input="debounceAccountSearch"
+            @focus="showAccountDropdown = true"
+          />
+          <button
+            v-if="filters.account_id"
+            type="button"
+            @click="clearAccount"
+            class="absolute right-2 top-9 text-gray-400"
+            aria-label="Clear account filter"
+          >
+            ✕
+          </button>
+          <div
+            v-if="showAccountDropdown && (accountResults.length > 0 || accountKeyword)"
+            class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800"
+          >
+            <button
+              v-for="a in accountResults"
+              :key="a.id"
+              type="button"
+              @click="selectAccount(a)"
+              class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <span class="truncate">{{ a.name }}</span>
+              <span class="ml-2 text-xs text-gray-400">#{{ a.id }}</span>
+            </button>
+          </div>
         </div>
 
         <!-- Stream Type Filter -->
@@ -166,6 +197,7 @@ const filters = toRef(props, 'modelValue')
 
 const userSearchRef = ref<HTMLElement | null>(null)
 const apiKeySearchRef = ref<HTMLElement | null>(null)
+const accountSearchRef = ref<HTMLElement | null>(null)
 
 const userKeyword = ref('')
 const userResults = ref<SimpleUser[]>([])
@@ -177,9 +209,17 @@ const apiKeyResults = ref<SimpleApiKey[]>([])
 const showApiKeyDropdown = ref(false)
 let apiKeySearchTimeout: ReturnType<typeof setTimeout> | null = null
 
+interface SimpleAccount {
+  id: number
+  name: string
+}
+const accountKeyword = ref('')
+const accountResults = ref<SimpleAccount[]>([])
+const showAccountDropdown = ref(false)
+let accountSearchTimeout: ReturnType<typeof setTimeout> | null = null
+
 const modelOptions = ref<SelectOption[]>([{ value: null, label: t('admin.usage.allModels') }])
 const groupOptions = ref<SelectOption[]>([{ value: null, label: t('admin.usage.allGroups') }])
-const accountOptions = ref<SelectOption[]>([{ value: null, label: t('admin.usage.allAccounts') }])
 
 const streamTypeOptions = ref<SelectOption[]>([
   { value: null, label: t('admin.usage.allTypes') },
@@ -278,6 +318,37 @@ const onClearApiKey = () => {
   emitChange()
 }
 
+const debounceAccountSearch = () => {
+  if (accountSearchTimeout) clearTimeout(accountSearchTimeout)
+  accountSearchTimeout = setTimeout(async () => {
+    if (!accountKeyword.value) {
+      accountResults.value = []
+      return
+    }
+    try {
+      const res = await adminAPI.accounts.list(1, 20, { search: accountKeyword.value })
+      accountResults.value = res.items.map((a) => ({ id: a.id, name: a.name }))
+    } catch {
+      accountResults.value = []
+    }
+  }, 300)
+}
+
+const selectAccount = (a: SimpleAccount) => {
+  accountKeyword.value = a.name
+  showAccountDropdown.value = false
+  filters.value.account_id = a.id
+  emitChange()
+}
+
+const clearAccount = () => {
+  accountKeyword.value = ''
+  accountResults.value = []
+  showAccountDropdown.value = false
+  filters.value.account_id = undefined
+  emitChange()
+}
+
 const onApiKeyFocus = () => {
   showApiKeyDropdown.value = true
   // Trigger search if no results yet
@@ -292,9 +363,11 @@ const onDocumentClick = (e: MouseEvent) => {
 
   const clickedInsideUser = userSearchRef.value?.contains(target) ?? false
   const clickedInsideApiKey = apiKeySearchRef.value?.contains(target) ?? false
+  const clickedInsideAccount = accountSearchRef.value?.contains(target) ?? false
 
   if (!clickedInsideUser) showUserDropdown.value = false
   if (!clickedInsideApiKey) showApiKeyDropdown.value = false
+  if (!clickedInsideAccount) showAccountDropdown.value = false
 }
 
 watch(
@@ -333,20 +406,27 @@ watch(
   }
 )
 
+watch(
+  () => filters.value.account_id,
+  (accountId) => {
+    if (!accountId) {
+      accountKeyword.value = ''
+      accountResults.value = []
+    }
+  }
+)
+
 onMounted(async () => {
   document.addEventListener('click', onDocumentClick)
 
   try {
-    const [gs, ms, as] = await Promise.all([
+    const [gs, ms] = await Promise.all([
       adminAPI.groups.list(1, 1000),
-      adminAPI.dashboard.getModelStats({ start_date: props.startDate, end_date: props.endDate }),
-      adminAPI.accounts.list(1, 1000)
+      adminAPI.dashboard.getModelStats({ start_date: props.startDate, end_date: props.endDate })
     ])
 
     groupOptions.value.push(...gs.items.map((g: any) => ({ value: g.id, label: g.name })))
 
-    accountOptions.value.push(...as.items.map((a: any) => ({ value: a.id, label: a.name })))
-
     const uniqueModels = new Set<string>()
     ms.models?.forEach((s: any) => s.model && uniqueModels.add(s.model))
     modelOptions.value.push(

frontend/src/components/admin/usage/UsageTable.vue

@@ -143,8 +143,8 @@
     >
       <div class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800">
         <div class="space-y-1.5">
-          <div class="mb-2 border-b border-gray-700 pb-1.5">
-            <div class="text-xs font-semibold text-gray-300 mb-1">Token {{ t('usage.details') }}</div>
+          <div>
+            <div class="text-xs font-semibold text-gray-300 mb-1">{{ t('usage.tokenDetails') }}</div>
             <div v-if="tokenTooltipData && tokenTooltipData.input_tokens > 0" class="flex items-center justify-between gap-4">
               <span class="text-gray-400">{{ t('admin.usage.inputTokens') }}</span>
               <span class="font-medium text-white">{{ tokenTooltipData.input_tokens.toLocaleString() }}</span>
@@ -184,6 +184,27 @@
     >
       <div class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800">
         <div class="space-y-1.5">
+          <!-- Cost Breakdown -->
+          <div class="mb-2 border-b border-gray-700 pb-1.5">
+            <div class="text-xs font-semibold text-gray-300 mb-1">{{ t('usage.costDetails') }}</div>
+            <div v-if="tooltipData && tooltipData.input_cost > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.inputCost') }}</span>
+              <span class="font-medium text-white">${{ tooltipData.input_cost.toFixed(6) }}</span>
+            </div>
+            <div v-if="tooltipData && tooltipData.output_cost > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.outputCost') }}</span>
+              <span class="font-medium text-white">${{ tooltipData.output_cost.toFixed(6) }}</span>
+            </div>
+            <div v-if="tooltipData && tooltipData.cache_creation_cost > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.cacheCreationCost') }}</span>
+              <span class="font-medium text-white">${{ tooltipData.cache_creation_cost.toFixed(6) }}</span>
+            </div>
+            <div v-if="tooltipData && tooltipData.cache_read_cost > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.cacheReadCost') }}</span>
+              <span class="font-medium text-white">${{ tooltipData.cache_read_cost.toFixed(6) }}</span>
+            </div>
+          </div>
+          <!-- Rate and Summary -->
           <div class="flex items-center justify-between gap-6">
             <span class="text-gray-400">{{ t('usage.rate') }}</span>
             <span class="font-semibold text-blue-400">{{ (tooltipData?.rate_multiplier || 1).toFixed(2) }}x</span>