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/RunsPage.svelte | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

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

diff --git a/frontend/src/pages/RunsPage.svelte b/frontend/src/pages/RunsPage.svelte
index 911da2a..77626b5 100644
--- a/frontend/src/pages/RunsPage.svelte
+++ b/frontend/src/pages/RunsPage.svelte
@@ -6,7 +6,7 @@
   import { listRuns } from '../lib/client';
   import { extractStatusMessage } from '../lib/state';
   import { fmtDateTime, runStatusLabel, runStatusBadge, fmtPct, fmtNum, formatMoney } from '../lib/format';
-import { capitalReporting } from '../lib/capitalMetrics';
+  import { capitalReporting } from '../lib/capitalMetrics';
   import { Alert } from '$lib/components/ui/alert';
   import { Badge } from '$lib/components/ui/badge';
   import * as Card from '$lib/components/ui/card';
@@ -103,7 +103,7 @@ import { capitalReporting } from '../lib/capitalMetrics';
 </script>
 
 <Page title="实验记录" subtitle="查看与选择比较不同回测；结果仅展示真实完成任务的数据" wide>
-  <div class="stack">
+  <div class="flex flex-col gap-3">
     <Status busy={busy} error={error} busyText="正在加载实验…" empty={null} />
 
     {#if !busy && !error && runs.length === 0}
@@ -111,7 +111,7 @@ import { capitalReporting } from '../lib/capitalMetrics';
     {/if}
 
     {#if !busy && !error && runs.length > 0}
-      <Card.Root size="sm" class="px-3 py-2 [&>*:[data-slot=card-content]]:p-0">
+      <Card.Root size="sm" class="overflow-x-auto">
         <Table.Root>
           <Table.Header>
             <Table.Row>
@@ -140,8 +140,8 @@ import { capitalReporting } from '../lib/capitalMetrics';
                 </Table.Cell>
                 <Table.Cell>{fmtDateTime(r.created_at)}</Table.Cell>
                 <Table.Cell><Badge variant={runStatusBadge[r.status] === 'ok' ? 'secondary' : runStatusBadge[r.status] === 'warn' ? 'outline' : 'destructive'}>{runStatusLabel[r.status]}</Badge></Table.Cell>
-                <Table.Cell class="num">{r.project_id?.slice(0, 8)}…</Table.Cell>
-                <Table.Cell class="num">{r.dataset_id?.slice(0, 8)}…</Table.Cell>
+                <Table.Cell class="tabular-nums">{r.project_id?.slice(0, 8)}…</Table.Cell>
+                <Table.Cell class="tabular-nums">{r.dataset_id?.slice(0, 8)}…</Table.Cell>
                 <Table.Cell>{formatMoney(r.config?.capital)} · {fmtPct(r.config?.commission, 4)} / {fmtPct(r.config?.slippage, 4)}</Table.Cell>
                 <Table.Cell>{r.result ? fmtPct(r.result.metrics.total_return) : '—'}</Table.Cell>
                 <Table.Cell>{r.result ? fmtPct(r.result.metrics.max_drawdown) : '—'}</Table.Cell>
@@ -152,12 +152,12 @@ import { capitalReporting } from '../lib/capitalMetrics';
             {/each}
           </Table.Body>
         </Table.Root>
-        <p class="hint" style="padding:0.4rem 0.6rem">最多同时选中 4 个已完成的回测用于比较。</p>
+        <p class="text-sm text-muted-foreground p-2">最多同时选中 4 个已完成的回测用于比较。</p>
       </Card.Root>
 
       {#if selected.length > 0}
-        <Card.Root size="sm" class="stack">
-          <h2>条件差异</h2>
+        <Card.Root size="sm" class="p-4 flex flex-col gap-3 overflow-x-auto">
+          <h2 class="text-lg font-semibold">条件差异</h2>
           <Table.Root>
             <Table.Header>
               <Table.Row>
@@ -167,22 +167,22 @@ import { capitalReporting } from '../lib/capitalMetrics';
             </Table.Header>
             <Table.Body>
               {#each configDiffRows as row, i (i)}
-                <Table.Row class={row.differing ? 'diffrow' : ''}>
+                <Table.Row class={row.differing ? 'bg-primary/5' : ''}>
                   <Table.Head>{row.label}</Table.Head>
                   {#each row.vals as v, j (j)}
-                    <Table.Cell class={row.differing ? 'num-diff num' : 'num'}>{v}</Table.Cell>
+                    <Table.Cell class="tabular-nums">{v}</Table.Cell>
                   {/each}
                 </Table.Row>
               {/each}
             </Table.Body>
           </Table.Root>
-      </Card.Root>
+        </Card.Root>
 
         {#if comparable.length > 1}
-          <Card.Root size="sm" class="stack">
-            <h2>收益曲线对齐比较（首日归一）</h2>
+          <Card.Root size="sm" class="p-4 flex flex-col gap-3">
+            <h2 class="text-lg font-semibold">收益曲线对齐比较（首日归一）</h2>
             <Chart data={compare.data} series={compare.series} ariaLabel="多回测对比曲线" height={340} />
-            <p class="hint">起点对齐为 1，仅叠加不同起点的曲线时只在各自区间内展示。</p>
+            <p class="text-sm text-muted-foreground">起点对齐为 1，仅叠加不同起点的曲线时只在各自区间内展示。</p>
           </Card.Root>
         {:else}
           <Status busy={false} empty="请再选中至少一个已完成的回测以展示比较" />
-- 
cgit v1.2.3