RoboMaster 战术面板

这个项目是我在交龙战队担任哨兵决策负责人时做的。当时我们经常需要设计决策并讨论战术，但用 PPT 或者白板画图效率太低，而且不方便保存和分享。于是我就想，能不能做一个专门的工具来可视化战术？

为什么做这个

RoboMaster 比赛节奏很快，每场比赛结束后，我们都需要快速复盘：哪里做得好，哪里出了问题，下次怎么改进。但传统的复盘方式——在白板上画图、用 PPT 标注——有几个问题：

所以我就做了这个战术面板，希望能让战术讨论和复盘变得更高效。

最核心的功能就是画战术图。我使用了一个简单的画板，可以：

这样在讨论时，大家可以在同一个界面上实时看到战术图，比口头描述清晰多了。

后来我又加了一些实用功能：

这些功能看起来简单，但实际用起来确实能节省不少时间。

因为是 Web 应用，大家可以在各自的设备上打开，实时看到同一张战术图。这样在远程讨论或者复盘时，就不用担心”你看到的是哪一页”这种问题了。

项目用 React + TypeScript 开发，部署在 Vercel 上。选择这个技术栈主要是考虑到：

画板部分用了一个 Canvas 库来处理绘制，直播流用的是 iframe 嵌入。整体架构比较轻量，没有引入太多复杂的依赖。

这个工具除了决策组使用，在操作手会议上也派上用场，效果还不错。在制定战术和比赛复盘时，可以在战术图上直接标注问题点，比口头表述效率高很多。

当然，也有一些可以改进的地方：

但总的来说，这个项目解决了我们当时的一个实际痛点，也让我对”工具如何提升团队效率”有了更深的理解。

做这个项目让我意识到，好的工具不一定要功能多复杂，关键是能解决实际问题。有时候一个简单的画板，只要能让大家更高效地沟通，就很有价值了。

另外，在团队项目中，作为开发者，我不仅要考虑技术实现，还要理解使用场景。比如直播流这个功能，就是我在实际使用中发现”每次都要去 B 站找链接太麻烦”才加上的。这种从实际需求出发的功能，往往比一开始就规划好的功能更有用。