From 9e8e50b4e76a49db745379ee18c594e2aa784e15 Mon Sep 17 00:00:00 2001
From: fanziqi <403508380@qq.com>
Date: Sat, 14 Mar 2026 00:42:02 +0800
Subject: [PATCH] feat: add all signals modal for strategy signals

---
 .../strategy-plaza/[id]/SignalsGeneric.tsx    | 209 +++++++++++++++++-
 1 file changed, 208 insertions(+), 1 deletion(-)

diff --git a/frontend/app/strategy-plaza/[id]/SignalsGeneric.tsx b/frontend/app/strategy-plaza/[id]/SignalsGeneric.tsx
index a0d555e..2e8aa73 100644
--- a/frontend/app/strategy-plaza/[id]/SignalsGeneric.tsx
+++ b/frontend/app/strategy-plaza/[id]/SignalsGeneric.tsx
@@ -56,6 +56,15 @@ interface SignalRecord {
   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 {
   obi_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 }: {
   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 coin = symbol.replace("USDT", "");
   const strategyName = `custom_${strategyId.slice(0, 8)}`;
+  const [showAllSignals, setShowAllSignals] = useState(false);
 
   return (
     <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}
           </p>
         </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>
 
       <IndicatorCards
@@ -441,6 +641,13 @@ export default function SignalsGeneric({ strategyId, symbol, cvdFastWindow, cvdS
           <CVDChart sym={symbol} minutes={minutes} strategyName={strategyName} cvdFastWindow={cvdFastWindow} cvdSlowWindow={cvdSlowWindow} />
         </div>
       </div>
+
+      <AllSignalsModal
+        open={showAllSignals}
+        onClose={() => setShowAllSignals(false)}
+        symbol={symbol}
+        strategyName={strategyName}
+      />
     </div>
   );
 }