v1.0.3在真机验证和自动化测试中发现了4个BUG,从交互逻辑到CSS样式覆盖了不同层面。每个BUG的定位过程都值得记录,因为它们揭示了Web组件在HarmonyOS环境中的特殊行为。
BUG 1:删除设备后mode仍为'delete'
现象:点击删除按钮删除设备后,画布上的鼠标光标仍为删除模式,再次点击空白处会触发意外的删除行为。
根因:canvas.ts中mousedown/pointerdown/handleLinkClick三个事件处理函数在删除设备后没有将mode重置为'select'。
修复:在三处删除操作的末尾添加setMode('select'),确保删除完成后自动回到选择模式。这是一个典型的状态机遗漏——删除动作完成后忘记复位状态。
BUG 2:手机端双击不触发 + btnPropPanel不显示属性
现象:在真机上双击设备无法打开CLI,点击btnPropPanel按钮不显示设备属性面板。
根因:手机端没有dblclick事件,只有touch事件。btnPropPanel的点击事件没有正确绑定到设备属性显示逻辑。
修复:在pointerdown中添加双击检测逻辑(lastTapTime + lastTapDeviceId),两次触摸同一设备且间隔小于300ms则触发双击。btnPropPanel点击时主动调用showDeviceProperties()显示对应设备属性。
BUG 3:连线删除后无法再次选中
现象:删除一条连线后,其他连线无法被点击选中,WiFi图标的连线标签也阻挡了点击。
根因:SVG中link元素的点击区域太窄(stroke-width只有2px),手指无法精确点击。link-label-bg和WiFi图标元素没有设置pointer-events:none,拦截了点击事件。
修复:添加.link-hit透明点击区域(stroke-width:15px,stroke:transparent),扩大可点击范围。link-label-bg和WiFi图标添加pointer-events:none,让点击穿透到连线本身。
BUG 4:运行中设备不可拖动
现象:设备处于Running状态时仍然可以被拖动,拖动后CLI输出和拓扑位置不一致。
根因:mousedown/pointerdown中没有检查设备状态,任何状态下都允许设置draggingDevice。
修复:在拖动开始前检查device.status !== DeviceStatus.Running,运行中的设备不允许拖动。帮助文档同步更新:"运行中的设备不可拖动,需先停止再移动"。
自动化测试验证
4个BUG修复后,使用puppeteer-core搭建自动化测试框架,在本地web环境运行135项测试。测试覆盖6个实验场景、所有按钮交互、设备拖拽、双击CLI、保存加载等核心流程。最终135项100%通过,确保修复没有引入回归问题。