fix:优化整个大屏界面

src/components/CombatLossesPanel.tsx

@@ -1,6 +1,5 @@
 import {
   Building2,
-  Users,
   Skull,
   Bandage,
   Plane,
@@ -8,108 +7,92 @@ import {
   Shield,
   Car,
   TrendingDown,
+  UserCircle,
+  Activity,
 } from 'lucide-react'
 import { formatMillions } from '@/utils/formatNumber'
-import type { CombatLosses } from '@/data/mockData'
+import type { CombatLosses, ConflictStats } from '@/data/mockData'
 
 interface CombatLossesPanelProps {
   usLosses: CombatLosses
   iranLosses: CombatLosses
+  conflictStats?: ConflictStats | null
   className?: string
 }
 
-const LOSS_ITEMS: {
-  key: keyof Omit<CombatLosses, 'bases' | 'personnelCasualties'>
-  label: string
-  icon: typeof Plane
-  iconColor: string
-}[] = [
-  { key: 'aircraft', label: '战机', icon: Plane, iconColor: 'text-sky-400' },
-  { key: 'warships', label: '战舰', icon: Ship, iconColor: 'text-blue-500' },
-  { key: 'armor', label: '装甲', icon: Shield, iconColor: 'text-emerald-500' },
-  { key: 'vehicles', label: '车辆', icon: Car, iconColor: 'text-slate-400' },
-]
+export function CombatLossesPanel({ usLosses, iranLosses, conflictStats, className = '' }: CombatLossesPanelProps) {
+  const civUs = usLosses.civilianCasualties ?? { killed: 0, wounded: 0 }
+  const civIr = iranLosses.civilianCasualties ?? { killed: 0, wounded: 0 }
+  const civTotal = { killed: (civUs.killed ?? 0) + (civIr.killed ?? 0), wounded: (civUs.wounded ?? 0) + (civIr.wounded ?? 0) }
+
+  const otherRows = [
+    { label: '平民', icon: UserCircle, iconColor: 'text-amber-400', value: `${formatMillions(civTotal.killed)} / ${formatMillions(civTotal.wounded)}`, noSide: true },
+    { label: '基地', icon: Building2, iconColor: 'text-amber-500', us: `${usLosses.bases.destroyed}/${usLosses.bases.damaged}`, ir: `${iranLosses.bases.destroyed}/${iranLosses.bases.damaged}` },
+    { label: '战机', icon: Plane, iconColor: 'text-sky-400', us: usLosses.aircraft, ir: iranLosses.aircraft },
+    { label: '战舰', icon: Ship, iconColor: 'text-blue-500', us: usLosses.warships, ir: iranLosses.warships },
+    { label: '装甲', icon: Shield, iconColor: 'text-emerald-500', us: usLosses.armor, ir: iranLosses.armor },
+    { label: '车辆', icon: Car, iconColor: 'text-slate-400', us: usLosses.vehicles, ir: iranLosses.vehicles },
+  ]
 
-export function CombatLossesPanel({ usLosses, iranLosses, className = '' }: CombatLossesPanelProps) {
   return (
-    <div
-      className={`
-        min-w-0 shrink-0 overflow-x-auto overflow-y-hidden border-t border-military-border scrollbar-thin bg-military-panel/95 px-4 py-2 font-orbitron
-        ${className}
-      `}
-    >
-      <div className="mb-2 flex items-center gap-1 text-[10px] uppercase tracking-wider text-military-text-secondary">
+    <div className={`flex min-h-[220px] max-h-[240px] min-w-0 flex-1 flex-col overflow-hidden rounded border border-military-border bg-military-panel/95 font-orbitron ${className}`}>
+      <div className="mb-1.5 flex shrink-0 items-center justify-center gap-2 text-[10px] uppercase tracking-wider text-military-text-secondary">
         <TrendingDown className="h-2.5 w-2.5 shrink-0 text-amber-400" />
-        战损数据
+        战损
+        {conflictStats && conflictStats.total_events > 0 && (
+          <span className="flex items-center gap-0.5 rounded bg-cyan-950/50 px-1 py-0.5 text-[9px] text-cyan-400">
+            <Activity className="h-2 w-2" />
+            {conflictStats.total_events}
+          </span>
+        )}
       </div>
-      <div className="flex min-w-0 flex-wrap gap-x-4 gap-y-3 overflow-x-auto text-xs">
-        {/* 基地 */}
-        <div className="flex shrink-0 min-w-0 flex-col gap-0.5 overflow-visible">
-          <span className="flex shrink-0 items-center gap-1 text-military-text-secondary">
-            <Building2 className="h-3 w-3 shrink-0 text-amber-500" />
-            基地
-          </span>
-          <div className="flex flex-col gap-0.5 tabular-nums">
-            <div className="flex min-w-0 items-baseline gap-1 overflow-hidden" title={`美 毁${usLosses.bases.destroyed} 损${usLosses.bases.damaged}`}>
-              <span className="shrink-0 text-military-us">美</span>
-              <span className="truncate">
-                毁<strong className="text-amber-400">{usLosses.bases.destroyed}</strong>
-                损<strong className="text-amber-300">{usLosses.bases.damaged}</strong>
-              </span>
+
+      <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden px-3 pb-2">
+        {/* 人员伤亡 - 单独容器 */}
+        <div className="flex shrink-0 flex-col justify-center overflow-hidden rounded-lg border border-red-900/50 bg-red-950/40 px-3 py-2">
+          <div className="mb-1 flex shrink-0 items-center justify-center gap-3 text-[9px] text-military-text-secondary">
+            <span className="flex items-center gap-0.5"><Skull className="h-3 w-3 text-red-500" /> 阵亡</span>
+            <span className="flex items-center gap-0.5"><Bandage className="h-3 w-3 text-amber-500" /> 受伤</span>
+            <span className="text-military-text-secondary/70">|</span>
+            <span>美 : 伊</span>
+          </div>
+          <div className="grid min-w-0 grid-cols-2 gap-x-2 gap-y-1 overflow-hidden text-center tabular-nums sm:gap-x-4">
+            <div className="min-w-0 truncate text-military-us" title={`美: ${formatMillions(usLosses.personnelCasualties.killed)} / ${formatMillions(usLosses.personnelCasualties.wounded)}`}>
+              <span className="text-base font-bold text-red-500">{formatMillions(usLosses.personnelCasualties.killed)}</span>
+              <span className="mx-0.5 text-military-text-secondary">/</span>
+              <span className="text-base font-semibold text-amber-500">{formatMillions(usLosses.personnelCasualties.wounded)}</span>
             </div>
-            <div className="flex min-w-0 items-baseline gap-1 overflow-hidden" title={`伊 毁${iranLosses.bases.destroyed} 损${iranLosses.bases.damaged}`}>
-              <span className="shrink-0 text-military-iran">伊</span>
-              <span className="truncate">
-                毁<strong className="text-amber-400">{iranLosses.bases.destroyed}</strong>
-                损<strong className="text-amber-300">{iranLosses.bases.damaged}</strong>
-              </span>
+            <div className="min-w-0 truncate text-military-iran" title={`伊: ${formatMillions(iranLosses.personnelCasualties.killed)} / ${formatMillions(iranLosses.personnelCasualties.wounded)}`}>
+              <span className="text-base font-bold text-red-500">{formatMillions(iranLosses.personnelCasualties.killed)}</span>
+              <span className="mx-0.5 text-military-text-secondary">/</span>
+              <span className="text-base font-semibold text-amber-500">{formatMillions(iranLosses.personnelCasualties.wounded)}</span>
             </div>
           </div>
         </div>
 
-        {/* 人员伤亡 */}
-        <div className="flex shrink-0 min-w-0 flex-col gap-0.5 overflow-visible">
-          <span className="flex shrink-0 items-center gap-1 text-military-text-secondary">
-            <Users className="h-3 w-3 shrink-0 text-slate-400" />
-            人员伤亡
-          </span>
-          <div className="flex flex-col gap-0.5 tabular-nums">
-            <div className="flex min-w-0 flex-wrap items-baseline gap-x-1" title={`美 阵亡${formatMillions(usLosses.personnelCasualties.killed)} 受伤${formatMillions(usLosses.personnelCasualties.wounded)}`}>
-              <span className="shrink-0 text-military-us">美</span>
-              <Skull className="h-2.5 w-2.5 shrink-0 text-red-500" />
-              <strong className="text-red-500">{formatMillions(usLosses.personnelCasualties.killed)}</strong>
-              <Bandage className="h-2.5 w-2.5 shrink-0 text-amber-500" />
-              <strong className="text-amber-500">{formatMillions(usLosses.personnelCasualties.wounded)}</strong>
-            </div>
-            <div className="flex min-w-0 flex-wrap items-baseline gap-x-1" title={`伊 阵亡${formatMillions(iranLosses.personnelCasualties.killed)} 受伤${formatMillions(iranLosses.personnelCasualties.wounded)}`}>
-              <span className="shrink-0 text-military-iran">伊</span>
-              <Skull className="h-2.5 w-2.5 shrink-0 text-red-500" />
-              <strong className="text-red-500">{formatMillions(iranLosses.personnelCasualties.killed)}</strong>
-              <Bandage className="h-2.5 w-2.5 shrink-0 text-amber-500" />
-              <strong className="text-amber-500">{formatMillions(iranLosses.personnelCasualties.wounded)}</strong>
-            </div>
+        {/* 其它 - 标签+图标+数字，单独容器 */}
+        <div className="min-h-0 min-w-0 flex-1 overflow-hidden rounded border border-military-border/50 bg-military-dark/30 px-2 py-1.5">
+          <div className="mb-1 text-[8px] text-military-text-secondary">美:伊</div>
+          <div className="grid grid-cols-2 gap-x-2 gap-y-0.5 overflow-hidden text-[11px] tabular-nums lg:grid-cols-3">
+            {otherRows.map(({ label, icon: Icon, iconColor, ...rest }, i) => (
+              <div key={i} className="flex min-w-0 items-center justify-between gap-1 overflow-hidden">
+                <span className="flex shrink-0 items-center gap-0.5 text-military-text-primary">
+                  <Icon className={`h-3 w-3 ${iconColor}`} />
+                  {label}
+                </span>
+                {'value' in rest ? (
+                  <span className="min-w-0 truncate text-right text-amber-400">{rest.value}</span>
+                ) : (
+                  <span className="min-w-0 truncate text-right">
+                    <span className="text-military-us">{rest.us}</span>
+                    <span className="text-military-text-secondary/60">:</span>
+                    <span className="text-military-iran">{rest.ir}</span>
+                  </span>
+                )}
+              </div>
+            ))}
           </div>
         </div>
-
-        {/* 战机 / 战舰 / 装甲 / 车辆 */}
-        {LOSS_ITEMS.map(({ key, label, icon: Icon, iconColor }) => (
-          <div key={key} className="flex shrink-0 min-w-0 flex-col gap-0.5 overflow-visible">
-            <span className="flex shrink-0 items-center gap-1 text-military-text-secondary">
-              <Icon className={`h-3 w-3 shrink-0 ${iconColor}`} />
-              {label}
-            </span>
-            <div className="flex flex-col gap-0.5 tabular-nums">
-              <div className="flex min-w-0 items-baseline gap-1">
-                <span className="shrink-0 text-military-us">美</span>
-                <strong>{usLosses[key]}</strong>
-              </div>
-              <div className="flex min-w-0 items-baseline gap-1">
-                <span className="shrink-0 text-military-iran">伊</span>
-                <strong>{iranLosses[key]}</strong>
-              </div>
-            </div>
-          </div>
-        ))}
       </div>
     </div>
   )

src/components/HeaderPanel.tsx

@@ -1,10 +1,14 @@
 import { useState, useEffect } from 'react'
 import { StatCard } from './StatCard'
 import { useSituationStore } from '@/store/situationStore'
+import { useReplaySituation } from '@/hooks/useReplaySituation'
+import { usePlaybackStore } from '@/store/playbackStore'
 import { Wifi, WifiOff, Clock } from 'lucide-react'
 
 export function HeaderPanel() {
-  const { situation, isConnected } = useSituationStore()
+  const situation = useReplaySituation()
+  const isConnected = useSituationStore((s) => s.isConnected)
+  const isReplayMode = usePlaybackStore((s) => s.isReplayMode)
   const { usForces, iranForces } = situation
   const [now, setNow] = useState(() => new Date())
 
@@ -47,9 +51,9 @@ export function HeaderPanel() {
             <Clock className="h-4 w-4 shrink-0" />
             <span className="min-w-[11rem] tabular-nums">{formatDateTime(now)}</span>
           </div>
-          {isConnected && (
-            <span className="text-[10px] text-green-500/90">
-              {formatDataTime(situation.lastUpdated)} (实时更新)
+          {(isConnected || isReplayMode) && (
+            <span className={`text-[10px] ${isReplayMode ? 'text-military-accent' : 'text-green-500/90'}`}>
+              {formatDataTime(situation.lastUpdated)} {isReplayMode ? '(回放)' : '(实时更新)'}
             </span>
           )}
         </div>

src/components/WarMap.tsx

@@ -3,7 +3,7 @@ import Map, { Source, Layer } from 'react-map-gl'
 import type { MapRef } from 'react-map-gl'
 import type { Map as MapboxMap } from 'mapbox-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
-import { useSituationStore } from '@/store/situationStore'
+import { useReplaySituation } from '@/hooks/useReplaySituation'
 import {
   ATTACKED_TARGETS,
   ALLIED_STRIKE_LOCATIONS,
@@ -129,8 +129,8 @@ export function WarMap() {
   const lincolnPathsRef = useRef<[number, number][][]>([])
   const fordPathsRef = useRef<[number, number][][]>([])
   const israelPathsRef = useRef<[number, number][][]>([])
-  const { situation } = useSituationStore()
-  const { usForces, iranForces } = situation
+  const situation = useReplaySituation()
+  const { usForces, iranForces, conflictEvents = [] } = situation
 
   const usLocs = (usForces.keyLocations || []) as KeyLoc[]
   const irLocs = (iranForces.keyLocations || []) as KeyLoc[]
@@ -239,6 +239,29 @@ export function WarMap() {
     [attackPaths]
   )
 
+  // GDELT 冲突事件：1–3 绿, 4–6 橙闪, 7–10 红脉
+  const { conflictEventsGreen, conflictEventsOrange, conflictEventsRed } = useMemo(() => {
+    const green: GeoJSON.Feature<GeoJSON.Point>[] = []
+    const orange: GeoJSON.Feature<GeoJSON.Point>[] = []
+    const red: GeoJSON.Feature<GeoJSON.Point>[] = []
+    for (const e of conflictEvents) {
+      const score = e.impact_score ?? 1
+      const f: GeoJSON.Feature<GeoJSON.Point> = {
+        type: 'Feature',
+        properties: { event_id: e.event_id, impact_score: score },
+        geometry: { type: 'Point', coordinates: [e.lng, e.lat] },
+      }
+      if (score <= 3) green.push(f)
+      else if (score <= 6) orange.push(f)
+      else red.push(f)
+    }
+    return {
+      conflictEventsGreen: { type: 'FeatureCollection' as const, features: green },
+      conflictEventsOrange: { type: 'FeatureCollection' as const, features: orange },
+      conflictEventsRed: { type: 'FeatureCollection' as const, features: red },
+    }
+  }, [conflictEvents])
+
   const hideNonBelligerentLabels = (map: MapboxMap) => {
     const labelLayers = [
       'country-label',
@@ -362,6 +385,20 @@ export function WarMap() {
           map.setPaintProperty('allied-strike-targets-pulse', 'circle-radius', r)
           map.setPaintProperty('allied-strike-targets-pulse', 'circle-opacity', opacity)
         }
+        // GDELT 橙色 (4–6)：闪烁
+        if (map.getLayer('gdelt-events-orange')) {
+          const blink = 0.5 + 0.5 * Math.sin(elapsed * 0.004)
+          map.setPaintProperty('gdelt-events-orange', 'circle-opacity', blink)
+        }
+        // GDELT 红色 (7–10)：脉冲扩散
+        if (map.getLayer('gdelt-events-red-pulse')) {
+          const cycle = 2200
+          const phase = (elapsed % cycle) / cycle
+          const r = 30 * phase
+          const opacity = Math.max(0, 1 - phase * 1.1)
+          map.setPaintProperty('gdelt-events-red-pulse', 'circle-radius', r)
+          map.setPaintProperty('gdelt-events-red-pulse', 'circle-opacity', opacity)
+        }
       } catch (_) {}
       animRef.current = requestAnimationFrame(tick)
     }
@@ -376,7 +413,10 @@ export function WarMap() {
         (map.getSource('attack-dots') && attackPathsRef.current.length > 0) ||
         (map.getSource('allied-strike-dots-lincoln') && lincolnPathsRef.current.length > 0) ||
         (map.getSource('allied-strike-dots-ford') && fordPathsRef.current.length > 0) ||
-        (map.getSource('allied-strike-dots-israel') && israelPathsRef.current.length > 0)
+        (map.getSource('allied-strike-dots-israel') && israelPathsRef.current.length > 0) ||
+        map.getSource('gdelt-events-green') ||
+        map.getSource('gdelt-events-orange') ||
+        map.getSource('gdelt-events-red')
       if (hasAnim) {
         animRef.current = requestAnimationFrame(tick)
       } else {
@@ -439,6 +479,15 @@ export function WarMap() {
         <span className="flex items-center gap-1">
           <span className="h-1.5 w-1.5 rounded-full bg-[#22D3EE]" /> 以色列打击
         </span>
+        <span className="flex items-center gap-1">
+          <span className="h-1.5 w-1.5 rounded-full bg-[#22C55E]" /> 低烈度
+        </span>
+        <span className="flex items-center gap-1">
+          <span className="h-1.5 w-1.5 rounded-full bg-[#F97316]" /> 中烈度
+        </span>
+        <span className="flex items-center gap-1">
+          <span className="h-1.5 w-1.5 rounded-full bg-[#EF4444]" /> 高烈度
+        </span>
       </div>
       <Map
         ref={mapRef}
@@ -537,6 +586,52 @@ export function WarMap() {
           />
         </Source>
 
+        {/* GDELT 冲突事件：1–3 绿点, 4–6 橙闪, 7–10 红脉 */}
+        <Source id="gdelt-events-green" type="geojson" data={conflictEventsGreen}>
+          <Layer
+            id="gdelt-events-green"
+            type="circle"
+            paint={{
+              'circle-radius': ['interpolate', ['linear'], ['zoom'], 4, 2, 8, 4, 12, 6],
+              'circle-color': '#22C55E',
+              'circle-stroke-width': 0.5,
+              'circle-stroke-color': '#fff',
+            }}
+          />
+        </Source>
+        <Source id="gdelt-events-orange" type="geojson" data={conflictEventsOrange}>
+          <Layer
+            id="gdelt-events-orange"
+            type="circle"
+            paint={{
+              'circle-radius': ['interpolate', ['linear'], ['zoom'], 4, 3, 8, 5, 12, 8],
+              'circle-color': '#F97316',
+              'circle-opacity': 0.8,
+            }}
+          />
+        </Source>
+        <Source id="gdelt-events-red" type="geojson" data={conflictEventsRed}>
+          <Layer
+            id="gdelt-events-red-dot"
+            type="circle"
+            paint={{
+              'circle-radius': ['interpolate', ['linear'], ['zoom'], 4, 2, 8, 4, 12, 6],
+              'circle-color': '#EF4444',
+              'circle-stroke-width': 0.5,
+              'circle-stroke-color': '#fff',
+            }}
+          />
+          <Layer
+            id="gdelt-events-red-pulse"
+            type="circle"
+            paint={{
+              'circle-radius': 0,
+              'circle-color': 'rgba(239, 68, 68, 0.5)',
+              'circle-opacity': 0,
+            }}
+          />
+        </Source>
+
         {/* 美以联军打击伊朗：路径线 */}
         <Source id="allied-strike-lines-lincoln" type="geojson" data={lincolnLinesGeoJson}>
           <Layer

src/data/mockData.ts

@@ -31,6 +31,8 @@ export interface PowerIndex {
 export interface CombatLosses {
   bases: { destroyed: number; damaged: number }
   personnelCasualties: { killed: number; wounded: number }
+  /** 平民伤亡 */
+  civilianCasualties?: { killed: number; wounded: number }
   aircraft: number
   warships: number
   armor: number
@@ -45,6 +47,23 @@ export interface SituationUpdate {
   severity: 'low' | 'medium' | 'high' | 'critical'
 }
 
+export interface ConflictEvent {
+  event_id: string
+  event_time: string
+  title: string
+  lat: number
+  lng: number
+  impact_score: number
+  url?: string
+}
+
+export interface ConflictStats {
+  total_events: number
+  high_impact_events: number
+  estimated_casualties: number
+  estimated_strike_count: number
+}
+
 export interface MilitarySituation {
   lastUpdated: string
   usForces: {
@@ -86,6 +105,10 @@ export interface MilitarySituation {
     retaliationSentimentHistory: { time: string; value: number }[]
   }
   recentUpdates: SituationUpdate[]
+  /** GDELT 冲突事件 (1–3 绿点, 4–6 橙闪, 7–10 红脉) */
+  conflictEvents?: ConflictEvent[]
+  /** 战损统计（展示用） */
+  conflictStats?: ConflictStats
 }
 
 export const INITIAL_MOCK_DATA: MilitarySituation = {
@@ -122,6 +145,7 @@ export const INITIAL_MOCK_DATA: MilitarySituation = {
     combatLosses: {
       bases: { destroyed: 0, damaged: 2 },
       personnelCasualties: { killed: 127, wounded: 384 },
+      civilianCasualties: { killed: 18, wounded: 52 },
       aircraft: 2,
       warships: 0,
       armor: 0,
@@ -171,6 +195,7 @@ export const INITIAL_MOCK_DATA: MilitarySituation = {
     combatLosses: {
       bases: { destroyed: 3, damaged: 8 },
       personnelCasualties: { killed: 2847, wounded: 5620 },
+      civilianCasualties: { killed: 412, wounded: 1203 },
       aircraft: 24,
       warships: 12,
       armor: 18,
@@ -219,4 +244,6 @@ export const INITIAL_MOCK_DATA: MilitarySituation = {
       severity: 'low',
     },
   ],
+  conflictEvents: [],
+  conflictStats: { total_events: 0, high_impact_events: 0, estimated_casualties: 0, estimated_strike_count: 0 },
 }

src/pages/Dashboard.tsx

@@ -1,17 +1,20 @@
 import { useEffect } from 'react'
 import { HeaderPanel } from '@/components/HeaderPanel'
+import { TimelinePanel } from '@/components/TimelinePanel'
 import { ForcePanel } from '@/components/ForcePanel'
 import { WarMap } from '@/components/WarMap'
 import { CombatLossesPanel } from '@/components/CombatLossesPanel'
+import { EventTimelinePanel } from '@/components/EventTimelinePanel'
 import { BaseStatusPanel } from '@/components/BaseStatusPanel'
 import { PowerChart } from '@/components/PowerChart'
 import { InvestmentTrendChart } from '@/components/InvestmentTrendChart'
 import { RetaliationGauge } from '@/components/RetaliationGauge'
 import { useSituationStore } from '@/store/situationStore'
+import { useReplaySituation } from '@/hooks/useReplaySituation'
 import { fetchAndSetSituation, startSituationWebSocket, stopSituationWebSocket } from '@/store/situationStore'
 
 export function Dashboard() {
-  const situation = useSituationStore((s) => s.situation)
+  const situation = useReplaySituation()
   const isLoading = useSituationStore((s) => s.isLoading)
   const lastError = useSituationStore((s) => s.lastError)
 
@@ -28,6 +31,7 @@ export function Dashboard() {
         </div>
       )}
       <HeaderPanel />
+      <TimelinePanel />
 
       <div className="flex min-h-0 flex-1 flex-col overflow-auto lg:flex-row lg:overflow-hidden">
         <aside className="flex min-h-0 min-w-0 shrink-0 flex-col gap-2 overflow-y-auto overflow-x-visible border-b border-military-border p-3 lg:min-w-[320px] lg:max-w-[340px] lg:border-b-0 lg:border-r lg:p-4">
@@ -63,8 +67,10 @@ export function Dashboard() {
             <CombatLossesPanel
               usLosses={situation.usForces.combatLosses}
               iranLosses={situation.iranForces.combatLosses}
-              className="min-w-0 flex-1 border-t-0"
+              conflictStats={situation.conflictStats}
+              className="min-w-0 flex-1 py-1"
             />
+            <EventTimelinePanel updates={situation.recentUpdates} conflictEvents={situation.conflictEvents} className="min-w-0 shrink-0 min-h-[80px] overflow-hidden lg:min-w-[240px]" />
           </div>
         </main>