跳到正文
2 分钟

示例

按能力运行 Collaboration SDK 示例,并直达每个示例的说明、Server 与 Web 入口源码。

所有示例都位于 univer-collaboration-examples,使用相同的 web/main.ts + server/main.ts 最小结构并可独立运行。先完成 Quick Start,再根据接入任务选择 其他示例。

示例重点概念运行命令
Quick Start核心协同链路pnpm example:quick-start
Database Adapter数据持久化边界pnpm example:database-adapter
Permissions身份与权限pnpm example:permissions
History派生版本历史pnpm example:history
Comments独立评论能力pnpm example:comments
Worktree隔离编辑与合入pnpm example:worktree
ExchangeOffice 文件交换pnpm example:exchange

Quick Start

组装 Collaboration Client、Transport、Endpoint、Service 与 Memory Adapter,并用两个浏览器 验证同一个 Sheet 的 HTTP 加载、WebSocket Session、Room、ACK 与广播。

Bash
pnpm example:quick-start

打开 http://127.0.0.1:3010/?unit=quick-start-sheet&type=2

Database Adapter

对照自定义 Memory、PostgreSQL 与内置 SQLite Adapter,重点展示 transaction、revision CAS、 批次原子性和 customData 事务边界。

Bash
pnpm example:database-adapter

打开 http://127.0.0.1:3010/?unit=database-adapter-sheet&type=2

Permissions

展示应用如何从 Cookie 建立可信身份,并分别保护 Unit HTTP 读取、实时 JOIN 和 changeset 提交。页面可在 editor 与只读 viewer 两个教学账号之间切换。

Bash
pnpm example:permissions

打开 http://127.0.0.1:3010

History

在 Core 之外增加 History Service、独立 Adapter、History Endpoint 与浏览器历史入口。History 由 Unit 创建和 changeset commit Event 建立,是可重建的派生索引。

Bash
pnpm example:history

打开 http://127.0.0.1:3010/?unit=history-sheet&type=2,编辑后点击页面上方的 History

Comments

增加 Thread Comment Service、独立 Adapter、Comment Endpoint 与前端评论入口,并展示 Comment Endpoint 如何复用主协同 Endpoint 的 Session 与 Unit Room。

Bash
pnpm example:comments

打开 http://127.0.0.1:3010/?unit=comments-sheet&type=2,选择单元格并使用评论入口。

Worktree

展示独立 draft、Ready、Reopen 与逐 Unit Merge 的完整生命周期。可以在 trunk 与 draft 之间 切换,观察 Agent 修改如何在合入前保持隔离。

Bash
pnpm example:worktree

打开 http://127.0.0.1:3010/?unit=worktree-sheet&type=2&worktree=demo-worktree

Exchange

组合 @univerjs-pro/exchange-node 与 Collaboration Service,展示 Sheet 的服务端导入导出、任务 轮询、snapshot 导入与 confirmed revision 导出。

Bash
pnpm example:exchange

打开 http://127.0.0.1:3010/?unit=exchange-sheet&type=2,通过 File → Open (File) 导入, 通过 File → Save As 导出。