多标签页同步
将以下提示词粘贴到你的 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回环忽略与生命周期关闭逻辑