fix：优化界面布局

src/components/CombatLossesOtherPanel.tsx

@@ -0,0 +1,59 @@
+import {
+  ShieldOff,
+  Building2,
+  Plane,
+  Ship,
+  Shield,
+  Car,
+  Drone,
+  Rocket,
+  Asterisk,
+  Amphora,
+} from 'lucide-react'
+import type { CombatLosses } from '@/data/mockData'
+
+interface CombatLossesOtherPanelProps {
+  usLosses: CombatLosses
+  iranLosses: CombatLosses
+  className?: string
+}
+
+export function CombatLossesOtherPanel({ usLosses, iranLosses, className = '' }: CombatLossesOtherPanelProps) {
+  const otherRows = [
+    { label: '基地', icon: Building2, iconColor: 'text-amber-500', us: `${usLosses.bases.destroyed}/${usLosses.bases.damaged}`, ir: `${iranLosses.bases.destroyed}/${iranLosses.bases.damaged}` },
+    { label: '战机', icon: Plane, iconColor: 'text-sky-400', us: usLosses.aircraft, ir: iranLosses.aircraft },
+    { label: '战舰', icon: Ship, iconColor: 'text-blue-500', us: usLosses.warships, ir: iranLosses.warships },
+    { label: '装甲', icon: Shield, iconColor: 'text-emerald-500', us: usLosses.armor, ir: iranLosses.armor },
+    { label: '车辆', icon: Car, iconColor: 'text-slate-400', us: usLosses.vehicles, ir: iranLosses.vehicles },
+    { label: '无人机', icon: Drone, iconColor: 'text-violet-400', us: usLosses.drones ?? 0, ir: iranLosses.drones ?? 0 },
+    { label: '导弹', icon: Rocket, iconColor: 'text-orange-500', us: usLosses.missiles ?? 0, ir: iranLosses.missiles ?? 0 },
+    { label: '直升机', icon: Asterisk, iconColor: 'text-teal-400', us: usLosses.helicopters ?? 0, ir: iranLosses.helicopters ?? 0 },
+    { label: '潜艇', icon: Amphora, iconColor: 'text-indigo-400', us: usLosses.submarines ?? 0, ir: iranLosses.submarines ?? 0 },
+  ]
+
+  return (
+    <div
+      className={`min-w-0 shrink-0 rounded border border-military-border/50 bg-military-dark/30 px-2 py-1.5 font-orbitron ${className}`}
+    >
+      <div className="mb-1 flex items-center gap-1 text-[8px] text-military-text-secondary">
+        <ShieldOff className="h-3 w-3 shrink-0 text-amber-500" />
+        装备毁伤 | 美 vs 伊
+      </div>
+      <div className="grid min-w-0 grid-cols-2 gap-x-2 gap-y-1 tabular-nums sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+        {otherRows.map(({ label, icon: Icon, iconColor, ...rest }, i) => (
+          <div key={i} className="flex min-w-0 items-center justify-between gap-1">
+            <span className="flex shrink-0 items-center gap-0.5 text-military-text-primary text-[9px] sm:text-[10px]">
+              <Icon className={`h-2.5 w-2.5 shrink-0 sm:h-3 sm:w-3 ${iconColor}`} />
+              {label}
+            </span>
+            <span className="min-w-0 shrink-0 text-right text-[9px] sm:text-[10px]">
+              <span className="text-military-us tabular-nums">{rest.us}</span>
+              <span className="text-military-text-secondary/60">:</span>
+              <span className="text-military-iran tabular-nums">{rest.ir}</span>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/CombatLossesPanel.tsx

@@ -1,15 +1,6 @@
 import {
-  Building2,
   Skull,
   Bandage,
-  Plane,
-  Ship,
-  Shield,
-  Car,
-  Drone,
-  Rocket,
-  Asterisk,
-  Amphora,
   TrendingDown,
   UserCircle,
   Activity,
@@ -29,20 +20,8 @@ interface CombatLossesPanelProps {
 export function CombatLossesPanel({ usLosses, iranLosses, conflictStats, civilianTotal, className = '' }: CombatLossesPanelProps) {
   const civ = civilianTotal ?? { killed: 0, wounded: 0 }
 
-  const otherRows = [
-    { label: '基地', icon: Building2, iconColor: 'text-amber-500', us: `${usLosses.bases.destroyed}/${usLosses.bases.damaged}`, ir: `${iranLosses.bases.destroyed}/${iranLosses.bases.damaged}` },
-    { label: '战机', icon: Plane, iconColor: 'text-sky-400', us: usLosses.aircraft, ir: iranLosses.aircraft },
-    { label: '战舰', icon: Ship, iconColor: 'text-blue-500', us: usLosses.warships, ir: iranLosses.warships },
-    { label: '装甲', icon: Shield, iconColor: 'text-emerald-500', us: usLosses.armor, ir: iranLosses.armor },
-    { label: '车辆', icon: Car, iconColor: 'text-slate-400', us: usLosses.vehicles, ir: iranLosses.vehicles },
-    { label: '无人机', icon: Drone, iconColor: 'text-violet-400', us: usLosses.drones ?? 0, ir: iranLosses.drones ?? 0 },
-    { label: '导弹', icon: Rocket, iconColor: 'text-orange-500', us: usLosses.missiles ?? 0, ir: iranLosses.missiles ?? 0 },
-    { label: '直升机', icon: Asterisk, iconColor: 'text-teal-400', us: usLosses.helicopters ?? 0, ir: iranLosses.helicopters ?? 0 },
-    { label: '潜艇', icon: Amphora, iconColor: 'text-indigo-400', us: usLosses.submarines ?? 0, ir: iranLosses.submarines ?? 0 },
-  ]
-
   return (
-    <div className={`flex min-h-[200px] min-w-0 flex-1 flex-col overflow-auto rounded border border-military-border bg-military-panel/95 font-orbitron ${className}`}>
+    <div className={`flex min-h-0 min-w-0 flex-1 flex-col overflow-visible rounded border border-military-border bg-military-panel/95 font-orbitron ${className}`}>
       <div className="mb-1.5 flex shrink-0 items-center justify-center gap-2 text-[10px] uppercase tracking-wider text-military-text-secondary">
         <TrendingDown className="h-2.5 w-2.5 shrink-0 text-amber-400" />
         战损
@@ -61,7 +40,7 @@ export function CombatLossesPanel({ usLosses, iranLosses, conflictStats, civilia
             <span className="flex items-center gap-0.5"><Skull className="h-3 w-3 text-red-500" /> 阵亡</span>
             <span className="flex items-center gap-0.5"><Bandage className="h-3 w-3 text-amber-500" /> 受伤</span>
             <span className="text-military-text-secondary/70">|</span>
-            <span>美 : 伊</span>
+            <span>美 vs 伊</span>
           </div>
           <div className="grid min-w-0 grid-cols-2 gap-x-2 gap-y-1 overflow-hidden text-center tabular-nums sm:gap-x-4">
             <div className="min-w-0 truncate text-military-us" title={`美: ${formatMillions(usLosses.personnelCasualties.killed)} / ${formatMillions(usLosses.personnelCasualties.wounded)}`}>
@@ -95,30 +74,6 @@ export function CombatLossesPanel({ usLosses, iranLosses, conflictStats, civilia
             </span>
           </div>
         </div>
-
-        {/* 其它 - 标签+图标+数字，竖屏横屏均完整显示，自适应排版 */}
-        <div className="min-w-0 shrink-0 rounded border border-military-border/50 bg-military-dark/30 px-2 py-1.5">
-          <div className="mb-1 text-[8px] text-military-text-secondary">美:伊</div>
-          <div className="grid min-w-0 grid-cols-2 gap-x-2 gap-y-1 tabular-nums sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-            {otherRows.map(({ label, icon: Icon, iconColor, ...rest }, i) => (
-              <div key={i} className="flex min-w-0 items-center justify-between gap-1">
-                <span className="flex shrink-0 items-center gap-0.5 text-military-text-primary text-[9px] sm:text-[10px]">
-                  <Icon className={`h-2.5 w-2.5 shrink-0 sm:h-3 sm:w-3 ${iconColor}`} />
-                  {label}
-                </span>
-                {'value' in rest ? (
-                  <span className="min-w-0 text-right text-[9px] text-amber-400 sm:text-[10px] tabular-nums">{String(rest.value)}</span>
-                ) : (
-                  <span className="min-w-0 shrink-0 text-right text-[9px] sm:text-[10px]">
-                    <span className="text-military-us tabular-nums">{rest.us}</span>
-                    <span className="text-military-text-secondary/60">:</span>
-                    <span className="text-military-iran tabular-nums">{rest.ir}</span>
-                  </span>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
       </div>
     </div>
   )

src/pages/Dashboard.tsx

@@ -4,6 +4,7 @@ import { TimelinePanel } from '@/components/TimelinePanel'
 import { ForcePanel } from '@/components/ForcePanel'
 import { WarMap } from '@/components/WarMap'
 import { CombatLossesPanel } from '@/components/CombatLossesPanel'
+import { CombatLossesOtherPanel } from '@/components/CombatLossesOtherPanel'
 import { IranBaseStatusPanel } from '@/components/IranBaseStatusPanel'
 import { BaseStatusPanel } from '@/components/BaseStatusPanel'
 import { PowerChart } from '@/components/PowerChart'
@@ -54,6 +55,13 @@ export function Dashboard() {
               className="order-3 min-w-0 shrink-0 xl:min-w-[200px]"
             />
           </div>
+          {/* 战损其它数据：单独放在中间板块最底部，移动端/网页端均完整显示 */}
+          <div className="shrink-0 border-t border-military-border/50 bg-military-panel/95 px-3 py-2 xl:px-4">
+            <CombatLossesOtherPanel
+              usLosses={situation.usForces.combatLosses}
+              iranLosses={situation.iranForces.combatLosses}
+            />
+          </div>
         </main>
 
         <aside className="flex min-h-0 min-w-0 shrink-0 flex-col gap-2 overflow-y-auto overflow-x-visible border-b border-military-border p-3 xl:order-1 xl:min-w-[320px] xl:max-w-[340px] xl:border-b-0 xl:border-r xl:p-4">