feat: new file

2026-03-01 17:21:15 +08:00
commit d705fd6c83
28 changed files with 5877 additions and 0 deletions
--- a/src/components/HeaderPanel.tsx
+++ b/src/components/HeaderPanel.tsx
@@ -0,0 +1,92 @@
+import { useState, useEffect } from 'react'
+import { StatCard } from './StatCard'
+import { useSituationStore } from '@/store/situationStore'
+import { Wifi, WifiOff, Clock } from 'lucide-react'
+
+export function HeaderPanel() {
+  const { situation, isConnected } = useSituationStore()
+  const { usForces, iranForces } = situation
+  const [now, setNow] = useState(() => new Date())
+
+  useEffect(() => {
+    const timer = setInterval(() => setNow(new Date()), 1000)
+    return () => clearInterval(timer)
+  }, [])
+
+  const formatDateTime = (d: Date) =>
+    d.toLocaleString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    })
+
+  return (
+    <header className="flex shrink-0 flex-wrap items-center justify-between gap-3 overflow-x-auto border-b border-military-border bg-military-panel/95 px-4 py-3 font-orbitron lg:flex-nowrap lg:px-6">
+      <div className="flex flex-wrap items-center gap-3 lg:gap-6">
+        <h1 className="text-base font-bold uppercase tracking-widest text-military-accent lg:text-2xl">
+          美伊军事态势显示
+        </h1>
+        <div className="flex items-center gap-2 text-sm text-military-text-secondary">
+          <Clock className="h-4 w-4 shrink-0" />
+          <span className="min-w-[11rem] tabular-nums">{formatDateTime(now)}</span>
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        {isConnected ? (
+          <>
+            <Wifi className="h-3.5 w-3.5 text-green-500" />
+            <span className="text-xs text-green-500">实时</span>
+          </>
+        ) : (
+          <>
+            <WifiOff className="h-3.5 w-3.5 text-military-text-secondary" />
+            <span className="text-xs text-military-text-secondary">已断开</span>
+          </>
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3 lg:gap-4">
+        <div className="flex flex-col">
+          <span className="text-[10px] uppercase tracking-wider text-military-text-secondary">国力对比</span>
+          <div className="mt-0.5 flex h-2 w-28 overflow-hidden rounded-full bg-military-border">
+            <div
+              className="bg-military-us transition-all"
+              style={{ width: `${(usForces.powerIndex.overall / (usForces.powerIndex.overall + iranForces.powerIndex.overall)) * 100}%` }}
+            />
+            <div
+              className="bg-military-iran transition-all"
+              style={{ width: `${(iranForces.powerIndex.overall / (usForces.powerIndex.overall + iranForces.powerIndex.overall)) * 100}%` }}
+            />
+          </div>
+          <div className="mt-0.5 flex justify-between text-[9px] tabular-nums text-military-text-secondary">
+            <span className="text-military-us">美 {usForces.powerIndex.overall}</span>
+            <span className="text-military-iran">伊 {iranForces.powerIndex.overall}</span>
+          </div>
+        </div>
+        <div className="h-8 w-px shrink-0 bg-military-border" />
+        <StatCard
+          label="美国/盟国"
+          value={usForces.powerIndex.overall}
+          variant="us"
+          className="border-military-us/50"
+        />
+        <StatCard
+          label="伊朗"
+          value={iranForces.powerIndex.overall}
+          variant="iran"
+          className="border-military-iran/50"
+        />
+        <StatCard
+          label="差距"
+          value={`+${usForces.powerIndex.overall - iranForces.powerIndex.overall}`}
+          variant="accent"
+          className="border-military-accent/50"
+        />
+      </div>
+    </header>
+  )
+}