From 0b1ad75571b312dd60f9ae0099b47cc02ac54c78 Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 09:50:37 +0800
Subject: feat(frontend): 首页指标卡与项目行 sparkline（前端重设计第二轮之一）
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[变更性质] 新增能力，不动后端。
[新增功能] dashboardMetrics 聚合（项目/数据集/实验/AI 用量统计 + 最近回测首末净值），实盘数据优先、缺数以占位符 '-' 兜底；ProjectMetricRow 渲染 4 张 metric-card；Sparkline 组件输出 up/down 方向线段与端点圆点。
[实现方案] 聚合逻辑与展示组件分离，sparkline 仅依赖 first/last 两个字段，无图表库依赖。
[影响范围] frontend/src/lib 与 components；配套 5 组单测（dashboardMetrics/sparkline/metricRow）。
---
 frontend/src/components/Sparkline.svelte | 45 ++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 frontend/src/components/Sparkline.svelte

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

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}
-- 
cgit v1.2.3