qlib/frontend/web/app/factors/compose/page.tsx

"use client";

import { useEffect, useState } from "react";
import { apiGet } from "@/lib/api";
import { submitJob, useJobRunner } from "@/lib/jobs";
import { factorLabel, pickableFactors } from "@/lib/factors";
import type { BacktestResult, FactorMeta, ResearchSpec } from "@/lib/types";
import { recentRange } from "@/lib/dates";
import {
  PageHeader,
  Card,
  Pill,
  Field,
  Btn,
  Banner,
  Signed,
} from "@/components/ui";
import { BacktestResultView } from "@/components/BacktestResultView";
import { JobProgress } from "@/components/JobProgress";
import { Icon } from "@/components/icons";

interface Pick {
  name: string;
  weight: number;
}

export default function ComposePage() {
  const [factors, setFactors] = useState<FactorMeta[]>([]);
  const [picks, setPicks] = useState<Pick[]>([]);
  const [topN, setTopN] = useState(10);
  const [rebalance, setRebalance] = useState<"monthly" | "weekly">("monthly");
  const [excludeSt, setExcludeSt] = useState(true);
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");
  const [result, setResult] = useState<BacktestResult | null>(null);
  /** 本次结果的归档 id：结果区的「新页面放大」从归档读同一份数据 */
  const [archiveId, setArchiveId] = useState<string | null>(null);
  /**
   * 作业反馈统一交给 `useJobRunner`（与 /backtest 同一套）：点了就有「正在提交作业…」，
   * 之后是后端真实阶段 + 每秒自增的已用时间 + 作业号 + 可取消。
   * 此前这里只有一句「任务 JOB-xxx 后台执行中」的假进度条（value 固定 30），
   * 用户既不知道提交成功没、也不知道跑到哪一步。
   */
  const job = useJobRunner<BacktestResult>("因子组合回测");
  const active =
    job.state.phase === "submitting" || job.state.phase === "queued" || job.state.phase === "running";
  /** 只留「参数不合法 / 目录加载失败」这类**作业之外**的错误；作业自身的失败由反馈条显示后端原文 */
  const [error, setError] = useState("");

  useEffect(() => {
    let alive = true;
    apiGet<FactorMeta[]>("/factors")
      .then((list) => {
        if (!alive) return;
        // 停用/算不出来的因子不摆进候选（停用仍可被既有策略解析，只是不该再被选中）
        setFactors(pickableFactors(list));
        setPicks([
          { name: "momentum_60", weight: 1.5 },
          { name: "volatility_60", weight: 1.0 },
        ]);
      })
      .catch((e: Error) => alive && setError(e.message));
    const { start: s, end: e } = recentRange();
    setStart(s);
    setEnd(e);
    return () => {
      alive = false;
    };
  }, []);

  function togglePick(name: string) {
    setPicks((prev) =>
      prev.some((p) => p.name === name)
        ? prev.filter((p) => p.name !== name)
        : [...prev, { name, weight: 1 }],
    );
  }

  function setWeight(name: string, weight: number) {
    setPicks((prev) => prev.map((p) => (p.name === name ? { ...p, weight } : p)));
  }

  function removePick(name: string) {
    setPicks((prev) => prev.filter((p) => p.name !== name));
  }

  async function run() {
    const valid = picks.filter((p) => Number.isFinite(p.weight) && p.weight > 0);
    if (valid.length === 0) {
      setError("请选择至少一个因子并设置大于 0 的权重");
      return;
    }
    setError("");
    setResult(null);
    setArchiveId(null);  // 新一次运行：先清掉上一次的归档 id，避免放大到旧结果
    const spec: ResearchSpec = {
      type: "backtest",
      universe: { exclude_st: excludeSt, min_listing_days: 0 },
      factors: valid.map((p) => ({ name: p.name, weight: p.weight })),
      selection: { top_n: topN },
      rebalance,
      period: [start, end],
    };
    const out = await job.run(() => submitJob(spec), {
      label: `因子组合回测（${valid.length} 个因子）`,
    });
    if (out.status === "success" && out.result) {
      setResult(out.result);
      // 归档 id 交给结果区做「新页面放大」；反馈条自己也会给「打开归档 / 去对比」
      setArchiveId(out.experimentId ?? null);
    }
    // 失败 / 超时 / 取消都只在反馈条上说：后端原文（out.error）、
    // 「已取消（不产生归档）」都在 JobProgress 里，页面不再另写一份 Banner 重复同一个失败
  }

  return (
    <>
      <PageHeader
        title="因子组合"
        sub="多因子横截面 z-score 标准化后按权重叠加成综合分，每期取 Top N 等权持有。"
        actions={
          <Pill tone="accent" icon="layers">
            {picks.length} 个因子
          </Pill>
        }
      />

      <Card title="组合方式（如何合成一个分数）" icon="scale">
        <ol className="steplist">
          <li>选择若干因子并设置权重（默认 1；低为好方向由引擎自动反向）。</li>
          <li>
            每个交易日：每个因子在全体股票横截面上做 <b>z-score 标准化</b>（当日缺失因子值的股票不参与该因子得分）。
          </li>
          <li>
            综合得分 = <b>Σ（权重 × 标准化后因子得分）</b>，得分越高越优先。
          </li>
          <li>每期按综合得分取 Top N 等权持有，到下一调仓日再平衡（含成本 / 涨跌停 / 停牌近似）。</li>
        </ol>
      </Card>

      <Card
        title="选择因子并设置权重"
        icon="target"
        sub="权重可为小数（如 1.5 = 更侧重该因子）"
        flush
      >
        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 46 }}></th>
                <th>因子</th>
                <th>方向</th>
                <th style={{ width: 120 }}>权重</th>
                <th>简介</th>
              </tr>
            </thead>
            <tbody>
              {factors.map((f) => {
                const pick = picks.find((p) => p.name === f.name);
                return (
                  <tr key={f.name} className={pick ? "row-active" : undefined}>
                    <td>
                      {/* 勾选框要用 .check--cell 包一层：裸 16px 的 checkbox 点击目标太小
                          （本项目 UI 自检要求 ≥28px，且与同排输入框等高） */}
                      <label className="check check--cell">
                        <input
                          type="checkbox"
                          checked={!!pick}
                          onChange={() => togglePick(f.name)}
                          aria-label={`选择因子 ${f.name}`}
                        />
                      </label>
                    </td>
                    <td className="cell-strong">
                      {factorLabel(f)}
                      {/* 名字即身份：中文名旁边的引擎键必须看得见（含参数，如 momentum(window=90,…)） */}
                      <span className="hint mono cell-hint" style={{ fontWeight: 400, overflowWrap: "anywhere" }}>
                        {f.name}
                      </span>
                    </td>
                    <td>
                      <Pill tone={f.direction === "higher_is_better" ? "accent" : "violet"}>
                        {f.direction === "higher_is_better" ? "高为好" : "低为好"}
                      </Pill>
                    </td>
                    <td>
                      <input
                        type="number"
                        className="input"
                        step="0.1"
                        min="0.1"
                        style={{ width: 92 }}
                        value={pick?.weight ?? 1}
                        disabled={!pick}
                        onChange={(e) => setWeight(f.name, Number(e.target.value))}
                        aria-label={`${f.name} 权重`}
                      />
                    </td>
                    <td className="hint">{f.brief ?? f.description}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>

      <Card title="回测条件" icon="gauge">
        {picks.length > 0 ? (
          <div className="chips" style={{ marginBottom: 14 }}>
            {picks.map((p) => (
              <span className="chip" key={p.name}>
                <b className="mono">{p.name}</b>
                权重 {p.weight}
                <button
                  type="button"
                  className="chip__x"
                  aria-label={`移除 ${p.name}`}
                  onClick={() => removePick(p.name)}
                >
                  <Icon name="x" size={12} />
                </button>
              </span>
            ))}
          </div>
        ) : (
          <div className="hint" style={{ marginBottom: 14 }}>
            尚未选择因子 —— 在上方勾选并设置权重。
          </div>
        )}

        <div className="form-grid">
          <Field label="Top N">
            <input
              type="number"
              className="input"
              min={1}
              max={200}
              value={topN}
              onChange={(e) => setTopN(Number(e.target.value))}
            />
          </Field>
          <Field label="调仓频率">
            <select
              className="input"
              value={rebalance}
              onChange={(e) => setRebalance(e.target.value as "monthly" | "weekly")}
            >
              <option value="monthly">月度</option>
              <option value="weekly">周度</option>
            </select>
          </Field>
          <Field label="开始日期">
            <input type="date" className="input" value={start} onChange={(e) => setStart(e.target.value)} />
          </Field>
          <Field label="结束日期">
            <input type="date" className="input" value={end} onChange={(e) => setEnd(e.target.value)} />
          </Field>
          <Field label="标的范围">
            <label className="row" style={{ gap: 6, color: "var(--text-2)", fontSize: 13, cursor: "pointer" }}>
              <input type="checkbox" checked={excludeSt} onChange={(e) => setExcludeSt(e.target.checked)} />
              剔除 ST
            </label>
          </Field>
          <Btn
            variant="primary"
            icon="play"
            loading={active}
            disabled={active || picks.length === 0}
            onClick={run}
          >
            {active ? "后台运行中…" : `回测组合（${picks.length} 个因子）`}
          </Btn>
        </div>

        {/* 反馈条紧贴运行按钮：提交瞬间就有字，排队阶段就能取消，完成后给归档入口 */}
        <JobProgress
          state={job.state}
          onCancel={job.cancel}
          onDismiss={job.reset}
          anchorId="factors-compose-job-progress"
          kind="backtest"
        />
        {error ? <div style={{ marginTop: 12 }}><Banner tone="error">{error}</Banner></div> : null}
      </Card>

      {result ? (
        <ResultView
          result={result}
          params={{ picks, topN, rebalance, excludeSt, start, end }}
          archiveId={archiveId}
        />
      ) : null}
    </>
  );
}

function ResultView({
  result,
  params,
  archiveId,
}: {
  result: BacktestResult;
  params: { picks: Pick[]; topN: number; rebalance: string; excludeSt: boolean; start: string; end: string };
  archiveId?: string | null;
}) {
  const s = result.summary;
  return (
    <>
      <div className="between" style={{ margin: "6px 0 14px" }}>
        <div className="row" style={{ flexWrap: "wrap", gap: 8 }}>
          <Pill tone="pos" icon="check">
            回测完成
          </Pill>
          <Pill tone="violet" icon="target">Top {params.topN}</Pill>
          <Pill>{params.rebalance === "monthly" ? "月度调仓" : "周度调仓"}</Pill>
          {params.excludeSt ? <Pill>剔除 ST</Pill> : null}
          <Pill>{params.start} ~ {params.end}</Pill>
          <Pill>{params.picks.length} 个因子</Pill>
        </div>
        <div className="row" style={{ fontSize: 22, fontWeight: 700 }}>
          区间收益 <Signed value={s.total_return_pct} suffix="%" />
        </div>
      </div>

      {/* 与「回测组合」共用同一个结果视图：买卖理由、因子曲线、放大入口都在那里，
          两处各写一份迟早出现「同一个结果两套图」的口径漂移 */}
      <BacktestResultView
        result={result}
        name="因子组合"
        archive={archiveId ? { id: archiveId } : undefined}
      />
    </>
  );
}