6.1 KiB
6.1 KiB
Luckysheet CRDT 相较于 Luckysheet Master 的改进分析
本文档比较了 luckysheet-crdt-master 项目相对于官方 Luckysheet-master 项目的主要改进和增强,并列出了相关的代码位置或被修改的模块,方便进行代码优化选取。
一、 核心功能增强:实时协同编辑 (CRDT)
luckysheet-crdt-master 最重要的改进是引入了 CRDT (Conflict-free Replicated Data Type) 机制,实现了实时协作编辑功能。
| 改进点 | 描述 | 关键代码位置/模块 |
|---|---|---|
| CRDT 核心逻辑 | 实现数据结构和操作同步逻辑,确保多用户实时编辑时的数据一致性。 | 位于未公开的 Luckysheet 源码修改部分。 原始 Luckysheet 源码中关于数据操作和状态管理的核心文件被重写以支持 CRDT。 |
| WebSocket 协同连接 | 客户端初始化时,通过 WebSocket 连接后端协同服务。 | luckysheet-crdt-master/src/main.ts (约 56 行): 构造 options.updateUrl。luckysheet-crdt-master/src/config/index.ts: 定义 WS_SERVER_URL。 |
| 协同模式降级 | 当协同服务连接失败时,项目能够优雅地降级到普通模式,避免页面空白。 | luckysheet-crdt-master/src/main.ts (约 45-61 行): try...catch 块处理 API 请求失败,并使用 defaultSheetData 初始化。 |
| 连接关闭处理 | 确保在浏览器刷新或退出时,客户端主动关闭 WebSocket 连接,释放资源。 | luckysheet-crdt-master/src/main.ts (约 20 行): window.onbeforeunload = () => luckysheet && luckysheet.closeWebSocket(); |
| 后端服务集成 | 提供了基于 Node.js/Sequelize 的后端服务 (server/ 目录),用于数据持久化和协同消息转发。 |
luckysheet-crdt-master/server/ 目录下的文件结构。 |
二、 工程化与技术栈升级
| 改进点 | 描述 | 关键代码位置/模块 |
|---|---|---|
| TypeScript 迁移 | 项目主要开发语言迁移到 TypeScript,提供了类型提示,提高了代码质量和可维护性。 | 项目中大量使用 .ts 文件,如 src/main.ts, src/config/index.ts。 |
| 现代化构建工具 | 采用 Vite 进行前端构建和开发,取代了 Luckysheet 原始的 Gulp/Webpack 配置,提高了开发效率。 | luckysheet-crdt-master/vite.config.ts。 |
三、 功能和配置增强
1. 插件和依赖优化
| 改进点 | 描述 | 关键代码位置/模块 |
|---|---|---|
| 插件依赖加载优化 | 解决了原始 Luckysheet 中插件依赖可能因网络问题加载失败的问题。新的插件注册支持 dependScripts 和 dependLinks,允许指定本地或在线的依赖路径。 |
位于未公开的 Luckysheet 源码修改部分。 涉及 Luckysheet 插件加载机制的核心文件。 |
| 文件导入/导出插件化 | 将文件导入和导出功能封装为插件 (fileImport, fileExport),并支持协同。 |
插件相关代码 (未提供源码);配置项在 luckysheet-crdt-master/src/main.ts 中通过 registerPlugins() 注册。 |
2. UI 和交互增强
| 改进点 | 描述 | 关键代码位置/模块 |
|---|---|---|
| 页面 UI 重构 | 进行了页面 UI 重构,提升了用户体验。 | 涉及 Luckysheet 源码中 UI 渲染和样式的修改部分。 |
| 新增边框类型 | 新增了左斜线和右斜线边框类型。 | 涉及 Luckysheet 源码中边框绘制逻辑的修改。 |
| 图表协同增强 | 引入 vchart 进行图表渲染,动画更流畅,并实现了图表数据的协同联动。 |
涉及 Luckysheet 源码中图表模块的修改。 |
| 自定义菜单 | 允许通过配置项自定义菜单栏按钮和行为。 | 涉及 Luckysheet 菜单渲染模块的修改;配置项在 luckysheet-crdt-master/src/main.ts 中初始化:menuHandler: { customs: [...] }。 |
| 自定义请求头 | 允许用户通过 requestHeaders 配置项添加自定义请求头(如 token),以实现用户身份权限校验。 |
位于未公开的 Luckysheet 源码修改部分。 原始 Luckysheet 中处理数据加载的模块 (如原 src/core.js 或 src/controllers/server.js) 被修改,在 Ajax 请求中添加 beforeSend 钩子。 |
| 自定义快捷键 | 允许通过 customShortcutKeys 配置项添加自定义快捷键。 |
涉及 Luckysheet 快捷键处理模块的修改。 |
| 单元格图片功能 | 新增对单元格图片的支持,包括浮动图片和单元格图片的相互转换。 | 涉及 Luckysheet 源码中图片处理和渲染逻辑的修改。 |
3. 打印功能增强
| 改进点 | 描述 | 关键代码位置/模块 |
|---|---|---|
| 新增打印 API | 提供了 luckysheet.print(type, neetToPreview) API。 |
涉及 Luckysheet 源码中 API 注册和打印模块的修改。 |
| 打印模糊优化 | 新增 printDevicePixelRatio 配置项,用于控制打印清晰度。 |
涉及 Luckysheet 源码中打印配置和渲染逻辑的修改。 |
| 打印功能完善 | 支持打印预览、取消网格线、打印当前页/选区/指定页码、打印图片/图表等。 | 涉及 Luckysheet 源码中打印模块的修改。 |
四、 源码修复和优化 (Commit 记录)
luckysheet-crdt-master 还包含了对原始 Luckysheet 源码的一些 BUG 修复和协同优化,部分重要的提交如下:
| 改进点 | 描述 | 关键代码位置 (Commit Hash) |
|---|---|---|
| 协同提示框修复 | 修复多人协同提示框显示异常。 | af3c5837f8bec8a8cf4d261cbc8c9416d19902e1 |
| 光标协同修复 | 修复同用户 ID 刷新后光标无法实现协同。 | 5212b82c90595ff324c86db56e5ec25b88912d38 |
| 公式链协同 | 修复公式链相关协同消息传递。 | c121bcd389b4f8ecef00e3570cda9aea27e7333d |
| 批注导入 | 批注导入实现、完善源码对批注的识别。 | 72e52419ce0168c352b0ed78e182832426b7bdda |
| 删除列撤销协同 | 修复删除列后撤销协同不更新的 BUG。 | 232103c62df81e7cec3abd2b19e986d1ffad73d5 |
| 富文本复制粘贴 | 修复 inlineStr 富文本数据复制粘贴异常 BUG。 |
33274ef5e1a7462b4c4670bbd700d1f1dcba53fa |