feat(frontend): 结果/实验/策略/数据页迁移 shadcn 与新 Chart API

[变更性质]
四个业务标签页与数据集卡片迁移 shadcn 组件，图表消费切换到
layerchart 长格式 API，功能与数据语义不变。

[新增功能]
结果页权益曲线（策略权益/现金/基准，基准可缺省）与回撤曲线（desc
面积）改由 Chart.svelte data/series 渲染；实验记录页多回测归一对比
曲线改为快速长格式行构造。空数据行允许 undefined 列（基准缺口），
Chart data 类型放宽 [key:string]: string|number|undefined。

[实现方案]
RunsPage：查看入口改 shadcn Button（href 语义保留 hash 路由），
对比图数据由 compareOption（echarts option）化为 compare。
ProjectResultsTab：图表开关、日志折叠用 Button；equityData/
drawdownData $derived 计算峰值回撤。ProjectStrategyTab：快照输入、
冲突/AI/版本操作迁移 Button/Input。ProjectDataTab 与 DatasetCard：
shadcn 组件 + 保留 banner error/warn/info、retry-row 等 legacy class，
"使用相同请求重新获取"重试入口与 onRecreated 逻辑不变，配套
datasetCardRetry/datasetCardWarnings/projectDataTabRecreated 回归
测试。resultsAccounting.test.ts：layerchart 在 jsdom 挂载约 3 秒，
suite 全量下易撞默认 5s 超时，首测提高至 20s。

[影响范围]
npm run check 0 error、58 tests 全绿、npm run build 通过；真浏览器
375/768/1440 图表页零溢出（artifacts/ui-shadcn 截图与探针 JSON）。

1 files changed, 38 insertions, 70 deletions

diff --git a/frontend/src/pages/ProjectResultsTab.svelte b/frontend/src/pages/ProjectResultsTab.svelte
index 4149213..5ff03c0 100644
--- a/frontend/src/pages/ProjectResultsTab.svelte
+++ b/frontend/src/pages/ProjectResultsTab.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import Status from '../components/Status.svelte';
   import Chart from '../components/Chart.svelte';
-  import type { EChartsOption, LineSeriesOption } from 'echarts';
-import { listRuns, getRun } from '../lib/client';
+  import { Button } from '$lib/components/ui/button';
+  import { listRuns, getRun } from '../lib/client';
   import { extractStatusMessage } from '../lib/state';
   import {
     fmtDateTime,
@@ -55,73 +55,42 @@ import { listRuns, getRun } from '../lib/client';
   const result = $derived<BacktestResult | null>(run?.result ?? null);
   const hasEquity = $derived(!!result && result.equity.length > 0);
 
-  const equityOption: EChartsOption = $derived.by(() => {
-    if (!result || !hasEquity) return {};
-    const dates = result.equity.map((p) => p.date);
-    const series: LineSeriesOption[] = [
-      {
-        name: "策略权益",
-        type: "line" as const,
-        data: result.equity.map((p) => p.equity),
-        showSymbol: false,
-        lineStyle: { width: 1.6 },
-        itemStyle: { color: "#0f766e" }
-      },
-      {
-        name: "现金",
-        type: "line" as const,
-        data: result.equity.map((p) => p.cash),
-        showSymbol: false,
-        lineStyle: { type: "dashed", opacity: 0.65 },
-        itemStyle: { color: "#94a3b8" }
-      }
+  // long-format rows for the layerchart renderer ({ i, date, ...columns })
+  const equityData = $derived.by(() => {
+    if (!result || !hasEquity) return [];
+    return result.equity.map((p, i) => ({
+      i,
+      date: p.date,
+      equity: p.equity,
+      cash: p.cash,
+      benchmark: p.benchmark ?? undefined
+    }));
+  });
+
+  const hasBench = $derived(equityData.some((r) => r.benchmark !== undefined && r.benchmark !== null));
+
+  const equitySeries = $derived.by(() => {
+    if (!result || !hasEquity) return [];
+    const s = [
+      { key: 'equity', label: '策略权益', value: 'equity', color: '#0f766e' },
+      { key: 'cash', label: '现金', value: 'cash', color: '#94a3b8', dashed: true }
     ];
-    const bench = result.equity.map((p) => (p.benchmark === null || p.benchmark === undefined ? null : p.benchmark));
-    if (bench.some((x) => x !== null && x !== undefined)) {
-      series.push({
-        name: "基准",
-        type: "line" as const,
-        data: bench as number[],
-        showSymbol: false,
-        itemStyle: { color: "#eab308" }
-      });
-    }
-    return {
-      title: { text: undefined },
-      legend: { top: 0 },
-      grid: { top: 32, left: 60, right: 24, bottom: 54 },
-      tooltip: { trigger: "axis" },
-      xAxis: { type: "category", data: dates },
-      yAxis: { type: "value", scale: true, name: "金额" },
-      series
-    };
+    if (hasBench) s.push({ key: 'benchmark', label: '基准', value: 'benchmark', color: '#eab308' });
+    return s;
   });
 
-  const drawdownOption: EChartsOption = $derived.by(() => {
-    if (!result || !hasEquity) return {};
-    const dates = result.equity.map((p) => p.date);
+  const drawdownData = $derived.by(() => {
+    if (!result || !hasEquity) return [];
     let peak = -Infinity;
-    const dd = result.equity.map((p) => {
+    return result.equity.map((p, i) => {
       peak = Math.max(peak, p.equity);
-      return -((peak - p.equity) / peak) * 100;
+      return { i, date: p.date, dd: -((peak - p.equity) / peak) * 100 };
     });
-    return {
-      grid: { top: 24, left: 60, right: 24, bottom: 54 },
-      tooltip: { trigger: "axis", valueFormatter: (v) => `${(v as number).toFixed(2)}%` },
-      xAxis: { type: "category", data: dates },
-      yAxis: { type: "value", name: "回撤 %", max: 0 },
-      series: [
-        {
-          name: "回撤",
-          type: "line" as const,
-          data: dd,
-          showSymbol: false,
-          areaStyle: { color: "rgba(30, 74, 66, 0.25)" },
-          lineStyle: { width: 1 },
-          itemStyle: { color: "#134e4a" }
-        }
-      ]
-    };
+  });
+
+  const drawdownSeries = $derived.by(() => {
+    if (!result || !hasEquity) return [];
+    return [{ key: 'dd', label: '回撤', value: 'dd', color: '#134e4a', area: true }];
   });
 
   function switchToRun(id: string) {
@@ -220,13 +189,13 @@ import { listRuns, getRun } from '../lib/client';
 
       <div class="card stack">
         <div class="row">
-          <button class="btn small" aria-pressed={chartMode === "equity"} onclick={() => (chartMode = "equity")}>权益曲线（{result.equity.length} 点）</button>
-          <button class="btn small" aria-pressed={chartMode === "drawdown"} onclick={() => (chartMode = "drawdown")}>回撤曲线</button>
+          <Button variant={chartMode === "equity" ? "default" : "outline"} size="sm" aria-pressed={chartMode === "equity"} onclick={() => (chartMode = "equity")}>权益曲线（{result.equity.length} 点）</Button>
+          <Button variant={chartMode === "drawdown" ? "default" : "outline"} size="sm" aria-pressed={chartMode === "drawdown"} onclick={() => (chartMode = "drawdown")}>回撤曲线</Button>
         </div>
         {#if chartMode === "equity"}
-          <Chart option={equityOption} ariaLabel="策略权益曲线" height={340} />
+          <Chart data={equityData} series={equitySeries} ariaLabel="策略权益曲线" height={340} />
         {:else}
-          <Chart option={drawdownOption} ariaLabel="回撤曲线" height={300} />
+          <Chart data={drawdownData} series={drawdownSeries} ariaLabel="回撤曲线" height={300} />
         {/if}
       </div>
 
@@ -273,10 +242,9 @@ import { listRuns, getRun } from '../lib/client';
           </div>
           <div>
             <h3>策略日志</h3>
-            <button class="btn small" onclick={() => (logsOpen = !logsOpen)} aria-expanded={logsOpen}>
+            <Button variant="outline" size="sm" onclick={() => (logsOpen = !logsOpen)} aria-expanded={logsOpen}>
               {logsOpen ? "收起日志" : `展开日志（${result.logs.length} 行）`}
-            </button>
-            {#if logsOpen}
+            </Button>            {#if logsOpen}
               <pre class="logs">{result.logs.join("\n")}</pre>
             {/if}
           </div>