Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ refactor(ui): Improve usage log filter responsiveness and mobile UX

Browse Source 
Refactor the usage log filter toolbar into a shared reusable component for common, drawing, and task logs. Optimize desktop filters with a responsive grid, move secondary filters into a mobile drawer, standardize filter typography, remove redundant filter icons, and add the missing i18n translations for the new drawer description.
This commit is contained in:
t0ng7u
2026-05-25 05:35:44 +08:00
parent b302be30e3
commit 583da45296
79 changed files with 1879 additions and 1262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/pricing/components/model-details-api.tsx
Vendored
+22 -30
View File
@@ -574,14 +574,10 @@ function SupportedParametersSection(props: { model: PricingModel }) {
<Table>
<TableHeader>
<TableRow className='bg-muted/30 hover:bg-muted/30'>
<TableHead className='h-9 w-44 text-xs'>
{t('Parameter')}
</TableHead>
<TableHead className='h-9 w-24 text-xs'>{t('Type')}</TableHead>
<TableHead className='h-9 w-32 text-xs'>
{t('Default / range')}
</TableHead>
<TableHead className='h-9 text-xs'>{t('Description')}</TableHead>
<TableHead className='h-9 w-44'>{t('Parameter')}</TableHead>
<TableHead className='h-9 w-24'>{t('Type')}</TableHead>
<TableHead className='h-9 w-32'>{t('Default / range')}</TableHead>
<TableHead className='h-9'>{t('Description')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -589,13 +585,13 @@ function SupportedParametersSection(props: { model: PricingModel }) {
<TableRow key={p.name} className='hover:bg-muted/20'>
<TableCell className='py-2 align-top'>
<div className='flex items-center gap-1.5'>
<code className='font-mono text-xs font-medium'>
<code className='font-mono text-sm font-medium'>
{p.name}
</code>
{p.required && (
<Badge
variant='outline'
className='h-4 border-rose-500/40 px-1 text-[9px] text-rose-600 dark:text-rose-400'
className='h-6 border-rose-500/40 px-2 text-sm text-rose-600 dark:text-rose-400'
>
{t('required')}
</Badge>
@@ -605,7 +601,7 @@ function SupportedParametersSection(props: { model: PricingModel }) {
<TableCell className='py-2 align-top'>
<Badge
variant='secondary'
className='h-5 rounded-sm px-1.5 font-mono text-[10px] font-normal'
className='h-7 rounded-full px-2.5 font-mono text-sm font-normal'
>
{p.type}
</Badge>
@@ -613,7 +609,7 @@ function SupportedParametersSection(props: { model: PricingModel }) {
<TableCell className='py-2 align-top'>
<ParamRangeCell param={p} />
</TableCell>
<TableCell className='text-muted-foreground py-2 align-top text-xs'>
<TableCell className='text-muted-foreground py-2 align-top'>
{t(p.descriptionKey)}
</TableCell>
</TableRow>
@@ -630,21 +626,19 @@ function ParamRangeCell(props: { param: SupportedParameter }) {
if (defaultValue !== undefined) {
return (
<div className='flex flex-wrap items-center gap-1'>
<span className='text-muted-foreground text-[11px]'>=</span>
<code className='bg-muted rounded px-1 py-0.5 font-mono text-[11px]'>
<span className='text-muted-foreground text-sm'>=</span>
<code className='bg-muted rounded px-1.5 py-0.5 font-mono text-sm'>
{String(defaultValue)}
</code>
{range && (
<span className='text-muted-foreground text-[11px]'>{range}</span>
<span className='text-muted-foreground text-sm'>{range}</span>
)}
</div>
)
}
if (range) {
return (
<span className='text-muted-foreground font-mono text-[11px]'>
{range}
</span>
<span className='text-muted-foreground font-mono text-sm'>{range}</span>
)
}
if (enumValues && enumValues.length > 0) {
@@ -653,7 +647,7 @@ function ParamRangeCell(props: { param: SupportedParameter }) {
{enumValues.map((v) => (
<code
key={v}
className='bg-muted text-muted-foreground rounded px-1 py-0.5 font-mono text-[10px]'
className='bg-muted text-muted-foreground rounded px-1.5 py-0.5 font-mono text-sm'
>
{v}
</code>
@@ -661,7 +655,7 @@ function ParamRangeCell(props: { param: SupportedParameter }) {
</div>
)
}
return <span className='text-muted-foreground/60 text-[11px]'>—</span>
return <span className='text-muted-foreground/60 text-sm'>—</span>
}
// ---------------------------------------------------------------------------
@@ -681,25 +675,23 @@ function RateLimitsSection(props: { model: PricingModel }) {
<Table>
<TableHeader>
<TableRow className='bg-muted/30 hover:bg-muted/30'>
<TableHead className='h-9 text-xs'>{t('Group')}</TableHead>
<TableHead className='h-9 text-right text-xs'>RPM</TableHead>
<TableHead className='h-9 text-right text-xs'>TPM</TableHead>
<TableHead className='h-9 text-right text-xs'>RPD</TableHead>
<TableHead className='h-9'>{t('Group')}</TableHead>
<TableHead className='h-9 text-right'>RPM</TableHead>
<TableHead className='h-9 text-right'>TPM</TableHead>
<TableHead className='h-9 text-right'>RPD</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{limits.map((l) => (
<TableRow key={l.group} className='hover:bg-muted/20'>
<TableCell className='py-2 font-mono text-xs'>
{l.group}
</TableCell>
<TableCell className='py-2 text-right font-mono text-xs'>
<TableCell className='py-2 font-mono'>{l.group}</TableCell>
<TableCell className='py-2 text-right font-mono'>
{formatRateLimit(l.rpm)}
</TableCell>
<TableCell className='py-2 text-right font-mono text-xs'>
<TableCell className='py-2 text-right font-mono'>
{formatRateLimit(l.tpm)}
</TableCell>
<TableCell className='py-2 text-right font-mono text-xs'>
<TableCell className='py-2 text-right font-mono'>
{formatRateLimit(l.rpd)}
</TableCell>
</TableRow>