2189 lines
107 KiB
TypeScript
2189 lines
107 KiB
TypeScript
import { useState, useMemo, useEffect, useRef, type ReactNode } from 'react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { motion } from 'framer-motion'
|
|
import { Play, FlaskConical, Clock, Loader2, Square, Search, Plus, X, SlidersHorizontal, BarChart3, Gauge, Zap } from 'lucide-react'
|
|
import {
|
|
api,
|
|
type StrategyBacktestResult,
|
|
type StrategyBacktestTrade,
|
|
type StrategyDetail,
|
|
type StrategyParamDef,
|
|
} from '@/lib/api'
|
|
import { QK } from '@/lib/queryKeys'
|
|
import { tierRank } from '@/lib/capability-labels'
|
|
import { storage } from '@/lib/storage'
|
|
import { fmtPct, fmtPrice, priceColorClass } from '@/lib/format'
|
|
import { boardTag } from '@/lib/board'
|
|
import { BUILTIN_COLUMNS } from '@/lib/watchlist-columns'
|
|
import { SignalPicker } from '@/components/screener/SignalPicker'
|
|
import { startBacktest, stopBacktest, tryReconnect, useBacktestTask } from '@/lib/backtestTask'
|
|
import { useDataStatus, useCapabilities } from '@/lib/useSharedQueries'
|
|
import { EmptyState } from '@/components/EmptyState'
|
|
import { DatePicker } from '@/components/DatePicker'
|
|
import { StrategyNavChart } from './charts/StrategyNavChart'
|
|
import { ReturnDistributionChart } from './charts/ReturnDistributionChart'
|
|
import { TradeKlineModal } from './components/TradeKlineModal'
|
|
import { SignalTriggerActions } from '@/components/signals/SignalTriggerActions'
|
|
|
|
const formatDate = (date: Date) => date.toISOString().slice(0, 10)
|
|
const monthsAgo = (months: number) => {
|
|
const date = new Date()
|
|
date.setMonth(date.getMonth() - months)
|
|
return formatDate(date)
|
|
}
|
|
const TODAY = formatDate(new Date())
|
|
const THREE_MONTHS_AGO = monthsAgo(3)
|
|
|
|
type QuickRangeUnit = 'month' | 'year' | 'all'
|
|
type QuickRangeConfig = { id: string; enabled: boolean; unit: QuickRangeUnit; value: number }
|
|
|
|
const QUICK_RANGE_LIMITS = {
|
|
month: { min: 1, max: 120 },
|
|
year: { min: 1, max: 10 },
|
|
} as const
|
|
const DEFAULT_QUICK_RANGES: QuickRangeConfig[] = [
|
|
{ id: 'range-1', enabled: true, unit: 'month', value: 3 },
|
|
{ id: 'range-2', enabled: true, unit: 'month', value: 6 },
|
|
{ id: 'range-3', enabled: true, unit: 'year', value: 1 },
|
|
{ id: 'range-4', enabled: true, unit: 'all', value: 0 },
|
|
]
|
|
const quickRangeValue = (unit: QuickRangeUnit, value: unknown, fallback: number) => {
|
|
if (unit === 'all') return 0
|
|
const limits = QUICK_RANGE_LIMITS[unit]
|
|
const num = Number(value)
|
|
const safe = Number.isFinite(num) ? Math.round(num) : fallback
|
|
return clamp(safe, limits.min, limits.max)
|
|
}
|
|
const normalizeQuickRange = (raw: unknown, fallback: QuickRangeConfig): QuickRangeConfig => {
|
|
const obj = raw && typeof raw === 'object' ? raw as Partial<QuickRangeConfig> : {}
|
|
const unit: QuickRangeUnit = obj.unit === 'month' || obj.unit === 'year' || obj.unit === 'all'
|
|
? obj.unit
|
|
: fallback.unit
|
|
const enabled = typeof obj.enabled === 'boolean' ? obj.enabled : fallback.enabled
|
|
return { id: fallback.id, enabled, unit, value: quickRangeValue(unit, obj.value, fallback.value) }
|
|
}
|
|
const normalizeQuickRanges = (raw: unknown) => {
|
|
const items = Array.isArray(raw) ? raw : []
|
|
const ranges = DEFAULT_QUICK_RANGES.map((fallback, index) => {
|
|
const byId = items.find(item => item && typeof item === 'object' && (item as { id?: unknown }).id === fallback.id)
|
|
return normalizeQuickRange(byId ?? items[index], fallback)
|
|
})
|
|
return ranges.some(range => range.enabled)
|
|
? ranges
|
|
: ranges.map((range, index) => index === 0 ? { ...range, enabled: true } : range)
|
|
}
|
|
const loadQuickRanges = () => normalizeQuickRanges(storage.strategyBacktestQuickRanges.get(DEFAULT_QUICK_RANGES))
|
|
const quickRangeMonths = (range: QuickRangeConfig) => range.unit === 'year' ? range.value * 12 : range.value
|
|
const quickRangeLabel = (range: QuickRangeConfig) => range.unit === 'all'
|
|
? '全部'
|
|
: range.unit === 'year'
|
|
? `${range.value}年`
|
|
: `${range.value}个月`
|
|
const quickRangeTitle = (range: QuickRangeConfig) => range.unit === 'all'
|
|
? '全部历史'
|
|
: range.unit === 'year'
|
|
? `近 ${range.value} 年`
|
|
: `近 ${range.value} 个月`
|
|
|
|
const INPUT_CLS = `w-full px-2.5 py-1.5 rounded-input bg-surface border border-border text-xs
|
|
focus:outline-none focus:border-accent transition-colors duration-150 ease-smooth`
|
|
|
|
const SRC_MAP: Record<string, string> = { builtin: '内置', custom: '自定义', ai: 'AI' }
|
|
const TRADE_PAGE_SIZE_OPTIONS = [10, 20, 30, 50, 100]
|
|
const BADGE_CLS_MAP: Record<string, string> = {
|
|
builtin: 'bg-secondary/10 text-muted border-border',
|
|
ai: 'bg-purple-500/10 text-purple-400 border-purple-500/30',
|
|
custom: 'bg-amber-400/10 text-amber-400 border-amber-400/30',
|
|
}
|
|
const FIELD_LABEL: Record<string, string> = {}
|
|
for (const c of BUILTIN_COLUMNS) {
|
|
if (c.source.type === 'builtin') FIELD_LABEL[c.source.key] = c.label
|
|
}
|
|
Object.assign(FIELD_LABEL, {
|
|
change_pct: '涨跌幅', consecutive_limit_ups: '连板',
|
|
momentum_60d: '60D动量', turnover_rate: '换手率',
|
|
rsi_14: 'RSI14', rsi_6: 'RSI6', rsi_24: 'RSI24',
|
|
vol_ratio_5d: '量比', vol_ratio_20d: '20日量比',
|
|
macd_dif: 'MACD-DIF', macd_dea: 'MACD-DEA', macd_hist: 'MACD柱',
|
|
boll_upper: '布林上轨', boll_lower: '布林下轨',
|
|
})
|
|
const BOARD_OPTIONS = ['沪主板', '深主板', '创业板', '科创板', '北交所']
|
|
const BASIC_FILTER_FIELDS = [
|
|
{ key: 'price_min', label: '最低价', unit: '元' },
|
|
{ key: 'price_max', label: '最高价', unit: '元' },
|
|
{ key: 'amount_min', label: '最低成交额', unit: '亿', scale: 1e8 },
|
|
{ key: 'market_cap_min', label: '最低总市值', unit: '亿', scale: 1e8 },
|
|
{ key: 'turnover_min', label: '最低换手率', unit: '%' },
|
|
{ key: 'turnover_max', label: '最高换手率', unit: '%' },
|
|
]
|
|
type AdvancedSettingsTab = 'params' | 'filter' | 'entry' | 'exit' | 'scoring' | 'risk' | 'range'
|
|
type StrategyGroup = 'all' | 'custom' | 'ai' | 'builtin'
|
|
const STRATEGY_GROUPS: { id: StrategyGroup; label: string }[] = [
|
|
{ id: 'all', label: '全部' },
|
|
{ id: 'custom', label: '自定义' },
|
|
{ id: 'ai', label: 'AI' },
|
|
{ id: 'builtin', label: '内置' },
|
|
]
|
|
const ADVANCED_TABS: { id: AdvancedSettingsTab; label: string }[] = [
|
|
{ id: 'params', label: '策略参数' },
|
|
{ id: 'filter', label: '基础过滤' },
|
|
{ id: 'entry', label: '买入触发器' },
|
|
{ id: 'exit', label: '卖出触发器' },
|
|
{ id: 'scoring', label: '评分权重' },
|
|
{ id: 'risk', label: '风控' },
|
|
{ id: 'range', label: '回测范围' },
|
|
]
|
|
const toSignalId = (sig: string) => (sig.startsWith('signal_') || sig.startsWith('csg_')) ? sig : `signal_${sig}`
|
|
const numOrNull = (v: string) => v === '' || Number.isNaN(Number(v)) ? null : Number(v)
|
|
const clamp = (v: number, min?: number, max?: number) => {
|
|
let next = v
|
|
if (min != null) next = Math.max(next, min)
|
|
if (max != null) next = Math.min(next, max)
|
|
return next
|
|
}
|
|
const strategyDefaultParams = (detail: StrategyDetail) => {
|
|
const values: Record<string, any> = { ...detail.params_defaults }
|
|
detail.params.forEach(p => {
|
|
if (!(p.id in values)) values[p.id] = p.default
|
|
})
|
|
return values
|
|
}
|
|
const buildDefaultOverrides = (detail: StrategyDetail) => ({
|
|
basic_filter: { ...detail.basic_filter },
|
|
entry_signals: detail.entry_signals.map(toSignalId),
|
|
exit_signals: detail.exit_signals.map(toSignalId),
|
|
scoring: { ...detail.scoring },
|
|
stop_loss: detail.stop_loss,
|
|
trailing_stop: detail.trailing_stop,
|
|
trailing_take_profit_activate: detail.trailing_take_profit_activate,
|
|
trailing_take_profit_drawdown: detail.trailing_take_profit_drawdown,
|
|
score_min: null,
|
|
score_max: null,
|
|
max_hold_days: detail.max_hold_days,
|
|
})
|
|
|
|
const fmtMoney = (v: number | null | undefined) => {
|
|
if (v == null || Number.isNaN(v)) return '—'
|
|
return v.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
}
|
|
|
|
const fmtSignedMoney = (v: number | null | undefined) => {
|
|
if (v == null || Number.isNaN(v)) return '—'
|
|
const sign = v > 0 ? '+' : ''
|
|
return `${sign}${fmtMoney(v)}`
|
|
}
|
|
|
|
const fmtShares = (v: number | null | undefined) => {
|
|
if (v == null || Number.isNaN(v)) return '—'
|
|
return v.toLocaleString('zh-CN', { maximumFractionDigits: 0 })
|
|
}
|
|
|
|
const fmtLots = (v: number | null | undefined) => {
|
|
if (v == null || Number.isNaN(v)) return '—'
|
|
return v.toLocaleString('zh-CN', { maximumFractionDigits: 2 })
|
|
}
|
|
|
|
const statValueColor = (v: number | null | undefined) => {
|
|
if (v == null || Number.isNaN(v) || v === 0) return '#f8fafc'
|
|
return v > 0 ? '#f87171' : '#34d399'
|
|
}
|
|
|
|
function ExitReasonBadge({ reason }: { reason: string }) {
|
|
const config: Record<string, { label: string; cls: string }> = {
|
|
signal: { label: '信号', cls: 'bg-accent/10 text-accent border-accent/30' },
|
|
stop_loss: { label: '止损', cls: 'bg-red-500/10 text-red-400 border-red-500/30' },
|
|
trailing_stop: { label: '移损', cls: 'bg-orange-500/10 text-orange-400 border-orange-500/30' },
|
|
trailing_take_profit: { label: '回撤止盈', cls: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30' },
|
|
max_hold: { label: '超期', cls: 'bg-amber-400/10 text-amber-400 border-amber-400/30' },
|
|
pending_exit: { label: '待卖', cls: 'bg-orange-400/10 text-orange-400 border-orange-400/30' },
|
|
end: { label: '期末', cls: 'bg-secondary/10 text-secondary border-border' },
|
|
}
|
|
const c = config[reason] ?? { label: reason, cls: 'bg-elevated text-muted border-border' }
|
|
return (
|
|
<span className={`text-[10px] px-1.5 py-0.5 rounded border ${c.cls}`}>{c.label}</span>
|
|
)
|
|
}
|
|
|
|
type DailyTradeRow = {
|
|
date: string
|
|
buys: StrategyBacktestTrade[]
|
|
sells: StrategyBacktestTrade[]
|
|
buyValue: number
|
|
sellValue: number
|
|
realizedPnl: number
|
|
cumulativePnl: number
|
|
}
|
|
|
|
function fmtPositionPct(v: number | null | undefined, digits = 2): string {
|
|
if (v == null || Number.isNaN(v)) return '—'
|
|
return `${(Math.abs(v) * 100).toFixed(digits)}%`
|
|
}
|
|
|
|
function fmtScore(v: number | null | undefined): string {
|
|
if (v == null || Number.isNaN(Number(v))) return '—'
|
|
return Number(v).toFixed(1)
|
|
}
|
|
|
|
function DailyTradeChip({ trade, side, strategyName, onClick }: { trade: StrategyBacktestTrade; side: 'buy' | 'sell'; strategyName?: string; onClick?: () => void }) {
|
|
const isBuy = side === 'buy'
|
|
const tag = boardTag(trade.symbol)
|
|
const price = isBuy ? trade.entry_price : trade.exit_price
|
|
const amount = isBuy ? trade.entry_value : trade.exit_value
|
|
const pnlColor = priceColorClass(trade.pnl_amount ?? trade.pnl_pct)
|
|
const footerColor = isBuy ? 'text-secondary' : pnlColor
|
|
const footerText = `仓位 ${fmtPositionPct(trade.position_pct, 2)}`
|
|
const scoreText = fmtScore(trade.entry_score)
|
|
const buyStrategy = strategyName || '策略'
|
|
|
|
return (
|
|
<button type="button" onClick={onClick} className={`inline-flex ${isBuy ? 'w-[14.5rem]' : 'w-[14.5rem]'} flex-col gap-0.5 rounded-btn border px-1.5 py-1 text-left text-[11px] leading-4 transition-colors hover:border-accent/45 hover:bg-elevated/60 focus:outline-none focus:ring-1 focus:ring-accent/40 ${
|
|
isBuy ? 'border-accent/25 bg-accent/5' : 'border-border/70 bg-base/45'
|
|
}`}>
|
|
<span className="flex items-center gap-1">
|
|
<span className={`shrink-0 rounded px-1 py-px text-[9px] font-medium ${
|
|
isBuy ? 'bg-accent/15 text-accent' : 'bg-elevated text-secondary'
|
|
}`}>
|
|
{isBuy ? '买' : '卖'}
|
|
</span>
|
|
<span className="min-w-0 flex-1 truncate text-foreground">{trade.name || trade.symbol}</span>
|
|
{tag && <span className={`shrink-0 rounded px-1 text-[9px] font-medium ${isBuy ? 'bg-accent/20 text-accent' : 'bg-elevated text-secondary'}`}>{tag}</span>}
|
|
</span>
|
|
<span className="flex items-center justify-between gap-2 text-muted">
|
|
<span className="min-w-0 truncate">
|
|
<span className="font-mono">{trade.symbol}</span>
|
|
<span className="mx-1">·</span>
|
|
<span className="num">{fmtLots(trade.lots)}手</span>
|
|
</span>
|
|
{isBuy ? (
|
|
<span className="num shrink-0 text-secondary">{fmtPrice(price)}</span>
|
|
) : (
|
|
<span className="flex shrink-0 items-center gap-1.5">
|
|
<span className="num text-secondary">{fmtPrice(price)}</span>
|
|
<ExitReasonBadge reason={trade.exit_reason} />
|
|
</span>
|
|
)}
|
|
</span>
|
|
{isBuy ? (
|
|
<>
|
|
<span className="flex items-center justify-between gap-2">
|
|
<span className="min-w-0 truncate text-muted" title={buyStrategy}>策略 {buyStrategy}</span>
|
|
<span className="shrink-0 rounded border border-accent/25 bg-accent/10 px-1.5 py-px font-mono text-[10px] text-accent">
|
|
评分 {scoreText}
|
|
</span>
|
|
</span>
|
|
<span className="flex items-center justify-between gap-2">
|
|
<span className="num font-medium text-foreground">{fmtMoney(amount)}</span>
|
|
<span className={`min-w-0 truncate text-right num ${footerColor}`}>{footerText}</span>
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="flex items-center justify-between gap-2">
|
|
<span className="text-muted">卖出</span>
|
|
<span className="num font-medium text-foreground">{fmtMoney(amount)}</span>
|
|
</span>
|
|
<span className="flex items-center justify-between gap-2">
|
|
<span className="text-muted">盈亏</span>
|
|
<span className={`flex shrink-0 items-center gap-1.5 text-right num font-medium ${pnlColor}`}>
|
|
<span>{fmtSignedMoney(trade.pnl_amount)}</span>
|
|
<span className="text-muted/40">/</span>
|
|
<span>{fmtPct(trade.pnl_pct)}</span>
|
|
</span>
|
|
</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function TradeLegCell({ trade, side }: { trade: StrategyBacktestTrade; side: 'buy' | 'sell' }) {
|
|
const isBuy = side === 'buy'
|
|
const date = String(isBuy ? trade.entry_date : trade.exit_date).slice(0, 10)
|
|
const signalDate = String(isBuy ? trade.entry_signal_date ?? '' : trade.exit_signal_date ?? '').slice(0, 10)
|
|
const price = isBuy ? trade.entry_price : trade.exit_price
|
|
const amount = isBuy ? trade.entry_value : trade.exit_value
|
|
|
|
return (
|
|
<div className="min-w-[8.25rem] rounded-btn border border-border/60 bg-base/35 px-2 py-1 text-xs leading-4">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="font-mono text-secondary">{date}</span>
|
|
<span className={`rounded px-1.5 py-px text-[10px] font-medium ${
|
|
isBuy ? 'bg-accent/15 text-accent' : 'bg-elevated text-secondary'
|
|
}`}>
|
|
{isBuy ? '买' : '卖'}
|
|
</span>
|
|
</div>
|
|
<div className="mt-0.5 flex items-center justify-between gap-2">
|
|
<span className="num text-foreground">{fmtPrice(price)}</span>
|
|
<span className="num font-medium text-foreground">{fmtMoney(amount)}</span>
|
|
</div>
|
|
{signalDate && signalDate !== date && (
|
|
<div className="mt-0.5 text-[10px] text-muted">信号 {signalDate}</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function fmtDuration(ms: number): string {
|
|
const s = ms / 1000
|
|
if (s < 1) return `${ms.toFixed(0)}ms`
|
|
if (s < 60) return `${s.toFixed(1)}秒`
|
|
const m = Math.floor(s / 60)
|
|
const rest = Math.round(s % 60)
|
|
return `${m}分${rest}秒`
|
|
}
|
|
|
|
function SharpeLabel() {
|
|
const [open, setOpen] = useState(false)
|
|
const [alignRight, setAlignRight] = useState(false)
|
|
const ref = useRef<HTMLSpanElement>(null)
|
|
useEffect(() => {
|
|
if (!open) return
|
|
const onClick = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
|
|
}
|
|
document.addEventListener('mousedown', onClick)
|
|
return () => document.removeEventListener('mousedown', onClick)
|
|
}, [open])
|
|
const toggle = () => {
|
|
if (!open && ref.current) {
|
|
const rect = ref.current.getBoundingClientRect()
|
|
setAlignRight(rect.left + 240 > window.innerWidth)
|
|
}
|
|
setOpen(o => !o)
|
|
}
|
|
return (
|
|
<span className="relative inline-flex items-center gap-1" ref={ref}>
|
|
夏普
|
|
<button
|
|
type="button"
|
|
onClick={toggle}
|
|
className="inline-flex h-3.5 w-3.5 items-center justify-center rounded-full border border-border bg-base text-[10px] text-muted transition-colors hover:border-accent/50 hover:text-accent"
|
|
>
|
|
?
|
|
</button>
|
|
{open && (
|
|
<span className={`absolute top-full z-50 mt-1.5 w-60 max-w-[calc(100vw-1.5rem)] rounded-lg border border-border bg-elevated px-3 py-2.5 text-[11px] leading-relaxed text-secondary shadow-xl ${alignRight ? 'right-0' : 'left-0'}`}>
|
|
<span className="block font-medium text-foreground">夏普比率 (Sharpe Ratio)</span>
|
|
<span className="mt-1 block">衡量<b className="text-foreground">单位波动风险</b>换来的超额收益。</span>
|
|
<span className="mt-0.5 block">数值越高，收益相对波动越优秀；</span>
|
|
<span className="mt-0.5 block text-warning">短周期或交易次数少时容易偏高，仅供参考。</span>
|
|
</span>
|
|
)}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function Stat({ label, value, color }: { label: ReactNode; value: string; color?: string }) {
|
|
return (
|
|
<div className="min-w-0 rounded-btn border border-border/70 bg-elevated/70 px-3 py-2">
|
|
<div className="text-[11px] text-secondary">{label}</div>
|
|
<div
|
|
className="mt-1 break-words text-sm font-mono font-semibold leading-tight tracking-tight num xl:text-base"
|
|
style={{ color: color ?? '#f8fafc' }}
|
|
title={value}
|
|
>
|
|
{value}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ConfigSection({ title, hint, actions, children }: { title: string; hint?: ReactNode; actions?: ReactNode; children: ReactNode }) {
|
|
return (
|
|
<div className="rounded-btn border border-border bg-surface/70 p-3">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="text-xs font-medium text-foreground">
|
|
{title}
|
|
{hint && <span className="ml-1 text-[10px] font-normal text-muted">{hint}</span>}
|
|
</div>
|
|
{actions && <div className="flex shrink-0 items-center gap-1">{actions}</div>}
|
|
</div>
|
|
<div className="mt-3 space-y-2">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
const scoringToPct = (values: Record<string, number>) => {
|
|
const total = Object.values(values).reduce((a, b) => a + Math.max(0, Number(b) || 0), 0)
|
|
if (total <= 0) return Object.fromEntries(Object.keys(values).map(k => [k, 0])) as Record<string, number>
|
|
return Object.fromEntries(Object.entries(values).map(([k, v]) => [k, Math.round((Math.max(0, Number(v) || 0) / total) * 100)])) as Record<string, number>
|
|
}
|
|
|
|
const normalizePctWeights = (values: Record<string, number>) => {
|
|
const total = Object.values(values).reduce((a, b) => a + Math.max(0, Number(b) || 0), 0)
|
|
if (total <= 0) return Object.fromEntries(Object.keys(values).map(k => [k, 0])) as Record<string, number>
|
|
return Object.fromEntries(Object.entries(values).map(([k, v]) => [k, +(Math.max(0, Number(v) || 0) / total).toFixed(4)])) as Record<string, number>
|
|
}
|
|
|
|
function ScoringWeightRow({ name, weight, pct, editing, onChange }: {
|
|
name: string
|
|
weight: number
|
|
pct: number
|
|
editing: boolean
|
|
onChange: (value: number) => void
|
|
}) {
|
|
const label = FIELD_LABEL[name] ?? name
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-20 shrink-0 truncate text-right text-[11px] text-secondary" title={name}>{label}</span>
|
|
{editing ? (
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={100}
|
|
step={1}
|
|
value={weight}
|
|
onChange={e => onChange(Number(e.target.value))}
|
|
className="h-1 flex-1 cursor-pointer accent-amber-400"
|
|
/>
|
|
) : (
|
|
<div className="h-1.5 flex-1 overflow-hidden rounded-full bg-elevated">
|
|
<div className="h-full rounded-full bg-amber-400/70 transition-all duration-300" style={{ width: `${Math.min(pct, 100)}%` }} />
|
|
</div>
|
|
)}
|
|
<span className="w-10 text-right font-mono text-[10px] text-muted">{editing ? weight : `${pct}%`}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StrategyParamInput({ param, value, onChange }: {
|
|
param: StrategyParamDef
|
|
value: any
|
|
onChange: (value: any) => void
|
|
}) {
|
|
if (param.type === 'bool') {
|
|
const checked = value === true || value === 'true' || value === 'True' || value === true
|
|
return (
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">{param.label}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange(!checked)}
|
|
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-200 cursor-pointer ${
|
|
checked ? 'bg-accent shadow-[0_0_6px_rgba(59,130,246,0.3)]' : 'bg-elevated'
|
|
}`}
|
|
aria-pressed={checked}
|
|
>
|
|
<span className={`inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 ${
|
|
checked ? 'translate-x-[18px]' : 'translate-x-0.5'
|
|
}`} />
|
|
</button>
|
|
</label>
|
|
)
|
|
}
|
|
if (param.type === 'select') {
|
|
return (
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">{param.label}</span>
|
|
<select value={value ?? param.default} onChange={e => onChange(e.target.value)} className={INPUT_CLS}>
|
|
{(param.options ?? []).map(opt => <option key={opt} value={opt}>{opt}</option>)}
|
|
</select>
|
|
</label>
|
|
)
|
|
}
|
|
return (
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">{param.label}</span>
|
|
<input
|
|
type="number"
|
|
value={value ?? ''}
|
|
min={param.min}
|
|
max={param.max}
|
|
step={param.step ?? (param.type === 'int' ? 1 : 0.01)}
|
|
onChange={e => {
|
|
const n = numOrNull(e.target.value)
|
|
if (n == null) return onChange('')
|
|
const next = clamp(n, param.min, param.max)
|
|
onChange(param.type === 'int' ? Math.round(next) : next)
|
|
}}
|
|
className={INPUT_CLS}
|
|
/>
|
|
</label>
|
|
)
|
|
}
|
|
|
|
function StockPoolPicker({ value, onChange }: { value: string; onChange: (value: string) => void }) {
|
|
const symbols = useMemo(() => value.split(',').map(s => s.trim()).filter(Boolean), [value])
|
|
const [query, setQuery] = useState('')
|
|
const [open, setOpen] = useState(false)
|
|
const [symbolNames, setSymbolNames] = useState<Record<string, string>>({})
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const search = useQuery({
|
|
queryKey: QK.instrumentSearch(query),
|
|
queryFn: () => api.instrumentSearch(query),
|
|
enabled: query.trim().length > 0,
|
|
staleTime: 30_000,
|
|
})
|
|
const results = search.data?.results ?? []
|
|
|
|
useEffect(() => {
|
|
if (results.length === 0) return
|
|
setSymbolNames(prev => {
|
|
const next = { ...prev }
|
|
results.forEach(r => {
|
|
if (r.name) next[r.symbol] = r.name
|
|
})
|
|
return next
|
|
})
|
|
}, [results])
|
|
|
|
useEffect(() => {
|
|
const onClick = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
|
|
}
|
|
document.addEventListener('mousedown', onClick)
|
|
return () => document.removeEventListener('mousedown', onClick)
|
|
}, [])
|
|
|
|
const setSymbols = (next: string[]) => onChange(Array.from(new Set(next)).join(','))
|
|
const addSymbol = (symbol: string, name?: string | null) => {
|
|
if (name) setSymbolNames(prev => ({ ...prev, [symbol]: name }))
|
|
setSymbols([...symbols, symbol])
|
|
setQuery('')
|
|
setOpen(false)
|
|
}
|
|
const removeSymbol = (symbol: string) => setSymbols(symbols.filter(s => s !== symbol))
|
|
|
|
return (
|
|
<div className="space-y-2" ref={ref}>
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted" />
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={e => { setQuery(e.target.value); setOpen(true) }}
|
|
onFocus={() => { if (query.trim()) setOpen(true) }}
|
|
placeholder="搜索股票名称/代码添加股票池"
|
|
className="w-full rounded-input border border-border bg-surface py-1.5 pl-8 pr-2.5 text-xs focus:border-accent focus:outline-none"
|
|
/>
|
|
{open && results.length > 0 && (
|
|
<div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-56 overflow-y-auto rounded-card border border-border bg-base shadow-xl">
|
|
{results.map(r => {
|
|
const added = symbols.includes(r.symbol)
|
|
return (
|
|
<button
|
|
key={r.symbol}
|
|
type="button"
|
|
disabled={added}
|
|
onClick={() => addSymbol(r.symbol, r.name)}
|
|
className={`flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors ${added ? 'cursor-default text-muted' : 'text-foreground hover:bg-elevated'}`}
|
|
>
|
|
<span className="w-[78px] shrink-0 font-mono">{r.symbol}</span>
|
|
<span className="min-w-0 flex-1 truncate text-secondary">{r.name}</span>
|
|
<Plus className={`h-3.5 w-3.5 ${added ? 'opacity-30' : 'text-accent'}`} />
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{symbols.length === 0 ? (
|
|
<span className="text-[11px] font-medium text-amber-400">留空 = 全市场，由基础过滤和策略条件筛选。</span>
|
|
) : symbols.map(symbol => {
|
|
const name = symbolNames[symbol]
|
|
return (
|
|
<span key={symbol} className="inline-flex items-center gap-1 rounded-btn border border-accent/30 bg-accent/10 px-2 py-1 text-[10px] text-accent">
|
|
<span className="font-mono">{symbol}</span>
|
|
{name && <span className="max-w-[7rem] truncate text-accent/80">{name}</span>}
|
|
<button type="button" onClick={() => removeSymbol(symbol)} className="text-accent/70 hover:text-accent">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</span>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function StrategyBacktest() {
|
|
const [saved] = useState(() => storage.strategyBacktestLast.get(null))
|
|
const [selectedStrategy, setSelectedStrategy] = useState<string | null>(saved?.selectedStrategy ?? null)
|
|
const [strategyGroup, setStrategyGroup] = useState<StrategyGroup>('all')
|
|
const [symbols, setSymbols] = useState(saved?.symbols ?? '')
|
|
const [start, setStart] = useState(saved?.start ?? THREE_MONTHS_AGO)
|
|
const [end, setEnd] = useState(saved?.end ?? TODAY)
|
|
// 成交口径: 建仓/清仓可独立配置。向后兼容老 matching (派生为 entry=exit=matching)。
|
|
const [matching] = useState<'close_t' | 'open_t+1'>(saved?.matching ?? 'open_t+1')
|
|
const [entryFill, setEntryFill] = useState<'close_t' | 'open_t+1'>(saved?.entryFill ?? saved?.matching ?? 'open_t+1')
|
|
const [exitFill, setExitFill] = useState<'close_t' | 'open_t+1'>(saved?.exitFill ?? saved?.matching ?? 'close_t')
|
|
const [fees, setFees] = useState(saved?.fees ?? '2')
|
|
const [maxPositions, setMaxPositions] = useState(saved?.maxPositions ?? '10')
|
|
const [maxExposure, setMaxExposure] = useState(saved?.maxExposure ?? '100')
|
|
const [initialCapital, setInitialCapital] = useState(saved?.initialCapital ?? '1000000')
|
|
const [positionSizing, setPositionSizing] = useState<'equal' | 'score_weight'>(saved?.positionSizing ?? 'equal')
|
|
const [simMode, setSimMode] = useState<'position' | 'full'>(saved?.mode ?? 'position')
|
|
const [holdingDays, setHoldingDays] = useState(saved?.holdingDays ?? '5')
|
|
const [settingsOpen, setSettingsOpen] = useState(false)
|
|
// 高颗粒回测（分钟K精确回测）— 开发中，Starter+ 功能
|
|
const [highGranularity, setHighGranularity] = useState(false)
|
|
const { data: caps } = useCapabilities()
|
|
const isFreeTier = tierRank(caps?.label ?? '') < 1
|
|
const [rangeSettingsOpen, setRangeSettingsOpen] = useState(false)
|
|
const [quickRanges, setQuickRanges] = useState(loadQuickRanges)
|
|
const [settingsTab, setSettingsTab] = useState<AdvancedSettingsTab>('params')
|
|
const [editingScoring, setEditingScoring] = useState(false)
|
|
const [scoringDraft, setScoringDraft] = useState<Record<string, number>>({})
|
|
const [strategyParams, setStrategyParams] = useState<Record<string, any>>(saved?.params ?? {})
|
|
const [overrides, setOverrides] = useState<Record<string, any>>(saved?.overrides ?? {})
|
|
// result 不从 localStorage 恢复:它是运行产物(净值/交易),大且易过时,
|
|
// 跨会话/拉新代码后自动渲染一个可能对应已失效策略的旧结果会造成困惑
|
|
// (切页不卸载组件,内存中的 result 仍保留,无需靠 localStorage 恢复)。
|
|
const [result, setResult] = useState<StrategyBacktestResult | null>(null)
|
|
const [resultTab, setResultTab] = useState<'daily' | 'trades' | 'picks'>('daily')
|
|
const [dailyPage, setDailyPage] = useState(0)
|
|
const [tradePage, setTradePage] = useState(0)
|
|
const [tradePageSize, setTradePageSize] = useState(10)
|
|
const [selectedTrade, setSelectedTrade] = useState<StrategyBacktestTrade | null>(null)
|
|
const loadedStrategyRef = useRef<string | null>(null)
|
|
|
|
const strategies = useQuery({
|
|
queryKey: QK.screenerStrategies,
|
|
queryFn: api.screenerStrategies,
|
|
})
|
|
|
|
const strategyList = useMemo(() => strategies.data?.presets ?? [], [strategies.data])
|
|
const filteredStrategyList = useMemo(() => (
|
|
strategyGroup === 'all' ? strategyList : strategyList.filter(st => st.source === strategyGroup)
|
|
), [strategyGroup, strategyList])
|
|
|
|
// 校验 localStorage 里保存的上次选中策略是否仍存在(本地开发残留的自定义策略
|
|
// 拉新代码后会失效,导致 strategyGet 一直 404/加载中)。列表就绪后若失效,
|
|
// 连带清除其专属的 params/overrides/result(这些是该策略的运行配置/产物,
|
|
// 策略失效后留着会造成"孤儿"状态:界面显示旧回测结果却无对应策略)。
|
|
useEffect(() => {
|
|
if (strategies.isLoading || strategyList.length === 0) return
|
|
if (selectedStrategy && !strategyList.some(st => st.id === selectedStrategy)) {
|
|
setSelectedStrategy(null)
|
|
setStrategyParams({})
|
|
setOverrides({})
|
|
setResult(null)
|
|
}
|
|
}, [strategies.isLoading, strategyList, selectedStrategy])
|
|
|
|
const strategyDetail = useQuery({
|
|
queryKey: ['strategy-detail', selectedStrategy],
|
|
queryFn: () => api.strategyGet(selectedStrategy!),
|
|
enabled: !!selectedStrategy,
|
|
})
|
|
|
|
const backtestTask = useBacktestTask()
|
|
const isPending = backtestTask?.isPending ?? false
|
|
|
|
const dataStatus = useDataStatus()
|
|
const earliestDate = dataStatus.data?.daily?.earliest_date ?? null
|
|
|
|
const resetConfigFromDetail = (detail: StrategyDetail) => {
|
|
setStrategyParams(strategyDefaultParams(detail))
|
|
setOverrides(buildDefaultOverrides(detail))
|
|
}
|
|
|
|
// 刷新页面后: 从 localStorage 恢复未完成的回测任务
|
|
useEffect(() => {
|
|
tryReconnect()
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const detail = strategyDetail.data
|
|
if (!detail || loadedStrategyRef.current === detail.id) return
|
|
loadedStrategyRef.current = detail.id
|
|
if (saved?.selectedStrategy === detail.id && (saved.params || saved.overrides)) {
|
|
setStrategyParams(saved.params ?? strategyDefaultParams(detail))
|
|
setOverrides(saved.overrides ?? buildDefaultOverrides(detail))
|
|
return
|
|
}
|
|
resetConfigFromDetail(detail)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [strategyDetail.data])
|
|
|
|
// 当全局回测任务完成时, 把结果写入组件 (切页回来也能恢复)
|
|
useEffect(() => {
|
|
if (backtestTask && !backtestTask.isPending && backtestTask.result) {
|
|
setResult(backtestTask.result)
|
|
setResultTab('daily')
|
|
setDailyPage(0)
|
|
setTradePage(0)
|
|
storage.strategyBacktestLast.set({
|
|
selectedStrategy,
|
|
symbols,
|
|
start,
|
|
end,
|
|
matching,
|
|
entryFill,
|
|
exitFill,
|
|
fees,
|
|
maxPositions,
|
|
maxExposure,
|
|
initialCapital,
|
|
positionSizing,
|
|
mode: simMode,
|
|
holdingDays,
|
|
params: strategyParams,
|
|
overrides,
|
|
result: backtestTask.result,
|
|
})
|
|
}
|
|
}, [backtestTask])
|
|
|
|
const handleRun = () => {
|
|
if (!selectedStrategy) return
|
|
startBacktest({
|
|
strategy_id: selectedStrategy,
|
|
symbols: symbols ? symbols.split(',').map(s => s.trim()).filter(Boolean) : null,
|
|
start: start || null,
|
|
end: end || undefined,
|
|
matching,
|
|
entry_fill: entryFill,
|
|
exit_fill: exitFill,
|
|
fees_pct: Number(fees) / 10000,
|
|
max_positions: Number(maxPositions),
|
|
max_exposure_pct: Number(maxExposure) / 100,
|
|
initial_capital: Number(initialCapital),
|
|
position_sizing: positionSizing,
|
|
params: strategyParams,
|
|
overrides,
|
|
mode: simMode,
|
|
holding_days: Number(holdingDays) || 5,
|
|
})
|
|
}
|
|
|
|
// 提取统计
|
|
const s = result?.stats
|
|
const pick = (...keys: string[]) => {
|
|
for (const k of keys) {
|
|
if (s && k in s && s[k] != null) return s[k]
|
|
}
|
|
return null
|
|
}
|
|
|
|
const benchmarkReturn = useMemo(() => {
|
|
const values = (result?.benchmark_curve ?? [])
|
|
.map(r => Number(r.close ?? r.value))
|
|
.filter(v => Number.isFinite(v) && v > 0)
|
|
if (values.length < 2) return null
|
|
return values[values.length - 1] / values[0] - 1
|
|
}, [result?.benchmark_curve])
|
|
|
|
const strategyReturn = pick('total_return') as number | null
|
|
const excessReturn = strategyReturn != null && benchmarkReturn != null
|
|
? strategyReturn - benchmarkReturn
|
|
: null
|
|
|
|
const applyRange = (months: number) => {
|
|
setStart(monthsAgo(months))
|
|
setEnd(formatDate(new Date()))
|
|
}
|
|
|
|
const applyAllRange = () => {
|
|
setStart(earliestDate ?? '')
|
|
setEnd(formatDate(new Date()))
|
|
}
|
|
|
|
// 进入页面/还在加载时就点了"全部": earliestDate 就绪后回填, 让 DatePicker 显示真实起始日
|
|
useEffect(() => {
|
|
if (earliestDate && start === '' && end === TODAY) {
|
|
setStart(earliestDate)
|
|
}
|
|
}, [earliestDate, start, end])
|
|
|
|
const applyQuickRange = (range: QuickRangeConfig) => {
|
|
if (range.unit === 'all') {
|
|
applyAllRange()
|
|
return
|
|
}
|
|
applyRange(quickRangeMonths(range))
|
|
}
|
|
|
|
const saveQuickRanges = (next: QuickRangeConfig[]) => {
|
|
const normalized = normalizeQuickRanges(next)
|
|
storage.strategyBacktestQuickRanges.set(normalized)
|
|
return normalized
|
|
}
|
|
|
|
const updateQuickRange = (id: string, patch: Partial<Pick<QuickRangeConfig, 'enabled' | 'unit' | 'value'>>) => {
|
|
setQuickRanges(prev => {
|
|
const current = prev.find(range => range.id === id)
|
|
if (patch.enabled === false && current?.enabled && prev.filter(range => range.enabled).length <= 1) return prev
|
|
return saveQuickRanges(prev.map(range => range.id === id
|
|
? normalizeQuickRange({ ...range, ...patch }, range)
|
|
: range
|
|
))
|
|
})
|
|
}
|
|
|
|
const visibleQuickRanges = quickRanges.filter(range => range.enabled)
|
|
const matchedQuickRange = visibleQuickRanges.find(range => range.unit === 'all'
|
|
? end === TODAY && (start === earliestDate || start === '')
|
|
: end === TODAY && start === monthsAgo(quickRangeMonths(range))
|
|
)
|
|
const rangeKey = matchedQuickRange?.id ?? 'custom'
|
|
const rangeTitle = matchedQuickRange ? quickRangeTitle(matchedQuickRange) : '自定义区间'
|
|
const rangeButtonCls = (key: string) => `rounded-btn px-2 py-1 text-[11px] font-medium transition-colors ${rangeKey === key
|
|
? 'bg-accent/15 text-accent'
|
|
: 'text-muted hover:bg-elevated/70 hover:text-secondary'
|
|
}`
|
|
|
|
const sortedTrades = useMemo(() => {
|
|
return [...(result?.trades ?? [])].sort((a, b) => {
|
|
const exitCmp = String(b.exit_date).localeCompare(String(a.exit_date))
|
|
if (exitCmp !== 0) return exitCmp
|
|
return String(b.entry_date).localeCompare(String(a.entry_date))
|
|
})
|
|
}, [result?.trades])
|
|
|
|
const dailyTradeRows = useMemo<DailyTradeRow[]>(() => {
|
|
const rows = new Map<string, Omit<DailyTradeRow, 'cumulativePnl'>>()
|
|
const ensure = (date: string) => {
|
|
if (!rows.has(date)) {
|
|
rows.set(date, { date, buys: [], sells: [], buyValue: 0, sellValue: 0, realizedPnl: 0 })
|
|
}
|
|
return rows.get(date)!
|
|
}
|
|
|
|
for (const t of result?.trades ?? []) {
|
|
const entryDate = String(t.entry_date).slice(0, 10)
|
|
const exitDate = String(t.exit_date).slice(0, 10)
|
|
const buyRow = ensure(entryDate)
|
|
buyRow.buys.push(t)
|
|
buyRow.buyValue += Number(t.entry_value ?? 0)
|
|
|
|
const sellRow = ensure(exitDate)
|
|
sellRow.sells.push(t)
|
|
sellRow.sellValue += Number(t.exit_value ?? 0)
|
|
sellRow.realizedPnl += Number(t.pnl_amount ?? 0)
|
|
}
|
|
|
|
let cumulativePnl = 0
|
|
return [...rows.values()]
|
|
.sort((a, b) => a.date.localeCompare(b.date))
|
|
.map(row => {
|
|
cumulativePnl += row.realizedPnl
|
|
return { ...row, cumulativePnl }
|
|
})
|
|
.reverse()
|
|
}, [result?.trades])
|
|
|
|
const tradePageCount = sortedTrades.length
|
|
? Math.ceil(sortedTrades.length / tradePageSize)
|
|
: 0
|
|
const dailyPageSize = 10
|
|
const dailyPageCount = dailyTradeRows.length
|
|
? Math.ceil(dailyTradeRows.length / dailyPageSize)
|
|
: 0
|
|
const safeDailyPage = Math.min(dailyPage, Math.max(dailyPageCount - 1, 0))
|
|
const dailyStart = safeDailyPage * dailyPageSize
|
|
const visibleDailyRows = dailyTradeRows.slice(dailyStart, dailyStart + dailyPageSize)
|
|
const dailyEnd = Math.min(dailyStart + visibleDailyRows.length, dailyTradeRows.length)
|
|
const safeTradePage = Math.min(tradePage, Math.max(tradePageCount - 1, 0))
|
|
const tradeStart = safeTradePage * tradePageSize
|
|
const visibleTrades = sortedTrades.slice(tradeStart, tradeStart + tradePageSize)
|
|
const tradeEnd = Math.min(tradeStart + visibleTrades.length, sortedTrades.length)
|
|
const symbolNames = useMemo(() => {
|
|
const names: Record<string, string> = {}
|
|
result?.trades.forEach(t => {
|
|
if (t.name) names[t.symbol] = t.name
|
|
})
|
|
return names
|
|
}, [result?.trades])
|
|
|
|
const detail = strategyDetail.data
|
|
const basicFilter = (overrides.basic_filter ?? {}) as Record<string, any>
|
|
const entrySignals = (overrides.entry_signals ?? []) as string[]
|
|
const exitSignals = (overrides.exit_signals ?? []) as string[]
|
|
|
|
const scoring = useMemo(() => (overrides.scoring ?? {}) as Record<string, number>, [overrides.scoring])
|
|
const scoreMinValue = overrides.score_min == null ? '' : String(overrides.score_min)
|
|
const scoreMaxValue = overrides.score_max == null ? '' : String(overrides.score_max)
|
|
const stopLossPct = overrides.stop_loss == null ? '' : String(Math.abs(Number(overrides.stop_loss)) * 100)
|
|
const trailingStopPct = overrides.trailing_stop == null ? '' : String(Math.abs(Number(overrides.trailing_stop)) * 100)
|
|
const trailingTakeProfitActivatePct = overrides.trailing_take_profit_activate == null ? '' : String(Math.abs(Number(overrides.trailing_take_profit_activate)) * 100)
|
|
const trailingTakeProfitDrawdownPct = overrides.trailing_take_profit_drawdown == null ? '' : String(Math.abs(Number(overrides.trailing_take_profit_drawdown)) * 100)
|
|
const maxHoldDaysValue = overrides.max_hold_days == null ? '' : String(overrides.max_hold_days)
|
|
const targetPositionPct = Number(maxPositions) > 0 ? Number(maxExposure) / Number(maxPositions) : 0
|
|
|
|
useEffect(() => {
|
|
if (!editingScoring) setScoringDraft(scoringToPct(scoring))
|
|
}, [scoring, editingScoring])
|
|
|
|
const updateOverride = (key: string, value: any) => {
|
|
setOverrides(prev => ({ ...prev, [key]: value }))
|
|
}
|
|
const updateBasicFilter = (key: string, value: any) => {
|
|
updateOverride('basic_filter', { ...basicFilter, [key]: value })
|
|
}
|
|
const startScoringEdit = () => {
|
|
setScoringDraft(scoringToPct(scoring))
|
|
setEditingScoring(true)
|
|
}
|
|
const cancelScoringEdit = () => {
|
|
setScoringDraft(scoringToPct(scoring))
|
|
setEditingScoring(false)
|
|
}
|
|
const saveScoringDraft = () => {
|
|
updateOverride('scoring', normalizePctWeights(scoringDraft))
|
|
setEditingScoring(false)
|
|
}
|
|
const scoreFilterSummary = scoreMinValue !== '' && scoreMaxValue !== ''
|
|
? `评分 ${scoreMinValue}~${scoreMaxValue}`
|
|
: scoreMinValue !== ''
|
|
? `评分 ≥${scoreMinValue}`
|
|
: scoreMaxValue !== ''
|
|
? `评分 ≤${scoreMaxValue}`
|
|
: '评分不过滤'
|
|
const advancedSummary = detail
|
|
? [
|
|
detail.params.length > 0 ? `参数 ${detail.params.length}` : '无策略参数',
|
|
basicFilter.enabled !== false ? '过滤开' : '过滤关',
|
|
`买点 ${entrySignals.length}`,
|
|
`卖点 ${exitSignals.length}`,
|
|
scoreFilterSummary,
|
|
stopLossPct !== '' ? `止损 ${stopLossPct}%` : '止损未设',
|
|
trailingStopPct !== '' ? `移损 ${trailingStopPct}%` : '移损未设',
|
|
trailingTakeProfitActivatePct !== '' && trailingTakeProfitDrawdownPct !== '' ? `回撤 ${trailingTakeProfitActivatePct}-${trailingTakeProfitDrawdownPct}点` : '回撤未设',
|
|
maxHoldDaysValue !== '' ? `最长 ${maxHoldDaysValue}天` : '不限持仓',
|
|
].join(' · ')
|
|
: '选择策略后可调整参数 / 过滤 / 买卖触发器 / 评分 / 风控'
|
|
const selectedStrategyName = detail?.name ?? strategyList.find(st => st.id === selectedStrategy)?.name ?? '未选择策略'
|
|
const selectedStrategySource = detail?.source ?? strategyList.find(st => st.id === selectedStrategy)?.source
|
|
const stockPoolCount = symbols.split(',').map(s => s.trim()).filter(Boolean).length
|
|
const stockPoolSummary = stockPoolCount > 0 ? `股票池 已限定 ${stockPoolCount} 只` : '股票池 全市场'
|
|
const resultStartDate = result?.config?.start ?? result?.equity_curve?.[0]?.date ?? start
|
|
const resultEndDate = result?.config?.end ?? result?.equity_curve?.[result.equity_curve.length - 1]?.date ?? end
|
|
const resultTradeDays = result?.equity_curve?.length ?? 0
|
|
const executionStats = (result?.stats?.execution ?? {}) as Record<string, number>
|
|
const executionSummary = [
|
|
['buy_no_slot', '满仓未买'],
|
|
['buy_exposure', '仓位上限'],
|
|
['buy_score_filter', '评分过滤'],
|
|
['buy_limit_up', '涨停未买'],
|
|
['buy_suspended', '停牌未买'],
|
|
['sell_limit_down', '跌停阻塞'],
|
|
['sell_suspended', '停牌阻塞'],
|
|
['pending_exit', '待卖阻塞'],
|
|
]
|
|
.map(([key, label]) => ({ key, label, value: Number(executionStats[key] ?? 0) }))
|
|
.filter(item => item.value > 0)
|
|
|
|
return (
|
|
<div className="h-full min-h-0 overflow-hidden rounded-card border border-border bg-surface/80 grid grid-cols-1 xl:grid-cols-[18rem_minmax(0,1fr)]">
|
|
{/* 配置面板 */}
|
|
<section className="space-y-3 border-b xl:border-b-0 xl:border-r border-border bg-base/25 px-3 py-3 xl:overflow-y-auto">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-1.5">
|
|
<label className="text-xs font-medium text-secondary">选择策略</label>
|
|
{/* 高颗粒回测（分钟K）— 开发中占位 */}
|
|
<div className="flex items-center gap-1">
|
|
<Gauge className={`h-3 w-3 ${highGranularity ? 'text-amber-400' : 'text-muted/50'}`} />
|
|
<button
|
|
onClick={() => {
|
|
if (isFreeTier) return
|
|
// 功能开发中，暂不实际启用
|
|
setHighGranularity(v => !v)
|
|
}}
|
|
disabled={isFreeTier}
|
|
title={isFreeTier
|
|
? '高颗粒回测（分钟K精确回测）：需 Starter+ 档位'
|
|
: '高颗粒回测（分钟K精确回测）：切换后结合每日分钟K更精确回测。⚠️ 开发中，且会显著影响性能、回测很慢。'
|
|
}
|
|
className={`group relative inline-flex h-3.5 w-6 items-center rounded-full shrink-0 transition-colors duration-200 ${
|
|
isFreeTier ? 'bg-elevated opacity-50 cursor-not-allowed'
|
|
: highGranularity ? 'bg-amber-500 cursor-pointer'
|
|
: 'bg-elevated cursor-pointer'
|
|
}`}
|
|
>
|
|
<span className={`inline-block h-2.5 w-2.5 rounded-full bg-white shadow-sm transition-transform duration-200 ${
|
|
highGranularity ? 'translate-x-[13px]' : 'translate-x-0.5'
|
|
}`} />
|
|
</button>
|
|
<span className={`text-[9px] font-medium ${highGranularity ? 'text-amber-400' : 'text-muted/50'}`}>分钟K</span>
|
|
{isFreeTier && (
|
|
<span className="text-[8px] text-accent/70 font-medium bg-accent/10 px-1 py-px rounded">Starter+</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{/* 高颗粒开启时的警告条 */}
|
|
{highGranularity && !isFreeTier && (
|
|
<div className="mb-2 flex items-start gap-1.5 rounded-btn border border-amber-400/30 bg-amber-400/5 px-2 py-1.5">
|
|
<Zap className="h-3 w-3 text-amber-400 shrink-0 mt-px" />
|
|
<div className="text-[10px] leading-snug text-amber-400/90">
|
|
<span className="font-medium">高颗粒回测（开发中）</span>
|
|
：将结合每日分钟K进行更精确的回测。
|
|
<span className="text-amber-400/70"> ⚠️ 此功能尚未完成，且开启后会显著拖慢回测速度、占用大量资源。</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="overflow-hidden rounded-input border border-border bg-surface">
|
|
<div className="flex border-b border-border/60 bg-base/30 p-0.5">
|
|
{STRATEGY_GROUPS.map(group => (
|
|
<button
|
|
key={group.id}
|
|
type="button"
|
|
onClick={() => setStrategyGroup(group.id)}
|
|
className={`flex-1 rounded-[6px] px-1.5 py-1 text-[10px] font-medium transition-colors ${strategyGroup === group.id
|
|
? 'bg-accent/15 text-accent shadow-sm'
|
|
: 'text-muted hover:bg-elevated/70 hover:text-secondary'
|
|
}`}
|
|
>
|
|
{group.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex max-h-[128px] flex-wrap gap-1 overflow-y-auto p-1">
|
|
{strategies.isLoading && (
|
|
<span className="text-xs text-muted px-2 py-1">加载中…</span>
|
|
)}
|
|
{!strategies.isLoading && filteredStrategyList.length === 0 && (
|
|
<span className="text-xs text-muted px-2 py-1">当前分组暂无策略</span>
|
|
)}
|
|
{filteredStrategyList.map(st => (
|
|
<button
|
|
key={st.id}
|
|
onClick={() => setSelectedStrategy(st.id)}
|
|
className={`px-2 py-1 rounded-btn text-[11px] border transition-all duration-150 ease-smooth cursor-pointer
|
|
${selectedStrategy === st.id
|
|
? 'border-accent/50 bg-accent/10 text-accent shadow-[0_0_10px_rgba(59,130,246,0.1)]'
|
|
: 'border-border bg-base text-secondary hover:border-accent/40'
|
|
}`}
|
|
>
|
|
<span className="font-medium">{st.name}</span>
|
|
{st.source && st.source !== 'builtin' && (
|
|
<span className={`ml-1 text-[8px] px-1 py-px rounded border ${BADGE_CLS_MAP[st.source] ?? ''}`}>
|
|
{SRC_MAP[st.source] ?? ''}
|
|
</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedStrategy && strategyDetail.isLoading && (
|
|
<div className="rounded-btn border border-border bg-surface px-2.5 py-2 text-xs text-muted">加载策略配置…</div>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => detail && setSettingsOpen(true)}
|
|
disabled={!detail || strategyDetail.isLoading}
|
|
className="group w-full rounded-btn border border-border bg-surface px-3 py-2.5 text-left transition-colors hover:border-accent/40 hover:bg-elevated/70 disabled:cursor-not-allowed disabled:opacity-55"
|
|
>
|
|
<span className="flex items-center gap-2 text-xs font-semibold text-foreground">
|
|
<SlidersHorizontal className="h-3.5 w-3.5 text-accent" />
|
|
策略设置
|
|
<span className="ml-auto text-[10px] font-normal text-muted group-hover:text-accent">编辑</span>
|
|
</span>
|
|
<span className="mt-1 flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-secondary">
|
|
<span className="truncate">{selectedStrategyName}</span>
|
|
{selectedStrategySource && (
|
|
<span className={`shrink-0 text-[8px] px-1 py-px rounded border ${BADGE_CLS_MAP[selectedStrategySource] ?? ''}`}>
|
|
{SRC_MAP[selectedStrategySource] ?? selectedStrategySource}
|
|
</span>
|
|
)}
|
|
</span>
|
|
<span className="mt-1 block text-[10px] font-medium text-secondary">{stockPoolSummary}</span>
|
|
<span className="mt-1 block text-[10px] leading-4 text-muted">{advancedSummary}</span>
|
|
</button>
|
|
|
|
<div className="rounded-btn border border-border bg-surface p-2.5">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="text-xs font-medium text-foreground">回测区间</div>
|
|
<span className="shrink-0 rounded-full border border-accent/25 bg-accent/10 px-2 py-0.5 text-[10px] font-medium text-accent">
|
|
{rangeTitle}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-2 grid grid-cols-2 gap-2">
|
|
<div>
|
|
<label className="text-[11px] text-secondary block mb-1">开始</label>
|
|
<DatePicker
|
|
value={start}
|
|
onChange={setStart}
|
|
max={end || undefined}
|
|
placeholder="全部历史"
|
|
className="w-full"
|
|
buttonClassName="w-full justify-start"
|
|
align="left"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[11px] text-secondary block mb-1">结束</label>
|
|
<DatePicker
|
|
value={end}
|
|
onChange={setEnd}
|
|
min={start || undefined}
|
|
className="w-full"
|
|
buttonClassName="w-full justify-start"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-2 flex items-center gap-1">
|
|
<div className="flex min-w-0 flex-1 rounded-input bg-base/60 p-0.5">
|
|
{visibleQuickRanges.map(range => (
|
|
<button
|
|
key={range.id}
|
|
type="button"
|
|
onClick={() => applyQuickRange(range)}
|
|
className={`${rangeButtonCls(range.id)} flex-1`}
|
|
>
|
|
{quickRangeLabel(range)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setRangeSettingsOpen(v => !v)}
|
|
title="设置快捷区间"
|
|
aria-label="设置快捷区间"
|
|
className={`shrink-0 rounded-btn border px-2 py-1.5 transition-colors ${rangeSettingsOpen
|
|
? 'border-accent/40 bg-accent/10 text-accent'
|
|
: 'border-border bg-base text-secondary hover:border-accent/40 hover:text-accent'
|
|
}`}
|
|
>
|
|
<SlidersHorizontal className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
{rangeSettingsOpen && (
|
|
<div className="mt-2 rounded-input border border-border/60 bg-base/50 p-2">
|
|
<div className="mb-1.5 flex items-center justify-between gap-2 text-[10px] text-muted">
|
|
<span>快捷区间</span>
|
|
<span>月 1-120 / 年 1-10</span>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{quickRanges.map((range, index) => {
|
|
const limits = range.unit === 'all' ? null : QUICK_RANGE_LIMITS[range.unit]
|
|
return (
|
|
<div key={range.id} className="grid grid-cols-[3rem_1fr_4.5rem] items-center gap-1.5">
|
|
<label className="flex items-center gap-1 text-[11px] text-secondary">
|
|
<input
|
|
type="checkbox"
|
|
checked={range.enabled}
|
|
onChange={e => updateQuickRange(range.id, { enabled: e.target.checked })}
|
|
className="h-3 w-3 accent-accent"
|
|
/>
|
|
{index + 1}
|
|
</label>
|
|
<select
|
|
value={range.unit}
|
|
onChange={e => updateQuickRange(range.id, { unit: e.target.value as QuickRangeUnit })}
|
|
className={INPUT_CLS}
|
|
>
|
|
<option value="month">月</option>
|
|
<option value="year">年</option>
|
|
<option value="all">全部</option>
|
|
</select>
|
|
<input
|
|
type="number"
|
|
min={limits?.min}
|
|
max={limits?.max}
|
|
disabled={range.unit === 'all'}
|
|
value={range.unit === 'all' ? '' : range.value}
|
|
onChange={e => updateQuickRange(range.id, { value: Number(e.target.value) })}
|
|
placeholder="—"
|
|
className={`${INPUT_CLS} ${range.unit === 'all' ? 'opacity-50' : ''}`}
|
|
/>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<label className="text-xs font-medium text-secondary block mb-1.5">建仓口径</label>
|
|
<select value={entryFill} onChange={e => setEntryFill(e.target.value as any)} className={INPUT_CLS}>
|
|
<option value="open_t+1">次日开盘成交（推荐）</option>
|
|
<option value="close_t">信号日收盘成交</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-secondary block mb-1.5">清仓口径</label>
|
|
<select value={exitFill} onChange={e => setExitFill(e.target.value as any)} className={INPUT_CLS}>
|
|
<option value="close_t">到期/信号日收盘成交（推荐）</option>
|
|
<option value="open_t+1">次日开盘成交</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="mt-1 text-[10px] leading-4 text-muted">建仓默认次日开盘（避免未来函数），清仓默认当日收盘（持仓中可盘中/收盘卖）；买卖点由策略触发器决定，这里只决定成交价。</div>
|
|
|
|
{simMode === 'position' && (
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<label className="text-xs font-medium text-secondary block mb-1.5">初始资金</label>
|
|
<input type="number" value={initialCapital} onChange={e => setInitialCapital(e.target.value)}
|
|
className={INPUT_CLS} />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-secondary block mb-1.5">买入权重</label>
|
|
<select value={positionSizing} onChange={e => setPositionSizing(e.target.value as any)} className={INPUT_CLS}>
|
|
<option value="equal">等权买入</option>
|
|
<option value="score_weight">评分加权</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-secondary block mb-1.5">最大持仓数</label>
|
|
<input type="number" value={maxPositions} onChange={e => setMaxPositions(e.target.value)}
|
|
className={INPUT_CLS} />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-secondary block mb-1.5">最大总仓位(%)</label>
|
|
<input type="number" min={0} max={100} value={maxExposure} onChange={e => setMaxExposure(e.target.value)}
|
|
className={INPUT_CLS} />
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-medium text-secondary block mb-1.5">佣金(万分之)</label>
|
|
<input type="number" value={fees} onChange={e => setFees(e.target.value)} className={INPUT_CLS} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
{simMode === 'position' && (
|
|
<div className="text-[10px] leading-4 text-muted">
|
|
单票目标约 {Number.isFinite(targetPositionPct) ? targetPositionPct.toFixed(1) : '—'}%。最大总仓位控制资金投入；剩余现金不是新增持仓名额，只有实际卖出成功才释放持仓数。
|
|
</div>
|
|
)}
|
|
{simMode === 'full' && (
|
|
<div className="rounded-btn border border-accent/20 bg-accent/5 px-3 py-2.5 text-[11px] leading-relaxed text-secondary">
|
|
<span className="font-medium text-foreground">全量模拟</span>：每日将策略选出的全部候选独立买入，不受资金/最大持仓数限制；每一笔仍按策略卖点、止损、移动止盈/止损和最长持仓执行，用于评估策略本身的选股 + 交易规则质量。
|
|
</div>
|
|
)}
|
|
|
|
{isPending ? (
|
|
<button
|
|
onClick={stopBacktest}
|
|
className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-btn
|
|
bg-danger/15 border border-danger/40 text-sm font-medium text-danger hover:bg-danger/25
|
|
transition-colors duration-150 ease-smooth"
|
|
>
|
|
<Square className="h-3.5 w-3.5 fill-current" />
|
|
停止回测
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={handleRun}
|
|
disabled={!selectedStrategy || strategyDetail.isLoading}
|
|
className="group w-full inline-flex items-center justify-center gap-2.5 rounded-btn border border-accent/40
|
|
bg-gradient-to-r from-accent to-blue-500 px-3 py-2.5 text-white shadow-[0_10px_24px_rgba(59,130,246,0.22)]
|
|
transition-all duration-150 ease-smooth hover:-translate-y-0.5 hover:shadow-[0_14px_28px_rgba(59,130,246,0.28)]
|
|
disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
|
|
>
|
|
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/18 ring-1 ring-white/25 transition-transform group-hover:scale-105">
|
|
<Play className="h-3.5 w-3.5 translate-x-px fill-current" />
|
|
</span>
|
|
<span className="text-sm font-semibold tracking-wide">运行回测</span>
|
|
</button>
|
|
)}
|
|
</section>
|
|
|
|
{/* 结果面板 */}
|
|
<section className="min-w-0 space-y-3 bg-base/15 px-3 py-3 xl:overflow-y-auto">
|
|
{/* 模式切换: 仓位模拟 / 全量模拟 */}
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="inline-flex rounded-btn border border-border bg-surface/80 p-0.5 shadow-sm">
|
|
{([['position', '仓位模拟'], ['full', '全量模拟']] as const).map(([val, label]) => (
|
|
<button
|
|
key={val}
|
|
onClick={() => setSimMode(val)}
|
|
className={`inline-flex items-center gap-1.5 rounded-[5px] px-3 py-1.5 text-xs font-medium transition-colors cursor-pointer ${
|
|
simMode === val
|
|
? 'bg-accent text-white shadow-sm'
|
|
: 'text-secondary hover:bg-elevated hover:text-foreground'
|
|
}`}
|
|
title={val === 'position' ? '受仓位/资金约束的真实账户模拟' : '全部候选独立执行，不受资金和持仓数量约束'}
|
|
>
|
|
{val === 'position' ? <Play className="h-3.5 w-3.5" /> : <BarChart3 className="h-3.5 w-3.5" />}
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{simMode === 'full' && (
|
|
maxHoldDaysValue !== '' ? (
|
|
<div className="rounded-btn border border-border bg-surface px-2 py-1 text-[11px] text-secondary">
|
|
策略最长 <span className="font-mono text-foreground">{maxHoldDaysValue}</span> 天
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-1.5 text-[11px] text-secondary">
|
|
<span>兜底上限</span>
|
|
<div className="flex rounded-btn border border-border overflow-hidden">
|
|
{(['1', '5', '10', '20'] as const).map(d => (
|
|
<button
|
|
key={d}
|
|
onClick={() => setHoldingDays(d)}
|
|
className={`px-2 py-1 text-[11px] font-medium transition-colors cursor-pointer ${
|
|
holdingDays === d
|
|
? 'bg-accent/10 text-accent'
|
|
: 'text-muted hover:text-secondary hover:bg-elevated'
|
|
}`}
|
|
>
|
|
{d}天
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
|
|
{result?.error && (
|
|
<div className="text-sm text-danger bg-danger/10 border border-danger/30 rounded-btn px-3 py-2">
|
|
{result.error}
|
|
</div>
|
|
)}
|
|
|
|
{backtestTask?.error && (
|
|
<div className="text-sm text-danger bg-danger/10 border border-danger/30 rounded-btn px-3 py-2">
|
|
{backtestTask.error}
|
|
</div>
|
|
)}
|
|
|
|
{!result && !isPending && (
|
|
<EmptyState
|
|
icon={FlaskConical}
|
|
title="选择策略并开始回测"
|
|
hint="策略回测复用策略定义 ( 买入/卖出触发器、止损、最大持仓 ) 做全周期模拟。服务器建议优先使用最近3个月；长周期建议本机或 8GB 以上内存环境运行。"
|
|
/>
|
|
)}
|
|
|
|
{isPending && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -4 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="rounded-card border border-accent/40 bg-accent/10 px-4 py-2.5"
|
|
>
|
|
<div className="flex items-center gap-2.5">
|
|
<span className="relative flex h-4 w-4 shrink-0">
|
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent/50" />
|
|
<Loader2 className="relative h-4 w-4 animate-spin text-accent" />
|
|
</span>
|
|
<div className="min-w-0">
|
|
<div className="text-xs font-medium text-accent">
|
|
{backtestTask?.progress
|
|
? `回测中 · 第 ${backtestTask.progress.day}/${backtestTask.progress.total} 天 (${backtestTask.progress.date})`
|
|
: '正在重新计算回测…'}
|
|
</div>
|
|
<div className="mt-0.5 text-[11px] text-secondary">
|
|
{result ? '当前展示上次结果，完成后自动替换' : '正在加载回测数据…'}
|
|
</div>
|
|
</div>
|
|
{backtestTask?.progress && (
|
|
<span className="ml-auto shrink-0 font-mono text-sm font-semibold text-accent">
|
|
{((backtestTask.progress.day / backtestTask.progress.total) * 100).toFixed(0)}%
|
|
</span>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={stopBacktest}
|
|
className="inline-flex shrink-0 items-center gap-1 rounded-btn border border-danger/40 bg-danger/10 px-2 py-1 text-[11px] text-danger transition-colors hover:bg-danger/20"
|
|
>
|
|
<Square className="h-3 w-3 fill-current" />
|
|
停止
|
|
</button>
|
|
</div>
|
|
{backtestTask?.progress && (
|
|
<div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-base/60">
|
|
<div
|
|
className="h-full rounded-full bg-accent transition-all duration-300 ease-out"
|
|
style={{ width: `${(backtestTask.progress.day / backtestTask.progress.total) * 100}%` }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* 旧全量模拟结果: 固定前瞻收益统计 (兼容历史缓存结果) */}
|
|
{result && !result.error && result.stats && result.stats.mode === 'full' && result.stats.full_kind !== 'candidate_execution' && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
|
|
className="space-y-4"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-sm font-medium text-foreground">{result.strategy_info?.name ?? '策略'}</span>
|
|
<span className="text-[10px] px-1 py-px rounded border border-accent/30 bg-accent/10 text-accent">全量模拟</span>
|
|
<span className="text-[10px] text-secondary">持有 {result.config?.holding_days ?? 5} 天</span>
|
|
<span className="ml-auto text-[11px] text-muted font-mono">
|
|
{String(result.config?.start).slice(0,10)} ~ {String(result.config?.end).slice(0,10)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* 统计卡片 */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
|
<Stat label="平均收益" value={fmtPct(result.stats.avg_return)} color={statValueColor(result.stats.avg_return)} />
|
|
<Stat label="中位数" value={fmtPct(result.stats.median_return)} color={statValueColor(result.stats.median_return)} />
|
|
<Stat label="胜率" value={fmtPct(result.stats.win_rate)} color={statValueColor(result.stats.win_rate)} />
|
|
<Stat label="盈亏比" value={result.stats.profit_factor != null ? Number(result.stats.profit_factor).toFixed(2) : '—'} />
|
|
<Stat label="超额(vs基准)" value={fmtPct(result.stats.excess)} color={statValueColor(result.stats.excess)} />
|
|
<Stat label="夏普" value={result.stats.sharpe != null ? Number(result.stats.sharpe).toFixed(2) : '—'} />
|
|
<Stat label="最大回撤" value={fmtPct(result.stats.max_drawdown)} color={statValueColor(result.stats.max_drawdown)} />
|
|
<Stat label="累计收益" value={fmtPct(result.stats.total_return)} color={statValueColor(result.stats.total_return)} />
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-muted">
|
|
<span>候选样本 <b className="text-foreground num">{result.stats.n_candidates ?? 0}</b> (标的×信号日)</span>
|
|
<span>信号天数 <b className="text-foreground num">{result.stats.n_days ?? 0}</b></span>
|
|
<span>日均候选 <b className="text-foreground num">{result.stats.avg_daily_candidates ?? 0}</b></span>
|
|
<span>最佳 <b className="text-bull num">{fmtPct(result.stats.best)}</b></span>
|
|
<span>最差 <b className="text-bear num">{fmtPct(result.stats.worst)}</b></span>
|
|
<span>基准(上证) <b className="text-foreground num">{fmtPct(result.stats.benchmark_return)}</b></span>
|
|
</div>
|
|
|
|
{/* 累计超额曲线 (复用 StrategyNavChart) */}
|
|
{result.equity_curve.length > 1 && (
|
|
<div className="rounded-card border border-border p-3">
|
|
<div className="mb-2 text-xs font-medium text-secondary">累计收益曲线(日均复利)</div>
|
|
<StrategyNavChart result={result} />
|
|
</div>
|
|
)}
|
|
|
|
{/* 收益分布直方图 */}
|
|
{Array.isArray(result.stats.return_distribution) && result.stats.return_distribution.length > 0 && (
|
|
<div className="rounded-card border border-border p-3">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<span className="text-xs font-medium text-secondary">候选标的收益分布(持有 {result.config?.holding_days ?? 5} 天)</span>
|
|
<span className="text-[10px] text-muted">红=正收益 · 绿=负收益</span>
|
|
</div>
|
|
<ReturnDistributionChart distribution={result.stats.return_distribution} />
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-[11px] text-muted">run_id: {result.run_id}</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{result && !result.error && result.stats && !result.stats.error && (result.stats.mode !== 'full' || result.stats.full_kind === 'candidate_execution') && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
|
|
className="space-y-4"
|
|
>
|
|
{/* 策略信息 */}
|
|
{result.strategy_info && (
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-sm font-medium text-foreground">{result.strategy_info.name}</span>
|
|
{result.stats.full_kind === 'candidate_execution' && (
|
|
<span className="text-[9px] px-1 py-px rounded border border-accent/30 bg-accent/10 text-accent">全量独立执行</span>
|
|
)}
|
|
{result.strategy_info.source && (
|
|
<span className={`text-[9px] px-1 py-px rounded border ${BADGE_CLS_MAP[result.strategy_info.source] ?? ''}`}>
|
|
{SRC_MAP[result.strategy_info.source] ?? ''}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{result.strategy_info.stop_loss != null && (
|
|
<span className="text-[10px] text-secondary">止损 {fmtPct(result.strategy_info.stop_loss)}</span>
|
|
)}
|
|
{result.strategy_info.trailing_stop != null && (
|
|
<span className="text-[10px] text-secondary">移损 {fmtPct(result.strategy_info.trailing_stop)}</span>
|
|
)}
|
|
{result.strategy_info.trailing_take_profit_activate != null && result.strategy_info.trailing_take_profit_drawdown != null && (
|
|
<span className="text-[10px] text-secondary">回撤 {fmtPct(result.strategy_info.trailing_take_profit_activate)}-{fmtPct(result.strategy_info.trailing_take_profit_drawdown)}</span>
|
|
)}
|
|
{result.strategy_info.max_hold_days != null && (
|
|
<span className="text-[10px] text-secondary">最长 {result.strategy_info.max_hold_days} 天</span>
|
|
)}
|
|
{resultTradeDays > 0 && (
|
|
<span className="ml-auto flex items-center gap-2 text-[11px] text-muted">
|
|
<span className="font-mono">{String(resultStartDate).slice(0, 10)} ~ {String(resultEndDate).slice(0, 10)}</span>
|
|
<span>{resultTradeDays} 天</span>
|
|
</span>
|
|
)}
|
|
{result.elapsed_ms > 0 && (
|
|
<span className={`flex items-center gap-1 text-[11px] text-muted ${resultTradeDays > 0 ? '' : 'ml-auto'}`}>
|
|
<Clock className="h-3 w-3" />
|
|
<span>总耗时</span>
|
|
<span className="num">{fmtDuration(result.elapsed_ms)}</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 统计卡片 */}
|
|
<div className="rounded-card border border-border bg-surface p-4">
|
|
<div className="grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-3">
|
|
<Stat label="总收益" value={strategyReturn != null ? fmtPct(strategyReturn) : '—'}
|
|
color={statValueColor(strategyReturn)} />
|
|
<Stat label="年化" value={pick('annual_return') != null ? fmtPct(pick('annual_return') as number) : '—'}
|
|
color={statValueColor(pick('annual_return') as number)} />
|
|
<Stat label="同期上证" value={benchmarkReturn != null ? fmtPct(benchmarkReturn) : '—'}
|
|
color={statValueColor(benchmarkReturn)} />
|
|
<Stat label="超额收益" value={excessReturn != null ? fmtPct(excessReturn) : '—'}
|
|
color={statValueColor(excessReturn)} />
|
|
<Stat label={<SharpeLabel />} value={pick('sharpe') != null ? Number(pick('sharpe')).toFixed(2) : '—'} />
|
|
<Stat label="最大回撤" value={pick('max_drawdown') != null ? fmtPct(pick('max_drawdown') as number) : '—'}
|
|
color="#34d399" />
|
|
<Stat label="胜率" value={pick('win_rate') != null ? fmtPct(pick('win_rate') as number) : '—'} />
|
|
<Stat label="交易数" value={pick('n_trades') != null ? String(pick('n_trades')) : '—'} />
|
|
{result.stats.full_kind === 'candidate_execution' ? (
|
|
<Stat label="平均持仓" value={pick('avg_duration') != null ? `${Number(pick('avg_duration')).toFixed(1)}天` : '—'} />
|
|
) : (
|
|
<Stat label="最终权益" value={pick('final_equity') != null ? fmtPrice(pick('final_equity') as number) : '—'} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{executionSummary.length > 0 && (
|
|
<div className="rounded-card border border-amber-400/25 bg-amber-400/5 px-3 py-2 text-[11px] leading-5 text-secondary">
|
|
<span className="font-medium text-amber-300">成交约束：</span>
|
|
{executionSummary.map((item, index) => (
|
|
<span key={item.key} className="ml-2">
|
|
{index > 0 ? '· ' : ''}{item.label} <span className="font-mono text-foreground">{item.value}</span> 次
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 净值曲线 */}
|
|
{result.equity_curve.length > 0 && (
|
|
<div className="rounded-card border border-border overflow-hidden">
|
|
<StrategyNavChart result={result} />
|
|
</div>
|
|
)}
|
|
|
|
{Array.isArray(result.stats.return_distribution) && result.stats.return_distribution.length > 0 && (
|
|
<div className="rounded-card border border-border p-3">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<span className="text-xs font-medium text-secondary">独立候选交易收益分布</span>
|
|
<span className="text-[10px] text-muted">红=正收益 · 绿=负收益</span>
|
|
</div>
|
|
<ReturnDistributionChart distribution={result.stats.return_distribution} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Tab: 按日期 / 交易明细 / 选股分析 */}
|
|
{(result.trades.length > 0 || result.per_symbol_stats.length > 0) && (
|
|
<div className="rounded-card border border-border overflow-hidden">
|
|
<div className="flex items-center gap-1 border-b border-border px-4 pt-2">
|
|
{(['daily', 'trades', 'picks'] as const).map(t => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setResultTab(t)}
|
|
className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors cursor-pointer ${
|
|
resultTab === t
|
|
? 'border-accent text-accent'
|
|
: 'border-transparent text-secondary hover:text-foreground'
|
|
}`}
|
|
>
|
|
{t === 'daily'
|
|
? `每日交易 (${dailyTradeRows.length})`
|
|
: t === 'trades'
|
|
? `交易明细 (${sortedTrades.length})`
|
|
: `选股分析 (${result.per_symbol_stats.length})`}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{resultTab === 'daily' && (
|
|
<div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full min-w-[960px] text-sm text-foreground">
|
|
<thead className="bg-elevated">
|
|
<tr className="text-left text-secondary">
|
|
<th className="px-3 py-2.5 font-medium w-[8.5rem]">日期</th>
|
|
<th className="px-3 py-2.5 font-medium">买入</th>
|
|
<th className="px-3 py-2.5 font-medium">卖出</th>
|
|
<th className="px-3 py-2.5 font-medium text-right w-[8rem]">当日收益</th>
|
|
<th className="px-3 py-2.5 font-medium text-right w-[8rem]">累计收益</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{visibleDailyRows.map(row => (
|
|
<tr key={row.date} className="border-t border-border hover:bg-elevated/50 transition-colors">
|
|
<td className="px-3 py-2.5 whitespace-nowrap">
|
|
<div className="font-mono text-foreground">{row.date}</div>
|
|
<div className="mt-0.5 text-[11px] text-muted">
|
|
买 {row.buys.length} / 卖 {row.sells.length}
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-2.5">
|
|
{row.buys.length === 0 ? (
|
|
<span className="text-muted">—</span>
|
|
) : (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{row.buys.map((t, i) => (
|
|
<DailyTradeChip key={`buy-${t.symbol}-${t.entry_date}-${t.exit_date}-${i}`} trade={t} side="buy" strategyName={result?.strategy_info?.name ?? selectedStrategyName} onClick={() => setSelectedTrade(t)} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-3 py-2.5">
|
|
{row.sells.length === 0 ? (
|
|
<span className="text-muted">—</span>
|
|
) : (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{row.sells.map((t, i) => (
|
|
<DailyTradeChip key={`sell-${t.symbol}-${t.entry_date}-${t.exit_date}-${i}`} trade={t} side="sell" onClick={() => setSelectedTrade(t)} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className={`px-3 py-2.5 text-right num font-semibold whitespace-nowrap ${priceColorClass(row.realizedPnl)}`}>
|
|
{fmtSignedMoney(row.realizedPnl)}
|
|
</td>
|
|
<td className={`px-3 py-2.5 text-right num font-semibold whitespace-nowrap ${priceColorClass(row.cumulativePnl)}`}>
|
|
{fmtSignedMoney(row.cumulativePnl)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{dailyTradeRows.length > 0 && (
|
|
<div className="flex flex-wrap items-center justify-between gap-3 border-t border-border px-4 py-2 text-xs text-muted">
|
|
<span>
|
|
显示 {dailyStart + 1}-{dailyEnd} 天 / 共 {dailyTradeRows.length} 天，每页 10 天
|
|
</span>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setDailyPage(p => Math.max(0, p - 1))}
|
|
disabled={safeDailyPage <= 0}
|
|
className="rounded-btn border border-border bg-surface px-2.5 py-1 text-xs text-secondary transition-colors hover:border-accent/40 hover:text-accent disabled:cursor-not-allowed disabled:opacity-45"
|
|
>
|
|
上一页
|
|
</button>
|
|
<span className="num text-secondary">
|
|
{safeDailyPage + 1} / {dailyPageCount}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setDailyPage(p => Math.min(dailyPageCount - 1, p + 1))}
|
|
disabled={safeDailyPage >= dailyPageCount - 1}
|
|
className="rounded-btn border border-border bg-surface px-2.5 py-1 text-xs text-secondary transition-colors hover:border-accent/40 hover:text-accent disabled:cursor-not-allowed disabled:opacity-45"
|
|
>
|
|
下一页
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{resultTab === 'trades' && (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full min-w-[960px] text-sm text-foreground">
|
|
<thead className="bg-elevated">
|
|
<tr className="text-left text-secondary">
|
|
<th className="px-4 py-2.5 font-medium">标的</th>
|
|
<th className="px-4 py-2.5 font-medium">买入</th>
|
|
<th className="px-4 py-2.5 font-medium">卖出</th>
|
|
<th className="px-4 py-2.5 font-medium text-right">仓位 / 手数</th>
|
|
<th className="px-4 py-2.5 font-medium text-right">单票盈亏</th>
|
|
<th className="px-4 py-2.5 font-medium text-right">持仓</th>
|
|
<th className="px-4 py-2.5 font-medium">原因</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{visibleTrades.map((t: StrategyBacktestTrade, i: number) => (
|
|
<tr key={`${t.symbol}-${t.entry_date}-${tradeStart + i}`} className="border-t border-border hover:bg-elevated/50 transition-colors group">
|
|
<td className="px-4 py-2.5">
|
|
<div className="font-medium text-foreground group-hover:text-accent transition-colors">
|
|
{t.name || t.symbol}
|
|
</div>
|
|
<div className="mt-0.5 font-mono text-[11px] text-muted">{t.symbol}</div>
|
|
</td>
|
|
<td className="px-4 py-2.5">
|
|
<TradeLegCell trade={t} side="buy" />
|
|
</td>
|
|
<td className="px-4 py-2.5">
|
|
<TradeLegCell trade={t} side="sell" />
|
|
</td>
|
|
<td className="px-4 py-2.5 text-right">
|
|
<div className="num text-foreground">{fmtPct(t.position_pct, 2)}</div>
|
|
<div className="mt-0.5 text-[11px] text-muted">
|
|
<span className="num">{fmtLots(t.lots)}</span> 手
|
|
<span className="ml-1 num">{fmtShares(t.shares)}</span> 股
|
|
</div>
|
|
</td>
|
|
<td className={`px-4 py-2.5 text-right num ${priceColorClass(t.pnl_amount ?? t.pnl_pct)}`}>
|
|
<div>{fmtSignedMoney(t.pnl_amount)}</div>
|
|
<div className="mt-0.5 text-[11px]">{fmtPct(t.pnl_pct)}</div>
|
|
</td>
|
|
<td className="px-4 py-2.5 text-right num text-secondary">
|
|
<div>{t.duration} 天</div>
|
|
{!!t.blocked_exit_days && <div className="mt-0.5 text-[11px] text-amber-400">阻塞 {t.blocked_exit_days} 天</div>}
|
|
</td>
|
|
<td className="px-4 py-2.5"><ExitReasonBadge reason={t.exit_reason} /></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{sortedTrades.length > 0 && (
|
|
<div className="flex flex-wrap items-center justify-between gap-3 border-t border-border px-4 py-2 text-xs text-muted">
|
|
<span>
|
|
显示 {tradeStart + 1}-{tradeEnd} 条 / 共 {sortedTrades.length} 条
|
|
</span>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<label className="flex items-center gap-1.5">
|
|
<span>每页</span>
|
|
<select
|
|
value={tradePageSize}
|
|
onChange={e => {
|
|
setTradePageSize(Number(e.target.value))
|
|
setTradePage(0)
|
|
}}
|
|
className="rounded-btn border border-border bg-surface px-2 py-1 text-xs text-secondary focus:outline-none focus:border-accent"
|
|
>
|
|
{TRADE_PAGE_SIZE_OPTIONS.map(size => (
|
|
<option key={size} value={size}>{size}</option>
|
|
))}
|
|
</select>
|
|
<span>条</span>
|
|
</label>
|
|
<button
|
|
type="button"
|
|
onClick={() => setTradePage(p => Math.max(0, p - 1))}
|
|
disabled={safeTradePage <= 0}
|
|
className="rounded-btn border border-border bg-surface px-2.5 py-1 text-xs text-secondary transition-colors hover:border-accent/40 hover:text-accent disabled:cursor-not-allowed disabled:opacity-45"
|
|
>
|
|
上一页
|
|
</button>
|
|
<span className="num text-secondary">
|
|
{safeTradePage + 1} / {tradePageCount}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setTradePage(p => Math.min(tradePageCount - 1, p + 1))}
|
|
disabled={safeTradePage >= tradePageCount - 1}
|
|
className="rounded-btn border border-border bg-surface px-2.5 py-1 text-xs text-secondary transition-colors hover:border-accent/40 hover:text-accent disabled:cursor-not-allowed disabled:opacity-45"
|
|
>
|
|
下一页
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{resultTab === 'picks' && (
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-elevated">
|
|
<tr className="text-left text-secondary">
|
|
<th className="px-4 py-2.5 font-medium">标的</th>
|
|
<th className="px-4 py-2.5 font-medium text-right">选股次数</th>
|
|
<th className="px-4 py-2.5 font-medium text-right">总收益</th>
|
|
<th className="px-4 py-2.5 font-medium text-right">胜率</th>
|
|
<th className="px-4 py-2.5 font-medium text-right">最佳</th>
|
|
<th className="px-4 py-2.5 font-medium text-right">最差</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{result.per_symbol_stats.map((r) => (
|
|
<tr key={r.symbol} className="border-t border-border hover:bg-elevated/50 transition-colors group">
|
|
<td className="px-4 py-2">
|
|
<div className="font-medium text-foreground group-hover:text-accent transition-colors">
|
|
{symbolNames[r.symbol] || r.symbol}
|
|
</div>
|
|
<div className="mt-0.5 font-mono text-[11px] text-muted">{r.symbol}</div>
|
|
</td>
|
|
<td className="px-4 py-2 text-right num">{r.n_trades}</td>
|
|
<td className={`px-4 py-2 text-right num ${priceColorClass(r.total_return)}`}>
|
|
{fmtPct(r.total_return)}
|
|
</td>
|
|
<td className="px-4 py-2 text-right num">{fmtPct(r.win_rate)}</td>
|
|
<td className="px-4 py-2 text-right num text-bull">{fmtPct(r.best)}</td>
|
|
<td className="px-4 py-2 text-right num text-bear">{fmtPct(r.worst)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-[11px] text-muted">
|
|
run_id: {result.run_id}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</section>
|
|
|
|
{settingsOpen && detail && (
|
|
<>
|
|
<motion.button
|
|
type="button"
|
|
aria-label="关闭高级策略设置"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
onClick={() => setSettingsOpen(false)}
|
|
className="fixed inset-0 z-50 bg-black/45 backdrop-blur-[1px]"
|
|
/>
|
|
<motion.aside
|
|
initial={{ x: 32, opacity: 0 }}
|
|
animate={{ x: 0, opacity: 1 }}
|
|
transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
|
className="fixed inset-y-0 right-0 z-[60] flex w-full max-w-3xl flex-col border-l border-border bg-base shadow-2xl"
|
|
>
|
|
<div className="border-b border-border px-4 py-3">
|
|
<div className="flex items-start gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-sm font-semibold text-foreground">高级策略设置</span>
|
|
<span className={`text-[9px] px-1 py-px rounded border ${BADGE_CLS_MAP[detail.source] ?? ''}`}>
|
|
{SRC_MAP[detail.source] ?? ''}
|
|
</span>
|
|
</div>
|
|
<div className="mt-1 truncate text-xs text-secondary">{detail.name}</div>
|
|
<div className="mt-0.5 text-[10px] leading-4 text-muted">{advancedSummary}</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSettingsOpen(false)}
|
|
className="rounded-btn border border-border bg-surface p-1.5 text-muted transition-colors hover:border-accent/40 hover:text-foreground"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<div className="mt-3 flex gap-1 overflow-x-auto">
|
|
{ADVANCED_TABS.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => setSettingsTab(tab.id)}
|
|
className={`shrink-0 rounded-btn border px-3 py-1.5 text-xs transition-colors ${settingsTab === tab.id
|
|
? 'border-accent/50 bg-accent/10 text-accent'
|
|
: 'border-border bg-surface text-secondary hover:border-accent/40 hover:text-foreground'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
|
|
<div className="mb-4 rounded-btn border border-accent/25 bg-accent/5 px-3 py-2.5 text-[11px] leading-5 text-secondary">
|
|
<div className="font-medium text-foreground">触发 / 成交 / 仓位关系</div>
|
|
<div className="mt-1">触发器决定什么时候产生买卖信号；评分只在多个买点同时出现时排序。</div>
|
|
<div>成交口径可分别设置建仓/清仓：默认建仓次日开盘（避免未来函数）、清仓当日收盘（持仓中可盘中/收盘卖）。</div>
|
|
<div>退出优先级：止损/移动止损 > 卖点信号 > 到期平仓；到期只作兜底，不抢占卖点或风控。</div>
|
|
<div>最大持仓数控制同时持股数量，最大总仓位控制资金投入比例；剩余现金不等于可新增持仓名额。</div>
|
|
</div>
|
|
|
|
{settingsTab === 'range' && (
|
|
<ConfigSection title="回测范围" hint={<span className="font-medium text-amber-400">留空 = 全市场</span>}>
|
|
<StockPoolPicker value={symbols} onChange={setSymbols} />
|
|
<div className="text-[11px] leading-5 text-muted">默认全市场回测，由基础过滤、策略条件和买卖触发器筛选；需要单票调试或自选池回测时再限定股票池。</div>
|
|
</ConfigSection>
|
|
)}
|
|
|
|
{settingsTab === 'params' && (
|
|
<ConfigSection title="策略参数" hint="自动限制 min/max">
|
|
{detail.params.length > 0 ? (
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
{detail.params.map(param => (
|
|
<StrategyParamInput
|
|
key={param.id}
|
|
param={param}
|
|
value={strategyParams[param.id]}
|
|
onChange={value => setStrategyParams(prev => ({ ...prev, [param.id]: value }))}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-xs text-muted">当前策略没有可调参数。</div>
|
|
)}
|
|
</ConfigSection>
|
|
)}
|
|
|
|
{settingsTab === 'filter' && (
|
|
<ConfigSection title="基础过滤" hint="用于候选池">
|
|
<label className="flex items-center gap-2 text-xs text-secondary">
|
|
<input
|
|
type="checkbox"
|
|
checked={basicFilter.enabled !== false}
|
|
onChange={e => updateBasicFilter('enabled', e.target.checked)}
|
|
/>
|
|
启用基础过滤
|
|
</label>
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
{BASIC_FILTER_FIELDS.map(field => {
|
|
const scale = field.scale ?? 1
|
|
const value = basicFilter[field.key] == null ? '' : Number(basicFilter[field.key]) / scale
|
|
return (
|
|
<label key={field.key} className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">{field.label}({field.unit})</span>
|
|
<input
|
|
type="number"
|
|
value={value}
|
|
min={0}
|
|
step={field.unit === '%' ? 0.1 : 0.01}
|
|
onChange={e => {
|
|
const n = numOrNull(e.target.value)
|
|
updateBasicFilter(field.key, n == null ? null : n * scale)
|
|
}}
|
|
className={INPUT_CLS}
|
|
/>
|
|
</label>
|
|
)
|
|
})}
|
|
</div>
|
|
<label className="flex items-center gap-2 text-xs text-secondary">
|
|
<input
|
|
type="checkbox"
|
|
checked={!!basicFilter.exclude_st}
|
|
onChange={e => updateBasicFilter('exclude_st', e.target.checked)}
|
|
/>
|
|
排除 ST / 退市
|
|
</label>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{BOARD_OPTIONS.map(board => {
|
|
const boards = Array.isArray(basicFilter.boards) ? basicFilter.boards : []
|
|
const checked = boards.includes(board)
|
|
return (
|
|
<button
|
|
key={board}
|
|
type="button"
|
|
onClick={() => updateBasicFilter('boards', checked ? boards.filter((b: string) => b !== board) : [...boards, board])}
|
|
className={`rounded-btn border px-2.5 py-1.5 text-[11px] transition-colors ${checked ? 'border-accent/50 bg-accent/10 text-accent' : 'border-border bg-base text-muted hover:border-accent/40'}`}
|
|
>
|
|
{board}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</ConfigSection>
|
|
)}
|
|
|
|
{settingsTab === 'entry' && (
|
|
<ConfigSection
|
|
title="买入触发器"
|
|
hint="任一买点满足即可进入候选"
|
|
actions={<SignalTriggerActions kind="entry" signals={entrySignals} onChange={next => updateOverride('entry_signals', next)} />}
|
|
>
|
|
<SignalPicker
|
|
signals={entrySignals}
|
|
onChange={next => updateOverride('entry_signals', next)}
|
|
kind="entry"
|
|
/>
|
|
</ConfigSection>
|
|
)}
|
|
|
|
{settingsTab === 'exit' && (
|
|
<ConfigSection
|
|
title="卖出触发器"
|
|
hint="任一卖点满足即触发卖出"
|
|
actions={<SignalTriggerActions kind="exit" signals={exitSignals} onChange={next => updateOverride('exit_signals', next)} />}
|
|
>
|
|
<SignalPicker
|
|
signals={exitSignals}
|
|
onChange={next => updateOverride('exit_signals', next)}
|
|
kind="exit"
|
|
/>
|
|
</ConfigSection>
|
|
)}
|
|
|
|
{settingsTab === 'scoring' && (
|
|
<ConfigSection title="评分权重" hint="临时拖动滑块，保存时统一归权">
|
|
{Object.entries(scoring).length > 0 ? (() => {
|
|
const visibleWeights = editingScoring ? scoringDraft : scoringToPct(scoring)
|
|
const total = Object.values(visibleWeights).reduce((a, b) => a + b, 0)
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="space-y-2">
|
|
{Object.keys(scoring).map(key => (
|
|
<ScoringWeightRow
|
|
key={key}
|
|
name={key}
|
|
weight={visibleWeights[key] ?? 0}
|
|
pct={visibleWeights[key] ?? 0}
|
|
editing={editingScoring}
|
|
onChange={value => setScoringDraft(prev => ({ ...prev, [key]: Math.max(0, value) }))}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-wrap items-center justify-between gap-2 border-t border-border/40 pt-2">
|
|
<div className="text-[10px] text-muted">
|
|
总和 <span className={`font-mono text-xs font-medium ${editingScoring && total !== 100 ? 'text-amber-400' : 'text-emerald-400'}`}>{editingScoring ? total : 100}</span>
|
|
<span className="ml-1 text-muted/70">保存时自动归一化计算</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{editingScoring && (
|
|
<button
|
|
type="button"
|
|
onClick={cancelScoringEdit}
|
|
className="rounded-btn border border-border bg-base px-2.5 py-1 text-[11px] text-secondary transition-colors hover:border-accent/40 hover:text-foreground"
|
|
>
|
|
取消
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={editingScoring ? saveScoringDraft : startScoringEdit}
|
|
className="rounded-btn border border-amber-400/40 bg-amber-400/10 px-2.5 py-1 text-[11px] text-amber-400 transition-colors hover:bg-amber-400/15"
|
|
>
|
|
{editingScoring ? '保存归权' : '调整权重'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})() : (
|
|
<div className="text-xs text-muted">当前策略没有评分权重。</div>
|
|
)}
|
|
<div className="border-t border-border/40 pt-3">
|
|
<div className="mb-2 flex flex-wrap items-center justify-between gap-2">
|
|
<span className="text-[11px] font-medium text-secondary">评分过滤</span>
|
|
<span className="text-[10px] text-muted">留空 = 不过滤；命中范围后按评分从高到低买入</span>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">最小评分</span>
|
|
<input
|
|
type="number"
|
|
value={scoreMinValue}
|
|
min={0}
|
|
max={100}
|
|
step={1}
|
|
placeholder="不限"
|
|
onChange={e => {
|
|
const n = numOrNull(e.target.value)
|
|
updateOverride('score_min', n == null ? null : clamp(n, 0, 100))
|
|
}}
|
|
className={INPUT_CLS}
|
|
/>
|
|
</label>
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">最大评分</span>
|
|
<input
|
|
type="number"
|
|
value={scoreMaxValue}
|
|
min={0}
|
|
max={100}
|
|
step={1}
|
|
placeholder="不限"
|
|
onChange={e => {
|
|
const n = numOrNull(e.target.value)
|
|
updateOverride('score_max', n == null ? null : clamp(n, 0, 100))
|
|
}}
|
|
className={INPUT_CLS}
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div className="mt-2 text-[10px] leading-4 text-muted">例如最小值 71 表示只把评分 ≥ 71 的股票放入下一交易日买入预选池。</div>
|
|
</div>
|
|
</ConfigSection>
|
|
)}
|
|
|
|
{settingsTab === 'risk' && (
|
|
<ConfigSection title="风控">
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">止损(%)</span>
|
|
<input
|
|
type="number"
|
|
value={stopLossPct}
|
|
min={0}
|
|
max={99}
|
|
step={0.5}
|
|
onChange={e => {
|
|
const n = numOrNull(e.target.value)
|
|
updateOverride('stop_loss', n == null ? null : -Math.abs(n) / 100)
|
|
}}
|
|
className={INPUT_CLS}
|
|
/>
|
|
</label>
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">移动止损(%)</span>
|
|
<input
|
|
type="number"
|
|
value={trailingStopPct}
|
|
min={0.5}
|
|
max={50}
|
|
step={0.5}
|
|
onChange={e => {
|
|
const n = numOrNull(e.target.value)
|
|
updateOverride('trailing_stop', n == null ? null : -clamp(Math.abs(n), 0.5, 50) / 100)
|
|
}}
|
|
className={INPUT_CLS}
|
|
/>
|
|
</label>
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">回撤止盈启动(%)</span>
|
|
<input
|
|
type="number"
|
|
value={trailingTakeProfitActivatePct}
|
|
min={1}
|
|
max={200}
|
|
step={0.5}
|
|
onChange={e => {
|
|
const n = numOrNull(e.target.value)
|
|
const next = n == null ? null : clamp(Math.abs(n), 1, 200) / 100
|
|
updateOverride('trailing_take_profit_activate', next)
|
|
const drawdown = numOrNull(trailingTakeProfitDrawdownPct)
|
|
if (next != null && drawdown != null && drawdown / 100 > next) {
|
|
updateOverride('trailing_take_profit_drawdown', next)
|
|
}
|
|
}}
|
|
className={INPUT_CLS}
|
|
/>
|
|
</label>
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">回撤止盈回撤(点)</span>
|
|
<input
|
|
type="number"
|
|
value={trailingTakeProfitDrawdownPct}
|
|
min={0.5}
|
|
max={50}
|
|
step={0.5}
|
|
onChange={e => {
|
|
const n = numOrNull(e.target.value)
|
|
const activate = numOrNull(trailingTakeProfitActivatePct)
|
|
const maxValue = activate == null ? 50 : Math.min(50, Math.abs(activate))
|
|
updateOverride('trailing_take_profit_drawdown', n == null ? null : clamp(Math.abs(n), 0.5, maxValue) / 100)
|
|
}}
|
|
className={INPUT_CLS}
|
|
/>
|
|
</label>
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] text-secondary">最长持仓(天)</span>
|
|
<input
|
|
type="number"
|
|
value={maxHoldDaysValue}
|
|
min={1}
|
|
step={1}
|
|
onChange={e => {
|
|
const n = numOrNull(e.target.value)
|
|
updateOverride('max_hold_days', n == null ? null : Math.max(1, Math.round(n)))
|
|
}}
|
|
className={INPUT_CLS}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</ConfigSection>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-2 border-t border-border px-4 py-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => resetConfigFromDetail(detail)}
|
|
className="rounded-btn border border-border bg-surface px-3 py-1.5 text-xs text-secondary transition-colors hover:border-accent/40 hover:text-accent"
|
|
>
|
|
恢复默认
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSettingsOpen(false)}
|
|
className="rounded-btn bg-accent px-4 py-1.5 text-xs font-medium text-white transition-colors hover:bg-accent/90"
|
|
>
|
|
完成
|
|
</button>
|
|
</div>
|
|
</motion.aside>
|
|
</>
|
|
)}
|
|
|
|
<TradeKlineModal trade={selectedTrade} onClose={() => setSelectedTrade(null)} />
|
|
</div>
|
|
)
|
|
}
|