更新版本

Merge pull request #16 from harris2012/patch-2
fix typo
2026-02-18 06:18:27 +08:00 · 2022-07-30 08:21:43 +08:00 · 2022-07-29 21:59:53 +08:00 · 2022-07-29 21:57:05 +08:00 · 2022-07-29 17:55:20 +08:00 · 2022-07-29 11:29:25 +08:00
186 changed files with 13407 additions and 2638 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-oss.js
+.DS_Store
+package-lock.json
--- a/README.md
+++ b/README.md
@@ -1 +1,932 @@
-开发中...
+# web思维导图的简单实现
+
+## 特性
+
+- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构
+
+- [x] 内置多种主题，允许高度自定义样式
+
+- [x] 支持快捷键
+
+- [x] 节点内容支持图片、图标、超链接、备注、标签
+
+- [x] 支持前进后退
+
+- [x] 支持拖动、缩放
+
+- [x] 支持右键多选
+
+- [x] 支持节点拖拽
+
+## 目录介绍
+
+1.simple-mind-map
+
+思维导图工具库。
+
+2.web
+
+使用`simple-mind-map`工具库，基于vue2.x、ElementUI搭建的在线思维导图。
+
+3.dist
+
+打包后的资源文件夹。
+
+4.docs
+
+文档等。
+
+## 开发
+
+本地开发
+
+```bash
+git clone https://github.com/wanglin2/mind-map.git
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+npm run serve
+```
+
+打包
+
+```bash
+cd web
+npm run build
+```
+会自动把`index.html`移动到根目录。
+
+## 相关文章
+
+[Web思维导图实现的技术点分析](https://juejin.cn/post/6987711560521089061)
+
+# 安装
+
+```bash
+npm i simple-mind-map
+```
+
+注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
+
+```js
+module.exports = {
+  transpileDependencies: ['simple-mind-map']
+}
+```
+
+其他项目请自行修改打包配置。
+
+# API
+
+## 实例化
+
+```html
+<div id="mindMapContainer"></div>
+```
+
+```js
+import MindMap from "simple-mind-map";
+
+const mindMap = new MindMap({
+  el: document.getElementById('mindMapContainer'),
+  data: data
+});
+```
+
+
+
+### 实例化选项：
+
+| 字段名称             | 类型    | 默认值           | 描述                                                         | 是否必填 |
+| -------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
+| el                   | Element |                  | 容器元素，必须为DOM元素                                      | 是       |
+| data                 | Object  | {}               | 思维导图数据，可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) |          |
+| layout               | String  | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图） |          |
+| theme                | String  | default          | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫） |          |
+| themeConfig          | Object  | {}               | 主题配置，会和所选择的主题进行合并，可用字段可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) |          |
+| scaleRatio           | Number  | 0.1              | 放大缩小的增量比例                                           |          |
+| maxTag               | Number  | 5                | 节点里最多显示的标签数量，多余的会被丢弃                     |          |
+| exportPadding        | Number  | 20               | 导出图片时的内边距                                           |          |
+| imgTextMargin        | Number  | 5                | 节点里图片和文字的间距                                       |          |
+| textContentMargin    | Number  | 2                | 节点里各种文字信息的间距，如图标和文字的间距                 |          |
+| selectTranslateStep  | Number  | 3                | 多选节点时鼠标移动到边缘时的画布移动偏移量                   |          |
+| selectTranslateLimit | Number  | 20               | 多选节点时鼠标移动距边缘多少距离时开始偏移                   |          |
+| customNoteContentShow（v0.1.6+） | Object  | null               | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }}                   |          |
+| readonly（v0.1.7+） | Boolean  | false               |  是否是只读模式                  |          |
+
+
+### 实例方法：
+
+#### render()
+
+触发整体渲染，会进行节点复用，性能较`reRender`会更好一点，如果只是节点位置变化了可以调用该方法进行渲染
+
+
+
+#### reRender()
+
+整体重新渲染，会清空画布，节点也会重新创建，性能不好，慎重使用
+
+
+
+#### resize()
+
+容器尺寸变化后，需要调用该方法进行适应
+
+#### setMode(mode)
+
+v0.1.7+。切换模式为只读或编辑。
+
+`mode`：readonly、edit
+
+#### on(event, fn)
+
+监听事件，事件列表：
+
+| 事件名称                    | 描述                                       | 回调参数                                                     |
+| --------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
+| data_change                 | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据）                                       |
+| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发       | data（当前视图状态数据）                                     |
+| back_forward                | 前进或回退                                 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
+| draw_click                  | *画布的单击事件*                           | e（事件对象）                                                |
+| svg_mousedown               | svg画布的鼠标按下事件                      | e（事件对象）                                                |
+| mousedown                   | el元素的鼠标按下事件                       | e（事件对象）、this（Event事件类实例）                       |
+| mousemove                   | el元素的鼠标移动事件                       | e（事件对象）、this（Event事件类实例）                       |
+| drag                        | 如果是按住左键拖动的话会触发拖动事件       | e（事件对象）、this（Event事件类实例）                       |
+| mouseup                     | el元素的鼠标松开事件                       | e（事件对象）、this（Event事件类实例）                       |
+| mousewheel                  | 鼠标滚动事件                               | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
+| contextmenu                 | svg画布的鼠标右键菜单事件                  | e（事件对象）                                                |
+| node_click                  | 节点的单击事件                             | this（节点实例）、e（事件对象）                              |
+| node_mousedown              | 节点的鼠标按下事件                         | this（节点实例）、e（事件对象）                              |
+| node_mouseup                | 节点的鼠标松开事件                         | this（节点实例）、e（事件对象）                              |
+| node_dblclick               | 节点的双击事件                             | this（节点实例）、e（事件对象）                              |
+| node_contextmenu            | 节点的右键菜单事件                         | e（事件对象）、this（节点实例）                              |
+| before_node_active          | 节点激活前事件                             | this（节点实例）、activeNodeList（当前激活的所有节点列表）   |
+| node_active                 | 节点激活事件                               | this（节点实例）、activeNodeList（当前激活的所有节点列表）   |
+| expand_btn_click            | 节点展开或收缩事件                         | this（节点实例）                                             |
+| before_show_text_edit       | 节点文本编辑框即将打开事件                 |                                                              |
+| hide_text_edit              | 节点文本编辑框关闭事件                     | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
+| scale                       | 放大缩小事件                               | scale（缩放比例）                                            |
+
+
+
+#### emit(event, ...args)
+
+触发事件，可以是上面表格里的事件，也可以是自定义事件
+
+
+
+#### off(event, fn)
+
+解绑事件
+
+
+
+#### setTheme(theme)
+
+切换主题，可选主题见上面的选项表格
+
+
+
+#### getTheme()
+
+获取当前主题
+
+
+
+#### setThemeConfig(config)
+
+设置主题配置，`config`同上面选项表格里的选项`themeConfig`
+
+#### getCustomThemeConfig()
+
+获取自定义主题配置
+
+#### getThemeConfig(prop)
+
+获取某个主题配置属性值
+
+
+
+#### getLayout()
+
+获取当前的布局结构
+
+
+
+#### setLayout(layout)
+
+设置布局结构，可选值见上面选项表格的`layout`字段
+
+
+
+#### execCommand(name, ...args)
+
+执行命令，每执行一个命令就会在历史堆栈里添加一条记录用于回退或前进。所有命令如下：
+
+| 命令名称                 | 描述                                                         | 参数                                                         |
+| ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| SELECT_ALL               | 全选                                                         |                                                              |
+| BACK                     | 回退指定的步数                                               | step（要回退的步数，默认为1）                                |
+| FORWARD                  | 前进指定的步数                                               | step（要前进的步数，默认为1）                                |
+| INSERT_NODE              | 插入同级节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效 |                                                              |
+| INSERT_CHILD_NODE        | 插入子节点，操作节点为当前激活的节点                         |                                                              |
+| UP_NODE                  | 上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效 |                                                              |
+| DOWN_NODE                | 操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效 |                                                              |
+| REMOVE_NODE              | 删除节点，操作节点为当前激活的节点                           |                                                              |
+| PASTE_NODE               | 粘贴节点到节点，操作节点为当前激活的节点                     | data（要粘贴的节点数据，一般通过`renderer.copyNode()`方法和`renderer.cutNode()`方法获取） |
+| CUT_NODE                 | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) |
+| SET_NODE_STYLE           | 修改节点样式                                                 | node（要设置样式的节点）、prop（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式） |
+| SET_NODE_ACTIVE          | 设置节点是否激活                                             | node（要设置的节点）、active（布尔值，是否激活）             |
+| CLEAR_ACTIVE_NODE        | 清除当前已激活节点的激活状态，操作节点为当前激活的节点       |                                                              |
+| SET_NODE_EXPAND          | 设置节点是否展开                                             | node（要设置的节点）、expand（布尔值，是否展开）             |
+| EXPAND_ALL               | 展开所有节点                                                 |                                                              |
+| UNEXPAND_ALL             | 收起所有节点                                                 |                                                              |
+| SET_NODE_DATA            | 更新节点数据，即更新节点数据对象里`data`对象的数据           | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`） |
+| SET_NODE_TEXT            | 设置节点文本                                                 | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`） |
+| SET_NODE_IMAGE           | 设置节点图片                                                 | node（要设置的节点）、imgData（对象，图片信息，结构为：`{url, title, width, height}`，图片的宽高必须要传） |
+| SET_NODE_ICON            | 设置节点图标                                                 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
+| SET_NODE_HYPERLINK       | 设置节点超链接                                               | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选） |
+| SET_NODE_NOTE            | 设置节点备注                                                 | node（要设置的节点）、note（备注文字）                       |
+| SET_NODE_TAG             | 设置节点标签                                                 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js)里获取到） |
+| INSERT_AFTER（v0.1.5+）  | 将节点移动到另一个节点的后面                                 | node（要移动的节点）、 exist（目标节点）                     |
+| INSERT_BEFORE（v0.1.5+） | 将节点移动到另一个节点的前面                                 | node（要移动的节点）、 exist（目标节点）                     |
+| MOVE_NODE_TO（v0.1.5+）  | 移动一个节点作为另一个节点的子节点                           | node（要移动的节点）、 toNode（目标节点）                    |
+
+
+#### setData(data)
+
+动态设置思维导图数据
+
+`data`：思维导图结构数据
+
+
+#### export(type, isDownload, fileName)
+
+导出
+
+`type`：要导出的类型，可选值：png、svg
+
+`isDownload`：是否需要直接触发下载，布尔值，默认为`false`
+
+`fileName`：（v0.1.6+）导出文件的名称，默认为`思维导图`
+
+#### toPos(x, y)
+
+v0.1.5+
+
+将浏览器可视窗口的坐标转换成相对于画布的坐标
+
+## render实例
+
+`render`实例负载整个渲染过程，可通过`mindMap.renderer`获取到
+
+
+
+### 属性
+
+#### activeNodeList
+
+获取当前激活的节点列表
+
+
+
+#### root
+
+获取节点树的根节点
+
+
+
+### 方法
+
+#### clearActive()
+
+清除当前激活的节点
+
+#### clearAllActive()
+
+清除当前所有激活节点，并会触发`node_active`事件 
+
+#### startTextEdit()
+
+（v0.1.6+）若有文字编辑需求可调用该方法，会禁用回车键和删除键相关快捷键防止冲突 
+
+#### endTextEdit()
+
+（v0.1.6+）结束文字编辑，会恢复回车键和删除键相关快捷键
+
+#### addActiveNode(node)
+
+添加节点到激活列表里
+
+
+
+#### removeActiveNode(node)
+
+在激活列表里移除某个节点
+
+
+
+#### findActiveNodeIndex(node)
+
+检索某个节点在激活列表里的索引
+
+
+
+#### getNodeIndex(node)
+
+获取节点在同级里的位置索引
+
+
+
+#### removeOneNode(node)
+
+删除某个指定节点
+
+
+
+#### copyNode()
+
+复制节点，操作节点为当前激活节点，有多个激活节点只会操作第一个节点
+
+
+
+#### setNodeDataRender(node, data)
+
+设置节点数据，即`data`字段的数据，并会根据节点大小是否变化来判断是否需要重新渲染该节点，`data`为对象，如：`{text: '我是新文本'}`
+
+
+
+#### moveNodeTo(node, toNode)
+
+v0.1.5+
+
+移动一个节点作为另一个节点的子节点
+
+
+
+#### insertBefore(node, exist)
+
+v0.1.5+
+
+将节点移动到另一个节点的前面
+
+
+
+#### insertAfter(node, exist)
+
+v0.1.5+
+
+将节点移动到另一个节点的后面
+
+
+
+## keyCommand实例
+
+`keyCommand`实例负责快捷键的添加及触发，内置了一些快捷键，也可以自行添加。可通过`mindMap.keyCommand`获取到该实例。
+
+
+
+### 方法
+
+#### keyCommand(key, fn)
+
+添加快捷键
+
+`key`：快捷键按键，按键值可以通过[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js)查看。示例：
+
+```js
+// 单个按键
+mindMap.keyCommand..addShortcut('Enter', () => {})
+// 或
+mindMap.keyCommand.addShortcut('Del|Backspace', () => {})
+// 组合键
+mindMap.keyCommand.addShortcut('Control+Enter', () => {})
+```
+
+`fn`：要执行的方法
+
+
+
+## command实例
+
+`command`实例负责命令的添加及执行，内置了很多命令，也可以自行添加，命令指需要在历史堆栈数据里添加副本的操作。可通过`mindMap.command`获取到该实例
+
+
+
+### 方法
+
+#### add(name, fn)
+
+添加命令。
+
+`name`：命令名称
+
+`fn`：命令要执行的方法
+
+
+
+#### remove(name, fn)
+
+移除命令。
+
+`name`：要移除的命令名称
+
+`fn`：要移除的方法，不传的话移除该命令所有的方法
+
+
+
+#### getCopyData()
+
+获取渲染树数据副本
+
+#### clearHistory()
+
+清空历史堆栈数据
+
+
+## view实例
+
+`view`实例负责视图操作，可通过`mindMap.view`获取到该实例
+
+
+
+### 方法
+
+#### translateX(step)
+
+`x`方向进行平移，`step`：要平移的像素
+
+
+
+#### translateY(step)
+
+`y`方向进行平移，`step`：要平移的像素
+
+
+
+#### reset()
+
+恢复到默认的变换
+
+
+
+#### narrow()
+
+缩小
+
+
+
+#### enlarge()
+
+放大
+
+
+
+#### getTransformData()
+
+v0.1.1+
+
+获取当前变换数据，可用于回显
+
+
+
+#### setTransformData(data)
+
+v0.1.1+
+
+动态设置变换数据，可以通过getTransformData方法获取变换数据
+
+
+
+## doExport实例
+
+`doExport`实例负责导出，可通过`mindMap.doExport`获取到该实例
+
+
+
+### 方法
+
+#### png()
+
+导出为`png`，异步方法，返回图片数据，`data:url`数据，可以自行下载或显示
+
+
+
+#### svg()
+
+导出为`svg`，异步方法，返回`svg`数据，`data:url`数据，可以自行下载或显示
+
+
+
+#### getSvgData()
+
+获取`svg`数据，异步方法，返回一个对象：
+
+```js
+{
+  node// svg对象
+  str// svg字符串
+}
+```
+
+
+
+## select实例
+
+`select`实例负责鼠标右键多选节点操作，可通过`mindMap.select`获取到该实例
+
+
+
+### 方法
+
+#### toPos(x, y)
+
+转换鼠标位置为相对于容器`el`的位置
+
+
+
+## batchExecution实例
+
+`batchExecution`用来批量异步的执行一些操作，如果某个操作同时多次调用，那么只会在下一个事件循环里执行一次。可以通过`mindMap.batchExecution`获取到该实例
+
+
+
+### 方法
+
+#### push(name, fn)
+
+添加任务。
+
+`name`：任务名称
+
+`fn`：任务
+
+
+
+## node实例
+
+每个节点都会实例化一个`node`实例
+
+
+
+### 属性
+
+#### nodeData
+
+该节点对应的真实数据
+
+
+
+#### uid
+
+该节点唯一的标识
+
+
+
+#### isRoot
+
+是否是根节点
+
+
+
+#### layerIndex
+
+节点层级
+
+
+
+#### width
+
+节点的宽
+
+
+
+#### height
+
+节点的高
+
+
+
+#### left
+
+节点的`left`位置
+
+
+
+#### top
+
+节点的`top`位置
+
+
+
+#### parent
+
+节点的父节点
+
+
+
+#### children
+
+节点的子节点列表
+
+
+
+#### group
+
+节点是内容容器，`svg`对象
+
+
+
+#### isDrag
+
+v0.1.5+
+
+节点是否正在拖拽中
+
+
+
+### 方法
+
+#### addChildren(node)
+
+添加子节点
+
+
+
+#### getSize()
+
+计算节点的宽高，返回一个布尔值，代表是否宽高发生了变化
+
+
+
+#### renderNode()
+
+渲染节点到画布，会移除旧的内容节点，创建新的
+
+
+
+#### render()
+
+递归渲染该节点及其所有子节点，第一次调用会创建节点内容，后续只会更新节点位置，想要重新渲染内容，可以先把`initRender`属性设为`true`
+
+
+
+#### remove()
+
+递归删除该节点及其所有子节点
+
+
+
+#### renderLine()
+
+重新渲染该节点到其子节点之间的连线
+
+
+
+#### removeLine()
+
+移除该节点到其子节点之间的连线
+
+
+
+#### renderExpandBtn()
+
+渲染展开收缩按钮的内容
+
+
+
+#### removeExpandBtn()
+
+移除展开收缩按钮
+
+
+
+#### getStyle(prop, root, isActive)
+
+获取某个最终应用到该节点的样式值
+
+`prop`：要获取的样式属性
+
+`root`：是否是根节点，默认`false`
+
+`isActive`：获取的是否是激活状态的样式值，默认`false`
+
+
+
+#### setStyle(prop, value, isActive)
+
+修改节点的某个样式，`SET_NODE_STYLE`命令的快捷方法
+
+
+
+#### getData(key)
+
+获取该节点真实数据`nodeData`的`data`对象里的指定值，`key`不传返回这个`data`对象
+
+
+
+#### setData(data)
+
+设置节点数据，`SET_NODE_DATA`命令的快捷方法
+
+
+
+#### setText(text)
+
+设置节点文本，`SET_NODE_TEXT`命令的快捷方法
+
+
+
+#### setImage(imgData)
+
+设置节点图片，`SET_NODE_IMAGE`命令的快捷方法
+
+
+
+#### setIcon(icons)
+
+设置节点图标，`SET_NODE_ICON`命令的快捷方法
+
+
+
+#### setHyperlink(link, title)
+
+设置节点超链接，`SET_NODE_HYPERLINK`命令的快捷方法
+
+
+
+#### setNote(note)
+
+设置节点备注，`SET_NODE_NOTE`命令的快捷方法
+
+
+
+#### setTag(tag)
+
+设置节点标签，`SET_NODE_TAG`的快捷方法
+
+
+
+#### hide()
+
+v0.1.5+
+
+隐藏节点及其下级节点
+
+
+
+#### show()
+
+v0.1.5+
+
+显示节点及其下级节点
+
+
+
+#### isParent(node)
+
+v0.1.5+
+
+检测当前节点是否是某个节点的祖先节点
+
+
+
+#### isBrother(node)
+
+v0.1.5+
+
+检测当前节点是否是某个节点的兄弟节点
+
+
+
+## 内置工具方法
+
+引用：
+
+```js
+import {walk, ...} from 'simple-mind-map/src/utils'
+```
+
+
+
+### 方法
+
+#### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
+
+深度优先遍历树
+
+`root`：要遍历的树的根节点
+
+`parent`：父节点
+
+`beforeCallback`：前序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index
+
+`afterCallback`：后序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index
+
+`isRoot`：是否是根节点
+
+`layerIndex`：节点层级
+
+`index`：节点在同级节点里的索引
+
+示例：
+
+```js
+walk(tree, null, () => {}, () => {}, false, 0, 0)
+```
+
+
+
+#### bfsWalk(root, callback)
+
+广度优先遍历树
+
+
+
+#### resizeImgSize(width, height, maxWidth, maxHeight)
+
+缩放图片的尺寸
+
+`width`：图片原本的宽
+
+`height`：图片原本的高
+
+`maxWidth`：要缩放到的宽
+
+`maxHeight`：要缩放到的高
+
+`maxWidth`和`maxHeight`可以同时都传，也可以只传一个
+
+
+
+#### resizeImg(imgUrl, maxWidth, maxHeight)
+
+缩放图片，内部先加载图片，然后调用`resizeImgSize`方法，返回一个`promise`
+
+
+
+#### simpleDeepClone(data)
+
+极简的深拷贝方法，只能针对全是基本数据的对象，否则会报错
+
+
+
+#### copyRenderTree(tree, root)
+
+复制渲染树数据，示例：
+
+```js
+copyRenderTree({}, this.mindMap.renderer.renderTree)
+```
+
+
+
+#### copyNodeTree(tree, root)
+
+复制节点树数据，主要是剔除其中的引用`node`实例的`_node`，然后复制`data`对象的数据，示例：
+
+```js
+copyNodeTree({}, node)
+```
+
+
+
+#### imgToDataUrl(src)
+
+图片转成dataURL
+
+
+
+#### downloadFile(file, fileName)
+
+下载文件
+
+
+
+#### throttle(fn, time = 300, ctx)
+
+节流函数
+
+
+
+#### asyncRun(taskList, callback = () => {})
+
+异步执行任务队列，多个任务是同步执行的，没有先后顺序
+
+
+
+# 特别说明
+
+本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，仅用于学习和参考，请勿用于实际项目。
+
+项目内置的主题和图标来自于：
+
+[百度脑图](https://naotu.baidu.com/)
+
+[知犀思维导图](https://www.zhixi.com/)
+
--- a/copy.js
+++ b/copy.js
@@ -0,0 +1,15 @@
+const fs = require('fs')
+const path = require('path')
+
+const src = path.resolve(__dirname, './dist/index.html') 
+const dest = path.resolve(__dirname, './index.html') 
+
+if (fs.existsSync(dest)) {
+    fs.unlinkSync(dest)
+}
+
+if (fs.existsSync(src)) {
+    fs.copyFileSync(src, dest)
+    fs.unlinkSync(src)
+}
+
--- a/docs/assets/1.gif
+++ b/docs/assets/1.gif
--- a/docs/assets/2.gif
+++ b/docs/assets/2.gif
--- a/docs/assets/2021-07-21-19-54-48.gif
+++ b/docs/assets/2021-07-21-19-54-48.gif
--- a/docs/assets/3.gif
+++ b/docs/assets/3.gif
--- a/docs/assets/image-20210717174716810.png
+++ b/docs/assets/image-20210717174716810.png
--- a/docs/assets/image-20210717202607786.png
+++ b/docs/assets/image-20210717202607786.png
--- a/docs/assets/image-20210717210355763.png
+++ b/docs/assets/image-20210717210355763.png
--- a/docs/assets/image-20210717224527681.png
+++ b/docs/assets/image-20210717224527681.png
--- a/docs/assets/image-20210717230604086.png
+++ b/docs/assets/image-20210717230604086.png
--- a/docs/assets/image-20210717230805200.png
+++ b/docs/assets/image-20210717230805200.png
--- a/docs/assets/image-20210717230808662.png
+++ b/docs/assets/image-20210717230808662.png
--- a/docs/assets/image-20210718083006111.png
+++ b/docs/assets/image-20210718083006111.png
--- a/docs/assets/image-20210718083616076.png
+++ b/docs/assets/image-20210718083616076.png
--- a/docs/assets/image-20210718092817830.png
+++ b/docs/assets/image-20210718092817830.png
--- a/docs/assets/image-20210718102434530.png
+++ b/docs/assets/image-20210718102434530.png
--- a/docs/assets/image-20210718110652705.png
+++ b/docs/assets/image-20210718110652705.png
--- a/docs/assets/image-20210718111334085.png
+++ b/docs/assets/image-20210718111334085.png
--- a/docs/assets/image-20210718134525691.png
+++ b/docs/assets/image-20210718134525691.png
--- a/docs/assets/image-20210718184835414.png
+++ b/docs/assets/image-20210718184835414.png
--- a/docs/assets/image-20210718191124627.png
+++ b/docs/assets/image-20210718191124627.png
--- a/docs/assets/image-20210718221814590.png
+++ b/docs/assets/image-20210718221814590.png
--- a/docs/assets/image-20210718222150055.png
+++ b/docs/assets/image-20210718222150055.png
--- a/docs/assets/image-20210718222612078.png
+++ b/docs/assets/image-20210718222612078.png
--- a/docs/assets/image-20210720191943989.png
+++ b/docs/assets/image-20210720191943989.png
--- a/docs/assets/image-20210720192008277.png
+++ b/docs/assets/image-20210720192008277.png
--- a/docs/assets/image-20210720200816281.png
+++ b/docs/assets/image-20210720200816281.png
--- a/docs/assets/image-20210721183307656.png
+++ b/docs/assets/image-20210721183307656.png
--- a/docs/assets/image-20210721183340310.png
+++ b/docs/assets/image-20210721183340310.png
--- a/docs/assets/image-20210721183823754.png
+++ b/docs/assets/image-20210721183823754.png
--- a/docs/assets/image-20210721184140488.png
+++ b/docs/assets/image-20210721184140488.png
--- a/docs/assets/image-20210721185453825.png
+++ b/docs/assets/image-20210721185453825.png
--- a/docs/assets/image-20210721190700979.png
+++ b/docs/assets/image-20210721190700979.png
--- a/docs/assets/swdt.jpg
+++ b/docs/assets/swdt.jpg
--- a/docs/web思维导图实现的技术点分析.md
+++ b/docs/web思维导图实现的技术点分析.md
--- a/index.html
+++ b/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/css/app.b793e592.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.c4887e17.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.384d822e.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.b793e592.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.384d822e.js"></script><script src="dist/js/app.c4887e17.js"></script></body></html>
--- a/simple-mind-map/README.md
+++ b/simple-mind-map/README.md
@@ -0,0 +1,3 @@
+# 一个web思维导图的简单实现
+
+详细文档见：[https://github.com/wanglin2/mind-map](https://github.com/wanglin2/mind-map)
--- a/simple-mind-map/example/exampleData.js
+++ b/simple-mind-map/example/exampleData.js
@@ -0,0 +1,892 @@
+const createFullData = () => {
+    return {
+        "image": "/enJFNMHnedQTYTESGfDkctCp2.jpeg",
+        "imageTitle": "图片名称",
+        "imageSize": {
+            "width": 1000,
+            "height": 563
+        },
+        "icon": ['priority_1'],
+        "tag": ["标签1", "标签2"],
+        "hyperlink": "http://lxqnsys.com/",
+        "hyperlinkTitle": "理想青年实验室",
+        "note": "理想青年实验室\n一个有意思的角落"
+    };
+}
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-15 22:23:24 
+ * @Desc: 节点较多示例数据 
+ */
+const data1 = {
+    "root": {
+        "data": {
+            "text": "根节点"
+        },
+        "children": [
+            {
+                "data": {
+                    "text": "二级节点1",
+                    "expand": true,
+                },
+                "children": [{
+                    "data": {
+                        "text": "子节点",
+                        ...createFullData()
+                    },
+                    "children": [{
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                        "children": [{
+                            "data": {
+                                "text": "子节点",
+                                ...createFullData()
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                            "children": [{
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                                "children": [{
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                    "children": [{
+                                        "data": {
+                                            "text": "子节点",
+                                        },
+                                    }, {
+                                        "data": {
+                                            "text": "子节点",
+                                        },
+                                        "children": [{
+                                            "data": {
+                                                "text": "子节点",
+                                            },
+                                        }, {
+                                            "data": {
+                                                "text": "子节点",
+                                            },
+                                        }, {
+                                            "data": {
+                                                "text": "子节点",
+                                            },
+                                        }, {
+                                            "data": {
+                                                "text": "子节点",
+                                            },
+                                        }]
+                                    }, {
+                                        "data": {
+                                            "text": "子节点",
+                                        },
+                                    }, {
+                                        "data": {
+                                            "text": "子节点",
+                                        },
+                                    }]
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }]
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }]
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }]
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }]
+                }]
+            },
+            {
+                "data": {
+                    "text": "二级节点2",
+                    "expand": true,
+                },
+                "children": [{
+                    "data": {
+                        "text": "子节点",
+                    },
+                }, {
+                    "data": {
+                        "text": "子节点",
+                    },
+                    "children": [{
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }]
+                }, {
+                    "data": {
+                        "text": "子节点",
+                    },
+                }, {
+                    "data": {
+                        "text": "子节点",
+                    },
+                }]
+            },
+            {
+                "data": {
+                    "text": "二级节点3",
+                    "expand": true,
+                },
+                "children": [{
+                    "data": {
+                        "text": "子节点",
+                    },
+                    "children": [{
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                        "children": [{
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }]
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }]
+                }]
+            },
+            {
+                "data": {
+                    "text": "二级节点4",
+                    "expand": true,
+                },
+                "children": [{
+                    "data": {
+                        "text": "子节点",
+                    },
+                    "children": [{
+                        "data": {
+                            "text": "子节点",
+                        },
+                        "children": [{
+                            "data": {
+                                "text": "子节点",
+                            },
+                            "children": [{
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }]
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }]
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                        "children": [{
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                            "children": [{
+                                "data": {
+                                    "text": "子节点",
+                                },
+                                "children": [{
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }]
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                                "children": [{
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                    "children": [{
+                                        "data": {
+                                            "text": "子节点",
+                                        },
+                                    }, {
+                                        "data": {
+                                            "text": "子节点",
+                                        },
+                                    }, {
+                                        "data": {
+                                            "text": "子节点",
+                                        },
+                                    }, {
+                                        "data": {
+                                            "text": "子节点",
+                                        },
+                                    }]
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }]
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }]
+                        }]
+                    }, {
+                        "data": {
+                            "text": "子节点",
+                        },
+                        "children": [{
+                            "data": {
+                                "text": "子节点",
+                            },
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                            "children": [{
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                                "children": [{
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }, {
+                                    "data": {
+                                        "text": "子节点",
+                                    },
+                                }]
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }]
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                            "children": [{
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }]
+                        }, {
+                            "data": {
+                                "text": "子节点",
+                            },
+                            "children": [{
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }, {
+                                "data": {
+                                    "text": "子节点",
+                                },
+                            }]
+                        }]
+                    }]
+                }]
+            },
+        ]
+    }
+}
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-07-12 13:49:43 
+ * @Desc: 真实场景数据 
+ */
+const data2 = {
+    "root": {
+        "data": {
+            "text": "一周安排"
+        },
+        "children": [
+            {
+                "data": {
+                    "text": "生活"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "锻炼"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "晨跑"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "7:00-8:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "夜跑"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "20:00-21:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "饮食"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "早餐"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "8:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "午餐"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "11:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "晚餐"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "19:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "休息"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "午休"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "12:30-13:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "晚休"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "23:00-6:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "data": {
+                    "text": "工作日\n周一至周五"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "日常工作"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "9:00-18:00"
+                                },
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "工作总结"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "21:00-22:00"
+                                },
+                                "children": []
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "data": {
+                    "text": "学习"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "工作日"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "早间新闻"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "8:00-8:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "阅读"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "21:00-23:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "休息日"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "财务管理"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "9:00-10:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "职场技能"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "14:00-15:30"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            },
+                            {
+                                "data": {
+                                    "text": "其他书籍"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "16:00-18:00"
+                                        },
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "data": {
+                    "text": "休闲娱乐"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "看电影"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "1~2部"
+                                },
+                                "children": []
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "逛街"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "1~2次"
+                                },
+                                "children": []
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+}
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-07-12 14:29:10 
+ * @Desc: 极简数据 
+ */
+const data3 = {
+    "root": {
+        "data": {
+            "text": "根节点"
+        },
+        "children": [
+            {
+                "data": {
+                    "text": "二级节点"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "子节点"
+                        },
+                        "children": []
+                    },
+                    {
+                        "data": {
+                            "text": "子节点"
+                        },
+                        "children": []
+                    }
+                ]
+            }
+        ]
+    }
+}
+
+const data4 = {
+    "root": {
+        "data": {
+            "text": "根节点"
+        },
+        "children": [
+            {
+                "data": {
+                    "text": "二级节点1"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "子节点1-1"
+                        },
+                        "children": []
+                    },
+                    {
+                        "data": {
+                            "text": "子节点1-2"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "子节点1-2-1"
+                                },
+                                "children": []
+                            },
+                            {
+                                "data": {
+                                    "text": "子节点1-2-2"
+                                },
+                                "children": []
+                            },
+                            {
+                                "data": {
+                                    "text": "子节点1-2-3"
+                                },
+                                "children": []
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "data": {
+                    "text": "二级节点2"
+                },
+                "children": [
+                    {
+                        "data": {
+                            "text": "子节点2-1"
+                        },
+                        "children": [
+                            {
+                                "data": {
+                                    "text": "子节点2-1-1"
+                                },
+                                "children": [
+                                    {
+                                        "data": {
+                                            "text": "子节点2-1-1-1"
+                                        },
+                                        "children": []
+                                    },
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "data": {
+                            "text": "子节点2-2"
+                        },
+                        "children": []
+                    }
+                ]
+            }
+        ]
+    }
+}
+
+const rootData = {
+    "root": {
+        "data": {
+            "text": "根节点"
+        },
+        "children": []
+    }
+}
+
+export default {
+    // ...data1,
+    // ...data2,
+    ...data3,
+    // ...data4,
+    // ...rootData,
+    "theme": {
+        "template": "minions",
+        "config": {
+            // 自定义配置...
+        }
+    },
+    "layout": "logicalStructure",
+    // "layout": "mindMap",
+    // "layout": "catalogOrganization"
+    // "layout": "organizationStructure"
+}
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -0,0 +1,372 @@
+import View from './src/View'
+import Event from './src/Event'
+import Render from './src/Render'
+import merge from 'deepmerge'
+import theme from './src/themes'
+import Style from './src/Style'
+import KeyCommand from './src/KeyCommand'
+import Command from './src/Command'
+import BatchExecution from './src/BatchExecution'
+import Export from './src/Export'
+import Select from './src/Select'
+import Drag from './src/Drag'
+import {
+    layoutValueList
+} from './src/utils/constant'
+import {
+    SVG
+} from '@svgdotjs/svg.js'
+
+// 默认选项配置
+const defaultOpt = {
+    // 是否只读
+    readonly: false,
+    // 布局
+    layout: 'logicalStructure',
+    // 主题
+    theme: 'default', // 内置主题：default（默认主题）
+    // 主题配置，会和所选择的主题进行合并
+    themeConfig: {},
+    // 放大缩小的增量比例
+    scaleRatio: 0.1,
+    // 最多显示几个标签
+    maxTag: 5,
+    // 导出图片时的内边距
+    exportPadding: 20,
+    // 展开收缩按钮尺寸
+    expandBtnSize: 20,
+    // 节点里图片和文字的间距
+    imgTextMargin: 5,
+    // 节点里各种文字信息的间距，如图标和文字的间距
+    textContentMargin: 2,
+    // 多选节点时鼠标移动到边缘时的画布移动偏移量
+    selectTranslateStep: 3,
+    // 多选节点时鼠标移动距边缘多少距离时开始偏移
+    selectTranslateLimit: 20,
+    // 自定义节点备注内容显示
+    customNoteContentShow: null
+    /*
+        {
+            show(){},
+            hide(){}
+        }
+    */
+}
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-06 11:18:47 
+ * @Desc: 思维导图 
+ */
+class MindMap {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 11:19:01 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        // 合并选项
+        this.opt = this.handleOpt(merge(defaultOpt, opt))
+
+        // 容器元素
+        this.el = this.opt.el
+        this.elRect = this.el.getBoundingClientRect()
+
+        // 画布宽高
+        this.width = this.elRect.width
+        this.height = this.elRect.height
+
+        // 画布
+        this.svg = SVG().addTo(this.el).size(this.width, this.height)
+        this.draw = this.svg.group()
+
+        // 节点id
+        this.uid = 0
+
+        // 初始化主题
+        this.initTheme()
+
+        // 事件类
+        this.event = new Event({
+            mindMap: this
+        })
+
+        // 按键类
+        this.keyCommand = new KeyCommand({
+            mindMap: this
+        })
+
+        // 命令类
+        this.command = new Command({
+            mindMap: this
+        })
+
+        // 渲染类
+        this.renderer = new Render({
+            mindMap: this
+        })
+
+        // 视图操作类
+        this.view = new View({
+            mindMap: this,
+            draw: this.draw
+        })
+
+        // 导出类
+        this.doExport = new Export({
+            mindMap: this
+        })
+
+        // 选择类
+        this.select = new Select({
+            mindMap: this
+        })
+
+        // 拖动类
+        this.drag = new Drag({
+            mindMap: this
+        })
+
+        // 批量执行类
+        this.batchExecution = new BatchExecution()
+
+        // 初始渲染
+        this.reRender()
+        setTimeout(() => {
+            this.command.addHistory()
+        }, 0)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-01 22:15:22 
+     * @Desc: 配置参数处理 
+     */
+    handleOpt(opt) {
+        // 检查布局配置
+        if (!layoutValueList.includes(opt.layout)) {
+            opt.layout = 'logicalStructure'
+        }
+        // 检查主题配置
+        opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
+        return opt
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 18:47:29 
+     * @Desc: 渲染，部分渲染
+     */
+    render() {
+        this.batchExecution.push('render', () => {
+            this.initTheme()
+            this.renderer.reRender = false
+            this.renderer.render()
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-08 22:05:11 
+     * @Desc: 重新渲染 
+     */
+    reRender() {
+        this.batchExecution.push('render', () => {
+            this.draw.clear()
+            this.initTheme()
+            this.renderer.reRender = true
+            this.renderer.render()
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 21:16:52 
+     * @Desc: 容器尺寸变化，调整尺寸 
+     */
+    resize() {
+        this.elRect = this.el.getBoundingClientRect()
+        this.width = this.elRect.width
+        this.height = this.elRect.height
+        this.svg.size(this.width, this.height)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:25:50 
+     * @Desc: 监听事件 
+     */
+    on(event, fn) {
+        this.event.on(event, fn)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:51:35 
+     * @Desc: 触发事件 
+     */
+    emit(event, ...args) {
+        this.event.emit(event, ...args)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:53:54 
+     * @Desc: 解绑事件 
+     */
+    off(event, fn) {
+        this.event.off(event, fn)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-05 13:32:43 
+     * @Desc: 设置主题
+     */
+    initTheme() {
+        // 合并主题配置
+        this.themeConfig = merge(theme[this.opt.theme], this.opt.themeConfig)
+        // 设置背景样式
+        Style.setBackgroundStyle(this.el, this.themeConfig)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-05 13:52:08 
+     * @Desc: 设置主题 
+     */
+    setTheme(theme) {
+        this.renderer.clearAllActive()
+        this.opt.theme = theme
+        this.reRender()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-25 23:52:37 
+     * @Desc: 获取当前主题 
+     */
+    getTheme() {
+        return this.opt.theme
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-05 13:50:17 
+     * @Desc: 设置主题配置 
+     */
+    setThemeConfig(config) {
+        this.opt.themeConfig = config
+        this.reRender()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-01 10:38:34 
+     * @Desc: 获取自定义主题配置 
+     */
+    getCustomThemeConfig() {
+        return this.opt.themeConfig
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-05 14:01:29 
+     * @Desc: 获取某个主题配置值 
+     */
+    getThemeConfig(prop) {
+        return prop === undefined ? this.themeConfig : this.themeConfig[prop]
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 16:17:06 
+     * @Desc: 获取当前布局结构 
+     */
+    getLayout() {
+        return this.opt.layout
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 16:17:33 
+     * @Desc: 设置布局结构 
+     */
+    setLayout(layout) {
+        // 检查布局配置
+        if (!layoutValueList.includes(layout)) {
+            layout = 'logicalStructure'
+        }
+        this.opt.layout = layout
+        this.renderer.setLayout()
+        this.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:01:00 
+     * @Desc: 执行命令 
+     */
+    execCommand(...args) {
+        this.command.exec(...args)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-03 22:58:12 
+     * @Desc: 动态设置思维导图数据 
+     */
+    setData(data) {
+        this.execCommand('CLEAR_ACTIVE_NODE')
+        this.command.clearHistory()
+        this.renderer.renderTree = data
+        this.reRender()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-01 22:06:38 
+     * @Desc: 导出 
+     */
+    async export(...args) {
+        let result = await this.doExport.export(...args)
+        return result
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 09:20:03 
+     * @Desc: 转换位置 
+     */
+    toPos(x, y) {
+        return {
+            x: x - this.elRect.left,
+            y: y - this.elRect.top
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-06-08 14:12:38 
+     * @Desc: 设置只读模式、编辑模式 
+     */
+    setMode(mode) {
+        if (!['readonly', 'edit'].includes(mode)) {
+            return
+        }
+        this.opt.readonly = mode === 'readonly'
+        if (this.opt.readonly) {
+            // 取消当前激活的元素
+            this.renderer.clearAllActive()
+        }
+        this.emit('mode_change', mode)
+    }
+}
+
+export default MindMap
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "simple-mind-map",
+  "version": "0.1.8",
+  "description": "一个简单的web在线思维导图",
+  "authors": [
+    {
+      "name": "街角小林",
+      "email": "1013335014@qq.com"
+    },
+    {
+      "name": "理想青年实验室",
+      "url": "http://lxqnsys.com/"
+    }
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wanglin2/mind-map"
+  },
+  "scripts": {},
+  "main": "index.js",
+  "type": "module",
+  "dependencies": {
+    "@svgdotjs/svg.js": "^3.0.16",
+    "canvg": "^3.0.7",
+    "deepmerge": "^1.5.2",
+    "eventemitter3": "^4.0.7"
+  },
+  "keywords": [
+    "javascript",
+    "svg",
+    "mind-map",
+    "mindMap",
+    "MindMap"
+  ]
+}
--- a/simple-mind-map/src/BatchExecution.js
+++ b/simple-mind-map/src/BatchExecution.js
@@ -0,0 +1,85 @@
+/** 
+ * @Author: 王林 
+ * @Date: 2021-06-27 13:16:23 
+ * @Desc: 在下一个事件循环里执行任务 
+ */
+const nextTick = function (fn, ctx) {
+    let pending = false
+    let timerFunc = null
+    let handle = () => {
+        pending = false
+        ctx ? fn.call(ctx) : fn()
+    }
+    // 支持MutationObserver接口的话使用MutationObserver
+    if (typeof MutationObserver !== 'undefined') {
+        let counter = 1
+        let observer = new MutationObserver(handle)
+        let textNode = document.createTextNode(counter)
+        observer.observe(textNode, {
+            characterData: true// 设为 true 表示监视指定目标节点或子节点树中节点所包含的字符数据的变化
+        })
+        timerFunc = function () {
+            counter = (counter + 1) % 2// counter会在0和1两者循环变化
+            textNode.data = counter// 节点变化会触发回调handle，
+        }
+    } else {// 否则使用定时器
+        timerFunc = setTimeout
+    }
+    return function (cb, ctx) {
+        if (pending) return
+        pending = true
+        timerFunc(handle, 0)
+    }
+}
+
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-06-26 22:40:52 
+ * @Desc: 批量执行 
+ */
+class BatchExecution {
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-26 22:41:41 
+     * @Desc: 构造函数 
+     */
+    constructor() {
+        this.has = {}
+        this.queue = []
+        this.nextTick = nextTick(this.flush, this)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-27 12:54:04 
+     * @Desc: 添加任务 
+     */
+    push(name, fn) {
+        if (this.has[name]) {
+            return;
+        }
+        this.has[name] = true
+        this.queue.push({
+            name,
+            fn
+        })
+        this.nextTick()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-27 13:09:24 
+     * @Desc:  执行队列
+     */
+    flush() {
+        let fns = this.queue.slice(0)
+        this.queue = []
+        fns.forEach(({ name, fn }) => {
+            this.has[name] = false
+            fn()
+        })
+    }
+}
+
+export default BatchExecution
--- a/simple-mind-map/src/Command.js
+++ b/simple-mind-map/src/Command.js
@@ -0,0 +1,152 @@
+import { copyRenderTree, simpleDeepClone } from './utils';
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-05-04 13:10:06 
+ * @Desc: 命令类 
+ */
+class Command {
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:10:24 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.commands = {}
+        this.history = []
+        this.activeHistoryIndex = 0
+        // 注册快捷键
+        this.registerShortcutKeys()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-03 23:06:55 
+     * @Desc: 清空历史数据 
+     */
+    clearHistory() {
+        this.history = []
+        this.activeHistoryIndex = 0
+        this.mindMap.emit('back_forward', 0, 0)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-02 23:23:19 
+     * @Desc: 注册快捷键 
+     */
+    registerShortcutKeys() {
+        this.mindMap.keyCommand.addShortcut('Control+z', () => {
+            this.mindMap.execCommand('BACK')
+        })
+        this.mindMap.keyCommand.addShortcut('Control+y', () => {
+            this.mindMap.execCommand('FORWARD')
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:12:30 
+     * @Desc: 执行命令 
+     */
+    exec(name, ...args) {
+        if (this.commands[name]) {
+            this.commands[name].forEach((fn) => {
+                fn(...args)
+            })
+            if (name === 'BACK' || name === 'FORWARD') {
+                return;
+            }
+            this.addHistory()
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:13:01 
+     * @Desc: 添加命令 
+     */
+    add(name, fn) {
+        if (this.commands[name]) {
+            this.commands[name].push(fn)
+        } else {
+            this.commands[name] = [fn]
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-15 23:02:41 
+     * @Desc: 移除命令 
+     */
+    remove(name, fn) {
+        if (!this.commands[name]) {
+            return
+        }
+        if (!fn) {
+            this.commands[name] = []
+            delete this.commands[name]
+        } else {
+            let index = this.commands[name].find((item) => {
+                return item === fn;
+            })
+            if (index !== -1) {
+                this.commands[name].splice(index, 1)
+            }
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 14:35:43 
+     * @Desc: 添加回退数据 
+     */
+    addHistory() {
+        let data = this.getCopyData()
+        this.history.push(simpleDeepClone(data))
+        this.activeHistoryIndex = this.history.length - 1
+        this.mindMap.emit('data_change', data)
+        this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 22:34:53 
+     * @Desc: 回退 
+     */
+    back(step = 1) {
+        if (this.activeHistoryIndex - step >= 0) {
+            this.activeHistoryIndex -= step
+            this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
+            return simpleDeepClone(this.history[this.activeHistoryIndex]);
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-12 10:45:31 
+     * @Desc: 前进 
+     */
+    forward(step = 1) {
+        let len = this.history.length
+        if (this.activeHistoryIndex + step <= len - 1) {
+            this.activeHistoryIndex += step
+            this.mindMap.emit('back_forward', this.activeHistoryIndex,)
+            return simpleDeepClone(this.history[this.activeHistoryIndex]);
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 15:02:58 
+     * @Desc: 获取渲染树数据副本 
+     */
+    getCopyData() {
+        return copyRenderTree({}, this.mindMap.renderer.renderTree)
+    }
+}
+
+export default Command
--- a/simple-mind-map/src/Drag.js
+++ b/simple-mind-map/src/Drag.js
@@ -0,0 +1,296 @@
+import {
+    bfsWalk,
+    throttle
+} from './utils'
+import Base from './layouts/Base'
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-11-23 17:38:55 
+ * @Desc: 节点拖动类 
+ */
+class Drag extends Base {
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 22:35:16 
+     * @Desc: 构造函数 
+     */
+    constructor({
+        mindMap
+    }) {
+        super(mindMap.renderer)
+        this.mindMap = mindMap
+        this.reset()
+        this.bindEvent()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-23 19:33:56 
+     * @Desc: 复位 
+     */
+    reset() {
+        // 当前拖拽节点
+        this.node = null
+        // 当前重叠节点
+        this.overlapNode = null
+        // 当前上一个同级节点
+        this.prevNode = null
+        // 当前下一个同级节点
+        this.nextNode = null
+        // 画布的变换数据
+        this.drawTransform = null
+        // 克隆节点
+        this.clone = null
+        // 连接线
+        this.line = null
+        // 同级位置占位符
+        this.placeholder = null
+        // 鼠标按下位置和节点左上角的偏移量
+        this.offsetX = 0
+        this.offsetY = 0
+        // 克隆节点左上角的坐标
+        this.cloneNodeLeft = 0
+        this.cloneNodeTop = 0
+        // 当前鼠标是否按下
+        this.isMousedown = false
+        // 拖拽的鼠标位置变量
+        this.mouseDownX = 0
+        this.mouseDownY = 0
+        this.mouseMoveX = 0
+        this.mouseMoveY = 0
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 22:36:36 
+     * @Desc: 绑定事件 
+     */
+    bindEvent() {
+        this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
+        this.mindMap.on('node_mousedown', (node, e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (e.which !== 1 || node.isRoot) {
+                return
+            }
+            e.preventDefault()
+            // 计算鼠标按下的位置距离节点左上角的距离
+            this.drawTransform = this.mindMap.draw.transform()
+            let {
+                scaleX,
+                scaleY,
+                translateX,
+                translateY
+            } = this.drawTransform
+            this.offsetX = e.clientX - (node.left * scaleX + translateX)
+            this.offsetY = e.clientY - (node.top * scaleY + translateY)
+            // 
+            this.node = node
+            this.isMousedown = true
+            let {
+                x,
+                y
+            } = this.mindMap.toPos(e.clientX, e.clientY)
+            this.mouseDownX = x
+            this.mouseDownY = y
+        })
+        this.mindMap.on('mousemove', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (!this.isMousedown) {
+                return
+            }
+            e.preventDefault()
+            let {
+                x,
+                y
+            } = this.mindMap.toPos(e.clientX, e.clientY)
+            this.mouseMoveX = x
+            this.mouseMoveY = y
+            if ((Math.abs(x - this.mouseDownX) <= 10 && Math.abs(y - this.mouseDownY) <= 10) && !this.node.isDrag) {
+                return
+            }
+            this.mindMap.renderer.clearAllActive()
+            this.onMove(x, y)
+        })
+        this.onMouseup = this.onMouseup.bind(this)
+        this.mindMap.on('node_mouseup', this.onMouseup)
+        this.mindMap.on('mouseup', this.onMouseup)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-23 19:38:02 
+     * @Desc: 鼠标松开事件 
+     */
+    onMouseup() {
+        if (!this.isMousedown) {
+            return;
+        }
+        this.isMousedown = false
+        this.node.isDrag = false
+        this.node.show()
+        this.removeCloneNode()
+        // 存在重叠子节点，则移动作为其子节点
+        if (this.overlapNode) {
+            this.mindMap.renderer.setNodeActive(this.overlapNode, false)
+            this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode)
+        } else if (this.prevNode) { // 存在前一个相邻节点，作为其下一个兄弟节点
+            this.mindMap.renderer.setNodeActive(this.prevNode, false)
+            this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode)
+        } else if (this.nextNode) { // 存在下一个相邻节点，作为其前一个兄弟节点
+            this.mindMap.renderer.setNodeActive(this.nextNode, false)
+            this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
+        }
+        this.reset()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-23 19:34:53 
+     * @Desc: 创建克隆节点 
+     */
+    createCloneNode() {
+        if (!this.clone) {
+            // 节点
+            this.clone = this.node.group.clone()
+            this.clone.opacity(0.5)
+            this.clone.css('z-index', 99999)
+            this.node.isDrag = true
+            this.node.hide()
+            // 连接线
+            this.line = this.draw.path()
+            this.line.opacity(0.5)
+            this.node.style.line(this.line)
+            // 同级位置占位符
+            this.placeholder = this.draw.rect().fill({
+                color: this.node.style.merge('lineColor', true)
+            })
+            this.mindMap.draw.add(this.clone)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-23 19:35:16 
+     * @Desc: 移除克隆节点 
+     */
+    removeCloneNode() {
+        if (!this.clone) {
+            return
+        }
+        this.clone.remove()
+        this.line.remove()
+        this.placeholder.remove()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-23 18:53:47 
+     * @Desc: 拖动中 
+     */
+    onMove(x, y) {
+        if (!this.isMousedown) {
+            return;
+        }
+        this.createCloneNode()
+        let {
+            scaleX,
+            scaleY,
+            translateX,
+            translateY
+        } = this.drawTransform
+        this.cloneNodeLeft = x - this.offsetX
+        this.cloneNodeTop = y - this.offsetY
+        x = (this.cloneNodeLeft - translateX) / scaleX
+        y = (this.cloneNodeTop - translateY) / scaleY
+        let t = this.clone.transform()
+        this.clone.translate(x - t.translateX, y - t.translateY)
+        // 连接线
+        let parent = this.node.parent
+        this.line.plot(this.quadraticCurvePath(parent.left + parent.width / 2, parent.top + parent.height / 2, x + this.node.width / 2, y + this.node.height / 2))
+        this.checkOverlapNode()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 10:20:43 
+     * @Desc: 检测重叠节点 
+     */
+    checkOverlapNode() {
+        if (!this.drawTransform) {
+            return
+        }
+        let {
+            scaleX,
+            scaleY,
+            translateX,
+            translateY
+        } = this.drawTransform
+        let checkRight = this.cloneNodeLeft + this.node.width * scaleX
+        let checkBottom = this.cloneNodeTop + this.node.height * scaleX
+        this.overlapNode = null
+        this.prevNode = null
+        this.nextNode = null
+        this.placeholder.size(0, 0)
+        bfsWalk(this.mindMap.renderer.root, (node) => {
+            if (node.nodeData.data.isActive) {
+                this.mindMap.renderer.setNodeActive(node, false)
+            }
+            if (node === this.node || this.node.isParent(node)) {
+                return
+            }
+            if (this.overlapNode || this.prevNode && this.nextNode) {
+                return
+            }
+            let {
+                left,
+                top,
+                width,
+                height
+            } = node
+            let _left = left
+            let _top = top
+            let _bottom = top + height
+            let right = (left + width) * scaleX + translateX
+            let bottom = (top + height) * scaleY + translateY
+            left = left * scaleX + translateX
+            top = top * scaleY + translateY
+            // 检测是否重叠
+            if (!this.overlapNode) {
+                if (
+                    left <= checkRight && right >= this.cloneNodeLeft &&
+                    top <= checkBottom && bottom >= this.cloneNodeTop
+                ) {
+                    this.overlapNode = node
+                }
+            }
+            // 检测兄弟节点位置
+            if (!this.prevNode && !this.nextNode && this.node.isBrother(node)) {
+                if (left <= checkRight && right >= this.cloneNodeLeft) {
+                    if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
+                        this.prevNode = node
+                        this.placeholder.size(node.width, 10).move(_left, _bottom)
+                    } else if (checkBottom < top && checkBottom >= top - 10) {
+                        this.nextNode = node
+                        this.placeholder.size(node.width, 10).move(_left, _top - 10)
+                    }
+                }
+            }
+        })
+        if (this.overlapNode) {
+            this.mindMap.renderer.setNodeActive(this.overlapNode, true)
+        }
+    }
+}
+
+export default Drag
--- a/src/package/mind-map/src/Event.js
+++ b/src/package/mind-map/src/Event.js
@@ -1,149 +1,182 @@
-import EventEmitter from 'eventemitter3'
-
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-07 14:53:09 
- * @Desc: 事件类 
- */
-class Event extends EventEmitter {
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 14:53:25 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        super()
-        this.opt = opt
-        this.mindMap = opt.mindMap
-        this.isMousedown = false
-        this.mousedownPos = {
-            x: 0,
-            y: 0
-        }
-        this.mousemovePos = {
-            x: 0,
-            y: 0
-        }
-        this.mousemoveOffset = {
-            x: 0,
-            y: 0
-        }
-        this.bindFn()
-        this.bind()
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:52:24 
-     * @Desc: 绑定函数上下文 
-     */
-    bindFn() {
-        this.onDrawClick = this.onDrawClick.bind(this)
-        this.onMousedown = this.onMousedown.bind(this)
-        this.onMousemove = this.onMousemove.bind(this)
-        this.onMouseup = this.onMouseup.bind(this)
-        this.onMousewheel = this.onMousewheel.bind(this)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 14:53:43 
-     * @Desc: 绑定事件 
-     */
-    bind() {
-        this.mindMap.draw.on('click', this.onDrawClick)
-        this.mindMap.el.addEventListener('mousedown', this.onMousedown)
-        window.addEventListener('mousemove', this.onMousemove)
-        window.addEventListener('mouseup', this.onMouseup)
-        this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:40:51 
-     * @Desc: 解绑事件 
-     */
-    unbind() {
-        this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
-        window.removeEventListener('mousemove', this.onMousemove)
-        window.removeEventListener('mouseup', this.onMouseup)
-        this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 13:19:39 
-     * @Desc:  画布的单击事件
-     */
-    onDrawClick(e) {
-        this.emit('draw_click', e)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:17:35 
-     * @Desc: 鼠标按下事件 
-     */
-    onMousedown(e) {
-        e.preventDefault()
-        this.isMousedown = true
-        this.mousedownPos.x = e.clientX
-        this.mousedownPos.y = e.clientY
-        this.emit('mousedown', e, this)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:18:32 
-     * @Desc: 鼠标移动事件 
-     */
-    onMousemove(e) {
-        e.preventDefault()
-        this.mousemovePos.x = e.clientX
-        this.mousemovePos.y = e.clientY
-        this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
-        this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
-        this.emit('mousemove', e, this)
-        if (this.isMousedown) {
-            this.emit('drag', e, this)
-        }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:18:57 
-     * @Desc: 鼠标松开事件 
-     */
-    onMouseup(e) {
-        this.isMousedown = false
-        this.emit('mouseup', e, this)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 15:46:27 
-     * @Desc: 鼠标滚动 
-     */
-    onMousewheel(e) {
-        e.stopPropagation()
-        e.preventDefault()
-        let dir
-        if (e.wheelDeltaY > 0) {
-            dir = 'up'
-        } else {
-            dir = 'down'
-        }
-        this.emit('mousewheel', e, dir, this)
-    }
-}
-
+import EventEmitter from 'eventemitter3'
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-07 14:53:09 
+ * @Desc: 事件类 
+ */
+class Event extends EventEmitter {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:53:25 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        super()
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.isLeftMousedown = false
+        this.mousedownPos = {
+            x: 0,
+            y: 0
+        }
+        this.mousemovePos = {
+            x: 0,
+            y: 0
+        }
+        this.mousemoveOffset = {
+            x: 0,
+            y: 0
+        }
+        this.bindFn()
+        this.bind()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:52:24 
+     * @Desc: 绑定函数上下文 
+     */
+    bindFn() {
+        this.onDrawClick = this.onDrawClick.bind(this)
+        this.onMousedown = this.onMousedown.bind(this)
+        this.onMousemove = this.onMousemove.bind(this)
+        this.onMouseup = this.onMouseup.bind(this)
+        this.onMousewheel = this.onMousewheel.bind(this)
+        this.onContextmenu = this.onContextmenu.bind(this)
+        this.onSvgMousedown = this.onSvgMousedown.bind(this)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:53:43 
+     * @Desc: 绑定事件 
+     */
+    bind() {
+        this.mindMap.svg.on('click', this.onDrawClick)
+        this.mindMap.el.addEventListener('mousedown', this.onMousedown)
+        this.mindMap.svg.on('mousedown', this.onSvgMousedown)
+        window.addEventListener('mousemove', this.onMousemove)
+        window.addEventListener('mouseup', this.onMouseup)
+        // 兼容火狐浏览器
+        if(window.navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
+            this.mindMap.el.addEventListener('DOMMouseScroll', this.onMousewheel)
+        } else {
+            this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
+        }
+        this.mindMap.svg.on('contextmenu', this.onContextmenu)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:40:51 
+     * @Desc: 解绑事件 
+     */
+    unbind() {
+        this.mindMap.svg.off('click', this.onDrawClick)
+        this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
+        window.removeEventListener('mousemove', this.onMousemove)
+        window.removeEventListener('mouseup', this.onMouseup)
+        this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
+        this.mindMap.svg.off('contextmenu', this.onContextmenu)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:19:39 
+     * @Desc:  画布的单击事件
+     */
+    onDrawClick(e) {
+        this.emit('draw_click', e)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-16 13:37:30 
+     * @Desc:  svg画布的鼠标按下事件
+     */
+    onSvgMousedown(e) {
+        this.emit('svg_mousedown', e)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:17:35 
+     * @Desc: 鼠标按下事件 
+     */
+    onMousedown(e) {
+        // e.preventDefault()
+        // 鼠标左键
+        if (e.which === 1) {
+            this.isLeftMousedown = true
+        }
+        this.mousedownPos.x = e.clientX
+        this.mousedownPos.y = e.clientY
+        this.emit('mousedown', e, this)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:18:32 
+     * @Desc: 鼠标移动事件 
+     */
+    onMousemove(e) {
+        // e.preventDefault()
+        this.mousemovePos.x = e.clientX
+        this.mousemovePos.y = e.clientY
+        this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
+        this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
+        this.emit('mousemove', e, this)
+        if (this.isLeftMousedown) {
+            this.emit('drag', e, this)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:18:57 
+     * @Desc: 鼠标松开事件 
+     */
+    onMouseup(e) {
+        this.isLeftMousedown = false
+        this.emit('mouseup', e, this)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:46:27 
+     * @Desc: 鼠标滚动 
+     */
+    onMousewheel(e) {
+        e.stopPropagation()
+        e.preventDefault()
+        let dir
+        if ((e.wheelDeltaY || e.detail) > 0) {
+            dir = 'up'
+        } else {
+            dir = 'down'
+        }
+        this.emit('mousewheel', e, dir, this)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 22:34:13 
+     * @Desc: 鼠标右键菜单事件 
+     */
+    onContextmenu(e) {
+        e.preventDefault()
+        this.emit('contextmenu', e)
+    }
+}
+
 export default Event
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -0,0 +1,226 @@
+import { imgToDataUrl, downloadFile } from './utils'
+const URL = window.URL || window.webkitURL || window
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-07-01 22:05:16 
+ * @Desc: 导出类 
+ */
+class Export {
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-01 22:05:42 
+     * @Desc: 构造函数 
+     */
+    constructor(opt) {
+        this.mindMap = opt.mindMap
+        this.exportPadding = this.mindMap.opt.exportPadding
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-02 07:44:06 
+     * @Desc: 导出 
+     */
+    async export(type, isDownload = true, name = '思维导图') {
+        if (this[type]) {
+            let result = await this[type]()
+            if (isDownload) {
+                downloadFile(result, name + '.' + type)
+            }
+            return result
+        } else {
+            return null
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 14:57:40 
+     * @Desc: 获取svg数据 
+     */
+    async getSvgData() {
+        const svg = this.mindMap.svg
+        const draw = this.mindMap.draw
+        // 保存原始信息
+        const origWidth = svg.width()
+        const origHeight = svg.height()
+        const origTransform = draw.transform()
+        const elRect = this.mindMap.el.getBoundingClientRect()
+        // 去除放大缩小的变换效果
+        draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
+        // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
+        const rect = draw.rbox()
+        // 将svg设置为实际内容的宽高
+        svg.size(rect.width, rect.height)
+        // 把实际内容变换
+        draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
+        // 克隆一份数据
+        const clone = svg.clone()
+        // 恢复原先的大小和变换信息
+        svg.size(origWidth, origHeight)
+        draw.transform(origTransform)
+        // 把图片的url转换成data:url类型，否则导出会丢失图片
+        let imageList = clone.find('image')
+        let task = imageList.map(async (item) => {
+            let imgUlr = item.attr('href') || item.attr('xlink:href')
+            let imgData = await imgToDataUrl(imgUlr)
+            item.attr('href', imgData)
+        })
+        await Promise.all(task)
+        return {
+            node: clone,
+            str: clone.svg()
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 15:25:19 
+     * @Desc:  svg转png
+     */
+    svgToPng(svgSrc) {
+        return new Promise((resolve, reject) => {
+            const img = new Image()
+            // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
+            img.setAttribute('crossOrigin', 'anonymous')
+            img.onload = async () => {
+                try {
+                    let canvas = document.createElement('canvas')
+                    canvas.width = img.width + this.exportPadding * 2
+                    canvas.height = img.height + this.exportPadding * 2
+                    let ctx = canvas.getContext('2d')
+                    // 绘制背景
+                    await this.drawBackgroundToCanvas(ctx, canvas.width, canvas.height)
+                    // 图片绘制到canvas里
+                    ctx.drawImage(img, 0, 0, img.width, img.height, this.exportPadding, this.exportPadding, img.width, img.height)
+                    resolve(canvas.toDataURL())
+                } catch (error) {
+                    reject(error)
+                }
+            }
+            img.onerror = (e) => {
+                reject(e)
+            }
+            img.src = svgSrc
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 15:32:07 
+     * @Desc: 在canvas上绘制思维导图背景
+     */
+    drawBackgroundToCanvas(ctx, width, height) {
+        return new Promise((resolve, rejct) => {
+            let { backgroundColor = '#fff', backgroundImage, backgroundRepeat = "repeat" } = this.mindMap.themeConfig
+            // 背景颜色
+            ctx.save()
+            ctx.rect(0, 0, width, height)
+            ctx.fillStyle = backgroundColor
+            ctx.fill()
+            ctx.restore()
+            // 背景图片
+            if (backgroundImage && backgroundImage !== 'none') {
+                ctx.save()
+                let img = new Image()
+                img.src = backgroundImage
+                img.onload = () => {
+                    let pat = ctx.createPattern(img, backgroundRepeat)
+                    ctx.rect(0, 0, width, height)
+                    ctx.fillStyle = pat
+                    ctx.fill()
+                    ctx.restore()
+                    resolve()
+                }
+                img.onerror = (e) => {
+                    rejct(e)
+                }
+            } else {
+                resolve()
+            }
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-01 22:09:51 
+     * @Desc: 导出为png 
+     * 方法1.把svg的图片都转化成data:url格式，再转换
+     * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
+     */
+    async png() {
+        let { str } = await this.getSvgData()
+        // 转换成blob数据
+        let blob = new Blob([str], {
+            type: 'image/svg+xml'
+        })
+        // 转换成data:url数据
+        let svgUrl = URL.createObjectURL(blob)
+        // 绘制到canvas上
+        let imgDataUrl = await this.svgToPng(svgUrl)
+        URL.revokeObjectURL(svgUrl)
+        return imgDataUrl
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 15:32:07 
+     * @Desc: 在svg上绘制思维导图背景
+     */
+    drawBackgroundToSvg(svg) {
+        return new Promise(async (resolve, rejct) => {
+            let { backgroundColor = '#fff', backgroundImage, backgroundRepeat = "repeat" } = this.mindMap.themeConfig
+            // 背景颜色
+            svg.css('background-color', backgroundColor)
+            // 背景图片
+            if (backgroundImage && backgroundImage !== 'none') {
+                let imgDataUrl = await imgToDataUrl(backgroundImage)
+                svg.css('background-image', `url(${imgDataUrl})`)
+                svg.css('background-repeat', backgroundRepeat)
+                resolve()
+            } else {
+                resolve()
+            }
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 14:54:07 
+     * @Desc: 导出为svg 
+     */
+    async svg() {
+        let { node } = await this.getSvgData()
+        await this.drawBackgroundToSvg(node)
+        let str = node.svg()
+        // 转换成blob数据
+        let blob = new Blob([str], {
+            type: 'image/svg+xml'
+        })
+        return URL.createObjectURL(blob)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-03 22:19:17 
+     * @Desc: 导出为json 
+     */
+    json () {
+        let data = this.mindMap.command.getCopyData()
+        let str = JSON.stringify(data)
+        let blob = new Blob([str])
+        return URL.createObjectURL(blob)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-03 22:24:24 
+     * @Desc: 专有文件，其实就是json文件 
+     */
+    smm () {
+        return this.json();
+    }
+}
+
+export default Export
--- a/src/package/mind-map/src/KeyCommand.js
+++ b/src/package/mind-map/src/KeyCommand.js
@@ -78,7 +78,9 @@ export default class KeyCommand {
        if (e.shiftKey) {
            arr.push(keyMap['Shift'])
        }
-        arr.push(e.keyCode)
+        if (!arr.includes(e.keyCode)) {
+            arr.push(e.keyCode)
+        }
        return arr
    }

@@ -113,4 +115,28 @@ export default class KeyCommand {
            }
        })
    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-27 14:06:16 
+     * @Desc: 移除快捷键命令 
+     */
+    removeShortcut(key, fn) {
+        key.split(/\s*\|\s*/).forEach((item) => {
+            if (this.shortcutMap[item]) {
+                if (fn) {
+                    let index = this.shortcutMap[item].findIndex((f) => {
+                        return f === fn
+                    })
+                    if (index !== -1) {
+                        this.shortcutMap[item].splice(index, 1)
+                    }
+                } else {
+                    this.shortcutMap[item] = []
+                    delete this.shortcutMap[item]
+                }
+            }
+        })
+    }
 }
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -0,0 +1,884 @@
+import merge from 'deepmerge'
+import LogicalStructure from './layouts/LogicalStructure'
+import MindMap from './layouts/MindMap'
+import CatalogOrganization from './layouts/CatalogOrganization'
+import OrganizationStructure from './layouts/OrganizationStructure'
+import TextEdit from './TextEdit'
+import { copyNodeTree, simpleDeepClone, walk } from './utils'
+
+// 布局列表
+const layouts = {
+    // 逻辑结构图
+    logicalStructure: LogicalStructure,
+    // 思维导图
+    mindMap: MindMap,
+    // 目录组织图
+    catalogOrganization: CatalogOrganization,
+    // 组织结构图
+    organizationStructure: OrganizationStructure
+}
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-08 16:25:07 
+ * @Desc: 渲染
+ */
+class Render {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:25:32 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        this.opt = opt
+        this.mindMap = opt.mindMap
+        this.themeConfig = this.mindMap.themeConfig
+        this.draw = this.mindMap.draw
+        // 渲染树，操作过程中修改的都是这里的数据
+        this.renderTree = merge({}, this.mindMap.opt.data || {})
+        // 是否重新渲染
+        this.reRender = false
+        // 当前激活的节点列表
+        this.activeNodeList = []
+        // 根节点
+        this.root = null
+        // 文本编辑框，需要再bindEvent之前实例化，否则单击事件只能触发隐藏文本编辑框，而无法保存文本修改
+        this.textEdit = new TextEdit(this)
+        // 布局
+        this.setLayout()
+        // 绑定事件
+        this.bindEvent()
+        // 注册命令
+        this.registerCommands()
+        // 注册快捷键
+        this.registerShortcutKeys()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 16:20:07 
+     * @Desc: 设置布局结构 
+     */
+    setLayout() {
+        this.layout = new (layouts[this.mindMap.opt.layout] ? layouts[this.mindMap.opt.layout] : layouts.logicalStructure)(this)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-20 10:34:06 
+     * @Desc:  绑定事件
+     */
+    bindEvent() {
+        // 点击事件
+        this.mindMap.on('draw_click', () => {
+            // 清除激活状态
+            if (this.activeNodeList.length > 0) {
+                this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+            }
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:19:06 
+     * @Desc: 注册命令 
+     */
+    registerCommands() {
+        // 全选
+        this.selectAll = this.selectAll.bind(this)
+        this.mindMap.command.add('SELECT_ALL', this.selectAll)
+        // 回退
+        this.back = this.back.bind(this)
+        this.mindMap.command.add('BACK', this.back)
+        // 前进
+        this.forward = this.forward.bind(this)
+        this.mindMap.command.add('FORWARD', this.forward)
+        // 插入同级节点
+        this.insertNode = this.insertNode.bind(this)
+        this.mindMap.command.add('INSERT_NODE', this.insertNode)
+        // 插入子节点
+        this.insertChildNode = this.insertChildNode.bind(this)
+        this.mindMap.command.add('INSERT_CHILD_NODE', this.insertChildNode)
+        // 上移节点
+        this.upNode = this.upNode.bind(this)
+        this.mindMap.command.add('UP_NODE', this.upNode)
+        // 下移节点
+        this.downNode = this.downNode.bind(this)
+        this.mindMap.command.add('DOWN_NODE', this.downNode)
+        // 移动节点
+        this.insertAfter = this.insertAfter.bind(this)
+        this.mindMap.command.add('INSERT_AFTER', this.insertAfter)
+        this.insertBefore = this.insertBefore.bind(this)
+        this.mindMap.command.add('INSERT_BEFORE', this.insertBefore)
+        this.moveNodeTo = this.moveNodeTo.bind(this)
+        this.mindMap.command.add('MOVE_NODE_TO', this.moveNodeTo)
+        // 删除节点
+        this.removeNode = this.removeNode.bind(this)
+        this.mindMap.command.add('REMOVE_NODE', this.removeNode)
+        // 粘贴节点
+        this.pasteNode = this.pasteNode.bind(this)
+        this.mindMap.command.add('PASTE_NODE', this.pasteNode)
+        // 剪切节点
+        this.cutNode = this.cutNode.bind(this)
+        this.mindMap.command.add('CUT_NODE', this.cutNode)
+        // 修改节点样式
+        this.setNodeStyle = this.setNodeStyle.bind(this)
+        this.mindMap.command.add('SET_NODE_STYLE', this.setNodeStyle)
+        // 切换节点是否激活
+        this.setNodeActive = this.setNodeActive.bind(this)
+        this.mindMap.command.add('SET_NODE_ACTIVE', this.setNodeActive)
+        // 清除所有激活节点
+        this.clearAllActive = this.clearAllActive.bind(this)
+        this.mindMap.command.add('CLEAR_ACTIVE_NODE', this.clearAllActive)
+        // 切换节点是否展开
+        this.setNodeExpand = this.setNodeExpand.bind(this)
+        this.mindMap.command.add('SET_NODE_EXPAND', this.setNodeExpand)
+        // 展开所有节点
+        this.expandAllNode = this.expandAllNode.bind(this)
+        this.mindMap.command.add('EXPAND_ALL', this.expandAllNode)
+        // 收起所有节点
+        this.unexpandAllNode = this.unexpandAllNode.bind(this)
+        this.mindMap.command.add('UNEXPAND_ALL', this.unexpandAllNode)
+        // 设置节点数据
+        this.setNodeData = this.setNodeData.bind(this)
+        this.mindMap.command.add('SET_NODE_DATA', this.setNodeData)
+        // 设置节点文本
+        this.setNodeText = this.setNodeText.bind(this)
+        this.mindMap.command.add('SET_NODE_TEXT', this.setNodeText)
+        // 设置节点图片
+        this.setNodeImage = this.setNodeImage.bind(this)
+        this.mindMap.command.add('SET_NODE_IMAGE', this.setNodeImage)
+        // 设置节点图标
+        this.setNodeIcon = this.setNodeIcon.bind(this)
+        this.mindMap.command.add('SET_NODE_ICON', this.setNodeIcon)
+        // 设置节点超链接
+        this.setNodeHyperlink = this.setNodeHyperlink.bind(this)
+        this.mindMap.command.add('SET_NODE_HYPERLINK', this.setNodeHyperlink)
+        // 设置节点备注
+        this.setNodeNote = this.setNodeNote.bind(this)
+        this.mindMap.command.add('SET_NODE_NOTE', this.setNodeNote)
+        // 设置节点标签
+        this.setNodeTag = this.setNodeTag.bind(this)
+        this.mindMap.command.add('SET_NODE_TAG', this.setNodeTag)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 16:55:44 
+     * @Desc: 注册快捷键 
+     */
+    registerShortcutKeys() {
+        // 插入下级节点
+        this.mindMap.keyCommand.addShortcut('Tab', () => {
+            this.mindMap.execCommand('INSERT_CHILD_NODE')
+        })
+        // 插入同级节点
+        this.insertNodeWrap = () => {
+            if (this.textEdit.showTextEdit) {
+                return
+            }
+            this.mindMap.execCommand('INSERT_NODE')
+        }
+        this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
+        // 展开/收起节点
+        this.mindMap.keyCommand.addShortcut('/', () => {
+            this.activeNodeList.forEach((node) => {
+                if (node.nodeData.children.length <= 0) {
+                    return
+                }
+                this.toggleNodeExpand(node)
+            })
+        })
+        // 删除节点
+        this.removeNodeWrap = () => {
+            this.mindMap.execCommand('REMOVE_NODE')
+        }
+        this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
+        // 节点编辑时某些快捷键会存在冲突，需要暂时去除
+        this.mindMap.on('before_show_text_edit', () => {
+            this.startTextEdit()
+        })
+        this.mindMap.on('hide_text_edit', () => {
+            this.endTextEdit()
+        })
+        // 全选
+        this.mindMap.keyCommand.addShortcut('Control+a', () => {
+            this.mindMap.execCommand('SELECT_ALL')
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-05-09 10:43:52 
+     * @Desc: 开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突 
+     */
+    startTextEdit() {
+        this.mindMap.keyCommand.removeShortcut('Del|Backspace')
+        this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-05-09 10:45:11 
+     * @Desc: 结束文字编辑，会恢复回车键和删除键相关快捷键
+     */
+    endTextEdit() {
+        this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
+        this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 16:27:55 
+     * @Desc:  渲染
+     */
+    render() {
+        if (this.reRender) {
+            this.clearActive()
+        }
+        this.layout.doLayout((root) => {
+            this.root = root
+            this.root.render()
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:45:01 
+     * @Desc: 清除当前激活的节点 
+     */
+    clearActive() {
+        this.activeNodeList.forEach((item) => {
+            this.setNodeActive(item, false)
+        })
+        this.activeNodeList = []
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-03 23:14:34 
+     * @Desc: 清除当前所有激活节点，并会触发事件 
+     */
+    clearAllActive() {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        this.clearActive()
+        this.mindMap.emit('node_active', null, [])
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 10:54:00 
+     * @Desc:  添加节点到激活列表里
+     */
+    addActiveNode(node) {
+        let index = this.findActiveNodeIndex(node)
+        if (index === -1) {
+            this.activeNodeList.push(node)
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 10:04:04 
+     * @Desc: 在激活列表里移除某个节点 
+     */
+    removeActiveNode(node) {
+        let index = this.findActiveNodeIndex(node)
+        if (index === -1) {
+            return
+        }
+        this.activeNodeList.splice(index, 1)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 10:55:23 
+     * @Desc: 检索某个节点在激活列表里的索引 
+     */
+    findActiveNodeIndex(node) {
+        return this.activeNodeList.findIndex((item) => {
+            return item === node
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:46:08 
+     * @Desc: 获取节点在同级里的索引位置 
+     */
+    getNodeIndex(node) {
+        return node.parent ? node.parent.children.findIndex((item) => {
+            return item === node
+        }) : 0
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-04 23:54:52 
+     * @Desc: 全选 
+     */
+    selectAll() {
+        walk(this.root, null, (node) => {
+            if (!node.nodeData.data.isActive) {
+                node.nodeData.data.isActive = true
+                this.addActiveNode(node)
+                setTimeout(() => {
+                    node.renderNode()
+                }, 0);
+            }
+        }, null, true, 0, 0)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 22:34:12 
+     * @Desc: 回退 
+     */
+    back(step) {
+        this.clearAllActive()
+        let data = this.mindMap.command.back(step)
+        if (data) {
+            this.renderTree = data
+            this.mindMap.reRender()
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-12 10:44:51 
+     * @Desc: 前进 
+     */
+    forward(step) {
+        this.clearAllActive()
+        let data = this.mindMap.command.forward(step)
+        if (data) {
+            this.renderTree = data
+            this.mindMap.reRender()
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:19:54 
+     * @Desc: 插入同级节点，多个节点只会操作第一个节点
+     */
+    insertNode() {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        let first = this.activeNodeList[0]
+        if (first.isRoot) {
+            this.insertChildNode()
+        } else {
+            if (first.layerIndex === 1) {
+                first.parent.initRender = true
+            }
+            let index = this.getNodeIndex(first)
+            first.parent.nodeData.children.splice(index + 1, 0, {
+                "data": {
+                    "text": "分支主题",
+                    "expand": true
+                },
+                "children": []
+            })
+            this.mindMap.render()
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:31:02 
+     * @Desc: 插入子节点 
+     */
+    insertChildNode() {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        this.activeNodeList.forEach((node, index) => {
+            if (!node.nodeData.children) {
+                node.nodeData.children = []
+            }
+            node.nodeData.children.push({
+                "data": {
+                    "text": "分支主题",
+                    "expand": true
+                },
+                "children": []
+            })
+            if (node.isRoot) {
+                node.initRender = true
+                // this.mindMap.batchExecution.push('renderNode' + index, () => {
+                //     node.renderNode()
+                // })
+            }
+        })
+        this.mindMap.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-14 23:34:14 
+     * @Desc: 上移节点，多个节点只会操作第一个节点
+     */
+    upNode() {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        let node = this.activeNodeList[0]
+        if (node.isRoot) {
+            return
+        }
+        let parent = node.parent
+        let childList = parent.children
+        let index = childList.findIndex((item) => {
+            return item === node
+        })
+        if (index === -1 || index === 0) {
+            return
+        }
+        let insertIndex = index - 1
+        // 节点实例
+        childList.splice(index, 1)
+        childList.splice(insertIndex, 0, node)
+        // 节点数据
+        parent.nodeData.children.splice(index, 1)
+        parent.nodeData.children.splice(insertIndex, 0, node.nodeData)
+        this.mindMap.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-14 23:34:18 
+     * @Desc: 下移节点，多个节点只会操作第一个节点 
+     */
+    downNode() {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        let node = this.activeNodeList[0]
+        if (node.isRoot) {
+            return
+        }
+        let parent = node.parent
+        let childList = parent.children
+        let index = childList.findIndex((item) => {
+            return item === node
+        })
+        if (index === -1 || index === childList.length - 1) {
+            return
+        }
+        let insertIndex = index + 1
+        // 节点实例
+        childList.splice(index, 1)
+        childList.splice(insertIndex, 0, node)
+        // 节点数据
+        parent.nodeData.children.splice(index, 1)
+        parent.nodeData.children.splice(insertIndex, 0, node.nodeData)
+        this.mindMap.render()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-25 10:51:34 
+     * @Desc: 将节点移动到另一个节点的前面
+     */
+    insertBefore(node, exist) {
+        if (node.isRoot) {
+            return
+        }
+        let parent = node.parent
+        let childList = parent.children
+        // 要移动节点的索引
+        let index = childList.findIndex((item) => {
+            return item === node
+        })
+        if (index === -1) {
+            return
+        }
+        // 目标节点的索引
+        let existIndex = childList.findIndex((item) => {
+            return item === exist
+        })
+        if (existIndex === -1) {
+            return
+        }
+        // 当前节点在目标节点前面
+        if (index < existIndex) {
+            existIndex = existIndex - 1
+        } else {
+            existIndex = existIndex
+        }
+        // 节点实例
+        childList.splice(index, 1)
+        childList.splice(existIndex, 0, node)
+        // 节点数据
+        parent.nodeData.children.splice(index, 1)
+        parent.nodeData.children.splice(existIndex, 0, node.nodeData)
+        this.mindMap.render()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-25 10:51:34 
+     * @Desc: 将节点移动到另一个节点的后面
+     */
+    insertAfter(node, exist) {
+        if (node.isRoot) {
+            return
+        }
+        let parent = node.parent
+        let childList = parent.children
+        // 要移动节点的索引
+        let index = childList.findIndex((item) => {
+            return item === node
+        })
+        if (index === -1) {
+            return
+        }
+        // 目标节点的索引
+        let existIndex = childList.findIndex((item) => {
+            return item === exist
+        })
+        if (existIndex === -1) {
+            return
+        }
+        // 当前节点在目标节点前面
+        if (index < existIndex) {
+            existIndex = existIndex
+        } else {
+            existIndex = existIndex + 1
+        }
+        // 节点实例
+        childList.splice(index, 1)
+        childList.splice(existIndex, 0, node)
+        // 节点数据
+        parent.nodeData.children.splice(index, 1)
+        parent.nodeData.children.splice(existIndex, 0, node.nodeData)
+        this.mindMap.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 13:40:39 
+     * @Desc: 移除节点 
+     */
+    removeNode() {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        for (let i = 0; i < this.activeNodeList.length; i++) {
+            let node = this.activeNodeList[i]
+            if (node.isRoot) {
+                node.children.forEach((child) => {
+                    child.remove()
+                })
+                node.children = []
+                node.nodeData.children = []
+                break
+            } else {
+                this.removeActiveNode(node)
+                this.removeOneNode(node)
+                i--
+            }
+        }
+        this.mindMap.emit('node_active', null, [])
+        this.mindMap.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-15 22:46:27 
+     * @Desc: 移除某个指定节点 
+     */
+    removeOneNode(node) {
+        let index = this.getNodeIndex(node)
+        node.remove()
+        node.parent.children.splice(index, 1)
+        node.parent.nodeData.children.splice(index, 1)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-15 09:53:23 
+     * @Desc: 复制节点，多个节点只会操作第一个节点 
+     */
+    copyNode() {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        return copyNodeTree({}, this.activeNodeList[0])
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-15 22:36:45 
+     * @Desc: 剪切节点，多个节点只会操作第一个节点
+     */
+    cutNode(callback) {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        let node = this.activeNodeList[0]
+        if (node.isRoot) {
+            return null
+        }
+        let copyData = copyNodeTree({}, node)
+        this.removeActiveNode(node)
+        this.removeOneNode(node)
+        this.mindMap.emit('node_active', null, this.activeNodeList)
+        this.mindMap.render()
+        if (callback && typeof callback === 'function') {
+            callback(copyData)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-24 16:54:01 
+     * @Desc: 移动一个节点作为另一个节点的子节点 
+     */
+    moveNodeTo(node, toNode) {
+        if (node.isRoot) {
+            return
+        }
+        let copyData = copyNodeTree({}, node)
+        this.removeActiveNode(node)
+        this.removeOneNode(node)
+        this.mindMap.emit('node_active', null, this.activeNodeList)
+        toNode.nodeData.children.push(copyData)
+        this.mindMap.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-15 20:09:39 
+     * @Desc:  粘贴节点到节点
+     */
+    pasteNode(data) {
+        if (this.activeNodeList.length <= 0) {
+            return
+        }
+        this.activeNodeList.forEach((item) => {
+            item.nodeData.children.push(simpleDeepClone(data))
+        })
+        this.mindMap.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-08 21:54:30 
+     * @Desc: 设置节点样式 
+     */
+    setNodeStyle(node, prop, value, isActive) {
+        let data = {}
+        if (isActive) {
+            data = {
+                activeStyle: {
+                    ...(node.nodeData.data.activeStyle || {}),
+                    [prop]: value
+                }
+            }
+        } else {
+            data = {
+                [prop]: value
+            }
+        }
+        this.setNodeDataRender(node, data)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-08 22:13:03 
+     * @Desc: 设置节点是否激活 
+     */
+    setNodeActive(node, active) {
+        this.setNodeData(node, {
+            isActive: active
+        })
+        node.renderNode()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 16:52:41 
+     * @Desc: 设置节点是否展开 
+     */
+    setNodeExpand(node, expand) {
+        this.setNodeData(node, {
+            expand
+        })
+        if (expand) { // 展开
+            node.children.forEach((item) => {
+                item.render()
+            })
+            node.renderLine()
+            node.updateExpandBtnNode()
+        } else { // 收缩
+            node.children.forEach((item) => {
+                item.remove()
+            })
+            node.removeLine()
+            node.updateExpandBtnNode()
+        }
+        this.mindMap.render()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-15 23:23:37 
+     * @Desc: 展开所有 
+     */
+    expandAllNode() {
+        walk(this.renderTree, null, (node) => {
+            if (!node.data.expand) {
+                node.data.expand = true
+            }
+        }, null, true, 0, 0)
+        this.mindMap.render()
+        this.root.children.forEach((item) => {
+            item.updateExpandBtnNode()
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-15 23:27:14 
+     * @Desc: 收起所有 
+     */
+    unexpandAllNode() {
+        this.root.children.forEach((item) => {
+            this.setNodeExpand(item, false)
+        })
+        walk(this.renderTree, null, (node, parent, isRoot) => {
+            if (!isRoot) {
+                node.data.expand = false
+            }
+        }, null, true, 0, 0)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 17:15:33 
+     * @Desc: 切换节点展开状态 
+     */
+    toggleNodeExpand(node) {
+        this.mindMap.execCommand('SET_NODE_EXPAND', node, !node.nodeData.data.expand)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-09 22:04:19 
+     * @Desc: 设置节点文本 
+     */
+    setNodeText(node, text) {
+        this.setNodeDataRender(node, {
+            text
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 08:37:40 
+     * @Desc: 设置节点图片 
+     */
+    setNodeImage(node, {
+        url,
+        title,
+        width,
+        height
+    }) {
+        this.setNodeDataRender(node, {
+            image: url,
+            imageTitle: title || '',
+            imageSize: {
+                width,
+                height,
+            },
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 08:44:06 
+     * @Desc: 设置节点图标 
+     */
+    setNodeIcon(node, icons) {
+        this.setNodeDataRender(node, {
+            icon: icons
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 08:49:33 
+     * @Desc: 设置节点超链接 
+     */
+    setNodeHyperlink(node, link, title = '') {
+        this.setNodeDataRender(node, {
+            hyperlink: link,
+            hyperlinkTitle: title,
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 08:52:59 
+     * @Desc: 设置节点备注 
+     */
+    setNodeNote(node, note) {
+        this.setNodeDataRender(node, {
+            note
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 08:54:53 
+     * @Desc: 设置节点标签 
+     */
+    setNodeTag(node, tag) {
+        this.setNodeDataRender(node, {
+            tag
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-05-04 14:19:48 
+     * @Desc: 更新节点数据 
+     */
+    setNodeData(node, data) {
+        Object.keys(data).forEach((key) => {
+            node.nodeData.data[key] = data[key]
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 08:45:48 
+     * @Desc: 设置节点数据，并判断是否渲染 
+     */
+    setNodeDataRender(node, data) {
+        this.setNodeData(node, data)
+        let changed = node.getSize()
+        node.renderNode()
+        if (changed) {
+            this.mindMap.render()
+        }
+    }
+}
+
+export default Render
--- a/simple-mind-map/src/Select.js
+++ b/simple-mind-map/src/Select.js
@@ -0,0 +1,191 @@
+import { bfsWalk, throttle } from './utils'
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-07-10 22:34:51 
+ * @Desc: 选择节点类 
+ */
+
+class Select {
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 22:35:16 
+     * @Desc: 构造函数 
+     */
+    constructor({ mindMap }) {
+        this.mindMap = mindMap
+        this.rect = null
+        this.isMousedown = false
+        this.mouseDownX = 0
+        this.mouseDownY = 0
+        this.mouseMoveX = 0
+        this.mouseMoveY = 0
+        this.bindEvent()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 22:36:36 
+     * @Desc: 绑定事件 
+     */
+    bindEvent() {
+        this.checkInNodes = throttle(this.checkInNodes, 500, this)
+        this.mindMap.on('mousedown', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (e.which !== 3) {
+                return
+            }
+            this.isMousedown = true
+            let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+            this.mouseDownX = x
+            this.mouseDownY = y
+            this.createRect(x, y)
+        })
+        this.mindMap.on('mousemove', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (!this.isMousedown) {
+                return
+            }
+            let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+            this.mouseMoveX = x
+            this.mouseMoveY = y
+            if (Math.abs(x - this.mouseDownX) <= 10 && Math.abs(y - this.mouseDownY) <= 10) {
+                return
+            }
+            clearTimeout(this.autoMoveTimer)
+            this.onMove(x, y)
+        })
+        this.mindMap.on('mouseup', (e) => {
+            if (this.mindMap.opt.readonly) {
+                return
+            }
+            if (!this.isMousedown) {
+                return;
+            }
+            this.mindMap.emit('node_active', null, this.mindMap.renderer.activeNodeList)
+            clearTimeout(this.autoMoveTimer)
+            this.isMousedown = false
+            if (this.rect) this.rect.remove()
+            this.rect = null
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-13 07:55:49 
+     * @Desc: 鼠标移动事件
+     */
+    onMove (x, y) {
+        // 绘制矩形
+        this.rect.plot([
+            [this.mouseDownX, this.mouseDownY],
+            [this.mouseMoveX, this.mouseDownY],
+            [this.mouseMoveX, this.mouseMoveY],
+            [this.mouseDownX, this.mouseMoveY]
+        ])
+        this.checkInNodes()
+        // 检测边缘移动
+        let step = this.mindMap.opt.selectTranslateStep
+        let limit = this.mindMap.opt.selectTranslateLimit
+        let count = 0
+        // 左边缘
+        if (x <= this.mindMap.elRect.left + limit) {
+            this.mouseDownX += step
+            this.mindMap.view.translateX(step)
+            count++
+        }
+        // 右边缘
+        if (x >= this.mindMap.elRect.right - limit) {
+            this.mouseDownX -= step
+            this.mindMap.view.translateX(-step)
+            count++
+        }
+        // 上边缘
+        if (y <= this.mindMap.elRect.top + limit) {
+            this.mouseDownY += step
+            this.mindMap.view.translateY(step)
+            count++
+        }
+        // 下边缘
+        if (y >= this.mindMap.elRect.bottom - limit) {
+            this.mouseDownY -= step
+            this.mindMap.view.translateY(-step)
+            count++
+        }
+        if (count > 0) {
+            this.startAutoMove(x, y)
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-22 08:02:23 
+     * @Desc: 开启自动移动 
+     */
+    startAutoMove(x, y) {
+        this.autoMoveTimer = setTimeout(() => {
+            this.onMove(x, y)
+        }, 20);
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 10:19:37 
+     * @Desc: 创建矩形 
+     */
+    createRect(x, y) {
+        this.rect = this.mindMap.svg.polygon().stroke({
+            color: '#0984e3'
+        }).fill({
+            color: 'rgba(9,132,227,0.3)'
+        }).plot([[x, y]])
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 10:20:43 
+     * @Desc: 检测在选区里的节点 
+     */
+    checkInNodes() {
+        let { scaleX, scaleY, translateX, translateY } = this.mindMap.draw.transform()
+        let minx = Math.min(this.mouseDownX, this.mouseMoveX)
+        let miny = Math.min(this.mouseDownY, this.mouseMoveY)
+        let maxx = Math.max(this.mouseDownX, this.mouseMoveX)
+        let maxy = Math.max(this.mouseDownY, this.mouseMoveY)
+        bfsWalk(this.mindMap.renderer.root, (node) => {
+            let { left, top, width, height } = node
+            let right = (left + width) * scaleX + translateX
+            let bottom = (top + height) * scaleY + translateY
+            left = left * scaleX + translateX
+            top = top * scaleY + translateY
+            if (
+                left >= minx &&
+                right <= maxx &&
+                top >= miny &&
+                bottom <= maxy
+            ) {
+                this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
+                    if (node.nodeData.data.isActive) {
+                        return ;
+                    }
+                    this.mindMap.renderer.setNodeActive(node, true)
+                    this.mindMap.renderer.addActiveNode(node)
+                })
+            } else if (node.nodeData.data.isActive) {
+                this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
+                    if (!node.nodeData.data.isActive) {
+                        return ;
+                    }
+                    this.mindMap.renderer.setNodeActive(node, false)
+                    this.mindMap.renderer.removeActiveNode(node)
+                })
+            }
+        })
+    }
+}
+
+export default Select
--- a/src/package/mind-map/src/Style.js
+++ b/src/package/mind-map/src/Style.js
@@ -1,3 +1,5 @@
+import { tagColorList } from './utils/constant';
+const rootProp = ['paddingX', 'paddingY']

 /** 
 * @Author: 王林 
@@ -29,6 +31,15 @@ class Style {
        this.themeConfig = themeConfig
    }

+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-12 07:40:14 
+     * @Desc: 更新主题配置 
+     */
+    updateThemeConfig(themeConfig) {
+        this.themeConfig = themeConfig
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-04-11 12:02:55 
@@ -37,23 +48,23 @@ class Style {
    merge(prop, root, isActive) {
        // 三级及以下节点
        let defaultConfig = this.themeConfig.node
-        if (root) {// 直接使用最外层样式
+        if (root || rootProp.includes(prop)) {// 直接使用最外层样式
            defaultConfig = this.themeConfig
        } else if (this.ctx.layerIndex === 0) {// 根节点
            defaultConfig = this.themeConfig.root
        } else if (this.ctx.layerIndex === 1) {// 二级节点
-            defaultConfig = this.themeConfig.secondLevel
+            defaultConfig = this.themeConfig.second
        }
        // 激活状态
-        if (isActive !== undefined ? isActive : this.ctx.isActive) {
-            if (this.ctx.activeStyle && this.ctx.activeStyle[prop] !== undefined) {
-                return this.ctx.activeStyle[prop];
+        if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
+            if (this.ctx.nodeData.data.activeStyle && this.ctx.nodeData.data.activeStyle[prop] !== undefined) {
+                return this.ctx.nodeData.data.activeStyle[prop];
            } else if (defaultConfig.active && defaultConfig.active[prop]) {
                return defaultConfig.active[prop]
            }
        }
        // 优先使用节点本身的样式
-        return this.ctx[prop] !== undefined ? this.ctx[prop] : defaultConfig[prop]
+        return this.ctx.nodeData.data[prop] !== undefined ? this.ctx.nodeData.data[prop] : defaultConfig[prop]
    }

    /** 
@@ -93,12 +104,47 @@ class Style {
     * @Date: 2021-04-13 08:14:34 
     * @Desc: html文字节点 
     */
-    domText(node) {
+    domText(node, fontSizeScale = 1) {
        node.style.fontFamily = this.merge('fontFamily')
-        node.style.fontSize = this.merge('fontSize') + 'px'
+        node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
        node.style.fontWeight = this.merge('fontWeight') || 'normal'
    }

+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-20 20:02:18 
+     * @Desc: 标签文字 
+     */
+    tagText(node, index) {
+        node.fill({
+            color: tagColorList[index].color
+        }).css({
+            'font-size': '12px'
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-20 21:04:11 
+     * @Desc: 标签矩形 
+     */
+    tagRect(node, index) {
+        node.fill({
+            color: tagColorList[index].background
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-03 22:37:19 
+     * @Desc: 内置图标 
+     */
+    iconNode(node) {
+        node.attr({
+            fill: this.merge('color')
+        })
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-04-11 14:50:49 
--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -0,0 +1,132 @@
+import {
+    getStrWithBrFromHtml
+} from './utils'
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-06-19 11:11:28 
+ * @Desc: 节点文字编辑类 
+ */
+export default class TextEdit {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-06-19 11:22:57 
+     * @Desc: 构造函数 
+     */
+    constructor(renderer) {
+        this.renderer = renderer
+        this.mindMap = renderer.mindMap
+        // 文本编辑框
+        this.textEditNode = null
+        // 文本编辑框是否显示
+        this.showTextEdit = false
+        this.bindEvent()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:27:04 
+     * @Desc: 事件 
+     */
+    bindEvent() {
+        this.show = this.show.bind(this)
+        // 节点双击事件
+        this.mindMap.on('node_dblclick', this.show)
+        // 点击事件
+        this.mindMap.on('draw_click', () => {
+            // 隐藏文本编辑框
+            this.hideEditTextBox()
+        })
+        // 展开收缩按钮点击事件
+        this.mindMap.on('expand_btn_click', () => {
+            this.hideEditTextBox()
+        })
+        // 节点激活前事件
+        this.mindMap.on('before_node_active', () => {
+            this.hideEditTextBox()
+        })
+        // 注册回车快捷键
+        this.mindMap.keyCommand.addShortcut('Enter', () => {
+            this.hideEditTextBox()
+        })
+        // 注册编辑快捷键
+        this.mindMap.keyCommand.addShortcut('F2', () => {
+            if (this.renderer.activeNodeList.length <= 0) {
+                return
+            }
+            this.show(this.renderer.activeNodeList[0])
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-13 22:15:56 
+     * @Desc: 显示文本编辑框 
+     */
+    show(node) {
+        this.showEditTextBox(node, node._textData.node.node.getBoundingClientRect())
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-13 22:13:02 
+     * @Desc: 显示文本编辑框 
+     */
+    showEditTextBox(node, rect) {
+        this.mindMap.emit('before_show_text_edit')
+        if (!this.textEditNode) {
+            this.textEditNode = document.createElement('div')
+            this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`
+            this.textEditNode.setAttribute('contenteditable', true)
+            document.body.appendChild(this.textEditNode)
+        }
+        node.style.domText(this.textEditNode, this.mindMap.view.scale)
+        this.textEditNode.innerHTML = node.nodeData.data.text.split(/\n/img).join('<br>')
+        this.textEditNode.style.minWidth = rect.width + 10 + 'px'
+        this.textEditNode.style.minHeight = rect.height + 6 + 'px'
+        this.textEditNode.style.left = rect.left + 'px'
+        this.textEditNode.style.top = rect.top + 'px'
+        this.textEditNode.style.display = 'block'
+        this.showTextEdit = true
+        // 选中文本
+        this.selectNodeText()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-08-02 23:13:50 
+     * @Desc: 选中文本 
+     */
+    selectNodeText() {
+        let selection = window.getSelection()
+        let range = document.createRange()
+        range.selectNodeContents(this.textEditNode)
+        selection.removeAllRanges()
+        selection.addRange(range)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-24 13:48:16 
+     * @Desc: 隐藏文本编辑框 
+     */
+    hideEditTextBox() {
+        if (!this.showTextEdit) {
+            return
+        }
+        this.renderer.activeNodeList.forEach((node) => {
+            let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
+            this.mindMap.execCommand('SET_NODE_TEXT', node, str)
+            this.mindMap.render()
+        })
+        this.mindMap.emit('hide_text_edit', this.textEditNode, this.renderer.activeNodeList)
+        this.textEditNode.style.display = 'none'
+        this.textEditNode.innerHTML = ''
+        this.textEditNode.style.fontFamily = 'inherit'
+        this.textEditNode.style.fontSize = 'inherit'
+        this.textEditNode.style.fontWeight = 'normal'
+        this.showTextEdit = false
+    }
+}
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -0,0 +1,189 @@
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2021-04-07 14:45:24 
+ * @Desc: 视图操作类 
+ */
+class View {
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:45:40 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        this.opt = opt
+        this.mindMap = this.opt.mindMap
+        this.scale = 1
+        this.sx = 0
+        this.sy = 0
+        this.x = 0
+        this.y = 0
+        this.firstDrag = true
+        this.setTransformData(this.mindMap.opt.viewData)
+        this.bind()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 15:38:51 
+     * @Desc: 绑定 
+     */
+    bind() {
+        // 快捷键
+        this.mindMap.keyCommand.addShortcut('Control+=', () => {
+            this.enlarge()
+        })
+        this.mindMap.keyCommand.addShortcut('Control+-', () => {
+            this.narrow()
+        })
+        this.mindMap.keyCommand.addShortcut('Control+Enter', () => {
+            this.reset()
+        })
+        this.mindMap.svg.on('dblclick', () => {
+            this.reset()
+        })
+        // 拖动视图
+        this.mindMap.event.on('mousedown', () => {
+            this.sx = this.x
+            this.sy = this.y
+        })
+        this.mindMap.event.on('drag', (e, event) => {
+            if (this.firstDrag) {
+                this.firstDrag = false
+                // 清除激活节点
+                this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+            }
+            this.x = this.sx + event.mousemoveOffset.x
+            this.y = this.sy + event.mousemoveOffset.y
+            this.transform()
+        })
+        this.mindMap.event.on('mouseup', () => {
+            this.firstDrag = true
+        })
+        // 放大缩小视图
+        this.mindMap.event.on('mousewheel', (e, dir) => {
+            // // 放大
+            if (dir === 'down') {
+                this.enlarge()
+            } else { // 缩小
+                this.narrow()
+            }
+        })
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-22 18:30:24 
+     * @Desc: 获取当前变换状态数据 
+     */
+    getTransformData() {
+        return {
+            transform: this.mindMap.draw.transform(),
+            state: {
+                scale: this.scale,
+                x: this.x,
+                y: this.y,
+                sx: this.sx,
+                sy: this.sy
+            }
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-11-22 19:54:17 
+     * @Desc: 动态设置变换状态数据 
+     */
+    setTransformData(viewData) {
+        if (viewData) {
+            Object.keys(viewData.state).forEach((prop) => {
+                this[prop] = viewData.state[prop]
+            })
+            this.mindMap.draw.transform({
+                ...viewData.transform
+            })
+            this.mindMap.emit('view_data_change', this.getTransformData())
+            this.mindMap.emit('scale', this.scale)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 15:49:06 
+     * @Desc: 平移x方向 
+     */
+    translateX(step) {
+        this.x += step
+        this.transform()
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 15:48:52 
+     * @Desc: 平移y方向 
+     */
+    translateY(step) {
+        this.y += step
+        this.transform()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 17:13:14 
+     * @Desc:  应用变换
+     */
+    transform() {
+        this.mindMap.draw.transform({
+            scale: this.scale,
+            // origin: 'center center',
+            translate: [this.x, this.y],
+        })
+        this.mindMap.emit('view_data_change', this.getTransformData())
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-11 17:41:35 
+     * @Desc: 恢复
+     */
+    reset() {
+        this.scale = 1
+        this.x = 0
+        this.y = 0
+        this.transform()
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 17:10:34 
+     * @Desc: 缩小 
+     */
+    narrow() {
+        if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
+            this.scale -= this.mindMap.opt.scaleRatio
+        } else {
+            this.scale = 0.1
+        }
+        this.transform()
+        this.mindMap.emit('scale', this.scale)
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-04 17:10:41 
+     * @Desc: 放大 
+     */
+    enlarge() {
+        this.scale += this.mindMap.opt.scaleRatio
+        this.transform()
+        this.mindMap.emit('scale', this.scale)
+    }
+}
+
+export default View
--- a/simple-mind-map/src/assets/blueSky.jpg
+++ b/simple-mind-map/src/assets/blueSky.jpg
--- a/simple-mind-map/src/assets/brainImpairedPink.jpg
+++ b/simple-mind-map/src/assets/brainImpairedPink.jpg
--- a/simple-mind-map/src/assets/catalogOrganization.jpg
+++ b/simple-mind-map/src/assets/catalogOrganization.jpg
--- a/simple-mind-map/src/assets/classic.jpg
+++ b/simple-mind-map/src/assets/classic.jpg
--- a/simple-mind-map/src/assets/classic2.jpg
+++ b/simple-mind-map/src/assets/classic2.jpg
--- a/simple-mind-map/src/assets/classic3.jpg
+++ b/simple-mind-map/src/assets/classic3.jpg
--- a/simple-mind-map/src/assets/classicBlue.jpg
+++ b/simple-mind-map/src/assets/classicBlue.jpg
--- a/simple-mind-map/src/assets/classicGreen.jpg
+++ b/simple-mind-map/src/assets/classicGreen.jpg
--- a/simple-mind-map/src/assets/dark.jpg
+++ b/simple-mind-map/src/assets/dark.jpg
--- a/simple-mind-map/src/assets/dark2.jpg
+++ b/simple-mind-map/src/assets/dark2.jpg
--- a/simple-mind-map/src/assets/default.jpg
+++ b/simple-mind-map/src/assets/default.jpg
--- a/simple-mind-map/src/assets/earthYellow.jpg
+++ b/simple-mind-map/src/assets/earthYellow.jpg
--- a/simple-mind-map/src/assets/freshGreen.jpg
+++ b/simple-mind-map/src/assets/freshGreen.jpg
--- a/simple-mind-map/src/assets/freshRed.jpg
+++ b/simple-mind-map/src/assets/freshRed.jpg
--- a/simple-mind-map/src/assets/gold.jpg
+++ b/simple-mind-map/src/assets/gold.jpg
--- a/simple-mind-map/src/assets/greenLeaf.jpg
+++ b/simple-mind-map/src/assets/greenLeaf.jpg
--- a/simple-mind-map/src/assets/logicalStructure.jpg
+++ b/simple-mind-map/src/assets/logicalStructure.jpg
--- a/simple-mind-map/src/assets/mindMap.jpg
+++ b/simple-mind-map/src/assets/mindMap.jpg
--- a/simple-mind-map/src/assets/minions.jpg
+++ b/simple-mind-map/src/assets/minions.jpg
--- a/simple-mind-map/src/assets/mint.jpg
+++ b/simple-mind-map/src/assets/mint.jpg
--- a/simple-mind-map/src/assets/organizationStructure.jpg
+++ b/simple-mind-map/src/assets/organizationStructure.jpg
--- a/simple-mind-map/src/assets/pinkGrape.jpg
+++ b/simple-mind-map/src/assets/pinkGrape.jpg
--- a/simple-mind-map/src/assets/romanticPurple.jpg
+++ b/simple-mind-map/src/assets/romanticPurple.jpg
--- a/simple-mind-map/src/assets/skyGreen.jpg
+++ b/simple-mind-map/src/assets/skyGreen.jpg
--- a/simple-mind-map/src/assets/vitalityOrange.jpg
+++ b/simple-mind-map/src/assets/vitalityOrange.jpg
--- a/simple-mind-map/src/layouts/Base.js
+++ b/simple-mind-map/src/layouts/Base.js
@@ -0,0 +1,161 @@
+import Node from '../Node'
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-12 22:24:30 
+ * @Desc: 布局基类 
+ */
+class Base {
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:25:16 
+     * @Desc: 构造函数 
+     */
+    constructor(renderer) {
+        // 渲染实例
+        this.renderer = renderer
+        // 控制实例
+        this.mindMap = renderer.mindMap
+        // 绘图对象
+        this.draw = this.mindMap.draw
+        // 根节点
+        this.root = null
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:39:50 
+     * @Desc: 计算节点位置 
+     */
+    doLayout() {
+        throw new Error('【computed】方法为必要方法，需要子类进行重写！')
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:41:04 
+     * @Desc: 连线 
+     */
+    renderLine() {
+        throw new Error('【renderLine】方法为必要方法，需要子类进行重写！')
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:42:08 
+     * @Desc: 定位展开收缩按钮 
+     */
+    renderExpandBtn() {
+        throw new Error('【renderExpandBtn】方法为必要方法，需要子类进行重写！')
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-10 21:30:54 
+     * @Desc: 创建节点实例 
+     */
+    createNode(data, parent, isRoot, layerIndex) {
+        // 创建节点
+        let newNode = null
+        // 复用节点
+        if (data && data._node && !this.renderer.reRender) {
+            newNode = data._node
+            newNode.reset()
+            newNode.layerIndex = layerIndex
+        } else {// 创建新节点
+            newNode = new Node({
+                data,
+                uid: this.mindMap.uid++,
+                renderer: this.renderer,
+                mindMap: this.mindMap,
+                draw: this.draw,
+                layerIndex
+            })
+            newNode.getSize()
+            // 数据关联实际节点
+            data._node = newNode
+            if (data.data.isActive) {
+                this.renderer.addActiveNode(newNode)
+            }
+        }
+        // 根节点
+        if (isRoot) {
+            newNode.isRoot = true
+            this.root = newNode
+        } else {
+            // 互相收集
+            newNode.parent = parent._node
+            parent._node.addChildren(newNode)
+        }
+        return newNode;
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-07-16 13:48:43 
+     * @Desc: 定位节点到画布中间 
+     */
+    setNodeCenter(node) {
+        node.left = (this.mindMap.width - node.width) / 2
+        node.top = (this.mindMap.height - node.height) / 2
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 11:25:52 
+     * @Desc: 更新子节点属性 
+     */
+    updateChildren(children, prop, offset) {
+        children.forEach((item) => {
+            item[prop] += offset
+            if (item.children && item.children.length) {
+                this.updateChildren(item.children, prop, offset)
+            }
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 15:05:01 
+     * @Desc: 二次贝塞尔曲线 
+     */
+    quadraticCurvePath(x1, y1, x2, y2) {
+        let cx = x1 + (x2 - x1) * 0.2
+        let cy = y1 + (y2 - y1) * 0.8
+        return `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 15:05:18 
+     * @Desc: 三次贝塞尔曲线 
+     */
+    cubicBezierPath(x1, y1, x2, y2) {
+        let cx1 = x1 + (x2 - x1) / 2
+        let cy1 = y1
+        let cx2 = cx1
+        let cy2 = y2
+        return `M ${x1},${y1} C ${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-06-27 19:00:07 
+     * @Desc:  获取节点的marginX
+     */
+    getMarginX(layerIndex) {
+        return layerIndex === 1 ? this.mindMap.themeConfig.second.marginX : this.mindMap.themeConfig.node.marginX;
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 15:34:20 
+     * @Desc: 获取节点的marginY
+     */
+    getMarginY(layerIndex) {
+        return layerIndex === 1 ? this.mindMap.themeConfig.second.marginY : this.mindMap.themeConfig.node.marginY;
+    }
+}
+
+export default Base
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -0,0 +1,315 @@
+import Base from './Base';
+import {
+    walk,
+    asyncRun
+} from '../utils'
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-12 22:25:58 
+ * @Desc: 目录组织图 
+ */
+class CatalogOrganization extends Base {
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:26:31 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        super(opt)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 布局
+     */
+    doLayout(callback) {
+        let task = [() => {
+            this.computedBaseValue()
+        }, () => {
+            this.computedLeftTopValue()
+        }, () => {
+            this.adjustLeftTopValue()
+        }, () => {
+            callback(this.root)
+        }]
+        asyncRun(task)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 遍历数据计算节点的left、width、height
+     */
+    computedBaseValue() {
+        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => {
+            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+            // 根节点定位在画布中心位置
+            if (isRoot) {
+                this.setNodeCenter(newNode)
+            } else {
+                // 非根节点
+                if (parent._node.isRoot) {
+                    newNode.top = parent._node.top + parent._node.height + this.getMarginX(layerIndex)
+                }
+            }
+            if (!cur.data.expand) {
+                return true;
+            }
+        }, (cur, parent, isRoot, layerIndex) => {
+            if (isRoot) {
+                let len = cur.data.expand === false ? 0 : cur._node.children.length
+                cur._node.childrenAreaWidth = len ? cur._node.children.reduce((h, item) => {
+                    return h + item.width
+                }, 0) + (len + 1) * this.getMarginX(layerIndex + 1) : 0
+            }
+        }, true, 0)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 遍历节点树计算节点的left、top
+     */
+    computedLeftTopValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (node.nodeData.data.expand && node.children && node.children.length) {
+                let marginX = this.getMarginX(layerIndex + 1)
+                let marginY = this.getMarginY(layerIndex + 1)
+                if (isRoot) {
+                    let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
+                    let totalLeft = left + marginX
+                    node.children.forEach((cur) => {
+                        cur.left = totalLeft
+                        totalLeft += cur.width + marginX
+                    })
+                } else {
+                    let totalTop = node.top + node.height + marginY + node.expandBtnSize
+                    node.children.forEach((cur) => {
+                        cur.left = node.left + node.width * 0.5
+                        cur.top = totalTop
+                        totalTop += cur.height + marginY + node.expandBtnSize
+                    })
+                }
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点left、top
+     */
+    adjustLeftTopValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (!node.nodeData.data.expand) {
+                return;
+            }
+            // 调整left
+            if (parent && parent.isRoot) {
+                let areaWidth = this.getNodeAreaWidth(node)
+                let difference = areaWidth - node.width
+                if (difference > 0) {
+                    this.updateBrothersLeft(node, difference / 2)
+                }
+            }
+            // 调整top
+            let len = node.children.length
+            if (parent && !parent.isRoot && len > 0) {
+                let marginY = this.getMarginY(layerIndex + 1)
+                let totalHeight = node.children.reduce((h, item) => {
+                    return h + item.height
+                }, 0) + (len + 1) * marginY + len * node.expandBtnSize
+                this.updateBrothersTop(node, totalHeight)
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-12 18:55:03 
+     * @Desc: 递归计算节点的宽度
+     */
+    getNodeAreaWidth(node) {
+        let widthArr = []
+        let loop = (node, width) => {
+            if (node.children.length) {
+                width += node.width / 2
+                node.children.forEach((item) => {
+                    loop(item, width)
+                })
+            } else {
+                width += node.width
+                widthArr.push(width)
+            }
+        }
+        loop(node, 0)
+        return Math.max(...widthArr)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-07-13 11:12:51 
+     * @Desc: 调整兄弟节点的left 
+     */
+    updateBrothersLeft(node, addWidth) {
+        if (node.parent) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            // 第一个或最后一个节点自身也需要移动，否则两边不对称
+            if (index === 0 || index === childrenList.length - 1) {
+                let _offset = index === 0 ? -addWidth : addWidth
+                node.left += _offset
+                if (node.children && node.children.length) {
+                    this.updateChildren(node.children, 'left', _offset)
+                }
+            }
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                if (_index < index) { // 左边的节点往左移
+                    _offset = -addWidth
+                } else if (_index > index) { // 右边的节点往右移
+                    _offset = addWidth
+                }
+                item.left += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'left', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothersLeft(node.parent, addWidth)
+        }
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 调整兄弟节点的top
+     */
+    updateBrothersTop(node, addHeight) {
+        if (node.parent && !node.parent.isRoot) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                // 下面的节点往下移
+                if (_index > index) {
+                    _offset = addHeight
+                }
+                item.top += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'top', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothersTop(node.parent, addHeight)
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 14:42:48 
+     * @Desc: 绘制连线，连接该节点到其子节点
+     */
+    renderLine(node, lines) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        let len = node.children.length
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        if (node.isRoot) {
+            let x1 = left + width / 2
+            let y1 = top + height
+            let s1 = marginX * 0.7
+            let minx = 0
+            let maxx = 0
+            node.children.forEach((item, index) => {
+                let x2 = item.left +item.width / 2
+                let y2 = item.top
+                if (index === 0) {
+                    minx = x2
+                } else if (index >= len - 1) {
+                    maxx = x2
+                }
+                let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
+                lines[index].plot(path)
+            })
+            // 父节点的竖线
+            let line1 = this.draw.path()
+            node.style.line(line1)
+            line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
+            node._lines.push(line1)
+            // 水平线
+            if (len > 1) {
+                let lin2 = this.draw.path()
+                node.style.line(lin2)
+                lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
+                node._lines.push(lin2)
+            }
+        } else {
+            let y1 = top + height
+            let maxy = 0
+            let x2 = node.left + node.width * 0.3
+            node.children.forEach((item, index) => {
+                let y2 = item.top + item.height / 2
+                if (index >= len - 1) {
+                    maxy = y2
+                }
+                let path = `M ${x2},${y2} L ${x2 + node.width * 0.2},${y2}`
+                lines[index].plot(path)
+            })
+            // 竖线
+            if (len > 0) {
+                let lin2 = this.draw.path()
+                expandBtnSize = len > 0 ? expandBtnSize : 0
+                node.style.line(lin2)
+                lin2.plot(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
+                node._lines.push(lin2)
+            }
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 19:54:26 
+     * @Desc: 渲染按钮 
+     */
+    renderExpandBtn(node, btn) {
+        let {
+            width,
+            height,
+            expandBtnSize,
+            isRoot
+        } = node
+        if (!isRoot) {
+            let {
+                translateX,
+                translateY
+            } = btn.transform()
+            btn.translate(width * 0.3 - expandBtnSize / 2 - translateX, height + expandBtnSize / 2 - translateY)
+        }
+    }
+}
+
+export default CatalogOrganization
--- a/src/package/mind-map/src/layouts/LogicalStructure.js
+++ b/src/package/mind-map/src/layouts/LogicalStructure.js
@@ -1,8 +1,8 @@
 import Base from './Base';
 import {
-    walk
-} from '../Utils'
-import Node from '../Node'
+    walk,
+    asyncRun
+} from '../utils'

 /** 
 * @Author: 王林 
@@ -25,59 +25,45 @@ class LogicalStructure extends Base {
     * @Date: 2021-04-06 14:04:20 
     * @Desc: 布局
     */
-    doLayout() {
-        // 计算节点的left、width、height
-        this.computedBaseValue()
-        // 计算节点的top
-        this.computedTopValue()
-        // 调整节点top
-        this.adjustTopValue()
-
-        return this.root;
+    doLayout(callback) {
+        let task = [() => {
+            this.computedBaseValue()
+        }, () => {
+            this.computedTopValue()
+        }, () => {
+            this.adjustTopValue()
+        }, () => {
+            callback(this.root)
+        }]
+        asyncRun(task)
    }

    /** 
     * javascript comment 
     * @Author: 王林25 
     * @Date: 2021-04-08 09:49:32 
-     * @Desc: 计算节点的left、width、height 
+     * @Desc: 遍历数据计算节点的left、width、height
     */
    computedBaseValue() {
-        walk(this.renderTree, null, (node, parent, isRoot, layerIndex) => {
-            // 遍历子节点前设置left、width、height
-            if (!node.data) {
-                node.data = {}
-            }
-            // 创建节点
-            let newNode = new Node({
-                uid: this.mindMap.uid++,
-                originData: node,
-                data: node.data,
-                renderer: this.renderer,
-                mindMap: this.mindMap,
-                draw: this.draw,
-                layerIndex
-            })
-            // 计算节点的宽高
-            newNode.refreshSize()
+        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => {
+            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+            // 根节点定位在画布中心位置
            if (isRoot) {
-                newNode.isRoot = true
-                newNode.left = (this.mindMap.width - newNode.width) / 2
-                newNode.top = (this.mindMap.height - newNode.height) / 2
-                this.root = newNode
+                this.setNodeCenter(newNode)
            } else {
-                let marginX = layerIndex === 1 ? this.themeConfig.secondLevel.marginX : this.themeConfig.node.marginX
-                newNode.left = parent._node.left + parent._node.width + marginX,
-                    newNode.parent = parent._node
-                parent._node.addChildren(newNode)
+                // 非根节点
+                // 定位到父节点右侧
+                newNode.left = parent._node.left + parent._node.width + this.getMarginX(layerIndex)
            }
-            node._node = newNode
-        }, (node, parent, isRoot, layerIndex) => {
+            if (!cur.data.expand) {
+                return true;
+            }
+        }, (cur, parent, isRoot, layerIndex) => {
            // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
-            let len = node.expand === false ? 0 : node._node.children.length
-            node._node.childrenAreaHeight = len ? node._node.children.reduce((h, cur) => {
-                return h + cur.height
-            }, 0) + (len + 1) * this.getMarginY(layerIndex) : 0
+            let len = cur.data.expand === false ? 0 : cur._node.children.length
+            cur._node.childrenAreaHeight = len ? cur._node.children.reduce((h, item) => {
+                return h + item.height
+            }, 0) + (len + 1) * this.getMarginY(layerIndex + 1) : 0
        }, true, 0)
    }

@@ -85,12 +71,12 @@ class LogicalStructure extends Base {
     * javascript comment 
     * @Author: 王林25 
     * @Date: 2021-04-08 09:59:25 
-     * @Desc: 计算节点的top 
+     * @Desc: 遍历节点树计算节点的top 
     */
    computedTopValue() {
        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
-            if (node.children && node.children.length) {
-                let marginY = this.getMarginY(layerIndex)
+            if (node.nodeData.data.expand && node.children && node.children.length) {
+                let marginY = this.getMarginY(layerIndex + 1)
                // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
                let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
                let totalTop = top + marginY
@@ -110,8 +96,11 @@ class LogicalStructure extends Base {
     */
    adjustTopValue() {
        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (!node.nodeData.data.expand) {
+                return;
+            }
            // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
-            let difference = node.childrenAreaHeight - this.getMarginY(layerIndex) - node.height
+            let difference = node.childrenAreaHeight - this.getMarginY(layerIndex + 1) * 2 - node.height
            if (difference > 0) {
                this.updateBrothers(node, difference / 2)
            }
@@ -131,11 +120,14 @@ class LogicalStructure extends Base {
                return item === node
            })
            childrenList.forEach((item, _index) => {
+                if (item === node) {
+                    return
+                }
                let _offset = 0
                // 上面的节点往上移
                if (_index < index) {
                    _offset = -addHeight
-                } else if (_index > index) {// 下面的节点往下移
+                } else if (_index > index) { // 下面的节点往下移
                    _offset = addHeight
                }
                item.top += _offset
@@ -149,45 +141,12 @@ class LogicalStructure extends Base {
        }
    }

-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 15:34:20 
-     * @Desc: 获取节点的marginY
-     */
-    getMarginY(layerIndex) {
-        return layerIndex === 1 ? this.themeConfig.secondLevel.marginY : this.themeConfig.node.marginY;
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 15:05:01 
-     * @Desc: 二次贝塞尔曲线 
-     */
-    quadraticCurvePath(x1, y1, x2, y2) {
-        let cx = x1 + (x2 - x1) * 0.2
-        let cy = y1 + (y2 - y1) * 0.8
-        return `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 15:05:18 
-     * @Desc: 三次贝塞尔曲线 
-     */
-    cubicBezierPath(x1, y1, x2, y2) {
-        let cx1 = x1 + (x2 - x1) / 2
-        let cy1 = y1
-        let cx2 = x2 - (x2 - x1) / 2
-        let cy2 = y2
-        return `M ${x1},${y1} C ${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`
-    }
-
    /** 
     * @Author: 王林 
     * @Date: 2021-04-11 14:42:48 
     * @Desc: 绘制连线，连接该节点到其子节点
     */
-    drawLine(node) {
+    renderLine(node, lines) {
        if (node.children.length <= 0) {
            return [];
        }
@@ -195,16 +154,12 @@ class LogicalStructure extends Base {
            left,
            top,
            width,
-            height
+            height,
+            expandBtnSize
        } = node
-        let lines = []
-        if (!node.isRoot) {
-            let line = this.draw.line(left + width, top + height / 2, left + width + 20, top + height / 2)
-            lines.push(line)
-        }
-        node.children.forEach((item) => {
-            let x1 = node.layerIndex === 0 ? left + width / 2 : left + width + 20
-            let y1 = node.layerIndex === 0 ? top + height / 2 : top + height / 2
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+            let y1 = top + height / 2
            let x2 = item.left
            let y2 = item.top + item.height / 2
            let path = ''
@@ -213,10 +168,8 @@ class LogicalStructure extends Base {
            } else {
                path = this.cubicBezierPath(x1, y1, x2, y2)
            }
-            let line = this.draw.path(path)
-            lines.push(line)
+            lines[index].plot(path)
        })
-        return lines;
    }

    /** 
@@ -224,16 +177,16 @@ class LogicalStructure extends Base {
     * @Date: 2021-04-11 19:54:26 
     * @Desc: 渲染按钮 
     */
-    drawIcon(node, icons) {
+    renderExpandBtn(node, btn) {
        let {
-            left,
-            top,
            width,
            height
        } = node
-        icons.forEach((icon) => {
-            icon.x(left + width).y(top + height / 2)
-        })
+        let {
+            translateX,
+            translateY
+        } = btn.transform()
+        btn.translate(width - translateX, height / 2 - translateY)
    }
 }

--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -0,0 +1,229 @@
+import Base from './Base';
+import {
+    walk,
+    asyncRun
+} from '../utils'
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-12 22:25:58 
+ * @Desc: 思维导图 
+ * 在逻辑结构图的基础上增加一个变量来记录生长方向，向左还是向右，同时在计算left的时候根据方向来计算、调整top时只考虑同方向的节点即可
+ */
+class MindMap extends Base {
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:26:31 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        super(opt)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 布局
+     */
+    doLayout(callback) {
+        let task = [() => {
+            this.computedBaseValue()
+        }, () => {
+            this.computedTopValue()
+        }, () => {
+            this.adjustTopValue()
+        }, () => {
+            callback(this.root)
+        }]
+        asyncRun(task)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 遍历数据计算节点的left、width、height
+     */
+    computedBaseValue() {
+        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex, index) => {
+            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+            // 根节点定位在画布中心位置
+            if (isRoot) {
+                this.setNodeCenter(newNode)
+            } else {
+                // 非根节点
+                // 三级及以下节点以上级为准
+                if (parent._node.dir) {
+                    newNode.dir = parent._node.dir
+                } else { // 节点生长方向
+                    newNode.dir = index % 2 === 0 ? 'right' : 'left'
+                }
+                // 根据生长方向定位到父节点的左侧或右侧
+                newNode.left = newNode.dir === 'right' ? parent._node.left + parent._node.width + this.getMarginX(layerIndex) : parent._node.left - this.getMarginX(layerIndex) - newNode.width
+            }
+            if (!cur.data.expand) {
+                return true;
+            }
+        }, (cur, parent, isRoot, layerIndex) => {
+            // 返回时计算节点的leftChildrenAreaHeight和rightChildrenAreaHeight，也就是左侧和右侧子节点所占的高度之和，包括外边距
+            if (!cur.data.expand) {
+                cur._node.leftChildrenAreaHeight = 0
+                cur._node.rightChildrenAreaHeight = 0
+                return
+            }
+            // 理论上只有根节点是存在两个方向的子节点的，其他节点的子节点一定全都是同方向，但是为了逻辑统一，就不按特殊处理的方式来写了
+            let leftLen = 0
+            let rightLen = 0
+            let leftChildrenAreaHeight = 0
+            let rightChildrenAreaHeight = 0
+            cur._node.children.forEach((item) => {
+                if (item.dir === 'left') {
+                    leftLen++
+                    leftChildrenAreaHeight += item.height
+                } else {
+                    rightLen++
+                    rightChildrenAreaHeight += item.height
+                }
+            })
+            cur._node.leftChildrenAreaHeight = leftChildrenAreaHeight + (leftLen + 1) * this.getMarginY(layerIndex + 1)
+            cur._node.rightChildrenAreaHeight = rightChildrenAreaHeight + (rightLen + 1) * this.getMarginY(layerIndex + 1)
+        }, true, 0)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 遍历节点树计算节点的top 
+     */
+    computedTopValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (node.nodeData.data.expand && node.children && node.children.length) {
+                let marginY = this.getMarginY(layerIndex + 1)
+                let baseTop = node.top + node.height / 2 + marginY
+                // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+                let leftTotalTop = baseTop - node.leftChildrenAreaHeight / 2
+                let rightTotalTop = baseTop - node.rightChildrenAreaHeight / 2
+                node.children.forEach((cur) => {
+                    if (cur.dir === 'left') {
+                        cur.top = leftTotalTop
+                        leftTotalTop += cur.height + marginY
+                    } else {
+                        cur.top = rightTotalTop
+                        rightTotalTop += cur.height + marginY
+                    }
+                })
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点top 
+     */
+    adjustTopValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (!node.nodeData.data.expand) {
+                return;
+            }
+            // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+            let base = this.getMarginY(layerIndex + 1) * 2 + node.height
+            let leftDifference = node.leftChildrenAreaHeight - base
+            let rightDifference = node.rightChildrenAreaHeight - base
+            if (leftDifference > 0 || rightDifference > 0) {
+                this.updateBrothers(node, leftDifference / 2, rightDifference / 2)
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 更新兄弟节点的top
+     */
+    updateBrothers(node, leftAddHeight, rightAddHeight) {
+        if (node.parent) {
+            // 过滤出和自己同方向的节点
+            let childrenList = node.parent.children.filter((item) => {
+                return item.dir === node.dir
+            })
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                let addHeight = item.dir === 'left' ? leftAddHeight : rightAddHeight
+                // 上面的节点往上移
+                if (_index < index) {
+                    _offset = -addHeight
+                } else if (_index > index) { // 下面的节点往下移
+                    _offset = addHeight
+                }
+                item.top += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'top', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothers(node.parent, leftAddHeight, rightAddHeight)
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 14:42:48 
+     * @Desc: 绘制连线，连接该节点到其子节点
+     */
+    renderLine(node, lines) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize
+        } = node
+        node.children.forEach((item, index) => {
+            let x1 = node.layerIndex === 0 ? left + width / 2 : item.dir === 'left' ? left - expandBtnSize : left + width + 20
+            let y1 = top + height / 2
+            let x2 = item.dir === 'left' ? item.left + item.width : item.left
+            let y2 = item.top + item.height / 2
+            let path = ''
+            if (node.isRoot) {
+                path = this.quadraticCurvePath(x1, y1, x2, y2)
+            } else {
+                path = this.cubicBezierPath(x1, y1, x2, y2)
+            }
+            lines[index].plot(path)
+        })
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 19:54:26 
+     * @Desc: 渲染按钮 
+     */
+    renderExpandBtn(node, btn) {
+        let {
+            width,
+            height,
+            expandBtnSize
+        } = node
+        let {
+            translateX,
+            translateY
+        } = btn.transform()
+        let x = (node.dir === 'left' ? 0 - expandBtnSize : width) - translateX
+        let y = height / 2 - translateY
+        btn.translate(x, y)
+    }
+}
+
+export default MindMap
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -0,0 +1,211 @@
+import Base from './Base';
+import {
+    walk,
+    asyncRun
+} from '../utils'
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-12 22:25:58 
+ * @Desc: 组织结构图
+ * 和逻辑结构图基本一样，只是方向变成向下生长，所以先计算节点的top，后计算节点的left、最后调整节点的left即可
+ */
+class OrganizationStructure extends Base {
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-12 22:26:31 
+     * @Desc: 构造函数 
+     */
+    constructor(opt = {}) {
+        super(opt)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-06 14:04:20 
+     * @Desc: 布局
+     */
+    doLayout(callback) {
+        let task = [() => {
+            this.computedBaseValue()
+        }, () => {
+            this.computedLeftValue()
+        }, () => {
+            this.adjustLeftValue()
+        }, () => {
+            callback(this.root)
+        }]
+        asyncRun(task)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:49:32 
+     * @Desc: 遍历数据计算节点的left、width、height
+     */
+    computedBaseValue() {
+        walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => {
+            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+            // 根节点定位在画布中心位置
+            if (isRoot) {
+                this.setNodeCenter(newNode)
+            } else {
+                // 非根节点
+                // 定位到父节点下方
+                newNode.top = parent._node.top + parent._node.height + this.getMarginX(layerIndex)
+            }
+            if (!cur.data.expand) {
+                return true;
+            }
+        }, (cur, parent, isRoot, layerIndex) => {
+            // 返回时计算节点的areaWidth，也就是子节点所占的宽度之和，包括外边距
+            let len = cur.data.expand === false ? 0 : cur._node.children.length
+            cur._node.childrenAreaWidth = len ? cur._node.children.reduce((h, item) => {
+                return h + item.width
+            }, 0) + (len + 1) * this.getMarginY(layerIndex + 1) : 0
+        }, true, 0)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 09:59:25 
+     * @Desc: 遍历节点树计算节点的left
+     */
+    computedLeftValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (node.nodeData.data.expand && node.children && node.children.length) {
+                let marginX = this.getMarginY(layerIndex + 1)
+                // 第一个子节点的left值 = 该节点中心的left值 - 子节点的宽度之和的一半
+                let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
+                let totalLeft = left + marginX
+                node.children.forEach((cur) => {
+                    cur.left = totalLeft
+                    totalLeft += cur.width + marginX
+                })
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-08 10:04:05 
+     * @Desc: 调整节点left
+     */
+    adjustLeftValue() {
+        walk(this.root, null, (node, parent, isRoot, layerIndex) => {
+            if (!node.nodeData.data.expand) {
+                return;
+            }
+            // 判断子节点所占的宽度之和是否大于该节点自身，大于则需要调整位置
+            let difference = node.childrenAreaWidth - this.getMarginY(layerIndex + 1) * 2 - node.width
+            if (difference > 0) {
+                this.updateBrothers(node, difference / 2)
+            }
+        }, null, true)
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2021-04-07 14:26:03 
+     * @Desc: 更新兄弟节点的left
+     */
+    updateBrothers(node, addWidth) {
+        if (node.parent) {
+            let childrenList = node.parent.children
+            let index = childrenList.findIndex((item) => {
+                return item === node
+            })
+            childrenList.forEach((item, _index) => {
+                let _offset = 0
+                // 上面的节点往上移
+                if (_index < index) {
+                    _offset = -addWidth
+                } else if (_index > index) { // 下面的节点往下移
+                    _offset = addWidth
+                }
+                item.left += _offset
+                // 同步更新子节点的位置
+                if (item.children && item.children.length) {
+                    this.updateChildren(item.children, 'left', _offset)
+                }
+            })
+            // 更新父节点的位置
+            this.updateBrothers(node.parent, addWidth)
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 14:42:48 
+     * @Desc: 绘制连线，连接该节点到其子节点
+     */
+    renderLine(node, lines) {
+        if (node.children.length <= 0) {
+            return [];
+        }
+        let {
+            left,
+            top,
+            width,
+            height,
+            expandBtnSize,
+            isRoot
+        } = node
+        let x1 = left + width / 2
+        let y1 = top + height
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let s1 = marginX * 0.7
+        let minx = 0
+        let maxx = 0
+        let len = node.children.length
+        node.children.forEach((item, index) => {
+            let x2 = item.left + item.width / 2
+            let y2 = item.top
+            if (index === 0) {
+                minx = x2
+            } else if (index >= len - 1) {
+                maxx = x2
+            }
+            let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
+            lines[index].plot(path)
+        })
+        // 父节点的竖线
+        let line1 = this.draw.path()
+        node.style.line(line1)
+        expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
+        line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
+        node._lines.push(line1)
+        // 水平线
+        if (len > 1) {
+            let lin2 = this.draw.path()
+            node.style.line(lin2)
+            lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
+            node._lines.push(lin2)
+        }
+    }
+
+    /** 
+     * @Author: 王林 
+     * @Date: 2021-04-11 19:54:26 
+     * @Desc: 渲染按钮 
+     */
+    renderExpandBtn(node, btn) {
+        let {
+            width,
+            height,
+            expandBtnSize
+        } = node
+        let {
+            translateX,
+            translateY
+        } = btn.transform()
+        btn.translate(width / 2 - expandBtnSize / 2 - translateX, height + expandBtnSize / 2 - translateY)
+    }
+}
+
+export default OrganizationStructure
--- a/src/package/mind-map/src/svg/btns.js
+++ b/src/package/mind-map/src/svg/btns.js
--- a/simple-mind-map/src/svg/icons.js
+++ b/simple-mind-map/src/svg/icons.js
@@ -0,0 +1,299 @@
+// 超链接图标
+const hyperlink = '<svg t="1624174958075" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7982" ><path d="M435.484444 251.733333v68.892445L295.822222 320.682667a168.504889 168.504889 0 0 0-2.844444 336.952889h142.506666v68.892444H295.822222a237.397333 237.397333 0 0 1 0-474.794667h139.662222z m248.945778 0a237.397333 237.397333 0 0 1 0 474.851556H544.654222v-69.006222l139.776 0.056889a168.504889 168.504889 0 0 0 2.844445-336.952889H544.597333V251.676444h139.776z m-25.827555 203.946667a34.474667 34.474667 0 0 1 0 68.892444H321.649778a34.474667 34.474667 0 0 1 0-68.892444h336.952889z" p-id="7983"></path></svg>'
+
+// 备注图标
+const note = '<svg t="1624195132675" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8792" ><path d="M152.768 985.984 152.768 49.856l434.56 0 66.816 0 234.048 267.392 0 66.816 0 601.92L152.768 985.984 152.768 985.984zM654.144 193.088l0 124.16 108.736 0L654.144 193.088 654.144 193.088zM821.312 384.064l-167.168 0L587.328 384.064 587.328 317.312 587.328 116.736 219.584 116.736 219.584 919.04l601.728 0L821.312 384.064 821.312 384.064zM386.688 517.888 319.808 517.888 319.808 450.944l66.816 0L386.624 517.888 386.688 517.888zM386.688 651.584 319.808 651.584 319.808 584.704l66.816 0L386.624 651.584 386.688 651.584zM386.688 785.344 319.808 785.344l0-66.88 66.816 0L386.624 785.344 386.688 785.344zM721.024 517.888 453.632 517.888 453.632 450.944l267.392 0L721.024 517.888 721.024 517.888zM654.144 651.584 453.632 651.584 453.632 584.704l200.512 0L654.144 651.584 654.144 651.584zM620.672 785.344l-167.04 0 0-66.88 167.04 0L620.672 785.344 620.672 785.344z" p-id="8793"></path></svg>'
+
+// 节点icon
+export const nodeIconList = [
+    {
+        name: '优先级图标',
+        type: 'priority',
+        list: [
+            {
+                name: '1',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.794667 0 511.957333 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 511.957333 1024 794.794667 794.752 1024 512.042667 1024z" fill="#E93B30"></path><path d="M580.309333 256h-75.52c-10.666667 29.824-30.165333 55.765333-58.709333 78.165333-28.416 22.314667-54.869333 37.418667-79.146667 45.397334v84.608a320 320 0 0 0 120.234667-70.698667v352.085333H580.266667V256z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '2',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M511.957333 1024C229.248 1024 0 794.752 0 512S229.248 0 511.957333 0C794.752 0 1024 229.248 1024 512s-229.248 512-512.042667 512z" fill="#FA8D2E"></path><path d="M667.946667 658.602667h-185.301334c4.864-8.533333 11.178667-17.066667 19.072-25.984 7.808-8.874667 26.453333-26.837333 55.936-53.888 29.525333-27.008 49.877333-47.786667 61.226667-62.165334 16.981333-21.717333 29.44-42.453333 37.290667-62.293333 7.808-19.84 11.776-40.746667 11.776-62.677333 0-38.570667-13.738667-70.741333-41.088-96.725334C599.466667 268.928 561.706667 256 513.834667 256c-43.690667 0-80.128 11.136-109.354667 33.578667-29.098667 22.4-46.506667 59.306667-52.010667 110.805333l93.184 9.301333c1.792-27.349333 8.405333-46.890667 19.754667-58.624 11.434667-11.776 26.837333-17.664 46.165333-17.664 19.541333 0 34.858667 5.589333 45.909334 16.768 11.136 11.264 16.682667 27.221333 16.682666 48.042667 0 18.858667-6.4 37.930667-19.242666 57.258667-9.472 14.037333-35.157333 40.533333-77.098667 79.872-52.096 48.554667-87.04 87.509333-104.704 116.821333A226.688 226.688 0 0 0 341.333333 745.429333h326.613334v-86.826666z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '3',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#2E66FA"></path><path d="M627.754667 731.733333c-29.354667 25.088-66.901333 37.632-112.725334 37.632-44.928 0-81.792-11.52-110.592-34.773333-33.066667-26.538667-49.877333-64.469333-50.304-114.133333h92.16c0.426667 21.76 7.552 38.314667 21.333334 49.664 12.288 10.88 28.117333 16.341333 47.402666 16.341333 20.309333 0 36.778667-6.101333 49.322667-18.432 12.544-12.330667 18.773333-29.568 18.773333-51.797333 0-21.290667-6.229333-38.186667-18.773333-50.773334-12.544-12.501333-29.866667-18.773333-52.138667-18.773333h-13.525333v-80.042667H512c42.112 0 63.274667-21.034667 63.274667-63.146666 0-20.309333-5.888-36.096-17.706667-47.445334a60.757333 60.757333 0 0 0-43.818667-17.066666c-17.493333 0-32 5.504-43.434666 16.298666-11.562667 10.88-17.792 25.728-18.773334 44.714667H359.68c0.981333-43.946667 16.042667-78.976 45.397333-104.96 29.354667-25.941333 65.706667-39.04 109.226667-39.04 44.928 0 81.792 13.525333 110.592 40.490667 28.8 26.922667 43.306667 61.610667 43.306667 104.149333 0 48.213333-19.413333 82.688-58.154667 103.552 43.52 23.125333 65.28 61.44 65.28 114.858667 0 48.128-15.957333 85.76-47.573333 112.682666z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '4',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.794667 0 512.042667 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 512.042667 1024 794.794667 794.752 1024 512.042667 1024z" fill="#6D768D"></path><path d="M600.96 256v309.802667h60.117333v81.536h-60.16v98.218666h-90.154666v-98.218666H311.466667v-81.237334L522.666667 256h78.293333zM510.72 399.104l-112.042667 166.698667h112.042667V399.104z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '5',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.794667 0 512.042667 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 512.042667 1024 794.794667 794.752 1024 512.042667 1024z" fill="#6D768D"></path><path d="M470.912 343.552h175.786667V256H400.256l-47.786667 253.952 75.434667 10.837333c21.205333-23.552 45.269333-35.413333 72.021333-35.413333 21.546667 0 38.997333 7.509333 52.437334 22.4 13.312 15.018667 20.053333 37.418667 20.053333 67.328 0 31.872-6.741333 55.765333-20.181333 71.552-13.397333 15.872-29.866667 23.765333-49.237334 23.765333-17.066667 0-32.085333-6.186667-45.013333-18.432-13.013333-12.373333-20.821333-29.013333-23.466667-50.133333L341.333333 611.498667c5.546667 40.874667 22.485333 73.429333 50.730667 97.621333 28.330667 24.32 64.938667 36.437333 109.866667 36.437333 56.149333 0 100.053333-21.546667 131.754666-64.554666a176.64 176.64 0 0 0 34.816-107.52c0-48.042667-14.378667-87.210667-43.221333-117.333334-28.8-30.208-63.957333-45.312-105.514667-45.312-21.674667 0-42.922667 5.248-63.829333 15.616l14.976-82.901333z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '6',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 1024C229.248 1024 0 794.794667 0 512.042667 0 229.205333 229.248 0 512 0c282.88 0 512 229.205333 512 512.042667C1024 794.794667 794.88 1024 512 1024z" fill="#6D768D"></path><path d="M519.210667 256c36.992 0 67.626667 10.368 91.776 31.189333 24.192 20.821333 39.68 51.029333 46.293333 90.709334l-90.197333 9.984c-2.176-18.56-7.978667-32.298667-17.28-41.173334-9.258667-8.874667-21.418667-13.226667-36.224-13.226666-19.754667 0-36.437333 8.789333-50.048 26.453333-13.696 17.664-22.314667 54.613333-25.856 110.549333 23.296-27.52 52.138667-41.258667 86.656-41.258666 38.997333 0 72.362667 14.805333 100.181333 44.544 27.733333 29.696 41.685333 68.010667 41.685333 114.858666 0 49.877333-14.634667 89.856-43.818666 119.936-29.226667 30.208-66.730667 45.226667-112.554667 45.226667-49.066667 0-89.429333-19.072-121.130667-57.344C357.12 658.218667 341.333333 595.541333 341.333333 508.416c0-89.344 16.469333-153.813333 49.493334-193.194667C423.722667 275.754667 466.56 256 519.168 256z m-9.472 241.834667c-17.962667 0-33.066667 6.997333-45.525334 21.12-12.330667 14.037333-18.56 34.858667-18.56 62.293333 0 30.421333 6.912 53.76 20.906667 70.4 13.952 16.469333 29.866667 24.746667 47.786667 24.746667 17.28 0 31.701333-6.826667 43.178666-20.309334 11.52-13.525333 17.237333-35.669333 17.237334-66.56 0-31.658667-6.186667-54.869333-18.517334-69.546666a58.197333 58.197333 0 0 0-46.506666-22.144z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '7',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.752 0 512S229.248 0 512.042667 0C794.752 0 1024 229.248 1024 512s-229.248 512-511.957333 512z" fill="#6D768D"></path><path d="M673.024 273.066667H354.133333v86.869333h212.224a691.2 691.2 0 0 0-104.746666 187.989333c-26.026667 70.101333-39.978667 138.88-41.429334 206.293334h89.6c-0.298667-42.922667 6.698667-91.776 21.034667-146.474667a654.72 654.72 0 0 1 62.08-154.965333c27.136-48.554667 53.888-85.76 80.128-111.701334V273.066667z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '8',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z" fill="#6D768D"></path><path d="M512.426667 256c46.208 0 82.048 11.861333 107.605333 35.541333 25.6 23.68 38.314667 53.674667 38.314667 89.898667 0 22.613333-5.802667 42.666667-17.578667 60.330667a111.445333 111.445333 0 0 1-49.450667 40.277333c26.965333 10.837333 47.36 26.752 61.312 47.658667 13.994667 20.906667 21.034667 45.013333 21.034667 72.362666 0 45.098667-14.336 81.834667-42.965333 109.952-28.586667 28.245333-66.602667 42.368-114.090667 42.368-44.245333 0-81.066667-11.648-110.464-34.986666-34.645333-27.52-52.010667-65.28-52.010667-113.365334 0-26.368 6.528-50.645333 19.626667-72.746666 13.056-22.144 33.578667-39.210667 61.696-51.242667-24.064-10.154667-41.557333-24.192-52.48-41.941333a109.824 109.824 0 0 1-16.512-58.666667c0-36.224 12.757333-66.218667 37.973333-89.898667 25.386667-23.68 61.354667-35.541333 108.032-35.541333z m1.28 265.429333c-22.784 0-39.722667 7.978667-50.901334 23.893334-11.136 15.786667-16.64 33.066667-16.64 51.498666 0 25.984 6.485333 46.208 19.712 60.714667 13.098667 14.506667 29.525333 21.802667 49.152 21.802667 19.242667 0 35.157333-6.997333 47.786667-20.992 12.629333-13.909333 18.858667-34.048 18.858667-60.416 0-23.082667-6.314667-41.557333-19.2-55.466667a63.274667 63.274667 0 0 0-48.725334-21.034667z m-0.341334-191.488c-17.792 0-32 5.333333-42.581333 16-10.538667 10.666667-15.872 24.746667-15.872 42.325334 0 18.645333 5.248 33.152 15.701333 43.648 10.453333 10.453333 24.362667 15.658667 41.770667 15.658666 17.664 0 31.658667-5.290667 42.24-15.872 10.538667-10.581333 15.872-25.173333 15.872-43.818666 0-17.493333-5.248-31.573333-15.701333-42.154667s-24.277333-15.786667-41.429334-15.786667z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '9',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 1024C229.248 1024 0 794.794667 0 512.042667 0 229.333333 229.248 0 512 0c282.88 0 512 229.333333 512 512.042667C1024 794.794667 794.88 1024 512 1024z" fill="#6D768D"></path><path d="M497.28 256c49.365333 0 89.856 19.157333 121.429333 57.429333 31.701333 38.229333 47.488 101.205333 47.488 188.842667 0 89.173333-16.384 153.386667-49.365333 192.853333-32.853333 39.594667-75.605333 59.264-128.426667 59.264-37.888 0-68.608-10.154667-91.989333-30.506666s-38.4-50.816-45.013333-91.306667l90.112-9.984c2.261333 18.474667 8.021333 32.085333 17.28 41.088 9.173333 8.874667 21.418667 13.312 36.608 13.312 19.2 0 35.541333-8.874667 48.981333-26.752 13.44-17.749333 22.016-54.613333 25.770667-110.549333-23.466667 27.264-52.821333 40.874667-88.064 40.874666-38.314667 0-71.253333-14.72-99.114667-44.330666C355.242667 506.709333 341.333333 468.224 341.333333 420.864c0-49.493333 14.592-89.258667 43.946667-119.466667C414.549333 271.104 451.925333 256 497.237333 256z m-4.352 77.482667c-17.237333 0-31.658667 6.826667-43.008 20.437333-11.477333 13.653333-17.194667 35.84-17.194667 66.816 0 31.402667 6.229333 54.485333 18.645334 69.205333 12.458667 14.72 27.946667 22.101333 46.592 22.101334 18.005333 0 33.066667-7.082667 45.44-21.205334 12.330667-14.208 18.432-35.029333 18.432-62.506666 0-29.994667-6.912-53.376-20.821334-69.973334-13.824-16.597333-29.866667-24.874667-48.085333-24.874666z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '10',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.794667 0 511.957333 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 511.957333 1024 794.794667 794.752 1024 512.042667 1024z" fill="#6D768D"></path><path d="M619.946667 273.066667c46.976 0 83.754667 16.042667 110.250666 48.042666 31.573333 37.973333 47.36 100.864 47.36 188.672 0 87.722667-15.829333 150.698667-47.658666 189.056-26.325333 31.616-62.976 47.36-109.952 47.36-47.274667 0-85.418667-17.237333-114.346667-51.968-28.885333-34.602667-43.392-96.426667-43.392-185.386666 0-87.168 15.872-150.016 47.701333-188.416 26.282667-31.488 62.933333-47.36 110.037334-47.36z m-207.488 12.8v452.266666H325.504V411.690667A299.904 299.904 0 0 1 213.333333 476.373333V398.933333c22.656-7.296 47.36-21.12 73.856-41.514666 26.624-20.522667 44.842667-44.288 54.784-71.552h70.485334z m207.488 60.842666c-11.306667 0-21.461333 3.413333-30.336 10.24-8.874667 6.826667-15.786667 19.157333-20.693334 36.864-6.4 22.997333-9.642667 61.653333-9.642666 115.968 0 54.442667 2.944 91.733333 8.661333 112.128 5.802667 20.352 13.098667 33.877333 21.845333 40.618667 8.789333 6.741333 18.858667 10.154667 30.165334 10.154667 11.349333 0 21.376-3.498667 30.250666-10.325334 8.874667-6.826667 15.786667-19.157333 20.693334-36.778666 6.4-22.826667 9.642667-61.354667 9.642666-115.797334 0-54.314667-2.858667-91.648-8.661333-112.042666-5.802667-20.352-13.013333-33.962667-21.76-40.789334a47.616 47.616 0 0 0-30.165333-10.24z" fill="#FFFFFF"></path></svg>`
+            }
+        ]
+    },
+    {
+        name: '进度图标',
+        type: 'progress',
+        list: [
+            {
+                name: '1',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96V512l294.144-294.144A414.72 414.72 0 0 1 928 512c0 229.76-186.24 416-416 416z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '2',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96V512h416c0 229.76-186.24 416-416 416z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '3',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96V512l294.144 294.144A414.72 414.72 0 0 1 512 928z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '4',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96v832z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '5',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 512l-294.144 294.144A414.72 414.72 0 0 1 96 512c0-229.76 186.24-416 416-416V512z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '6',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 512H96c0-229.76 186.24-416 416-416V512z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '7',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 512L217.856 217.856A414.72 414.72 0 0 1 512 96V512z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '8',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M0 512c0 282.752 229.248 512 512 512s512-229.248 512-512S794.752 0 512 0 0 229.248 0 512z" fill="#12BB37"></path><path d="M716.629333 341.333333h-51.328a35.072 35.072 0 0 0-28.330666 14.293334l-171.989334 233.984-77.909333-106.026667a35.2 35.2 0 0 0-28.330667-14.293333H307.413333c-7.082667 0-11.264 7.936-7.082666 13.653333l136.32 185.472a35.2 35.2 0 0 0 56.533333 0l230.4-313.429333a8.533333 8.533333 0 0 0-6.954667-13.653334z" fill="#FFFFFF"></path></svg>`
+            }
+        ]
+    },
+    {
+        name: '表情图标',
+        type: 'expression',
+        list: [
+            {
+                name: '1',
+                icon: `<svg t="1624457751393" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12255"><path d="M1.097856 1.097642h1021.804717v1021.804716H1.097856z" fill="#F09495" p-id="12256"></path><path d="M1024.000214 1024H0.000214V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.195498v1019.609432z" fill="#FFFFFF" p-id="12257"></path><path d="M234.695985 335.179887m-27.341259 0a27.341259 27.341259 0 1 0 54.682518 0 27.341259 27.341259 0 1 0-54.682518 0Z" fill="#040000" p-id="12258"></path><path d="M234.695985 363.519002c-15.666342 0-28.339115-12.772559-28.339115-28.339115 0-15.666342 12.772559-28.339115 28.339115-28.339115s28.339115 12.772559 28.339115 28.339115c0.099786 15.666342-12.672773 28.339115-28.339115 28.339115z m0-54.582732c-14.468914 0-26.243617 11.774703-26.243617 26.243617s11.774703 26.243617 26.243617 26.243617 26.243617-11.774703 26.243617-26.243617-11.774703-26.243617-26.243617-26.243617z" fill="#FFFFFF" p-id="12259"></path><path d="M776.232528 335.179887m-27.341259 0a27.341259 27.341259 0 1 0 54.682518 0 27.341259 27.341259 0 1 0-54.682518 0Z" fill="#040000" p-id="12260"></path><path d="M776.232528 363.519002c-15.666342 0-28.339115-12.772559-28.339115-28.339115 0-15.666342 12.772559-28.339115 28.339115-28.339115 15.666342 0 28.339115 12.772559 28.339115 28.339115 0 15.666342-12.772559 28.339115-28.339115 28.339115z m0-54.582732c-14.468914 0-26.243617 11.774703-26.243617 26.243617s11.774703 26.243617 26.243617 26.243617 26.243617-11.774703 26.243617-26.243617c-0.099786-14.468914-11.874488-26.243617-26.243617-26.243617z" fill="#FFFFFF" p-id="12261"></path><path d="M512.000214 671.656987c-52.58702 0-105.872539-17.961411-105.872539-52.387449S459.413194 566.882089 512.000214 566.882089s105.872539 17.961411 105.87254 52.387449S564.587234 671.656987 512.000214 671.656987z m0-74.240499c-21.952836 0-43.207172 3.592282-58.2748 9.77899-13.870201 5.68778-17.06334 11.275775-17.06334 12.07406s3.19314 6.386279 17.06334 12.07406c15.067628 6.186708 36.321965 9.77899 58.2748 9.77899s43.207172-3.592282 58.274801-9.77899c13.870201-5.68778 17.06334-11.275775 17.06334-12.07406s-3.19314-6.386279-17.06334-12.07406c-15.067628-6.286494-36.321965-9.77899-58.274801-9.77899z" fill="#040000" p-id="12262"></path></svg>`
+            },
+            {
+                name: '2',
+                icon: `<svg t="1624457767572" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1048"><path d="M0 0h1024v1024H0z" fill="#E6A6C9" p-id="1049"></path><path d="M315.1 368.1c-23.9 0-43.3-19.4-43.3-43.3s19.4-43.3 43.3-43.3 43.3 19.4 43.3 43.3-19.4 43.3-43.3 43.3z m0-74.7c-17.3 0-31.3 14.1-31.3 31.3 0 17.3 14.1 31.3 31.3 31.3 17.3 0 31.3-14.1 31.3-31.3 0-17.2-14-31.3-31.3-31.3zM738.7 368.1c-23.9 0-43.3-19.4-43.3-43.3s19.4-43.3 43.3-43.3 43.3 19.4 43.3 43.3-19.4 43.3-43.3 43.3z m0-74.7c-17.3 0-31.3 14.1-31.3 31.3 0 17.3 14.1 31.3 31.3 31.3 17.3 0 31.3-14.1 31.3-31.3 0-17.2-14-31.3-31.3-31.3zM293.5 698.8l-14.5-1.3c0.1-0.6 1.5-14.6 15.1-27.9 17.2-16.7 45-24.8 82.7-24 4.9-0.1 10.9-10.5 16.1-19.6 8.4-14.7 19-33.1 37.9-34.3 19.4-1.2 42.2 16.4 71.5 55.4 9.9 5.2 16.5 11.2 21.8 16.1 8.4 7.7 13.1 11.9 25.1 10.8 14.9-1.4 38.9-11.1 77.5-31.4 26.8-28.4 56.4-41.4 83.5-36.6 27.9 4.9 50.6 27.6 67.5 67.5l-13.4 5.7c-14.7-34.5-34.3-54.9-56.7-58.8-22.3-3.9-47.6 7.8-71.2 33.1l-0.8 0.9-1.1 0.6c-85.6 45.1-99.4 38-120.2 19.1-5.5-5-11.2-10.2-20.1-14.7l-1.5-0.8-1-1.4c-32.2-43.2-50.4-51.6-60-51-11.1 0.7-18.8 14-26.2 27-7.6 13.2-15.4 26.9-28.8 26.9h-0.2c-78.4-1.6-83 38.3-83 38.7z" fill="#040000" p-id="1050"></path></svg>`
+            },
+            {
+                name: '3',
+                icon: `<svg t="1624457776082" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1204" ><path d="M1.1 1.097642h1021.804716v1021.804716H1.1z" fill="#F7E983" p-id="1205"></path><path d="M1024.002358 1024H0.002358V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.197642v1019.609432z" fill="#FFFFFF" p-id="1206"></path><path d="M329.174412 344.491728a38.118106 10.277919 57.6 1 0 17.355867-11.014369 38.118106 10.277919 57.6 1 0-17.355867 11.014369Z" fill="#040000" p-id="1207"></path><path d="M644.769475 355.956059a11.175989 36.321965 30 1 0 36.321965-62.911488 11.175989 36.321965 30 1 0-36.321965 62.911488Z" fill="#040000" p-id="1208"></path><path d="M569.678445 671.158059c-26.343403 0-51.190021-5.288638-70.049503-14.967843-20.755408-10.577275-32.230754-25.445332-32.230755-41.710388 0-16.265056 11.475346-31.133112 32.230755-41.710387 18.859482-9.579419 43.805886-14.967843 70.049503-14.967843s51.190021 5.288638 70.049503 14.967843c20.755408 10.577275 32.230754 25.445332 32.230754 41.710387 0 16.265056-11.475346 31.133112-32.230754 41.710388-18.859482 9.679205-43.805886 14.967843-70.049503 14.967843z m0-95.095693c-49.693237 0-84.318846 20.356266-84.318846 38.517248s34.625609 38.517248 84.318846 38.517248 84.318846-20.356266 84.318846-38.517248-34.725395-38.517248-84.318846-38.517248z" fill="#040000" p-id="1209"></path></svg>`
+            },
+            {
+                name: '4',
+                icon: `<svg t="1624457781889" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1363" ><path d="M1.1 1.097642h1021.804716v1021.804716H1.1z" fill="#A6D9E2" p-id="1364"></path><path d="M1024.002358 1024H0.002358V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.197642v1019.609432z" fill="#FFFFFF" p-id="1365"></path><path d="M376.194134 348.950302m-23.44962 0a23.44962 23.44962 0 1 0 46.89924 0 23.44962 23.44962 0 1 0-46.89924 0Z" fill="#040000" p-id="1366"></path><path d="M629.150672 348.950302m-24.647047 0a24.647047 24.647047 0 1 0 49.294095 0 24.647047 24.647047 0 1 0-49.294095 0Z" fill="#040000" p-id="1367"></path><path d="M397.847613 603.503411c13.471058 8.282206 28.738258 14.468914 43.7061 19.458195 29.835899 9.978562 62.266225 14.169558 93.299551 7.483921 21.054765-4.490353 40.213604-14.369129 56.778016-28.039758 6.785422-5.587995-2.893783-15.167414-9.579419-9.579419-46.999026 38.916391-112.258819 31.033327-163.847983 6.086922-4.590138-2.195284-9.080491-4.490353-13.371272-7.184564-7.583707-4.590138-14.468914 7.184564-6.984993 11.774703z" fill="#040000" p-id="1368"></path><path d="M627.753674 534.052621c-31.033327 24.048334-58.474371 68.253362-37.419607 106.970182 10.577275 19.35841 29.835899 32.629897 48.795167 42.708244 7.982849 4.190996 15.067628-7.883064 7.084779-12.07406-25.245761-13.271487-53.485091-35.324108-49.094524-66.557006 2.793997-20.156695 15.766127-37.319821 29.736114-51.190022 3.392711-3.392711 6.984993-6.785422 10.776847-9.77899 2.993569-2.295069 2.394855-7.483921 0-9.878776-2.893783-3.19314-6.885208-2.49464-9.878776-0.199572z" fill="#040000" p-id="1369"></path></svg>`
+            },
+            {
+                name: '5',
+                icon: `<svg t="1624457787809" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1523" ><path d="M1.1 1.097642h1021.804716v1021.804716H1.1z" fill="#AD6F59" p-id="1524"></path><path d="M1024.002358 1024H0.002358V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.197642v1019.609432z" fill="#FFFFFF" p-id="1525"></path><path d="M411.829832 330.730879a38.118106 10.277919 57.6 1 0 17.355867-11.014368 38.118106 10.277919 57.6 1 0-17.355867 11.014368Z" fill="#040000" p-id="1526"></path><path d="M480.669675 609.989476c11.774703-25.844475 27.740401-51.788735 44.60417-73.342429 13.770415-17.462483 29.237186-33.92711 47.897096-44.803742 17.262912-10.078347 35.324108-13.67063 54.283376-6.58585 11.974274 4.390567 23.948548 14.468914 33.128825 24.547261 14.369129 15.865913 25.145975 34.625609 34.725394 53.684662 4.290782 8.581563 17.262912 0.997856 12.972131-7.583707-15.167414-30.334828-35.224323-63.763009-66.157864-80.327421-21.054765-11.37556-44.504385-11.475346-66.157864-1.895927-21.054765 9.280062-38.617034 25.644904-53.485091 42.907815-14.468914 16.863769-27.041902 35.324108-38.217891 54.582733-5.887351 10.178133-11.674917 20.555837-16.464627 31.232898-1.696355 3.692068-0.997856 7.982849 2.694212 10.277918 3.19314 1.895927 8.581563 0.898071 10.178133-2.694211z" fill="#040000" p-id="1527"></path><path d="M663.863649 338.091735a14.468914 33.727538 30 1 0 33.727538-58.417811 14.468914 33.727538 30 1 0-33.727538 58.417811Z" fill="#040000" p-id="1528"></path></svg>`
+            },
+            {
+                name: '6',
+                icon: `<svg t="1624457794933" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1680" ><path d="M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z" fill="#83CEE3" p-id="1681"></path><path d="M369 375.8m-34.6 0a34.6 34.6 0 1 0 69.2 0 34.6 34.6 0 1 0-69.2 0Z" fill="#040000" p-id="1682"></path><path d="M369 411.7c-19.8 0-36-16.1-36-36s16.1-36 36-36 36 16.1 36 36-16.1 36-36 36z m0-69.1c-18.3 0-33.2 14.9-33.2 33.2S350.7 409 369 409s33.2-14.9 33.2-33.2-14.9-33.2-33.2-33.2z" fill="#FFFFFF" p-id="1683"></path><path d="M672.2 333.6c-15.1 7.6-30.2 15.6-44.3 25-5.9 3.9-17 10.4-14.6 19.1 1.8 6.5 12 11.2 17.3 14.3 15.7 9.3 32.1 17.6 48.3 25.9 8.6 4.4 16.2-8.5 7.6-13-14.1-7.3-28.3-14.5-42.1-22.3-3.9-2.2-7.9-4.5-11.7-6.9-1.2-0.8-2.4-1.5-3.5-2.4-0.6-0.4-1.1-0.8-1.6-1.2 2.2 1.7-0.3-0.3-0.3-0.3-0.9 0.1-1.5-3.2-0.2 0.5 0.9 2.4 1.1 3.8 0.3 5.8 0.6-1.5-0.9 0.8-0.1 0 0.5-0.5 1-1.1 1.6-1.6 0.5-0.5 1-0.9 1.6-1.3 0.6-0.5 0 0 1.2-0.9 1.7-1.3 3.5-2.5 5.3-3.6 8.4-5.5 17.2-10.4 26-15.2 5.6-3 11.2-6 16.8-8.9 8.6-4.4 1-17.3-7.6-13zM578.2 720.9c-12.5-96.7-33.3-154.7-55.6-155.6-8.8 3.9-22.3 17.5-37.7 60.1-10.8 29.8-18.4 62.2-23 81.6-1.2 5.1-2.1 9.1-2.9 11.8l-9.3-2.4c0.7-2.6 1.6-6.6 2.8-11.6 14.9-63 36-136.8 67.5-148.8l0.8-0.3h0.8c18.2-0.4 33.2 19.5 45.8 60.8 10.2 33.3 16.7 74.6 20.5 103.3l-9.7 1.1z" fill="#040000" p-id="1684"></path></svg>`
+            },
+            {
+                name: '7',
+                icon: `<svg t="1624457802025" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1838" ><path d="M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z" fill="#8CC66D" p-id="1839"></path><path d="M375.778679 404.47473a14.5 33.8 30 1 0 33.8-58.543317 14.5 33.8 30 1 0-33.8 58.543317Z" fill="#040000" p-id="1840"></path><path d="M627.220263 374.211388a43.1 11.6 57.6 1 0 19.588408-12.431182 43.1 11.6 57.6 1 0-19.588408 12.431182Z" fill="#040000" p-id="1841"></path><path d="M451.1 548.5c17.6-9.3 63.9-30 105.3-16.2 17 20.3 32.7 98.8 28.8 138.1-27.5 10.2-82.5 10.2-106.1 5.8-8.3-10.5-32.7-81.8-35.3-114.6-0.4-5.5 2.5-10.6 7.3-13.1z" fill="#040000" p-id="1842"></path></svg>`
+            },
+            {
+                name: '8',
+                icon: `<svg t="1624457816632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1996" ><path d="M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z" fill="#5A74B8" p-id="1997"></path><path d="M357.7 400m-34.6 0a34.6 34.6 0 1 0 69.2 0 34.6 34.6 0 1 0-69.2 0Z" fill="#040000" p-id="1998"></path><path d="M357.7 436c-19.8 0-36-16.1-36-36s16.1-36 36-36 36 16.1 36 36-16.2 36-36 36z m0-69.2c-18.3 0-33.2 14.9-33.2 33.2s14.9 33.2 33.2 33.2 33.2-14.9 33.2-33.2-14.9-33.2-33.2-33.2z" fill="#FFFFFF" p-id="1999"></path><path d="M676 400m-34.6 0a34.6 34.6 0 1 0 69.2 0 34.6 34.6 0 1 0-69.2 0Z" fill="#040000" p-id="2000"></path><path d="M676 436c-19.8 0-36-16.1-36-36s16.1-36 36-36 36 16.1 36 36-16.2 36-36 36z m0-69.2c-18.3 0-33.2 14.9-33.2 33.2s14.9 33.2 33.2 33.2c18.3 0 33.2-14.9 33.2-33.2s-14.9-33.2-33.2-33.2z" fill="#FFFFFF" p-id="2001"></path><path d="M347.6 684.1c0.3-0.9 0.6-1.7 0.9-2.6 0.2-0.5 1.4-3.2 0.3-0.8 0.6-1.4 1.3-2.9 2-4.3 3.2-6.3 6-10.7 10.9-15.3 4.3-4 10.8-7.5 17.1-6.1 3.9 0.9 7.9 4.9 11.1 7.2 3.1 2.2 6.3 4.5 9.7 6.2 7.5 3.8 15.3 4.4 23.4 1.9 4.7-1.5 9.2-3.6 13.6-5.9 5-2.6 10.7-5 14.2-9.5 4.5-5.7 6.1-8.5 11.4-14.1 1-1 2-2 3.1-3 0.2-0.2 2.2-1.7 0.6-0.5 0.6-0.4 1.2-0.9 1.8-1.3 1-0.6 2.1-1.3 3.2-1.7-2 0.8 0.2 0 0.6-0.1 2.3-0.7-0.3-0.2 1.2-0.3 2.8-0.1 3.6 0 5.5 1 3.8 1.9 6.6 4.7 9.5 7.8 4.5 5 7.5 11.1 11.7 16.2 1.8 2.2 3.7 4.3 5.4 6.5 8.1 10.3 17.7 22.2 32.2 22 8.8-0.1 16.6-5.2 22.6-11.2 4.2-4.1 7.7-8.9 11-13.7 2.9-4.2 4.6-9.9 6.2-13.5 3.2-7.1 7.2-13.1 13-18.1 4.8-4.2 11.1-6.5 16.7-5.3 10.5 2.4 17.2 12.1 23.1 20.2 4.7 6.5 9.8 13 16 18.2 7.8 6.4 17.1 11.4 27.5 11.1 14.1-0.4 25.5-9.5 34.2-19.9 3-3.6 3.6-8.8 0-12.4-3.1-3.1-9.4-3.7-12.4 0-6.3 7.6-14.7 15.9-24.9 14.7-2.2-0.3-5.3-1.5-7.9-3.1-3.5-2.1-6.1-4.4-9.1-7.5-4.9-5.1-6.8-8.1-10.9-13.8-7.3-10.1-16.1-19.6-28.2-23.7-18.5-6.3-35.7 5.6-46 20.1-2.4 3.3-4.4 6.9-6.1 10.6-1.8 3.9-2.7 8.5-5.2 11.9-3.1 4.4-6.2 8.8-10.2 12.5-3 2.8-5.7 4.4-8.6 5.1-0.4 0.1-1.7 0.1 0.1 0h-2.2c2.1 0.1 0 0-0.5-0.1-0.7-0.2-1.4-0.4-2-0.6 1.8 0.7-1.8-1.1-2.4-1.5l-1.2-0.9c1.5 1.2-0.9-0.9-1.2-1.1-4.7-4.3-8.4-9.5-12.3-14.4-10.9-13.6-20.9-34-41-34.9-14.2-0.6-24.5 10.6-32.4 20.8-1.2 1.6-2.5 3.2-3.7 4.8-1.5 1.9 1.1-1.4-0.4 0.5-0.4 0.5-0.8 1.2-1.3 1.6-1.7 1.4-4.6 2.6-6.6 3.6-2.9 1.6-5.9 3.2-9 4.5-1.6 0.7-3.4 1.2-5.1 1.7-2.2 0.6-0.7 0.5-2.8 0.4-2.8 0-3.9-0.4-6.6-1.9-3.9-2.2-7.5-4.9-11.1-7.5-5.6-4-10-6.9-17-7.5-10.5-0.9-20.3 3.2-28.2 9.9-9.4 8.1-16.4 20.2-20.1 32-3.6 11.2 13.3 15.8 16.8 5.1z" fill="#040000" p-id="2002"></path></svg>`
+            },
+            {
+                name: '9',
+                icon: `<svg t="1624457826949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2156" ><path d="M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z" fill="#F0884F" p-id="2157"></path><path d="M287.2 382c6.4 2.3 11.6-3.7 15.4-7.9 5.1-5.5 10.2-11 16-15.9 0.8-0.7 1.7-1.4 2.5-2.1 1.2-0.9-1.7 1.3 0.2-0.2l1.2-0.9c2.1-1.5 4.3-2.9 6.5-4.3 2-1.2 4-2.2 6.1-3.2 0.6-0.3 1.2-0.6 1.9-0.9-0.3 0.2-1.5 0.6 0.2-0.1 1.3-0.5 2.6-1 4-1.5 11.2-3.7 21.8-4 33.4-1.1 19.5 4.9 36.4 17 51.2 30.2 8.6 7.7 21.4-5 12.7-12.7-25.2-22.6-57.1-42.1-92.2-36.2-20.4 3.4-37.7 16.1-51.6 30.9-2.3 2.4-4.5 5-6.8 7.4-0.7 0.7-1.9 1.5-2.4 2.4-0.5 0.8 2.3-1.5 0.8-0.7 1.3-0.7 3.9-1.4 5.8-0.7-11.1-3.7-15.8 13.7-4.9 17.5zM598 382c6.4 2.3 11.6-3.7 15.4-7.9 5.1-5.5 10.2-11 16-15.9 0.8-0.7 1.7-1.4 2.5-2.1 1.2-0.9-1.7 1.3 0.2-0.2l1.2-0.9c2.1-1.5 4.3-2.9 6.5-4.3 2-1.2 4-2.2 6.1-3.2 0.6-0.3 1.2-0.6 1.9-0.9-0.3 0.2-1.5 0.6 0.2-0.1 1.3-0.5 2.6-1 4-1.5 11.2-3.7 21.8-4 33.4-1.1 19.5 4.9 36.4 17 51.2 30.2 8.6 7.7 21.4-5 12.7-12.7-25.2-22.6-57.1-42.1-92.2-36.2-20.4 3.4-37.7 16.1-51.6 30.9-2.3 2.4-4.5 5-6.8 7.4-0.7 0.7-1.9 1.5-2.4 2.4-0.5 0.8 2.3-1.5 0.8-0.7 1.3-0.7 3.9-1.4 5.8-0.7-11.1-3.7-15.8 13.7-4.9 17.5zM505.9 527.1c3.4 0.7 6.8 1.7 10.2 2.8 6.7 2.2 10.4 3.5 16.6 7.7 1.6 1.1-0.5-0.5 0.6 0.5 0.6 0.5 1.1 1.1 1.7 1.6 1.5 1.4-0.1-0.4 0.5 0.6 0.4 0.6 0.7 1.2 1 1.8-1-2 0.1 0 0 0.5 0.1-2-0.1 0-0.1 0-0.1 0.8 0 0.7 0.1-0.5-0.1 0.4-0.1 0.7-0.3 1.1-0.6 1 0.7-0.9-0.4 1-1.6 2.5-4.6 5.4-8.1 7.8-6.8 4.6-14.4 8.2-22 11.4-7 3-7.4 11.9 0 14.8 7.4 2.8 15 5.3 22.4 8.1 3.1 1.1 4.2 1.5 6.9 2.9 1.1 0.6 2.1 1.2 3.2 1.8 1.2 0.8-0.7-0.5 0.1 0 0.4 0.3 0.8 0.7 1.1 1.1 0.6 0.8-1.1-1.2-0.2-0.2 0.8 0.9-0.3-1.4-0.1-0.2 0.1 0.9 0.2-1.9 0-0.9-0.1 0.5-0.8 1.8 0 0.2-0.2 0.5-0.5 1-0.8 1.4-0.3 0.3-0.9 1.3-0.3 0.5-0.5 0.7-1.1 1.3-1.7 1.9-6.9 7.3-15.9 12.8-24.4 18.1-8.3 5.3-0.6 18.5 7.7 13.2 9.9-6.3 20.9-12.8 28.6-21.8 4.8-5.5 8.1-12.9 4.2-19.9-3.4-6-10.5-8.9-16.6-11.4-8.6-3.5-17.5-6.2-26.2-9.5v14.8c14.4-6.1 47.2-18.8 41.2-40.3-3.5-12.9-19.4-18.9-30.8-22.6-3.4-1.1-6.9-2.1-10.5-2.9-9.1-2.2-13.3 12.5-3.6 14.6z" fill="#040000" p-id="2158"></path></svg>`
+            },
+            {
+                name: '10',
+                icon: `<svg t="1624457835383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2312" ><path d="M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z" fill="#F6F180" p-id="2313"></path><path d="M342.9 400.6m-29.5 0a29.5 29.5 0 1 0 59 0 29.5 29.5 0 1 0-59 0Z" fill="#040000" p-id="2314"></path><path d="M342.9 431.3c-16.9 0-30.7-13.8-30.7-30.7s13.8-30.7 30.7-30.7 30.7 13.8 30.7 30.7-13.7 30.7-30.7 30.7z m0-59c-15.6 0-28.3 12.7-28.3 28.3s12.7 28.3 28.3 28.3 28.3-12.7 28.3-28.3-12.6-28.3-28.3-28.3z" fill="#FFFFFF" p-id="2315"></path><path d="M702 400.6m-29.5 0a29.5 29.5 0 1 0 59 0 29.5 29.5 0 1 0-59 0Z" fill="#040000" p-id="2316"></path><path d="M702 431.3c-16.9 0-30.7-13.8-30.7-30.7s13.8-30.7 30.7-30.7 30.7 13.8 30.7 30.7-13.8 30.7-30.7 30.7z m0-59c-15.6 0-28.3 12.7-28.3 28.3s12.7 28.3 28.3 28.3 28.3-12.7 28.3-28.3-12.7-28.3-28.3-28.3z" fill="#FFFFFF" p-id="2317"></path><path d="M358.7 519.9c20 22 45.5 40.4 71.3 54.8 51.2 28.5 111.7 39.9 168 19.5 44.3-16.1 80.7-47.8 110.2-83.9 3-3.7 3.6-8.9 0-12.5-3.1-3.1-9.5-3.7-12.5 0-25.5 31.4-56.2 59.7-93.7 76-27.1 11.7-56.6 15.7-85.8 12.2-24.7-2.9-49.5-11.8-71.5-23.4-18.7-9.8-36.6-22.2-51.1-34.3-7.8-6.5-15.5-13.3-22.4-20.9-7.7-8.5-20.1 4.1-12.5 12.5z" p-id="2318"></path></svg>`
+            },
+            {
+                name: '11',
+                icon: `<svg t="1624457841751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2472" ><path d="M48.2 844.9c-68.5-210.6 186-782.1 409.1-795.4 6.3-0.4 12.5 0.2 18.6 1.6C665.1 94.6 985.4 515 987.1 821.3c0.1 20-12.9 37.9-22.4 43.1-162.7 89.8-605.8 179.7-884.4 30.9-15-7.9-24.2-26.1-32.1-50.4z" fill="#F0884F" p-id="2473"></path><path d="M401 352.1m-52.4 0a52.4 52.4 0 1 0 104.8 0 52.4 52.4 0 1 0-104.8 0Z" fill="#FFFFFF" p-id="2474"></path><path d="M408.7 329m-29.3 0a29.3 29.3 0 1 0 58.6 0 29.3 29.3 0 1 0-58.6 0Z" fill="#040000" p-id="2475"></path><path d="M527.5 352.1m-52.4 0a52.4 52.4 0 1 0 104.8 0 52.4 52.4 0 1 0-104.8 0Z" fill="#FFFFFF" p-id="2476"></path><path d="M527.5 329m-29.3 0a29.3 29.3 0 1 0 58.6 0 29.3 29.3 0 1 0-58.6 0Z" fill="#040000" p-id="2477"></path><path d="M450.7 517c1.1-8.2 3.2-16.4 6.1-24.1 0.1-0.3 1-2.5 0.5-1.4s0.3-0.7 0.5-1c0.7-1.4 1.4-2.8 2.2-4.1 0.4-0.8 2.8-3.9 1.3-2.1 0.8-1 1.7-1.9 2.6-2.8 1-1-1.5 1 0.1 0 0.5-0.3 1-0.6 1.5-0.8-1.3 0.7-1.2 0.3 0 0.1 1.9-0.3-1.8 0.3 0.1 0 1.2-0.2 1.5 0.3 0-0.1 0.6 0.2 1.3 0.3 1.9 0.5 0.3 0.1-1.3-0.7 0.2 0.1 0.8 0.5 1.6 0.9 2.4 1.4 1.4 1 0-0.1 1.4 1.1 0.9 0.8 1.8 1.7 2.6 2.6 1.8 1.9 3.5 3.9 5 6.1 5.1 7.1 9.3 14.8 13.2 22.6 3.5 6.9 13.7 4.7 15.8-2.1 2.6-8.7 4.8-17.4 7.4-26.1 0.9-3.2 1.9-6.4 3.2-9.4-0.7 1.6 0.8-1.6 1.2-2.2l0.9-1.5c0.7-1.2-1.4 0.7 0.1-0.1 1.7-0.9-1.2 0.3-0.3 0.1 0.8-0.2 1-1.2 0.3-0.3-0.6 0.8 0.6 0-0.5 0.2-2 0.3 2.4 0.5-1.1 0 0.5 0.1 1.2 0.2 1.6 0.4-1.1-0.8-0.8-0.4 0.2 0.2 0.7 0.4 3.4 2.3 2.7 1.8 8.9 7.1 15.9 16.9 22.5 26 2.8 3.8 7.5 5.6 11.8 3.1 3.7-2.2 5.9-8 3.1-11.8-8.2-11.1-16.6-23-27.7-31.4-6.3-4.7-14.5-7.6-21.7-3-6.7 4.2-9.6 12.5-11.9 19.6-3.2 9.9-5.5 20-8.6 29.9 5.3-0.7 10.5-1.4 15.8-2.1-7.8-15.5-24.8-50.1-48-41.7-14.1 5.1-19.7 23-22.9 36.2-0.9 3.8-1.8 7.7-2.3 11.6-0.6 4.6 1.1 9.3 6 10.6 4.2 1 10.2-1.5 10.8-6.1z" fill="#040000" p-id="2478"></path></svg>`
+            },
+            {
+                name: '12',
+                icon: `<svg t="1624457847424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2632" ><path d="M485.538528 993.072489a362.00362 481.804818 3.149 1 0 52.933731-962.15464 362.00362 481.804818 3.149 1 0-52.933731 962.15464Z" fill="#AADCF0" p-id="2633"></path><path d="M688.2 334.1c-15.1 7.6-30.2 15.6-44.3 25-5.9 3.9-17 10.4-14.6 19.1 1.8 6.5 12 11.2 17.3 14.3 15.7 9.3 32.1 17.6 48.3 25.9 8.6 4.4 16.2-8.5 7.6-13-14.1-7.3-28.3-14.5-42.1-22.3-3.9-2.2-7.9-4.5-11.7-6.9-1.2-0.8-2.4-1.5-3.5-2.4-0.6-0.4-1.1-0.8-1.6-1.2 2.2 1.7-0.3-0.3-0.3-0.3-0.9 0.1-1.5-3.2-0.2 0.5 0.9 2.4 1.1 3.8 0.3 5.8 0.6-1.5-0.9 0.8-0.1 0 0.5-0.5 1-1.1 1.6-1.6 0.5-0.5 1-0.9 1.6-1.3 0.6-0.5 0 0 1.2-0.9 1.7-1.3 3.5-2.5 5.3-3.6 8.4-5.5 17.2-10.4 26-15.2 5.6-3 11.2-6 16.8-8.9 8.6-4.4 1-17.4-7.6-13zM375.8 347c13.4 6.8 26.7 14 39.5 21.9 1.8 1.2 3.7 2.3 5.5 3.5 0.9 0.6 1.7 1.2 2.6 1.8 0.9 0.6 1.9 1.4 1.6 1.1 1.1 0.9 2.1 1.9 3.1 2.8 1.2 1 0-0.3 0.1 0 0-0.2-0.8-2.4-0.3-4.1 1.5-5.5 2.3-2.7 0.8-2-0.4 0.2-0.9 0.8-1.3 1.1 1.7-1.4-1.6 1.1-2.3 1.6-3.4 2.3-6.9 4.4-10.4 6.4-14.9 8.6-30.3 16.4-45.6 24.3-8.6 4.4-1 17.4 7.6 13 15-7.7 30.1-15.4 44.8-23.8 6.2-3.6 13.8-7.3 18.7-12.7 7.6-8.3-3.8-16.6-9.9-20.9-8.7-6.1-18-11.3-27.3-16.4-6.5-3.6-13-7.1-19.6-10.4-8.6-4.5-16.3 8.5-7.6 12.8zM412.8 570.9c13.5 7.7 28.5 13.3 43.3 17.9 29.8 9.2 61.7 13.1 92.6 7.3 20.6-3.9 40-12.5 56.6-25.2 2.8-2.2 4.3-5.6 2.3-9-1.6-2.8-6.2-4.5-9-2.3-48.3 36.9-113.3 30-165.6 6.7-4.6-2.1-9.2-4.2-13.7-6.7-7.3-4.2-13.9 7.2-6.5 11.3z" fill="#040000" p-id="2634"></path><path d="M644.6 505.2c-30.1 21.5-60.6 62.5-39.1 99.8 10.7 18.6 30.3 30.9 49.1 40.1 7.8 3.8 14.6-7.9 6.8-11.7-23.6-11.5-53.7-31.4-49.4-60.9 2.8-18.9 15.8-34.6 29.5-47.2 2.5-2.3 5.1-4.6 7.8-6.7 0.5-0.4 0.9-0.7 1.4-1.1-0.4 0.3-1.2 0.9-0.1 0.1l0.9-0.6c6.9-5.1 0.2-16.8-6.9-11.8z" fill="#040000" p-id="2635"></path></svg>`
+            },
+            {
+                name: '13',
+                icon: `<svg t="1624457855182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2789" ><path d="M235.1 76.9c75.6-26.5 297.3-90.1 514.2-16.6 16.3 5.5 29.8 17.4 37.1 33 57.5 122.4 127.1 602.1 62.1 785.6a62.58 62.58 0 0 1-32.5 35.8c-109.5 51.8-428.1 136.7-609.3 37.2-14.4-7.9-25-21.3-29.7-37.1-41.9-140.6-37-627.7 19.1-798 6.1-18.7 20.5-33.4 39-39.9z" fill="#F9DABD" p-id="2790"></path><path d="M392.2 360.2m-35.2 0a35.2 35.2 0 1 0 70.4 0 35.2 35.2 0 1 0-70.4 0Z" fill="#040000" p-id="2791"></path><path d="M618.6 360.2m-35.2 0a35.2 35.2 0 1 0 70.4 0 35.2 35.2 0 1 0-70.4 0Z" fill="#040000" p-id="2792"></path><path d="M512 562.6c-36 0-65.3-29.3-65.3-65.3S476 432 512 432s65.3 29.3 65.3 65.3-29.3 65.3-65.3 65.3z m0-122.9c-31.7 0-57.6 25.8-57.6 57.6s25.8 57.6 57.6 57.6c31.7 0 57.6-25.8 57.6-57.6s-25.9-57.6-57.6-57.6z" fill="#040000" p-id="2793"></path></svg>`
+            },
+            {
+                name: '14',
+                icon: `<svg t="1624457863444" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2947" ><path d="M178.1 971.5c38.1 15.9 98.7 26.6 171.3-12.3 3.7-2 8.4-1.6 11.6 1.1 43.3 35.9 123.3 80.8 236 10.9 3.8-2.4 8.7-2.4 12.6-0.2 41.8 23.9 191.6 58.2 246.6 14.2 4.4-3.5 9.1-6.6 14.5-8.5C1065 909.5 678.2-652 194.3 351c-37.5 77.8-38.4 94.1-71.9 211.3-27.6 96.3-29.1 231.3 1.4 348.1 7.2 27.3 27.3 49.9 54.3 61.1z" fill="#ABAAAA" p-id="2948"></path><path d="M468.9 349H418c-6.1 0-11.1-5-11.1-11.1V336c0-6.1 5-11.1 11.1-11.1h50.9c6.1 0 11.1 5 11.1 11.1v1.9c0 6.1-5 11.1-11.1 11.1zM643 471.9H390c-6.6 0-12-5.4-12-12s5.4-12 12-12h253c6.6 0 12 5.4 12 12s-5.4 12-12 12zM609 349h-61.2c-6 0-11-4.9-11-11v-2.1c0-6 4.9-11 11-11H609c6 0 11 4.9 11 11v2.1c0 6.1-4.9 11-11 11z" fill="#040000" p-id="2949"></path></svg>`
+            },
+            {
+                name: '15',
+                icon: `<svg t="1624457870536" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3103" ><path d="M673.1 318.7c3.7-17.5 5.6-35.7 5.6-54.4 0-137.9-105.5-249.7-235.6-249.7S207.4 126.4 207.4 264.3c0 55.4 17.1 106.7 45.9 148.1-55.2 63.3-88.6 145.9-88.6 236.3 0 199.2 162.1 360.6 362.1 360.6 200 0 362.1-161.5 362.1-360.6 0.1-147.3-88.7-274-215.8-330z" fill="#4F8A54" p-id="3104"></path><path d="M392 246.2m-47.1 0a47.1 47.1 0 1 0 94.2 0 47.1 47.1 0 1 0-94.2 0Z" fill="#FFFFFF" p-id="3105"></path><path d="M386 252.8m-26.4 0a26.4 26.4 0 1 0 52.8 0 26.4 26.4 0 1 0-52.8 0Z" fill="#040000" p-id="3106"></path><path d="M505.6 246.2m-47.1 0a47.1 47.1 0 1 0 94.2 0 47.1 47.1 0 1 0-94.2 0Z" fill="#FFFFFF" p-id="3107"></path><path d="M501.4 252.8m-26.4 0a26.4 26.4 0 1 0 52.8 0 26.4 26.4 0 1 0-52.8 0Z" fill="#040000" p-id="3108"></path><path d="M474.3 364.8h-50.9c-6.1 0-11.1-5-11.1-11.1v-1.9c0-6.1 5-11.1 11.1-11.1h50.9c6.1 0 11.1 5 11.1 11.1v1.9c0 6.2-5 11.1-11.1 11.1z" fill="#040000" p-id="3109"></path></svg>`
+            },
+            {
+                name: '16',
+                icon: `<svg t="1624457876371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3263" ><path d="M246.4 227.6c-166.9 101.1-461.9 344 87 564.1 1.5 0.6 2.9 1.1 4.4 1.6 80.7 27.7 392.8 165.4 641-198.1 40-58.6 38.5-136.2-3.7-193.3C892 289.5 727 201.1 429.1 182.7c-64.1-4-127.8 11.6-182.7 44.9z" fill="#CF92BE" p-id="3264"></path><path d="M617.1 393.4c-17.4 8.8-34.9 18.1-51.2 28.9-6.9 4.6-20.3 12.3-17.4 22.6 1.2 4.3 5.6 7 9 9.5 3.7 2.7 7.6 5 11.5 7.3 18.2 10.8 37.1 20.3 55.9 30 10 5.1 18.9-10 8.8-15.1-16.4-8.4-32.9-16.9-49-26-4.5-2.6-9.1-5.2-13.5-8l-4.5-3c-0.7-0.5-1.3-1-2-1.5 1.6 1.2 0.7 0.4-0.2-0.2-1.3-0.9-0.3-0.9-0.5-0.3 0.2 0.2 0.4 0.5 0.6 0.7 1 1.9 1.3 3.7 0.8 5.7 0.1-0.6 0.7-1.4-0.6 1.3 0.7-1.5-0.1 0-0.2 0.1 0.6-0.6 1.2-1.3 1.9-1.9l1.8-1.5c1.8-1.6-0.6 0.3 1.2-0.9 2-1.5 4.1-2.9 6.2-4.3 10-6.5 20.4-12.4 30.9-18 6.5-3.5 13.1-7 19.7-10.4 9.6-5 0.8-20.1-9.2-15zM323.1 408.5c15.9 8.1 31.7 16.5 46.8 26 2.2 1.4 4.3 2.8 6.5 4.2 1 0.7 1.9 1.3 2.8 2 0.5 0.3 1 0.7 1.4 1.1-1.1-0.9-0.3-0.3 0.3 0.3 1.1 1 2.2 2.2 3.3 3.1 1.4 1.1-1-1.7-0.1-0.1-0.6-1.1-0.9-4.1 0.3-6.7 2.2-4.8 0.7 0.1 0-0.5 0 0-1.1 0.9-1.3 1 2.3-1.9 0 0-0.5 0.4-0.8 0.5-1.5 1.1-2.3 1.6-4 2.7-8.1 5.1-12.3 7.5-17.3 10-35.1 19.1-52.8 28.2-10 5.1-1.2 20.2 8.8 15.1 17.5-9 35-17.9 52-27.7 7.3-4.2 15.9-8.6 21.8-14.7 9.3-9.7-4.3-19.7-11.5-24.7-10.1-7.1-20.9-13.1-31.7-19-7.6-4.2-15.2-8.2-22.9-12.1-9.7-5.2-18.6 9.9-8.6 15zM513 592.1c-12.2 0-24.6-1.4-36.3-4.3-8-2-13.9-8.2-15.4-16.2s1.7-15.8 8.4-20.5c23.2-16.3 60.5-31.9 106.2-13 6.4 2.6 11 8.3 12.3 15.1 1.3 6.7-0.8 13.6-5.7 18.3-13.5 13.1-40.9 20.6-69.5 20.6z m-37.4-32.5c-3.4 2.4-4.9 6.2-4.2 10.2 0.8 4.1 3.6 7.1 7.7 8.1 39.1 9.7 81.2 0.7 96.1-13.7 2.4-2.3 3.4-5.6 2.7-8.9-0.7-3.4-2.9-6.2-6.1-7.5-41.2-17.2-75.1-3.1-96.2 11.8z" fill="#040000" p-id="3265"></path></svg>`
+            },
+            {
+                name: '17',
+                icon: `<svg t="1624457881793" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3419" ><path d="M1008.6 465.7c0-124.9-95.5-226.2-213.4-226.2-12 0-23.8 1.1-35.2 3.1v-3.1c0-124.9-95.5-226.2-213.4-226.2S333.4 114.6 333.4 239.5c0 2.4 0 4.8 0.1 7.2-17.1-4.7-35-7.2-53.4-7.2-117.8 0-213.4 101.3-213.4 226.2 0 92.1 51.9 171.3 126.3 206.6-13.7 29.9-21.4 63.4-21.4 98.8 0 124.9 95.5 226.2 213.4 226.2 68.8 0 130-34.5 169-88.1 39 53.6 100.2 88.1 169 88.1 117.8 0 213.4-101.3 213.4-226.2 0-41.2-10.4-79.9-28.6-113.1 60.5-39.9 100.8-111.1 100.8-192.3z" fill="#8CC66D" p-id="3420"></path><path d="M437.8 400.7m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z" fill="#040000" p-id="3421"></path><path d="M649.7 400.7m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z" fill="#040000" p-id="3422"></path><path d="M527.3 625.9c6.3-14.2 13.1-28.3 17.9-43 6.2-19 8.3-38.6 10.5-58.3l2.1-19.2c0.7-6.2-9-6.1-9.7 0-1.7 16.3-2.8 32.8-5.7 48.9-4.2 23.7-13.8 45-23.5 66.7-2.5 5.6 5.9 10.5 8.4 4.9z" fill="#252525" p-id="3423"></path><path d="M447.7 522.3c20.3-0.1 40.6-0.2 61-0.4l96.6-0.6c7.5 0 14.9-0.1 22.4-0.1 16.6-0.1 16.7-25.9 0-25.8-20.3 0.1-40.6 0.2-61 0.4l-96.6 0.6c-7.5 0-14.9 0.1-22.4 0.1-16.6 0.1-16.7 25.9 0 25.8z" fill="#040000" p-id="3424"></path><path d="M495.4 508.2c-10.3 3.8-9.2 20.9-9.2 29.5 0.1 16 2.1 32.3 6.1 47.8 3.5 13.7 8.7 29.9 20.6 38.7 12.9 9.5 27.6 2.1 37.6-7.9 10.2-10.3 17.8-23 24.7-35.6 11.6-21.3 20.9-43.8 29.7-66.4 3-7.8-9.5-11.1-12.5-3.4-7.4 19.1-15.3 38.1-24.7 56.4-5.9 11.5-12.2 23-20.3 33.1-2.8 3.5-5.8 6.9-9.2 9.8-1.9 1.7-1.4 1.3-3.3 2.5-1.3 0.8-2.6 1.6-3.9 2.2-0.7 0.3 1-0.2-0.8 0.3-0.6 0.2-1.2 0.3-1.8 0.5-1.1 0.3-1.2 0.2-0.5 0.1-0.6 0-1.3 0-1.9 0.1-2.2 0.1 0.6 0.5-1.8-0.2l-1.8-0.6c1.5 0.5 0.2 0.1-0.5-0.3-0.8-0.5-2.9-2.1-1.7-1.1-1-0.9-2-1.7-2.8-2.7-0.4-0.5-0.9-1-1.3-1.5 0.4 0.5 0.1 0.2-0.5-0.7-0.8-1.3-1.7-2.5-2.4-3.9-0.7-1.3-1.4-2.5-2-3.8-0.4-0.8-0.8-1.6-1.1-2.4-0.1-0.2-0.5-1.1 0 0l-0.6-1.5a86.8 86.8 0 0 1-3.3-9.8c-4.4-14.9-6.2-27.9-6.8-42.8-0.3-6.6-0.3-13.1 0.4-19.7 0.2-1.5-0.3 1.5 0.1-0.5l0.3-1.8c0.2-0.9 0.5-1.8 0.7-2.8 0.4-1.9-0.7 1.1 0.3-0.7 0.5-1-1.3 1.2-0.3 0.5-0.3 0.3-1.1 0.8-2 1.1 7.7-2.9 4.3-15.4-3.5-12.5z" fill="#040000" p-id="3425"></path></svg>`
+            },
+            {
+                name: '18',
+                icon: `<svg t="1624457899440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3579" ><path d="M75.4 739.8c-78.7-134.4-194-455.7 401.4-579.6 9.8-2 19.2-6.2 29.2-7.5C656.8 133 947.3 205 1000.1 578.4c42.6 223.8 29.7 392.1-822 233.6-43.1-8-80.6-34.4-102.7-72.2z" fill="#F09495" p-id="3580"></path><path d="M704.6 875.4c-129 0-301.8-20.5-526.6-62.3-43.5-8.1-81.2-34.6-103.5-72.7-19.3-32.9-44.8-84.3-57.1-142.5-13.9-65.1-8.8-125.3 15.1-179.2 54.3-122.3 203.7-209.6 444-259.6 4.1-0.9 8.3-2.1 12.3-3.4 5.5-1.7 11.1-3.4 16.9-4.2 29-3.8 75.7-5.9 133.8 5.7 54.5 10.9 105.3 31 150.8 59.9C843.7 251 888.2 296 922.7 351c39.7 63.1 66.1 139.6 78.5 227.3 8.1 42.4 15.2 87.3 12.5 127.9-2.8 42.6-16.4 75.5-41.5 100.7-42.5 42.7-120.3 65-237.8 68.1-9.6 0.2-19.6 0.4-29.8 0.4zM76.3 739.3c22 37.6 59.2 63.7 102.1 71.7 242.5 45.1 424.4 65.3 556.1 61.9 116.9-3.1 194.1-25.2 236.3-67.5 55.4-55.6 44.4-142.5 28.3-226.7C976 415.8 903.4 291.5 789.2 219c-124-78.7-248.1-69.9-283.2-65.3-5.6 0.7-11.2 2.4-16.6 4.1-4.1 1.2-8.3 2.5-12.5 3.4C237.3 211.1 88.5 298 34.5 419.6c-54.6 122.8 2.8 253 41.8 319.7z" fill="#FFFFFF" p-id="3581"></path><path d="M424.1 442.5m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z" fill="#040000" p-id="3582"></path><path d="M635.9 442.5m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z" fill="#040000" p-id="3583"></path><path d="M426.2 543.3c17.1 7.9 36.6 26 25.5 46.1-6.9 12.5-19.8 21.2-31.7 28.4-4.5 2.7-0.4 9.8 4.1 7.1 17.4-10.5 41.6-27.6 39-51.1-1.6-14-12.4-24.8-23.5-32.3-3-2-6.1-3.9-9.3-5.4-4.8-2.1-8.9 5-4.1 7.2zM629.5 535.4c-21.8 11.7-40.6 37-25.7 61.3 8.2 13.4 22.2 22.7 35.7 30.3 4.7 2.7 8.9-4.6 4.2-7.2-15.5-8.7-39.9-23.9-36.9-45.2 1.6-11.4 10.7-20.7 19.6-27.2 2.4-1.7 4.8-3.4 7.4-4.8 4.7-2.5 0.4-9.8-4.3-7.2z" fill="#040000" p-id="3584"></path><path d="M457.2 584.6c25.6 25.6 66.7 41 101.8 28.3 18.2-6.6 33.2-19.1 45.5-33.8 4.2-5.1-3-12.4-7.3-7.3-18.5 22-43.3 38.1-73 35-18.6-1.9-36.2-10.8-50.9-22-2.9-2.2-6.1-4.8-8.8-7.5-4.7-4.7-12 2.6-7.3 7.3z" fill="#040000" p-id="3585"></path></svg>`
+            },
+            {
+                name: '19',
+                icon: `<svg t="1624457904464" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3739" ><path d="M915.9 510.5c8.4-19 13.1-39.8 13.1-61.7 0-90-78.9-162.9-176.2-162.9-3.2 0-6.3 0.1-9.5 0.2v-0.2c0-94.8-116.2-171.6-259.6-171.6S224 191.2 224 286v2c-96.2 0-174.1 72-174.1 160.9 0 38 14.3 73 38.2 100.5-41.8 29.4-68.8 75.9-68.8 128.2 0 88.9 78 160.9 174.1 160.9 17.1 0 33.6-2.3 49.3-6.5 28.9 46.1 88.7 77.7 157.6 77.7 49.4 0 94-16.2 126-42.3 32 26.1 76.6 42.3 126 42.3 77.3 0 143-39.7 166.7-95 3.1 0.2 6.3 0.2 9.5 0.2 97.3 0 176.2-72.9 176.2-162.9 0-60.6-35.7-113.4-88.8-141.5z" fill="#5A74B8" p-id="3740"></path><path d="M357.6 449.5a46.6 73.2 0 1 0 93.2 0 46.6 73.2 0 1 0-93.2 0Z" fill="#FEFEFD" p-id="3741"></path><path d="M357.5 449.5a25.1 39.4 0 1 0 50.2 0 25.1 39.4 0 1 0-50.2 0Z" fill="#040000" p-id="3742"></path><path d="M531.3 449.5a46.6 73.2 0 1 0 93.2 0 46.6 73.2 0 1 0-93.2 0Z" fill="#FEFEFD" p-id="3743"></path><path d="M531.2 449.5a25.1 39.4 0 1 0 50.2 0 25.1 39.4 0 1 0-50.2 0Z" fill="#040000" p-id="3744"></path><path d="M426.7 574.6c20.9 29.9 59.7 52.2 96.2 38.6 19.2-7.2 34.7-21.2 47.6-36.9 2.8-3.5 3.4-8.3 0-11.7-2.9-2.9-8.9-3.5-11.7 0-16.5 20.2-40.9 40.9-68.1 35.5-17.3-3.4-31-13.2-42.9-25.9-2-2.2-3.9-4.4-5.8-6.7-1.6-1.9 1.1 1.5-0.4-0.6-0.2-0.2-0.3-0.5-0.5-0.7-6.2-8.7-20.6-0.4-14.4 8.4z" fill="#040000" p-id="3745"></path></svg>`
+            },
+            {
+                name: '20',
+                icon: `<svg t="1624457910321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3899" ><path d="M792.8 301.4c-8.2 0-16.2 0.4-24.2 1.3-12.3-81.8-129.2-145.9-271.8-145.9-137.1 0-250.5 59.3-269.9 136.6C105.3 295.5 7.4 391.2 7.4 508.9c0 119.1 100.2 215.6 223.7 215.6 5.3 0 10.6-0.2 15.8-0.5 14.4 80.5 130.4 143.2 271.3 143.2 135.9 0 248.6-58.3 269.4-134.6 1.7 0 3.4 0.1 5.1 0.1 123.6 0 223.7-96.5 223.7-215.6s-100-215.7-223.6-215.7z" fill="#F6CD50" p-id="3900"></path><path d="M435.9 431.5m-52.2 0a52.2 52.2 0 1 0 104.4 0 52.2 52.2 0 1 0-104.4 0Z" fill="#FAFAFA" p-id="3901"></path><path d="M588.1 431.5m-52.2 0a52.2 52.2 0 1 0 104.4 0 52.2 52.2 0 1 0-104.4 0Z" fill="#FAFAFA" p-id="3902"></path><path d="M435.9 431.5m-27.8 0a27.8 27.8 0 1 0 55.6 0 27.8 27.8 0 1 0-55.6 0Z" fill="#040000" p-id="3903"></path><path d="M601.9 407.4c-5.7 2.9-11.3 5.9-16.9 9-6.8 3.8-15.3 7.8-20.5 13.8-5.6 6.5 1.6 11.1 6.7 14.4 11.2 7.1 23.3 13 35.1 19 5.7 2.9 10.8-5.7 5.1-8.6-10.9-5.6-21.9-11.1-32.4-17.4-2.4-1.4-4.6-3.1-7-4.6 1 0.6-0.4-0.4-0.4-0.4-1.9-0.3-0.5 4.2 0.5 4.1-0.1 0-0.6 0.3 0.3-0.3 0.5-0.3 1-0.9 1.5-1.3 9.7-7.9 21.9-13.5 33.1-19.2 5.7-2.7 0.6-11.4-5.1-8.5zM406.6 547.6c11.5 14.4 27 26.7 42.7 36.3 32.2 19.8 71.2 27.2 107.6 15.4 29.5-9.6 54.6-29.1 75.5-51.6 10.8-11.6-6.6-29.1-17.5-17.5-9.4 10.1-19.5 19.7-30.8 27.7-4.6 3.2-9.3 6.2-14.2 8.9-5 2.8-9.9 5.1-14.1 6.7-4.6 1.7-9.3 3.2-14.1 4.4-2.2 0.5-4.4 1-6.6 1.4-1 0.2-2 0.3-2.9 0.5 2.6-0.4-2.1 0.2-2.5 0.3-4.1 0.4-8.3 0.5-12.5 0.4-2.2-0.1-4.4-0.2-6.6-0.4-1.1-0.1-2.2-0.2-3.2-0.3-1.5-0.2-1.4-0.2 0.1 0l-2.1-0.3c-7.8-1.3-15.4-3.4-22.8-6.2-0.9-0.4-1.8-0.7-2.8-1.1-3.1-1.2 2.3 1.1-0.7-0.3-1.5-0.7-2.9-1.3-4.4-2-3.7-1.8-7.2-3.7-10.8-5.8-5.7-3.4-11.1-7.1-16.4-11.1 3 2.3-1.1-0.9-1.8-1.5-1.1-0.9-2.1-1.7-3.1-2.6-2.1-1.8-4.2-3.7-6.3-5.6-4.4-4.1-8.7-8.4-12.4-13.1-4.2-5.2-13.1-4.3-17.5 0-5 5.1-4 12.2 0.2 17.4z" fill="#040000" p-id="3904"></path></svg>`
+            }
+        ]
+    },
+    {
+        name: '标记图标',
+        type: 'sign',
+        list: [
+            {
+                name: '1',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M809.728 429.696a18.901333 18.901333 0 0 0-15.274667-12.885333l-183.466666-26.624-81.92-166.272a18.901333 18.901333 0 0 0-34.005334 0l-81.92 166.272-183.594666 26.624a19.029333 19.029333 0 0 0-10.496 32.298666l132.693333 129.536-31.274667 182.741334a18.816 18.816 0 0 0 27.477334 19.84l164.138666-86.186667 164.096 86.058667a18.773333 18.773333 0 1 0 27.434667-19.84l-31.36-182.741334 132.693333-129.408a18.901333 18.901333 0 0 0 4.778667-19.413333z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '2',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M644.565333 306.901333c32.128 0 65.834667-5.76 101.077334-17.237333a17.066667 17.066667 0 0 1 22.357333 16.213333v328.32c-1.109333 0.768 10.325333 27.093333-99.370667 19.84-109.653333-7.210667-181.76-45.098667-246.869333-45.098666-65.152 0-49.322667 2.688-74.154667 8.405333v168.064a24.746667 24.746667 0 0 1-24.490666 25.258667 22.528 22.528 0 0 1-17.28-7.253334 24.149333 24.149333 0 0 1-7.168-18.005333V281.258667C299.776 280.490667 328.106667 256 421.76 256s164.437333 50.901333 222.805333 50.901333z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '3',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M524.074667 225.408l274.517333 274.517333a17.066667 17.066667 0 0 1 0 24.149334l-274.517333 274.517333a17.066667 17.066667 0 0 1-24.149334 0l-274.517333-274.517333a17.066667 17.066667 0 0 1 0-24.149334l274.517333-274.517333a17.066667 17.066667 0 0 1 24.149334 0z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '4',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M317.866667 300.8h388.266666c9.386667 0 17.066667 7.68 17.066667 17.066667v388.266666a17.066667 17.066667 0 0 1-17.066667 17.066667h-388.266666a17.066667 17.066667 0 0 1-17.066667-17.066667v-388.266666c0-9.386667 7.68-17.066667 17.066667-17.066667z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '5',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M498.346667 279.082667L248.789333 701.44a15.829333 15.829333 0 0 0 13.653334 23.893333h499.114666a15.829333 15.829333 0 0 0 13.653334-23.893333l-249.6-422.357333a15.829333 15.829333 0 0 0-27.264 0z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '6',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M497.749333 798.549333l-31.445333-28.501333C313.941333 631.722667 213.333333 540.501333 213.333333 428.8a160.981333 160.981333 0 0 1 162.730667-162.730667c51.498667 0 100.906667 23.978667 133.12 61.696a177.536 177.536 0 0 1 133.162667-61.696 160.981333 160.981333 0 0 1 162.730666 162.730667c0 111.701333-100.608 202.965333-252.970666 341.333333l-31.445334 28.458667a17.066667 17.066667 0 0 1-22.912 0z" fill="#FFFFFF"></path><path d="M634.538667 487.808L555.050667 426.24 507.306667 256a201.002667 201.002667 0 0 0-23.594667 20.394667l-0.256-0.256L525.653333 426.666667l-133.290666 59.946666a14.08 14.08 0 0 0-8.021334 15.957334l28.757334 126.378666a14.208 14.208 0 0 0 27.733333-6.229333l-26.24-115.114667 126.037333-56.704 76.416 59.136a14.250667 14.250667 0 0 0 19.968-2.474666 14.08 14.08 0 0 0-2.474666-19.797334z" fill="#6D768D"></path></svg>`
+            },
+            {
+                name: '7',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M497.749333 798.549333l-31.445333-28.501333C313.941333 631.722667 213.333333 540.501333 213.333333 428.8a160.981333 160.981333 0 0 1 162.730667-162.730667c51.498667 0 100.906667 23.978667 133.12 61.696a177.536 177.536 0 0 1 133.162667-61.696 160.981333 160.981333 0 0 1 162.730666 162.730667c0 111.701333-100.608 202.965333-252.970666 341.333333l-31.445334 28.458667a17.066667 17.066667 0 0 1-22.912 0z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '8',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M374.656 273.194667c5.973333 4.48 12.117333 9.6 18.346667 15.36 6.272 5.717333 11.904 12.373333 16.896 19.84 2.517333 4.010667 5.504 8.490667 9.002666 13.482666a529.493333 529.493333 0 0 1 20.266667 32.213334h155.221333a169.813333 169.813333 0 0 0 9.770667-15.744c2.474667-4.48 5.248-8.96 8.234667-13.482667a460.842667 460.842667 0 0 1 23.253333-31.829333c4.992-6.229333 12.245333-12.373333 21.76-18.346667a34.261333 34.261333 0 0 0 10.112-9.728 31.274667 31.274667 0 0 0 5.248-11.989333 18.56 18.56 0 0 0-1.536-11.605334 17.664 17.664 0 0 0-10.112-8.618666c-4.48-1.493333-8.362667-2.005333-11.605333-1.493334a46.933333 46.933333 0 0 0-9.770667 2.602667c-3.242667 1.28-6.613333 2.645333-10.112 4.138667a32.426667 32.426667 0 0 1-12.757333 2.261333 26.026667 26.026667 0 0 1-12.373334-2.645333 45.653333 45.653333 0 0 1-8.96-6.357334l-8.661333-7.850666a30.336 30.336 0 0 0-11.989333-6.4c-9.984-3.968-18.005333-4.693333-24.021334-2.218667-5.973333 2.474667-11.946667 6.485333-17.962666 11.946667a88.618667 88.618667 0 0 1-11.989334 10.496 7.338667 7.338667 0 0 1-3.754666 1.493333 46.165333 46.165333 0 0 1-8.277334-5.205333 71.808 71.808 0 0 1-7.125333-4.906667 37.973333 37.973333 0 0 1-6.4-6.357333c-3.968-3.968-9.941333-6.613333-17.92-7.850667a31.061333 31.061333 0 0 0-21.76 4.138667c-8.533333 5.461333-14.506667 10.069333-18.048 13.824a29.354667 29.354667 0 0 1-15.744 7.893333 23.978667 23.978667 0 0 1-13.098667-0.768 987.733333 987.733333 0 0 0-14.634666-4.48 80.725333 80.725333 0 0 0-14.250667-2.986667 16.768 16.768 0 0 0-11.989333 2.986667c-6.997333 5.461333-9.258667 12.074667-6.741334 19.84a34.56 34.56 0 0 0 13.482667 18.346667z" fill="#FFFFFF"></path><path d="M780.757333 545.152a219.306667 219.306667 0 0 0-19.882666-65.536 224.981333 224.981333 0 0 0-33.365334-49.792 430.336 430.336 0 0 0-37.12-37.12c-14.506667-11.946667-27.264-23.296-38.272-34.048a544.512 544.512 0 0 1-27.733333-28.842667 305.28 305.28 0 0 1-22.485333-26.197333h-168.746667c-6.485333 8.490667-13.994667 17.493333-22.485333 26.965333a360.96 360.96 0 0 1-26.24 28.074667c-10.538667 10.24-22.272 21.12-35.285334 32.597333a305.493333 305.493333 0 0 0-41.6 44.16 250.026667 250.026667 0 0 0-49.493333 117.589334 216.106667 216.106667 0 0 0 1.877333 70.4 220.586667 220.586667 0 0 0 75.349334 126.549333c21.248 18.005333 47.146667 32.597333 77.653333 43.818667 30.464 11.264 65.493333 16.853333 104.96 16.853333 38.528 0 72.874667-4.864 103.125333-14.592a265.045333 265.045333 0 0 0 78.378667-39.338667c21.973333-16.469333 39.594667-35.797333 52.864-58.026666 13.226667-22.186667 22.101333-45.824 26.624-70.784 4.992-30.421333 5.632-58.026667 1.877333-82.773334z" fill="#FFFFFF"></path><path d="M593.322667 647.509333a20.48 20.48 0 0 1-11.861334 3.2h-50.133333v14.165334c0 4.266667-1.792 8.362667-5.376 12.373333a15.914667 15.914667 0 0 1-13.952 5.333333 24.917333 24.917333 0 0 1-14.336-3.882666c-3.84-2.602667-5.973333-7.210667-6.4-13.824v-14.165334h-48.725333a17.792 17.792 0 0 1-11.818667-3.882666 10.24 10.24 0 0 1-3.968-9.6c0-4.266667 1.578667-7.68 4.693333-10.24a16.768 16.768 0 0 1 11.093334-3.925334h48.682666v-24.789333h-48.682666a15.573333 15.573333 0 0 1-11.52-4.266667 13.525333 13.525333 0 0 1-4.266667-9.941333 15.36 15.36 0 0 1 4.693333-10.624 14.72 14.72 0 0 1 11.093334-4.949333h48.682666l0.725334-14.890667a1053.568 1053.568 0 0 1-40.832-42.538667l-10.752-9.898666a41.216 41.216 0 0 1-6.442667-11.690667c-1.92-4.992-0.938667-10.069333 2.858667-15.274667a13.653333 13.653333 0 0 1 15.786666-3.84c6.186667 2.090667 11.221333 4.821333 15.018667 8.106667 1.92 2.389333 5.248 5.888 10.026667 10.666667l15.061333 14.848 19.328 19.157333 22.186667-20.565333a987.605333 987.605333 0 0 1 29.397333-25.514667 21.162667 21.162667 0 0 1 14.293333-5.674667c5.290667 0 9.557333 2.133333 12.928 6.4 6.186667 7.082667 3.84 15.36-7.168 24.789334a179.072 179.072 0 0 0-12.885333 12.373333c-5.76 5.973333-11.52 11.733333-17.194667 17.408-6.698667 7.082667-14.08 14.378667-22.186666 21.973333v13.44h46.506666c6.698667 0 11.605333 1.536 14.72 4.608a14.165333 14.165333 0 0 1 4.650667 10.282667c0 4.266667-1.450667 7.936-4.309333 11.008-2.858667 3.029333-7.637333 4.352-14.336 3.84l-46.506667 0.768-0.768 24.064h45.866667c13.354667 0 20.053333 4.992 20.053333 14.933333 0.469333 4.693333-0.853333 8.106667-3.925333 10.24z" fill="#6D768D"></path></svg>`
+            },
+            {
+                name: '9',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M512 213.333333l234.666667 341.333334h-128v213.333333h-213.333334v-213.333333h-128L512 213.333333z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '10',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M533.333333 810.666667L298.666667 469.333333h128V256h213.333333v213.333333h128l-234.666667 341.333334z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '11',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M213.333333 533.333333L554.666667 298.666667v128h213.333333v213.333333h-213.333333v128l-341.333334-234.666667z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '12',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M810.666667 533.333333L469.333333 768v-128H256v-213.333333h213.333333V298.666667l341.333334 234.666666z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '13',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M0 512c0 282.752 229.248 512 512 512s512-229.248 512-512S794.752 0 512 0 0 229.248 0 512z" fill="#6D768D"></path><path d="M571.349333 508.586667l162.389334-162.346667a44.330667 44.330667 0 1 0-62.72-62.72l-162.389334 162.389333-162.517333-162.389333a44.330667 44.330667 0 1 0-62.72 62.72l162.389333 162.389333-162.389333 162.474667a44.330667 44.330667 0 1 0 62.72 62.72l162.389333-162.346667 162.389334 162.389334a44.330667 44.330667 0 1 0 62.72-62.72l-162.261334-162.56z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '14',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 0C233.386667 0 0 225.877333 0 512s225.877333 512 512 512 512-225.877333 512-512S790.613333 0 512 0z" fill="#6D768D"></path><path d="M726.144 311.210667l-277.333333 305.066666-124.8-124.8c-13.866667-13.866667-41.6-13.866667-55.466667 0-13.866667 13.866667-13.866667 41.6 0 55.466667l159.445333 152.533333c13.866667 13.866667 41.6 13.866667 55.466667 0l305.066667-332.8c13.866667-13.866667 13.866667-41.6 0-55.466666-20.778667-13.866667-48.512-13.866667-62.378667 0z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '15',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M541.952 755.626667a40.618667 40.618667 0 0 1-29.824 12.373333 41.344 41.344 0 0 1-30.122667-12.373333 40.106667 40.106667 0 0 1-12.672-30.122667c0-11.605333 4.096-21.845333 12.672-30.122667a40.405333 40.405333 0 0 1 30.122667-12.714666c11.605333 0 21.546667 4.138667 29.824 12.714666a40.32 40.32 0 0 1 12.714667 30.122667c0 11.861333-4.096 21.76-12.714667 30.122667zM450.986667 241.28A77.866667 77.866667 0 0 1 512.256 213.333333c24.874667 0 45.354667 8.917333 61.354667 27.946667 15.488 18.432 23.722667 41.685333 23.722666 69.674667 0 23.765333-33.152 200.533333-44.672 329.045333h-80.128C463.146667 511.402667 426.666667 334.677333 426.666667 310.954667c0-27.392 8.277333-50.645333 24.32-69.674667z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '16',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.794667 0 512 0z" fill="#6D768D"></path><path d="M490.666667 682.666667a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m13.994666-490.752c61.397333 0 112.341333 14.634667 153.002667 43.946666 40.533333 29.269333 60.885333 72.618667 60.885333 130.133334 0 35.242667-12.373333 64.938667-29.952 89.045333-10.282667 14.677333-33.664 33.408-62.890666 56.192l-32.426667 22.357333c-15.701333 12.202667-29.696 26.453333-34.858667 42.666667-1.706667 5.546667-3.072 14.677333-3.968 24.533333-0.426667 4.949333-4.864 15.018667-15.232 15.018667h-83.328c-13.568 0-15.957333-10.581333-15.744-15.786667 1.493333-34.005333 4.608-64.213333 18.474667-80.469333 28.074667-32.896 91.904-73.813333 91.904-73.813333a104.106667 104.106667 0 0 0 23.552-24.021334c10.837333-14.933333 19.797333-31.317333 19.797333-49.237333 0-20.565333-6.016-39.338667-18.090666-56.32-12.032-16.938667-34.090667-25.386667-66.005334-25.386667-31.445333 0-53.76 10.410667-66.901333 31.274667-9.685333 15.445333-15.786667 29.610667-18.346667 45.013333-0.853333 5.461333-4.394667 16.981333-16.042666 16.981334H327.210667c-17.322667 0-21.12-11.221333-20.650667-16.64 6.272-68.138667 32.896-114.688 80-144.597334 32-20.565333 71.381333-30.890667 118.101333-30.890666z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '17',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M336.256 410.026667H253.312a40.021333 40.021333 0 0 0-39.850667 43.264l23.296 278.101333c1.706667 20.693333 19.072 36.608 39.850667 36.608h59.648c11.050667 0 20.010667-8.96 20.010667-19.968v-318.037333a19.968 19.968 0 0 0-20.010667-19.968z m434.432 0h-178.944C653.312 182.314667 548.949333 170.666667 548.949333 170.666667c-44.288 0-35.114667 34.986667-38.442666 40.832 0 84.48-68.010667 155.093333-101.034667 184.362666a39.552 39.552 0 0 0-13.226667 29.653334v322.56c0 11.008 8.96 19.925333 20.010667 19.925333h233.728c30.378667 0 58.154667-17.152 71.68-44.373333 18.176-36.736 40.448-90.112 54.656-133.973334 13.781333-42.410667 26.24-94.976 33.578667-131.968a39.850667 39.850667 0 0 0-39.253334-47.658666z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '18',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M796.16 413.909333c-31.146667-0.298667-115.626667-0.085333-146.858667-0.085333h-158.464c8.533333-7.68 15.914667-14.506667 23.594667-20.906667 29.781333-24.874667 25.813333-71.082667-14.208-88.874666-22.954667-10.24-44.970667-5.632-64 11.52-34.944 31.274667-69.632 62.677333-104.277333 93.994666a15.488 15.488 0 0 1-11.178667 4.437334c-11.221333-0.085333-26.88-0.128-46.933333-0.170667a17.066667 17.066667 0 0 0-17.109334 17.066667L256 719.701333a17.066667 17.066667 0 0 0 17.066667 17.152l49.578666-0.085333c3.968 0 7.466667 0.768 10.88 2.602667 15.829333 8.832 31.701333 17.493333 47.616 26.24a18.133333 18.133333 0 0 0 9.301334 2.346666h168.405333c6.186667 0 11.946667-0.981333 17.834667-2.56 29.44-7.253333 40.021333-30.293333 38.528-52.565333-0.768-9.728-4.266667-18.346667-9.984-26.24 19.626667-5.76 35.114667-16.213333 42.112-36.096 7.125333-20.394667 1.621333-38.4-12.672-53.333333 28.16-19.754667 34.858667-44.672 18.645333-75.648h140.458667c6.570667 0 13.013333-0.597333 19.370666-2.645334 31.957333-9.813333 48.810667-42.88 35.626667-71.552-10.154667-22.186667-28.629333-33.152-52.608-33.450666z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '19',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M270.506667 413.909333c31.146667-0.298667 115.626667-0.085333 146.858666-0.085333h158.464c-8.533333-7.68-15.914667-14.506667-23.594666-20.906667-29.781333-24.874667-25.813333-71.082667 14.208-88.874666 22.954667-10.24 44.970667-5.632 64 11.52 34.944 31.274667 69.632 62.677333 104.277333 93.994666 3.413333 2.986667 6.528 4.437333 11.178667 4.437334 11.221333-0.085333 26.88-0.128 46.933333-0.170667a17.066667 17.066667 0 0 1 17.109333 17.066667l0.682667 288.853333a17.066667 17.066667 0 0 1-17.066667 17.152l-49.578666-0.085333a22.101333 22.101333 0 0 0-10.88 2.602666c-15.829333 8.832-31.701333 17.493333-47.616 26.24a18.133333 18.133333 0 0 1-9.301334 2.346667h-168.405333a68.693333 68.693333 0 0 1-17.834667-2.56c-29.44-7.253333-40.021333-30.293333-38.528-52.565333 0.768-9.728 4.266667-18.346667 9.984-26.24-19.626667-5.76-35.114667-16.213333-42.112-36.096-7.125333-20.394667-1.621333-38.4 12.672-53.333334-28.16-19.754667-34.858667-44.672-18.645333-75.648H272.853333c-6.570667 0-13.013333-0.597333-19.370666-2.645333-31.957333-9.813333-48.810667-42.88-35.626667-71.552 10.154667-22.186667 28.629333-33.152 52.608-33.450667z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '20',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M667.733333 480.128H400v-111.36a97.706667 97.706667 0 0 1 97.621333-97.621333 97.706667 97.706667 0 0 1 97.578667 97.621333 28.885333 28.885333 0 0 0 57.813333 0A155.605333 155.605333 0 0 0 497.621333 213.333333a155.605333 155.605333 0 0 0-155.392 155.434667v111.36h-14.677333A28.885333 28.885333 0 0 0 298.666667 509.013333v292.010667a28.885333 28.885333 0 0 0 28.885333 28.885333h340.138667a28.885333 28.885333 0 0 0 28.928-28.885333V509.013333a28.885333 28.885333 0 0 0-28.928-28.885333z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '21',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M400.042667 437.461333v-111.36a97.706667 97.706667 0 0 1 97.621333-97.621333 97.706667 97.706667 0 0 1 97.578667 97.621333 28.885333 28.885333 0 0 0 57.813333 0A155.605333 155.605333 0 0 0 497.621333 170.666667a155.605333 155.605333 0 0 0-155.392 155.434666v111.36h-14.677333A28.885333 28.885333 0 0 0 298.666667 466.346667v292.010666a28.885333 28.885333 0 0 0 28.885333 28.885334h340.138667a28.885333 28.885333 0 0 0 28.928-28.885334V466.346667a28.885333 28.885333 0 0 0-28.928-28.885334H400.042667z" fill="#FFFFFF"></path><path d="M595.242667 437.461333v-111.36a97.706667 97.706667 0 0 0-97.621334-97.621333 97.706667 97.706667 0 0 0-97.578666 97.621333 28.885333 28.885333 0 0 1-57.813334 0A155.605333 155.605333 0 0 1 497.621333 170.666667a155.605333 155.605333 0 0 1 155.434667 155.434666v111.36h14.634667c16 0 28.928 12.928 28.928 28.885334v292.010666a28.885333 28.885333 0 0 1-28.928 28.885334H327.552A28.885333 28.885333 0 0 1 298.666667 758.357333V466.346667c0-15.957333 12.928-28.885333 28.885333-28.885334h267.690667z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '22',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M511.999787 512.000213m-511.999787 0a511.999787 511.999787 0 1 0 1023.999573 0 511.999787 511.999787 0 1 0-1023.999573 0Z" fill="#6D768D"></path><path d="M381.354508 364.586941c0 54.015977 29.013321 103.935957 75.946635 130.986613a152.53327 152.53327 0 0 0 151.935936 0 151.12527 151.12527 0 0 0 75.946636-130.986613A151.594604 151.594604 0 0 0 533.333111 213.333671a151.594604 151.594604 0 0 0-151.89327 151.25327zM660.479725 498.901552a185.258589 185.258589 0 0 1-127.146614 50.346646c-49.066646 0-93.866628-19.199992-127.06128-50.346646C317.141201 544.853533 255.999893 637.440161 255.999893 744.106783c0 13.183995 10.709329 23.850657 23.978657 23.850657h506.709122a23.893323 23.893323 0 0 0 23.978657-23.893323c0-106.538622-61.098641-199.25325-150.186604-245.205232z" fill="#FFFFFF"></path></svg>`
+            },
+            {
+                name: '23',
+                icon: `<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M445.610667 401.578667a129.322667 129.322667 0 1 0 258.645333 0 129.322667 129.322667 0 0 0-258.645333 0z m237.568 114.901333a157.354667 157.354667 0 0 1-216.362667 0 236.373333 236.373333 0 0 0-127.957333 209.706667c0 11.264 9.130667 20.394667 20.394666 20.394666h431.402667a20.394667 20.394667 0 0 0 20.394667-20.394666 236.373333 236.373333 0 0 0-127.872-209.706667zM409.813333 401.578667c0-40.362667 14.592-77.397333 38.698667-106.112a112.725333 112.725333 0 0 0-29.013333-3.925334 112.64 112.64 0 0 0-112.426667 112.469334 112.64 112.64 0 0 0 144.853333 107.648 164.693333 164.693333 0 0 1-42.112-110.08z m-18.602666 136.704a136.533333 136.533333 0 0 1-65.706667-34.474667 205.44 205.44 0 0 0-111.232 182.4c0 9.813333 7.936 17.706667 17.706667 17.706667H303.36a273.621333 273.621333 0 0 1 87.893333-165.632z" fill="#FFFFFF"></path></svg>`
+            }
+        ]
+    }
+]
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-06-23 22:36:56 
+ * @Desc: 获取nodeIconList icon内容 
+ */
+const getNodeIconListIcon = (name) => {
+    let arr = name.split('_')
+    let typeData = nodeIconList.find((item) => {
+        return item.type === arr[0];
+    })
+    return typeData.list.find((item) => {
+        return item.name === arr[1]
+    }).icon;
+}
+
+export default {
+    hyperlink,
+    note,
+    nodeIconList,
+    getNodeIconListIcon
+}
--- a/src/package/mind-map/src/themes/blueSky.js
+++ b/src/package/mind-map/src/themes/blueSky.js
@@ -19,7 +19,7 @@ export default merge(defaultTheme, {
        }
    },
    // 二级节点样式
-    secondLevel: {
+    second: {
        fillColor: 'rgb(238, 243, 246)',
        color: '#333',
        borderColor: 'rgb(115, 161, 191)',
--- a/src/package/mind-map/src/themes/brainImpairedPink.js
+++ b/src/package/mind-map/src/themes/brainImpairedPink.js
@@ -19,7 +19,7 @@ export default merge(defaultTheme, {
        }
    },
    // 二级节点样式
-    secondLevel: {
+    second: {
        fillColor: 'rgb(246, 238, 242)',
        color: '#333',
        borderColor: 'rgb(191, 115, 148)',
--- a/src/package/mind-map/src/themes/classic.js
+++ b/src/package/mind-map/src/themes/classic.js
@@ -29,7 +29,7 @@ export default merge(defaultTheme, {
        }
    },
    // 二级节点样式
-    secondLevel: {
+    second: {
        fillColor: 'rgb(164, 197, 192)',
        borderColor: 'transparent',
        color: '#333',
--- a/src/package/mind-map/src/themes/classic2.js
+++ b/src/package/mind-map/src/themes/classic2.js
@@ -24,7 +24,7 @@ export default merge(defaultTheme, {
        }
    },
    // 二级节点样式
-    secondLevel: {
+    second: {
        fillColor: 'rgb(241, 242, 241)',
        borderColor: 'transparent',
        color: '#1a1a1a',
--- a/src/package/mind-map/src/themes/classic3.js
+++ b/src/package/mind-map/src/themes/classic3.js
@@ -26,7 +26,7 @@ export default merge(defaultTheme, {
        }
    },
    // 二级节点样式
-    secondLevel: {
+    second: {
        fillColor: 'rgb(255, 245, 214)',
        borderColor: 'rgb(249, 199, 84)',
        borderWidth: 1,
--- a/simple-mind-map/src/themes/classicBlue.js
+++ b/simple-mind-map/src/themes/classicBlue.js
@@ -0,0 +1,43 @@
+import defaultTheme from './default';
+import merge from 'deepmerge';
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-11 15:22:18 
+ * @Desc: 经典蓝
+ */
+export default merge(defaultTheme, {
+    // 连线的颜色
+    lineColor: 'rgb(51, 51, 51)',
+    // 连线的粗细
+    lineWidth: 2,
+    // 背景颜色
+    backgroundColor: 'rgb(239, 248, 250)',
+    // 根节点样式
+    root: {
+        fillColor: 'rgb(255, 255, 255)',
+        color: '#222',
+        active: {
+            borderColor: 'rgb(94, 199, 248)'
+        }
+    },
+    // 二级节点样式
+    second: {
+        fillColor: 'rgb(255, 255, 255)',
+        color: '#222',
+        borderColor: 'rgb(255, 255, 255)',
+        borderWidth: 1,
+        fontSize: 14,
+        active: {
+            borderColor: 'rgb(94, 199, 248)'
+        }
+    },
+    // 三级及以下节点样式
+    node: {
+        fontSize: 12,
+        color: '#333',
+        active: {
+            borderColor: 'rgb(94, 199, 248)'
+        }
+    }
+})
--- a/simple-mind-map/src/themes/classicGreen.js
+++ b/simple-mind-map/src/themes/classicGreen.js
@@ -0,0 +1,41 @@
+import defaultTheme from './default';
+import merge from 'deepmerge';
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-11 15:22:18 
+ * @Desc: 经典绿
+ */
+export default merge(defaultTheme, {
+    // 连线的颜色
+    lineColor: 'rgb(123, 199, 120)',
+    // 背景颜色
+    backgroundColor: 'rgb(236, 245, 231)',
+    // 根节点样式
+    root: {
+        fillColor: 'rgb(253, 244, 217)',
+        color: '#222',
+        active: {
+            borderColor: 'rgb(94, 199, 248)'
+        }
+    },
+    // 二级节点样式
+    second: {
+        fillColor: 'rgb(253, 244, 217)',
+        color: '#222',
+        borderColor: 'rgb(242, 200, 104)',
+        borderWidth: 1,
+        fontSize: 14,
+        active: {
+            borderColor: 'rgb(94, 199, 248)'
+        }
+    },
+    // 三级及以下节点样式
+    node: {
+        fontSize: 12,
+        color: '#333',
+        active: {
+            borderColor: 'rgb(94, 199, 248)'
+        }
+    }
+})
--- a/src/package/mind-map/src/themes/dark.js
+++ b/src/package/mind-map/src/themes/dark.js
@@ -24,7 +24,7 @@ export default merge(defaultTheme, {
        }
    },
    // 二级节点样式
-    secondLevel: {
+    second: {
        fillColor: 'rgb(55, 56, 58)',
        color: 'rgb(147,148,149)',
        fontSize: 18,
--- a/simple-mind-map/src/themes/dark2.js
+++ b/simple-mind-map/src/themes/dark2.js
@@ -0,0 +1,46 @@
+import defaultTheme from './default';
+import merge from 'deepmerge';
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-11 15:22:18 
+ * @Desc: 暗色2
+ */
+export default merge(defaultTheme, {
+    // 连线的颜色
+    lineColor: 'rgb(75, 81, 78)',
+    lineWidth: 3,
+    // 背景颜色
+    backgroundColor: 'rgb(27, 31, 34)',
+    // 根节点样式
+    root: {
+        fillColor: 'rgb(36, 179, 96)',
+        color: '#fff',
+        borderColor: '',
+        borderWidth: 0,
+        active: {
+            borderColor: 'rgb(254, 199, 13)',
+            borderWidth: 3,
+        }
+    },
+    // 二级节点样式
+    second: {
+        fillColor: 'rgb(254, 199, 13)',
+        color: 'rgb(0, 0, 0)',
+        borderColor: '',
+        borderWidth: 0,
+        fontSize: 14,
+        active: {
+            borderColor: 'rgb(36, 179, 96)',
+            borderWidth: 2
+        }
+    },
+    // 三级及以下节点样式
+    node: {
+        fontSize: 12,
+        color: 'rgb(204, 204, 204)',
+        active: {
+            borderColor: 'rgb(254, 199, 13)'
+        }
+    }
+})
--- a/src/package/mind-map/src/themes/default.js
+++ b/src/package/mind-map/src/themes/default.js
@@ -5,12 +5,12 @@
 */
 export default {
    // 节点内边距
-    paddingX: 20,
-    paddingY: 10,
+    paddingX: 15,
+    paddingY: 5,
    // 图片显示的最大宽度
-    imgMaxWidth: 200,
+    imgMaxWidth: 100,
    // 图片显示的最大高度
-    imgMaxHeight: 200,
+    imgMaxHeight: 100,
    // icon的大小
    iconSize: 20,
    // 连线的粗细
@@ -20,9 +20,9 @@ export default {
    // 背景颜色
    backgroundColor: '#fafafa',
    // 背景图片
-    backgroundImage: '',
+    backgroundImage: 'none',
    // 背景重复
-    backgroundRepeat: 'none',
+    backgroundRepeat: 'no-repeat',
    // 根节点样式
    root: {
        fillColor: '#549688',
@@ -31,6 +31,7 @@ export default {
        fontSize: 16,
        fontWeight: 'bold',
        fontStyle: 'normal',
+        lineHeight: 1.5,
        borderColor: 'transparent',
        borderWidth: 0,
        borderDasharray: 'none',
@@ -43,7 +44,7 @@ export default {
        }
    },
    // 二级节点样式
-    secondLevel: {
+    second: {
        marginX: 100,
        marginY: 40,
        fillColor: '#fff',
@@ -52,6 +53,7 @@ export default {
        fontSize: 16,
        fontWeight: 'noraml',
        fontStyle: 'normal',
+        lineHeight: 1.5,
        borderColor: '#549688',
        borderWidth: 1,
        borderDasharray: 'none',
@@ -65,14 +67,15 @@ export default {
    },
    // 三级及以下节点样式
    node: {
-        marginX: 60,
-        marginY: 40,
+        marginX: 50,
+        marginY: 0,
        fillColor: 'transparent',
        fontFamily: '微软雅黑, Microsoft YaHei',
        color: '#6a6d6c',
        fontSize: 14,
        fontWeight: 'noraml',
        fontStyle: 'normal',
+        lineHeight: 1.5,
        borderColor: 'transparent',
        borderWidth: 0,
        borderRadius: 5,
--- a/src/package/mind-map/src/themes/earthYellow.js
+++ b/src/package/mind-map/src/themes/earthYellow.js
@@ -19,7 +19,7 @@ export default merge(defaultTheme, {
        }
    },
    // 二级节点样式
-    secondLevel: {
+    second: {
        fillColor: 'rgb(246, 242, 238)',
        color: '#333',
        borderColor: 'rgb(191, 147, 115)',
--- a/src/package/mind-map/src/themes/freshGreen.js
+++ b/src/package/mind-map/src/themes/freshGreen.js
@@ -16,7 +16,7 @@ export default merge(defaultTheme, {
        fillColor: '#1fb27d'
    },
    // 二级节点样式
-    secondLevel: {
+    second: {
        fillColor: '#fff',
        color: '#565656',
        borderColor: 'transparent',
--- a/src/package/mind-map/src/themes/freshRed.js
+++ b/src/package/mind-map/src/themes/freshRed.js
@@ -19,7 +19,7 @@ export default merge(defaultTheme, {
        }
    },
    // 二级节点样式
-    secondLevel: {
+    second: {
        fillColor: 'rgb(246, 238, 238)',
        color: '#333',
        borderColor: 'rgb(191, 115, 115)',
--- a/simple-mind-map/src/themes/gold.js
+++ b/simple-mind-map/src/themes/gold.js
@@ -0,0 +1,46 @@
+import defaultTheme from './default';
+import merge from 'deepmerge';
+
+/** 
+ * @Author: 王林 
+ * @Date: 2021-04-11 15:22:18 
+ * @Desc: 金色vip
+ */
+export default merge(defaultTheme, {
+    // 连线的颜色
+    lineColor: 'rgb(51, 56, 62)',
+    lineWidth: 3,
+    // 背景颜色
+    backgroundColor: '#fff',
+    // 根节点样式
+    root: {
+        fillColor: 'rgb(51, 56, 62)',
+        color: 'rgb(247, 208, 160)',
+        borderColor: '',
+        borderWidth: 0,
+        active: {
+            borderColor: 'rgb(247, 208, 160)',
+            borderWidth: 3,
+        }
+    },
+    // 二级节点样式
+    second: {
+        fillColor: 'rgb(239, 209, 176)',
+        color: 'rgb(81, 58, 42)',
+        borderColor: '',
+        borderWidth: 0,
+        fontSize: 14,
+        active: {
+            borderColor: 'rgb(51, 56, 62)',
+            borderWidth: 2
+        }
+    },
+    // 三级及以下节点样式
+    node: {
+        fontSize: 12,
+        color: '#222',
+        active: {
+            borderColor: 'rgb(0, 192, 184)'
+        }
+    }
+})
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
wanglin	dc3c91270c	更新版本	2022-07-30 08:21:43 +08:00
街角小林	71ac739964	Merge pull request #16 from harris2012/patch-2 fix typo	2022-07-29 21:59:53 +08:00
街角小林	eae5dc5854	Merge pull request #15 from harris2012/patch-1 Update Node.js	2022-07-29 21:57:05 +08:00
Harris Zhang	c45ceac7dc	fix typo	2022-07-29 17:55:20 +08:00
Harris Zhang	3d8702be8a	Update Node.js	2022-07-29 11:29:25 +08:00
街角小林	084dd9fd84	Merge pull request #13 from harris2012/patch-1 Update index.js	2022-07-26 21:15:41 +08:00
Harris Zhang	0c6c68820f	Update index.js	2022-07-26 19:12:47 +08:00
wanglin25	f5ff479f47	fix:1.节点图标不能删除的问题；2.工具按钮置灰仍然可以点击的问题	2022-06-28 19:55:31 +08:00
wanglin25	e9722efe93	增加只读模式	2022-06-08 14:30:45 +08:00
wanglin	db1f9c04c1	修改README	2022-05-10 23:09:54 +08:00
wanglin	b3e6412dbc	发布0.1.6版本	2022-05-10 23:08:02 +08:00
wanglin25	f58828469c	打包	2022-05-09 14:31:22 +08:00
wanglin25	cf7a92d9c7	节点备注支持markdown及富文本、修复不能选中文字的问题	2022-05-09 14:24:11 +08:00
wanglin25	ec0d021e92	修复节点标注在节点激活后无法隐藏问题	2022-05-09 11:31:05 +08:00
wanglin25	25a2d919fb	修复超链接、备注、标签等文字编辑时返回键和回车键与思维导图快捷键冲突的问题	2022-05-09 11:03:56 +08:00
wanglin	c3f4e2b797	增加版本号	2021-11-25 22:25:26 +08:00
wanglin25	a0c07522f9	新增支持节点拖拽	2021-11-25 16:06:18 +08:00
wanglin25	ca0cbdf009	'状态数据支持保存激活状态、视图状态（拖动位置、缩放值）'	2021-11-22 19:59:21 +08:00
wanglin	6263a49903	修复存在激活节点时设置主题存在的问题	2021-08-05 22:29:02 +08:00
wanglin	dce133f8f0	升级版本	2021-08-05 08:09:48 +08:00
wanglin	7f4f4e2fe0	增加快捷键功能	2021-08-05 00:06:27 +08:00
wanglin	4e4ade5c31	修复回退问题	2021-08-04 23:45:05 +08:00
wanglin	5423b42e9d	新增导出为json；优化一些细节	2021-08-04 07:26:01 +08:00
wanglin	9555375907	修改版本号及package.json	2021-08-01 11:58:08 +08:00
wanglin	cc19ce168b	增加本地存储功能	2021-08-01 10:49:57 +08:00
wanglin25	e324813eae	修复删除节点和节点编辑时的删除冲突问题	2021-07-27 14:17:58 +08:00
wanglin25	08a7ba380a	'修改文章与打包'	2021-07-22 19:06:51 +08:00
wanglin25	dd2bfbcf93	'打包'	2021-07-22 14:13:49 +08:00
wanglin25	4ae5c914ca	'打包'	2021-07-22 09:36:50 +08:00
wanglin	6f49577794	优化	2021-07-22 08:03:00 +08:00
wanglin	43a3dd97c7	修改文章	2021-07-21 22:50:46 +08:00
wanglin25	7226e40a6c	'完成文章'	2021-07-21 20:24:37 +08:00
wanglin25	9f090a4474	文章写作中	2021-07-20 20:18:03 +08:00
wanglin	bf5298ab2f	文章	2021-07-20 07:48:22 +08:00
wanglin	ffe4fedbc3	修改文章	2021-07-19 07:39:34 +08:00
wanglin	07ad92e93a	添加图片	2021-07-18 22:47:03 +08:00
wanglin	5a004e40de	优化与文档编写	2021-07-18 22:27:34 +08:00
wanglin	8664bcc00b	完善开发文档	2021-07-16 19:33:01 +08:00
wanglin	d00f56c7f1	优化代码	2021-07-16 13:58:48 +08:00
wanglin	4ddce22076	基本完成	2021-07-16 13:42:37 +08:00
wanglin25	fdf4d51a1e	'右键功能开发中'	2021-07-15 17:46:36 +08:00
wanglin25	a9ebe50fff	Merge branch 'main' of https://github.com/wanglin2/mind-map into main	2021-07-15 09:46:53 +08:00
wanglin25	f8638088f3	'优化'	2021-07-15 09:46:27 +08:00
wanglin	081797e83b	右键菜单开发中	2021-07-14 23:57:36 +08:00
wanglin25	8adf5a7fb8	'修改样式'	2021-07-14 09:54:45 +08:00
wanglin25	194a920efa	'打包'	2021-07-14 09:34:13 +08:00
wanglin	6b3741741c	修改配置	2021-07-14 08:13:23 +08:00
wanglin	80a7e334e4	修改配置	2021-07-14 08:09:23 +08:00
wanglin	5d45d7accf	打包	2021-07-14 07:38:30 +08:00
wanglin	b893776f82	修改打包配置i	2021-07-14 07:34:06 +08:00
wanglin	115a0ac480	修改	2021-07-14 07:28:31 +08:00
wanglin	cb43292aa5	上传打包文件	2021-07-13 23:29:22 +08:00
wanglin	7b773bd9ad	修改README	2021-07-13 23:20:41 +08:00
wanglin25	38a1e25cc2	'基本完成'	2021-07-13 16:39:50 +08:00
wanglin	fd0c471f00	优化	2021-07-13 08:04:47 +08:00
wanglin	97f84933f8	新增主题	2021-07-12 22:49:22 +08:00
wanglin25	321fc69798	'完成部分结构'	2021-07-12 20:12:21 +08:00
wanglin25	af2910bec8	'优化及增加主题'	2021-07-12 14:55:50 +08:00
wanglin	9deb20f1ca	回退功能开发中	2021-07-12 07:56:38 +08:00
wanglin	0f4d614c4e	增加快捷键和全屏功能	2021-07-11 22:21:40 +08:00
wanglin	eeba3153ef	完成多选操作	2021-07-11 13:33:06 +08:00
wanglin	554dab56d3	完成基本逻辑	2021-07-10 22:06:45 +08:00
wanglin	da28f89c52	日常提交	2021-07-04 22:53:36 +08:00
wanglin	8b0c62430e	完成导出功能	2021-07-04 16:56:37 +08:00
wanglin	adcf77f60d	日常提交	2021-06-28 07:46:12 +08:00
wanglin	54ae4b3e26	提交	2021-06-26 00:03:39 +08:00
wanglin	b0929da054	完成节点内容设置及主题	2021-06-26 00:01:03 +08:00
wanglin2	1528c3d64b	Delete .DS_Store	2021-06-20 23:05:11 +08:00
wanglin2	ecc3ba8784	Delete .DS_Store	2021-06-20 23:04:56 +08:00
wanglin	947c4b2b44	完成节点内容布局	2021-06-20 23:03:23 +08:00
wanglin25	08c7768b18	修改忽略文件	2021-06-19 14:24:52 +08:00
wanglin25	efebe3f094	重构	2021-06-19 14:04:05 +08:00
				`@@ -0,0 +1 @@`
				<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/css/app.b793e592.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.c4887e17.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.384d822e.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.b793e592.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.384d822e.js"></script><script src="dist/js/app.c4887e17.js"></script></body></html>