插件化架构基本升级完成

2026-02-17 22:08:25 +08:00 · 2023-01-17 16:53:28 +08:00
parent b40da53aef
commit c6929b82ad
19 changed files with 165 additions and 73 deletions
--- a/simple-mind-map/full.js
+++ b/simple-mind-map/full.js
@@ -0,0 +1,20 @@
+import MindMap from './index'
+import MiniMap from './src/MiniMap.js'
+import Watermark from './src/Watermark.js'
+import KeyboardNavigation from './src/KeyboardNavigation.js'
+import Export from './src/Export.js'
+import Drag from './src/Drag.js'
+import Select from './src/Select.js'
+import xmind from './src/parse/xmind.js'
+
+MindMap.xmind = xmind
+
+MindMap
+  .usePlugin(MiniMap)
+  .usePlugin(Watermark)
+  .usePlugin(Drag)
+  .usePlugin(KeyboardNavigation)
+  .usePlugin(Export)
+  .usePlugin(Select)
+
+export default MindMap
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.24",
+  "version": "0.3.0",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/web/package.json
+++ b/web/package.json
@@ -6,7 +6,7 @@
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && node ../copy.js",
    "lint": "vue-cli-service lint",
-    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/index.js --dest ../simple-mind-map/dist",
+    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/full.js --dest ../simple-mind-map/dist",
    "format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*",
    "buildDoc": "node ./scripts/buildDoc.js"
  },
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,9 @@
 # Changelog

+## 0.3.0
+
+Upgrade to plugin architecture, pull out some non-core functions as plugins, register as needed, and reduce the overall volume.
+
 ## 0.2.24

 New: Node free drag is changed to configurable, the default is `false`, not open; Support add watermark.
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,8 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.3.0</h2>
+<p>Upgrade to plugin architecture, pull out some non-core functions as plugins, register as needed, and reduce the overall volume.</p>
 <h2>0.2.24</h2>
 <p>New: Node free drag is changed to configurable, the default is <code>false</code>, not open; Support add watermark.</p>
 <h2>0.2.23</h2>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -4,6 +4,7 @@

 ## Features

+- [x] Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume
 - [x] Supports four types of structures: logical structure diagrams, mind maps,
      organizational structure diagrams, and directory organization diagrams
 - [x] Built-in multiple themes and allows for highly customized styles, and support register new themes
@@ -32,21 +33,19 @@ on `Vue2.x` and `ElementUI`. Features include:

 - [x] Toolbar, which supports inserting and deleting nodes, and editing node
      images, icons, hyperlinks, notes, tags, and summaries
-
 - [x] Sidebar, with panels for basic style settings, node style settings,
      outline, theme selection, and structure selection
-
 - [x] Import and export functionality; data is saved in the browser's local
      storage by default, but it also supports creating, opening, and editing
      local files on the computer directly
-
 - [x] Right-click menu, which supports operations such as expanding, collapsing,
      and organizing layout
-
 - [x] Bottom bar, which supports node and word count statistics, switching
      between edit and read-only modes, zooming in and out, and switching to
      full screen, support mini map

+Provide document page service.
+
 3.`dist`

 The folder containing the packaged resources for the `web` folder.
@@ -64,8 +63,8 @@ Documentation, etc.
 ## Special Note

 This project is rough and has not been thoroughly tested, its features are not
-yet fully developed, and there are some performance issues. It is only for
-learning and reference purposes and should not be used in actual projects.
+yet fully developed, and there are some performance issues, especially when the number of nodes is large. It is only for
+learning and reference purposes and please use it carefully for actual projects.

 The built-in themes and icons in the project come from:

--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -4,19 +4,20 @@
 <p><code>simple-mind-map</code> is a simple and powerful web mind map library, not dependent on any specific framework.</p>
 <h2>Features</h2>
 <ul>
-<li><input type="checkbox" id="checkbox16" checked="true"><label for="checkbox16">Supports four types of structures: logical structure diagrams, mind maps,</label>
+<li><input type="checkbox" id="checkbox17" checked="true"><label for="checkbox17">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
+<li><input type="checkbox" id="checkbox18" checked="true"><label for="checkbox18">Supports four types of structures: logical structure diagrams, mind maps,</label>
 organizational structure diagrams, and directory organization diagrams</li>
-<li><input type="checkbox" id="checkbox17" checked="true"><label for="checkbox17">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
-<li><input type="checkbox" id="checkbox18" checked="true"><label for="checkbox18">Supports shortcuts</label></li>
-<li><input type="checkbox" id="checkbox19" checked="true"><label for="checkbox19">Node content supports images, icons, hyperlinks, notes, tags, and</label>
+<li><input type="checkbox" id="checkbox19" checked="true"><label for="checkbox19">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
+<li><input type="checkbox" id="checkbox20" checked="true"><label for="checkbox20">Supports shortcuts</label></li>
+<li><input type="checkbox" id="checkbox21" checked="true"><label for="checkbox21">Node content supports images, icons, hyperlinks, notes, tags, and</label>
 summaries</li>
-<li><input type="checkbox" id="checkbox20" checked="true"><label for="checkbox20">Supports forward and backward navigation</label></li>
-<li><input type="checkbox" id="checkbox21" checked="true"><label for="checkbox21">Supports dragging and scaling</label></li>
-<li><input type="checkbox" id="checkbox22" checked="true"><label for="checkbox22">Supports right-click and Ctrl + left-click to select multiple items</label></li>
-<li><input type="checkbox" id="checkbox23" checked="true"><label for="checkbox23">Supports free dragging and dragging to adjust nodes</label></li>
-<li><input type="checkbox" id="checkbox24" checked="true"><label for="checkbox24">Supports various node shapes</label></li>
-<li><input type="checkbox" id="checkbox25" checked="true"><label for="checkbox25">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
-<li><input type="checkbox" id="checkbox26" checked="true"><label for="checkbox26">Supports mini map、support watermark</label></li>
+<li><input type="checkbox" id="checkbox22" checked="true"><label for="checkbox22">Supports forward and backward navigation</label></li>
+<li><input type="checkbox" id="checkbox23" checked="true"><label for="checkbox23">Supports dragging and scaling</label></li>
+<li><input type="checkbox" id="checkbox24" checked="true"><label for="checkbox24">Supports right-click and Ctrl + left-click to select multiple items</label></li>
+<li><input type="checkbox" id="checkbox25" checked="true"><label for="checkbox25">Supports free dragging and dragging to adjust nodes</label></li>
+<li><input type="checkbox" id="checkbox26" checked="true"><label for="checkbox26">Supports various node shapes</label></li>
+<li><input type="checkbox" id="checkbox27" checked="true"><label for="checkbox27">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
+<li><input type="checkbox" id="checkbox28" checked="true"><label for="checkbox28">Supports mini map、support watermark</label></li>
 </ul>
 <h2>Table of Contents</h2>
 <p>1.<code>simple-mind-map</code></p>
@@ -26,29 +27,20 @@ frameworks such as Vue and React, or without a framework.</p>
 <p>This is an online mind map built using the <code>simple-mind-map</code> library and based
 on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
 <ul>
-<li>
-<p><input type="checkbox" id="checkbox27" checked="true"><label for="checkbox27">Toolbar, which supports inserting and deleting nodes, and editing node</label>
-images, icons, hyperlinks, notes, tags, and summaries</p>
-</li>
-<li>
-<p><input type="checkbox" id="checkbox28" checked="true"><label for="checkbox28">Sidebar, with panels for basic style settings, node style settings,</label>
-outline, theme selection, and structure selection</p>
-</li>
-<li>
-<p><input type="checkbox" id="checkbox29" checked="true"><label for="checkbox29">Import and export functionality; data is saved in the browser's local</label>
+<li><input type="checkbox" id="checkbox29" checked="true"><label for="checkbox29">Toolbar, which supports inserting and deleting nodes, and editing node</label>
+images, icons, hyperlinks, notes, tags, and summaries</li>
+<li><input type="checkbox" id="checkbox30" checked="true"><label for="checkbox30">Sidebar, with panels for basic style settings, node style settings,</label>
+outline, theme selection, and structure selection</li>
+<li><input type="checkbox" id="checkbox31" checked="true"><label for="checkbox31">Import and export functionality; data is saved in the browser's local</label>
 storage by default, but it also supports creating, opening, and editing
-local files on the computer directly</p>
-</li>
-<li>
-<p><input type="checkbox" id="checkbox30" checked="true"><label for="checkbox30">Right-click menu, which supports operations such as expanding, collapsing,</label>
-and organizing layout</p>
-</li>
-<li>
-<p><input type="checkbox" id="checkbox31" checked="true"><label for="checkbox31">Bottom bar, which supports node and word count statistics, switching</label>
+local files on the computer directly</li>
+<li><input type="checkbox" id="checkbox32" checked="true"><label for="checkbox32">Right-click menu, which supports operations such as expanding, collapsing,</label>
+and organizing layout</li>
+<li><input type="checkbox" id="checkbox33" checked="true"><label for="checkbox33">Bottom bar, which supports node and word count statistics, switching</label>
 between edit and read-only modes, zooming in and out, and switching to
-full screen, support mini map</p>
-</li>
+full screen, support mini map</li>
 </ul>
+<p>Provide document page service.</p>
 <p>3.<code>dist</code></p>
 <p>The folder containing the packaged resources for the <code>web</code> folder.</p>
 <p>4.<code>docs</code></p>
@@ -58,8 +50,8 @@ full screen, support mini map</p>
 <p><a href="https://juejin.cn/post/7157681502506090510">Only a hundred lines of code are needed to add local file operation capability to your Web page. Are you sure not to try?</a></p>
 <h2>Special Note</h2>
 <p>This project is rough and has not been thoroughly tested, its features are not
-yet fully developed, and there are some performance issues. It is only for
-learning and reference purposes and should not be used in actual projects.</p>
+yet fully developed, and there are some performance issues, especially when the number of nodes is large. It is only for
+learning and reference purposes and please use it carefully for actual projects.</p>
 <p>The built-in themes and icons in the project come from:</p>
 <p><a href="https://naotu.baidu.com/">Baidu Mind Map</a></p>
 <p><a href="https://www.zhixi.com/">Zhixi Mind Map</a></p>
--- a/web/src/pages/Doc/en/start/index.md
+++ b/web/src/pages/Doc/en/start/index.md
@@ -40,6 +40,13 @@ Environments that support the `module` field will use `index.js` as the entry
 point, otherwise the packed `simpleMindMap.umd.min.js` will be used as the entry
 point.

+### Compile the doc
+
+```bash
+cd web 
+npm run buildDoc
+```
+
 ### Packaging the Demo

 ```bash
@@ -92,6 +99,16 @@ const mindMap = new MindMap({
 });
 ```

+The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the `babel` compilation `simple mind-map` in your project to prevent some newer `js` syntax some browsers not supporting it.
+
+If you need a file in the format of `umd` module, such as `CDN` in the browser, you can import it in the following way:
+
+```js
+import MindMap from "simple-mind-map/dist/simpleMindMap.umd.min.js";
+```
+
+The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
+
 ## Problems

 ### Error when using in Vite, indicating xml-js dependency error
--- a/web/src/pages/Doc/en/start/index.vue
+++ b/web/src/pages/Doc/en/start/index.vue
@@ -29,6 +29,10 @@ fields:</p>
 <p>Environments that support the <code>module</code> field will use <code>index.js</code> as the entry
 point, otherwise the packed <code>simpleMindMap.umd.min.js</code> will be used as the entry
 point.</p>
+<h3>Compile the doc</h3>
+<pre class="hljs"><code><span class="hljs-built_in">cd</span> web 
+npm run buildDoc
+</code></pre>
 <h3>Packaging the Demo</h3>
 <pre class="hljs"><code><span class="hljs-built_in">cd</span> web
 npm run build
@@ -67,6 +71,11 @@ compile this dependency:</p>
  }
 });
 </code></pre>
+<p>The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the <code>babel</code> compilation <code>simple mind-map</code> in your project to prevent some newer <code>js</code> syntax some browsers not supporting it.</p>
+<p>If you need a file in the format of <code>umd</code> module, such as <code>CDN</code> in the browser, you can import it in the following way:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map/dist/simpleMindMap.umd.min.js&quot;</span>;
+</code></pre>
+<p>The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.</p>
 <h2>Problems</h2>
 <h3>Error when using in Vite, indicating xml-js dependency error</h3>
 <p>Solution: use the following import method:</p>
--- a/web/src/pages/Doc/en/xmind/index.md
+++ b/web/src/pages/Doc/en/xmind/index.md
@@ -10,6 +10,14 @@ Provides methods for importing `XMind` files.
 import xmind from 'simple-mind-map/src/parse/xmind.js'
 ```

+If you are using the file in the format of `umd`, you can obtain it in the following way:
+
+```js
+import MindMap from "simple-mind-map/dist/simpleMindMap.umd.min"
+
+MindMap.xmind
+```
+
 ## Methods

 ### xmind.parseXmindFile(file)
--- a/web/src/pages/Doc/en/xmind/index.vue
+++ b/web/src/pages/Doc/en/xmind/index.vue
@@ -8,6 +8,11 @@
 <h2>Import</h2>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> xmind <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/parse/xmind.js&#x27;</span>
 </code></pre>
+<p>If you are using the file in the format of <code>umd</code>, you can obtain it in the following way:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map/dist/simpleMindMap.umd.min&quot;</span>
+
+MindMap.xmind
+</code></pre>
 <h2>Methods</h2>
 <h3>xmind.parseXmindFile(file)</h3>
 <p>Parsing the <code>.xmind</code> file and returning the parsed data. Note that this is
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,9 @@
 # Changelog

+## 0.3.0
+
+升级为插件化架构，将一些非核心功能抽离出来作为插件，按需注册，减小整体体积。
+
 ## 0.2.24

 新增：节点自由拖拽改为可配置，默认为`false`不开启；支持添加水印。
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,8 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.3.0</h2>
+<p>升级为插件化架构，将一些非核心功能抽离出来作为插件，按需注册，减小整体体积。</p>
 <h2>0.2.24</h2>
 <p>新增：节点自由拖拽改为可配置，默认为<code>false</code>不开启；支持添加水印。</p>
 <h2>0.2.23</h2>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -4,6 +4,7 @@

 ## 特性

+- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积
 - [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构
 - [x] 内置多种主题，允许高度自定义样式，支持注册新主题
 - [x] 支持快捷键
@@ -27,15 +28,13 @@
 使用`simple-mind-map`工具库，基于`vue2.x`、`ElementUI`搭建的在线思维导图。特性：

 - [x] 工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要
-
 - [x] 侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板
-
 - [x] 导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件
-
 - [x] 右键菜单，支持展开、收起、整理布局等操作
-
 - [x] 底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图

+提供文档页面服务。
+
 3.`dist`

 打包`web`后的资源文件夹。
@@ -52,7 +51,7 @@

 ## 特别说明

-本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，仅用于学习和参考，请勿用于实际项目。
+本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，尤其当节点数量比较庞大的时候，仅用于学习和参考，请谨慎用于实际项目。

 项目内置的主题和图标来自于：

--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -4,17 +4,18 @@
 <p><code>simple-mind-map</code>是一个简单&amp;强大的Web思维导图库，不依赖任何特定框架。</p>
 <h2>特性</h2>
 <ul>
-<li><input type="checkbox" id="checkbox0" checked="true"><label for="checkbox0">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
-<li><input type="checkbox" id="checkbox1" checked="true"><label for="checkbox1">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
-<li><input type="checkbox" id="checkbox2" checked="true"><label for="checkbox2">支持快捷键</label></li>
-<li><input type="checkbox" id="checkbox3" checked="true"><label for="checkbox3">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox4" checked="true"><label for="checkbox4">支持前进后退</label></li>
-<li><input type="checkbox" id="checkbox5" checked="true"><label for="checkbox5">支持拖动、缩放</label></li>
-<li><input type="checkbox" id="checkbox6" checked="true"><label for="checkbox6">支持右键和Ctrl+左键两种多选方式</label></li>
-<li><input type="checkbox" id="checkbox7" checked="true"><label for="checkbox7">支持节点自由拖拽、拖拽调整</label></li>
-<li><input type="checkbox" id="checkbox8" checked="true"><label for="checkbox8">支持多种节点形状</label></li>
-<li><input type="checkbox" id="checkbox9" checked="true"><label for="checkbox9">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>，支持从<code>json</code>、<code>xmind</code>导入</li>
-<li><input type="checkbox" id="checkbox10" checked="true"><label for="checkbox10">支持小地图、支持水印</label></li>
+<li><input type="checkbox" id="checkbox0" checked="true"><label for="checkbox0">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
+<li><input type="checkbox" id="checkbox1" checked="true"><label for="checkbox1">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
+<li><input type="checkbox" id="checkbox2" checked="true"><label for="checkbox2">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox3" checked="true"><label for="checkbox3">支持快捷键</label></li>
+<li><input type="checkbox" id="checkbox4" checked="true"><label for="checkbox4">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox5" checked="true"><label for="checkbox5">支持前进后退</label></li>
+<li><input type="checkbox" id="checkbox6" checked="true"><label for="checkbox6">支持拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox7" checked="true"><label for="checkbox7">支持右键和Ctrl+左键两种多选方式</label></li>
+<li><input type="checkbox" id="checkbox8" checked="true"><label for="checkbox8">支持节点自由拖拽、拖拽调整</label></li>
+<li><input type="checkbox" id="checkbox9" checked="true"><label for="checkbox9">支持多种节点形状</label></li>
+<li><input type="checkbox" id="checkbox10" checked="true"><label for="checkbox10">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>，支持从<code>json</code>、<code>xmind</code>导入</li>
+<li><input type="checkbox" id="checkbox11" checked="true"><label for="checkbox11">支持小地图、支持水印</label></li>
 </ul>
 <h2>目录介绍</h2>
 <p>1.<code>simple-mind-map</code></p>
@@ -22,22 +23,13 @@
 <p>2.<code>web</code></p>
 <p>使用<code>simple-mind-map</code>工具库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
 <ul>
-<li>
-<p><input type="checkbox" id="checkbox11" checked="true"><label for="checkbox11">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></p>
-</li>
-<li>
-<p><input type="checkbox" id="checkbox12" checked="true"><label for="checkbox12">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></p>
-</li>
-<li>
-<p><input type="checkbox" id="checkbox13" checked="true"><label for="checkbox13">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></p>
-</li>
-<li>
-<p><input type="checkbox" id="checkbox14" checked="true"><label for="checkbox14">右键菜单，支持展开、收起、整理布局等操作</label></p>
-</li>
-<li>
-<p><input type="checkbox" id="checkbox15" checked="true"><label for="checkbox15">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></p>
-</li>
+<li><input type="checkbox" id="checkbox12" checked="true"><label for="checkbox12">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox13" checked="true"><label for="checkbox13">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox14" checked="true"><label for="checkbox14">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox15" checked="true"><label for="checkbox15">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox16" checked="true"><label for="checkbox16">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
+<p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
 <p>打包<code>web</code>后的资源文件夹。</p>
 <p>4.<code>docs</code></p>
@@ -46,7 +38,7 @@
 <p><a href="https://juejin.cn/post/6987711560521089061">Web思维导图实现的技术点分析</a></p>
 <p><a href="https://juejin.cn/post/7157681502506090510">只需百来行代码，为你的Web页面增加本地文件操作能力，确定不试试吗？</a></p>
 <h2>特别说明</h2>
-<p>本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，仅用于学习和参考，请勿用于实际项目。</p>
+<p>本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，尤其当节点数量比较庞大的时候，仅用于学习和参考，请谨慎用于实际项目。</p>
 <p>项目内置的主题和图标来自于：</p>
 <p><a href="https://naotu.baidu.com/">百度脑图</a></p>
 <p><a href="https://www.zhixi.com/">知犀思维导图</a></p>
--- a/web/src/pages/Doc/zh/start/index.md
+++ b/web/src/pages/Doc/zh/start/index.md
@@ -36,6 +36,13 @@ npm run buildLibrary

 支持`module`字段的环境会以`index.js`为入口，否则会以打包后的`simpleMindMap.umd.min.js`为入口。

+### 编译文档
+
+```bash
+cd web 
+npm run buildDoc
+```
+
 ### 打包demo

 ```bash
@@ -83,6 +90,16 @@ const mindMap = new MindMap({
 });
 ```

+默认引入的是未打包的`ES`模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置`babel`编译`simple-mind-map`，防止一些较新的`js`语法部分浏览器不支持。
+
+如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以使用如下方式引入：
+
+```js
+import MindMap from "simple-mind-map/dist/simpleMindMap.umd.min.js";
+```
+
+这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
+
 ## 问题

 ### 1.在Vite中使用报错，提示xml-js依赖出错
--- a/web/src/pages/Doc/zh/start/index.vue
+++ b/web/src/pages/Doc/zh/start/index.vue
@@ -25,6 +25,10 @@ npm run buildLibrary
 }
 </code></pre>
 <p>支持<code>module</code>字段的环境会以<code>index.js</code>为入口，否则会以打包后的<code>simpleMindMap.umd.min.js</code>为入口。</p>
+<h3>编译文档</h3>
+<pre class="hljs"><code><span class="hljs-built_in">cd</span> web 
+npm run buildDoc
+</code></pre>
 <h3>打包demo</h3>
 <pre class="hljs"><code><span class="hljs-built_in">cd</span> web
 npm run build
@@ -57,6 +61,11 @@ npm run build
  }
 });
 </code></pre>
+<p>默认引入的是未打包的<code>ES</code>模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置<code>babel</code>编译<code>simple-mind-map</code>，防止一些较新的<code>js</code>语法部分浏览器不支持。</p>
+<p>如果你需要<code>umd</code>模块格式的文件，比如以<code>CDN</code>的方式在浏览器上使用，那么你可以使用如下方式引入：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map/dist/simpleMindMap.umd.min.js&quot;</span>;
+</code></pre>
+<p>这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。</p>
 <h2>问题</h2>
 <h3>1.在Vite中使用报错，提示xml-js依赖出错</h3>
 <p>解决方法：使用如下引入方式：</p>
--- a/web/src/pages/Doc/zh/xmind/index.md
+++ b/web/src/pages/Doc/zh/xmind/index.md
@@ -10,6 +10,14 @@
 import xmind from 'simple-mind-map/src/parse/xmind.js'
 ```

+如果使用的是`umd`格式的文件，那么可以通过如下方式获取：
+
+```js
+import MindMap from "simple-mind-map/dist/simpleMindMap.umd.min"
+
+MindMap.xmind
+```
+
 ## 方法

 ### xmind.parseXmindFile(file)
--- a/web/src/pages/Doc/zh/xmind/index.vue
+++ b/web/src/pages/Doc/zh/xmind/index.vue
@@ -8,6 +8,11 @@
 <h2>引入</h2>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> xmind <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/parse/xmind.js&#x27;</span>
 </code></pre>
+<p>如果使用的是<code>umd</code>格式的文件，那么可以通过如下方式获取：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map/dist/simpleMindMap.umd.min&quot;</span>
+
+MindMap.xmind
+</code></pre>
 <h2>方法</h2>
 <h3>xmind.parseXmindFile(file)</h3>
 <p>解析<code>.xmind</code>文件，返回解析后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用<code>mindMap.setFullData(data)</code>来将返回的数据渲染到画布上</p>