断网时怎么设计？重连、离线编辑与冲突提示

先给结论：断网交互要先保证用户的记录不会悄悄丢失，再处理“已重连”的提示。下面以外勤人员在仓库检查冷藏柜为例：一次巡检有 12 个项目，设备编号、温度和照片都要回传；文章把离线队列和冲突作为业务设计方案，并用Pixso 原型流程画出可评审的路径，不把 Pixso 本身写成离线存储产品。

先定义断网时还能做什么

巡检员打开任务后先拿到最近一次同步的 12 条项目。网络断开时，页面顶部显示“无法连接，已保存到本机草稿”，每一条记录带本地序号、修改时间和同步状态。允许继续填写温度和备注，暂时不允许提交需要服务端校验的“关闭任务”操作。照片可以进入待上传队列，但必须显示文件名、大小和队列序号，避免用户以为已经上传成功。

重连信号不等于业务接口可用

浏览器的 offline 和 online 事件只能提供网络状态线索；恢复网络后先请求健康接口并校验任务权限，再把队列标为“同步中”。如果健康接口超时，继续显示“正在连接”，不要把系统事件直接翻译成“全部同步成功”。队列按本地序号串行提交，失败项保留原记录和重试次数，成功项才从待同步列表移到已同步。

重连时给出两个时间：本地最后保存时间和服务器最新版本时间。若相差超过任务允许窗口，例如服务器已经在 10:32 更新了同一项目，先停在冲突页，不要覆盖服务器数据。

冲突页要让人看懂谁改了什么

假设巡检员离线把 item-07 温度改成 4.2℃，主管在服务器上改成 5.0℃并补充“传感器更换”。冲突页并排展示服务器值、我的本地值、各自时间和修改人，提供“保留服务器”“保留我的值”“合并备注”三个动作。温度不能静默相加；如果两边都改了照片，先保留两张并要求用户选择主图。每个选择写入冲突编号，便于后续追查。

失败和重复提交要有可恢复路径

同步单条记录返回 401 时，说明登录已过期并暂停队列；返回 409 时进入冲突页；返回 413 时只标记过大的照片并允许重新选择压缩文件；连续 3 次超时则保留队列并提供“稍后重试”。用户点击重试不能生成第二条记录，提交请求要带本地版本号或幂等键。若设备空间不足，先停止照片队列，保留文字草稿并给出清理入口。

用四个画板验收恢复链路

在 Pixso 画布中放置“巡检清单”“离线队列”“冲突对比”“恢复结果”四个画板。验收人先修改 3 条项目后断网，确认刷新或返回不会清空本地草稿；再恢复网络，分别模拟健康接口失败、401、409 和照片过大，核对每条记录的序号、版本、提示和重试结果。最后检查只读任务能否继续查看历史数据，以及冲突处理后的最终值是否可追溯。只有这些证据齐全，才把“已重连”视为完成，而不是一条绿色提示。