2 files changed, 128 insertions, 0 deletions
diff --git a/frontend/src/components/ProjectMetricRow.svelte b/frontend/src/components/ProjectMetricRow.svelte
new file mode 100644
index 0000000..31001bf
--- /dev/null
+++ b/frontend/src/components/ProjectMetricRow.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  // 首页指标卡行（leader round2 spec §1）
+  // 数据通过 props 注入（ProjectsPage 拉取并共享聚合输入，见 dashboardMetrics.ts）。
+  import { aggregateDashboard } from '../lib/dashboardMetrics';
+
+  interface Props {
+    /** 注入的聚合输入；null/undefined 视为"取不到"（占位 -） */
+    projects: { id: string }[] | null;
+    datasets: { id: string }[] | null;
+    runs: { id: string; status: string; result?: unknown }[] | null;
+    usage: { totals?: { input_tokens?: number; output_tokens?: number; requests?: number } } | null;
+  }
+  let { projects, datasets, runs, usage }: Props = $props();
+
+  const metric = $derived(aggregateDashboard({ projects, datasets, runs, usage }));
+</script>
+
+<div class="metric-row" role="list" aria-label="工作台概览">
+  <div class="metric-card" data-testid="metric-card" role="listitem">
+    <span class="mlabel">我的项目</span>
+    <span class="mvalue">{metric.projectCount}</span>
+  </div>
+  <div class="metric-card" data-testid="metric-card" role="listitem">
+    <span class="mlabel">数据集</span>
+    <span class="mvalue">{metric.datasetCount}</span>
+  </div>
+  <div class="metric-card" 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>
+    </span>
+  </div>
+  <div
+    class="metric-card"
+    data-testid="metric-card"
+    role="listitem"
+    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}
+  </div>
+</div>
+
+<style>
+  .metric-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 0.6rem;
+    margin-bottom: 1.1rem;
+  }
+  .metric-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) * 1.4);
+    padding: 0.65rem 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    min-width: 0;
+    transition: box-shadow 150ms ease, transform 150ms ease;
+  }
+  /* 桌面端 hover 轻微上浮阴影 */
+  @media (hover: hover) and (min-width: 768px) {
+    .metric-card:hover {
+      box-shadow: var(--shadow);
+      transform: translateY(-1px);
+    }
+  }
+  .metric-card .mvalue {
+    font-size: 1.35rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--foreground);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+    overflow-wrap: anywhere;
+  }
+  .run-split { display: inline-flex; align-items: baseline; gap: 0.3rem; }
+  .run-split i { font-style: normal; font-size: 0.68rem; color: var(--text-3); font-weight: 500; }
+  .mvalue-sub { font-size: 0.72rem; color: var(--text-3); }
+</style>
diff --git a/frontend/src/components/Sparkline.svelte b/frontend/src/components/Sparkline.svelte
new file mode 100644
index 0000000..12a3b47
--- /dev/null
+++ b/frontend/src/components/Sparkline.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  // 项目行迷你权益缩略图：最近一个回测 equity 的首尾两端点画一条线。
+  // 无数据（first/last 缺失）→ 组件整体留空，不渲染任何 svg（leader 约束）。
+  interface Props {
+    first: number | null;
+    last: number | null;
+    up?: boolean;
+    ariaLabel?: string;
+  }
+  let { first = null, last = null, up = false, ariaLabel = '最近回测权益缩略' }: Props = $props();
+
+  const H = 24;
+  const PAD = 3;
+  // 首尾两点：左起 0, 右侧满宽（宽度由父级 flex 决定，viewBox 归一为 100）
+  const X1 = PAD + 0;
+  const X2 = 100 - 0;
+  // 首尾净值常见的取值范围很大，只关心涨跌形态：把两点摆在对角带上，
+  // 上行从左下到右上，下行从左上到右下，端点各留 pad。
+  const y1 = $derived(up ? H - PAD : PAD);
+  const y2 = $derived(up ? PAD : H - PAD);
+</script>
+
+{#if first !== null && last !== null}
+  <svg
+    class="spark"
+    viewBox={`0 0 100 ${H}`}
+    preserveAspectRatio="none"
+    width="72"
+    height={H}
+    role="img"
+    aria-label={ariaLabel}
+    data-testid="sparkline"
+  >
+    <path
+      d={`M${X1},${y1} L${X2},${y2}`}
+      stroke={up ? 'var(--ok)' : 'var(--danger)'}
+      stroke-width="2.5"
+      fill="none"
+      stroke-linecap="round"
+      vector-effect="non-scaling-stroke"
+    />
+    <circle cx={X1} cy={y1} r="2.5" fill={up ? 'var(--ok)' : 'var(--danger)'} vector-effect="non-scaling-stroke" />
+    <circle cx={X2} cy={y2} r="2.5" fill={up ? 'var(--ok)' : 'var(--danger)'} />
+  </svg>
+{/if}