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

"use client";

import { useEffect, useState } from "react";
import { apiGet } from "@/lib/api";
import { LineChart } from "@/components/LineChart";
import { submitJob, waitJob } from "@/lib/jobs";
import type { BacktestResult, FactorMeta, ResearchSpec } from "@/lib/types";
import { recentRange } from "@/lib/dates";

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);
  const [running, setRunning] = useState(false);
  const [jobId, setJobId] = useState("");
  const [error, setError] = useState("");

  useEffect(() => {
    apiGet<FactorMeta[]>("/factors")
      .then((list) => {
        setFactors(list);
        // 默认示例组合：中期动量（重）+ 低波动（防）
        setPicks([
          { name: "momentum_60", weight: 1.5 },
          { name: "volatility_60", weight: 1.0 },
        ]);
      })
      .catch((e: Error) => setError(e.message));
    const { start: s, end: e } = recentRange();
    setStart(s);
    setEnd(e);
  }, []);

  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)));
  }

  async function run() {
    const valid = picks.filter((p) => Number.isFinite(p.weight) && p.weight > 0);
    if (valid.length === 0) {
      setError("请选择至少一个因子并设置大于 0 的权重");
      return;
    }
    setRunning(true);
    setError("");
    setJobId("");
    setResult(null);
    try {
      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 { job_id } = await submitJob(spec);
      setJobId(job_id);
      const out = await waitJob<BacktestResult>(job_id);
      if (out.status === "success" && out.result) {
        setResult(out.result);
      } else {
        setError(`任务${out.status}${out.error ? `：${out.error}` : ""}`);
      }
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setRunning(false);
      setJobId("");
    }
  }

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

      <div className="card">
        <h2>选因子 + 设权重</h2>
        <table>
          <thead>
            <tr>
              <th></th>
              <th>因子</th>
              <th>方向</th>
              <th>权重</th>
              <th>简介</th>
            </tr>
          </thead>
          <tbody>
            {factors.map((f) => {
              const pick = picks.find((p) => p.name === f.name);
              return (
                <tr key={f.name}>
                  <td>
                    <input
                      type="checkbox"
                      checked={!!pick}
                      onChange={() => togglePick(f.name)}
                    />
                  </td>
                  <td>{f.name}</td>
                  <td>{f.direction === "higher_is_better" ? "高为好" : "低为好"}</td>
                  <td>
                    <input
                      type="number"
                      step="0.1"
                      min="0.1"
                      style={{ width: 80 }}
                      value={pick?.weight ?? 1}
                      disabled={!pick}
                      onChange={(e) => setWeight(f.name, Number(e.target.value))}
                    />
                  </td>
                  <td className="muted">{f.brief ?? f.description}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="card">
        <h2>回测条件</h2>
        <div className="row">
          <label className="muted">
            Top N{" "}
            <input type="number" min={1} max={200} value={topN} onChange={(e) => setTopN(Number(e.target.value))} />
          </label>
          <label className="muted">
            调仓{" "}
            <select value={rebalance} onChange={(e) => setRebalance(e.target.value as "monthly" | "weekly")}>
              <option value="monthly">月度</option>
              <option value="weekly">周度</option>
            </select>
          </label>
          <label className="muted">
            开始 <input type="date" value={start} onChange={(e) => setStart(e.target.value)} />
          </label>
          <label className="muted">
            结束 <input type="date" value={end} onChange={(e) => setEnd(e.target.value)} />
          </label>
          <label className="muted">
            <input type="checkbox" checked={excludeSt} onChange={(e) => setExcludeSt(e.target.checked)} />
            {" "}剔除 ST
          </label>
          <button className="primary" onClick={run} disabled={running}>
            {running ? "后台运行中…" : `回测组合（${picks.length} 个因子）`}
          </button>
        </div>
        {running && jobId && <div className="muted">任务 {jobId} 后台执行中，请稍候…</div>}
        {error && <div className="error">{error}</div>}
      </div>

      {result && <ResultView result={result} />}
    </>
  );
}

function ResultView({ result }: { result: BacktestResult }) {
  const s = result.summary;
  return (
    <>
      <div className="card">
        <h2>
          结果 · {s.total_return_pct.toFixed(2)}%{" "}
          <span className={s.total_return_pct >= 0 ? "good" : "bad"}>
            {s.total_return_pct >= 0 ? "▲" : "▼"}
          </span>
        </h2>
        <div className="stat-grid">
          <div className="stat">
            <div className="label">期末净值</div>
            <div className="value">{s.final_equity.toLocaleString()}</div>
          </div>
          <div className="stat">
            <div className="label">年化收益</div>
            <div className="value">{s.annual_return_pct.toFixed(2)}%</div>
          </div>
          <div className="stat">
            <div className="label">Sharpe</div>
            <div className="value">{s.sharpe.toFixed(2)}</div>
          </div>
          <div className="stat">
            <div className="label">最大回撤</div>
            <div className="value bad">{s.max_drawdown_pct.toFixed(2)}%</div>
          </div>
          <div className="stat">
            <div className="label">胜率</div>
            <div className="value">{s.win_rate_pct.toFixed(1)}%</div>
          </div>
          <div className="stat">
            <div className="label">交易 / 换手</div>
            <div className="value">{s.total_trades} / {s.avg_turnover_pct.toFixed(0)}%</div>
          </div>
        </div>
        <div style={{ marginTop: 10 }}>
          <LineChart title="净值曲线" data={result.equity_curve} color="#34d399" />
        </div>
        <LineChart title="回撤（%）" data={result.drawdown} color="#f87171" />
      </div>

      {result.monthly_returns.length > 0 && (
        <div className="card">
          <h2>月度收益（%）</h2>
          <table>
            <thead>
              <tr>
                <th>月份</th>
                <th>收益</th>
              </tr>
            </thead>
            <tbody>
              {result.monthly_returns.map((m) => (
                <tr key={`${m.year}-${m.month}`}>
                  <td>{m.year}-{String(m.month).padStart(2, "0")}</td>
                  <td className={m.return_pct >= 0 ? "good" : "bad"}>{m.return_pct.toFixed(2)}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <div className="card">
        <h2>未建模约束（如实标注）</h2>
        <ul className="muted">{result.unimplemented.map((u, i) => <li key={i}>{u}</li>)}</ul>
      </div>
    </>
  );
}