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/components/ProjectMetricRow.svelte | 58 +++++++------------------
 1 file changed, 16 insertions(+), 42 deletions(-)

(limited to 'frontend/src/components/ProjectMetricRow.svelte')

diff --git a/frontend/src/components/ProjectMetricRow.svelte b/frontend/src/components/ProjectMetricRow.svelte
index 6dd3f0e..66dfb93 100644
--- a/frontend/src/components/ProjectMetricRow.svelte
+++ b/frontend/src/components/ProjectMetricRow.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  // 首页指标卡行（round2 spec §1；round3 迁移 shadcn-svelte Card）
-  // 数据通过 props 注入（ProjectsPage 拉取并共享聚合输入，见 dashboardMetrics.ts）。
   import { aggregateDashboard } from '../lib/dashboardMetrics';
   import * as Card from '$lib/components/ui/card';
 
@@ -16,55 +14,31 @@
   const metric = $derived(aggregateDashboard({ projects, datasets, runs, usage }));
 </script>
 
-  <div class="metric-row" role="list" aria-label="工作台概览">
-    <Card.Root class="metric-r3" size="sm" data-testid="metric-card" role="listitem">
-      <span class="mlabel">我的项目</span>
-      <span class="mvalue">{metric.projectCount}</span>
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-2.5 mb-4" role="list" aria-label="工作台概览">
+    <Card.Root size="sm" data-testid="metric-card" role="listitem" class="gap-1 min-w-0 py-3">
+      <span class="text-xs text-muted-foreground">我的项目</span>
+      <span data-testid="metric-value" class="text-2xl font-bold tabular-nums text-foreground leading-tight break-all">{metric.projectCount}</span>
     </Card.Root>
-    <Card.Root class="metric-r3" size="sm" data-testid="metric-card" role="listitem">
-      <span class="mlabel">数据集</span>
-      <span class="mvalue">{metric.datasetCount}</span>
+    <Card.Root size="sm" data-testid="metric-card" role="listitem" class="gap-1 min-w-0 py-3">
+      <span class="text-xs text-muted-foreground">数据集</span>
+      <span data-testid="metric-value" class="text-2xl font-bold tabular-nums text-foreground leading-tight break-all">{metric.datasetCount}</span>
     </Card.Root>
-    <Card.Root class="metric-r3" size="sm" data-testid="metric-card" role="listitem">
-      <span class="mlabel">回测</span>
-      <span class="mvalue">
-        <span class="run-split"><i>运行中</i> {metric.runningRuns}</span>
-        <span class="run-split"><i>已完成</i> {metric.doneRuns}</span>
+    <Card.Root size="sm" data-testid="metric-card" role="listitem" class="gap-1 min-w-0 py-3">
+      <span class="text-xs text-muted-foreground">回测</span>
+      <span data-testid="metric-value" class="text-2xl font-bold tabular-nums text-foreground leading-tight break-all">
+        <span class="text-xs text-muted-foreground font-normal">运行中</span> {metric.runningRuns}
+        <span class="text-xs text-muted-foreground font-normal">已完成</span> {metric.doneRuns}
       </span>
     </Card.Root>
     <Card.Root
-      class="metric-r3"
       size="sm"
       data-testid="metric-card"
       role="listitem"
+      class="gap-1 min-w-0 py-3"
       data-todo={metric.usageLabel === '-' ? 'TODO: /api/ai/usage 未返回 totals.requests（使用记录为空）时保持占位 -' : undefined}
     >
-      <span class="mlabel">AI 用量</span>
-      <span class="mvalue">{metric.usageLabel}</span>
-      {#if metric.usageTokens}<span class="mvalue-sub">{metric.usageTokens}</span>{/if}
+      <span class="text-xs text-muted-foreground">AI 用量</span>
+      <span data-testid="metric-value" class="text-2xl font-bold tabular-nums text-foreground leading-tight break-all">{metric.usageLabel}</span>
+      {#if metric.usageTokens}<span class="text-xs text-muted-foreground tabular-nums">{metric.usageTokens}</span>{/if}
     </Card.Root>
   </div>
-
-<style>
-  .metric-row {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: 0.6rem;
-    margin-bottom: 1.1rem;
-  }
-  .metric-row :global(.metric-r3) {
-    gap: 0.12rem;
-    min-width: 0;
-  }
-  .metric-row :global(.metric-r3 .mvalue) {
-    font-size: 1.5rem;
-    font-weight: 700;
-    letter-spacing: -0.01em;
-    color: var(--foreground);
-    font-variant-numeric: tabular-nums;
-    line-height: 1.2;
-    overflow-wrap: anywhere;
-  }
-
-  .mvalue-sub { color: var(--text-3); }
-</style>
-- 
cgit v1.2.3