From 6f3fef4a3cbcaae9ee579acc0dc4bf3410087d55 Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Mon, 25 May 2026 01:50:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BB=88=E7=AB=AF=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=9F=8E=E5=B8=82=E5=8D=A1=E7=89=87=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/frontend/components/dashboard/scan-terminal/MobileCityCard.tsx b/frontend/components/dashboard/scan-terminal/MobileCityCard.tsx
new file mode 100644
index 00000000..1f8c3291
--- /dev/null
+++ b/frontend/components/dashboard/scan-terminal/MobileCityCard.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import type { ScanOpportunityRow } from "@/lib/dashboard-types";
+import {
+  formatPrice,
+  GAP_COLOR_MAP,
+  getGapColor,
+  getSignalLabel,
+  getSignalState,
+} from "@/components/dashboard/scan-terminal/continent-grouping";
+
+function rowName(row: ScanOpportunityRow) {
+  return row.city_display_name || row.display_name || row.city || "--";
+}
+
+function tempVal(value?: number | null, symbol?: string | null) {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return "--";
+  return `${n.toFixed(1)}${symbol || "°"}`;
+}
+
+export function MobileCityCard({
+  isEn,
+  onClick,
+  row,
+}: {
+  isEn: boolean;
+  onClick: (row: ScanOpportunityRow) => void;
+  row: ScanOpportunityRow;
+}) {
+  const signal = getSignalState(row);
+  const gapColor = GAP_COLOR_MAP[getGapColor(row)];
+
+  return (
+    <button
+      type="button"
+      onClick={() => onClick(row)}
+      className="w-full rounded-lg border border-slate-200 bg-white p-3 text-left shadow-sm hover:bg-blue-50/70 transition-colors"
+    >
+      {/* Row 1: City + Signal */}
+      <div className="flex items-center justify-between gap-2">
+        <span className="truncate text-sm font-bold text-slate-900">
+          {rowName(row)}
+        </span>
+        <span className="shrink-0 text-xs font-black">
+          <span className={signal === "active" ? "text-emerald-600" : signal === "watch" ? "text-amber-600" : signal === "closed" ? "text-slate-400" : "text-red-500"}>
+            {getSignalLabel(signal, isEn)}
+          </span>
+        </span>
+      </div>
+
+      {/* Row 2: Obs · Gap · Market */}
+      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+        <span className="font-mono font-bold">
+          Obs {tempVal(row.current_temp, row.temp_symbol)}
+        </span>
+        <span className={gapColor}>
+          Gap {tempVal(row.signed_gap ?? row.gap_to_target, row.temp_symbol)}
+        </span>
+        <span className="text-slate-600">
+          {formatPrice(row.midpoint, row.ask, row.bid)}
+        </span>
+      </div>
+
+      {/* Row 3: High · DEB */}
+      <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500">
+        <span>
+          High {tempVal(row.current_max_so_far, row.temp_symbol)}
+        </span>
+        <span>
+          DEB {tempVal(row.deb_prediction, row.temp_symbol)}
+        </span>
+      </div>
+    </button>
+  );
+}