qlib/frontend/web/app/backtest/page.tsx

"use client";

/**
 * 回测组合（/backtest）—— 选若干选股策略 + 填回测参数 → 保存为组合 / 直接运行。
 *
 * 2026-09 重构后这里是回测的**唯一产品入口**：
 * - 选股策略（怎么选股）来自 /strategies；
 * - 费率 / 复权口径来自 /settings（公共配置，本页只读展示）；
 * - 本页只定「回测时才定的参数」：起始资金、持仓数 N、持仓天数区间 [Tmin,Tmax]、
 *   调仓时机（日/周/月）、回测区间。
 *
 * 进入方式（都可分享 URL）：
 * - 直接进入：空组合开始；
 * - `?combo=CMB-xxx`：载入已保存组合；
 * - `?strategy=STG-xxx`：预先把该选股策略勾进组合（从策略库「加入回测组合」过来）。
 */
import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { apiDelete, apiGet, apiPost, apiPut } from "@/lib/api";
import { runSavedCombo, submitComboJob, useJobRunner } from "@/lib/jobs";
import { recentRange } from "@/lib/dates";
import type { BacktestCombo, BacktestResult, GlobalConfig, SelectionStrategy } from "@/lib/types";
import { PageHeader, Card, Pill, Btn, Banner, Empty, Loading, Field, Progress, BacktestMetrics } from "@/components/ui";
import { BacktestResultView } from "@/components/BacktestResultView";
import { JobProgress } from "@/components/JobProgress";
import { adjustLabel } from "@/lib/labels";

export default function BacktestPage() {
  return (
    <Suspense fallback={<Loading label="加载回测组合页…" />}>
      <BacktestInner />
    </Suspense>
  );
}

interface Draft {
  name: string;
  description: string;
  strategyIds: string[];
  initialCapital: number;
  holdCount: number;
  holdMinDays: number;
  holdMaxDays: number | null; // null = 不强制了结
  rebalanceFreq: "daily" | "weekly" | "monthly";
  start: string;
  end: string;
}

function emptyDraft(range: { start: string; end: string }): Draft {
  return {
    name: "",
    description: "",
    strategyIds: [],
    initialCapital: 1_000_000,
    holdCount: 20,
    holdMinDays: 0,
    holdMaxDays: null,
    rebalanceFreq: "monthly",
    start: range.start,
    end: range.end,
  };
}

/**
 * 草稿 → 组合对象。
 *
 * `nameFallback`：**运行**（不保存）时组合名可以为空，但 `/combos/run` 的契约里
 * `name` 必填 —— 老版本直接提交空名字，用户看到的是 422 原文
 * （`String should have at least 1 character`），点了「运行」却像什么都没发生。
 * 运行是临时组合、不会落库，所以这里给一个**如实说明「未命名/仅本次运行」**的名字，
 * 而不是编一个像真的组合名。要正式命名请用「保存为回测组合」。
 */
function draftToCombo(d: Draft, nameFallback?: string): BacktestCombo {
  return {
    name: d.name.trim() || nameFallback || "",
    description: d.description.trim(),
    strategy_ids: d.strategyIds,
    initial_capital: d.initialCapital,
    hold_count: d.holdCount,
    hold_min_days: d.holdMinDays,
    hold_max_days: d.holdMaxDays,
    rebalance_freq: d.rebalanceFreq,
    period: [d.start, d.end],
  };
}

function comboToDraft(c: BacktestCombo): Draft {
  return {
    name: c.name,
    description: c.description ?? "",
    strategyIds: [...c.strategy_ids],
    initialCapital: c.initial_capital,
    holdCount: c.hold_count,
    holdMinDays: c.hold_min_days,
    holdMaxDays: c.hold_max_days,
    rebalanceFreq: c.rebalance_freq,
    start: c.period[0],
    end: c.period[1],
  };
}

/** 调仓时机中文标签（列表与摘要共用，避免两处写法漂移）。 */
const FREQ_LABEL: Record<Draft["rebalanceFreq"], string> = {
  daily: "每日",
  weekly: "每周",
  monthly: "每月",
};

function validateDraft(d: Draft, strategies: SelectionStrategy[]): Record<string, string> {
  const e: Record<string, string> = {};
  if (!d.strategyIds.length) e.strategies = "至少选择一个选股策略";
  else {
    const missing = d.strategyIds.filter((id) => !strategies.some((s) => s.id === id));
    if (missing.length) e.strategies = `以下选股策略已不存在，请移除：${missing.join(", ")}`;
  }
  if (d.holdCount < 1) e.holdCount = "持仓数 N 至少为 1";
  if (d.holdMinDays < 0) e.holdMinDays = "Tmin 不能为负";
  if (d.holdMaxDays !== null && d.holdMaxDays < 1) e.holdMaxDays = "Tmax 至少为 1 天";
  if (d.holdMaxDays !== null && d.holdMinDays > 0 && d.holdMaxDays < d.holdMinDays)
    e.holdMaxDays = `Tmax=${d.holdMaxDays} 不能小于 Tmin=${d.holdMinDays}`;
  if (d.initialCapital < 10000) e.capital = "起始资金建议 ≥ 1 万";
  if (!d.start || !d.end) e.period = "起止日期都必填";
  else if (d.start >= d.end) e.period = "开始日期必须早于结束日期";
  return e;
}

function BacktestInner() {
  const search = useSearchParams();
  const comboId = search.get("combo");
  const presetStrategy = search.get("strategy");

  const range = useMemo(() => recentRange(), []);
  const [strategies, setStrategies] = useState<SelectionStrategy[]>([]);
  const [config, setConfig] = useState<GlobalConfig | null>(null);
  const [combos, setCombos] = useState<BacktestCombo[] | null>(null);
  const [draft, setDraft] = useState<Draft>(emptyDraft(range));
  const [savedComboId, setSavedComboId] = useState<string | null>(null);
  const [result, setResult] = useState<BacktestResult | null>(null);
  // 本次结果的归档 id：结果区据此提供「新页面放大」（放大页从归档读同一份数据）。
  // 同步/未归档的结果没有 id，放大入口会如实说明原因而不是给个坏链接。
  const [resultArchiveId, setResultArchiveId] = useState<string | null>(null);
  const [running, setRunning] = useState(false);
  const [runningComboId, setRunningComboId] = useState<string | null>(null);
  /**
   * 作业反馈统一交给 `useJobRunner`（全站同一套）：提交瞬间就有「正在提交作业…」，
   * 之后是真实阶段 + 每秒自增的已用时间 + 作业号 + 可取消 —— 用户反馈的
   * 「点了回测没有任何反馈，不知道有没有开始」就是这里的缺口。
   */
  const job = useJobRunner<BacktestResult>("回测组合");
  const [error, setError] = useState("");
  const [notice, setNotice] = useState("");
  const [saving, setSaving] = useState(false);
  const [deletingComboId, setDeletingComboId] = useState<string | null>(null);
  const [revealErrors, setRevealErrors] = useState(false);
  const bootstrapped = useRef(false);

  /* ---------- 初始化：策略列表 + 公共配置 + 已保存组合 + 来源载入 ---------- */
  useEffect(() => {
    let alive = true;
    Promise.all([
      apiGet<SelectionStrategy[]>("/strategies"),
      apiGet<GlobalConfig>("/config"),
    ])
      .then(([sts, cfg]) => {
        if (!alive) return;
        setStrategies(sts);
        setConfig(cfg);
      })
      .catch((e: Error) => alive && setError(e.message));
    // 组合库单独拉取：即便它失败，也不该连累策略列表与公共配置（否则整页只剩一条错误）。
    apiGet<BacktestCombo[]>("/combos")
      .then((cbs) => {
        if (alive) setCombos(cbs);
      })
      .catch((e: Error) => {
        if (!alive) return;
        setError(e.message);
        // 给空列表，否则「组合库」会永远停在加载中
        setCombos((prev) => prev ?? []);
      });
    return () => {
      alive = false;
    };
  }, []);

  const loadCombos = useCallback(async () => {
    try {
      setCombos(await apiGet<BacktestCombo[]>("/combos"));
    } catch (e) {
      setError((e as Error).message);
      setCombos([]);
    }
  }, []);

  useEffect(() => {
    if (bootstrapped.current) return;
    bootstrapped.current = true;
    (async () => {
      if (comboId) {
        try {
          const c = await apiGet<BacktestCombo>(`/combos/${encodeURIComponent(comboId)}`);
          setDraft(comboToDraft(c));
          setSavedComboId(c.id ?? null);
          setNotice(`已载入回测组合「${c.name}」（${c.id}）`);
          return;
        } catch (e) {
          setError(`回测组合 ${comboId} 载入失败：${(e as Error).message}`);
        }
      }
      if (presetStrategy) {
        setDraft((d) => ({ ...d, strategyIds: [presetStrategy] }));
        setNotice(`已把选股策略 ${presetStrategy} 预勾选进组合 —— 可再加其它策略、填好参数后运行。`);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const errors = validateDraft(draft, strategies);
  const blocking = Object.keys(errors);

  function toggleStrategy(id: string) {
    setDraft((d) => ({
      ...d,
      strategyIds: d.strategyIds.includes(id)
        ? d.strategyIds.filter((x) => x !== id)
        : [...d.strategyIds, id],
    }));
  }

  async function run() {
    if (blocking.length) {
      setError(errors[blocking[0]]);
      setRevealErrors(true);
      requestAnimationFrame(() => {
        const el = document.querySelector<HTMLElement>(".input--invalid, .field--invalid");
        el?.scrollIntoView({ block: "center", behavior: "smooth" });
      });
      return;
    }
    // 未命名时用「未命名组合（仅本次运行）」：临时组合不落库，只是给作业一个可读标签；
    // 不让用户在点「运行」后撞上 422（那正是「点了没反应」的观感来源之一）。
    const fallback = draft.name.trim() ? undefined : "未命名组合（仅本次运行）";
    if (fallback) {
      setNotice("本次运行未命名组合名 —— 按「未命名组合（仅本次运行）」提交（不会保存到组合库）。");
    }
    await runVia(() => submitComboJob(draftToCombo(draft, fallback)), null);
  }

  /**
   * 共用的「提交 Job → 轮询 → 出结果」管道。
   *
   * 两条入口共用：① 用页面上的草稿运行（临时组合，不落库）；② 从组合库直接运行已保存组合
   * （走 POST /combos/{id}/run，跑库里那份参数）。抽出来是为了让两条路径的阶段显示、
   * 归档提示、错误处理完全一致，不会一条修了另一条忘了。
   */
  async function runVia(submit: () => Promise<{ job_id: string }>, comboId: string | null) {
    setRunning(true);
    setRunningComboId(comboId);
    setError("");
    setNotice("");
    setResult(null);
    setResultArchiveId(null);
    try {
      const out = await job.run(submit, {
        label: draft.name ? `回测组合「${draft.name}」` : "回测组合",
      });
      if (out.status === "success" && out.result) {
        setResult(out.result as BacktestResult);
        const exp = out.experimentId ?? null;
        setResultArchiveId(exp);
        setNotice(
          exp
            ? `回测完成，已归档为实验 ${exp}（可在「实验对比」页与其它版本对比）。`
            : "回测完成，已自动归档。",
        );
      } else if (out.status === "cancelled") {
        // 主动取消不是错误：如实说明，并提示可重新运行
        setNotice("已取消该回测任务（未产生结果）。可改完参数后重新运行。");
      } else {
        setError(`任务${out.status}${out.error ? `：${out.error}` : ""}`);
      }
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setRunning(false);
      setRunningComboId(null);
    }
  }

  /* ---------- 组合库操作 ---------- */

  /** 把库里的一份组合回填到表单（不自动运行，先把参数摆出来给用户看/改）。 */
  function loadCombo(c: BacktestCombo) {
    setDraft(comboToDraft(c));
    setSavedComboId(c.id ?? null);
    setError("");
    setRevealErrors(false);
    setNotice(`已载入回测组合「${c.name}」（${c.id}）—— 可直接运行，或改完参数再「更新组合」。`);
  }

  /** 用库里的参数直接运行（不掺入表单里未保存的改动）。 */
  async function runSaved(c: BacktestCombo) {
    if (!c.id) return;
    setDraft(comboToDraft(c));
    setSavedComboId(c.id);
    await runVia(() => runSavedCombo(c.id as string), c.id);
  }

  /** 清空表单，开始一个新组合（不影响库里已有的）。 */
  function startNewCombo() {
    setDraft(emptyDraft(range));
    setSavedComboId(null);
    setResult(null);
    setNotice("已清空表单，开始一个新组合。");
    setError("");
    setRevealErrors(false);
  }

  async function removeCombo(c: BacktestCombo) {
    if (!c.id) return;
    if (!window.confirm(`删除回测组合「${c.name}」（${c.id}）？此操作不可撤销（归档结果不受影响）。`)) {
      return;
    }
    setDeletingComboId(c.id);
    setError("");
    try {
      await apiDelete(`/combos/${encodeURIComponent(c.id)}`);
      if (savedComboId === c.id) setSavedComboId(null);
      setNotice(`已删除回测组合「${c.name}」。`);
      await loadCombos();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setDeletingComboId(null);
    }
  }

  async function saveCombo() {
    if (blocking.length) {
      setError(errors[blocking[0]]);
      setRevealErrors(true);
      return;
    }
    if (!draft.name.trim()) {
      setError("保存组合需要起个名字");
      setRevealErrors(true);
      return;
    }
    setSaving(true);
    setError("");
    try {
      const combo = draftToCombo(draft);
      if (savedComboId) {
        await apiPut<BacktestCombo>(`/combos/${encodeURIComponent(savedComboId)}`, combo);
        setNotice(`已更新回测组合「${combo.name}」`);
      } else {
        const saved = await apiPost<BacktestCombo>("/combos", combo);
        setSavedComboId(saved.id ?? null);
        setNotice(`已保存回测组合「${saved.name}」（${saved.id}）`);
      }
      await loadCombos();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setSaving(false);
    }
  }

  const showErr = (k: string) => (revealErrors ? errors[k] : undefined);

  return (
    <>
      <PageHeader
        title="回测组合"
        sub="选一个或多个选股策略，填上回测参数（资金/持仓/持仓天数区间/调仓时机/区间），保存为组合或直接运行；已保存的组合在下方「组合库」里可载入、直接运行、删除。费率与复权口径取自公共配置。"
        actions={
          <div className="row" style={{ gap: 8 }}>
            <Link href="/strategies" className="btn"><span>选股策略库</span></Link>
            <Link href="/settings" className="btn"><span>公共配置</span></Link>
            <Link href="/experiments" className="btn"><span>实验对比</span></Link>
          </div>
        }
      />

      {error ? <Banner tone="error">{error}</Banner> : null}
      {notice ? <Banner tone="info">{notice}</Banner> : null}

      {/* 公共配置（只读） */}
      {config ? (
        <Card icon="database" title="本次回测采用的公共配置（只读）" tools={
          <Link href="/settings" className="btn btn--sm"><span>去修改</span></Link>
        }>
          <div className="chips">
            <span className="chip">佣金 <b>{(config.commission_rate * 100).toFixed(3)}%</b></span>
            <span className="chip">印花税 <b>{(config.stamp_tax_rate * 100).toFixed(2)}%</b></span>
            <span className="chip">滑点 <b>{(config.slippage_rate * 100).toFixed(2)}%</b></span>
            <span className="chip">最低佣金 <b>{config.min_commission} 元</b></span>
            <span className="chip">复权 <b>{adjustLabel(config.price_adjustment)}</b></span>
            <span className="chip">基准 <b className="mono">{config.benchmark}</b></span>
          </div>
          <div className="hint" style={{ marginTop: 8 }}>
            运行时这些值会被**快照**进归档，事后改公共配置不影响这次结果的数字。
          </div>
        </Card>
      ) : null}

      {/* 组合库：保存过的组合在这里能被找回（否则「保存」等于存进黑洞） */}
      <Card
        icon="archive"
        title={`已保存的回测组合${combos ? ` · ${combos.length}` : ""}`}
        tools={
          <div className="row" style={{ gap: 8 }}>
            <Btn size="sm" onClick={startNewCombo} disabled={running}>
              新建组合
            </Btn>
            <Btn size="sm" onClick={() => void loadCombos()}>
              刷新
            </Btn>
          </div>
        }
      >
        {combos === null ? (
          <Loading label="读取已保存的回测组合…" />
        ) : combos.length === 0 ? (
          <Empty
            icon="archive"
            title="还没有保存过回测组合"
            hint="勾选策略、填好参数后点「保存为回测组合」，之后就能在这里一键载入或直接运行。"
          />
        ) : (
          <div className="combo-list">
            {combos.map((c) => {
              const isCurrent = savedComboId === c.id;
              const isRunning = runningComboId === c.id;
              return (
                <div key={c.id ?? c.name} className={`combo-item${isCurrent ? " is-on" : ""}`}>
                  <div className="combo-item__main">
                    <div className="row" style={{ gap: 8, flexWrap: "wrap", alignItems: "center" }}>
                      <b>{c.name}</b>
                      {isCurrent ? (
                        <Pill tone="violet" icon="check">当前载入</Pill>
                      ) : null}
                      {isRunning ? <Pill tone="warn">运行中…</Pill> : null}
                      <span className="mono hint">{c.id}</span>
                    </div>
                    <div className="chips" style={{ marginTop: 6 }}>
                      <span className="chip">持仓数 <b>{c.hold_count}</b></span>
                      <span className="chip">
                        持仓区间 <b>[{c.hold_min_days}, {c.hold_max_days ?? "∞"}] 天</b>
                      </span>
                      <span className="chip">调仓 <b>{FREQ_LABEL[c.rebalance_freq] ?? c.rebalance_freq}</b></span>
                      <span className="chip">区间 <b>{c.period[0]} ~ {c.period[1]}</b></span>
                      <span className="chip">引用策略 <b>{c.strategy_ids.length}</b> 个</span>
                    </div>
                    {c.description ? <div className="strategy-desc">{c.description}</div> : null}
                  </div>
                  <div className="strategy-actions">
                    <Btn size="sm" icon="edit" disabled={running} onClick={() => loadCombo(c)}>
                      载入到表单
                    </Btn>
                    <Btn
                      size="sm"
                      variant="primary"
                      icon="play"
                      loading={isRunning}
                      disabled={running}
                      onClick={() => void runSaved(c)}
                    >
                      直接运行
                    </Btn>
                    <Btn
                      size="sm"
                      variant="danger"
                      icon="trash"
                      loading={deletingComboId === c.id}
                      disabled={running}
                      onClick={() => void removeCombo(c)}
                    >
                      删除
                    </Btn>
                  </div>
                </div>
              );
            })}
          </div>
        )}
        <div className="hint" style={{ marginTop: 8 }}>
          「直接运行」用库里保存的那份参数（不受表单里未保存改动影响）；「载入到表单」把参数摆出来，
          改完点上方「更新组合」覆盖，或直接点「运行回测组合」按当前草稿跑。
        </div>
      </Card>

      {/* 选股策略多选 */}
      <Card icon="book" title={`选择选股策略（已选 ${draft.strategyIds.length}）`} tools={
        <span className="hint">多策略取并集后按 Borda 秩和统一打分排序</span>
      }>
        {strategies.length === 0 ? (
          <Empty icon="book" title="还没有选股策略" hint={
            <Link href="/strategies">先去策略库建一个「怎么选」的策略</Link>
          } />
        ) : (
          <div className="strategy-pick">
            {strategies.map((s) => {
              const on = draft.strategyIds.includes(s.id ?? "");
              return (
                <label key={s.id} className={`strategy-pick__item${on ? " is-on" : ""}`}>
                  <input
                    type="checkbox"
                    checked={on}
                    onChange={() => s.id && toggleStrategy(s.id)}
                    aria-label={`选择选股策略 ${s.name}`}
                  />
                  <span className="strategy-pick__name">{s.name}</span>
                  <span className="strategy-pick__meta mono">{s.id}</span>
                  <span className="strategy-pick__desc">{s.description || "（无说明）"}</span>
                  <span className="strategy-pick__factors">
                    {s.factors?.map((f) => f.name).join(" + ") || "—"}
                  </span>
                </label>
              );
            })}
          </div>
        )}
        {showErr("strategies") && <div className="field-err" role="alert">{showErr("strategies")}</div>}
      </Card>

      {/* 回测参数 */}
      <Card
        icon="gauge"
        title={savedComboId ? `回测参数 · 正在编辑组合 ${savedComboId}` : "回测参数 · 新组合"}
        tools={
          <div className="row" style={{ gap: 8 }}>
            <Btn icon="book" loading={saving} disabled={running || saving} onClick={saveCombo}>
              {savedComboId ? "更新组合" : "保存为回测组合"}
            </Btn>
          </div>
        }
      >
        <div className="params-form">
          <div className="form-grid">
            <Field label="组合名称（保存时必填）" hint="便于在组合列表里识别">
              <input
                className={`input${showErr("name") ? " input--invalid" : ""}`}
                value={draft.name}
                maxLength={64}
                placeholder="例：高股息双策略 · 月频"
                disabled={running}
                onChange={(e) => setDraft({ ...draft, name: e.target.value })}
              />
            </Field>
            <Field
              label="组合说明（可选）"
              hint={`记下这个组合的用意（${draft.description.length}/300）`}
              className="field--wide"
            >
              <input
                className="input"
                value={draft.description}
                maxLength={300}
                placeholder="例：用两个高股息选股策略取并集，月频调仓，验证 Tmax=30 天强制了结的影响"
                disabled={running}
                onChange={(e) => setDraft({ ...draft, description: e.target.value })}
              />
            </Field>
            <Field label="起始资金（元）" hint="回测初始本金，默认 100 万">
              <input
                className={`input mono${showErr("capital") ? " input--invalid" : ""}`}
                type="number" inputMode="numeric" step={100000} min={10000}
                value={draft.initialCapital} disabled={running}
                onChange={(e) => setDraft({ ...draft, initialCapital: Number(e.target.value) })}
              />
            </Field>
            <Field label="持仓数 N" hint="目标等权持有的股票只数">
              <input
                className={`input mono${showErr("holdCount") ? " input--invalid" : ""}`}
                type="number" inputMode="numeric" min={1} max={1000}
                value={draft.holdCount} disabled={running}
                onChange={(e) => setDraft({ ...draft, holdCount: Number(e.target.value) })}
              />
            </Field>
            <Field label="调仓时机" hint="多久重新打分并调仓一次">
              <select
                className="input"
                value={draft.rebalanceFreq} disabled={running}
                onChange={(e) => setDraft({ ...draft, rebalanceFreq: e.target.value as Draft["rebalanceFreq"] })}
              >
                <option value="daily">每日</option>
                <option value="weekly">每周</option>
                <option value="monthly">每月</option>
              </select>
            </Field>
            <Field label="最短持仓 Tmin（天）" hint="掉出 TopN 时未满此天数暂不卖（防频繁换手）；0=不保护">
              <input
                className={`input mono${showErr("holdMinDays") ? " input--invalid" : ""}`}
                type="number" inputMode="numeric" min={0}
                value={draft.holdMinDays} disabled={running}
                onChange={(e) => setDraft({ ...draft, holdMinDays: Number(e.target.value) })}
              />
            </Field>
            <Field label="最长持仓 Tmax（天）" hint="超过即强制了结（每个交易日检查）；留空=不限">
              <div className="row" style={{ gap: 8, alignItems: "center" }}>
                <input
                  className={`input mono${showErr("holdMaxDays") ? " input--invalid" : ""}`}
                  type="number" inputMode="numeric" min={1}
                  value={draft.holdMaxDays ?? ""} disabled={running}
                  placeholder="不限"
                  onChange={(e) => setDraft({ ...draft, holdMaxDays: e.target.value === "" ? null : Number(e.target.value) })}
                />
                <label className="check" style={{ whiteSpace: "nowrap" }}>
                  <input
                    type="checkbox"
                    checked={draft.holdMaxDays === null}
                    disabled={running}
                    onChange={(e) => setDraft({ ...draft, holdMaxDays: e.target.checked ? null : 30 })}
                  />
                  不限
                </label>
              </div>
            </Field>
            <Field label="开始日期" className={showErr("period") ? "field--invalid" : undefined}>
              <input type="date" className="input" value={draft.start} disabled={running}
                onChange={(e) => setDraft({ ...draft, start: e.target.value })} />
            </Field>
            <Field label="结束日期" className={showErr("period") ? "field--invalid" : undefined}>
              <input type="date" className="input" value={draft.end} disabled={running}
                onChange={(e) => setDraft({ ...draft, end: e.target.value })} />
            </Field>
          </div>
          {showErr("period") && <div className="field-err" role="alert">{showErr("period")}</div>}

          <div className="sticky-bar" style={{ marginTop: 14, position: "static" }}>
            <Btn variant="primary" icon="play" loading={running} disabled={running} onClick={run}>
              {running ? "后台运行中…" : "运行回测组合"}
            </Btn>
            <span className="hint">
              N={draft.holdCount} · [{draft.holdMinDays}, {draft.holdMaxDays ?? "∞"}] 天 ·{" "}
              {draft.rebalanceFreq === "daily" ? "日频" : draft.rebalanceFreq === "weekly" ? "周频" : "月频"} ·{" "}
              {draft.start} ~ {draft.end} · {draft.strategyIds.length} 个策略
            </span>
            {blocking.length ? (
              <Pill tone="warn" icon="alert">有 {blocking.length} 处需要修正</Pill>
            ) : (
              <Pill tone="pos" icon="check">参数校验通过</Pill>
            )}
          </div>
        </div>

        {/* 反馈条紧贴运行按钮：点了就有字，且在排队阶段就能取消。
            kind="backtest"：本页跑的是 combo 作业，但后端上报的阶段与 backtest 完全一致
            （combo_service.py:68/70/90），所以共用同一条阶段序列。 */}
        <JobProgress
          state={job.state}
          onCancel={job.cancel}
          onDismiss={job.reset}
          anchorId="backtest-job-progress"
          kind="backtest"
        />
        {job.state.phase === "idle" && running ? (
          <div className="hint" style={{ marginTop: 12 }} role="status" aria-live="polite">
            正在提交作业…（提交成功后会显示作业号与真实阶段，可随时取消）
          </div>
        ) : null}
      </Card>

      {!result && !running && !error ? (
        <Card>
          <Empty icon="gauge" title="尚未运行回测"
            hint="先勾选至少一个选股策略、填好回测参数，再点「运行回测组合」。可先「保存为回测组合」以便复用。" />
        </Card>
      ) : null}

      {result ? (
        <BacktestResultView
          result={result}
          name={draft.name || "回测组合"}
          archive={resultArchiveId ? { id: resultArchiveId } : undefined}
        />
      ) : null}
    </>
  );
}