SuperAPI AI 工具集

velt-single-editor-mode-best-practices

编程与开发

查看项目

更新于 10-16 05:21

技能介绍

用途

本技能是 Velt Single Editor Mode(单编辑器模式)的实现指南与最佳实践集合,适用于 React、Next.js 和 Web 应用。当需要在应用中实现“同一时间仅允许一个用户编辑”的独占编辑访问时,可参考本指南。它包含 14 条规则,分布在 7 个类别中,并按影响优先级排序,用于指导自动化代码生成与集成模式。

适用时机

在以下场景中应参考这些指南:

  • 启用单编辑器模式,将编辑权限限制为同一时间仅一个用户
  • 设置 VeltSingleEditorModePanel 与默认 UI
  • 调用 setUserAsEditor() 并处理错误码
  • 通过 useUserEditorState 或 isUserEditor() 订阅编辑器状态
  • 构建自定义访问请求 UX(编辑者接受/拒绝、查看者请求/取消)
  • 使用 singleEditorModeContainerIds() 将单编辑器模式限定到特定容器
  • 使用 data-velt-sync-access 属性控制元素
  • 为文本元素(input、textarea、contenteditable)启用自动同步
  • 配置编辑访问超时与自动转移行为
  • 订阅 SEM 事件(accessRequested、editorAssigned 等)
  • 处理多标签页编辑场景,使用 singleTabEditor 与 editCurrentTab()
  • 配置心跳与在线状态检测以跟踪编辑者

规则类别与优先级

优先级 类别 影响 前缀
1 核心设置 CRITICAL core-
2 编辑器状态管理 CRITICAL state-
3 访问请求流程 HIGH access-
4 元素控制 HIGH elements-
5 超时配置 MEDIUM timeout-
6 事件处理 MEDIUM events-
7 调试与测试 LOW-MEDIUM debug-

主要能力(快速参考)

1. 核心设置(CRITICAL)

  • core-setup — 通过配置、默认 UI 和面板组件启用单编辑器模式

2. 编辑器状态管理(CRITICAL)

  • state-hooks — 使用 useUserEditorState 和 useEditor Hook 管理 React 编辑器状态
  • state-set-user-editor — 调用 setUserAsEditor() 并处理全部 3 个错误码
  • state-editor-api — 订阅 isUserEditor() 和 getEditor() Observable

3. 访问请求流程(HIGH)

  • access-hooks — 使用 useEditorAccessRequestHandler Hook 处理 React 访问流程
  • access-editor-side — 编辑者侧通过 API 接受/拒绝传入请求
  • access-viewer-side — 查看者侧请求和取消编辑访问

4. 元素控制(HIGH)

  • elements-container-scope — 将 SEM 限定到特定容器并启用自动同步
  • elements-sync-attributes — 仅对原生 HTML 元素应用 data-velt-sync-access 属性

5. 超时配置(MEDIUM)

  • timeout-hooks — 使用 useEditorAccessTimer 构建 React 倒计时 UI
  • timeout-config — 配置超时时长与自动转移行为

6. 事件处理(MEDIUM)

  • events-hooks — 使用 useLiveStateSyncEventCallback 订阅 React 事件
  • events-subscribe — 通过 API 订阅全部 7 种 SEM 事件类型

7. 调试与测试(LOW-MEDIUM)

  • debug-common-issues — 常见问题、心跳配置与测试清单

使用方式

阅读各规则文件以获取详细说明与代码示例:

  • rules/shared/core/core-setup.md
  • rules/shared/state/state-set-user-editor.md
  • rules/react/access/access-hooks.md

每个规则文件包含:

  • 该规则重要性的简要说明
  • 带说明的错误代码示例
  • 带说明的正确代码示例
  • 指向官方文档的来源指引

编译文档

  • AGENTS.md — 所有规则的压缩索引,含文件路径(建议从此开始)
  • AGENTS.full.md — 完整详细指南,所有规则内联展开

限制

资料未提供具体的收费、价格、平台支持范围或实际效果数据,相关内容暂未提供。