feat(web): 按 ui-ux-pro-max 设计系统重构前端（侧边导航 + 组件库 + 图标 + 可视化）
- 设计令牌与组件体系：语义色/间距/圆角/状态 + Card/Metric/Pill/Btn/Field/Empty/Skeleton/Progress 等 - 桌面左侧导航 + 窄屏抽屉（usePathname 高亮、ESC/遮罩关闭）；修复抽屉/遮罩占据网格把 main 挤到第二行的问题 - 自绘内联 SVG 图标集替代 emoji；图标/表格/按钮等交互态齐全，空态/加载/错误/禁用态补齐 - 因子研究分层柱状、因子组合与回测净值/回撤双图 + 月度收益热力表、实验页任务状态徽标 - LineChart 主题化并按需引入 echarts（回测/组合首载 JS 448k→281k）；next.config 放行局域网 dev 来源
This commit is contained in:
Simon
@@ -2,10 +2,24 @@
|
||||
|
||||
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";
|
||||
import {
|
||||
PageHeader,
|
||||
Card,
|
||||
Pill,
|
||||
Field,
|
||||
Btn,
|
||||
Banner,
|
||||
Progress,
|
||||
Signed,
|
||||
BacktestMetrics,
|
||||
MonthlyReturnsTable,
|
||||
UnimplementedNote,
|
||||
} from "@/components/ui";
|
||||
import { LineChart } from "@/components/LineChart";
|
||||
import { Icon } from "@/components/icons";
|
||||
|
||||
interface Pick {
|
||||
name: string;
|
||||
@@ -26,19 +40,23 @@ export default function ComposePage() {
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
apiGet<FactorMeta[]>("/factors")
|
||||
.then((list) => {
|
||||
if (!alive) return;
|
||||
setFactors(list);
|
||||
// 默认示例组合：中期动量（重）+ 低波动（防）
|
||||
setPicks([
|
||||
{ name: "momentum_60", weight: 1.5 },
|
||||
{ name: "volatility_60", weight: 1.0 },
|
||||
]);
|
||||
})
|
||||
.catch((e: Error) => setError(e.message));
|
||||
.catch((e: Error) => alive && setError(e.message));
|
||||
const { start: s, end: e } = recentRange();
|
||||
setStart(s);
|
||||
setEnd(e);
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
function togglePick(name: string) {
|
||||
@@ -53,6 +71,10 @@ export default function ComposePage() {
|
||||
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) {
|
||||
@@ -90,171 +112,218 @@ export default function ComposePage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>因子组合</h1>
|
||||
<div className="card">
|
||||
<h2>组合方式（如何合成一个分数）</h2>
|
||||
<ol className="muted" style={{ margin: 0, paddingLeft: 18, lineHeight: 1.8 }}>
|
||||
<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>
|
||||
（该日缺失因子值的股票不参与该因子得分）。
|
||||
每个交易日：每个因子在全体股票横截面上做 <b>z-score 标准化</b>（当日缺失因子值的股票不参与该因子得分）。
|
||||
</li>
|
||||
<li>
|
||||
综合得分 = <b>Σ（权重 × 标准化后因子得分）</b>，得分越高越优先。
|
||||
</li>
|
||||
<li>综合得分 = Σ（权重 × 标准化后因子得分），得分越高越优先。</li>
|
||||
<li>每期按综合得分取 Top N 等权持有，到下一调仓日再平衡（含成本 / 涨跌停 / 停牌近似）。</li>
|
||||
</ol>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<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>
|
||||
<Card
|
||||
title="选择因子并设置权重"
|
||||
icon="target"
|
||||
sub="权重可为小数（如 1.5 = 更侧重该因子）"
|
||||
flush
|
||||
>
|
||||
<div className="table-wrap">
|
||||
<table className="tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>月份</th>
|
||||
<th>收益</th>
|
||||
<th style={{ width: 46 }}></th>
|
||||
<th>因子</th>
|
||||
<th>方向</th>
|
||||
<th style={{ width: 120 }}>权重</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>
|
||||
))}
|
||||
{factors.map((f) => {
|
||||
const pick = picks.find((p) => p.name === f.name);
|
||||
return (
|
||||
<tr key={f.name} className={pick ? "row-active" : undefined}>
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!pick}
|
||||
onChange={() => togglePick(f.name)}
|
||||
aria-label={`选择因子 ${f.name}`}
|
||||
/>
|
||||
</td>
|
||||
<td className="cell-strong">
|
||||
<span className="mono">{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>
|
||||
|
||||
<div className="card">
|
||||
<h2>未建模约束（如实标注）</h2>
|
||||
<ul className="muted">{result.unimplemented.map((u, i) => <li key={i}>{u}</li>)}</ul>
|
||||
<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={running}
|
||||
disabled={running || picks.length === 0}
|
||||
onClick={run}
|
||||
>
|
||||
{running ? "后台运行中…" : `回测组合（${picks.length} 个因子）`}
|
||||
</Btn>
|
||||
</div>
|
||||
|
||||
{running ? (
|
||||
<div style={{ marginTop: 14 }}>
|
||||
<Progress
|
||||
value={30}
|
||||
label={
|
||||
<>
|
||||
任务 <span className="mono">{jobId || "排队中…"}</span> 后台执行中，完成后结果自动展示在本页。
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{error ? <div style={{ marginTop: 12 }}><Banner tone="error">{error}</Banner></div> : null}
|
||||
</Card>
|
||||
|
||||
{result ? <ResultView result={result} params={{ picks, topN, rebalance, excludeSt, start, end }} /> : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ResultView({
|
||||
result,
|
||||
params,
|
||||
}: {
|
||||
result: BacktestResult;
|
||||
params: { picks: Pick[]; topN: number; rebalance: string; excludeSt: boolean; start: string; end: string };
|
||||
}) {
|
||||
const s = result.summary;
|
||||
return (
|
||||
<>
|
||||
<div className="between" style={{ margin: "6px 0 14px" }}>
|
||||
<div className="row">
|
||||
<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>
|
||||
</div>
|
||||
<div className="row" style={{ fontSize: 22, fontWeight: 700 }}>
|
||||
区间收益 <Signed value={s.total_return_pct} suffix="%" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BacktestMetrics s={s} />
|
||||
|
||||
<div className="chart-grid">
|
||||
<Card icon="chartLine" title="净值曲线" tools={<Pill tone="pos">期末 {s.final_equity.toLocaleString()}</Pill>}>
|
||||
<LineChart data={result.equity_curve} color="#3ddc97" fill height={300} xFmt={(d) => d.slice(5)} yFmt={(v) => v.toFixed(2)} />
|
||||
</Card>
|
||||
<Card icon="chartLine" title="回撤（%）" tools={<Pill tone="neg">最大 {s.max_drawdown_pct.toFixed(2)}%</Pill>}>
|
||||
<LineChart data={result.drawdown} color="#ff7a7a" height={300} xFmt={(d) => d.slice(5)} yFmt={(v) => v.toFixed(2) + "%"} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card icon="calendar" title="月度收益（%）">
|
||||
<MonthlyReturnsTable rows={result.monthly_returns} />
|
||||
</Card>
|
||||
|
||||
<UnimplementedNote items={result.unimplemented} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+232
-139
@@ -5,32 +5,52 @@ import { apiGet } from "@/lib/api";
|
||||
import { submitJob, waitJob } from "@/lib/jobs";
|
||||
import type { FactorMeta, FactorTestReport, ResearchSpec } from "@/lib/types";
|
||||
import { recentRange } from "@/lib/dates";
|
||||
import {
|
||||
PageHeader,
|
||||
Card,
|
||||
Metric,
|
||||
Pill,
|
||||
Field,
|
||||
Btn,
|
||||
Banner,
|
||||
Progress,
|
||||
Empty,
|
||||
SkeletonLines,
|
||||
} from "@/components/ui";
|
||||
|
||||
export default function FactorsPage() {
|
||||
const [factors, setFactors] = useState<FactorMeta[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
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 [processed, setProcessed] = useState(0);
|
||||
const [current, setCurrent] = useState<{ idx: number; total: number; name: string } | null>(null);
|
||||
const [jobId, setJobId] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
apiGet<FactorMeta[]>("/factors")
|
||||
.then((list) => {
|
||||
if (!alive) return;
|
||||
setFactors(list);
|
||||
// 默认勾选两个代表性因子
|
||||
const picks = ["momentum_60", "volatility_60"].filter((n) => list.some((f) => f.name === n));
|
||||
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 日期不一致）
|
||||
.catch((e: Error) => setError(e.message))
|
||||
.finally(() => alive && setLoading(false));
|
||||
const { start: s, end: e } = recentRange();
|
||||
setStart(s);
|
||||
setEnd(e);
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
function toggleCheck(name: string) {
|
||||
@@ -61,6 +81,7 @@ export default function FactorsPage() {
|
||||
setError("");
|
||||
setJobId("");
|
||||
setReports({});
|
||||
setProcessed(0);
|
||||
try {
|
||||
let index = 0;
|
||||
for (const name of names) {
|
||||
@@ -78,12 +99,12 @@ export default function FactorsPage() {
|
||||
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 }));
|
||||
setReports((prev) => ({ ...prev, [name]: out.result! }));
|
||||
} else {
|
||||
const msg = `因子 ${name}：${out.status}${out.error ? `：${out.error}` : ""}`;
|
||||
setError((prev) => (prev ? `${prev}\n${msg}` : msg));
|
||||
}
|
||||
setProcessed(index);
|
||||
}
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
@@ -95,87 +116,138 @@ export default function FactorsPage() {
|
||||
}
|
||||
|
||||
const selectedCount = checked.size;
|
||||
const doneCount = Object.keys(reports).length;
|
||||
const reportNames = Object.keys(reports);
|
||||
const progressPct = selectedCount === 0 ? 0 : Math.round((processed / selectedCount) * 100);
|
||||
|
||||
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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{factors.map((f) => (
|
||||
<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>
|
||||
<PageHeader
|
||||
title="因子研究"
|
||||
sub="勾选行情因子并运行单因子测试（IC / RankIC / 分层）。每个因子独立异步执行并归档为实验，可在「实验」页查看与复跑。"
|
||||
actions={<Pill tone="accent" icon="flask">{reportNames.length}/{selectedCount} 个已出报告</Pill>}
|
||||
/>
|
||||
|
||||
<div className="card">
|
||||
<h2>运行单因子测试（IC / RankIC / 分层）</h2>
|
||||
<div className="row">
|
||||
<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 || selectedCount === 0}
|
||||
>
|
||||
{running ? `运行中 ${doneCount}/${selectedCount}…` : `运行因子测试（已选 ${selectedCount} 个）`}
|
||||
</button>
|
||||
</div>
|
||||
{running && (
|
||||
<div className="muted">
|
||||
正在运行：{current?.name}（{current?.idx}/{current?.total}）—— 后台任务 {jobId}，请稍候…
|
||||
{error && !running ? (
|
||||
<Banner tone="error">
|
||||
<pre style={{ margin: 0, whiteSpace: "pre-line", font: "inherit" }}>{error}</pre>
|
||||
</Banner>
|
||||
) : null}
|
||||
|
||||
<Card
|
||||
title="因子目录"
|
||||
icon="flask"
|
||||
sub="点击行展开定义 · 勾选后点下方「运行因子测试」"
|
||||
tools={<Pill tone="violet">已选 {selectedCount} 个</Pill>}
|
||||
flush
|
||||
>
|
||||
{loading ? (
|
||||
<div style={{ padding: 18 }}>
|
||||
<SkeletonLines n={7} />
|
||||
</div>
|
||||
) : factors.length === 0 ? (
|
||||
<Empty
|
||||
icon="flask"
|
||||
title="暂无因子目录"
|
||||
hint="请确认后端已启动，且 /api/factors 返回因子元数据。"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="table-wrap">
|
||||
<table className="tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: 44 }}></th>
|
||||
<th>因子</th>
|
||||
<th>回看</th>
|
||||
<th>方向</th>
|
||||
<th>简介（用法 / 何时有效）</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{factors.map((f) => (
|
||||
<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>
|
||||
<div className="hint" style={{ padding: "10px 16px", borderTop: "1px solid var(--line)" }}>
|
||||
计分规则：每个因子在每日横截面做 z-score 标准化（低为好自动取负）；组合页按权重叠加得分选股。
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{error && <div className="error" style={{ whiteSpace: "pre-line" }}>{error}</div>}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{Object.entries(reports).map(([name, report]) => {
|
||||
<Card title="运行单因子测试" icon="play" tools={running ? <Pill tone="accent" icon="spinner">执行中</Pill> : undefined}>
|
||||
<div className="form-grid">
|
||||
<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>
|
||||
<Btn
|
||||
variant="primary"
|
||||
icon="play"
|
||||
loading={running}
|
||||
disabled={running || selectedCount === 0}
|
||||
onClick={run}
|
||||
>
|
||||
{running
|
||||
? `运行中 ${processed}/${selectedCount}`
|
||||
: selectedCount === 0
|
||||
? "请先勾选因子"
|
||||
: `运行因子测试（${selectedCount} 个）`}
|
||||
</Btn>
|
||||
</div>
|
||||
|
||||
{running ? (
|
||||
<div style={{ marginTop: 14 }}>
|
||||
<Progress
|
||||
value={progressPct}
|
||||
label={
|
||||
<>
|
||||
正在运行：<b>{current?.name}</b>（{current?.idx}/{current?.total}）· 后台任务{" "}
|
||||
<span className="mono">{jobId || "排队中…"}</span>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</Card>
|
||||
|
||||
{reportNames.length === 0 && !running && !error ? (
|
||||
<Card>
|
||||
<Empty
|
||||
icon="chartLine"
|
||||
title="还没有测试报告"
|
||||
hint="勾选一个或多个因子并设置研究区间后运行；完成后报告会按因子逐一出现在这里。"
|
||||
/>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{reportNames.map((name) => {
|
||||
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>
|
||||
<Card
|
||||
key={name}
|
||||
icon="chartLine"
|
||||
title={name}
|
||||
sub={meta?.brief}
|
||||
tools={
|
||||
<Pill tone="pos" icon="check">
|
||||
已完成
|
||||
</Pill>
|
||||
}
|
||||
>
|
||||
<ReportView report={reports[name]} />
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
@@ -193,81 +265,102 @@ function FactorRow(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 onClick={(e) => e.stopPropagation()}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={props.checked}
|
||||
onChange={props.onToggleCheck}
|
||||
aria-label={`选择因子 ${f.name}`}
|
||||
/>
|
||||
</td>
|
||||
<td>{f.name}</td>
|
||||
<td>{f.lookback}</td>
|
||||
<td>{f.direction === "higher_is_better" ? "高为好" : "低为好"}</td>
|
||||
<td>{f.brief ?? f.description}</td>
|
||||
<td className="cell-strong">
|
||||
<span className="mono">{f.name}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="tag tag--mono">{f.lookback} 日</span>
|
||||
</td>
|
||||
<td>
|
||||
<Pill tone={f.direction === "higher_is_better" ? "accent" : "violet"}>
|
||||
{f.direction === "higher_is_better" ? "高为好" : "低为好"}
|
||||
</Pill>
|
||||
</td>
|
||||
<td className="hint">{f.brief ?? f.description}</td>
|
||||
</tr>
|
||||
{props.expanded && (
|
||||
<tr>
|
||||
{props.expanded ? (
|
||||
<tr className="expand-cell">
|
||||
<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>
|
||||
<b className="mono">{f.name}</b> · {f.description}
|
||||
<div className="hint" style={{ marginTop: 6 }}>
|
||||
公式：<span className="mono">{f.formula}</span>；回看 {f.lookback} 个交易日；频率 {f.frequency}；
|
||||
方向：
|
||||
{f.direction === "higher_is_better" ? "因子值越高得分越高" : "因子值越低得分越高（引擎自动反向）"}
|
||||
</div>
|
||||
<div style={{ marginTop: 6 }}>{f.brief}</div>
|
||||
{f.brief ? <div className="hint" style={{ marginTop: 6 }}>{f.brief}</div> : null}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ReportView({ report }: { report: FactorTestReport }) {
|
||||
const qs = report.quantile_returns ?? [];
|
||||
const maxAbs = Math.max(0.001, ...qs.map((q) => Math.abs(q.return_pct)));
|
||||
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 className="stack" style={{ gap: 16 }}>
|
||||
<div className="metric-grid" style={{ marginBottom: 0 }}>
|
||||
<Metric
|
||||
label="IC 均值"
|
||||
icon="chartLine"
|
||||
value={report.ic_mean.toFixed(4)}
|
||||
tone={report.ic_mean >= 0 ? "pos" : "neg"}
|
||||
/>
|
||||
<Metric
|
||||
label="RankIC 均值"
|
||||
value={report.rank_ic_mean.toFixed(4)}
|
||||
tone={report.rank_ic_mean >= 0 ? "pos" : "neg"}
|
||||
/>
|
||||
<Metric
|
||||
label="ICIR"
|
||||
value={report.icir.toFixed(3)}
|
||||
tone={report.icir >= 1 ? "pos" : "plain"}
|
||||
sub="越大越稳定"
|
||||
/>
|
||||
<Metric
|
||||
label="正收益占比"
|
||||
value={`${report.positive_ratio_pct.toFixed(1)}%`}
|
||||
tone={report.positive_ratio_pct >= 50 ? "pos" : "warn"}
|
||||
/>
|
||||
<Metric label="样本日数" value={report.sample_days} icon="calendar" />
|
||||
</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 越大越稳定；分层收益若高分层显著高于低分层说明单调性好。
|
||||
单因子测试≠策略有效，需结合样本外与稳健性分析。
|
||||
|
||||
{qs.length > 0 ? (
|
||||
<div>
|
||||
<div className="field__label" style={{ marginBottom: 2 }}>
|
||||
分层表现（Q1 最低因子值 → Q5 最高，未来 21 日平均收益）
|
||||
</div>
|
||||
<div className="vbars" role="img" aria-label="分层收益柱状图">
|
||||
{qs.map((q) => {
|
||||
const v = q.return_pct;
|
||||
const h = Math.max(4, Math.round((Math.abs(v) / maxAbs) * 72));
|
||||
return (
|
||||
<div className="vbars__item" key={q.quantile}>
|
||||
<span className="vbars__val">{v >= 0 ? "+" : ""}{v.toFixed(2)}%</span>
|
||||
<div className={`vbars__bar ${v >= 0 ? "is-pos" : "is-neg"}`} style={{ height: h }} />
|
||||
<span className="vbars__cap">Q{q.quantile + 1}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="hint">
|
||||
读数：IC / RankIC 为正表示与未来收益正相关，ICIR 越大越稳定；分层收益若高分层显著高于低分层说明单调性好。
|
||||
单因子测试 ≠ 策略有效，需结合样本外与稳健性分析。
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user