From a7aab01f051487327e5ce52b6a8905208c546e8c Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 15:49:44 +0800
Subject: [变更性质] 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
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/UsagePage.svelte | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

(limited to 'frontend/src/pages/UsagePage.svelte')

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>
-- 
cgit v1.2.3