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>
This commit is contained in:
zyycn
2026-07-26 03:24:25 +08:00
co-authored by Codex
parent fee34b6bd1
commit 9de8e75238
4 changed files with 21 additions and 6 deletions
@@ -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
+8 -1
View File
@@ -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
}
@@ -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)',
},
@@ -247,7 +247,7 @@ function emptySummary() {
cachedTokens: '0',
cacheWriteTokens: '0',
totalTokens: '0',
averageLatencyMs: '—',
averageLatencyMs: '0 ms',
}
return summary
}