Gateway
设备配对流程
通过二维码与配对码把两台设备绑定为一个 Binding。
设备配对流程
WinCode 的设备配对采用"桌面端出码 + 移动端扫码"的模式,整个过程不超过一分钟。配对成功后,两台设备就形成了一个持久的绑定关系,后续不再需要重新配对。
PairButton
PairButton 是触发配对的入口按钮,位于 WinCode 桌面端的侧边栏。它的行为根据是否已绑定而切换:
- 未绑定时:按钮显示手机图标,点击打开
PairDialog。如果 Gateway 尚未连接,按钮会处于禁用状态并提示"Gateway 未连接"。 - 已绑定时:按钮显示为"已绑定"文字与一个解绑图标,点击直接调用
gatewayUnbind(binding.bindingId)解除绑定。
PairDialog
PairDialog 是配对的核心对话框,状态机分为五个阶段:
| 阶段 | 含义 |
|---|---|
loading | 正在向后端请求配对 Token |
qrcode | 显示二维码,倒计时过期时间 |
expired | 二维码已过期,显示"重新获取"按钮 |
error | 请求失败,显示错误信息与"重试"按钮 |
success | 绑定成功,显示绿色勾勾 |
配对流程的具体步骤:
- 对话框挂载后调用
gatewayPairToken(),后端返回一个PairTokenResponse,包含临时token、expiresIn(秒数)和pairUrl。 - 前端把
pairUrl交给gatewayQrcode,后端使用 QR 编码库渲染为 PNG,返回 Base64 字符串。 - 对话框用
<img src={data:image/png;base64,...}>渲染二维码,并启动一个每秒递减的倒计时。 - 用户使用 WinCode 移动端扫描该二维码。移动端把扫码结果发给云端中转服务器,云端校验后把两台设备写入同一个
Binding。 - 桌面端监听到
gateway-binding事件后,gatewayStore自动更新binding字段,对话框检测到绑定成功,切换到success状态并在两秒后自动关闭。
配对码过期
配对码默认有效期由后端指定(一般为几分钟)。倒计时归零后,对话框自动切换到 expired 状态。用户点击"重新获取",会重新走一遍 gatewayPairToken → gatewayQrcode 的流程。
解除绑定
PairButton 在已绑定状态下提供了一个"解除绑定"操作。它调用 gatewayUnbind(bindingId),后端会通知云端中转服务器删除这条 Binding 记录,并推送 gateway-binding 事件,前端状态随之清空。