From 933cae74b4ee9ca22d66df2cf7f062d956f84f6d Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Mon, 25 May 2026 01:50:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BB=88=E7=AB=AF=E5=A4=A7?=
 =?UTF-8?q?=E6=B4=B2=E5=88=86=E7=BB=84=E6=A0=87=E9=A2=98=E8=A1=8C=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/ContinentGroupHeader.tsx    | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 frontend/components/dashboard/scan-terminal/ContinentGroupHeader.tsx

diff --git a/frontend/components/dashboard/scan-terminal/ContinentGroupHeader.tsx b/frontend/components/dashboard/scan-terminal/ContinentGroupHeader.tsx
new file mode 100644
index 00000000..97429688
--- /dev/null
+++ b/frontend/components/dashboard/scan-terminal/ContinentGroupHeader.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { ChevronDown, ChevronRight } from "lucide-react";
+import type { ContinentGroup } from "@/components/dashboard/scan-terminal/continent-grouping";
+
+export function ContinentGroupHeader({
+  group,
+  isExpanded,
+  isEn,
+  onToggle,
+}: {
+  group: ContinentGroup;
+  isExpanded: boolean;
+  isEn: boolean;
+  onToggle: () => void;
+}) {
+  const label = isEn ? group.labelEn : group.labelZh;
+  const parts: string[] = [`${group.rows.length}`];
+
+  if (group.activeCount > 0) {
+    parts.push(isEn ? `Active ${group.activeCount}` : `活跃 ${group.activeCount}`);
+  }
+  if (group.watchCount > 0) {
+    parts.push(isEn ? `Watch ${group.watchCount}` : `观察 ${group.watchCount}`);
+  }
+  if (group.localTimeRange) {
+    parts.push(`LT ${group.localTimeRange}`);
+  }
+  if (group.hotCity) {
+    parts.push(isEn ? `Hot: ${group.hotCity}` : `热门: ${group.hotCity}`);
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className="group flex w-full items-center gap-2 border-b border-slate-200 bg-[#eef2f6] px-3 py-2 text-left hover:bg-[#e2e8f0] transition-colors"
+    >
+      <span className="grid h-5 w-5 shrink-0 place-items-center text-slate-400 group-hover:text-slate-600">
+        {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+      </span>
+      <span className="text-xs font-black uppercase tracking-wide text-slate-600">
+        {label}
+      </span>
+      <span className="text-[11px] text-slate-400">
+        {parts.join(" · ")}
+      </span>
+    </button>
+  );
+}