fix: 优化自适应界面

src/components/WarMap.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useRef } from 'react'
+import { useMemo, useEffect, useRef, useCallback } from 'react'
 import Map, { Source, Layer } from 'react-map-gl'
 import type { MapRef } from 'react-map-gl'
 import type { Map as MapboxMap } from 'mapbox-gl'
@@ -20,6 +20,11 @@ const MAPBOX_TOKEN = config.mapboxAccessToken || ''
 
 // 相关区域 bbox：伊朗、以色列、胡塞区 (minLng, minLat, maxLng, maxLat)，覆盖红蓝区域
 const THEATER_BBOX = [22, 11, 64, 41] as const
+/** 移动端/小屏时 fitBounds 使区域完整显示 */
+const THEATER_BOUNDS: [[number, number], [number, number]] = [
+  [THEATER_BBOX[0], THEATER_BBOX[1]],
+  [THEATER_BBOX[2], THEATER_BBOX[3]],
+]
 const THEATER_CENTER = {
   longitude: (THEATER_BBOX[0] + THEATER_BBOX[2]) / 2,
   latitude: (THEATER_BBOX[1] + THEATER_BBOX[3]) / 2,
@@ -124,6 +129,7 @@ const FLIGHT_DURATION_MS = 2500 // 光点飞行单程时间
 
 export function WarMap() {
   const mapRef = useRef<MapRef>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
   const animRef = useRef<number>(0)
   const startRef = useRef<number>(0)
   const attackPathsRef = useRef<[number, number][][]>([])
@@ -433,6 +439,21 @@ export function WarMap() {
     return () => cancelAnimationFrame(animRef.current)
   }, [])
 
+  // 容器尺寸变化时 fitBounds，保证区域完整显示（移动端自适应）
+  const fitToTheater = useCallback(() => {
+    const map = mapRef.current?.getMap()
+    if (!map) return
+    map.fitBounds(THEATER_BOUNDS, { padding: 32, maxZoom: 6, duration: 0 })
+  }, [])
+
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    const ro = new ResizeObserver(() => fitToTheater())
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [fitToTheater])
+
   if (!MAPBOX_TOKEN) {
     return (
       <div className="flex h-full w-full items-center justify-center bg-military-dark">
@@ -455,7 +476,7 @@ export function WarMap() {
   }
 
   return (
-    <div className="relative h-full w-full">
+    <div ref={containerRef} className="relative h-full w-full min-w-0">
       {/* 图例 - 随容器自适应，避免遮挡 */}
       <div className="absolute bottom-2 left-2 z-10 flex flex-wrap gap-x-3 gap-y-1 rounded bg-black/70 px-2 py-1.5 text-[9px] sm:text-[10px]">
         <span className="flex items-center gap-1">
@@ -502,7 +523,7 @@ export function WarMap() {
         touchRotate={false}
         style={{ width: '100%', height: '100%' }}
         onLoad={(e) => {
-          // 地图加载完成后启动动画；延迟确保 Source/Layer 已挂载
+          fitToTheater()
           setTimeout(() => initAnimation.current(e.target), 150)
         }}
       >