fix: 优化页面效果

src/components/WarMap.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useRef, useCallback } from 'react'
+import { useMemo, useEffect, useRef, useCallback, useState } 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'
@@ -215,6 +215,7 @@ export function WarMap() {
   const israelPathsRef = useRef<[number, number][][]>([])
   const hezbollahPathsRef = useRef<[number, number][][]>([])
   const hormuzPathsRef = useRef<[number, number][][]>([])
+  const [legendOpen, setLegendOpen] = useState(true)
   const situation = useReplaySituation()
   const { isReplayMode, playbackTime } = usePlaybackStore()
   const { usForces, iranForces, conflictEvents = [] } = situation
@@ -225,6 +226,13 @@ export function WarMap() {
   const usLocs = (usForces.keyLocations || []) as KeyLoc[]
   const irLocs = (iranForces.keyLocations || []) as KeyLoc[]
 
+  // 移动端默认收起右侧图例，避免遮挡；桌面端默认展开
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const isMobile = window.matchMedia('(max-width: 640px)').matches
+    if (isMobile) setLegendOpen(false)
+  }, [])
+
   const { usNaval, usBaseOp, usBaseDamaged, usBaseAttacked, labelsGeoJson } = useMemo(() => {
     const naval: GeoJSON.Feature<GeoJSON.Point>[] = []
     const op: GeoJSON.Feature<GeoJSON.Point>[] = []
@@ -897,6 +905,58 @@ export function WarMap() {
           <span className="h-1.5 w-1.5 rounded-sm bg-[#E066FF]/80" /> 库尔德武装
         </span>
       </div>
+      {/* 右侧图例模块：可收纳悬浮按钮 */}
+      <div className="absolute right-2 top-1/2 z-10 -translate-y-1/2">
+        {legendOpen ? (
+          <div className="flex flex-col gap-1 rounded bg-black/80 px-2 py-2 text-[9px] sm:text-[10px] shadow-lg border border-white/10">
+            <div className="mb-1 flex items-center justify-between gap-2 border-b border-white/10 pb-1">
+              <span className="text-[10px] font-semibold text-cyan-300">战场图例</span>
+              <button
+                type="button"
+                onClick={() => setLegendOpen(false)}
+                className="h-4 w-4 flex items-center justify-center rounded-full border border-cyan-400/60 text-[9px] text-cyan-300 hover:bg-cyan-400/20"
+                aria-label="收起图例"
+              >
+                ×
+              </button>
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="h-px w-4 bg-yellow-300" />
+              <span className="text-[9px] text-military-text-secondary">伊朗西部防御线</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="h-2 w-3 rotate-[-20deg] border-b-2 border-l-2 border-blue-400" />
+              <span className="text-[9px] text-military-text-secondary">库尔德攻势 / 进攻箭头</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="h-2 w-2 rounded-full border border-blue-400 bg-blue-500/60" />
+              <span className="text-[9px] text-military-text-secondary">美国/盟军打击目标</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="h-2 w-2 rounded-full border border-amber-300 bg-amber-300/60" />
+              <span className="text-[9px] text-military-text-secondary">霍尔木兹海峡交战区</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="h-1.5 w-1.5 rounded-full bg-[#22C55E]" />
+              <span className="text-[9px] text-military-text-secondary">美军基地 / 低烈度 GDELT</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="h-1.5 w-1.5 rounded-full bg-[#EF4444]" />
+              <span className="text-[9px] text-military-text-secondary">伊朗遭袭目标 / 高烈度事件</span>
+            </div>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setLegendOpen(true)}
+            className="flex items-center gap-1 rounded-full bg-black/80 px-2 py-1 text-[9px] text-cyan-300 shadow-lg border border-cyan-400/60 hover:bg-cyan-500/10"
+            aria-label="展开战场图例"
+          >
+            <span className="h-2 w-2 rounded-full bg-cyan-400/80" />
+            <span>图例</span>
+          </button>
+        )}
+      </div>
       <Map
         ref={mapRef}
         initialViewState={DEFAULT_VIEW}