From 61f5c545953bb4ee20b123bf9671ac35d7f1f3c1 Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 12:03:32 +0800
Subject: [变更性质] feat(frontend) [新增功能] round3 页面组件全量迁移
 shadcn-svelte（12 页面 + Modal/DatasetWizard/DatasetCard/Status） [实现方案]
 .btn→Button、.banner→Alert、table.data→Table.Root、.badge→Badge、.tabs→Tabs.Root、.metric-card/form.card→Card.Root；ProjectStrategyTab
 div 配对修复 [影响范围] 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 | 92 ++++++++++++++++++++-----------------
 1 file changed, 51 insertions(+), 41 deletions(-)

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

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