feat: Phase 3 Web — 业务 API（stocks/factors/backtests）+ Next.js 前端
- 后端业务 API：GET /api/stocks(搜索/分页)、GET /api/factors（因子目录）、POST /api/factor-tests 与 /api/backtests（Research Spec 驱动同步执行）、GET /api/backtests/last；Annotated 依赖注入 + CORS(dev) - Repository 批量查询 get_range_many（研究装配一次查询，避免逐只拉取） - 前端 frontend/web：Next.js 15(TS) + ECharts —— 总览 / 股票池 / 因子研究(IC·RankIC·分层展示) / 回测（净值·回撤·月度·持仓·未建模标注） - 前端只消费业务 API 与标准化 BacktestResult，无 Qlib/SQL 概念泄漏 - 真实数据：同步 20 只权重股 2023-2024 日线（9680 根）支撑截面研究 - 验证：API 集成测试 8 项（DTO 校验/装配/引擎/标准结果，内存 repo 全链路）+ 全量 pytest 68 passed；前端 tsc + next build 通过；无头浏览器端到端（factors/backtest 页面渲染后端数据） - ruff clean
This commit is contained in:
Simon
@@ -0,0 +1,205 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { apiGet, apiPost } from "@/lib/api";
|
||||
import type { BacktestResult, FactorMeta, ResearchSpec } from "@/lib/types";
|
||||
import { LineChart } from "@/components/LineChart";
|
||||
|
||||
export default function BacktestPage() {
|
||||
const [factors, setFactors] = useState<FactorMeta[]>([]);
|
||||
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 [excludeSt, setExcludeSt] = useState(true);
|
||||
const [result, setResult] = useState<BacktestResult | null>(null);
|
||||
const [running, setRunning] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
apiGet<FactorMeta[]>("/factors")
|
||||
.then(setFactors)
|
||||
.catch((e: Error) => setError(e.message));
|
||||
}, []);
|
||||
|
||||
function run() {
|
||||
setRunning(true);
|
||||
setError("");
|
||||
const spec: ResearchSpec = {
|
||||
type: "backtest",
|
||||
universe: { exclude_st: excludeSt, min_listing_days: 0 },
|
||||
factors: [{ name: factor, weight: 1 }],
|
||||
selection: { top_n: topN },
|
||||
rebalance,
|
||||
period: [start, end],
|
||||
};
|
||||
apiPost<BacktestResult>("/backtests", spec)
|
||||
.then(setResult)
|
||||
.catch((e: Error) => setError(e.message))
|
||||
.finally(() => setRunning(false));
|
||||
}
|
||||
|
||||
const s = result?.summary;
|
||||
return (
|
||||
<>
|
||||
<h1>选股回测</h1>
|
||||
<div className="card">
|
||||
<h2>研究参数（Research Specification）</h2>
|
||||
<div className="form-grid">
|
||||
<label className="muted">
|
||||
因子
|
||||
<select value={factor} onChange={(e) => setFactor(e.target.value)}>
|
||||
{factors.map((f) => (
|
||||
<option key={f.name} value={f.name}>
|
||||
{f.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="muted">
|
||||
Top N
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={50}
|
||||
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 ? "运行中…" : "运行回测"}
|
||||
</button>
|
||||
</div>
|
||||
{error && <div className="error">{error}</div>}
|
||||
</div>
|
||||
|
||||
{result && s && (
|
||||
<>
|
||||
<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: 12 }}>
|
||||
<LineChart title="净值曲线" data={result.equity_curve} color="#34d399" />
|
||||
</div>
|
||||
<LineChart
|
||||
title="回撤（%）"
|
||||
data={result.drawdown}
|
||||
color="#f87171"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{(() => {
|
||||
const last = new Map<string, number>();
|
||||
for (const p of result.positions) last.set(p.date, 0);
|
||||
const lastDate = [...last.keys()].at(-1);
|
||||
const pos = result.positions.filter((p) => p.date === lastDate);
|
||||
return (
|
||||
<div className="row">
|
||||
{pos.map((p) => (
|
||||
<span key={p.symbol} className="stat">
|
||||
{p.symbol} · {(p.weight * 100).toFixed(0)}%
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2>未建模约束（如实标注）</h2>
|
||||
<ul className="muted">
|
||||
{result.unimplemented.map((u, i) => (
|
||||
<li key={i}>{u}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user