refactor: 统一 API 格式显示函数,补全 Usage/Trace 的 provider 链路信息

- 提取 formatApiFormat 为共享工具函数,替换各组件中分散的 API_FORMAT_LABELS 调用
- Trace API 返回密钥认证类型(key_auth_type)和 OAuth 套餐信息(key_oauth_plan_type)
- 请求时间线展示密钥认证方式标签(OAuth/Vertex AI/Kiro 等)
- Usage 记录补充 provider_id/endpoint_id/key_id,避免 curl 复现时缺失 provider 信息
- curl 复现兜底从 RequestCandidate 表查找 provider 信息
- Headers Diff 面板左右独立滚动并同步垂直滚动位置
This commit is contained in:
fawney19
2026-02-19 14:51:08 +08:00
parent 0d2cafaec3
commit 7a81e56553
23 changed files with 355 additions and 206 deletions
@@ -668,7 +668,7 @@ import { RefreshCcw, Search } from 'lucide-vue-next'
import { formatTokens, formatCurrency } from '@/utils/format'
import { formatDateTime } from '../composables'
import { useRowClick } from '@/composables/useRowClick'
import { API_FORMAT_LABELS } from '@/api/endpoints/types'
import { formatApiFormat } from '@/api/endpoints/types/api-format'
import type { DateRangeParams, UsageRecord } from '../types'
import { TimeRangePicker } from '@/components/common'
@@ -811,17 +811,6 @@ function handleRowClick(event: MouseEvent, id: string) {
// useIntervalFn 和 useDebounceFn 自动处理清理,无需 onUnmounted
// 格式化 API 格式显示名称
function formatApiFormat(format: string): string {
const raw = (format || '').trim()
return (
API_FORMAT_LABELS[raw] ||
API_FORMAT_LABELS[raw.toLowerCase()] ||
API_FORMAT_LABELS[raw.toUpperCase()] ||
raw
)
}
// 判断是否应该显示格式转换信息
// 包括:1. 跨格式转换(has_format_conversion=true)2. 同族格式差异(如 CLAUDE_CLI → CLAUDE)
function shouldShowFormatConversion(record: UsageRecord): boolean {