用户联网瞬间触发同步动效的关键在于精准感知网络恢复、确认同步状态并使视觉反馈与真实数据行为对齐；需结合 navigator.connection onchange 与 fetch 探活，以及 service worker sync 事件双信号判断联网，分排队中、发送中、完成/失败三阶段设计动效，资源离线可用，支持中断、忽略与追溯。
用户联网瞬间触发同步动效，关键不在“动效本身”，而在于如何精准感知网络恢复、确认同步状态、并让视觉反馈与真实数据行为对齐。轻量级不等于简单闪一下，而是动效节奏、时机和语义都要服务于同步过程——它得让用户看懂“正在做什么”“还剩多少”“是否成功”。
用 Network Information API + Service Worker sync 事件双信号判断联网
仅监听 navigator.onLine 不可靠（它只反映浏览器粗略连接状态，常有误报）。真正可信的联网信号来自两处：
- 主线程用
navigator.connection?.onchange监听网络类型/有效带宽变化，配合fetch('/health')简单探活，确认真实可达 - Service Worker 中
sync事件被触发时，通过postMessage主动通知页面：“同步已启动”，这是最确定的“开始干活”信号 - 两者结合：页面收到 sync 消息后，才启动动效；若探活失败或 sync 未触发，则不展示，避免假动作
动效设计紧扣同步生命周期，分阶段呈现
不要一个旋转图标从头转到尾。按实际同步步骤拆解视觉节奏：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 排队中（IndexedDB 查询待同步项）：用脉冲式微动 + 文字“准备提交…”（持续 ≤300ms）
- 发送中（逐条 fetch 提交）：进度条线性推进，每完成一条请求，进度+5%～10%，同时轻微上浮动画强化“发出”感
- 完成/失败：成功用绿色对勾+轻弹；失败则震动+文字提示“X 条未同步，点击重试”，并保留小红点标记入口
动效资源必须离线可用，且零额外请求
动效本身不能依赖网络加载，否则断网刚恢复时反而卡住：
- 所有 SVG 动画、Lottie JSON 或 CSS @keyframes 都打包进主 bundle，或预缓存在 Service Worker 的 cache storage 中
- 避免使用需 runtime 解析的第三方动画库（如 Framer Motion），改用原生 CSS transition + requestAnimationFrame 控制的轻量逻辑
- 动效容器 DOM 元素在页面初始化时就渲染好但 display: none，sync 触发时才 show 并 play，减少运行时开销
给用户控制权，动效可中断、可忽略、可追溯
动效是服务用户的工具，不是装饰：
- 同步过程中，用户点击任意区域或滚动页面，自动暂停动效（但不中断后台同步）
- 提供“不再提示”开关，将用户偏好存入 localStorage，下次同类型同步跳过动效
- 动效结束后，自动展开一个折叠面板，列出本次同步的明细：提交了哪些记录、哪几条失败、失败原因简码（如 401/超时/校验错）
