48. 🔄 数据状态流 Data State & Sync ★★★★☆
🌏 Web 网页规范
- 乐观更新 (Optimistic UI)：操作后立即渲染预期结果，服务器确认后静默合并或回滚
- SWR 陈旧再验证：先展示缓存数据，后台异步拉取新鲜数据并无缝替换，用户无感知
- 分页策略矩阵：编号分页 / 无限滚动 / 加载更多 / 游标分页四种模式按场景选型
- 数据新鲜度指示器：以色点 + 时间戳标识每条数据的同步状态 (新鲜/陈旧/同步中/错误)
📱 App 移动端规范
- 离线优先架构 (Offline-first)：本地数据库为真值源，网络恢复后自动执行同步队列
- 后台同步队列：操作入队后持久化存储，进度指示器显示待同步条目计数
- 冲突解决 UI：本地版本 vs 远程版本并排对比，用户手动选择保留策略
- 网络状态横幅：断网时顶部持续显示离线横幅，恢复后短暂显示"已重新连接"Toast
Web 端数据交互追求零感知延迟——乐观更新 (Optimistic UI) 在用户操作后立即渲染预期结果，服务器确认后静默合并，失败则回滚并提示错误。SWR (Stale-While-Revalidate) 模式先展示缓存数据让用户立即可用，后台异步拉取新鲜数据无缝替换。数据新鲜度通过五色状态系统可视化——新鲜 (绿) / 陈旧 (黄) / 同步中 (旋转) / 错误 (红) / 离线 (灰)，配合重试按钮和撤销操作形成完整容错闭环。
移动端网络不稳定是常态，离线优先架构将本地数据库作为真值源，所有读写操作先命中本地。离线期间的写操作进入持久化同步队列，网络恢复后按序执行并显示进度指示器。当本地与远程数据产生分歧时，冲突解决 UI并排展示两个版本，支持用户手动选择保留策略 (保留本地/保留远程/手动合并)。顶部网络状态横幅实时反馈连接状态。
LIVE PLAYGROUND: 数据同步五态循环演示
点击"切换状态"按钮循环遍历 Fresh / Stale / Syncing / Error / Offline 五种数据状态
https://web.meta-ui.edu/data-state
📦 数据同步状态面板
✅ Fresh (新鲜)
用户配置表 (user_config)
已同步
·
刚刚
订单记录 (orders)
已同步
·
2 分钟前
审计日志 (audit_log)
陈旧数据
·
15 分钟前
权限矩阵 (permissions)
同步失败
·
网络超时
📤 同步队列: 3 项待上传
📶
已连接 · 数据实时同步中
📦 数据同步状态
用户配置
刚刚同步
✓
审计日志
陈旧 · 15分钟前
权限矩阵
同步失败
📤 待上传队列
3 项
1/3 已上传 · 预计 12 秒完成
⚠️ 数据冲突
「文档设置」本地与远程版本不一致
📋 大模型统一 Prompt (LLM Prompt)