SuperAPI AI 工具集

making-scenes-tab-aware

编程与开发

查看项目

更新于 10-16 03:45

技能介绍

用途:指导把 PostHog 前端场景(scene)改造成标签页感知(tab aware)。PostHog 内部标签页在非激活状态下仍保留场景根逻辑挂载,只有场景本身按标签页设计时才能正确工作;该技能用于新增或重构 SceneExport 场景、修复切换标签页时状态丢失、以及消除同一场景类型在两个内部标签页间的状态串扰。

主要能力:一个完全标签页感知的场景需满足三点——SceneExport.logic 按内部标签页隔离作用域;场景自有的 URL 同步只对激活标签页作出反应,更新非激活标签页但不劫持浏览器地址;需要在 React 卸载后存活的子逻辑挂载到场景根逻辑上。sceneLogic 已向场景组件与逻辑 props 注入 tabId。核心规则:作为 SceneExport.logic 的场景根应通常以 tabId 为 key 并负责场景级路由同步;子资源/编辑器/详情逻辑可用 tabId + 资源 id 作 key,并通过 useAttachedLogic 挂到场景根。

使用方式:先按 references/audit-commands.md 运行审计命令,对照 references/repo-patterns.md 中的模式,再按 references/migration-checklist.md 的迁移清单推进。完全标签页感知的场景通常无需结构性改造,沿用既有模式即可;部分感知的场景已用 tabId 隔离实例但未使用 tabAwareScene() 约定,可作完整迁移的素材;未感知的场景多以资源 id 作 key、直接持有路由绑定或依赖 React 本地状态,通常需要在原有资源逻辑之上新增专用场景根逻辑。

适用场景与限制:适用于新增 SceneExport 场景、重构标签页切换后丢失筛选/编辑/表单状态的场景、修复两个内部标签页间的状态泄漏、替换场景根逻辑中的 urlToAction/actionToUrl、以及拆分资源逻辑。验证至少需在两个内部标签页打开同一场景类型,在一侧修改状态确认另一侧独立,来回切换确认编辑状态、筛选与子逻辑状态保留,并运行相关测试及 hogli lint:skills、hogli build:skills。应避免场景根仅以资源 id 作 key、在场景根使用普通 urlToAction/actionToUrl、URL 归属分散在多个嵌套逻辑、重要场景状态存于 React useState、以及仅通过视图层挂载必须跨标签页存活的子逻辑。具体仓库路径与代码细节请参见资料给出的参考文件,本文不复制完整代码。