SuperAPI AI 工具集

velt-cursors-best-practices

前端与建站

查看项目

更新于 10-16 08:10

技能介绍

用途:为 Velt 的实时光标跟踪功能(以及配套的 Live Selection 指示器)提供实现模式与最佳实践,适用场景包括在画布、白板或协作页面中加入实时光标、配置光标显示、把光标限制在特定页面元素、订阅光标位置数据、用线框定制光标指针外观,以及排查光标不显示或跟踪异常等问题。资料称包含 7 大类共 13 条规则,按优先级分为 Core Setup(CRITICAL)、Data Access(HIGH)、Configuration(HIGH-MEDIUM)、Events(MEDIUM)、UI Customization(MEDIUM)、Wireframe Variables(MEDIUM)、Debugging(LOW-MEDIUM)。主要能力与规则要点:核心初始化要求使用 VeltProvider 上的 authProvider,而非 identify();将 VeltCursor 组件放在内容区域内而非工具栏;通过 document 上下文按文档限定光标范围。数据访问提供 useCursorUsers、useCursorUtils 等 React hooks,以及 getCursorElement、getOnlineUsersOnCurrentDocument Observable。配置方面支持用 allowed-elements 限制光标到特定 DOM 元素、avatar 模式用头像替代姓名标签、配置 inactive 超时阈值。事件提供 onCursorUserChange 回调获取位置更新。UI 定制提供 Arrow、Avatar、Default、Huddle 等光标指针线框变体。线框变量部分说明 <velt-cursor> 与 <velt-cursor-pointer-wireframe> 的扁平配置 componentConfig.<path> 变量(如 cursorUser、showAvatar/showAudio/showVideo、huddle 标志与辅助函数),以及 <velt-selection-element-portal-wireframe> 的 selections、userIndicatorPosition、userIndicatorType、position 等变量和 UserIndicatorPosition / UserIndicatorType / CursorPosition / Selection 类型参考。调试部分提供常见问题排查。使用方式:查阅各规则文件(如 rules/shared/core/core-setup.md、rules/shared/config/config-allowed-elements.md、rules/shared/data/data-cursor-hooks.md),或从 AGENTS.md 压缩索引开始,AGENTS.full.md 提供完整展开版。限制:资料未提供具体安装命令、版本要求、平台兼容范围或收费信息,这些内容暂未提供。