refactor(frontend): 优化 Usage 功能模块组件

- 改进 HorizontalRequestTimeline, IntervalTimelineCard, RequestDetailDrawer 等组件
- 优化表格展示组件

frontend/src/features/usage/components/HorizontalRequestTimeline.vue

@@ -310,6 +310,7 @@ import Skeleton from '@/components/ui/skeleton.vue'
 import Separator from '@/components/ui/separator.vue'
 import { ChevronLeft, ChevronRight, ExternalLink } from 'lucide-vue-next'
 import { requestTraceApi, type RequestTrace, type CandidateRecord } from '@/api/requestTrace'
+import { log } from '@/utils/logger'
 
 // 节点组类型
 interface NodeGroup {
@@ -552,11 +553,6 @@ const isCapabilityUsed = (cap: string): boolean => {
   return activeCapabilities.value.includes(cap)
 }
 
-// 检查某个能力是否被 Key 支持（保留以备后用）
-const _isCapabilitySupported = (cap: string): boolean => {
-  return keyCapabilities.value.includes(cap)
-}
-
 // 格式化能力标签显示
 const formatCapabilityLabel = (cap: string): string => {
   const labels: Record<string, string> = {
@@ -624,7 +620,7 @@ const loadTrace = async () => {
     trace.value = await requestTraceApi.getRequestTrace(props.requestId)
   } catch (err: any) {
     error.value = err.response?.data?.detail || err.message || '加载失败'
-    console.error('加载请求追踪失败:', err)
+    log.error('加载请求追踪失败:', err)
   } finally {
     loading.value = false
   }
@@ -715,19 +711,6 @@ const getStatusLabel = (status: string) => {
   return labels[status] || status
 }
 
-// 获取状态徽章样式（保留以备后用）
-const _getStatusBadgeVariant = (status: string): string => {
-  const variants: Record<string, string> = {
-    available: 'outline',
-    pending: 'secondary',
-    streaming: 'secondary',
-    success: 'success',
-    failed: 'destructive',
-    skipped: 'outline'
-  }
-  return variants[status] || 'default'
-}
-
 // 获取状态颜色类
 const getStatusColorClass = (status: string) => {
   const classes: Record<string, string> = {

frontend/src/features/usage/components/IntervalTimelineCard.vue

@@ -60,6 +60,7 @@ import ScatterChart from '@/components/charts/ScatterChart.vue'
 import { cacheAnalysisApi, type IntervalTimelineResponse } from '@/api/cache'
 import { meApi } from '@/api/me'
 import type { ChartData, ChartOptions } from 'chart.js'
+import { log } from '@/utils/logger'
 
 const props = withDefaults(defineProps<{
   title: string
@@ -294,7 +295,7 @@ async function loadData() {
       })
     }
   } catch (error) {
-    console.error('加载请求间隔时间线失败:', error)
+    log.error('加载请求间隔时间线失败:', error)
     timelineData.value = null
   } finally {
     loading.value = false

frontend/src/features/usage/components/RequestDetailDrawer.vue

@@ -480,6 +480,7 @@ import Tabs from '@/components/ui/tabs.vue'
 import TabsContent from '@/components/ui/tabs-content.vue'
 import { Copy, Check, Maximize2, Minimize2, Columns2, RefreshCw, X, Monitor, Server } from 'lucide-vue-next'
 import { dashboardApi, type RequestDetail } from '@/api/dashboard'
+import { log } from '@/utils/logger'
 
 // 子组件
 import RequestHeadersContent from './RequestDetailDrawer/RequestHeadersContent.vue'
@@ -672,7 +673,7 @@ async function loadDetail(id: string) {
       }
     }
   } catch (err) {
-    console.error('Failed to load request detail:', err)
+    log.error('Failed to load request detail:', err)
     error.value = '加载请求详情失败'
   } finally {
     loading.value = false

frontend/src/features/usage/components/UsageApiFormatTable.vue

@@ -69,7 +69,6 @@
 
 <script setup lang="ts">
 import Card from '@/components/ui/card.vue'
-import Badge from '@/components/ui/badge.vue'
 import Table from '@/components/ui/table.vue'
 import TableHeader from '@/components/ui/table-header.vue'
 import TableBody from '@/components/ui/table-body.vue'

frontend/src/features/usage/components/UsageModelTable.vue

@@ -69,7 +69,6 @@
 
 <script setup lang="ts">
 import Card from '@/components/ui/card.vue'
-import Badge from '@/components/ui/badge.vue'
 import Table from '@/components/ui/table.vue'
 import TableHeader from '@/components/ui/table-header.vue'
 import TableBody from '@/components/ui/table-body.vue'

frontend/src/features/usage/components/UsageProviderTable.vue

@@ -75,7 +75,6 @@
 
 <script setup lang="ts">
 import Card from '@/components/ui/card.vue'
-import Badge from '@/components/ui/badge.vue'
 import Table from '@/components/ui/table.vue'
 import TableHeader from '@/components/ui/table-header.vue'
 import TableBody from '@/components/ui/table-body.vue'