86 lines
3.6 KiB
TypeScript
86 lines
3.6 KiB
TypeScript
'use client';
|
||
|
||
import React from 'react';
|
||
|
||
export interface RlmAlertData {
|
||
matchName: string;
|
||
market: string;
|
||
selection: string;
|
||
ticketPct: number; // 散戶注單佔比 (例如 82%)
|
||
handlePct: number; // 大戶資金佔比 (例如 15%)
|
||
openingOdds: number;
|
||
currentOdds: number;
|
||
}
|
||
|
||
interface RlmRadarBoardProps {
|
||
alerts: RlmAlertData[];
|
||
}
|
||
|
||
export function RLMRadarBoard({ alerts }: RlmRadarBoardProps) {
|
||
if (!alerts || alerts.length === 0) {
|
||
return (
|
||
<div className="w-full bg-stone-900 p-6 rounded-lg border border-stone-700 shadow-xl flex items-center justify-center min-h-[200px]">
|
||
<p className="text-stone-500 font-dotmatrix text-lg tracking-widest uppercase">
|
||
[ 系統監控中：目前無異常反向盤口移動 ]
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="w-full bg-stone-900 p-6 rounded-lg border border-quant-red shadow-2xl relative overflow-hidden">
|
||
{/* 背景警示條紋 */}
|
||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-quant-red via-quant-orange to-quant-red animate-pulse-fast"></div>
|
||
|
||
<div className="mb-6 flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-2xl text-quant-red font-dotmatrix animate-blink uppercase font-bold tracking-wider">
|
||
🚨 警告：偵測到反向盤口移動 (反向盤口)
|
||
</h2>
|
||
<p className="text-stone-400 text-sm mt-1">莊家正在轉移風險，聰明錢流向已確認。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
|
||
{alerts.map((alert, index) => (
|
||
<div key={index} className="bg-stone-800 p-4 rounded border border-stone-700 hover:border-quant-orange transition-colors">
|
||
<h3 className="text-stone-200 font-bold mb-3">{alert.matchName} | {alert.market}</h3>
|
||
|
||
<div className="space-y-4">
|
||
{/* 資金流向對比 */}
|
||
<div>
|
||
<div className="flex justify-between text-xs font-dotmatrix uppercase text-stone-400 mb-1">
|
||
<span>散戶看好度 (Tickets)</span>
|
||
<span className="text-stone-200">{alert.ticketPct}%</span>
|
||
</div>
|
||
<div className="w-full h-2 bg-stone-700 rounded overflow-hidden">
|
||
<div className="h-full bg-stone-500" style={{ width: `${alert.ticketPct}%` }}></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex justify-between text-xs font-dotmatrix uppercase text-quant-orange mb-1">
|
||
<span>聰明錢流向 (Handle)</span>
|
||
<span>{alert.handlePct}%</span>
|
||
</div>
|
||
<div className="w-full h-2 bg-stone-700 rounded overflow-hidden">
|
||
<div className="h-full bg-quant-orange" style={{ width: `${alert.handlePct}%` }}></div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 賠率變動對比 */}
|
||
<div className="mt-4 pt-3 border-t border-stone-700 flex justify-between items-center">
|
||
<span className="text-sm text-stone-400">盤口水位變動 [{alert.selection}]</span>
|
||
<div className="flex items-center space-x-3 font-dotmatrix text-lg">
|
||
<span className="text-stone-500 line-through">{alert.openingOdds.toFixed(2)}</span>
|
||
<span className="text-quant-red animate-pulse-fast font-bold">➔ {alert.currentOdds.toFixed(2)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|