[变更性质] 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

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}