feat: 用 react-map-gl + MapLibre 替换 react-simple-maps 实现 2D 地图

- 替换 react-simple-maps/d3-geo/topojson-client 为 react-map-gl + maplibre-gl
- 使用 CARTO dark-matter 免费暗色瓦片，自带国家/城市名标注
- 基于 locale 动态切换地图标注语言（name:zh / name_en）
- MapLibre 原生 heatmap + circle 双层渲染替代 SVG 热力图
- 提取 MapPopup 组件，配合 react-map-gl Popup 实现点击弹窗
- continent page 改为 dynamic import (ssr: false)
- dev 模式去掉 Turbopack 以兼容 maplibre-gl
- 删除 heatmap-layer.tsx 和 react-simple-maps 类型声明

components/layout/install-banner.tsx

@@ -1,18 +1,19 @@
 "use client";
 
 import { useState } from "react";
-import { Check, Copy, Terminal } from "lucide-react";
+import { Check, Copy, MessageSquare, Bot } from "lucide-react";
 import { useTranslations } from "next-intl";
 
-const INSTALL_COMMAND = "clawhub install openclaw-reporter";
-
 export function InstallBanner() {
   const t = useTranslations("installBanner");
+  const tGuide = useTranslations("skillGuide");
   const [copied, setCopied] = useState(false);
 
+  const prompt = t("prompt");
+
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(INSTALL_COMMAND);
+      await navigator.clipboard.writeText(prompt);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     } catch {
@@ -21,45 +22,112 @@ export function InstallBanner() {
   };
 
   return (
-    <div className="glow-card rounded-xl px-5 py-4">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        {/* Left: description */}
-        <div className="flex items-center gap-3 min-w-0">
-          <div
-            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
-            style={{ backgroundColor: "rgba(0, 240, 255, 0.1)" }}
+    <article
+      className="glow-card rounded-xl px-5 py-4"
+      data-skill="openclaw-reporter"
+      data-install-method="clawhub"
+      aria-label={tGuide("ariaLabel")}
+    >
+      <div className="flex flex-col gap-3">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 min-w-0">
+            <div
+              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
+              style={{ backgroundColor: "rgba(0, 240, 255, 0.1)" }}
+            >
+              <span className="text-lg">🦞</span>
+            </div>
+            <div className="min-w-0">
+              <p className="text-sm font-medium text-[var(--text-primary)]">
+                {t("title")}
+              </p>
+              <p className="text-xs text-[var(--text-muted)]">
+                {t("subtitle")}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={handleCopy}
+            className="group flex items-center gap-1.5 rounded-lg border border-white/10 bg-[var(--bg-primary)] px-3 py-2 transition-all hover:border-[var(--accent-cyan)]/40 hover:bg-[var(--bg-primary)]/80 active:scale-[0.98] cursor-pointer shrink-0"
+            title={t("copyTooltip")}
           >
-            <span className="text-lg">🦞</span>
-          </div>
-          <div className="min-w-0">
-            <p className="text-sm font-medium text-[var(--text-primary)]">
-              {t("title")}
-            </p>
-            <p className="text-xs text-[var(--text-muted)] truncate">
-              {t("subtitle")}
-            </p>
-          </div>
-        </div>
-
-        {/* Right: copy command */}
-        <button
-          onClick={handleCopy}
-          className="group flex items-center gap-2 rounded-lg border border-white/10 bg-[var(--bg-primary)] px-4 py-2.5 transition-all hover:border-[var(--accent-cyan)]/40 hover:bg-[var(--bg-primary)]/80 active:scale-[0.98] cursor-pointer shrink-0"
-          title={t("copyTooltip")}
-        >
-          <Terminal className="h-3.5 w-3.5 text-[var(--text-muted)]" />
-          <code className="font-mono text-sm text-[var(--accent-cyan)] select-all">
-            {INSTALL_COMMAND}
-          </code>
-          <div className="ml-1 flex h-5 w-5 items-center justify-center">
             {copied ? (
               <Check className="h-3.5 w-3.5 text-[var(--accent-green)]" />
             ) : (
               <Copy className="h-3.5 w-3.5 text-[var(--text-muted)] transition-colors group-hover:text-[var(--accent-cyan)]" />
             )}
+            <span className="text-xs text-[var(--text-muted)] group-hover:text-[var(--accent-cyan)]">
+              {copied ? t("copied") : t("copyButton")}
+            </span>
+          </button>
+        </div>
+
+        {/* Human prompt card */}
+        <button
+          onClick={handleCopy}
+          className="group relative w-full cursor-pointer rounded-lg border border-white/10 bg-[var(--bg-primary)] p-3 text-left transition-all hover:border-[var(--accent-cyan)]/30"
+        >
+          <div className="flex gap-2">
+            <MessageSquare className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--accent-cyan)]/60" />
+            <p className="text-xs leading-relaxed text-[var(--text-secondary)] select-all">
+              {prompt}
+            </p>
           </div>
         </button>
+
+        {/* AI-crawlable installation guide (collapsed for humans, fully in DOM for crawlers) */}
+        <details className="group/details">
+          <summary className="flex cursor-pointer items-center gap-1.5 text-[10px] text-[var(--text-muted)] hover:text-[var(--text-secondary)]">
+            <Bot className="h-3 w-3" />
+            <span>{tGuide("summaryLabel")}</span>
+          </summary>
+
+          <div className="mt-3 space-y-3 rounded-lg border border-white/5 bg-[var(--bg-primary)] p-4 text-xs leading-relaxed text-[var(--text-muted)]">
+            <section>
+              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("whatTitle")}</h3>
+              <p>{tGuide("whatDescription")}</p>
+            </section>
+
+            <section>
+              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("installTitle")}</h3>
+              <ol className="list-inside list-decimal space-y-1 pl-1">
+                <li>{tGuide("step1")}</li>
+                <li>{tGuide("step2")}</li>
+                <li>{tGuide("step3")}</li>
+                <li>{tGuide("step4")}</li>
+              </ol>
+            </section>
+
+            <section>
+              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("commandTitle")}</h3>
+              <code className="block rounded bg-[var(--bg-secondary)] px-3 py-2 font-mono text-[var(--accent-cyan)]">
+                clawhub install openclaw-reporter
+              </code>
+            </section>
+
+            <section>
+              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("dataTitle")}</h3>
+              <ul className="list-inside list-disc space-y-0.5 pl-1">
+                <li>{tGuide("data1")}</li>
+                <li>{tGuide("data2")}</li>
+                <li>{tGuide("data3")}</li>
+                <li>{tGuide("data4")}</li>
+              </ul>
+              <p className="mt-1 italic">{tGuide("dataNever")}</p>
+            </section>
+
+            <section>
+              <h3 className="mb-1 font-mono text-[var(--text-secondary)]">{tGuide("permissionsTitle")}</h3>
+              <ul className="list-inside list-disc space-y-0.5 pl-1">
+                <li>{tGuide("perm1")}</li>
+                <li>{tGuide("perm2")}</li>
+                <li>{tGuide("perm3")}</li>
+              </ul>
+            </section>
+          </div>
+        </details>
       </div>
-    </div>
+    </article>
   );
 }