feat(web): 因子研究升级 + 因子组合页

- 因子元数据增加 brief 使用简介（后端 FactorDef + /api/factors 返回，9 个内置因子补齐文案）
- 因子研究页：
  · 时间默认「今日 ~ 近 6 个月」
  · 因子多选，逐个跑 IC/RankIC Job 并分卡展示报告
  · 目录显示使用简介，行点击展开公式/方向/用法详解
  · 新增计分规则说明与「去因子组合」入口
- 因子组合页 /factors/compose：多因子勾选+权重、组合得分规则说明（z-score×权重求和→TopN），
  可配 topN/调仓/区间/ST，一键回测 Job → 净值/回撤/月度/未建模标注
- 回测页时间默认同样近 6 月
- 验证：tsc + next build 通过；组合回测（momentum_60×1.5 + volatility_60×1.0）Job 成功归档
  EXP-330CAAAE（-13.51%，交易 20）；后端 factors/research/api 相关测试通过 / ruff clean

backend/app/api/factors.py

@@ -15,6 +15,7 @@ def list_factor_catalog() -> list[dict]:
         {
             "name": d.name,
             "description": d.description,
+            "brief": d.brief,
             "formula": d.formula,
             "frequency": d.frequency,
             "lookback": d.lookback,

backend/app/core/config.py

@@ -130,7 +130,9 @@ def get_settings() -> Settings:
     except (TypeError, ValueError):
         job_memory_limit_gb = 6
     try:
-        job_max_concurrent = int(os.environ.get("QLIB_JOB_MAX_CONCURRENT") or job_cfg.get("max_concurrent_jobs") or 2)
+        job_max_concurrent = int(
+            os.environ.get("QLIB_JOB_MAX_CONCURRENT") or job_cfg.get("max_concurrent_jobs") or 2
+        )
     except (TypeError, ValueError):
         job_max_concurrent = 2
 

backend/app/quant/factors.py

@@ -21,6 +21,7 @@ class FactorDef:
     name: str
     description: str
     formula: str
+    brief: str = ""  # 一句话使用简介（面向用户：怎么用、什么时候有效）
     frequency: str = "daily"
     lookback: int = 20
     direction: str = "higher_is_better"  # | lower_is_better
@@ -82,14 +83,26 @@ def _rolling_vol(prices: pd.DataFrame, lookback: int) -> pd.DataFrame:
 
 
 @register(
-    FactorDef("momentum_20", "过去 20 个交易日收益率", "close / close.shift(20) - 1", lookback=20)
+    FactorDef(
+        "momentum_20",
+        "过去 20 个交易日收益率",
+        "close / close.shift(20) - 1",
+        brief="短期动量：近一个月强势股延续性较强，适合趋势延续环境（牛市中段）；震荡市易追高。",
+        lookback=20,
+    )
 )
 def _momentum_20(fields: dict[str, pd.DataFrame]) -> pd.DataFrame:
     return _rolling_return(fields["close"], 20)
 
 
 @register(
-    FactorDef("momentum_60", "过去 60 个交易日收益率", "close / close.shift(60) - 1", lookback=60)
+    FactorDef(
+        "momentum_60",
+        "过去 60 个交易日收益率",
+        "close / close.shift(60) - 1",
+        brief="中期动量：A 股常见有效时段（约 1~3 个月），趋势行情首选；需结合市场阶段判断方向。",
+        lookback=60,
+    )
 )
 def _momentum_60(fields: dict[str, pd.DataFrame]) -> pd.DataFrame:
     return _rolling_return(fields["close"], 60)
@@ -97,7 +110,11 @@ def _momentum_60(fields: dict[str, pd.DataFrame]) -> pd.DataFrame:
 
 @register(
     FactorDef(
-        "momentum_120", "过去 120 个交易日收益率", "close / close.shift(120) - 1", lookback=120
+        "momentum_120",
+        "过去 120 个交易日收益率",
+        "close / close.shift(120) - 1",
+        brief="长期动量：反映近半年强势，适合大级别趋势；换手慢、回撤修复慢，弱市慎用。",
+        lookback=120,
     )
 )
 def _momentum_120(fields: dict[str, pd.DataFrame]) -> pd.DataFrame:
@@ -109,6 +126,7 @@ def _momentum_120(fields: dict[str, pd.DataFrame]) -> pd.DataFrame:
         "volatility_20",
         "过去 20 个交易日收益率波动率",
         "std(pct_change, 20)",
+        brief="低波防御（方向 lower_is_better）：近月波动小的股票抗跌，弱市/熊市阶段相对占优。",
         lookback=20,
         direction="lower_is_better",
     )
@@ -122,6 +140,7 @@ def _volatility_20(fields: dict[str, pd.DataFrame]) -> pd.DataFrame:
         "volatility_60",
         "过去 60 个交易日收益率波动率",
         "std(pct_change, 60)",
+        brief="低波动（方向 lower_is_better）：近一季低波组合长期回测常有超额，是防御型核心因子。",
         lookback=60,
         direction="lower_is_better",
     )
@@ -135,6 +154,7 @@ def _volatility_60(fields: dict[str, pd.DataFrame]) -> pd.DataFrame:
         "close_to_high_60",
         "收盘价相对 60 日最高价的接近程度",
         "close / rolling_max(high, 60)",
+        brief="贴近 60 日高点（接近新高）：趋势确认型强势股，常与动量互补；需配合市场热度判断。",
         lookback=60,
         requires=("close", "high"),
     )
@@ -149,6 +169,7 @@ def _close_to_high_60(fields: dict[str, pd.DataFrame]) -> pd.DataFrame:
         "volume_ratio_5_60",
         "量比：5 日均量 / 60 日均量",
         "mean(volume, 5) / mean(volume, 60)",
+        brief="量比放大提示资金关注（短线活跃型）；高换手也伴随更高波动，注意与波动因子搭配。",
         lookback=60,
         requires=("volume",),
     )
@@ -163,6 +184,7 @@ def _volume_ratio_5_60(fields: dict[str, pd.DataFrame]) -> pd.DataFrame:
         "ma_bias_20",
         "20 日均线乖离率",
         "(close - ma(close, 20)) / ma(close, 20)",
+        brief="20 日均线乖离：上行趋势中正乖离偏强；乖离过大易回落，需警惕过热。",
         lookback=20,
     )
 )
@@ -177,6 +199,7 @@ def _ma_bias_20(fields: dict[str, pd.DataFrame]) -> pd.DataFrame:
         "reversal_5",
         "短期反转：过去 5 日收益率取负（越低越接近超跌）",
         "-1 * (close / close.shift(5) - 1)",
+        brief="短期反转（方向 higher_is_better）：前期跌幅大的超跌反弹机会，适合震荡/修复行情。",
         lookback=5,
     )
 )

backend/tests/test_quant_engine.py

@@ -76,9 +76,7 @@ class TestBacktestMain:
         engine = LocalEngine()
         momentum = _spec()  # momentum_20
         assert engine.required_columns(momentum) == {"close"}
-        volume = _spec().model_copy(
-            update={"factors": [FactorSpec(name="volume_ratio_5_60")]}
-        )
+        volume = _spec().model_copy(update={"factors": [FactorSpec(name="volume_ratio_5_60")]})
         assert engine.required_columns(volume) == {"close", "volume"}
         unknown = _spec().model_copy(update={"factors": [FactorSpec(name="no_such")]})
         # 未知因子不参与列裁剪，交由执行期统一报错

frontend/web/app/backtest/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { apiGet } from "@/lib/api";
 import { submitJob, waitJob } from "@/lib/jobs";
 import type { BacktestResult, FactorMeta, ResearchSpec } from "@/lib/types";
+import { recentRange } from "@/lib/dates";
 import { LineChart } from "@/components/LineChart";
 
 export default function BacktestPage() {
@@ -11,8 +12,8 @@ export default function BacktestPage() {
   const [factor, setFactor] = useState("momentum_60");
   const [topN, setTopN] = useState(5);
   const [rebalance, setRebalance] = useState<"monthly" | "weekly">("monthly");
-  const [start, setStart] = useState("2024-03-01");
-  const [end, setEnd] = useState("2024-12-31");
+  const [start, setStart] = useState("");
+  const [end, setEnd] = useState("");
   const [excludeSt, setExcludeSt] = useState(true);
   const [result, setResult] = useState<BacktestResult | null>(null);
   const [running, setRunning] = useState(false);
@@ -23,6 +24,9 @@ export default function BacktestPage() {
     apiGet<FactorMeta[]>("/factors")
       .then(setFactors)
       .catch((e: Error) => setError(e.message));
+    const { start: s, end: e } = recentRange();
+    setStart(s);
+    setEnd(e);
   }, []);
 
   async function run() {

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

@@ -0,0 +1,260 @@
+"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>
+    </>
+  );
+}

frontend/web/app/factors/page.tsx

@@ -4,151 +4,269 @@ import { useEffect, useState } from "react";
 import { apiGet } from "@/lib/api";
 import { submitJob, waitJob } from "@/lib/jobs";
 import type { FactorMeta, FactorTestReport, ResearchSpec } from "@/lib/types";
+import { recentRange } from "@/lib/dates";
 
 export default function FactorsPage() {
   const [factors, setFactors] = useState<FactorMeta[]>([]);
-  const [name, setName] = useState("momentum_60");
-  const [start, setStart] = useState("2024-03-01");
-  const [end, setEnd] = useState("2024-12-31");
-  const [report, setReport] = useState<FactorTestReport | null>(null);
+  const [checked, setChecked] = useState<Set<string>>(new Set());
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [start, setStart] = useState("");
+  const [end, setEnd] = useState("");
+  const [reports, setReports] = useState<Record<string, FactorTestReport>>({});
   const [running, setRunning] = useState(false);
+  const [current, setCurrent] = useState<{ idx: number; total: number; name: string } | null>(null);
   const [jobId, setJobId] = useState("");
   const [error, setError] = useState("");
 
   useEffect(() => {
     apiGet<FactorMeta[]>("/factors")
-      .then(setFactors)
+      .then((list) => {
+        setFactors(list);
+        // 默认勾选两个代表性因子
+        const picks = ["momentum_60", "volatility_60"].filter((n) => list.some((f) => f.name === n));
+        setChecked(new Set(picks));
+      })
       .catch((e: Error) => setError(e.message));
+    // 区间默认：近 6 个月（客户端设置，避免 SSR 日期不一致）
+    const { start: s, end: e } = recentRange();
+    setStart(s);
+    setEnd(e);
   }, []);
 
+  function toggleCheck(name: string) {
+    setChecked((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }
+
+  function toggleExpand(name: string) {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }
+
   async function run() {
+    const names = factors.map((f) => f.name).filter((n) => checked.has(n));
+    if (names.length === 0) {
+      setError("请至少选择一个因子");
+      return;
+    }
     setRunning(true);
     setError("");
     setJobId("");
-    setReport(null);
+    setReports({});
     try {
-      const spec: ResearchSpec = {
-        type: "factor_test",
-        universe: { exclude_st: true, min_listing_days: 0 },
-        factors: [{ name, weight: 1 }],
-        selection: { top_n: 10 },
-        rebalance: "monthly",
-        period: [start, end],
-      };
-      // 异步 Job：立即返回 job_id，后台执行后轮询取结果（全市场可能数十秒）
-      const { job_id } = await submitJob(spec);
-      setJobId(job_id);
-      const out = await waitJob<FactorTestReport>(job_id);
-      if (out.status === "success" && out.result) {
-        setReport(out.result);
-      } else {
-        setError(`任务${out.status}${out.error ? `：${out.error}` : ""}`);
+      let index = 0;
+      for (const name of names) {
+        index += 1;
+        setCurrent({ idx: index, total: names.length, name });
+        const spec: ResearchSpec = {
+          type: "factor_test",
+          universe: { exclude_st: true, min_listing_days: 0 },
+          factors: [{ name, weight: 1 }],
+          selection: { top_n: 10 },
+          rebalance: "monthly",
+          period: [start, end],
+        };
+        const { job_id } = await submitJob(spec);
+        setJobId(job_id);
+        const out = await waitJob<FactorTestReport>(job_id);
+        if (out.status === "success" && out.result) {
+          const report = out.result;
+          setReports((prev) => ({ ...prev, [name]: report }));
+        } else {
+          const msg = `因子 ${name}：${out.status}${out.error ? `：${out.error}` : ""}`;
+          setError((prev) => (prev ? `${prev}\n${msg}` : msg));
+        }
       }
     } catch (e) {
       setError((e as Error).message);
     } finally {
       setRunning(false);
+      setCurrent(null);
+      setJobId("");
     }
   }
 
+  const selectedCount = checked.size;
+  const doneCount = Object.keys(reports).length;
+
   return (
     <>
       <h1>因子研究</h1>
       <div className="card">
         <h2>因子目录（行情因子 · 无未来函数）</h2>
+        <div className="muted" style={{ marginBottom: 8 }}>
+          勾选因子后可多选；点击行展开详细说明。每个因子运行一次独立的 IC/RankIC 测试并归档。
+          <a href="/factors/compose" style={{ marginLeft: 8, color: "#38bdf8" }}>
+            用这些因子搭建选股组合 → 因子组合
+          </a>
+        </div>
         <table>
           <thead>
             <tr>
-              <th>名称</th>
-              <th>描述</th>
-              <th>公式</th>
+              <th></th>
+              <th>因子</th>
               <th>回看</th>
               <th>方向</th>
+              <th>简介（用法 / 何时有效）</th>
             </tr>
           </thead>
           <tbody>
             {factors.map((f) => (
-              <tr key={f.name}>
-                <td>{f.name}</td>
-                <td>{f.description}</td>
-                <td className="muted">{f.formula}</td>
-                <td>{f.lookback}</td>
-                <td>{f.direction === "higher_is_better" ? "高为好" : "低为好"}</td>
-              </tr>
+              <FactorRow
+                key={f.name}
+                factor={f}
+                checked={checked.has(f.name)}
+                expanded={expanded.has(f.name)}
+                onToggleCheck={() => toggleCheck(f.name)}
+                onToggleExpand={() => toggleExpand(f.name)}
+              />
             ))}
           </tbody>
         </table>
+        <div className="muted" style={{ marginTop: 6 }}>
+          计分规则：每因子在每日横截面上 z-score 标准化（低为好自动取负），组合页可按权重叠加得分选股；
+          本页单个因子测试各自归档为 Experiment，可去「实验」页查看与复跑。
+        </div>
       </div>
 
       <div className="card">
         <h2>运行单因子测试（IC / RankIC / 分层）</h2>
         <div className="row">
-          <select value={name} onChange={(e) => setName(e.target.value)}>
-            {factors.map((f) => (
-              <option key={f.name} value={f.name}>
-                {f.name}
-              </option>
-            ))}
-          </select>
           <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>
-          <button className="primary" onClick={run} disabled={running}>
-            {running ? "后台运行中…" : "运行因子测试"}
+          <button
+            className="primary"
+            onClick={run}
+            disabled={running || selectedCount === 0}
+          >
+            {running ? `运行中 ${doneCount}/${selectedCount}…` : `运行因子测试（已选 ${selectedCount} 个）`}
           </button>
         </div>
-        {running && jobId && <div className="muted">任务 {jobId} 后台执行中，请稍候…</div>}
-        {error && <div className="error">{error}</div>}
-
-        {report && (
-          <div style={{ marginTop: 16 }}>
-            <div className="stat-grid">
-              <div className="stat">
-                <div className="label">IC 均值</div>
-                <div className="value">{report.ic_mean.toFixed(4)}</div>
-              </div>
-              <div className="stat">
-                <div className="label">RankIC 均值</div>
-                <div className="value">{report.rank_ic_mean.toFixed(4)}</div>
-              </div>
-              <div className="stat">
-                <div className="label">ICIR</div>
-                <div className="value">{report.icir.toFixed(3)}</div>
-              </div>
-              <div className="stat">
-                <div className="label">正收益占比</div>
-                <div className="value">{report.positive_ratio_pct.toFixed(1)}%</div>
-              </div>
-              <div className="stat">
-                <div className="label">样本日数</div>
-                <div className="value">{report.sample_days}</div>
-              </div>
-            </div>
-            {report.quantile_returns.length > 0 && (
-              <table style={{ marginTop: 12 }}>
-                <thead>
-                  <tr>
-                    <th>分层（1 最低 → 5 最高）</th>
-                    {report.quantile_returns.map((q) => (
-                      <th key={q.quantile}>Q{q.quantile + 1}</th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>未来 21 日平均收益</td>
-                    {report.quantile_returns.map((q) => (
-                      <td key={q.quantile}>{q.return_pct.toFixed(2)}%</td>
-                    ))}
-                  </tr>
-                </tbody>
-              </table>
-            )}
+        {running && (
+          <div className="muted">
+            正在运行：{current?.name}（{current?.idx}/{current?.total}）—— 后台任务 {jobId}，请稍候…
           </div>
         )}
+        {error && <div className="error" style={{ whiteSpace: "pre-line" }}>{error}</div>}
+      </div>
+
+      {Object.entries(reports).map(([name, report]) => {
+        const meta = factors.find((f) => f.name === name);
+        return (
+          <div className="card" key={name}>
+            <h2>
+              {name} · 测试报告
+              {meta?.brief ? (
+                <span className="muted" style={{ fontWeight: 400, fontSize: 13 }}>
+                  {" "}— {meta.brief}
+                </span>
+              ) : null}
+            </h2>
+            <ReportView report={report} />
+          </div>
+        );
+      })}
+    </>
+  );
+}
+
+function FactorRow(props: {
+  factor: FactorMeta;
+  checked: boolean;
+  expanded: boolean;
+  onToggleCheck: () => void;
+  onToggleExpand: () => void;
+}) {
+  const { factor: f } = props;
+  return (
+    <>
+      <tr style={{ cursor: "pointer" }} onClick={props.onToggleExpand}>
+        <td onClick={(e) => { e.stopPropagation(); props.onToggleCheck(); }}>
+          <input type="checkbox" checked={props.checked} onChange={props.onToggleCheck} />
+        </td>
+        <td>{f.name}</td>
+        <td>{f.lookback}</td>
+        <td>{f.direction === "higher_is_better" ? "高为好" : "低为好"}</td>
+        <td>{f.brief ?? f.description}</td>
+      </tr>
+      {props.expanded && (
+        <tr>
+          <td colSpan={5}>
+            <div style={{ background: "var(--panel-2)", padding: 10, borderRadius: 6 }}>
+              <b>{f.name}</b> · {f.description}
+              <div className="muted" style={{ marginTop: 4 }}>
+                公式：{f.formula}；回看 {f.lookback} 个交易日；频率 {f.frequency}；
+                方向：{f.direction === "higher_is_better" ? "因子值越高得分越高" : "因子值越低得分越高（引擎自动反向）"}
+              </div>
+              <div style={{ marginTop: 6 }}>{f.brief}</div>
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+function ReportView({ report }: { report: FactorTestReport }) {
+  return (
+    <>
+      <div className="stat-grid">
+        <div className="stat">
+          <div className="label">IC 均值</div>
+          <div className="value">{report.ic_mean.toFixed(4)}</div>
+        </div>
+        <div className="stat">
+          <div className="label">RankIC 均值</div>
+          <div className="value">{report.rank_ic_mean.toFixed(4)}</div>
+        </div>
+        <div className="stat">
+          <div className="label">ICIR</div>
+          <div className="value">{report.icir.toFixed(3)}</div>
+        </div>
+        <div className="stat">
+          <div className="label">正收益占比</div>
+          <div className="value">{report.positive_ratio_pct.toFixed(1)}%</div>
+        </div>
+        <div className="stat">
+          <div className="label">样本日数</div>
+          <div className="value">{report.sample_days}</div>
+        </div>
+      </div>
+      {report.quantile_returns.length > 0 && (
+        <table style={{ marginTop: 12 }}>
+          <thead>
+            <tr>
+              <th>分层（1 最低 → 5 最高）</th>
+              {report.quantile_returns.map((q) => (
+                <th key={q.quantile}>Q{q.quantile + 1}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>未来 21 日平均收益</td>
+              {report.quantile_returns.map((q) => (
+                <td key={q.quantile}>{q.return_pct.toFixed(2)}%</td>
+              ))}
+            </tr>
+          </tbody>
+        </table>
+      )}
+      <div className="muted" style={{ marginTop: 6 }}>
+        读数：IC/RankIC 为正表示与未来收益正相关；ICIR 越大越稳定；分层收益若高分层显著高于低分层说明单调性好。
+        单因子测试≠策略有效，需结合样本外与稳健性分析。
       </div>
     </>
   );

frontend/web/app/layout.tsx

@@ -16,6 +16,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <Link href="/">总览</Link>
           <Link href="/stocks">股票池</Link>
           <Link href="/factors">因子研究</Link>
+          <Link href="/factors/compose">因子组合</Link>
           <Link href="/backtest">回测</Link>
           <Link href="/experiments">实验</Link>
         </nav>

frontend/web/lib/dates.ts

@@ -0,0 +1,14 @@
+/** 研究区间默认值：结束=当日，开始=往前推 6 个月（YYYY-MM-DD）。 */
+
+export function isoDate(d: Date): string {
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${d.getFullYear()}-${m}-${day}`;
+}
+
+export function recentRange(): { start: string; end: string } {
+  const end = new Date();
+  const start = new Date();
+  start.setMonth(start.getMonth() - 6);
+  return { start: isoDate(start), end: isoDate(end) };
+}

frontend/web/lib/types.ts

@@ -13,6 +13,7 @@ export interface Stock {
 export interface FactorMeta {
   name: string;
   description: string;
+  brief?: string;
   formula: string;
   frequency: string;
   lookback: number;