5.3 KiB
5.3 KiB
思维导图官方功能落地 Checklist(阶段推进)
在的实现并没有“重写”核心,而是直接用 simple-mind-map 做壳。wolai-frontend/package.json 里依赖的是
simple-mind-map@0.14.0-fix.1,UI 层在 wolai-frontend/src/components/editor/blocks/MindmapBlock.tsx
里一次性注册了 Painter、AssociativeLine、OuterFrame、Export、Formula、RichText、MiniMap、Select、
Drag、KeyboardNavigation、NodeImgAdjust 等插件,并做了 BlockNote 的数据/自动保存封装,样式配置也直
接拷自官方 mind-map/src/config/zh.js(见 mindmapOptions.ts 的注释)。
- cankao/mind-map-0.16.0 文件夹其实内置的库版本号还是 0.14.0-fix.1(cankao/mind-map-0.16.0/simple-
mind-map/package.json),只是包含了官方 Vue Web 端与完整资源/插件集合;如果把它“直接引入”,要么嵌套 一套 Vue 应用,要么自己重新封装一层,成本高且会破坏现有 React/BlockNote 流程。 - 真正的差距不在“是否用官方”,而在“插件/功能覆盖度与版本”。目前缺口:未启用的官方插件(Search、
Scrollbar、TouchEvent、RainbowLines、Watermark、Demonstrate、Cooperate、MindMapLayoutPro 等)、导入 仅支持 JSON(官方还支持 markdown/xmind)、导出只暴露 JSON/PNG(官方支持 SVG/PDF/TXT/Markdown/
XMind)、布局 Pro、快捷键设置等也没露出 UI。 - 因此不建议把整套 mind-map-0.16.0/web 直接搬进来(框架不兼容、打包体积大、BlockNote 协同逻辑要重
写)。更可行的路径:- 升级核心库到官方最新编译产物(用 cankao/mind-map-0.16.0/simple-mind-map/dist 或重新 build), 保持 React 外壳不变;
- 对齐官方插件清单,按需 MindMap.usePlugin 并在我们的工具栏/侧栏补入口;
- 补齐导入/导出选项(markdown/xmind/svg/pdf/txt)、水印/彩虹线/滚动条等开关;
- 用 simple-mind-map 的默认配置常量和主题列表替换手动拷贝,减少跟进成本;
- 升级后回归测试:基础操作、导入导出、缩放/拖拽、快捷键、BlockNote 同步。
- 结论:现有方向没有“走弯路”,因为核心逻辑本就用的官方库;没必要嵌 Vue 端。重点是版本升级+插件/功能补 全,把 React 外壳和 BlockNote 适配保留,同时享受官方迭代。需要我按上面步骤先做库升级和插件补齐吗?
思维导图的要求:请参考cankao\kmind-plugin,思维导图应该是像当前luckysheet一样,能够在主页面中生成,并且可以使用斜杆菜单生成。当前主页面中的思维导图生成时会保存内容文件至当前的文件目录下。
思维导图布局:
- 阶段1:顶栏工具组
- 回退/前进/格式刷(参考:
cankao/lx-doc-main/mind-map/src/pages/Edit/components/ToolbarNodeBtnList.vue) - 同级/子节点插入、删除(同上
ToolbarNodeBtnList.vue插入/删除按钮) - 资源操作:图片、图标、超链接、备注、标签、概要、关联线、公式、外框、AI(AI 先占位)(同上文件 image/icon/link/note/tag/summary/associativeLine/formula/attachment/outerFrame 按钮)
- 目录/新建/打开/另存为/导入/导出(参考:
cankao/lx-doc-main/mind-map/src/pages/Edit/components/Toolbar.vue导入/导出/更多)
- 回退/前进/格式刷(参考:
- 阶段2:右侧侧栏 Tabs
- 节点样式、基础样式、连线、主题、结构(参考:
cankao/lx-doc-main/mind-map/src/pages/Edit/components/BaseStyle.vue、Style.vue、Theme.vue、Structure.vue) - 大纲视图与编辑、设置(滚轮行为/自由拖拽/AI等)、图标/贴纸、公式、备注、AI 对话(参考:
OutlineSidebar.vue、SidebarTrigger.vue;图标/贴纸NodeIconSidebar.vue;公式FormulaSidebar.vue)
- 节点样式、基础样式、连线、主题、结构(参考:
- [] 阶段2附加:组件化与文件化
- [] Mindmap 组件可嵌入笔记,创建时自动生成子文件并通过斜杠菜单插入
- 阶段3:浮动导航与 MiniMap
- 右下导航条(回到根、适配画布、缩放、只读切换、mini map 开关、搜索、全屏 、语言/滚轮模式等)(参考:
cankao/lx-doc-main/mind-map/src/pages/Edit/components/NavigatorToolbar.vue) - MiniMap 视窗拖动(参考:
cankao/lx-doc-main/mind-map/src/pages/Edit/components/Navigator.vue,MiniMap 插件在Edit.vue注册)
- 右下导航条(回到根、适配画布、缩放、只读切换、mini map 开关、搜索、全屏 、语言/滚轮模式等)(参考:
- 阶段4:状态栏
- 左下字数/节点统计(监听 data_change)(参考:
cankao/lx-doc-main/mind-map/src/pages/Edit/components/Count.vue)
- 左下字数/节点统计(监听 data_change)(参考:
- 阶段5:清理与同步
- 移除旧自研画布/入口,保留新版实现
- 同步
src与wolai-frontend两套前端
- 阶段6:测试验证
- desktop:hot 本地跑通,手测核心按钮/侧栏/mini map/统计栏
- 补充必要的快捷键/命令映射用例(人工验证)
完成每个子项后请及时勾选,便于阶段推进与回溯。