Daniel/usa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:优化整个大屏界面

Browse Source
This commit is contained in:
Daniel
2026-03-01 22:26:14 +08:00
parent c07fc681dd
commit 24d0593e12
8 changed files with 728 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/CombatLossesPanel.tsx
View File

@@ -18,11 +18,16 @@ interface CombatLossesPanelProps {
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 },
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, className = '' }: CombatLossesPanelProps) {
@@ -34,14 +39,14 @@ export function CombatLossesPanel({ usLosses, iranLosses, className = '' }: Comb
`}
>
<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" />
<TrendingDown className="h-2.5 w-2.5 shrink-0 text-amber-400" />
战损数据
</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">
<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" />
<Building2 className="h-3 w-3 shrink-0 text-amber-500" />
基地
</span>
<div className="flex flex-col gap-0.5 tabular-nums">
@@ -63,44 +68,44 @@ export function CombatLossesPanel({ usLosses, iranLosses, className = '' }: Comb
</div>
{/* 人员伤亡 */}
<div className="flex min-w-0 flex-col gap-0.5 overflow-hidden">
<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" />
<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 items-center gap-1 overflow-hidden" title={`美 阵亡${formatMillions(usLosses.personnelCasualties.killed)} 受伤${formatMillions(usLosses.personnelCasualties.wounded)}`}>
<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-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>
<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 items-center gap-1 overflow-hidden" title={`伊 阵亡${formatMillions(iranLosses.personnelCasualties.killed)} 受伤${formatMillions(iranLosses.personnelCasualties.wounded)}`}>
<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-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>
<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>
</div>
{/* 战机 / 战舰 / 装甲 / 车辆 */}
{LOSS_ITEMS.map(({ key, label, icon: Icon }) => (
<div key={key} className="flex min-w-0 flex-col gap-0.5 overflow-hidden">
{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" />
<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 overflow-hidden">
<div className="flex min-w-0 items-baseline gap-1">
<span className="shrink-0 text-military-us">美</span>
<strong className="truncate">{usLosses[key]}</strong>
<strong>{usLosses[key]}</strong>
</div>
<div className="flex min-w-0 items-baseline gap-1 overflow-hidden">
<div className="flex min-w-0 items-baseline gap-1">
<span className="shrink-0 text-military-iran">伊</span>
<strong className="truncate">{iranLosses[key]}</strong>
<strong>{iranLosses[key]}</strong>
</div>
</div>
</div>