# 红蓝攻防对抗系统 (War-Web)

基于 Cesium.js + Vue 3 的3D红蓝攻防态势显示系统前端项目

## 🎯 项目介绍

本项目是一个军事态势感知与对抗演练系统的前端部分，提供：
- 🌍 基于Cesium的3D地球态势显示
- ✈️ 红蓝双方实体管理（飞机、无人机、导弹等）
- 🗺️ 任务规划与航线设计
- 📡 实时态势感知与监控
- 📊 战况评估与分析
- 🔄 WebSocket实时数据同步

## 🛠️ 技术栈

- **前端框架**: Vue 3 + TypeScript
- **3D引擎**: Cesium.js 1.111+
- **UI组件**: Element Plus
- **状态管理**: Pinia
- **路由管理**: Vue Router 4
- **构建工具**: Vite 5
- **实时通信**: Socket.io-client
- **HTTP客户端**: Axios

## 📋 环境要求

- **Node.js**: >= 18.0.0
- **npm**: >= 9.0.0 或 **pnpm**: >= 8.0.0
- **现代浏览器**: Chrome 88+, Firefox 78+, Safari 14+

## 🚀 快速开始

### 1. 克隆项目

```bash
git clone <repository-url>
cd war-web
```

### 2. 安装依赖

```bash
# 使用 npm
npm install

# 或使用 pnpm (推荐)
pnpm install
```

### 3. 环境配置

创建环境变量文件：

```bash
# 开发环境
touch .env.development
```

编辑 `.env.development`:

```bash
# API服务地址
VITE_API_BASE_URL=http://localhost:8000
# WebSocket服务地址  
VITE_WS_URL=ws://localhost:8000
# Cesium Ion访问令牌 (可选)
VITE_CESIUM_ION_ACCESS_TOKEN=
# 地图样式
VITE_MAP_STYLE=satellite
VITE_TERRAIN_PROVIDER=cesium_world_terrain
# 应用配置
VITE_APP_TITLE=红蓝攻防对抗系统
VITE_APP_VERSION=1.0.0
# 开发模式配置
VITE_DEBUG_MODE=true
VITE_MOCK_DATA=false
```

### 4. 启动开发服务器

```bash
npm run dev
```

服务启动后访问: http://localhost:3000

## 📁 项目结构

```
war-web/
├── public/                 # 静态资源
│   ├── models/            # 3D模型文件 (.glb, .gltf)
│   └── icons/             # 图标文件
├── src/
│   ├── api/               # API接口封装
│   │   ├── index.ts       # API基础配置
│   │   ├── entities.ts    # 实体管理API
│   │   ├── missions.ts    # 任务规划API
│   │   └── websocket.ts   # WebSocket客户端
│   ├── assets/            # 资源文件
│   │   ├── icons/         # SVG图标
│   │   ├── images/        # 图片资源
│   │   └── models/        # 本地3D模型
│   ├── cesium/            # Cesium相关模块
│   │   ├── EntityManager.ts    # 实体管理器
│   │   ├── FlightPathManager.ts # 航线管理器
│   │   ├── TerrainManager.ts    # 地形管理器
│   │   └── utils.ts            # Cesium工具函数
│   ├── components/        # Vue组件
│   │   ├── common/        # 通用组件
│   │   ├── cesium/        # Cesium相关组件
│   │   └── ui/           # UI组件
│   ├── stores/           # Pinia状态管理
│   │   ├── entities.ts   # 实体状态
│   │   ├── missions.ts   # 任务状态
│   │   └── situation.ts  # 态势状态
│   ├── types/            # TypeScript类型定义
│   ├── utils/            # 工具函数
│   ├── views/            # 页面组件
│   │   ├── Dashboard.vue     # 主控面板
│   │   ├── EntityManagement.vue  # 实体管理
│   │   ├── MissionPlanning.vue   # 任务规划
│   │   ├── SituationAwareness.vue # 态势感知
│   │   └── Assessment.vue        # 战况评估
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── package.json          # 项目配置
├── vite.config.ts        # Vite配置
├── tsconfig.json         # TypeScript配置
└── README.md             # 项目说明
```

## 🔧 开发说明

### 开发模式

```bash
# 启动开发服务器（热重载）
npm run dev

# 类型检查
npm run type-check

# 代码检查和修复
npm run lint
```

### 生产构建

```bash
# 构建生产版本
npm run build

# 预览生产构建
npm run preview
```

### 代码规范

项目使用 ESLint + Prettier 进行代码规范检查：

```bash
# 检查代码规范
npm run lint

# 自动修复代码格式
npm run lint --fix
```

## 🔌 API配置

### 后端API接口

确保后端服务在 `http://localhost:8000` 运行，主要接口：

```
GET    /api/entities          # 获取实体列表
POST   /api/entities          # 创建实体
PUT    /api/entities/:id      # 更新实体
DELETE /api/entities/:id      # 删除实体

GET    /api/missions          # 获取任务列表
POST   /api/missions          # 创建任务
PUT    /api/missions/:id      # 更新任务

GET    /api/situation/current # 获取当前态势
WebSocket /ws/{mission_id}    # 实时态势推送
```

### WebSocket连接

系统使用WebSocket进行实时数据推送：

```typescript
// 连接示例
const socket = io('ws://localhost:8000')
socket.emit('join_mission', { missionId: 'xxx' })
socket.on('entity_update', (data) => {
  // 处理实体更新
})
```

## 🎨 主要功能模块

### 1. 3D态势显示
- Cesium地球场景初始化
- 实体3D模型加载和显示
- 相机控制和视角切换
- 地形数据加载

### 2. 实体管理
- 飞机、无人机、导弹等实体的CRUD
- 实体属性配置
- 实体分组和筛选
- 实体状态实时更新

### 3. 任务规划
- 航线规划和编辑
- 航点拖拽功能
- 任务模板管理
- 武器装备配置

### 4. 态势感知
- 实时态势监控
- 威胁检测和预警
- 雷达扫描效果
- 态势数据分析

### 5. 战况评估
- 战况回放功能
- 损失评估统计
- 战况报告生成
- 数据可视化图表

## 🔍 调试说明

### Vue Devtools
推荐安装 Vue Devtools 浏览器扩展进行调试

### Cesium调试
在浏览器控制台访问 `window.viewer` 获取Cesium viewer实例

### 网络请求调试
查看浏览器开发者工具的Network面板监控API请求

## 🚢 部署说明

### 开发环境部署

```bash
# 构建项目
npm run build

# 使用nginx或其他web服务器托管dist目录
```

### 生产环境部署

1. 修改生产环境变量 `.env.production`
2. 执行构建命令 `npm run build`
3. 将 `dist` 目录部署到Web服务器
4. 配置nginx反向代理到后端API

### Docker部署

```dockerfile
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
```

## 🛟 常见问题

### Q: Cesium加载失败
A: 检查网络连接，确保可以访问Cesium CDN资源

### Q: WebSocket连接失败  
A: 确认后端WebSocket服务正常运行，检查防火墙设置

### Q: 3D模型不显示
A: 确认模型文件路径正确，检查模型格式是否为.glb或.gltf

### Q: 页面性能问题
A: 启用Cesium的LOD功能，减少同时渲染的实体数量

## 📞 技术支持

- 开发文档: `/docs`
- 问题反馈: GitHub Issues
- 技术交流: 项目技术群

## 📄 许可证

MIT License

---

**注意**: 本项目为军事演练系统，仅供学习和演练使用，请勿用于实际军事行动。