feat: new file

src/components/WarMap.tsx

@@ -0,0 +1,99 @@
+import { useRef, useEffect } from 'react'
+import Map, { Marker } from 'react-map-gl'
+import type { MapRef } from 'react-map-gl'
+import 'mapbox-gl/dist/mapbox-gl.css'
+import { useSituationStore } from '@/store/situationStore'
+
+const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN || ''
+
+// Persian Gulf center
+const DEFAULT_VIEW = {
+  longitude: 54,
+  latitude: 27,
+  zoom: 5.5,
+}
+
+export function WarMap() {
+  const mapRef = useRef<MapRef>(null)
+  const { situation } = useSituationStore()
+  const { usForces, iranForces } = situation
+
+  const usMarkers = usForces.keyLocations
+  const iranMarkers = iranForces.keyLocations
+
+  // Fallback when no Mapbox token - show placeholder
+  if (!MAPBOX_TOKEN) {
+    return (
+      <div className="flex h-full w-full items-center justify-center bg-military-dark">
+        <div className="rounded-lg border border-military-border bg-military-panel p-8 text-center">
+          <p className="font-orbitron text-sm text-military-text-primary">
+            地图需要 Mapbox 令牌
+          </p>
+          <p className="mt-2 text-xs text-military-text-secondary">
+            请在 .env 中设置 VITE_MAPBOX_ACCESS_TOKEN
+          </p>
+          <div className="mt-4 flex justify-center gap-8">
+            <div>
+              <p className="text-[10px] text-military-us">美方位置</p>
+              {usMarkers.map((loc) => (
+                <p key={loc.name} className="text-xs text-military-text-primary">{loc.name}</p>
+              ))}
+            </div>
+            <div>
+              <p className="text-[10px] text-military-iran">伊方位置</p>
+              {iranMarkers.map((loc) => (
+                <p key={loc.name} className="text-xs text-military-text-primary">{loc.name}</p>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative h-full w-full">
+      <Map
+        ref={mapRef}
+        initialViewState={DEFAULT_VIEW}
+        mapStyle="mapbox://styles/mapbox/dark-v11"
+        mapboxAccessToken={MAPBOX_TOKEN}
+        attributionControl={false}
+        style={{ width: '100%', height: '100%' }}
+      >
+        {usMarkers.map((loc) => (
+          <Marker
+            key={`us-${loc.name}`}
+            longitude={loc.lng}
+            latitude={loc.lat}
+            anchor="bottom"
+            color="#3B82F6"
+          >
+            <div className="flex flex-col items-center">
+              <div className="h-4 w-4 rounded-full border-2 border-white bg-military-us shadow-lg" />
+              <span className="mt-1 rounded bg-military-panel px-1.5 py-0.5 font-orbitron text-[10px] text-military-us">
+                {loc.name}
+              </span>
+            </div>
+          </Marker>
+        ))}
+        {iranMarkers.map((loc) => (
+          <Marker
+            key={`ir-${loc.name}`}
+            longitude={loc.lng}
+            latitude={loc.lat}
+            anchor="bottom"
+            color="#EF4444"
+          >
+            <div className="flex flex-col items-center">
+              <div className="h-4 w-4 rounded-full border-2 border-white bg-military-iran shadow-lg" />
+              <span className="mt-1 rounded bg-military-panel px-1.5 py-0.5 font-orbitron text-[10px] text-military-iran">
+                {loc.name}
+              </span>
+            </div>
+          </Marker>
+        ))}
+      </Map>
+    </div>
+  )
+}