From 40fcd7cff394f58e14c5ba032ca8a504e9b98149 Mon Sep 17 00:00:00 2001
From: zyycn <zyycn@users.noreply.github.com>
Date: Sun, 26 Jul 2026 03:24:25 +0800
Subject: [PATCH] fix(ui): refine account and usage empty states

Leave absent account timestamps blank, show zero latency for an empty usage summary, and reduce the expanded sidebar width by five pixels.

Co-authored-by: Codex <noreply@openai.com>
---
 frontend/src/layout/components/AppSidebar.vue          | 10 +++++++---
 frontend/src/views/accounts/constants.ts               |  9 ++++++++-
 .../src/views/usage/components/UsageSummaryCards.vue   |  6 +++++-
 .../views/usage/composables/useUsageRecordsTable.ts    |  2 +-
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/src/layout/components/AppSidebar.vue b/frontend/src/layout/components/AppSidebar.vue
index 629f2c9a5..c0dfcceda 100644
--- a/frontend/src/layout/components/AppSidebar.vue
+++ b/frontend/src/layout/components/AppSidebar.vue
@@ -118,7 +118,11 @@ const sidebarEl = ref<HTMLElement | null>(null)
 const brandLabelEl = ref<HTMLElement | null>(null)
 const navSignalEl = useTemplateRef<HTMLElement>('navSignal')
 const isCollapsed = computed(() => !props.mobile && Boolean(props.collapsed))
-const sidebarWidth = computed(() => (isCollapsed.value ? 88 : 256))
+const collapsedSidebarWidth = 88
+const expandedSidebarWidth = 251
+const sidebarWidth = computed(() =>
+  isCollapsed.value ? collapsedSidebarWidth : expandedSidebarWidth,
+)
 const brandLabelVisible = shallowRef(!isCollapsed.value)
 const themeToggleLabel = computed(() =>
   effectiveTheme.value === 'dark' ? '切换浅色模式' : '切换暗黑模式',
@@ -209,7 +213,7 @@ function animateSidebarWidth(collapsed: boolean) {
     return
   }
 
-  const targetWidth = collapsed ? 88 : 256
+  const targetWidth = collapsed ? collapsedSidebarWidth : expandedSidebarWidth
   const currentWidth = sidebarEl.value.getBoundingClientRect().width
 
   if (prefersReducedMotion()) {
@@ -326,7 +330,7 @@ onBeforeUnmount(() => {
     class="z-20 h-dvh shrink-0 flex-col overflow-hidden bg-(--cp-bg-surface) px-4 shadow-(--cp-shadow-sidebar)"
     :class="[
       mobile ? 'flex' : 'hidden min-[961px]:flex',
-      isCollapsed ? 'w-22 basis-22 items-center' : 'w-64 basis-64',
+      isCollapsed ? 'w-22 basis-22 items-center' : 'w-[251px] basis-[251px]',
     ]"
   >
     <div
diff --git a/frontend/src/views/accounts/constants.ts b/frontend/src/views/accounts/constants.ts
index 54a43f7cd..fab20fa00 100644
--- a/frontend/src/views/accounts/constants.ts
+++ b/frontend/src/views/accounts/constants.ts
@@ -98,7 +98,8 @@ export const accountColumns = [
     sortable: true,
     flex: 1.2,
     minWidth: '160px',
-    format: (_value: unknown, row: AccountRow) => row.usage.lastUsedAtDisplay,
+    format: (_value: unknown, row: AccountRow) => optionalAccountCell(row.usage.lastUsedAtDisplay),
+    emptyText: '',
     cellClass: `${relaxedCellClass} text-(--cp-text-secondary)`,
   },
   {
@@ -108,6 +109,8 @@ export const accountColumns = [
     sortKey: 'expiresAt',
     flex: 1.2,
     minWidth: '160px',
+    format: value => optionalAccountCell(value),
+    emptyText: '',
     cellClass: `${relaxedCellClass} text-(--cp-text-secondary)`,
   },
   {
@@ -201,3 +204,7 @@ function accountProviderLabel(value?: string | null) {
     return 'xAI'
   return value || '—'
 }
+
+function optionalAccountCell(value: unknown) {
+  return value === '—' || value === '-' ? '' : value
+}
diff --git a/frontend/src/views/usage/components/UsageSummaryCards.vue b/frontend/src/views/usage/components/UsageSummaryCards.vue
index 37a4b73d4..c75865f43 100644
--- a/frontend/src/views/usage/components/UsageSummaryCards.vue
+++ b/frontend/src/views/usage/components/UsageSummaryCards.vue
@@ -9,6 +9,10 @@ const props = defineProps<{
   summary: Awaited<ReturnType<typeof getUsageRecordSummary>>
 }>()
 
+function averageLatencyDisplay(value: string) {
+  return !value || value === '—' || value === '-' ? '0 ms' : value
+}
+
 const items = computed(() => [
   {
     key: 'requests',
@@ -38,7 +42,7 @@ const items = computed(() => [
     key: 'latency',
     label: '平均耗时',
     icon: Timer,
-    value: props.summary.averageLatencyMs,
+    value: averageLatencyDisplay(props.summary.averageLatencyMs),
     detail: '成功请求平均值',
     tone: 'text-(--cp-normal-text) bg-(--cp-normal-bg)',
   },
diff --git a/frontend/src/views/usage/composables/useUsageRecordsTable.ts b/frontend/src/views/usage/composables/useUsageRecordsTable.ts
index 1eb394742..68f9769ee 100644
--- a/frontend/src/views/usage/composables/useUsageRecordsTable.ts
+++ b/frontend/src/views/usage/composables/useUsageRecordsTable.ts
@@ -247,7 +247,7 @@ function emptySummary() {
     cachedTokens: '0',
     cacheWriteTokens: '0',
     totalTokens: '0',
-    averageLatencyMs: '—',
+    averageLatencyMs: '0 ms',
   }
   return summary
 }