← 返回项目库

协作画布中文版

面向中文团队的实时协作设计画布，支持多人编辑、评论和导出。

这是一个基于 Next.js、Fabric.js 与 Liveblocks 的白板式设计工具示例，提供形状绘制、文字编辑、图片上传、图层查看、评论讨论、光标聊天和表情反应等协作能力。

真实界面

项目截图

共 7 张

设计
矩形
图层
文字
填充
选择字体
常规

Capabilities

核心功能

✓多人光标同步和在线成员头像展示
✓光标聊天与快捷表情反应
✓矩形、圆形、三角形、线条和自由绘制工具
✓文字对象创建以及字体、字号、字重编辑
✓图片上传到画布并参与协作编辑
✓图层列表展示当前画布对象
✓填充色、描边色、宽度和高度调整
✓画布评论、讨论回复和解决状态
✓撤销、重做、删除、重置和 PDF 导出

适用场景

产品团队远程评审流程图和页面草稿
设计教学中演示实时白板协作能力
开发团队验证多人画布编辑器的交互原型

适合谁

需要在线评审界面草图、协作讲解方案或搭建设计白板原型的产品、设计、教学和开发团队。

商业化思路

可作为内部协作工具、教学演示项目或定制化白板编辑器基础交付，通过部署服务和二次开发收费。

你会拿到什么

  • ✓中文化 Next.js 应用源码
  • ✓中文 README 与本地运行说明

部署流程

  1. 1安装 Node.js 依赖并配置 Liveblocks 公钥环境变量
  2. 2执行构建命令后使用 Next.js 运行生产服务

真实验证结果

已通过 7 个真实运行中文界面、HTTP、可见正文、控制台、坏图和横向溢出质量门。

部署前须知

未配置 Liveblocks 公钥时实时协作和评论连接不可用；构建期间仍显示若干 React Hook 依赖项 lint 警告。

部署难度

中等

最低配置

Node.js 20 或兼容运行环境，使用 npm 安装依赖并提供可用的 Liveblocks 公钥后运行 Next.js 服务。

开源许可证

上游未声明许可证

最后验证

2026-08-25

技术栈

Next.js 14React 18TypeScriptFabric.jsLiveblocksTailwind CSSRadix UI

授权说明

上游仓库未提供明确许可证文件；交付包已内置醒目的研究用途与权利声明，仅限学习研究，超出范围需另行取得权利人授权。

Release notes

版本记录

1 个已发布版本

vcn-e4c2142dda8b 当前推荐

完成中文界面文案、评论组件本地化、中文项目说明和中文导出文件名，保留原有协作画布功能。

部署要求：需要 Node.js 20、npm、Next.js 14 运行环境；多人协作和评论能力需要配置有效的 Liveblocks 公钥。

已知问题：当前版本没有内置离线协作后端，缺少 Liveblocks 配置时只能看到连接相关限制；React Hook lint 警告未在本地化阶段处理。

登录后领取