US-Iran Military Situation Display Dashboard

A production-ready data visualization dashboard with 1920×1080 resolution, dark-themed military-grade UI.

Tech Stack

• Build: Vite (React + TypeScript)
• Styling: Tailwind CSS
• State: Zustand
• Charts: echarts, echarts-for-react
• Maps: react-map-gl, mapbox-gl
• Icons: lucide-react
• Font: Orbitron (Google Fonts)

Setup

npm install

Mapbox (optional)

For the interactive map, create a .env file:

cp .env.example .env
# Edit .env and add your Mapbox token from https://account.mapbox.com/access-tokens/

Without a token, the map area shows a placeholder with location labels.

API 与数据库

页面数据通过 REST API 从后端获取，后端使用 SQLite 存储。

# 首次运行：初始化数据库并写入种子数据
npm run api:seed

# 启动 API 服务（默认 http://localhost:3001）
npm run api

开发时需同时运行前端与 API：

# 终端 1
npm run api

# 终端 2
npm run dev

API 会由 Vite 代理到 /api，前端通过 /api/situation 获取完整态势数据。数据库文件位于 server/data.db，可通过修改表数据实现动态调整。

Development

npm run dev

Build

npm run build

Project Structure

src/
├── components/
│   ├── HeaderPanel.tsx   # Top global overview & power index comparison
│   ├── ForcePanel.tsx    # Reusable left/right panel for military forces
│   ├── WarMap.tsx        # Mapbox GL (Persian Gulf center)
│   └── StatCard.tsx      # Reusable number card
├── api/
│   └── situation.ts      # 态势数据 API 请求
├── store/
│   └── situationStore.ts # Zustand store + API 轮询
├── data/
│   └── mockData.ts       # 类型定义与初始兜底数据
├── pages/
│   └── Dashboard.tsx     # Main layout (1920×1080)
├── App.tsx
└── index.css
server/
├── index.js    # Express API 入口
├── db.js       # SQLite 建表与连接
├── routes.js   # /api/situation 路由
├── seed.js     # 数据库种子脚本
└── data.db     # SQLite 数据库（运行 seed 后生成）