diff --git a/frontend/src/components/ListColumnCustomizer.tsx b/frontend/src/components/ListColumnCustomizer.tsx index 0998e08..e672dc0 100644 --- a/frontend/src/components/ListColumnCustomizer.tsx +++ b/frontend/src/components/ListColumnCustomizer.tsx @@ -6,7 +6,7 @@ * - 下半区「内置列」:按业务分组折叠 * - 底部「扩展数据列」:复用 ext_data schema,按需添加字段 */ -import React, { useState, useCallback, useEffect, useMemo } from 'react' +import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { DndContext, closestCenter, KeyboardSensor, PointerSensor, @@ -39,6 +39,13 @@ interface ListColumnCustomizerProps { showExtColumns?: boolean /** 是否显示「单独显示」勾选项(默认 false;仅信息条场景启用,让某列独占一行)。 */ showStandaloneToggle?: boolean + /** + * 是否禁用遮罩背景模糊 (backdrop-blur)。默认 false。 + * 信息条场景 (宿主含 Canvas K线/分时图) 传 true:blur 会对 Canvas 做逐帧 GPU 合成, + * 是抽屉打开/滑动卡顿的主因;改纯半透明遮罩后合成层锐减。 + * 选股/自选页背后是 DOM 表格,blur 开销可忽略,保持默认。 + */ + disableBackdropBlur?: boolean } /** 判断扩展数据字段类型是否为数字(int/float/double/number/decimal 等)。 @@ -54,16 +61,19 @@ function isNumericFieldType(ft?: string): boolean { return true } +/** 模块级空数组常量:extSchema 未加载时用,避免 `?? []` 每次创建新引用导致 useMemo 失效。 */ +const EMPTY_EXT_TABLES: readonly { id: string; label: string; mode: string; columns: { name: string; label: string; type: string }[] }[] = [] + function SortableActiveCol({ col, onRemove, onConfig, configOpen, extTableLabel, extConfig, candleConfig: candlePanel, intradayConfig: intradayPanel, strategiesConfig, showStandaloneToggle, onToggleStandalone }: { col: ColumnConfig onRemove: (id: string) => void onConfig: (id: string | null) => void configOpen: boolean extTableLabel: string - extConfig: React.ReactNode - candleConfig: React.ReactNode - intradayConfig: React.ReactNode - strategiesConfig: React.ReactNode + extConfig: () => React.ReactNode + candleConfig: () => React.ReactNode + intradayConfig: () => React.ReactNode + strategiesConfig: () => React.ReactNode showStandaloneToggle?: boolean onToggleStandalone?: (id: string) => void }) { @@ -132,7 +142,7 @@ function SortableActiveCol({ col, onRemove, onConfig, configOpen, extTableLabel, - {hasConfig && configOpen && (isExt ? extConfig : isCandle ? candlePanel : isIntraday ? intradayPanel : strategiesConfig)} + {hasConfig && configOpen && (isExt ? extConfig() : isCandle ? candlePanel() : isIntraday ? intradayPanel() : strategiesConfig())} ) } @@ -149,6 +159,7 @@ export function ListColumnCustomizer({ extFieldFilter, showExtColumns = true, showStandaloneToggle = false, + disableBackdropBlur = false, }: ListColumnCustomizerProps) { const extSchema = useQuery({ queryKey: QK.extDataSchemaAll, @@ -158,6 +169,14 @@ export function ListColumnCustomizer({ }) const backdrop = useDialogBackdrop(onClose) + // columns/onChange 用 ref 镜像,让下方多数 useCallback 空依赖(addExtColumn 例外, + // 依赖 props.extColumnAlign)。callback 引用稳定后,columns 变更不再导致 + // SortableActiveCol 等子组件因 props 变化而无谓重渲染。 + const columnsRef = useRef(columns) + columnsRef.current = columns + const onChangeRef = useRef(onChange) + onChangeRef.current = onChange + const [searchQuery, setSearchQuery] = useState('') const [expandedGroups, setExpandedGroups] = useState>(new Set()) const [configOpenId, setConfigOpenId] = useState(null) @@ -175,16 +194,18 @@ export function ListColumnCustomizer({ const activeCols = useMemo(() => columns.filter(c => !c.pinned && c.visible), [columns]) const toggleVisible = useCallback((colId: string) => { - onChange(columns.map(c => + const cols = columnsRef.current + onChangeRef.current(cols.map(c => c.id === colId && !c.pinned ? { ...c, visible: !c.visible } : c )) - }, [columns, onChange]) + }, []) const toggleStandalone = useCallback((colId: string) => { - onChange(columns.map(c => + const cols = columnsRef.current + onChangeRef.current(cols.map(c => c.id === colId ? { ...c, standalone: !c.standalone } : c )) - }, [columns, onChange]) + }, []) const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), @@ -194,19 +215,21 @@ export function ListColumnCustomizer({ const handleDragEnd = useCallback((event: DragEndEvent) => { const { active, over } = event if (!over || active.id === over.id) return - const reorderCols = columns.filter(c => !c.pinned) - const pinnedCols = columns.filter(c => c.pinned) + const cols = columnsRef.current + const reorderCols = cols.filter(c => !c.pinned) + const pinnedCols = cols.filter(c => c.pinned) const ids = reorderCols.map(c => c.id) const oldIdx = ids.indexOf(active.id as string) const newIdx = ids.indexOf(over.id as string) if (oldIdx < 0 || newIdx < 0) return const reordered = arrayMove(reorderCols, oldIdx, newIdx) - onChange([...pinnedCols, ...reordered]) - }, [columns, onChange]) + onChangeRef.current([...pinnedCols, ...reordered]) + }, []) const addExtColumn = useCallback((configId: string, fieldName: string, fieldLabel?: string, fieldType?: string) => { + const cols = columnsRef.current const colId = `ext:${configId}:${fieldName}` - if (columns.some(c => c.id === colId)) { + if (cols.some(c => c.id === colId)) { toggleVisible(colId) return } @@ -217,64 +240,71 @@ export function ListColumnCustomizer({ visible: true, align: extColumnAlign, } - const actionIdx = columns.findIndex(c => c.id === 'builtin:action') + const actionIdx = cols.findIndex(c => c.id === 'builtin:action') if (actionIdx >= 0) { - const next = [...columns] + const next = [...cols] next.splice(actionIdx, 0, newCol) - onChange(next) + onChangeRef.current(next) } else { - onChange([...columns, newCol]) + onChangeRef.current([...cols, newCol]) } - }, [columns, extColumnAlign, onChange, toggleVisible]) + }, [extColumnAlign, toggleVisible]) const hideColumn = useCallback((colId: string) => { - onChange(columns.map(c => c.id === colId ? { ...c, visible: false } : c)) - }, [columns, onChange]) + const cols = columnsRef.current + onChangeRef.current(cols.map(c => c.id === colId ? { ...c, visible: false } : c)) + }, []) const updateExtDisplay = useCallback((colId: string, patch: Partial) => { - onChange(columns.map(c => { + const cols = columnsRef.current + onChangeRef.current(cols.map(c => { if (c.id !== colId) return c return { ...c, extDisplay: { displayMode: 'tag', ...(c.extDisplay || {}), ...patch } } })) - }, [columns, onChange]) + }, []) const resetExtDisplay = useCallback((colId: string) => { - onChange(columns.map(c => { + const cols = columnsRef.current + onChangeRef.current(cols.map(c => { if (c.id !== colId) return c const { extDisplay, ...rest } = c return rest })) - }, [columns, onChange]) + }, []) const updateCandleConfig = useCallback((colId: string, patch: Partial) => { - onChange(columns.map(c => { + const cols = columnsRef.current + onChangeRef.current(cols.map(c => { if (c.id !== colId) return c return { ...c, candleConfig: { ...c.candleConfig, ...patch } } })) - }, [columns, onChange]) + }, []) const resetCandleConfig = useCallback((colId: string) => { - onChange(columns.map(c => { + const cols = columnsRef.current + onChangeRef.current(cols.map(c => { if (c.id !== colId) return c const { candleConfig, ...rest } = c return rest })) - }, [columns, onChange]) + }, []) const updateIntradayConfig = useCallback((colId: string, patch: Partial) => { - onChange(columns.map(c => { + const cols = columnsRef.current + onChangeRef.current(cols.map(c => { if (c.id !== colId) return c return { ...c, intradayConfig: { ...c.intradayConfig, ...patch } } })) - }, [columns, onChange]) + }, []) const resetIntradayConfig = useCallback((colId: string) => { - onChange(columns.map(c => { + const cols = columnsRef.current + onChangeRef.current(cols.map(c => { if (c.id !== colId) return c const { intradayConfig, ...rest } = c return rest })) - }, [columns, onChange]) + }, []) const toggleGroup = useCallback((groupId: string) => { setExpandedGroups(prev => { @@ -294,8 +324,8 @@ export function ListColumnCustomizer({ }) }, []) - const extTables = extSchema.data?.items ?? [] - const extTableLabelMap = new Map(extTables.map(t => [t.id, t.label])) + const extTables = extSchema.data?.items ?? EMPTY_EXT_TABLES + const extTableLabelMap = useMemo(() => new Map(extTables.map(t => [t.id, t.label])), [extTables]) const query = searchQuery.trim().toLowerCase() const filteredGroups = useMemo(() => { @@ -722,7 +752,7 @@ export function ListColumnCustomizer({ renderExtConfig(col)} + candleConfig={() => renderCandleConfig(col)} + intradayConfig={() => renderIntradayConfig(col)} + strategiesConfig={() => renderStrategiesConfig(col)} showStandaloneToggle={showStandaloneToggle} onToggleStandalone={toggleStandalone} /> diff --git a/frontend/src/components/StockInfoBar.tsx b/frontend/src/components/StockInfoBar.tsx index 7b5891f..1e2d6c8 100644 --- a/frontend/src/components/StockInfoBar.tsx +++ b/frontend/src/components/StockInfoBar.tsx @@ -300,6 +300,7 @@ export function StockInfoBar({ builtinSectionLabel="可选指标" extColumnAlign="left" showStandaloneToggle + disableBackdropBlur /> ) diff --git a/frontend/src/components/monitor/RuleEditor.tsx b/frontend/src/components/monitor/RuleEditor.tsx index a22f4a5..3c644b2 100644 --- a/frontend/src/components/monitor/RuleEditor.tsx +++ b/frontend/src/components/monitor/RuleEditor.tsx @@ -479,9 +479,12 @@ export function RuleEditor({ rule, preset, simple, onClose, onSaved }: Props) { signals={selectedSignals} onChange={onSignalPickerChange} kind="entry" - builtinSignals={pickerSignals} - disabledSignals={intradaySupport?.available === false ? MONITOR_INTRADAY_SIGNAL_OPTIONS : []} - disabledSignalHint={intradaySupport?.reason} + options={{ + builtinSignals: pickerSignals, + disabledSignals: intradayDisabledSignals, + disabledSignalHint: intradayDisabledHint, + filterCustomByKind: false, + }} /> {hasIntradaySignal && (
@@ -1271,9 +1274,12 @@ export function RuleEditor({ rule, preset, simple, onClose, onSaved }: Props) { signals={selectedSignals} onChange={onSignalPickerChange} kind="entry" - builtinSignals={pickerSignals} - disabledSignals={intradayDisabledSignals} - disabledSignalHint={intradayDisabledHint} + options={{ + builtinSignals: pickerSignals, + disabledSignals: intradayDisabledSignals, + disabledSignalHint: intradayDisabledHint, + filterCustomByKind: false, + }} /> {hasIntradaySignal && (
diff --git a/frontend/src/components/screener/SignalPicker.tsx b/frontend/src/components/screener/SignalPicker.tsx index 79e098d..8ce3f60 100644 --- a/frontend/src/components/screener/SignalPicker.tsx +++ b/frontend/src/components/screener/SignalPicker.tsx @@ -1,9 +1,25 @@ import { useMemo } from 'react' import { useQuery } from '@tanstack/react-query' +import { PenLine } from 'lucide-react' import { api } from '@/lib/api' import { QK } from '@/lib/queryKeys' import { SIGNAL_OPTIONS, cnSignal } from '@/lib/signals' +/** 展示与过滤可选项 (全部可选, 有默认值) */ +interface SignalPickerOptions { + /** 渲染尺寸: dialog = 选股弹窗紧凑样式; panel = 回测页设置抽屉样式 */ + variant?: 'dialog' | 'panel' + builtinSignals?: { key: string; label: string }[] + disabledSignals?: string[] + disabledSignalHint?: string + /** + * 是否按 kind 过滤自定义信号 (csg_*)。默认 true (选股/回测: 入场区只显示 entry)。 + * 监控规则页设 false: 报警语义是"命中即报", 不分入场出场, 自定义信号全部显示 + * (与内置信号一致: builtinSignals 透传时本就不按 kind 过滤)。 + */ + filterCustomByKind?: boolean +} + interface Props { /** 当前选中的信号 ID 列表 */ signals: string[] @@ -11,30 +27,27 @@ interface Props { onChange: (next: string[]) => void /** 买点 / 卖点 — 决定自定义信号的过滤与配色主题 */ kind: 'entry' | 'exit' - /** 渲染尺寸: dialog = 选股弹窗紧凑样式; panel = 回测页设置抽屉样式 */ - variant?: 'dialog' | 'panel' - builtinSignals?: { key: string; label: string }[] - disabledSignals?: string[] - disabledSignalHint?: string + options?: SignalPickerOptions } /** * 买卖触发器信号选择 — 选股页弹窗 / 回测页共用。 * * - 内置信号 (signal_*): 全部展示 - * - 自定义信号 (csg_*): 按 kind 过滤 (entry / exit / both) - * - entry 蓝色主题, exit 橙色主题 + * - 自定义信号 (csg_*): 按 kind 过滤 (entry / exit / both), 除非 filterCustomByKind=false + * - entry 蓝色主题, exit 橙色主题; 自定义信号边框配色与内置一致, 右上角 PenLine 角标区分 */ -export function SignalPicker({ signals, onChange, kind, variant = 'panel', builtinSignals, disabledSignals = [], disabledSignalHint }: Props) { +export function SignalPicker({ signals, onChange, kind, options }: Props) { + const { variant = 'panel', builtinSignals, disabledSignals = [], disabledSignalHint, filterCustomByKind = true } = options ?? {} 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')) + .filter(s => s.enabled && (!filterCustomByKind || s.kind === kind || s.kind === 'both')) const names: Record = {} for (const cs of list) names[`csg_${cs.id}`] = cs.name return { list, names } - }, [customSignalsQuery.data, kind]) + }, [customSignalsQuery.data, kind, filterCustomByKind]) const toggle = (sig: string) => { const next = signals.includes(sig) ? signals.filter(x => x !== sig) : [...signals, sig] @@ -49,10 +62,6 @@ export function SignalPicker({ signals, onChange, kind, variant = 'panel', built 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' @@ -84,9 +93,12 @@ export function SignalPicker({ signals, onChange, kind, variant = 'panel', built type="button" onClick={() => toggle(id)} title="自定义信号" - className={`${btnCls} ${signals.includes(id) ? customActive : customIdle}`} + className={`${btnCls} relative ${signals.includes(id) ? active : idle}`} > {customOptions.names[id]} + + + ) })} diff --git a/frontend/src/components/screener/StrategySettingsDialog.tsx b/frontend/src/components/screener/StrategySettingsDialog.tsx index 6687cd6..e1f2220 100644 --- a/frontend/src/components/screener/StrategySettingsDialog.tsx +++ b/frontend/src/components/screener/StrategySettingsDialog.tsx @@ -582,7 +582,7 @@ export function StrategySettingsDialog({ strategyId, onClose, onSaved, onAiModif defaultOpen={false} extra={} > - +
任一入场点满足即进入候选。
@@ -593,7 +593,7 @@ export function StrategySettingsDialog({ strategyId, onClose, onSaved, onAiModif defaultOpen={false} extra={} > - +
任一出场点满足即触发出场。