diff options
Diffstat (limited to 'frontend/src/pages/UsagePage.svelte')
| -rw-r--r-- | frontend/src/pages/UsagePage.svelte | 22 |
1 files changed, 11 insertions, 11 deletions
diff --git a/frontend/src/pages/UsagePage.svelte b/frontend/src/pages/UsagePage.svelte index cfd69ce..018b4a0 100644 --- a/frontend/src/pages/UsagePage.svelte +++ b/frontend/src/pages/UsagePage.svelte @@ -32,29 +32,29 @@ </script> <Page title="AI 用量" subtitle="内部 POC 阶段的用量计量与限额参考。不含报价或计费"> - <div class="stack"> + <div class="flex flex-col gap-3"> <Status busy={busy} error={error} busyText="正在载入用量…" empty={null} /> {#if usage} <Card.Root size="sm" class="p-0 [&>[data-slot=card-content]]:px-4 [&>[data-slot=card-content]]:py-3"> <Card.Content> - <div class="row" style="gap:0.4rem 0.8rem"> + <div class="flex flex-wrap gap-x-3 gap-y-1"> <div> - <div class="mlabel">模型请求</div> - <div class="mvalue">{usage.totals?.requests ?? usage.items.length}</div> + <div class="text-xs text-muted-foreground">模型请求</div> + <div class="text-2xl font-bold tabular-nums text-foreground">{usage.totals?.requests ?? usage.items.length}</div> </div> <Separator orientation="vertical" class="!h-8 self-center" /> <div> - <div class="mlabel">输入 tokens</div> - <div class="mvalue">{usage.totals?.input_tokens ?? '—'}</div> + <div class="text-xs text-muted-foreground">输入 tokens</div> + <div class="text-2xl font-bold tabular-nums text-foreground">{usage.totals?.input_tokens ?? '—'}</div> </div> <Separator orientation="vertical" class="!h-8 self-center" /> <div> - <div class="mlabel">输出 tokens</div> - <div class="mvalue">{usage.totals?.output_tokens ?? '—'}</div> + <div class="text-xs text-muted-foreground">输出 tokens</div> + <div class="text-2xl font-bold tabular-nums text-foreground">{usage.totals?.output_tokens ?? '—'}</div> </div> </div> {#if usage.internal_poc} - <p class="hint mt-1">内部 POC：请在当前配额内使用，不对实际价格负责；接受模型输出的决策需重新人工复核。</p> + <p class="text-sm text-muted-foreground mt-1">内部 POC：请在当前配额内使用，不对实际价格负责；接受模型输出的决策需重新人工复核。</p> {/if} </Card.Content> </Card.Root> @@ -76,8 +76,8 @@ <Table.Row> <Table.Cell>{fmtDateTime(it.created_at)}</Table.Cell> <Table.Cell>{it.model}</Table.Cell> - <Table.Cell class="num">{it.input_tokens ?? '—'}</Table.Cell> - <Table.Cell class="num">{it.output_tokens ?? '—'}</Table.Cell> + <Table.Cell class="tabular-nums">{it.input_tokens ?? '—'}</Table.Cell> + <Table.Cell class="tabular-nums">{it.output_tokens ?? '—'}</Table.Cell> <Table.Cell> <Badge variant={it.status === 'succeeded' ? 'secondary' : 'outline'}>{it.status ?? '—'}</Badge> </Table.Cell> |