docs: add ScrcpyKeyMapper tool to key mapping documentation

Author: w4po

docs/KeyMapDes.md

@@ -73,3 +73,18 @@ Description of the unique attributes of different key mapping types:
     -rightOffset After pressing the right direction key, drag it to the right offset of the center to the right of the centerPos position
     -upOffset After pressing the up arrow key, drag it to the upper offset position horizontally relative to the centerPos position
     -downOffset Press the down arrow key and drag it to the downOffset position horizontally relative to the centerPos position
+
+## Visual Key Mapping Tool
+
+A web-based GUI tool is available to help you create and manage key mappings visually: [ScrcpyKeyMapper](https://github.com/w4po/ScrcpyKeyMapper)
+
+![ScrcpyKeyMapper Screenshot](https://raw.githubusercontent.com/w4po/ScrcpyKeyMapper/main/assets/screenshot.png)
+
+You can use this tool to:
+- Create key mappings visually
+- Test your mappings in real-time
+- Export mappings as JSON files
+- Import existing mappings for editing
+
+Try it online: [ScrcpyKeyMapper Web App](https://w4po.github.io/ScrcpyKeyMapper)
+

docs/KeyMapDes_zh.md

@@ -74,3 +74,16 @@
     - upOffset 按下上方向键后模拟拖动到相对centerPos位置水平偏上upOffset处
     - downOffset 按下下方向键后模拟拖动到相对centerPos位置水平偏下downOffset处
 
+## 可视化按键映射工具
+
+现在有一个基于Web的GUI工具可以帮助你直观地创建和管理按键映射：[ScrcpyKeyMapper](https://github.com/w4po/ScrcpyKeyMapper)
+
+![ScrcpyKeyMapper截图](https://raw.githubusercontent.com/w4po/ScrcpyKeyMapper/main/assets/screenshot.png)
+
+你可以使用这个工具来：
+- 直观地创建按键映射
+- 实时测试你的映射
+- 导出映射为JSON文件
+- 导入现有映射进行编辑
+
+在线试用：[ScrcpyKeyMapper网页应用](https://w4po.github.io/ScrcpyKeyMapper)