feat: add new file

src/pages/Dashboard.tsx

@@ -3,22 +3,30 @@ import { HeaderPanel } from '@/components/HeaderPanel'
 import { ForcePanel } from '@/components/ForcePanel'
 import { WarMap } from '@/components/WarMap'
 import { CombatLossesPanel } from '@/components/CombatLossesPanel'
+import { BaseStatusPanel } from '@/components/BaseStatusPanel'
 import { PowerChart } from '@/components/PowerChart'
 import { InvestmentTrendChart } from '@/components/InvestmentTrendChart'
 import { RetaliationGauge } from '@/components/RetaliationGauge'
 import { useSituationStore } from '@/store/situationStore'
-import { startWebSocketMock, stopWebSocketMock } from '@/store/situationStore'
+import { fetchAndSetSituation, startSituationWebSocket, stopSituationWebSocket } from '@/store/situationStore'
 
 export function Dashboard() {
   const situation = useSituationStore((s) => s.situation)
+  const isLoading = useSituationStore((s) => s.isLoading)
+  const lastError = useSituationStore((s) => s.lastError)
 
   useEffect(() => {
-    startWebSocketMock()
-    return () => stopWebSocketMock()
+    fetchAndSetSituation().finally(() => startSituationWebSocket())
+    return () => stopSituationWebSocket()
   }, [])
 
   return (
     <div className="flex h-screen w-full min-h-0 flex-col overflow-hidden bg-military-dark font-orbitron">
+          {lastError && (
+        <div className="shrink-0 bg-amber-500/20 px-4 py-2 text-center text-sm text-amber-400">
+          {lastError}（使用本地缓存，请确保 API + WebSocket 已启动：npm run api）
+        </div>
+      )}
       <HeaderPanel />
 
       <div className="flex min-h-0 flex-1 flex-col overflow-auto lg:flex-row lg:overflow-hidden">
@@ -50,10 +58,14 @@ export function Dashboard() {
           <div className="min-h-0 flex-1">
             <WarMap />
           </div>
-          <CombatLossesPanel
-            usLosses={situation.usForces.combatLosses}
-            iranLosses={situation.iranForces.combatLosses}
-          />
+          <div className="flex shrink-0 flex-col gap-2 border-t border-military-border bg-military-panel/95 px-4 py-2 lg:flex-row lg:items-stretch">
+            <BaseStatusPanel keyLocations={situation.usForces.keyLocations} className="shrink-0 lg:min-w-[200px] lg:border-r lg:border-military-border lg:pr-4" />
+            <CombatLossesPanel
+              usLosses={situation.usForces.combatLosses}
+              iranLosses={situation.iranForces.combatLosses}
+              className="min-w-0 flex-1 border-t-0"
+            />
+          </div>
         </main>
 
         <aside className="flex min-h-0 min-w-0 shrink-0 flex-col gap-2 overflow-y-auto overflow-x-visible border-t border-military-border p-3 lg:min-w-[320px] lg:max-w-[340px] lg:border-t-0 lg:border-l lg:p-4">