path: root/frontend/src/pages/ProjectResultsTab.svelte

<script lang="ts">
  import Status from '../components/Status.svelte';
  import Chart from '../components/Chart.svelte';
  import { Button } from '$lib/components/ui/button';
  import { listRuns, getRun } from '../lib/client';
  import { extractStatusMessage } from '../lib/state';
  import {
    fmtDateTime,
    fmtPct,
    fmtNum,
    formatMoney,
    runStatusLabel,
    runStatusBadge,
    metricsLabels,
    metricsRow
  } from '../lib/format';
  import { capitalReporting } from '../lib/capitalMetrics';
  import { Alert } from '$lib/components/ui/alert';
  import { Badge } from '$lib/components/ui/badge';
  import * as Card from '$lib/components/ui/card';
  import * as Table from '$lib/components/ui/table';
  import * as Select from '$lib/components/ui/select';
  import * as Tabs from '$lib/components/ui/tabs';
  import type { Run, BacktestResult } from '../lib/types';

  interface Props {
    projectId: string;
    runId?: string;
  }
  let { projectId, runId }: Props = $props();

  let run = $state<Run | null>(null);
  let busy = $state(true);
  let error = $state<string | null>(null);
  let history = $state<Run[]>([]);
  let logsOpen = $state(false);
  let ordersOpen = $state(false);
  let chartMode = $state<'equity' | 'drawdown'>('equity');

  $effect(() => {
    void load();
  });

  async function load() {
    busy = true;
    error = null;
    try {
      if (!runId) {
        const res = await listRuns(projectId);
        history = res.items;
        run = res.items[0] ?? null;
      } else {
        run = await getRun(runId);
      }
    } catch (e) {
      error = extractStatusMessage(e);
    } finally {
      busy = false;
    }
  }

  const result = $derived<BacktestResult | null>(run?.result ?? null);
  const hasEquity = $derived(!!result && result.equity.length > 0);

  // long-format rows for the layerchart renderer ({ i, date, ...columns });
  // equity rows同时携带 dd（当日回撤%），供 hover 提示读数
  const equityData = $derived.by(() => {
    if (!result || !hasEquity) return [];
    let peak = -Infinity;
    return result.equity.map((p, i) => {
      peak = Math.max(peak, p.equity);
      return {
        i,
        date: p.date,
        equity: p.equity,
        cash: p.cash,
        benchmark: p.benchmark ?? undefined,
        dd: peak <= 0 ? 0 : -((peak - p.equity) / peak) * 100
      };
    });
  });

  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 }
    ];
    if (hasBench) s.push({ key: 'benchmark', label: '基准', value: 'benchmark', color: '#eab308' });
    return s;
  });

  const drawdownData = $derived.by(() => {
    if (!result || !hasEquity) return [];
    let peak = -Infinity;
    return result.equity.map((p, i) => {
      peak = Math.max(peak, p.equity);
      return { i, date: p.date, dd: -((peak - p.equity) / peak) * 100 };
    });
  });

  const drawdownSeries = $derived.by(() => {
    if (!result || !hasEquity) return [];
    return [{ key: 'dd', label: '回撤', value: 'dd', color: '#134e4a', area: true }];
  });

  function switchToRun(id: string) {
    runId = id;
    void load();
  }

  const ml = $derived(metricsLabels());
  const mr = $derived(result ? metricsRow(result.metrics) : []);
  // 投入口径 reporting（任务 A）：投入/持仓估值/回报，口径注明不含闲置现金
  const cap = $derived(result ? capitalReporting(result) : null);

  const tile = 'gap-1 min-w-0';
  const tileLabel = 'text-xs text-muted-foreground';
  const tileValue = 'text-2xl font-bold tabular-nums text-foreground leading-tight break-all';
  const metricValueProps = 'data-testid="metric-value"';
</script>

<div class="flex flex-col gap-3">
  <div class="flex flex-wrap justify-between items-center gap-2">
    <h2 class="text-lg font-semibold">回测结果</h2>
    {#if run}
      <span class="flex items-center gap-2">
        <span class="text-sm text-muted-foreground">Run {run.id.slice(0, 8)}…</span>
        <Badge variant={runStatusBadge[run.status] === 'ok' ? 'secondary' : runStatusBadge[run.status] === 'warn' ? 'outline' : 'destructive'}>{runStatusLabel[run.status]}</Badge>
      </span>
    {/if}
  </div>

  <Status busy={busy} error={error} busyText="加载结果…" empty={null} />

  {#if !busy && !error && !run}
    <Status busy={false} empty="此项目还没有回测结果" emptyHint="先在「回测」标签发起一次回测" />
  {/if}

  {#if run && !busy && !error}
    {#if history.length > 1}
      <div class="flex items-center gap-2">
        <span class="text-sm text-muted-foreground">查看其他回测：</span>
        <Select.Root
          type="single"
          value={run?.id ?? ''}
          onValueChange={(v) => switchToRun(v)}
        >
          <Select.Trigger data-testid="runsel" class="w-72 max-w-[320px]">
            {#snippet children()}
              <span>
                {history.find((h) => h.id === run?.id)?.created_at && fmtDateTime(history.find((h) => h.id === run?.id)!.created_at)} · {history.find((h) => h.id === run?.id) && runStatusLabel[history.find((h) => h.id === run?.id)!.status]}
              </span>
            {/snippet}
          </Select.Trigger>
          <Select.Content>
            {#each history as h (h.id)}
              <Select.Item value={h.id}>{fmtDateTime(h.created_at)} · {runStatusLabel[h.status]}</Select.Item>
            {/each}
          </Select.Content>
        </Select.Root>
      </div>
    {/if}

    {#if run.error}
      <Alert variant="destructive"><span aria-hidden="true">✕</span><span>{run.error}</span></Alert>
    {/if}

    {#if !result}
      <Status busy={false} empty="该回测尚无结果" emptyHint={runStatusBadge[run.status] === "danger" ? "见错误提示" : "回测仍在执行中，稍后刷新"} />
    {:else}
      {#if result.warnings?.length}
        <Alert variant="default">
          <span aria-hidden="true">⚠</span>
          <ul class="list-disc pl-5 mt-0.5">
            {#each result.warnings as w, i (i)}<li>{w}</li>{/each}
          </ul>
        </Alert>
      {/if}

      <Card.Root size="sm" class="p-4 flex flex-col gap-3">
        {#if result.metrics}
          {@const mrow = result.metrics}
          <div class="grid grid-cols-2 md:grid-cols-3 gap-2.5">
            <Card.Root size="sm" class={tile}><div class={tileLabel}>总收益率</div><div class={tileValue} data-testid="metric-value">{fmtPct(mrow.total_return)}</div></Card.Root>
            <Card.Root size="sm" class={tile}><div class={tileLabel}>年化收益率</div><div class={tileValue} data-testid="metric-value">{fmtPct(mrow.annual_return)}</div></Card.Root>
            <Card.Root size="sm" class={tile}><div class={tileLabel}>最大回撤</div><div class={tileValue} data-testid="metric-value">{fmtPct(mrow.max_drawdown)}</div></Card.Root>
            <Card.Root size="sm" class={tile}><div class={tileLabel}>夏普比率</div><div class={tileValue} data-testid="metric-value">{fmtNum(mrow.sharpe)}</div></Card.Root>
            <Card.Root size="sm" class={tile}><div class={tileLabel}>平仓回合数</div><div class={tileValue} data-testid="metric-value">{mrow.trade_count ?? "—"}</div></Card.Root>
            <Card.Root size="sm" class={tile}><div class={tileLabel}>期末权益</div><div class={tileValue} data-testid="metric-value">{formatMoney(mrow.final_equity)}</div></Card.Root>
          </div>
        {/if}
        {#if cap}
          <div class="grid grid-cols-2 md:grid-cols-3 gap-2.5" data-testid="capital-reporting">
            <Card.Root size="sm" class={tile}><div class={tileLabel}>累计投入</div><div class={tileValue} data-testid="metric-value">{formatMoney(cap.invested)}</div></Card.Root>
            <Card.Root size="sm" class={tile}><div class={tileLabel}>最终持仓估值</div><div class={tileValue} data-testid="metric-value">{formatMoney(cap.holdingValue)}</div></Card.Root>
            <Card.Root size="sm" class={tile}><div class={tileLabel}>投入回报率</div><div class={tileValue} data-testid="metric-value">{cap.returnPct ?? '—'}</div></Card.Root>
          </div>
          <p class="text-sm text-muted-foreground">投入口径不含初始账户闲置现金：累计投入 = 首日现金 − 末日现金；持仓估值 = 末日持仓 × 最新收盘价。</p>
        {/if}
        <p class="text-sm text-muted-foreground">
          平仓回合数为已完成的开仓并全部平仓的完整回合（1 个回合 = 1 次平仓），不含撤单与未平仓的单笔成交；成交记录中的“金额”为真实成交额（数量 × 成交价），非持仓成本。结果非投资建议；未完全模拟流动性/涨跌停等限制。
          引擎 {result.engine?.name} {result.engine?.version}
          {#if result.elapsed_ms}<span> · 耗时 {(result.elapsed_ms / 1000).toFixed(1)}s</span>{/if}
          {#if result.peak_rss_kb}<span> · 峰值内存 {fmtNum(result.peak_rss_kb / 1024)} MB</span>{/if}
        </p>
      </Card.Root>

      <Card.Root size="sm" class="p-4 flex flex-col gap-3">
        <Tabs.Root value={chartMode} onValueChange={(v) => (chartMode = v as 'equity' | 'drawdown')} class="w-fit">
          <Tabs.List variant="line">
            <Tabs.Trigger value="equity">权益曲线（{result.equity.length} 点）</Tabs.Trigger>
            <Tabs.Trigger value="drawdown">回撤曲线</Tabs.Trigger>
          </Tabs.List>
        </Tabs.Root>
        {#if chartMode === "equity"}
          <Chart data={equityData} series={equitySeries} ariaLabel="策略权益曲线" height={340} extras={[{ key: 'dd', label: '回撤', color: '#134e4a' }]} />
        {:else}
          <Chart data={drawdownData} series={drawdownSeries} ariaLabel="回撤曲线" height={300} valueFormatter={(v) => (typeof v === 'number' ? `${v.toFixed(2)}%` : String(v))} />
        {/if}
      </Card.Root>

      <Card.Root size="sm" class="p-4 flex flex-col gap-4">
        <h2 class="text-lg font-semibold m-0">订单与持仓记录</h2>
        <div class="grid md:grid-cols-[1.4fr_1fr] gap-4 items-start">
          <div>
            <h3 class="text-base font-semibold">成交记录 ({result.trades.length})</h3>
            {#if result.trades.length > 0}
              <div class="overflow-x-auto">
                <Table.Root>
                  <Table.Header>
                    <Table.Row>
                      <Table.Head>日期</Table.Head>
                      <Table.Head>标的</Table.Head>
                      <Table.Head>方向</Table.Head>
                      <Table.Head>数量</Table.Head>
                      <Table.Head>价格</Table.Head>
                      <Table.Head>金额</Table.Head>
                      <Table.Head>佣金</Table.Head>
                    </Table.Row>
                  </Table.Header>
                  <Table.Body>
                    {#each result.trades.slice(0, 80) as t, i (i)}
                      <Table.Row>
                        <Table.Cell>{t.date}</Table.Cell>
                        <Table.Cell class="tabular-nums">{t.symbol}</Table.Cell>
                        <Table.Cell>{t.side === "buy" ? "买入" : "卖出"}</Table.Cell>
                        <Table.Cell class="tabular-nums">{t.quantity}</Table.Cell>
                        <Table.Cell class="tabular-nums">{fmtNum(t.price, 3)}</Table.Cell>
                        <Table.Cell class="tabular-nums">{fmtNum(t.value)}</Table.Cell>
                        <Table.Cell class="tabular-nums">{fmtNum(t.commission, 4)}</Table.Cell>
                      </Table.Row>
                    {/each}
                  </Table.Body>
                </Table.Root>
              </div>
              {#if result.trades.length > 80}
                <p class="text-sm text-muted-foreground">仅显示前 80 条，共 {result.trades.length} 条</p>
              {/if}
            {:else}
              <p class="text-sm text-muted-foreground">本区间未发生成交</p>
            {/if}
          </div>
          <div>
            <h3 class="text-base font-semibold">策略日志</h3>
            <Button variant="outline" size="sm" onclick={() => (logsOpen = !logsOpen)} aria-expanded={logsOpen}>
              {logsOpen ? "收起日志" : `展开日志（${result.logs.length} 行）`}
            </Button>            {#if logsOpen}
              <pre class="font-mono text-sm p-2 bg-muted rounded-md overflow-x-auto whitespace-pre-wrap break-all mt-2">{result.logs.join("\n")}</pre>
            {/if}
          </div>
        </div>
        <div>
          <h3 class="text-base font-semibold">
            数据与引擎
            <span class="text-sm text-muted-foreground font-normal">本轮使用的引擎版本、耗时与消耗内存均在上方备注。</span>
          </h3>
          <p class="text-sm text-muted-foreground">
            结果由对应策略代码、配置、数据清单（数据哈希 {result.data_manifest_hash?.slice(0, 12)}）以及当时引擎共同决定。
          </p>
        </div>
      </Card.Root>
    {/if}
  {/if}

  {#if !busy && !error && history.length === 0 && run === null}
    <Status busy={false} empty="还没有可展示的回测" emptyHint="在「回测」标签先启动一遍" />
  {/if}
</div>