fix:优化整个大屏界面

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>