feat: new file

src/components/CombatLossesPanel.tsx

@@ -0,0 +1,111 @@
+import {
+  Building2,
+  Users,
+  Skull,
+  Bandage,
+  Plane,
+  Ship,
+  Shield,
+  Car,
+  TrendingDown,
+} from 'lucide-react'
+import { formatMillions } from '@/utils/formatNumber'
+import type { CombatLosses } from '@/data/mockData'
+
+interface CombatLossesPanelProps {
+  usLosses: CombatLosses
+  iranLosses: CombatLosses
+  className?: string
+}
+
+const LOSS_ITEMS: { key: keyof Omit<CombatLosses, 'bases' | 'personnelCasualties'>; label: string; icon: typeof Plane }[] = [
+  { key: 'aircraft', label: '战机', icon: Plane },
+  { key: 'warships', label: '战舰', icon: Ship },
+  { key: 'armor', label: '装甲', icon: Shield },
+  { key: 'vehicles', label: '车辆', icon: Car },
+]
+
+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">
+        <TrendingDown className="h-2.5 w-2.5 shrink-0" />
+        战损数据
+      </div>
+      <div className="grid min-w-0 grid-cols-2 gap-x-4 gap-y-3 text-xs sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 [&>*]:min-w-0">
+        {/* 基地 - 横向第一列 */}
+        <div className="flex min-w-0 flex-col gap-0.5 overflow-hidden">
+          <span className="flex shrink-0 items-center gap-1 text-military-text-secondary">
+            <Building2 className="h-3 w-3 shrink-0" />
+            基地
+          </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>
+            <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>
+          </div>
+        </div>
+
+        {/* 人员伤亡 */}
+        <div className="flex min-w-0 flex-col gap-0.5 overflow-hidden">
+          <span className="flex shrink-0 items-center gap-1 text-military-text-secondary">
+            <Users className="h-3 w-3 shrink-0" />
+            人员伤亡
+          </span>
+          <div className="flex flex-col gap-0.5 tabular-nums">
+            <div className="flex min-w-0 items-center gap-1 overflow-hidden" 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-400" />
+              <strong className="truncate text-red-400">{formatMillions(usLosses.personnelCasualties.killed)}</strong>
+              <Bandage className="h-2.5 w-2.5 shrink-0 text-amber-400" />
+              <strong className="truncate text-amber-400">{formatMillions(usLosses.personnelCasualties.wounded)}</strong>
+            </div>
+            <div className="flex min-w-0 items-center gap-1 overflow-hidden" 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-400" />
+              <strong className="truncate text-red-400">{formatMillions(iranLosses.personnelCasualties.killed)}</strong>
+              <Bandage className="h-2.5 w-2.5 shrink-0 text-amber-400" />
+              <strong className="truncate text-amber-400">{formatMillions(iranLosses.personnelCasualties.wounded)}</strong>
+            </div>
+          </div>
+        </div>
+
+        {/* 战机 / 战舰 / 装甲 / 车辆 */}
+        {LOSS_ITEMS.map(({ key, label, icon: Icon }) => (
+          <div key={key} className="flex min-w-0 flex-col gap-0.5 overflow-hidden">
+            <span className="flex shrink-0 items-center gap-1 text-military-text-secondary">
+              <Icon className="h-3 w-3 shrink-0" />
+              {label}
+            </span>
+            <div className="flex flex-col gap-0.5 tabular-nums">
+              <div className="flex min-w-0 items-baseline gap-1 overflow-hidden">
+                <span className="shrink-0 text-military-us">美</span>
+                <strong className="truncate">{usLosses[key]}</strong>
+              </div>
+              <div className="flex min-w-0 items-baseline gap-1 overflow-hidden">
+                <span className="shrink-0 text-military-iran">伊</span>
+                <strong className="truncate">{iranLosses[key]}</strong>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}