CollabEdit

CollabEdit 是一个面向团队的协同编辑平台，提供文档管理、实时协作、评论批注、消息中心与视频通话等功能。前端基于 Vue 3 + Vite，后端基于 Spring Boot 3，核心协作通过 WebSocket + OT 算法实现。

技术栈

后端

• Spring Boot 3.4.1
• Spring Web / WebSocket / Security / Mail
• MyBatis-Plus + MySQL
• Redis
• JWT (jjwt)
• Jackson JSR310 + Fastjson
• Lombok

前端

• Vue 3 + Vite
• Vue Router
• Element Plus
• WangEditor
• Axios
• WebSocket + WebRTC

功能与实现

1) 用户系统与鉴权

• 注册与登录：UserController 调用 UserServiceImpl，密码使用 BCryptPasswordEncoder 加密，登录成功返回 JWT。
  对应文件：src/main/java/org/example/collabedit/Controller/UserController.java、src/main/java/org/example/collabedit/service/impl/UserServiceImpl.java
• 邮箱验证码：/api/user/sendCode 生成验证码写入 Redis（REG_CODE: 前缀），并通过 MailService 发送邮件。
  对应文件：src/main/java/org/example/collabedit/service/MailService.java
• JWT 鉴权：JwtUtils 生成/解析 Token，JwtAuthenticationTokenFilter 在请求链中解析 Token 并设置 LoginUser 到安全上下文。
  对应文件：src/main/java/org/example/collabedit/utils/JwtUtils.java、src/main/java/org/example/collabedit/config/JwtAuthenticationTokenFilter.java
• 安全配置：SecurityConfig 放行登录、注册、验证码、健康检查、静态上传与 WebSocket 端点，其余接口要求认证。
  对应文件：src/main/java/org/example/collabedit/config/SecurityConfig.java

2) 文档管理（目录树、收藏、批量操作、分享）

• 文档树结构：DocumentServiceImpl.getDocumentTree 调用 DocumentMapper.selectVisibleDocuments（作者或被分享者可见），然后构建树形结构。
  对应文件：src/main/java/org/example/collabedit/service/impl/DocumentServiceImpl.java、src/main/java/org/example/collabedit/mapper/DocumentMapper.java
• 文档/文件夹 CRUD、移动、批量删除/移动、搜索、收藏：由 DocumentController 提供 REST 接口，服务层实现递归删除、合法性校验等逻辑。
  对应文件：src/main/java/org/example/collabedit/Controller/DocumentController.java
• 文档分享：/documents/{id}/share 保存 document_share 记录，并在读取/更新时做权限校验。
  对应文件：src/main/java/org/example/collabedit/service/impl/DocumentShareServiceImpl.java
• 前端工作台：DocumentEditor.vue 实现目录树、拖拽移动、批量操作、星标等交互。
  对应文件：collabedit-frontend/src/views/DocumentEditor.vue

3) 实时协同编辑（OT）

• 后端 OT：EditorWebSocketHandler 接收客户端操作，交给 OTDocument + OTTransformer 做冲突转换，并广播给其他用户。
  对应文件：src/main/java/org/example/collabedit/handler/EditorWebSocketHandler.java、src/main/java/org/example/collabedit/ot/
• 前端 OT 客户端：useOT.js 实现 OT 转换与待确认队列，useCollaborative.js 维护版本号与心跳。
  对应文件：collabedit-frontend/src/composables/useOT.js、collabedit-frontend/src/composables/useCollaborative.js

4) 协作光标同步

• WebSocket 消息类型 CURSOR_MOVE 广播协作者光标位置，前端在编辑器画布上渲染远程光标。
  对应文件：src/main/java/org/example/collabedit/handler/EditorWebSocketHandler.java、collabedit-frontend/src/views/DocumentEditor.vue

5) 评论系统（锚点高亮 + 实时同步）

• 评论 REST：CommentController 支持新增、回复、删除、解决/重开、统计与按锚点查询。
  对应文件：src/main/java/org/example/collabedit/Controller/CommentController.java
• 评论树：CommentServiceImpl 生成树形结构并计算回复数。
  对应文件：src/main/java/org/example/collabedit/service/impl/CommentServiceImpl.java
• 实时同步：CommentWebSocketHandler 广播评论事件（新增、删除、解决、输入提示、锚点删除等）。
  对应文件：src/main/java/org/example/collabedit/handler/CommentWebSocketHandler.java
• 前端高亮与侧边栏：useComments.js 负责锚点标记、行内指示器、评论面板与删除锚点联动。
  对应文件：collabedit-frontend/src/composables/useComments.js

6) 消息中心与私聊

• 消息拉取：MessageMapper.selectMessageHistory 聚合私聊与通知消息。
  对应文件：src/main/java/org/example/collabedit/mapper/MessageMapper.java
• 私聊发送：MessageController.send 保存消息并通过 NotificationWebSocketHandler 推送。
  对应文件：src/main/java/org/example/collabedit/Controller/MessageController.java
• 前端消息中心：Communication.vue 支持“回复我的 / 收到的评论 / 私聊”三类标签页与未读计数。
  对应文件：collabedit-frontend/src/views/Communication.vue
• 好友系统：FriendServiceImpl 双向插入好友关系，前端用于发起私聊与视频通话。
  对应文件：src/main/java/org/example/collabedit/service/impl/FriendServiceImpl.java

7) 视频通话（WebRTC + WebSocket 信令）

• 信令服务：VideoCallWebSocketHandler 转发 offer/answer/ice-candidate，并维护通话状态。
  对应文件：src/main/java/org/example/collabedit/handler/VideoCallWebSocketHandler.java
• 前端 WebRTC：VideoCall.vue 建立 PeerConnection，支持视频/音频降级与通话控制。
  对应文件：collabedit-frontend/src/components/VideoCall.vue

8) 文件上传与静态资源

• 上传接口：FileController 保存文件到磁盘路径，并返回 /uploads/** 访问地址。
  对应文件：src/main/java/org/example/collabedit/Controller/FileController.java
• 静态映射：WebConfig 将 /uploads/** 映射到 file.upload-path。
  对应文件：src/main/java/org/example/collabedit/config/WebConfig.java

9) 其他基础能力

• 健康检查：/api/health。
  对应文件：src/main/java/org/example/collabedit/Controller/HealthController.java
• 全局异常处理：GlobalExceptionHandler 统一返回 JSON 错误。
  对应文件：src/main/java/org/example/collabedit/handler/GlobalExceptionHandler.java
• 通用响应体：Result<T> 统一 code/message/data 结构。
  对应文件：src/main/java/org/example/collabedit/model/common/Result.java

关键接口与 WebSocket

REST

• 用户：/api/user/register、/api/user/login、/api/user/sendCode、/api/user/info、/api/user/update、/api/user/search
• 文档：/api/documents/tree、/api/documents/list、/api/documents/create、/api/documents/{id}、/api/documents/update、/api/documents/move、/api/documents/batch-delete、/api/documents/batch-move、/api/documents/search、/api/documents/{id}/star、/api/documents/{id}/share
• 评论：/api/comments/add、/api/comments/reply、/api/comments/list/{docId}、/api/comments/{commentId}、/api/comments/{commentId}/resolve、/api/comments/{commentId}/reopen、/api/comments/deleteByAnchorIds
• 消息：/api/messages/list、/api/messages/send、/api/messages/read/{id}
• 好友：/api/friend/add/{friendId}、/api/friend/list
• 上传：/api/file/upload

WebSocket

• 协同编辑：/ws/editor/{docId}/{userId}
• 评论同步：/ws/comment/{docId}/{userId}
• 消息通知：/ws/notification/{userId}
• 视频信令：/ws/video-call/{userId}

数据库表（来自实体类）

• users：用户信息
• documents：文档与文件夹
• document_share：文档分享关系
• t_comment：评论与回复（带锚点）
• messages：通知/私聊消息
• friend：好友关系

运行方式

后端

1. 修改配置：src/main/resources/application.yml 中的 MySQL / Redis / 邮箱 / 文件上传路径。
2. 启动：

./mvnw spring-boot:run

或使用 IDE 运行 CollabEditApplication。

前端

cd collabedit-frontend
npm install
npm run dev

默认访问地址：http://localhost:5173
Vite 代理 /api 到 http://localhost:8080。

目录结构概览

• 后端：src/main/java/org/example/collabedit
  • Controller/：REST 控制器
  • service/、service/impl/：业务逻辑
  • mapper/：MyBatis-Plus Mapper（含注解 SQL）
  • entity/、vo/、model/dto/
  • handler/：WebSocket 与全局异常
  • ot/：OT 算法实现
• 前端：collabedit-frontend/src
  • views/：页面（登录、注册、编辑器、消息中心、个人中心）
  • components/：视频通话、分享弹窗等
  • composables/：协作与评论逻辑
  • utils/：请求封装