diff options
Diffstat (limited to 'frontend/src/pages/UsagePage.svelte')
| -rw-r--r-- | frontend/src/pages/UsagePage.svelte | 92 |
1 files changed, 51 insertions, 41 deletions
diff --git a/frontend/src/pages/UsagePage.svelte b/frontend/src/pages/UsagePage.svelte index 88dd8a5..cfd69ce 100644 --- a/frontend/src/pages/UsagePage.svelte +++ b/frontend/src/pages/UsagePage.svelte @@ -5,6 +5,10 @@ import { extractStatusMessage } from '../lib/state'; import { fmtDateTime, fmtNum } from '../lib/format'; import type { AIUsage } from '../lib/types'; + import * as Card from '$lib/components/ui/card'; + import { Badge } from '$lib/components/ui/badge'; + import { Separator } from '$lib/components/ui/separator'; + import * as Table from '$lib/components/ui/table'; let usage = $state<AIUsage | null>(null); let busy = $state(true); @@ -31,51 +35,57 @@ <div class="stack"> <Status busy={busy} error={error} busyText="正在载入用量…" empty={null} /> {#if usage} - <div class="card"> - <div class="row spaced"> - <div> - <div class="mlabel">模型请求</div> - <div class="mvalue">{usage.totals?.requests ?? usage.items.length}</div> + <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> + <div class="mlabel">模型请求</div> + <div class="mvalue">{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> + <Separator orientation="vertical" class="!h-8 self-center" /> + <div> + <div class="mlabel">输出 tokens</div> + <div class="mvalue">{usage.totals?.output_tokens ?? '—'}</div> + </div> </div> - <div> - <div class="mlabel">输入 tokens</div> - <div class="mvalue">{usage.totals?.input_tokens ?? '—'}</div> - </div> - <div> - <div class="mlabel">输出 tokens</div> - <div class="mvalue">{usage.totals?.output_tokens ?? '—'}</div> - </div> - </div> - {#if usage.internal_poc} - <p class="hint">内部 POC：请在当前配额内使用，不对实际价格负责；接受模型输出的决策需重新人工复核。</p> - {/if} - </div> + {#if usage.internal_poc} + <p class="hint mt-1">内部 POC：请在当前配额内使用，不对实际价格负责；接受模型输出的决策需重新人工复核。</p> + {/if} + </Card.Content> + </Card.Root> {#if usage.items.length > 0} - <div class="card" style="padding:0.4rem 0.6rem"> - <table class="data"> - <thead> - <tr> - <th>时间</th> - <th>模型</th> - <th>输入</th> - <th>输出</th> - <th>状态</th> - </tr> - </thead> - <tbody> - {#each usage.items as it, i (it.id)} - <tr> - <td>{fmtDateTime(it.created_at)}</td> - <td>{it.model}</td> - <td class="num">{it.input_tokens ?? '—'}</td> - <td class="num">{it.output_tokens ?? '—'}</td> - <td class="badge">{it.status ?? '—'}</td> - </tr> + <Card.Root size="sm" class="px-3 py-2"> + <Table.Root> + <Table.Header> + <Table.Row> + <Table.Head>时间</Table.Head> + <Table.Head>模型</Table.Head> + <Table.Head>输入</Table.Head> + <Table.Head>输出</Table.Head> + <Table.Head>状态</Table.Head> + </Table.Row> + </Table.Header> + <Table.Body> + {#each usage.items as it (it.id)} + <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> + <Badge variant={it.status === 'succeeded' ? 'secondary' : 'outline'}>{it.status ?? '—'}</Badge> + </Table.Cell> + </Table.Row> {/each} - </tbody> - </table> - </div> + </Table.Body> + </Table.Root> + </Card.Root> {:else} <Status busy={false} empty="尚未使用 AI 建议" emptyHint="在项目「策略」标签发起一次 AI 修改，记录会出现在这里" /> {/if} |