From dc5b747385541f2b781eeb735546a43ddcae1f3e Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Mon, 25 May 2026 17:16:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E7=A6=BB=20KoyfinRowsTable=20?=
 =?UTF-8?q?=E4=B8=BA=E7=8B=AC=E7=AB=8B=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scan-terminal/KoyfinRowsTable.tsx         | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 frontend/components/dashboard/scan-terminal/KoyfinRowsTable.tsx

diff --git a/frontend/components/dashboard/scan-terminal/KoyfinRowsTable.tsx b/frontend/components/dashboard/scan-terminal/KoyfinRowsTable.tsx
new file mode 100644
index 00000000..9732eed7
--- /dev/null
+++ b/frontend/components/dashboard/scan-terminal/KoyfinRowsTable.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import clsx from "clsx";
+import type { ScanOpportunityRow } from "@/lib/dashboard-types";
+import { formatPrice } from "@/components/dashboard/scan-terminal/continent-grouping";
+import { rowName, pct } from "@/components/dashboard/scan-terminal/utils";
+
+function tablePrice(row: ScanOpportunityRow) {
+  return formatPrice(row.midpoint, row.ask, row.bid);
+}
+
+export function KoyfinRowsTable({
+  compact = false,
+  isEn,
+  onSelect,
+  rows,
+  selectedId,
+}: {
+  compact?: boolean;
+  isEn: boolean;
+  onSelect: (row: ScanOpportunityRow) => void;
+  rows: ScanOpportunityRow[];
+  selectedId?: string | null;
+}) {
+  return (
+    <table className="w-full border-collapse text-[11px]">
+      <thead>
+        <tr className="border-b border-slate-200 bg-[#f3f5f7] text-[11px] uppercase tracking-wide text-slate-500">
+          <th className="w-5 px-2 py-1 text-left font-black">
+            <span className="block h-3 w-3 rounded-[2px] border border-slate-300 bg-white" />
+          </th>
+          <th className="px-1.5 py-1 text-left font-black">
+            {isEn ? "City" : "城市"}
+          </th>
+          <th className="px-1.5 py-1 text-right font-black">
+            {isEn ? "Price" : "价格"}
+          </th>
+          <th className="px-1.5 py-1 text-right font-black">
+            {isEn ? "Chg" : "变化"}
+          </th>
+          <th className="px-2 py-1 text-right font-black">%</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => {
+          const edge = Number(row.edge_percent ?? row.signed_gap ?? row.gap ?? 0);
+          const positive = edge >= 0;
+          return (
+            <tr
+              key={row.id}
+              onClick={() => onSelect(row)}
+              className={clsx(
+                "cursor-pointer border-b border-slate-100 hover:bg-blue-50/70",
+                selectedId === row.id && "bg-blue-50",
+              )}
+            >
+              <td className="px-2 py-1">
+                <span className="block h-3 w-3 rounded-[2px] border border-slate-300 bg-white" />
+              </td>
+              <td className="px-1.5 py-1">
+                <div className="truncate font-bold text-slate-800">
+                  {rowName(row)}
+                </div>
+                <div className="truncate text-[10px] font-medium text-slate-400">
+                  {row.target_label || row.market_question || row.airport || "--"}
+                </div>
+              </td>
+              <td className="px-1.5 py-1 text-right font-mono font-bold text-slate-800">
+                {tablePrice(row)}
+              </td>
+              <td
+                className={clsx(
+                  "px-1.5 py-1 text-right font-mono font-bold",
+                  positive ? "text-emerald-700" : "text-red-600",
+                )}
+              >
+                {Number.isFinite(edge) ? `${positive ? "+" : ""}${edge.toFixed(1)}` : "--"}
+              </td>
+              <td
+                className={clsx(
+                  "px-2 py-1 text-right font-mono font-bold",
+                  positive ? "text-emerald-700" : "text-red-600",
+                )}
+              >
+                {pct(row.market_probability ?? row.market_event_probability ?? row.model_probability)}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}