feat(页面): 添加区域探索与国家边界功能

components/map/continent-map.tsx

@@ -7,6 +7,7 @@ import type { MapLayerMouseEvent, LngLatLike, MapRef } from "react-map-gl/maplib
 import type { LayerSpecification } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { useHeatmapData, type HeatmapPoint } from "@/hooks/use-heatmap-data";
+import { cn } from "@/lib/utils";
 import { MapPopup } from "./map-popup";
 
 const CARTO_STYLE =
@@ -88,9 +89,10 @@ const circleLayer: LayerSpecification = {
 
 interface ContinentMapProps {
   slug: string;
+  className?: string;
 }
 
-export function ContinentMap({ slug }: ContinentMapProps) {
+export function ContinentMap({ slug, className }: ContinentMapProps) {
   const locale = useLocale();
   const config = continentConfigs[slug] ?? continentConfigs.asia;
   const { points } = useHeatmapData(30000);
@@ -162,10 +164,10 @@ export function ContinentMap({ slug }: ContinentMapProps) {
   );
 
   return (
-    <div className="overflow-hidden rounded-xl border border-white/5 bg-[var(--bg-secondary)]">
+    <div className={cn("overflow-hidden rounded-xl border border-white/5 bg-[var(--bg-secondary)]", className)}>
       <Map
         initialViewState={config}
-        style={{ width: "100%", height: "calc(100vh - 12rem)" }}
+        style={{ width: "100%", height: "100%" }}
         mapStyle={CARTO_STYLE}
         interactiveLayerIds={["claw-circles"]}
         onClick={handleClick}