借助 Canvas-Slot 连接目标实现地图联动的仓库与商品高亮

这个示例构建了什么

这个示例构建的是一个组合式仪表盘场景，而不是传统的节点连线图。画布中展示了一个半透明的美国 SVG 地图、放置在固定坐标上的脉冲位置标记、左侧的仓库列表以及右侧的商品列表。蓝色的曲线高亮线会把当前选中的仓库同时连接到它在地图上的标记以及动态生成的商品卡片。

用户既可以点击地图标记，也可以点击仓库卡片来切换当前激活的选择。他们还可以打开悬浮的辅助窗口，调整滚轮和画布拖拽行为，或将当前画布导出为图片。这个示例最主要的实现启示是：这里的 relation-graph 被用作普通 HTML 面板与标记之间的连接叠加层，而不是可见业务节点的主要渲染器。

数据是如何组织的

主场景状态被拆分成两种轻量级数据结构。MyWarehouseGroup 保存 groupId、groupName、percent，以及包含 x 和 y 坐标的绝对 location；MyProduct 保存 id、name、unit 和 count。仓库记录直接在 `M