网页端离线数据同步状态提示需做到“看得清、不焦虑、可预期”，即绑定具体操作场景、用用户语言描述实时状态（如“已缓存修改，联网后上传”）、支持渐进式反馈与明确操作（如“立即重试失败项”），并诚实说明功能限制。
网页端离线数据同步的状态提示，核心是让用户“看得清、不焦虑、可预期”。不能只告诉用户“已离线”，而要说明“正在做什么、卡在哪、还能不能操作、多久能好”。这需要把技术状态（如网络断开、同步排队、上传中）翻译成用户能理解的语言，并嵌入到具体操作上下文中。
状态提示必须绑定具体场景，而不是全局悬浮条
用户只关心当前正在做的这件事是否可靠。比如在填写患者信息表单时断网，提示应出现在表单顶部或提交按钮旁，写明“已保存草稿，网络恢复后自动同步”；而不是在右上角弹一个“您已离线”的通用 toast——后者既没说明影响范围，也没给确定性反馈。
建议做法：
- 每个关键操作区域（如任务列表、患者卡片、表单页）预留
data-sync-status-target容器，JS 只更新该区域对应的状态提示 - 状态文案随上下文变化：加载患者列表时显示“正在同步最新数据…”，编辑未保存时显示“已缓存修改，联网后上传”
- 避免跨页面复用同一套提示逻辑——医护系统里“同步患者档案”和“上传检查报告”的失败含义与重试方式完全不同
用渐进式状态代替二值判断（在线/离线）
真实体验不是非黑即白。用户可能处于“能打开页面但 API 超时”“部分接口通、部分不通”“本地有旧数据但无法拉新”等中间态。状态提示要反映这种连续性：
- 初始加载阶段：显示“正在检查网络连接…”（用 fetch('/health') 探活，而非仅读 navigator.onLine）
- 同步进行中：显示“已同步 3/7 条记录”，配合环形进度条；若队列长，补充“剩余约 20 秒”（基于历史平均耗时估算）
- 局部失败时：不笼统说“同步失败”，而是“患者张三的血压记录未上传（稍后重试），其余 6 条已完成”
给用户明确的控制权和安全感
离线不是终点，而是过渡态。提示里要包含可点击的动作，且动作结果可预期：
- 同步中出现错误，提供“立即重试”按钮，并注明“本次只重试失败项”
- 检测到长时间离线（如超过 5 分钟），主动提示“是否导出当前本地数据为备份文件？”
- 所有缓存操作必须附带视觉确认：输入框边框变浅蓝 + 右侧显示“已缓存”小图标，点击可查看缓存详情
- 首次同步完成前，禁用依赖远程数据的功能（如“分配新任务”），但明确说明“待同步完成后开启，预计还需 1-2 分钟”
降级文案要诚实，不掩盖限制
当功能确实不可用时，提示不是安抚，而是降低预期：
- 避免“稍后可用”“正在优化中”这类模糊表述；改用“当前无法搜索患者（需联网获取最新名单），可查看本地最近 50 位患者”
- 如果离线模式下只能读不能写，直接写“离线只读模式：可查看、不可编辑或新增”
- 对时间敏感操作（如医嘱下达），加粗提示“此操作需实时联网验证权限，暂不可用”
