fix(default): improve performance health panel layout

This commit is contained in:
CaIon
2026-05-12 16:13:14 +08:00
parent 19fc384e67
commit 03d537328a
@@ -103,8 +103,7 @@ export function PerformanceHealthPanel() {
</span> </span>
</div> </div>
<div className='grid gap-3 p-4 sm:p-5 lg:grid-cols-[minmax(0,1fr)_14rem]'> <div className='space-y-3 p-4 sm:p-5'>
{/* KPI metrics */}
<div className='grid grid-cols-3 gap-2'> <div className='grid grid-cols-3 gap-2'>
<MetricCell <MetricCell
icon={HeartPulse} icon={HeartPulse}
@@ -127,23 +126,18 @@ export function PerformanceHealthPanel() {
/> />
</div> </div>
{/* Top models */} {loading ? (
<div className='flex flex-col'> <div className='space-y-1'>
<span className='text-muted-foreground mb-1 text-[11px] font-medium'> {Array.from({ length: 3 }).map((_, i) => (
{t('Top models by traffic')} <Skeleton key={i} className='h-5 w-full rounded' />
</span> ))}
{loading ? ( </div>
<div className='space-y-1'> ) : hasData && (
{Array.from({ length: 3 }).map((_, i) => ( <div>
<Skeleton key={i} className='h-5 w-full rounded' /> <span className='text-muted-foreground mb-1 block text-[11px] font-medium'>
))} {t('Top models by traffic')}
</div>
) : !hasData ? (
<span className='text-muted-foreground/60 text-xs'>
{t('No performance data available')}
</span> </span>
) : ( <div className='grid grid-cols-1 gap-x-4 sm:grid-cols-2'>
<div className='space-y-0.5'>
{topModels.map((model) => ( {topModels.map((model) => (
<div <div
key={model.model_name} key={model.model_name}
@@ -169,8 +163,8 @@ export function PerformanceHealthPanel() {
</div> </div>
))} ))}
</div> </div>
)} </div>
</div> )}
</div> </div>
</section> </section>
) )