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-02 17:48:12 +08:00
parent 55c030e3f5
commit 4e91018752
6 changed files with 32 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/usa_logo.png" /> <link rel="icon" type="image/svg+xml" href="/usa_logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>美伊军事态势显示</title> <title>美伊军事态势显示</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

BIN
server/data.db-shm
View File

Binary file not shown.

BIN
server/data.db-wal
View File

Binary file not shown.

2
src/App.tsx
View File

@@ -5,7 +5,7 @@ import { DbDashboard } from '@/pages/DbDashboard'
function App() { function App() {
return ( return (
<div <div
className="min-h-screen w-full bg-military-dark overflow-hidden" className="min-h-screen w-full max-w-full overflow-x-hidden bg-military-dark overflow-hidden"
style={{ background: '#0A0F1C' }} style={{ background: '#0A0F1C' }}
> >
<Routes> <Routes>

4
src/index.css
View File

@@ -17,7 +17,9 @@ body,
padding: 0; padding: 0;
min-height: 100vh; min-height: 100vh;
min-height: 100dvh; min-height: 100dvh;
min-width: 100vw; width: 100%;
max-width: 100vw;
overflow-x: hidden;
height: 100%; height: 100%;
background: var(--bg-dark); background: var(--bg-dark);
color: #F3F4F6; color: #F3F4F6;

53
src/pages/Dashboard.tsx
View File

@@ -24,7 +24,7 @@ export function Dashboard() {
}, []) }, [])
return ( return (
<div className="flex h-screen w-full min-h-0 flex-col overflow-hidden bg-military-dark font-orbitron"> <div className="flex h-screen w-full max-w-full min-h-0 flex-col overflow-hidden bg-military-dark font-orbitron">
{lastError && ( {lastError && (
<div className="shrink-0 bg-amber-500/20 px-4 py-2 text-center text-sm text-amber-400"> <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） {lastError}（使用本地缓存，请确保 API + WebSocket 已启动：npm run api）
@@ -33,9 +33,30 @@ export function Dashboard() {
<HeaderPanel /> <HeaderPanel />
<TimelinePanel /> <TimelinePanel />
<div className="flex min-h-0 flex-1 flex-col overflow-auto lg:flex-row lg:overflow-hidden"> <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-auto overflow-x-hidden xl:flex-row xl:overflow-hidden">
<aside className="order-3 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:order-1 lg:min-w-[320px] lg:max-w-[340px] lg:border-b-0 lg:border-r lg:p-4"> {/* 竖屏/小屏：地图(100%宽) → 战损 → 左 → 右。横屏≥1280px：左|中|右 */}
<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"> <main className="flex w-full min-h-[280px] shrink-0 flex-col overflow-hidden xl:order-2 xl:min-h-0 xl:min-w-0 xl:flex-1 xl:shrink">
<div className="h-[45vmin] min-h-[220px] w-full shrink-0 xl:min-h-0 xl:flex-1">
<WarMap />
</div>
<div className="flex shrink-0 flex-col gap-2 overflow-x-auto border-t border-military-border bg-military-panel/95 px-3 py-2 xl:flex-row xl:items-stretch xl:overflow-visible xl:px-4">
<BaseStatusPanel keyLocations={situation.usForces.keyLocations} className="shrink-0 xl:min-w-[200px] xl:border-r xl:border-military-border xl:pr-4" />
<CombatLossesPanel
usLosses={situation.usForces.combatLosses}
iranLosses={situation.iranForces.combatLosses}
conflictStats={situation.conflictStats}
civilianTotal={situation.civilianCasualtiesTotal}
className="min-w-0 flex-1 py-1"
/>
<IranBaseStatusPanel
keyLocations={situation.iranForces.keyLocations}
className="min-w-0 shrink-0 xl:min-w-[200px]"
/>
</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">
<div className="flex h-40 shrink-0 flex-col gap-0 rounded-lg border border-military-us/30 bg-military-panel/80 p-1 xl:h-48">
<div className="h-[55%] min-h-0 shrink-0"> <div className="h-[55%] min-h-0 shrink-0">
<PowerChart <PowerChart
usPower={situation.usForces.powerIndex} usPower={situation.usForces.powerIndex}
@@ -58,28 +79,8 @@ export function Dashboard() {
/> />
</aside> </aside>
<main className="order-1 flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden lg:order-2 lg:min-h-[200px]"> <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 xl:order-3 xl:min-w-[320px] xl:max-w-[340px] xl:border-t-0 xl:border-l xl:p-4">
<div className="min-h-[35vh] min-w-0 flex-1 shrink-0 lg:min-h-0"> <div className="h-40 shrink-0 rounded-lg border border-military-iran/30 bg-military-panel/80 p-1 xl:h-48">
<WarMap />
</div>
<div className="order-2 flex shrink-0 flex-col gap-2 overflow-x-auto border-t border-military-border bg-military-panel/95 px-4 py-2 lg:order-none lg:flex-row lg:items-stretch lg:overflow-visible">
<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}
conflictStats={situation.conflictStats}
civilianTotal={situation.civilianCasualtiesTotal}
className="min-w-0 flex-1 py-1"
/>
<IranBaseStatusPanel
keyLocations={situation.iranForces.keyLocations}
className="min-w-0 shrink-0 lg:min-w-[200px]"
/>
</div>
</main>
<aside className="order-4 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 <RetaliationGauge
value={situation.iranForces.retaliationSentiment} value={situation.iranForces.retaliationSentiment}
history={situation.iranForces.retaliationSentimentHistory} history={situation.iranForces.retaliationSentimentHistory}