feat: new file

2026-03-01 17:21:15 +08:00
commit d705fd6c83
28 changed files with 5877 additions and 0 deletions
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -0,0 +1,77 @@
+import { useEffect } from 'react'
+import { HeaderPanel } from '@/components/HeaderPanel'
+import { ForcePanel } from '@/components/ForcePanel'
+import { WarMap } from '@/components/WarMap'
+import { CombatLossesPanel } from '@/components/CombatLossesPanel'
+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'
+
+export function Dashboard() {
+  const situation = useSituationStore((s) => s.situation)
+
+  useEffect(() => {
+    startWebSocketMock()
+    return () => stopWebSocketMock()
+  }, [])
+
+  return (
+    <div className="flex h-screen w-full min-h-0 flex-col overflow-hidden bg-military-dark font-orbitron">
+      <HeaderPanel />
+
+      <div className="flex min-h-0 flex-1 flex-col overflow-auto lg:flex-row lg:overflow-hidden">
+        <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 lg:min-w-[320px] lg:max-w-[340px] lg:border-b-0 lg:border-r lg:p-4">
+          <div className="flex h-44 shrink-0 flex-col gap-0 rounded-lg border border-military-us/30 bg-military-panel/80 p-1 lg:h-48">
+            <div className="h-[55%] min-h-0 shrink-0">
+              <PowerChart
+                usPower={situation.usForces.powerIndex}
+                iranPower={situation.iranForces.powerIndex}
+                className="h-full w-full"
+              />
+            </div>
+            <div className="h-[45%] min-h-0 shrink-0">
+              <InvestmentTrendChart
+                history={situation.usForces.wallStreetInvestmentTrend}
+                className="h-full"
+              />
+            </div>
+          </div>
+          <ForcePanel
+            side="us"
+            summary={situation.usForces.summary}
+            powerIndex={situation.usForces.powerIndex}
+            assets={situation.usForces.assets}
+          />
+        </aside>
+
+        <main className="flex min-h-[200px] min-w-0 flex-1 flex-col overflow-hidden">
+          <div className="min-h-0 flex-1">
+            <WarMap />
+          </div>
+          <CombatLossesPanel
+            usLosses={situation.usForces.combatLosses}
+            iranLosses={situation.iranForces.combatLosses}
+          />
+        </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">
+          <div className="h-44 shrink-0 rounded-lg border border-military-iran/30 bg-military-panel/80 p-1 lg:h-48">
+            <RetaliationGauge
+              value={situation.iranForces.retaliationSentiment}
+              history={situation.iranForces.retaliationSentimentHistory}
+              className="h-full"
+            />
+          </div>
+          <ForcePanel
+            side="iran"
+            summary={situation.iranForces.summary}
+            powerIndex={situation.iranForces.powerIndex}
+            assets={situation.iranForces.assets}
+          />
+        </aside>
+      </div>
+    </div>
+  )
+}