离线交互的关键是让用户知道：哪些信息还能看，哪些操作已经保存在本机，哪些结果必须联网才能确认。“没有网络”只是连接状态，不能代替保存状态。设计时要分别处理离线读取、本地编辑、等待同步、同步失败和版本冲突，尤其不能把“已保存”一词同时用于本机草稿和服务器确认。
可以先在墨刀原型中串联断网、待同步与冲突处理页面，让产品和研发逐条确认状态转换与反馈。先把用户需要看懂的结果说明白，再决定缓存、重试和冲突处理的实现方式。
先决定什么可以离线做，而不是先画一个断网提示
把任务拆成读取、编辑和确认三类。查看上次下载的巡检任务，可能不需要当前连接；填写一段巡检备注，可以先存为本机草稿；确认某项设备已停机、提交最终审批，则可能依赖服务器上的最新状态。三者不应因为都在同一页面，就拥有相同的离线权限。
| 任务 | 离线时的可用范围 | 界面必须交代什么 |
|---|---|---|
| 查看任务资料 | 显示已经下载的内容 | 资料更新时间、未下载附件 |
| 填写巡检记录 | 按产品方案保存本机草稿 | 本机保存结果、尚未同步 |
| 上传照片 | 保留待上传队列或明确无法加入 | 哪些文件已保存、哪些未上传 |
| 最终提交 | 需要服务器确认时暂不完成 | 继续编辑、联网后提交或取消的入口 |
这张表要与研发一起确定。不能因为前端页面看起来可以输入，就承诺离线数据一定留得住；也不必因为一个动作需要联网，就遮住整页已经可用的资料。web.dev 的离线体验指南强调向用户说明当前状态及仍可采取的动作，这比单独显示一个网络图标更有用。
把“已保存”拆成用户能理解的状态
以巡检备注为例，至少要区分以下状态，并为每个状态写清进入条件。状态词越少不一定越简单；如果把不同后果都压缩成“保存成功”，用户反而无法判断能否离开页面。
- 正在保存到本机：本地保存尚未完成，不能提前提示可以关闭页面。
- 已保存在本机，待同步：本地保存得到确认，服务器尚未接收；可继续编辑的范围按产品规则处理。
- 正在同步：已经发出同步请求，等待结果，不等同于服务器已经保存。
- 已同步：服务器确认接收本次版本，并可显示最近确认时间。
- 同步失败：保留本地内容，说明可重试、需重新登录或其他具体动作。
- 存在版本冲突：服务器内容已变化，需要按约定的合并或选择规则处理。
状态提示应贴近记录本身。全局横条可以说明“当前离线”，但列表中的记录仍要能区分“早已同步”和“刚刚编辑、尚待同步”。否则同一页面出现一个绿色勾选，可能让用户误以为所有记录已经提交。
文案也要与实际结果相符。“已保存在此设备，联网后继续同步”适用于确实完成本地保存的内容；如果本地空间不足，应明确“未能保存，请保留当前页面并处理存储问题”，而不是照常切到成功状态。
重新联网后，优先消除不确定结果
有网络信号不代表服务器可用。恢复连接后可以尝试同步，但只有实际请求得到确认，才能更新为“已同步”。如果请求超时，客户端可能不知道服务器是否已经接收；此时应通过记录标识、版本或结果查询核对状态，避免用户不断重试而产生多份记录。
设计稿应写清重试处理的是“同一次保存”，还是“新建一份记录”。这些是产品与接口需要共同确认的规则，不能只在按钮旁写“重试”就结束。用户重复点击、切换页面后返回、应用重新打开，都可能再次触发同一项任务。
存在多条待同步记录时，展示具体数量与单项结果。部分成功后，不要把整批重置成待提交；某张照片失败，也不应让已经同步的备注看起来消失。按照依赖关系处理：如果记录必须带齐附件才能最终提交，就把“文字已同步”和“尚有附件待上传”分别呈现。
冲突不是一句“请刷新”，而是两份有效工作
假设巡检人员离线时把备注改为“已更换滤网”，主管同时在服务器上补充“请核对设备编号”。直接用最后上传的内容覆盖另一份，会丢失有意义的信息。冲突页应展示记录对象、本机内容、服务器内容及差异，允许用户在明确后果的前提下合并、采用某一版本或暂缓处理。
如果两人改的是不同字段，可以由系统按已定义规则合并，但界面仍应呈现最后结果；同一字段发生矛盾时，应保留原输入，不能让用户对着一个空文本框凭记忆重写。对于明确不可合并的业务状态，例如任务已经撤销，不能继续提供“强制覆盖并提交”作为通用出口。
删除冲突也需要单独设计：本机仍有草稿，服务器对象却已删除时，用户可能需要复制内容、另存记录或联系负责人。权限被收回、登录失效和对象已结束同样不是普通网络失败，反复自动重试不会解决问题。
用一条真实任务检查离线前后是否接得上
在原型里建立同一条巡检记录的几个状态页，保持编号、已填内容和附件名称一致。把操作连接起来：填写备注后断网、本机保存、返回列表、恢复连接、发现冲突、完成处理。每次转换旁边注明触发条件和数据来源，评审者才知道何时应该看到这句话。
- 从已经加载资料的页面开始，检查断网后仍可读的内容与不能加载的附件是否分得清。
- 输入新备注并尝试离开页面，检查提示是否区分本地保存未完成与本地已保存。
- 恢复连接后让一条记录成功、一条失败，检查数量、单项状态和重试范围是否一致。
- 让服务器同时修改相同字段，检查比较界面是否能找到差异，原输入是否保留。
- 加入重新登录、权限变化和任务关闭，检查是否还会错误承诺“联网后自动提交”。
原型走读检查的是状态、提示和操作是否连贯；缓存持久性、重试去重及真实同步需要在实现后按同样路径测试。界面方案中保留这些验证条件，研发就不必从一张“离线页面”猜出全部规则。
交付时留下一份状态转移说明
每个状态记录“触发事件、已确认的数据位置、用户能做的动作、下一状态、失败去向”。例如：本机保存确认后进入待同步；同步请求超时后保留本地内容，先核对服务器结果；服务器报告版本不一致后进入冲突比较。这样的说明比“自动同步，失败重试”更容易实现和验收。
需要继续补充空数据、加载和错误反馈，可参照后台页面的状态设计。离线体验是否可靠，最终看用户能否始终回答两件事：我的内容现在在哪里，以及我下一步可以做什么。
