feat(web): M8.6b 回测页做实 + 首页入口更新(零新后端 API)

- backtest 页:成本参数表单(手续费/印花税/滑点 %)+ 初始资金 → ResearchSpec.costs/
  initial_capital;结果新增年度收益卡与成交明细表(买/卖日、买/卖价、收益、累计换手)
- Dashboard 入口卡加入「股票筛选」「交易信号」(6 张)
- lib/types.ts:ResearchSpec 增加 price_adjustment/costs/portfolio/initial_capital,
  Trade 补 entry_price/exit_price
- 页面 200 冒烟 + tsc --noEmit 通过
This commit is contained in:
Simon
2026-09-09 00:41:49 +08:00
parent e1ac23fa25
commit e5a23f176d
3 changed files with 102 additions and 1 deletions
+78
View File
@@ -28,6 +28,10 @@ export default function BacktestPage() {
const [start, setStart] = useState("");
const [end, setEnd] = useState("");
const [excludeSt, setExcludeSt] = useState(true);
const [commission, setCommission] = useState(0.03); // %
const [stamp, setStamp] = useState(0.05);
const [slippage, setSlippage] = useState(0.1);
const [capital, setCapital] = useState(1_000_000);
const [result, setResult] = useState<BacktestResult | null>(null);
const [running, setRunning] = useState(false);
const [jobId, setJobId] = useState("");
@@ -65,6 +69,12 @@ export default function BacktestPage() {
factors: [{ name: factor, weight: 1 }],
selection: { top_n: topN },
rebalance,
costs: {
commission_rate: commission / 100,
stamp_tax_rate: stamp / 100,
slippage_rate: slippage / 100,
},
initial_capital: capital,
period: [start, end],
};
// 异步 Job:后台执行(全市场可能数十秒),轮询到终态
@@ -133,6 +143,22 @@ export default function BacktestPage() {
<option value="weekly">周度</option>
</select>
</Field>
<Field label="手续费率 %">
<input className="input" type="number" step="0.01" min={0} value={commission}
onChange={(e) => setCommission(Number(e.target.value))} />
</Field>
<Field label="印花税率 %">
<input className="input" type="number" step="0.01" min={0} value={stamp}
onChange={(e) => setStamp(Number(e.target.value))} />
</Field>
<Field label="滑点率 %">
<input className="input" type="number" step="0.01" min={0} value={slippage}
onChange={(e) => setSlippage(Number(e.target.value))} />
</Field>
<Field label="初始资金(元)">
<input className="input" type="number" step={100000} min={10000} value={capital}
onChange={(e) => setCapital(Number(e.target.value))} />
</Field>
<Field label="开始日期">
<input type="date" className="input" value={start} onChange={(e) => setStart(e.target.value)} />
</Field>
@@ -228,6 +254,58 @@ function ResultView({ result }: { result: BacktestResult }) {
)}
</Card>
{result.yearly_returns.length ? (
<Card icon="calendar" title="年度收益(%)" tools={<Pill>均值 {(result.yearly_returns.reduce((a, y) => a + y.return_pct, 0) / result.yearly_returns.length).toFixed(2)}%</Pill>}>
<div className="chips">
{result.yearly_returns.map((y) => (
<span className="chip" key={y.year}>
<b>{y.year}</b>
<span className={y.return_pct >= 0 ? "tone-pos" : "tone-neg"}>
{y.return_pct.toFixed(2)}%
</span>
</span>
))}
</div>
</Card>
) : null}
{result.trades.length ? (
<Card
icon="scale"
title={`成交明细 · ${result.trades.length} 笔`}
tools={<Pill>{result.turnover_pct.toFixed(2)}% 累计换手</Pill>}
>
<div className="table-wrap">
<table className="tbl">
<thead>
<tr>
<th>买入日</th>
<th>卖出日</th>
<th>代码</th>
<th>买价</th>
<th>卖价</th>
<th>收益</th>
</tr>
</thead>
<tbody>
{result.trades.map((t) => (
<tr key={`${t.symbol}-${t.entry_date}-${t.exit_date}`}>
<td className="mono dim">{t.entry_date}</td>
<td className="mono dim">{t.exit_date}</td>
<td className="mono"><b>{t.symbol}</b></td>
<td className="mono">{t.entry_price?.toFixed(2) ?? "-"}</td>
<td className="mono">{t.exit_price?.toFixed(2) ?? "-"}</td>
<td className={t.return_pct >= 0 ? "tone-pos" : "tone-neg"}>
{t.return_pct.toFixed(2)}%
</td>
</tr>
))}
</tbody>
</table>
</div>
</Card>
) : null}
<UnimplementedNote items={result.unimplemented} />
</>
);