Agent Skills
返回列表
多标签页同步

多标签页同步

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @user_f1b049da/wdj20268227。

技能介绍

解决多标签页数据不一致的广播同步方案

同一浏览器里开多个 CRM 标签页时,A 页刚保存完草稿,B 页的客户列表还在展示旧数据,来回切换刷新非常麻烦。更糟的是,若团队里有人习惯多标签并行处理,同一份数据的修改可能会被另一页静默覆盖,造成双向数据冲突。

核心工作机制与硬约束

  • 创建频道:封装 createDraftSync,在布局或 store 层挂载一次,使用原生 BroadcastChannel 或兼容包。频道名固定且带业务前缀(如 crm:draft-sync)。
  • 消息轻量化:只广播 type 加少量 id/时间戳的纯 JSON,不发整份大草稿正文;大内容由本地存储承载,这里仅发信号。
  • 消息分发:发送端忽略自身回环,接收端按 type 分支处理,刷新对应本地缓存或弹提示。
  • 生命周期:组件卸载或路由离开时调用 close(),防止频道泄漏。
  • 边界说明:仅同源跨 Tab 通信,不发起网络请求;跨浏览器配置文件不同步属预期行为,大内容走 localStorage 或 IndexedDB。

使用场景

  • 客服同时打开多个客户详情页,一处保存草稿后其余标签页需提示刷新。
  • 销售并行跟进商机,需要在列表页修改数据后自动同步其他打开的列表。
  • 开发者调试SPA多标签页,验证广播信号能否触发对应缓存更新。
  • 运营核对CRM数据时,希望避免一页改了另一页仍显示旧记录。

适合人员

  • 前端工程师,需要为CRM类页面实现同源跨标签页的轻量状态同步
  • 全栈开发者,想替代WebSocket处理多标签页本地缓存刷新
  • 需要优化多标签页编辑体验的技术负责人,关注频道泄漏与消息体积
  • 测试工程师,验证BroadcastChannel回环忽略与生命周期关闭逻辑