fix:优化数据样式

src/components/TimelinePanel.tsx

@@ -1,10 +1,13 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Play, Pause, SkipBack, SkipForward, History } from 'lucide-react'
 import { usePlaybackStore, REPLAY_TICKS, REPLAY_START, REPLAY_END } from '@/store/playbackStore'
 import { useSituationStore } from '@/store/situationStore'
 import { NewsTicker } from './NewsTicker'
 import { config } from '@/config'
 
+/** 冲突开始时间：2月28日凌晨 03:00（本地时间） */
+const CONFLICT_START = new Date(2026, 1, 28, 3, 0, 0, 0)
+
 function formatTick(iso: string): string {
   const d = new Date(iso)
   return d.toLocaleString('zh-CN', {
@@ -16,8 +19,17 @@ function formatTick(iso: string): string {
   })
 }
 
+function getConflictDuration(toTime: Date): { days: number; hours: number } {
+  const diffMs = toTime.getTime() - CONFLICT_START.getTime()
+  if (diffMs <= 0) return { days: 0, hours: 0 }
+  const days = Math.floor(diffMs / (24 * 60 * 60 * 1000))
+  const hours = Math.floor((diffMs % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000))
+  return { days, hours }
+}
+
 export function TimelinePanel() {
   const situation = useSituationStore((s) => s.situation)
+  const [now, setNow] = useState(() => new Date())
   const {
     isReplayMode,
     playbackTime,
@@ -33,6 +45,14 @@ export function TimelinePanel() {
 
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
+  useEffect(() => {
+    const t = setInterval(() => setNow(new Date()), 1000)
+    return () => clearInterval(t)
+  }, [])
+
+  const toTime = isReplayMode ? new Date(playbackTime) : now
+  const conflictDuration = getConflictDuration(toTime)
+
   useEffect(() => {
     if (!isPlaying || !isReplayMode) {
       if (timerRef.current) {
@@ -64,8 +84,18 @@ export function TimelinePanel() {
   }
 
   return (
-    <div className="shrink-0 border-b border-military-border bg-military-panel/95 px-3 py-2">
-      <div className="flex flex-wrap items-center gap-3">
+    <div className="relative shrink-0 border-b border-military-border bg-military-panel/95 px-3 py-2">
+      {!isReplayMode && (
+        <div
+          className="pointer-events-none absolute inset-0 flex items-center justify-center px-2"
+          aria-hidden
+        >
+          <span className="tabular-nums font-bold text-red-500">
+            冲突已持续 {conflictDuration.days} 天 {conflictDuration.hours} 小时
+          </span>
+        </div>
+      )}
+      <div className="relative flex flex-wrap items-center gap-3">
         <button
           type="button"
           onClick={() => setReplayMode(!isReplayMode)}