94 lines
2.2 KiB
Markdown
94 lines
2.2 KiB
Markdown
# 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
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### Mapbox (optional)
|
||
|
||
For the interactive map, create a `.env` file:
|
||
|
||
```bash
|
||
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 存储。
|
||
|
||
```bash
|
||
# 首次运行：初始化数据库并写入种子数据
|
||
npm run api:seed
|
||
|
||
# 启动 API 服务（默认 http://localhost:3001）
|
||
npm run api
|
||
```
|
||
|
||
开发时需同时运行前端与 API：
|
||
|
||
```bash
|
||
# 终端 1
|
||
npm run api
|
||
|
||
# 终端 2
|
||
npm run dev
|
||
```
|
||
|
||
API 会由 Vite 代理到 `/api`，前端通过 `/api/situation` 获取完整态势数据。数据库文件位于 `server/data.db`，可通过修改表数据实现动态调整。
|
||
|
||
## Development
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
## Build
|
||
|
||
```bash
|
||
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 后生成）
|
||
```
|