1 files changed, 45 insertions, 0 deletions
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}