cirry/stock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

看股功能更新

Browse Source
This commit is contained in:
cirry
2026-08-15 15:36:11 +08:00
parent c1c43d2ff7
commit 9cce670b74
26 changed files with 957 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
frontend/src/views/BacktestView.vue
View File

@@ -86,23 +86,23 @@ async function rerunAdjusted() {
<template>
<div>
<!-- 输入区 -->
<div class="rounded-xl border border-slate-200 bg-white p-4">
<div class="rounded-xl border border-[#26272E] bg-[#101014] p-4">
<div class="flex items-center justify-between">
<div class="text-[13px] font-medium text-slate-600">事件回测：描述一个「信号 → 次日买入 → 持有 N 日」的事件，统计历史上全市场（或单只股票）的收益分布</div>
<div class="text-sm font-medium text-[#A8AFB8]">事件回测：描述一个「信号 → 次日买入 → 持有 N 日」的事件，统计历史上全市场（或单只股票）的收益分布</div>
</div>
<textarea
v-model="text"
rows="2"
class="mt-3 w-full resize-none rounded-lg border border-slate-200 px-3 py-2 text-[13px] text-slate-800 outline-none focus:border-blue-400"
class="mt-3 w-full resize-none rounded-lg border border-[#26272E] bg-[#16181D] px-3 py-2 text-sm text-[#E8EAED] outline-none placeholder:text-[#7A818C] focus:border-blue-500"
placeholder="例：在连续三天 J 小于 10 的时候第二天开盘购买，之后未来三天的涨幅有多少"
@keydown.ctrl.enter="run()"
/>
<div class="mt-2 flex flex-wrap items-center gap-2">
<span class="text-[12px] text-slate-400">试试：</span>
<span class="text-[13px] text-[#9BA3AE]">试试：</span>
<button
v-for="ex in EXAMPLES"
:key="ex"
class="rounded-full border border-slate-200 px-2.5 py-1 text-[12px] text-slate-600 hover:border-blue-300 hover:text-blue-600"
class="rounded-full border border-[#26272E] px-2.5 py-1 text-[13px] text-[#A8AFB8] hover:border-blue-500 hover:text-blue-300"
@click="text = ex"
>
{{ ex.length > 26 ? ex.slice(0, 26) + '…' : ex }}
@@ -110,48 +110,48 @@ async function rerunAdjusted() {
</div>
<div class="mt-3 flex flex-wrap items-end gap-3">
<label class="text-[12px] text-slate-500">
<label class="text-[13px] text-[#A8AFB8]">
股票范围
<div class="mt-1 flex overflow-hidden rounded-lg border border-slate-200 text-[12px]">
<div class="mt-1 flex overflow-hidden rounded-lg border border-[#26272E] text-[13px]">
<button
class="px-3 py-1.5"
:class="tsCode ? 'bg-white text-slate-600' : 'bg-blue-600 text-white'"
:class="tsCode ? 'bg-[#101014] text-[#A8AFB8]' : 'bg-blue-600 text-white'"
@click="tsCode = ''"
>全市场</button>
<button
class="px-3 py-1.5"
:class="tsCode ? 'bg-blue-600 text-white' : 'bg-white text-slate-600'"
:class="tsCode ? 'bg-blue-600 text-white' : 'bg-[#101014] text-[#A8AFB8]'"
@click="tsCode ||= '000001.SZ'"
>单只股票</button>
</div>
</label>
<label v-if="tsCode" class="text-[12px] text-slate-500">
<label v-if="tsCode" class="text-[13px] text-[#A8AFB8]">
股票代码
<input
v-model="tsCode"
class="mt-1 block w-40 rounded-lg border border-slate-200 px-3 py-1.5 text-[13px] outline-none focus:border-blue-400"
class="mt-1 block w-40 rounded-lg border border-[#26272E] bg-[#16181D] px-3 py-1.5 text-sm text-[#E8EAED] outline-none placeholder:text-[#7A818C] focus:border-blue-500"
placeholder="000001.SZ"
/>
</label>
<label class="text-[12px] text-slate-500">
<label class="text-[13px] text-[#A8AFB8]">
开始日期
<input
v-model="startDate"
type="date"
class="mt-1 block rounded-lg border border-slate-200 px-3 py-1.5 text-[13px] outline-none focus:border-blue-400"
class="mt-1 block rounded-lg border border-[#26272E] bg-[#16181D] px-3 py-1.5 text-sm text-[#E8EAED] outline-none placeholder:text-[#7A818C] focus:border-blue-500"
/>
</label>
<label class="text-[12px] text-slate-500">
<label class="text-[13px] text-[#A8AFB8]">
结束日期
<input
v-model="endDate"
type="date"
class="mt-1 block rounded-lg border border-slate-200 px-3 py-1.5 text-[13px] outline-none focus:border-blue-400"
class="mt-1 block rounded-lg border border-[#26272E] bg-[#16181D] px-3 py-1.5 text-sm text-[#E8EAED] outline-none placeholder:text-[#7A818C] focus:border-blue-500"
/>
</label>
<span class="text-[11px] text-slate-400">留空默认最近一年</span>
<span class="text-xs text-[#9BA3AE]">留空默认最近一年</span>
<button
class="ml-auto rounded-lg bg-blue-600 px-5 py-2 text-[13px] font-medium text-white hover:bg-blue-700 disabled:opacity-50"
class="ml-auto rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
:disabled="loading"
@click="run()"
>
@@ -161,21 +161,21 @@ async function rerunAdjusted() {
</div>
<!-- 错误 -->
<div v-if="error" class="mt-4 flex items-start gap-2 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-[13px] text-red-700">
<div v-if="error" class="mt-4 flex items-start gap-2 rounded-xl border border-red-500/40 bg-red-500/15 px-4 py-3 text-sm text-red-300">
<svg class="mt-0.5 h-4 w-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z" /><path d="M12 9v4M12 17h.01" /></svg>
{{ error }}
</div>
<!-- 加载中 -->
<div v-if="loading && note" class="py-16 text-center text-sm text-slate-400">
<div v-if="loading && note" class="py-16 text-center text-sm text-[#9BA3AE]">
<svg class="mx-auto mb-3 h-6 w-6 animate-spin text-blue-500" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" /></svg>
{{ note }}
</div>
<!-- 结果 -->
<template v-else-if="result && stats">
<div class="mt-4 rounded-xl border border-slate-200 bg-white px-4 py-3">
<div class="mb-2 text-[12px] text-slate-400">
<div class="mt-4 rounded-xl border border-[#26272E] bg-[#101014] px-4 py-3">
<div class="mb-2 text-[13px] text-[#9BA3AE]">
信号条件（{{ result.universe === 'all' ? '全市场' : result.universe }}，{{ fmtDate(result.start) }} ~ {{ fmtDate(result.end) }}）
</div>
<ConditionChips :conditions="result.spec.entry" />
@@ -183,75 +183,75 @@ async function rerunAdjusted() {
<!-- 统计卡片 -->
<div class="mt-4 grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6">
<div class="rounded-xl border border-slate-200 bg-white px-4 py-3">
<div class="text-[11px] text-slate-400">样本数</div>
<div class="mt-1 text-xl font-semibold text-slate-800">{{ stats.samples.toLocaleString() }}</div>
<div class="text-[11px] text-slate-400">{{ stats.stocks.toLocaleString() }} 只股票</div>
<div class="rounded-xl border border-[#26272E] bg-[#101014] px-4 py-3">
<div class="text-xs text-[#9BA3AE]">样本数</div>
<div class="mt-1 text-xl font-semibold text-[#E8EAED]">{{ stats.samples.toLocaleString() }}</div>
<div class="text-xs text-[#9BA3AE]">{{ stats.stocks.toLocaleString() }} 只股票</div>
</div>
<div class="rounded-xl border border-slate-200 bg-white px-4 py-3">
<div class="text-[11px] text-slate-400">平均涨幅</div>
<div class="mt-1 text-xl font-semibold" :class="stats.mean_pct >= 0 ? 'text-red-600' : 'text-green-600'">{{ fmtPct(stats.mean_pct) }}</div>
<div class="text-[11px] text-slate-400">中位数 {{ fmtPct(stats.median_pct) }}</div>
<div class="rounded-xl border border-[#26272E] bg-[#101014] px-4 py-3">
<div class="text-xs text-[#9BA3AE]">平均涨幅</div>
<div class="mt-1 text-xl font-semibold" :class="stats.mean_pct >= 0 ? 'text-up' : 'text-down'">{{ fmtPct(stats.mean_pct) }}</div>
<div class="text-xs text-[#9BA3AE]">中位数 {{ fmtPct(stats.median_pct) }}</div>
</div>
<div class="rounded-xl border border-slate-200 bg-white px-4 py-3">
<div class="text-[11px] text-slate-400">胜率（涨）</div>
<div class="mt-1 text-xl font-semibold text-slate-800">{{ stats.win_rate.toFixed(2) }}%</div>
<div class="text-[11px] text-slate-400">波动 σ {{ stats.std_pct.toFixed(2) }}</div>
<div class="rounded-xl border border-[#26272E] bg-[#101014] px-4 py-3">
<div class="text-xs text-[#9BA3AE]">胜率（涨）</div>
<div class="mt-1 text-xl font-semibold text-[#E8EAED]">{{ stats.win_rate.toFixed(2) }}%</div>
<div class="text-xs text-[#9BA3AE]">波动 σ {{ stats.std_pct.toFixed(2) }}</div>
</div>
<div class="rounded-xl border border-slate-200 bg-white px-4 py-3">
<div class="text-[11px] text-slate-400">P10 / P25</div>
<div class="mt-1 text-[15px] font-semibold text-green-700">{{ fmtPct(stats.p10_pct) }} / {{ fmtPct(stats.p25_pct) }}</div>
<div class="text-[11px] text-slate-400">最差 {{ fmtPct(stats.min_pct) }}</div>
<div class="rounded-xl border border-[#26272E] bg-[#101014] px-4 py-3">
<div class="text-xs text-[#9BA3AE]">P10 / P25</div>
<div class="mt-1 text-[15px] font-semibold text-down">{{ fmtPct(stats.p10_pct) }} / {{ fmtPct(stats.p25_pct) }}</div>
<div class="text-xs text-[#9BA3AE]">最差 {{ fmtPct(stats.min_pct) }}</div>
</div>
<div class="rounded-xl border border-slate-200 bg-white px-4 py-3">
<div class="text-[11px] text-slate-400">P75 / P90</div>
<div class="mt-1 text-[15px] font-semibold text-red-700">{{ fmtPct(stats.p75_pct) }} / {{ fmtPct(stats.p90_pct) }}</div>
<div class="text-[11px] text-slate-400">最好 {{ fmtPct(stats.max_pct) }}</div>
<div class="rounded-xl border border-[#26272E] bg-[#101014] px-4 py-3">
<div class="text-xs text-[#9BA3AE]">P75 / P90</div>
<div class="mt-1 text-[15px] font-semibold text-up">{{ fmtPct(stats.p75_pct) }} / {{ fmtPct(stats.p90_pct) }}</div>
<div class="text-xs text-[#9BA3AE]">最好 {{ fmtPct(stats.max_pct) }}</div>
</div>
<div class="rounded-xl border border-slate-200 bg-white px-4 py-3">
<div class="text-[11px] text-slate-400">收益口径</div>
<div class="mt-1 text-[13px] leading-5 text-slate-700">持有 {{ result.spec.holding_days }} 个交易日<br>{{ result.spec.entry_timing === 'next_open' ? '次日开盘' : '次日收盘' }}买入 → 按{{ result.spec.exit_timing === 'close' ? '收盘' : '开盘' }}卖出</div>
<div class="rounded-xl border border-[#26272E] bg-[#101014] px-4 py-3">
<div class="text-xs text-[#9BA3AE]">收益口径</div>
<div class="mt-1 text-sm leading-5 text-[#E8EAED]">持有 {{ result.spec.holding_days }} 个交易日<br>{{ result.spec.entry_timing === 'next_open' ? '次日开盘' : '次日收盘' }}买入 → 按{{ result.spec.exit_timing === 'close' ? '收盘' : '开盘' }}卖出</div>
</div>
</div>
<!-- 调参重跑 -->
<div class="mt-4 flex flex-wrap items-end gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
<div class="text-[12px] font-medium text-slate-600">调整参数重跑（不动信号条件）：</div>
<label class="text-[12px] text-slate-500">
<div class="mt-4 flex flex-wrap items-end gap-3 rounded-xl border border-[#26272E] bg-[#101014] px-4 py-3">
<div class="text-[13px] font-medium text-[#A8AFB8]">调整参数重跑（不动信号条件）：</div>
<label class="text-[13px] text-[#A8AFB8]">
持有天数
<input
v-model.number="holdingDays"
type="number" min="1" max="250"
class="mt-1 block w-20 rounded-lg border border-slate-200 px-2 py-1.5 text-[13px] outline-none focus:border-blue-400"
class="mt-1 block w-20 rounded-lg border border-[#26272E] bg-[#16181D] px-2 py-1.5 text-sm text-[#E8EAED] outline-none focus:border-blue-500"
/>
</label>
<label class="text-[12px] text-slate-500">
<label class="text-[13px] text-[#A8AFB8]">
买入时机
<select v-model="entryTiming" class="mt-1 block rounded-lg border border-slate-200 px-2 py-1.5 text-[13px] outline-none focus:border-blue-400">
<select v-model="entryTiming" class="mt-1 block rounded-lg border border-[#26272E] bg-[#16181D] px-2 py-1.5 text-sm text-[#E8EAED] outline-none focus:border-blue-500">
<option value="next_open">次日开盘</option>
<option value="next_close">次日收盘</option>
</select>
</label>
<label class="text-[12px] text-slate-500">
<label class="text-[13px] text-[#A8AFB8]">
卖出价
<select v-model="exitTiming" class="mt-1 block rounded-lg border border-slate-200 px-2 py-1.5 text-[13px] outline-none focus:border-blue-400">
<select v-model="exitTiming" class="mt-1 block rounded-lg border border-[#26272E] bg-[#16181D] px-2 py-1.5 text-sm text-[#E8EAED] outline-none focus:border-blue-500">
<option value="close">收盘</option>
<option value="open">开盘</option>
</select>
</label>
<button
class="rounded-lg border border-blue-300 px-4 py-1.5 text-[13px] font-medium text-blue-600 hover:bg-blue-50 disabled:opacity-50"
class="rounded-lg border border-blue-500 px-4 py-1.5 text-sm font-medium text-blue-300 hover:bg-blue-500/15 disabled:opacity-50"
:disabled="loading || !spec"
@click="rerunAdjusted()"
>按新参数重跑</button>
</div>
<!-- 分年统计 -->
<div v-if="stats.by_year.length" class="mt-4 rounded-xl border border-slate-200 bg-white p-4">
<div class="mb-2 text-[13px] font-medium text-slate-600">分年统计</div>
<table class="w-full text-[13px]">
<div v-if="stats.by_year.length" class="mt-4 rounded-xl border border-[#26272E] bg-[#101014] p-4">
<div class="mb-2 text-sm font-medium text-[#A8AFB8]">分年统计</div>
<table class="w-full text-sm">
<thead>
<tr class="border-b border-slate-100 text-left text-[12px] text-slate-400">
<tr class="border-b border-[#1E2026] text-left text-[13px] text-[#9BA3AE]">
<th class="py-1.5 font-normal">年份</th>
<th class="py-1.5 font-normal">样本数</th>
<th class="py-1.5 font-normal">平均涨幅</th>
@@ -260,11 +260,11 @@ async function rerunAdjusted() {
</tr>
</thead>
<tbody>
<tr v-for="y in stats.by_year" :key="y.year" class="border-b border-slate-50">
<tr v-for="y in stats.by_year" :key="y.year" class="border-b border-[#1E2026]">
<td class="py-1.5">{{ y.year }}</td>
<td class="py-1.5">{{ y.samples.toLocaleString() }}</td>
<td class="py-1.5 font-medium" :class="y.mean_pct >= 0 ? 'text-red-600' : 'text-green-600'">{{ fmtPct(y.mean_pct) }}</td>
<td class="py-1.5" :class="y.median_pct >= 0 ? 'text-red-600' : 'text-green-600'">{{ fmtPct(y.median_pct) }}</td>
<td class="py-1.5 font-medium" :class="y.mean_pct >= 0 ? 'text-up' : 'text-down'">{{ fmtPct(y.mean_pct) }}</td>
<td class="py-1.5" :class="y.median_pct >= 0 ? 'text-up' : 'text-down'">{{ fmtPct(y.median_pct) }}</td>
<td class="py-1.5">{{ y.win_rate.toFixed(2) }}%</td>
</tr>
</tbody>
@@ -273,12 +273,12 @@ async function rerunAdjusted() {
<!-- 样本明细 -->
<div class="mt-4 grid gap-4 lg:grid-cols-2">
<div class="rounded-xl border border-slate-200 bg-white p-4">
<div class="mb-2 text-[13px] font-medium text-slate-600">表现最好的样本（前 {{ bestTrades.length }}）</div>
<div class="rounded-xl border border-[#26272E] bg-[#101014] p-4">
<div class="mb-2 text-sm font-medium text-[#A8AFB8]">表现最好的样本（前 {{ bestTrades.length }}）</div>
<div class="max-h-96 overflow-y-auto">
<table class="w-full text-[12px]">
<thead class="sticky top-0 bg-white">
<tr class="border-b border-slate-100 text-left text-[11px] text-slate-400">
<table class="w-full text-[13px]">
<thead class="sticky top-0 bg-[#101014]">
<tr class="border-b border-[#1E2026] text-left text-xs text-[#9BA3AE]">
<th class="py-1.5 font-normal">代码</th>
<th class="py-1.5 font-normal">买入日</th>
<th class="py-1.5 font-normal">买入价</th>
@@ -287,23 +287,23 @@ async function rerunAdjusted() {
</tr>
</thead>
<tbody>
<tr v-for="(t, i) in bestTrades" :key="i" class="border-b border-slate-50">
<td class="py-1.5">{{ t.ts_code }} <span class="text-slate-400">{{ t.name }}</span></td>
<td class="py-1.5 text-slate-500">{{ fmtDate(t.entry_date) }}</td>
<tr v-for="(t, i) in bestTrades" :key="i" class="border-b border-[#1E2026]">
<td class="py-1.5">{{ t.ts_code }} <span class="text-[#9BA3AE]">{{ t.name }}</span></td>
<td class="py-1.5 text-[#A8AFB8]">{{ fmtDate(t.entry_date) }}</td>
<td class="py-1.5">{{ t.entry_price }}</td>
<td class="py-1.5">{{ t.exit_price }}</td>
<td class="py-1.5 font-medium text-red-600">{{ fmtPct(t.ret_pct) }}</td>
<td class="py-1.5 font-medium text-up">{{ fmtPct(t.ret_pct) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div v-if="worstTrades.length" class="rounded-xl border border-slate-200 bg-white p-4">
<div class="mb-2 text-[13px] font-medium text-slate-600">表现最差的样本（后 {{ worstTrades.length }}）</div>
<div v-if="worstTrades.length" class="rounded-xl border border-[#26272E] bg-[#101014] p-4">
<div class="mb-2 text-sm font-medium text-[#A8AFB8]">表现最差的样本（后 {{ worstTrades.length }}）</div>
<div class="max-h-96 overflow-y-auto">
<table class="w-full text-[12px]">
<thead class="sticky top-0 bg-white">
<tr class="border-b border-slate-100 text-left text-[11px] text-slate-400">
<table class="w-full text-[13px]">
<thead class="sticky top-0 bg-[#101014]">
<tr class="border-b border-[#1E2026] text-left text-xs text-[#9BA3AE]">
<th class="py-1.5 font-normal">代码</th>
<th class="py-1.5 font-normal">买入日</th>
<th class="py-1.5 font-normal">买入价</th>
@@ -312,24 +312,24 @@ async function rerunAdjusted() {
</tr>
</thead>
<tbody>
<tr v-for="(t, i) in worstTrades" :key="i" class="border-b border-slate-50">
<td class="py-1.5">{{ t.ts_code }} <span class="text-slate-400">{{ t.name }}</span></td>
<td class="py-1.5 text-slate-500">{{ fmtDate(t.entry_date) }}</td>
<tr v-for="(t, i) in worstTrades" :key="i" class="border-b border-[#1E2026]">
<td class="py-1.5">{{ t.ts_code }} <span class="text-[#9BA3AE]">{{ t.name }}</span></td>
<td class="py-1.5 text-[#A8AFB8]">{{ fmtDate(t.entry_date) }}</td>
<td class="py-1.5">{{ t.entry_price }}</td>
<td class="py-1.5">{{ t.exit_price }}</td>
<td class="py-1.5 font-medium text-green-600">{{ fmtPct(t.ret_pct) }}</td>
<td class="py-1.5 font-medium text-down">{{ fmtPct(t.ret_pct) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="mt-2 text-[11px] text-slate-400">
<div class="mt-2 text-xs text-[#9BA3AE]">
共 {{ result.total.toLocaleString() }} 个样本；收益率已按复权因子校正（消除除权除息失真）。明细仅展示最好/最差各 100 条。
</div>
</template>
<div v-else-if="!error && !loading" class="py-16 text-center text-sm text-slate-400">
<div v-else-if="!error && !loading" class="py-16 text-center text-sm text-[#9BA3AE]">
用一句话描述你的想法，例如「连续三天 J 小于 10 时次日开盘买入，未来三天涨多少」
</div>
</div>