feat: add all signals modal for strategy signals
This commit is contained in:
fanziqi
parent
c6f3555bd3
commit
9e8e50b4e7
@ -56,6 +56,15 @@ interface SignalRecord {
|
|||||||
signal: string;
|
signal: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface AllSignalRow {
|
||||||
|
ts: number;
|
||||||
|
score: number;
|
||||||
|
signal: string | null;
|
||||||
|
price?: number;
|
||||||
|
// factors 结构与 LatestIndicator.factors 基本一致，兼容 string/json
|
||||||
|
factors?: LatestIndicator["factors"] | string | null;
|
||||||
|
}
|
||||||
|
|
||||||
interface Gates {
|
interface Gates {
|
||||||
obi_threshold: number;
|
obi_threshold: number;
|
||||||
whale_usd_threshold: number;
|
whale_usd_threshold: number;
|
||||||
@ -326,6 +335,186 @@ function SignalHistory({ coin, strategyName }: { coin: string; strategyName: str
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function AllSignalsModal({
|
||||||
|
open,
|
||||||
|
onClose,
|
||||||
|
symbol,
|
||||||
|
strategyName,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
symbol: string;
|
||||||
|
strategyName: string;
|
||||||
|
}) {
|
||||||
|
const [rows, setRows] = useState<AllSignalRow[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
const fetchAll = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const res = await authFetch(
|
||||||
|
`/api/signals/history?symbol=${symbol}&limit=200&strategy=${strategyName}`
|
||||||
|
);
|
||||||
|
if (!res.ok) {
|
||||||
|
setError(`加载失败 (${res.status})`);
|
||||||
|
setRows([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const json = await res.json();
|
||||||
|
setRows(json.items || []);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
setError("加载失败，请稍后重试");
|
||||||
|
setRows([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fetchAll();
|
||||||
|
}, [open, symbol, strategyName]);
|
||||||
|
|
||||||
|
const parseFactors = (r: AllSignalRow): LatestIndicator["factors"] | null => {
|
||||||
|
const f = r.factors;
|
||||||
|
if (!f) return null;
|
||||||
|
if (typeof f === "string") {
|
||||||
|
try {
|
||||||
|
return JSON.parse(f);
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return f;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!open) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
||||||
|
<div className="bg-white rounded-xl shadow-2xl w-full max-w-3xl max-h-[80vh] flex flex-col border border-slate-200">
|
||||||
|
<div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between gap-2">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-slate-900">
|
||||||
|
所有历史信号（含未开仓）
|
||||||
|
</h3>
|
||||||
|
<p className="text-[11px] text-slate-500">
|
||||||
|
最近 200 条 · {symbol} · {strategyName}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-2 py-1 rounded-lg border border-slate-200 text-[11px] text-slate-600 hover:bg-slate-50"
|
||||||
|
>
|
||||||
|
关闭
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
{loading ? (
|
||||||
|
<div className="py-8 text-center text-slate-400 text-sm">
|
||||||
|
加载中...
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="py-8 text-center text-red-500 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
) : rows.length === 0 ? (
|
||||||
|
<div className="py-8 text-center text-slate-400 text-sm">
|
||||||
|
暂无历史信号
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<table className="w-full text-[11px] text-left">
|
||||||
|
<thead className="bg-slate-50 border-b border-slate-200 sticky top-0">
|
||||||
|
<tr>
|
||||||
|
<th className="px-3 py-2 text-slate-500 font-medium">时间</th>
|
||||||
|
<th className="px-3 py-2 text-slate-500 font-medium">信号</th>
|
||||||
|
<th className="px-3 py-2 text-slate-500 font-medium">总分</th>
|
||||||
|
<th className="px-3 py-2 text-slate-500 font-medium">
|
||||||
|
四层评分
|
||||||
|
</th>
|
||||||
|
<th className="px-3 py-2 text-slate-500 font-medium">门控</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{rows.map((r, idx) => {
|
||||||
|
const f = parseFactors(r);
|
||||||
|
const dirScore = f?.direction?.score ?? 0;
|
||||||
|
const envScore = f?.environment?.score ?? 0;
|
||||||
|
const auxScore = f?.auxiliary?.score ?? 0;
|
||||||
|
const momScore = f?.crowding?.score ?? 0;
|
||||||
|
const gateBlock =
|
||||||
|
(f?.gate_block as string | undefined) ||
|
||||||
|
(f?.block_reason as string | undefined) ||
|
||||||
|
"";
|
||||||
|
const gatePassed =
|
||||||
|
typeof f?.gate_passed === "boolean"
|
||||||
|
? f?.gate_passed
|
||||||
|
: !gateBlock;
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
key={`${r.ts}-${idx}`}
|
||||||
|
className="border-b border-slate-100 last:border-b-0 hover:bg-slate-50/60"
|
||||||
|
>
|
||||||
|
<td className="px-3 py-1.5 text-slate-500">
|
||||||
|
{bjtFull(r.ts)}
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-1.5">
|
||||||
|
<span
|
||||||
|
className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full border ${
|
||||||
|
r.signal === "LONG"
|
||||||
|
? "border-emerald-300 bg-emerald-50 text-emerald-600"
|
||||||
|
: r.signal === "SHORT"
|
||||||
|
? "border-red-300 bg-red-50 text-red-500"
|
||||||
|
: "border-slate-200 bg-slate-50 text-slate-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="text-[10px]">
|
||||||
|
{r.signal === "LONG"
|
||||||
|
? "多"
|
||||||
|
: r.signal === "SHORT"
|
||||||
|
? "空"
|
||||||
|
: "无"}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-1.5 font-mono text-slate-800">
|
||||||
|
{r.score}
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-1.5">
|
||||||
|
<div className="flex flex-wrap gap-1 text-[10px] text-slate-500">
|
||||||
|
<span>方:{dirScore}</span>
|
||||||
|
<span>环:{envScore}</span>
|
||||||
|
<span>辅:{auxScore}</span>
|
||||||
|
<span>动:{momScore}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-1.5">
|
||||||
|
{gatePassed ? (
|
||||||
|
<span className="inline-flex items-center px-1.5 py-0.5 rounded-full bg-emerald-50 text-emerald-600 border border-emerald-200 text-[10px]">
|
||||||
|
通过
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="inline-flex items-center px-1.5 py-0.5 rounded-full bg-red-50 text-red-500 border border-red-200 text-[10px]">
|
||||||
|
拒绝
|
||||||
|
{gateBlock ? ` · ${gateBlock}` : ""}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function CVDChart({ sym, minutes, strategyName, cvdFastWindow, cvdSlowWindow }: {
|
function CVDChart({ sym, minutes, strategyName, cvdFastWindow, cvdSlowWindow }: {
|
||||||
sym: string; minutes: number; strategyName: string; cvdFastWindow: string; cvdSlowWindow: string;
|
sym: string; minutes: number; strategyName: string; cvdFastWindow: string; cvdSlowWindow: string;
|
||||||
}) {
|
}) {
|
||||||
@ -398,6 +587,7 @@ export default function SignalsGeneric({ strategyId, symbol, cvdFastWindow, cvdS
|
|||||||
const [minutes, setMinutes] = useState(240);
|
const [minutes, setMinutes] = useState(240);
|
||||||
const coin = symbol.replace("USDT", "");
|
const coin = symbol.replace("USDT", "");
|
||||||
const strategyName = `custom_${strategyId.slice(0, 8)}`;
|
const strategyName = `custom_${strategyId.slice(0, 8)}`;
|
||||||
|
const [showAllSignals, setShowAllSignals] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3 p-1">
|
<div className="space-y-3 p-1">
|
||||||
@ -408,7 +598,17 @@ export default function SignalsGeneric({ strategyId, symbol, cvdFastWindow, cvdS
|
|||||||
CVD {cvdFastWindow}/{cvdSlowWindow} · 权重 {weights.direction}/{weights.env}/{weights.aux}/{weights.momentum} · {coin}
|
CVD {cvdFastWindow}/{cvdSlowWindow} · 权重 {weights.direction}/{weights.env}/{weights.aux}/{weights.momentum} · {coin}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-blue-100 text-blue-700 border border-blue-200">{coin}</span>
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAllSignals(true)}
|
||||||
|
className="px-2 py-0.5 rounded-lg border border-slate-200 text-[10px] text-slate-600 hover:bg-slate-50"
|
||||||
|
>
|
||||||
|
所有信号
|
||||||
|
</button>
|
||||||
|
<span className="px-2 py-0.5 rounded text-[10px] font-semibold bg-blue-100 text-blue-700 border border-blue-200">
|
||||||
|
{coin}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<IndicatorCards
|
<IndicatorCards
|
||||||
@ -441,6 +641,13 @@ export default function SignalsGeneric({ strategyId, symbol, cvdFastWindow, cvdS
|
|||||||
<CVDChart sym={symbol} minutes={minutes} strategyName={strategyName} cvdFastWindow={cvdFastWindow} cvdSlowWindow={cvdSlowWindow} />
|
<CVDChart sym={symbol} minutes={minutes} strategyName={strategyName} cvdFastWindow={cvdFastWindow} cvdSlowWindow={cvdSlowWindow} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<AllSignalsModal
|
||||||
|
open={showAllSignals}
|
||||||
|
onClose={() => setShowAllSignals(false)}
|
||||||
|
symbol={symbol}
|
||||||
|
strategyName={strategyName}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user