87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import { useMemo } from 'react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { api } from '@/lib/api'
|
|
import { QK } from '@/lib/queryKeys'
|
|
import { SIGNAL_OPTIONS, cnSignal } from '@/lib/signals'
|
|
|
|
interface Props {
|
|
/** 当前选中的信号 ID 列表 */
|
|
signals: string[]
|
|
/** 选中变化回调 */
|
|
onChange: (next: string[]) => void
|
|
/** 买点 / 卖点 — 决定自定义信号的过滤与配色主题 */
|
|
kind: 'entry' | 'exit'
|
|
/** 渲染尺寸: dialog = 选股弹窗紧凑样式; panel = 回测页设置抽屉样式 */
|
|
variant?: 'dialog' | 'panel'
|
|
}
|
|
|
|
/**
|
|
* 买卖触发器信号选择 — 选股页弹窗 / 回测页共用。
|
|
*
|
|
* - 内置信号 (signal_*): 全部展示
|
|
* - 自定义信号 (csg_*): 按 kind 过滤 (entry / exit / both)
|
|
* - entry 蓝色主题, exit 橙色主题
|
|
*/
|
|
export function SignalPicker({ signals, onChange, kind, variant = 'panel' }: Props) {
|
|
const customSignalsQuery = useQuery({ queryKey: QK.customSignals, queryFn: api.customSignalsList })
|
|
|
|
const customOptions = useMemo(() => {
|
|
const list = (customSignalsQuery.data?.signals ?? [])
|
|
.filter(s => s.enabled && (s.kind === kind || s.kind === 'both'))
|
|
const names: Record<string, string> = {}
|
|
for (const cs of list) names[`csg_${cs.id}`] = cs.name
|
|
return { list, names }
|
|
}, [customSignalsQuery.data, kind])
|
|
|
|
const toggle = (sig: string) => {
|
|
const next = signals.includes(sig) ? signals.filter(x => x !== sig) : [...signals, sig]
|
|
onChange(next)
|
|
}
|
|
|
|
// 配色: entry 蓝色 (accent), exit 橙色 (warning/amber)
|
|
const isEntry = kind === 'entry'
|
|
const active = isEntry
|
|
? 'border-accent/50 bg-accent/10 text-accent'
|
|
: 'border-warning/50 bg-warning/10 text-warning'
|
|
const idle = variant === 'dialog'
|
|
? 'border-border bg-base text-muted hover:border-accent/40'
|
|
: 'border-border bg-base text-muted hover:border-accent/40'
|
|
const customActive = isEntry
|
|
? 'border-accent/50 bg-accent/10 text-accent'
|
|
: 'border-warning/50 bg-warning/10 text-warning'
|
|
const customIdle = 'border-amber-400/30 bg-amber-400/5 text-secondary hover:border-amber-400/50 hover:text-amber-400'
|
|
|
|
const btnCls = variant === 'dialog'
|
|
? 'rounded px-1.5 py-0.5 text-[10px] font-medium border transition-colors cursor-pointer'
|
|
: 'rounded-btn border px-2.5 py-1.5 text-[11px] transition-colors cursor-pointer'
|
|
|
|
return (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{SIGNAL_OPTIONS.map(sig => (
|
|
<button
|
|
key={sig}
|
|
type="button"
|
|
onClick={() => toggle(sig)}
|
|
className={`${btnCls} ${signals.includes(sig) ? active : idle}`}
|
|
>
|
|
{cnSignal(sig)}
|
|
</button>
|
|
))}
|
|
{customOptions.list.map(cs => {
|
|
const id = `csg_${cs.id}`
|
|
return (
|
|
<button
|
|
key={id}
|
|
type="button"
|
|
onClick={() => toggle(id)}
|
|
title="自定义信号"
|
|
className={`${btnCls} ${signals.includes(id) ? customActive : customIdle}`}
|
|
>
|
|
{customOptions.names[id]}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|