From f85801edb3b2d889fdc77bf35fb68fd49b086800 Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Wed, 30 Sep 2026 04:33:21 +0800
Subject: [PATCH] fix(usage): balance diagnostic column widths

Size diagnostic names by dimension and share available width across metric columns. Keep API key names compact.

Co-authored-by: Codex <noreply@openai.com>
---
 .../usage/components/UsageDiagnosticCard.vue    | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/usage/components/UsageDiagnosticCard.vue b/frontend/src/views/usage/components/UsageDiagnosticCard.vue
index 8c039d877..6b9167d2a 100644
--- a/frontend/src/views/usage/components/UsageDiagnosticCard.vue
+++ b/frontend/src/views/usage/components/UsageDiagnosticCard.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { TableColumnSize } from '@codex-proxy/ui'
 import type { getUsageRecordInsightsDiagnostics } from '@/api'
 import { BaseCard, BaseEmpty, BaseSegmented, BaseTable, defineTableColumns } from '@codex-proxy/ui'
 
@@ -37,12 +38,21 @@ const resultDimensionLabel = computed(
   () => dimensionOptions.find(option => option.value === resultDimension.value)?.label ?? '维度',
 )
 
+const dimensionNameSizes: Record<string, TableColumnSize> = {
+  model: 'xl',
+  account: '2xl',
+  apiKey: 'md',
+  provider: 'lg',
+  transport: 'sm',
+  failureClass: 'xl',
+}
+
 const diagnosticColumns = computed(() => defineTableColumns<DiagnosticDisplayItem>([
   {
     key: 'nameDisplay',
     label: '维度',
     kind: 'custom',
-    size: 'xl',
+    size: dimensionNameSizes[resultDimension.value] ?? 'xl',
   },
   ...(resultDimension.value === 'account'
     ? defineTableColumns<DiagnosticDisplayItem>([
@@ -54,22 +64,19 @@ const diagnosticColumns = computed(() => defineTableColumns<DiagnosticDisplayIte
     label: '请求',
     kind: 'numeric',
     size: 'xs',
-    fixedWidth: true,
   },
   {
     key: 'errorCount',
     label: '失败',
     kind: 'numeric',
     size: 'xs',
-    fixedWidth: true,
   },
-  { key: 'firstTokenP95Ms', label: '性能', kind: 'numeric', size: 'lg', fixedWidth: true },
+  { key: 'firstTokenP95Ms', label: '性能', kind: 'numeric', size: 'lg' },
   {
     key: 'estimatedCost',
     label: '费用',
     kind: 'numeric',
     size: 'sm',
-    fixedWidth: true,
   },
 ]))