style(frontend): refine badges and cycle stats

This commit is contained in:
elky
2026-07-18 00:05:22 +08:00
parent 88a057b8d9
commit e558f55cd9
8 changed files with 53 additions and 19 deletions
@@ -7,15 +7,13 @@
<div
v-for="row in cycleMetricRows"
:key="`${row.key}-${variant}-cycle-row`"
class="flex items-center justify-between gap-2"
class="truncate"
:title="`${row.label} ${row.valueText}`"
>
<span class="shrink-0 text-muted-foreground">{{ row.label }}</span>
<span
class="min-w-0 truncate text-right font-medium tabular-nums text-foreground/90"
:data-testid="variant === 'desktop' ? `pool-stats-cycle-${row.key}` : undefined"
:title="row.valueText"
>
{{ row.valueText }}
{{ row.label }} {{ row.valueText }}
</span>
</div>
</div>
@@ -116,7 +114,7 @@ const cycleMetricRows = computed(() => {
})
const cycleContainerClass = computed(() => [
'mx-auto w-[132px] space-y-1 text-[9px] leading-3',
'mx-auto w-[132px] space-y-0.5 text-[10px] leading-4 text-foreground/90 tabular-nums',
props.variant === 'mobile' ? 'py-0.5' : '',
].filter(Boolean).join(' '))
@@ -30,7 +30,7 @@ describe('pool key display panels', () => {
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')
expect(root.querySelector('[data-testid="pool-stats-cycle-request_count"]')?.textContent?.trim()).toBe('请求 12/88')
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 +98,7 @@ 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')
expect(root.querySelector('[data-testid="pool-stats-cycle-request_count"]')?.textContent?.trim()).toBe('请求 31')
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('月')