From 475097d3722a4503849f061b6793e39ea7831563 Mon Sep 17 00:00:00 2001
From: Daniel <danielghost@163.com>
Date: Thu, 5 Mar 2026 16:11:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WarMap.tsx | 62 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/components/WarMap.tsx b/src/components/WarMap.tsx
index c696a01..a1eaf27 100644
--- a/src/components/WarMap.tsx
+++ b/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}