攻防演练平台-攻防

1.拓扑图渲染：展示办公网、控制网的层级化网络结构，包含不同类型的设备节点和连线。
2.动态交互：节点状态变化（正常 / 被攻击）、攻击路径动画、场景切换、悬浮提示。
3.状态联动：右侧攻击详情面板与拓扑图节点状态实时同步。
多场景管理：支持场景 1/2/3 的切换，不同场景加载不同的网络拓扑数据

. 拓扑图的构建

数据建模：将网络设备抽象为 G6 的 Node，设备间的连接抽象为 Edge。为节点添加 type（如 “交换机”“防火墙”）、status（正常 / 被攻击）等属性。
自定义节点：使用 G6 的 registerNode 注册不同类型的节点（如办公电脑、工业防火墙），实现差异化的图标和样式。
分层布局：使用 G6 的 dagre 或 force 布局，结合 groupBy 实现办公网、控制网的分层视觉效果，模拟图中的上下两层网络。
2. 动态交互与动画

攻击路径动画：通过 G6 的 updateEdgeStyle 动态修改边的颜色和样式，并结合 animate 方法实现攻击路径的流动效果（如截图中的橙色攻击线）。
状态切换：监听节点点击或全局状态变化，通过 graph.setItemState 切换节点的 status，触发颜色和图标的变化（如正常为蓝色，被攻击为橙色 / 红色）。
悬浮提示：使用 G6 的 tooltip 插件，自定义内容展示设备详情。
3. 多场景与状态管理

场景切换：通过 React 路由或状态管理，加载不同场景的拓扑数据，调用 graph.changeData() 刷新整个图。
状态联动：使用状态管理工具（如 Zustand）维护当前攻击状态，拓扑图和右侧详情面板通过订阅同一状态源实现实时同步。