fix: 优化自适应界面

src/components/HeaderPanel.tsx

@@ -133,15 +133,15 @@ export function HeaderPanel() {
   }
 
   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">
+    <header className="flex shrink-0 flex-wrap items-center justify-between gap-2 overflow-hidden border-b border-military-border bg-military-panel/95 px-2 py-2 font-orbitron sm:gap-3 sm:px-4 sm:py-3 lg:flex-nowrap lg:gap-4 lg:px-6">
+      <div className="flex min-w-0 flex-wrap items-center gap-2 sm:gap-3 lg:gap-6">
+        <h1 className="truncate text-sm font-bold uppercase tracking-wider text-military-accent sm:text-base sm:tracking-widest lg:text-2xl">
           美伊军事态势显示
         </h1>
-        <div className="flex flex-col gap-0.5">
-          <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 className="flex min-w-0 shrink-0 flex-col gap-0.5">
+          <div className="flex items-center gap-1.5 text-xs text-military-text-secondary sm:gap-2 sm:text-sm">
+            <Clock className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
+            <span className="tabular-nums sm:min-w-[10rem]">{formatDateTime(now)}</span>
           </div>
           {(isConnected || isReplayMode) && (
             <span className={`text-[10px] ${isReplayMode ? 'text-military-accent' : 'text-green-500/90'}`}>
@@ -150,8 +150,8 @@ export function HeaderPanel() {
           )}
         </div>
       </div>
-      <div className="flex shrink-0 items-center gap-4">
-        <div className="flex items-center gap-2 text-military-text-secondary">
+      <div className="flex min-w-0 shrink flex-wrap items-center justify-end gap-2 sm:gap-3 lg:shrink-0 lg:gap-4">
+        <div className="flex shrink-0 items-center gap-1.5 text-military-text-secondary sm:gap-2">
           <Eye className="h-3.5 w-3.5" />
           <span className="text-[10px]">在看 <b className="text-military-accent tabular-nums">{viewers}</b></span>
           <span className="text-[10px] opacity-70">|</span>
@@ -160,48 +160,41 @@ export function HeaderPanel() {
         <button
           type="button"
           onClick={() => setFeedbackOpen(true)}
-          className="flex items-center gap-1 rounded border border-military-border px-2 py-1 text-[10px] text-military-text-secondary hover:bg-military-border/30 hover:text-cyan-400"
+          className="flex shrink-0 items-center gap-1 rounded border border-military-border px-1.5 py-0.5 text-[9px] text-military-text-secondary hover:bg-military-border/30 hover:text-cyan-400 sm:px-2 sm:py-1 sm:text-[10px]"
         >
-          <MessageSquare className="h-3 w-3" />
+          <MessageSquare className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
           留言
         </button>
         <button
           type="button"
           onClick={handleShare}
-          className="flex items-center gap-1 rounded border border-military-border px-2 py-1 text-[10px] text-military-text-secondary hover:bg-military-border/30 hover:text-cyan-400"
+          className="flex shrink-0 items-center gap-1 rounded border border-military-border px-1.5 py-0.5 text-[9px] text-military-text-secondary hover:bg-military-border/30 hover:text-cyan-400 sm:px-2 sm:py-1 sm:text-[10px]"
         >
-          <Share2 className="h-3 w-3" />
+          <Share2 className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
           分享
         </button>
         <button
           type="button"
           onClick={handleLike}
-          className={`flex items-center gap-1 rounded border px-2 py-1 text-[10px] transition-colors ${
+          className={`flex shrink-0 items-center gap-1 rounded border px-1.5 py-0.5 text-[9px] transition-colors sm:px-2 sm:py-1 sm:text-[10px] ${
             liked
               ? 'border-red-500/50 bg-red-500/20 text-red-400'
               : 'border-military-border text-military-text-secondary hover:bg-military-border/30 hover:text-red-400'
           }`}
         >
-          <Heart className={`h-3 w-3 ${liked ? 'fill-current' : ''}`} />
+          <Heart className={`h-2.5 w-2.5 sm:h-3 sm:w-3 ${liked ? 'fill-current' : ''}`} />
           点赞 {likes > 0 && <span className="tabular-nums">{likes}</span>}
         </button>
-        {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>
-          </>
-        )}
+        <span className={`flex items-center gap-1 ${isConnected ? 'text-green-500' : 'text-military-text-secondary'}`}>
+          {isConnected ? <Wifi className="h-3.5 w-3.5" /> : <WifiOff className="h-3.5 w-3.5" />}
+          <span className="text-xs">{isConnected ? '实时' : '已断开'}</span>
+        </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="flex min-w-0 shrink flex-wrap items-center gap-2 sm:gap-3 lg:gap-4">
+        <div className="flex shrink-0 flex-col">
+          <span className="text-[9px] uppercase tracking-wider text-military-text-secondary sm:text-[10px]">国力对比</span>
+          <div className="mt-0.5 flex h-1.5 w-20 overflow-hidden rounded-full bg-military-border sm:h-2 sm:w-28">
             <div
               className="bg-military-us transition-all"
               style={{ width: `${(usForces.powerIndex.overall / (usForces.powerIndex.overall + iranForces.powerIndex.overall)) * 100}%` }}
@@ -211,29 +204,29 @@ export function HeaderPanel() {
               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">
+          <div className="mt-0.5 flex justify-between text-[8px] tabular-nums text-military-text-secondary sm:text-[9px]">
             <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" />
+        <div className="hidden h-8 w-px shrink-0 bg-military-border sm:block" />
         <StatCard
           label="美国/盟国"
           value={usForces.powerIndex.overall}
           variant="us"
-          className="border-military-us/50"
+          className="shrink-0 border-military-us/50 px-1.5 py-1 sm:px-2 sm:py-1.5"
         />
         <StatCard
           label="伊朗"
           value={iranForces.powerIndex.overall}
           variant="iran"
-          className="border-military-iran/50"
+          className="shrink-0 border-military-iran/50 px-1.5 py-1 sm:px-2 sm:py-1.5"
         />
         <StatCard
           label="差距"
           value={`+${usForces.powerIndex.overall - iranForces.powerIndex.overall}`}
           variant="accent"
-          className="border-military-accent/50"
+          className="shrink-0 border-military-accent/50 px-1.5 py-1 sm:px-2 sm:py-1.5"
         />
       </div>
       {/* 留言弹窗 */}