DocCollab

关于我

TIP

各位导师你好！我叫邓雄峰，广东海洋大学2026届的一名学生。就读于计算机科学与技术专业。

在大二下学期一次偶然的契机，我通过学校的实验室接触到了前端这个领域，并开始对前端产生了兴趣和持续学习至今，目前有两段实习经历。现在百度小度部门t0前端团队担任前端开发实习生，主要负责的内容是小度app H5页面、小度官网的维护和小度智能家居IOT设备相关业务。

曾就职于杭州玳数有限公司，担任前端开发实习生，主要负责低代码构建可视化大屏项目，组件开发，工程化构建等工作。

个人比较关心前端，热爱开源，喜欢发表个人学习相关的技术文章，关心各大开源社区。

本次训练营项目负责的内容实现和收益

项目管理规范和工程化落地

根据第一节周会王宝同导师的分享，我对项目进行了严格高效的管理，在整个项目开发过程中没有放过任何一行需检测代码

提交规范 - 通过 Husky 和 lint-staged 编写 Shell 脚本，严格规范提交信息、代码风格，并且实现 commit 图标美化
项目管理 - 采用 Monorepo 架构，便于用户一键启动项目，使用 pnpm workspace 进行依赖管理
文档完善 - 利用 vitepress 结合 github action + github Pages 部署的详细使用文档

开发效率提高

构建优化 - 利用 Turbo 缓存机制和并行处理任务实现高性能构建，CI 时间减少约 70%，大大开发效率
项目复用性 - 整个项目采用本地依赖包管理方式开发，实现一个可以开箱即用的slate编辑器组件，减少和web项目耦合度，提高复用性和实用性

具体项目核心负责的内容

Doc-editor（开箱即用的协同编辑器组件）：

协同方案调研和编辑器需求开发
- ot（操作变换）和 crdt（无冲突复制）算法
  - yjs（只需要关注数据如何操作，网络提供者（Network Providers））

协同编辑划词评论

协同评论功能实现方案总结：

核心架构：

基于Yjs的协同编辑框架实现
使用Y.Array存储评论数据，确保多端同步
结合Slate编辑器实现评论标记和显示

关键技术点：

评论定位：使用Yjs相对位置系统(Y.createRelativePositionFromTypeIndex)解决文档编辑导致的评论漂移问题

下面是协同评论功能核心的代码实现：

javascript

// 1. 评论数据结构定义 (存储在Yjs中)
const commentStructure = {
  id: "unique_id",       // 唯一标识
  start: "relative_pos", // 起始位置(JSON序列化的Y.RelativePosition)
  end: "relative_pos",   // 结束位置
  content: "评论内容",  
  author: "作者",
  time: 1672531200000   // 时间戳
};

// 2. 核心协同逻辑 (useCollaborativeEditor.jsx)
// 初始化Yjs数据结构
useEffect(() => {
  if (!docRef.current) return;
  yCommentsRef.current = docRef.current.getArray('comments'); // Yjs共享数组
  yTextRef.current = docRef.current.get('content', Y.XmlText); // 共享文本
}, [docRef]);

// 3. 添加评论的核心方法
const addComment = useCallback((startIndex, endIndex, content, author) => {
  // 生成相对位置（解决编辑漂移问题）
  const startPos = Y.createRelativePositionFromTypeIndex(
    yTextRef.current, 
    startIndex
  );
  const endPos = Y.createRelativePositionFromTypeIndex(
    yTextRef.current,
    endIndex  
  );

  // 存储到Yjs共享数组
  yCommentsRef.current.push([{
    id: Date.now().toString(),
    start: JSON.stringify(startPos),
    end: JSON.stringify(endPos),
    content,
    author,
    time: Date.now()
  }]);

  // 添加Slate标记（本地渲染）
  Editor.addMark(editor, 'comment', {
    id: commentId,
    content,
    author
  });
}, []);

// 4. 删除评论的核心方法
const removeComment = useCallback(commentId => {
  // 从Yjs数组中删除
  yCommentsRef.current.forEach((comment, index) => {
    if (comment[0].id === commentId) {
      yCommentsRef.current.delete(index, 1);
    }
  });

  // 从Slate编辑器中删除标记
  Editor.removeMark(editor, 'comment');
}, []);

关键设计亮点：

双重数据同步机制：

javascript

// Yjs数据层 (协同)
yCommentsRef.current.push([commentData]); 

// Slate表现层 (渲染)
Editor.addMark(editor, 'comment', commentData);

位置漂移解决方案：

javascript

// 创建相对位置
const pos = Y.createRelativePositionFromTypeIndex(
  yTextRef.current, // 关联的Yjs文本类型
  charIndex        // 原始字符索引
);

// 恢复绝对位置
const absPos = Y.createAbsolutePositionFromRelativePosition(
  JSON.parse(relativePos),
  docRef.current
);

高效协同更新：

javascript

// 监听Yjs数组变化
yCommentsRef.current.observe(() => {
  // 触发编辑器重新渲染
  setValue(v => [...v]); 
});

这套实现确保了评论功能在多人实时协作时的稳定性和一致性。

关键实现说明：

双重定位系统：

Slate路径定位：用于当前编辑器实例中的快速渲染
Yjs相对位置：用于跨客户端同步和文档修改时的位置保持主要方法**：
addComment：添加评论到指定文本范围
removeComment：删除指定ID的评论
评论数据实时同步到所有客户端

doc-docs（项目介绍文档）：

侧边栏目录自动化，介绍文档具体内容撰写
AI理解文档能力增强：集成 LLM（大语言模型）友好的文档格式（傻瓜ai也能快速读懂的文档）

doc-web（项目前端）：

整体项目基础demo构建和布局
一些页面page开发和维护

doc-server（项目后端）：

数据库和数据结构设计
数据库配置登录注册模块
api文档集成

个人心得

感谢飞书训练营导师们的专业指导和团队伙伴们的通力合作。参与DocCollab协同文档系统的开发让我获得了全方位的成长，接触到很多新领域，比如Slate-Yjs协同编辑框架和CRDT冲突解决算法，还通过项目管理、Git协作规范等实践提升了工程化能力。从需求分析到架构设计再到最终实现的完整流程，让我对企业级项目开发有了更深刻的理解。特别感谢训练营精心设计的渐进式挑战，这些实战经验不仅强化了我的技术深度，更培养了我解决复杂问题的系统思维，这段经历将成为我职业发展道路上的宝贵财富。

关于我 ​

本次训练营项目负责的内容实现和收益 ​

项目管理规范和工程化落地 ​

开发效率提高 ​

具体项目核心负责的内容 ​

个人心得 ​

关于我

本次训练营项目负责的内容实现和收益

项目管理规范和工程化落地

开发效率提高

具体项目核心负责的内容

个人心得