Appearance
战术仿真引擎 — 开发报告
Tactic Simulation Engine Development Report
生成日期:2026-06-14
1. 架构总览
tactics-sim-engine (Vue 3.5 + Pinia + TypeScript)
├── 面板系统 dockview-core 多窗格布局,14 个功能面板
├── Ribbon 工具栏 WPS 风格,4 个顶级 Tab,~110 个命令按钮
├── 事件总线 5 条 event bus(command/selection/status/window/timeline)
├── 服务层 GisService / ActionService / TimelineService
├── 状态层 6 个 Pinia Store
├── 可组合层 7 个 Composable
├── 主题系统 亮色 / 暗色 / 科幻 三套主题
└── 命令系统 模块树 → RibbonTab 自动构建
关联子包:
├── @space-air/common-data 纯数据模型(Scenario/Entity/Action/Command/Track)
├── @space-air/gis-cesium CesiumJS 渲染引擎
├── @space-air/schema-form 动态 Schema 表单
├── @space-air/entity-props 实体属性编辑器
├── @space-air/cesium-timeline-tracks Cesium 时间轴组件
├── @space-air/earth-viewer 3D 地球视口
├── @space-air/camera-panel 相机快照面板
├── @space-air/base-map-manager 底图管理
└── @space-air/terrain-manager 地形管理2. 面板系统
基于 dockview-core 实现多窗格可拖拽布局,支持分屏、浮动、拖拽移动。
| 面板 | 文件 | 功能 |
|---|---|---|
| ViewportPanel | src/components/panels/ViewportPanel.vue | 3D 地球视口,挂载 EarthViewer,初始化全部服务 |
| SceneTreePanel | src/components/panels/SceneTreePanel.vue | 左侧场景树:根节点/环境时钟/底图/相机列表 |
| EntityListPanel | src/components/panels/EntityListPanel.vue | 实体列表,按 CombatEntityType 分组,显示类型徽标 |
| TimelinePanel | src/components/panels/TimelinePanel.vue | Cesium 时间轴,支持实体/Action 删除及 renderer destroy |
| PropertiesPanel | src/components/panels/PropertiesPanel.vue | 右侧属性面板,四模式切换(场景/时钟/实体/Action) |
| ActionPropsPanel | src/components/panels/ActionPropsPanel.vue | Action 属性编辑,SchemaForm 驱动,自动同步 Command |
| EntityPropsPanel | src/components/panels/EntityPropsPanel.vue | 实体组件编辑器(位置/标签/模型/雷达/武器等) |
| CameraPanel | src/components/panels/CameraPanel.vue | 相机快照捕获/飞行/漫游/删除 |
| BaseMapPanel | src/components/panels/BaseMapPanel.vue | 底图切换管理 |
| TerrainPanel | src/components/panels/TerrainPanel.vue | 地形管理 |
| OutputPanel | src/components/panels/OutputPanel.vue | 事件日志面板 |
| CommandPropPanel | src/components/panels/CommandPropPanel.vue | 命令属性编辑器(占位) |
3. Ribbon 工具栏
3.1 结构
4 个顶级 Tab:场景 → 开始 → 分析 → 系统
场景
├── 基础 场景初始化 / 底图 / 地形 / 图层 / 时间轴 / 场景结构 / 实体列表 / 日志
├── 环境 光照 / 昼夜 / 云层 / 雨雪 / 风场 / 雾效 / 海洋 / 星空
├── 数据 场景保存加载 / 实体导入导出 / 标绘导入导出 / 配置管理
└── 资源 模型 / 图标 / 特效 / 材质
开始
├── 实体 创建 / 删除 / 编辑 / 复制 / 分组 / 搜索 / 显隐 / 锁定
├── 类型 卫星 / 飞机 / 无人机 / 舰艇 / 车辆 / 导弹 / 雷达 / 基地 / 指挥站
├── 轨迹 [基础运动 ▼] [轨道系统 ▼] [编队/相对 ▼] [战术行为 ▼] ← split button 下拉
├── 行为 [感知 ▼] [通信 ▼] [交互 ▼] [系统状态 ▼] ← split button 下拉
└── 推演 推演播放 / 暂停加速 / 回放复盘 / 事件触发
分析
├── 传感器 雷达波束 / 扫描区域 / 探测范围 / 通信范围 / 干扰范围 / 可视域 / 视锥
├── 空间 通视/视域/雷达覆盖/距离/面积/高度/缓冲区/路径/遮挡分析
├── 表现 路径/姿态/模型/粒子/雷达扫描/尾迹/爆炸动画
└── 标绘 点线面/箭头/战术线/防区/进攻方向/集结区域/文字标注/编辑
系统
├── 管理 用户管理 / 权限管理 / 工程管理
├── 系统 日志系统 / 配置系统 / 插件系统
└── 事件 消息系统 / 事件总线3.2 轨迹按钮组(split button 下拉)
| 分组 | 子项 |
|---|---|
| 基础运动 | 移动、巡逻、跟随、环绕 |
| 轨道系统 | TLE轨道、开普勒轨道、星历 |
| 编队/相对 | 编队、LVLH、交会 |
| 战术行为 | 导弹、拦截、规避 |
3.3 行为按钮组(split button 下拉)
| 分组 | 子项 |
|---|---|
| 感知 | 扫描、探测、跟踪、识别、刷新传感器、反干扰检测 |
| 通信 | 发送消息、接收消息、广播、信号中继、数据同步、加密通信、解密通信 |
| 交互 | 锁定目标、解锁目标、标记目标、分配目标、共享目标、绑定实体、解绑实体 |
| 系统状态 | 激活、停用、开启传感器、关闭传感器、进入隐身、退出隐身、启动、关机、充能、修复、过热、冷却 |
4. Action 类型系统
4.1 8 大类 41 种 ActionType
| # | 类别 | 类型 |
|---|---|---|
| 1 | 基础运动 | MoveTo Patrol Follow Orbit |
| 2 | 轨道系统 | TLEOrbit KeplerOrbit Ephemeris |
| 3 | 编队/相对 | Formation LVLH Rendezvous |
| 4 | 战术行为 | Missile Intercept Evasion |
| 5 | 感知 | Scan Detect Track Identify RefreshSensor JamDetect |
| 6 | 通信 | SendMessage ReceiveMessage Broadcast RelaySignal SyncData EncryptChannel DecryptChannel |
| 7 | 交互 | LockTarget UnlockTarget MarkTarget AssignTarget ShareTarget AttachToEntity DetachFromEntity |
| 8 | 系统状态 | Activate Deactivate EnableSensor DisableSensor EnterStealth ExitStealth PowerUp PowerDown Recharge Repair Overheat Cooldown |
4.2 类型安全
typescript
// 泛型 Action — type 确定后 parameters 自动推导
interface Action<T extends ActionType = ActionType> {
id: string
type: T
entityId: string
name?: string
parameters: ActionParameters<T> // 自动推导对应参数接口
startTime: number
endTime: number
}
// MoveTo action 的 parameters 自动推导为 MoveToParameters
const a: Action<'MoveTo'> = {
parameters: {
from: { lon: 116, lat: 39, alt: 0 }, // ✅ 类型安全
to: { lon: 116.4, lat: 39.9, alt: 10000 }
}
}4.3 参数接口示例
| Action | 关键参数 |
|---|---|
| MoveTo | from?: LonLatAlt, to: LonLatAlt |
| Patrol | waypoints: LonLatAlt[], speed?, loiterTime? |
| TLEOrbit | tleLine1: string, tleLine2: string |
| KeplerOrbit | semiMajorAxis, eccentricity, inclination, raan, argPerigee, meanAnomaly, epoch |
| Formation | leaderEntityId, formationType, spacing, position? |
| Scan | targetEntityId?, range?, duration? |
| SendMessage | targetEntityId, message |
| LockTarget | targetEntityId |
| EnterStealth | duration? |
5. 服务层
| 服务 | 文件 | 职责 |
|---|---|---|
| GisService | services/gis/GisService.ts | Cesium Viewer 初始化、实体按类型创建、场景加载、时钟同步 |
| ActionService | services/gis/ActionService.ts | ActionRenderer 注册(MoveTo),execute() 创建效果,destroy() 清理效果 |
| TimelineService | services/gis/TimelineService.ts | 监听 Track/Action 变化,防抖 200ms 后 sync Command→Action + 重新执行渲染 |
| ServiceRegistry | services/ServiceRegistry.ts | 全局服务定位器(register/get/remove) |
6. 状态层
| Store | 文件 | 职责 |
|---|---|---|
| sceneStore | stores/scene.ts | 场景 CRUD、实体/轨道/Action 增删、级联清理(删实体→删 track→删 action) |
| projectStore | stores/project.ts | 项目管理、版本控制(max 10)、JSON 导入导出、localStorage 持久化 |
| windowStore | stores/window.ts | 窗口布局、分屏二叉树算法、拖拽状态、事件日志 |
| statusStore | stores/status.ts | 仿真状态/速度/时间/选中对象/缩放/鼠标坐标/消息 |
| moduleStore | stores/moduleStore.ts | Ribbon 模块激活管理、当前 Tab |
| themeStore | stores/themeStore.ts | 亮/暗/科幻三主题,CSS 变量自动注入 |
7. 事件总线
| 总线 | 用途 | 载荷 |
|---|---|---|
commandBus | Ribbon 命令执行 | { id, payload } |
selectionBus | 对象选中 → 属性面板联动 | { id, label, type } |
statusBus | 状态栏消息 | { message, type } |
windowBus | 窗口管理 | { action, windowId, payload } |
timelineBus | 时间轴同步 | TimelineEvent union |
8. 选区联动机制
SceneTreePanel / EntityListPanel / Timeline
│ 点击节点/实体行
▼
selectionBus.emit({ id, type })
│
├──→ PropertiesPanel → 切换模式(entity/action/scene/clock)
├──→ useSceneForm → 设置 activeTab
├──→ useActionCommands → 记录当前选中实体(供后续创建 action 使用)
└──→ StatusBar → 更新选中对象标签9. Action 创建与渲染流程
Ribbon 按钮点击
→ commandBus.emit({ id: 'traj-move-to' })
→ useActionCommands.handleCommand()
1. 映射按钮 id → ActionType
2. 取当前选中实体(优先)或首个实体
3. 取场景时钟开始时间作为 startTime
4. 创建 Action(含默认参数)→ push scene.actions
5. 创建 Command → push track.commands
6. 创建 Track(如不存在)
7. emitSelection(action.id, ..., 'action')
→ PropertiesPanel 收到选中事件
1. mode = 'action'
2. ActionPropsPanel 渲染
→ ActionPropsPanel
1. 从 store 查找 action
2. 取 ACTION_SCHEMAS[action.type]
3. SchemaForm 渲染表单
4. 编辑 → onFormUpdate → 同步 Command → actionSvc.execute()
→ TimelineService(防抖 200ms)
1. 同步 Command 时间 → Action
2. actionSvc.executeAll(actions)
→ ActionService.execute()
→ renderer.create(action, { viewer })
→ MoveToRenderer.create()
1. 构建 SampledPositionProperty(start/end sample)
2. 设置 entity.position + entity.availability10. GIS 渲染引擎 (gis-cesium)
10.1 实体管理
- EntityManager — 实体 CRUD、批量创建、事件发射(add/remove/update/show/hide)
- CombatEntity — 封装 Cesium Entity + ScenarioEntity,6 种 Renderer
- Renderers — Position / Model / Label / Billboard / Trajectory / Radar
10.2 Action 渲染
- ActionRendererRegistry — 按 type 注册,单例
- MoveToRenderer — SampledPositionProperty + TimeIntervalCollection,支持多段轨迹合并、瞬移模式
10.3 其他子系统
| 子系统 | 功能 |
|---|---|
| CameraControl | flyTo / flyToEntity / captureCameraView / roamCameraViews / followEntity |
| BaseMapManager | 底图运行时切换,快照/恢复 |
| TerrainManager | 地形 Provider 管理 |
| LayerManager | 图层 CRUD、排序、显隐 |
| DrawManager | 绘图工具(多边形/折线/点) |
| ConnectionManager | 实体间连线(流动线/激光/脉冲锥) |
| 特效 | 爆炸 / 探测效果 |
| 材质 | 椭球移动 / 流动虚线 |
| 工具 | 坐标转换 / 日期时间 / 卫星轨道 / LVLH |
11. Schema 表单系统
基于 SchemaField[] 的动态表单,支持 10 种字段类型:
| 类型 | 渲染 |
|---|---|
string | n-input |
number | n-input-number |
boolean | n-switch |
select | n-select |
datetime | n-date-picker + n-time-picker 组合 |
color | n-color-picker |
lonlat | 经度/纬度并排输入 |
coordinate | 经度/纬度/高度 紧凑一行 |
object | 嵌套 SchemaForm(卡片样式) |
array | 动态列表(添加/删除) |
12. 技术栈
| 类别 | 技术 |
|---|---|
| 框架 | Vue 3.5 (Composition API / script setup) |
| 状态管理 | Pinia |
| UI 组件库 | Naive UI |
| 构建工具 | Vite 8 |
| 语言 | TypeScript 6 |
| 3D 引擎 | CesiumJS 1.133 |
| 窗格布局 | dockview-core |
| 事件总线 | @vueuse/core useEventBus |
| 图标 | ionicons5 |
| 代码规范 | ESLint 9 + neostandard |
13. 已完成功能清单
- [x] 多窗格可拖拽布局(Dockview)
- [x] WPS 风格 Ribbon 工具栏(4 Tab / ~110 按钮)
- [x] Split button 下拉按钮(轨迹/行为 8 组)
- [x] 3D 地球视口(CesiumJS)
- [x] 实体创建/删除/属性编辑(8 种类型)
- [x] 场景树 + 实体列表
- [x] 场景 JSON 导入导出
- [x] 41 种 Action 类型系统(类型安全泛型)
- [x] Action 属性 Schema 表单(12 → 41 种)
- [x] Action 创建流程(Ribbon → Action + Command + Track)
- [x] MoveTo Action 渲染(SampledPositionProperty + 时间插值)
- [x] Action 销毁(清理 position + availability)
- [x] 时间轴组件(Cesium Timeline + Canvas 轨道渲染)
- [x] Timeline 实体/Action 删除(级联清理 track + renderer)
- [x] Timeline 面板拖拽响应(ResizeObserver)
- [x] 时钟表单编辑(同步 Cesium clock + Timeline)
- [x] 场景初始化(空场景 + 时钟设置)
- [x] 底图管理 / 地形管理
- [x] 相机快照 / 飞行 / 漫游
- [x] 事件日志面板
- [x] 状态栏(状态/速度/选中对象/坐标/消息)
- [x] 命令搜索(CommandSearch)
- [x] 三套主题(亮/暗/科幻)
- [x] 模块版本管理(localStorage 持久化)
14. 待开发
- [ ] Perception/Communication/Interaction/SystemState Action 渲染器实现
- [ ] 巡逻/跟随/环绕 Action 渲染器
- [ ] 轨道系统 Action 渲染器(TLE/Kepler/Ephemeris)
- [ ] 编队/交会 Action 渲染器
- [ ] 战术行为 Action 渲染器(导弹/拦截/规避)
- [ ] 传感器/空间分析功能
- [ ] 标绘系统
- [ ] 推演引擎(时间驱动事件)
- [ ] 实体间通信仿真
- [ ] 多人协同编辑