i/Aether
1
0
Fork 0
mirror of https://github.com/fawney19/Aether.git synced 2026-09-12 14:10:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(frontend): align pool cycle stats values

Browse Source
This commit is contained in:
elky
2026-07-18 00:13:35 +08:00
parent e558f55cd9
commit a6c6f14b09
4 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/pool/components/PoolKeyStatsPanel.vue
+18 -5
View File
@@ -7,13 +7,23 @@
<div
v-for="row in cycleMetricRows"
:key="`${row.key}-${variant}-cycle-row`"
class="truncate"
class="flex items-baseline justify-between gap-3"
:title="`${row.label} ${row.valueText}`"
>
<span class="shrink-0 text-muted-foreground">
{{ row.label }}
</span>
<span
class="grid w-[112px] shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-baseline gap-x-1 font-medium text-foreground"
:data-testid="variant === 'desktop' ? `pool-stats-cycle-${row.key}` : undefined"
>
{{ row.label }} {{ row.valueText }}
<span class="min-w-0 truncate text-right">{{ row.hasComparison ? row.smallValue : '-' }}</span>
<span
class="w-1.5 text-center text-muted-foreground/60"
data-cycle-stat-part="divider"
aria-hidden="true"
>/</span>
<span class="min-w-0 truncate text-left">{{ row.largeValue }}</span>
</span>
</div>
</div>
@@ -83,7 +93,7 @@ function missingMetric(key: PoolStatsMetricKey): PoolStatsMetric {
return {
key,
label: CYCLE_METRIC_LABELS[key],
value: '—',
value: '-',
missing: true,
numericValue: null,
}
@@ -108,14 +118,17 @@ const cycleMetricRows = computed(() => {
return {
key,
label: CYCLE_METRIC_LABELS[key],
hasComparison,
smallValue: smallMetric.value,
largeValue: largeMetric.value,
valueText: hasComparison ? `${smallMetric.value}/${largeMetric.value}` : largeMetric.value,
}
})
})
const cycleContainerClass = computed(() => [
'mx-auto w-[132px] space-y-0.5 text-[10px] leading-4 text-foreground/90 tabular-nums',
props.variant === 'mobile' ? 'py-0.5' : '',
'w-full space-y-1 text-[11px] leading-4 tabular-nums',
props.variant === 'desktop' ? 'mx-auto max-w-[168px]' : 'py-0.5',
].filter(Boolean).join(' '))
const accountContainerClass = computed(() => props.variant === 'desktop'
frontend/src/features/pool/components/__tests__/PoolKeyDisplayPanels.spec.ts
+23 -4
View File
@@ -28,9 +28,20 @@ describe('pool key display panels', () => {
app.use(createI18n())
app.mount(root)
expect(root.querySelector('[data-testid="pool-stats-cycle-text"]')).toBeTruthy()
expect(root.querySelector('[data-testid="pool-stats-cycle-text"]')?.className).toContain('w-[132px]')
expect(root.querySelector('[data-testid="pool-stats-cycle-request_count"]')?.textContent?.trim()).toBe('请求 12/88')
const stats = root.querySelector('[data-testid="pool-stats-cycle-text"]')
const requestValue = root.querySelector('[data-testid="pool-stats-cycle-request_count"]')
expect(stats).toBeTruthy()
expect(stats?.className).toContain('w-full')
expect(stats?.className).toContain('max-w-[168px]')
expect(requestValue?.textContent?.trim()).toBe('12/88')
expect(requestValue?.previousElementSibling?.textContent?.trim()).toBe('请求')
expect(requestValue?.parentElement?.className).toContain('justify-between')
expect(requestValue?.className).toContain('grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]')
expect(requestValue?.className).toContain('w-[112px]')
expect(requestValue?.children[0]?.className).toContain('text-right')
expect(requestValue?.children[1]?.textContent).toBe('/')
expect(requestValue?.children[2]?.className).toContain('text-left')
expect(root.querySelectorAll('[data-cycle-stat-part="divider"]')).toHaveLength(3)
expect(root.querySelector('[data-testid="pool-stats-cycle-small-overlay"]')).toBeNull()
expect(root.querySelector('[data-testid="pool-stats-cycle-large-base"]')).toBeNull()
expect(root.textContent).not.toContain('5H')
@@ -98,7 +109,15 @@ describe('pool key display panels', () => {
app.use(createI18n())
app.mount(root)
expect(root.querySelector('[data-testid="pool-stats-cycle-request_count"]')?.textContent?.trim()).toBe('请求 31')
const requestValue = root.querySelector('[data-testid="pool-stats-cycle-request_count"]')
expect(requestValue?.textContent?.trim()).toBe('-/31')
expect(requestValue?.previousElementSibling?.textContent?.trim()).toBe('请求')
expect(requestValue?.className).toContain('grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]')
expect(requestValue?.children[0]?.textContent).toBe('-')
expect(requestValue?.children[1]?.textContent).toBe('/')
expect(requestValue?.children[1]?.className).toContain('w-1.5')
expect(requestValue?.children[2]?.textContent).toBe('31')
expect(requestValue?.children[2]?.className).toContain('text-left')
expect(root.querySelector('[data-testid="pool-stats-cycle-single-marker"]')).toBeNull()
expect(root.querySelector('[data-testid="pool-stats-cycle-bar-request_count"]')).toBeNull()
expect(root.textContent).not.toContain('月')
frontend/src/views/admin/PoolManagement.vue
+2 -2
View File
@@ -1554,9 +1554,9 @@ const showAccountQuotaColumn = computed(() => {
const desktopColumnWidths = computed(() => {
if (showAccountQuotaColumn.value) {
return {
name: '21%',
name: '19%',
quota: '18%',
stats: '13%',
stats: '15%',
imported: '10%',
lastUsed: '8%',
score: '9%',
frontend/src/views/admin/__tests__/PoolManagement.codex-cycle-stats.spec.ts
+3 -3
View File
@@ -577,8 +577,8 @@ describe('PoolManagement Codex cycle stats mode', () => {
expect(root.querySelector('[data-testid="pool-stats-mode-control"]')).toBeNull()
expect(root.querySelector('[data-testid="pool-stats-cycle-text"]')).not.toBeNull()
expect(root.querySelector('[data-testid="pool-stats-cycle-request_count"]')?.textContent?.trim()).toBe('请求 7/12')
expect(root.querySelector('[data-testid="pool-stats-cycle-total_tokens"]')?.textContent?.trim()).toBe('Token 2.5K/5K')
expect(root.querySelector('[data-testid="pool-stats-cycle-request_count"]')?.textContent?.trim()).toBe('7/12')
expect(root.querySelector('[data-testid="pool-stats-cycle-total_tokens"]')?.textContent?.trim()).toBe('2.5K/5K')
expect(root.querySelector('[data-testid="pool-stats-cycle-small-overlay"]')).toBeNull()
expect(root.querySelector('[data-testid="pool-stats-cycle-large-base"]')).toBeNull()
expect(endpointMocks.listPoolKeys).toHaveBeenLastCalledWith(
@@ -707,7 +707,7 @@ describe('PoolManagement Codex cycle stats mode', () => {
expect(periodLabels).toContain('月')
expect(periodLabels).not.toContain('5H')
expect(periodLabels).not.toContain('周')
expect(root.querySelector('[data-testid="pool-stats-cycle-request_count"]')?.textContent?.trim()).toBe('请求 23')
expect(root.querySelector('[data-testid="pool-stats-cycle-request_count"]')?.textContent?.trim()).toBe('-/23')
expect(root.querySelector('[data-testid="pool-stats-cycle-small-overlay"]')).toBeNull()
expect(root.querySelector('[data-testid="pool-stats-cycle-bar-request_count"]')).toBeNull()
expect(root.querySelector('[data-testid="pool-stats-cycle-single-marker"]')).toBeNull()