diff options
| author | Somhairle H. Marisol <[email protected]> | 2026-09-18 15:49:44 +0800 |
|---|---|---|
| committer | Somhairle H. Marisol <[email protected]> | 2026-09-18 15:49:44 +0800 |
| commit | a7aab01f051487327e5ce52b6a8905208c546e8c (patch) | |
| tree | 630a624523bc15d1a9f59ab20693385eaf55befb /frontend/src/pages/UsagePage.svelte | |
| parent | 375584174fb7191a57c5423fea45924ad6d812d5 (diff) | |
| download | strategy-lab-a7aab01f051487327e5ce52b6a8905208c546e8c.tar.gz | |
[变更性质] feat(frontend)
[新增功能] 12 页面组件全量 shadcn：Card/Button/Table/Tabs/Select/Alert；375 底部 Tab Bar 改用 Tabs 组件实现
[实现方案] 页面级手写 class 全部移除（.btn/.banner/table.data/.badge/.tabs/.metric-row/.m-tile/.hint 等改为 shadcn + tailwind 工具类）；Modal/DatasetWizard/DatasetCard/DiffView/CodeEditor/Status/Layout 同步
[影响范围] src/pages/*.svelte、src/components/*.svelte
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> |