'增加从excel导入的功能'

优化 地图组件卸载的时候把相关事件移除

README.md

@@ -1,4 +1,4 @@
-# web思维导图的简单实现
+# 一个简单&强大的Web思维导图
 
 ## 特性
 
@@ -93,7 +93,7 @@ npm run build
 
 # 安装
 
-> 当前仓库版本：0.2.14，当前npm版本：0.2.14
+> 当前仓库版本：0.2.16，当前npm版本：0.2.16
 
 ```bash
 npm i simple-mind-map
@@ -205,30 +205,32 @@ v0.1.7+。切换模式为只读或编辑。
 
 监听事件，事件列表：
 
-| 事件名称                      | 描述                    | 回调参数                                                  |
-| ------------------------- | --------------------- | ----------------------------------------------------- |
-| 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（缩放比例）                                           |
+| 事件名称                         | 描述                                       | 回调参数                                                     |
+| -------------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
+| 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（缩放比例）                                            |
+| node_img_dblclick（v0.2.15+）    | 节点内图片的双击事件                       | this（节点实例）、e（事件对象）                              |
+| node_tree_render_end（v0.2.16+） | 节点树渲染完毕事件                         |                                                              |
 
 #### emit(event, ...args)
 

index.html

@@ -1 +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/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.8e12b326.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.5b772a90.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.d724da21.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.8e12b326.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.d724da21.js"></script><script src="dist/js/app.5b772a90.js"></script></body></html>
+<!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/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.80644c67.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.faba1249.css" rel="preload" as="style"><link href="dist/js/app.e664c97c.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.0c7365d5.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.faba1249.css" rel="stylesheet"><link href="dist/css/app.80644c67.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.0c7365d5.js"></script><script src="dist/js/app.e664c97c.js"></script></body></html>

simple-mind-map/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",
+    "overrides": [
+    ],
+    "parserOptions": {
+        "parser": 'babel-eslint',
+        "ecmaVersion": 12,
+        "sourceType": "module",
+        "allowImportExportEverywhere": true
+    },
+    "rules": {
+    }
+}

simple-mind-map/.prettierignore

@@ -0,0 +1,10 @@
+src/assets
+*/.DS_Store
+dist
+example
+node_modules
+*.json
+*.md
+.eslintrc.js
+.prettierignore
+.prettierrc

simple-mind-map/.prettierrc

@@ -0,0 +1,5 @@
+semi: false
+singleQuote: true
+printWidth: 80
+trailingComma: 'none'
+arrowParens: 'avoid'

simple-mind-map/index.js

@@ -10,45 +10,41 @@ import BatchExecution from './src/BatchExecution'
 import Export from './src/Export'
 import Select from './src/Select'
 import Drag from './src/Drag'
-import MiniMap from './src/MiniMap';
-import {
-    layoutValueList
-} from './src/utils/constant'
-import {
-    SVG
-} from '@svgdotjs/svg.js'
+import MiniMap from './src/MiniMap'
+import { layoutValueList } from './src/utils/constant'
+import { SVG } from '@svgdotjs/svg.js'
 import xmind from './src/parse/xmind'
-import { simpleDeepClone } from './src/utils';
+import { simpleDeepClone } from './src/utils'
 
 // 默认选项配置
 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
-    /*
+  // 是否只读
+  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(){}
@@ -56,378 +52,378 @@ const defaultOpt = {
     */
 }
 
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-06 11:18:47 
- * @Desc: 思维导图 
+/**
+ * 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))
+  /**
+   * 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.el = this.opt.el
+    this.elRect = this.el.getBoundingClientRect()
 
-        // 画布宽高
-        this.width = this.elRect.width
-        this.height = this.elRect.height
+    // 画布宽高
+    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()
+    // 画布
+    this.svg = SVG().addTo(this.el).size(this.width, this.height)
+    this.draw = this.svg.group()
 
-        // 节点id
-        this.uid = 0
+    // 节点id
+    this.uid = 0
 
-        // 初始化主题
-        this.initTheme()
+    // 初始化主题
+    this.initTheme()
 
-        // 事件类
-        this.event = new Event({
-            mindMap: this
-        })
+    // 事件类
+    this.event = new Event({
+      mindMap: this
+    })
 
-        // 按键类
-        this.keyCommand = new KeyCommand({
-            mindMap: this
-        })
+    // 按键类
+    this.keyCommand = new KeyCommand({
+      mindMap: this
+    })
 
-        // 命令类
-        this.command = new Command({
-            mindMap: this
-        })
+    // 命令类
+    this.command = new Command({
+      mindMap: this
+    })
 
-        // 渲染类
-        this.renderer = new Render({
-            mindMap: this
-        })
+    // 渲染类
+    this.renderer = new Render({
+      mindMap: this
+    })
 
-        // 视图操作类
-        this.view = new View({
-            mindMap: this,
-            draw: this.draw
-        })
+    // 视图操作类
+    this.view = new View({
+      mindMap: this,
+      draw: this.draw
+    })
 
-        // 小地图类
-        this.miniMap = new MiniMap({
-            mindMap: this
-        })
+    // 小地图类
+    this.miniMap = new MiniMap({
+      mindMap: this
+    })
 
-        // 导出类
-        this.doExport = new Export({
-            mindMap: this
-        })
+    // 导出类
+    this.doExport = new Export({
+      mindMap: this
+    })
 
-        // 选择类
-        this.select = new Select({
-            mindMap: this
-        })
+    // 选择类
+    this.select = new Select({
+      mindMap: this
+    })
 
-        // 拖动类
-        this.drag = new Drag({
-            mindMap: this
-        })
+    // 拖动类
+    this.drag = new Drag({
+      mindMap: this
+    })
 
-        // 批量执行类
-        this.batchExecution = new BatchExecution()
+    // 批量执行类
+    this.batchExecution = new BatchExecution()
 
-        // 初始渲染
-        this.reRender()
-        setTimeout(() => {
-            this.command.addHistory()
-        }, 0)
+    // 初始渲染
+    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
+  }
 
-    /** 
-     * @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()
+    })
+  }
 
-    /** 
-     * 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-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-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: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: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-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: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-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-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-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-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]
+  }
 
-    /** 
-     * @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: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()
+  }
 
-    /** 
-     * 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-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-08-03 22:58:12 
-     * @Desc: 动态设置思维导图数据，纯节点数据
-     */
-    setData(data) {
-        this.execCommand('CLEAR_ACTIVE_NODE')
-        this.command.clearHistory()
-        this.renderer.renderTree = data
-        this.reRender()
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-09-21 16:39:13
+   * @Desc: 动态设置思维导图数据，包括节点数据、布局、主题、视图
+   */
+  setFullData(data) {
+    if (data.root) {
+      this.setData(data.root)
     }
+    if (data.layout) {
+      this.setLayout(data.layout)
+    }
+    if (data.theme) {
+      if (data.theme.template) {
+        this.setTheme(data.theme.template)
+      }
+      if (data.theme.config) {
+        this.setThemeConfig(data.theme.config)
+      }
+    }
+    if (data.view) {
+      this.view.setTransformData(data.view)
+    }
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-09-21 16:39:13 
-     * @Desc: 动态设置思维导图数据，包括节点数据、布局、主题、视图
-     */
-    setFullData(data) {
-        if (data.root) {
-            this.setData(data.root)
-        }
-        if (data.layout) {
-            this.setLayout(data.layout)
-        }
-        if (data.theme) {
-            if (data.theme.template) {
-                this.setTheme(data.theme.template)
-            }
-            if (data.theme.config) {
-                this.setThemeConfig(data.theme.config)
-            }
-        }
-        if (data.view) {
-            this.view.setTransformData(data.view)
-        }
+  /**
+   * javascript comment
+   * @Author: 王林
+   * @Date: 2022-09-24 14:42:07
+   * @Desc: 获取思维导图数据，节点树、主题、布局等
+   */
+  getData(withConfig) {
+    let nodeData = this.command.getCopyData()
+    let data = {}
+    if (withConfig) {
+      data = {
+        layout: this.getLayout(),
+        root: nodeData,
+        theme: {
+          template: this.getTheme(),
+          config: this.getCustomThemeConfig()
+        },
+        view: this.view.getTransformData()
+      }
+    } else {
+      data = nodeData
     }
+    return simpleDeepClone(data)
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林 
-     * @Date: 2022-09-24 14:42:07 
-     * @Desc: 获取思维导图数据，节点树、主题、布局等 
-     */
-    getData(withConfig) {
-        let nodeData = this.command.getCopyData()
-        let data = {}
-        if (withConfig) {
-            data = {
-                layout: this.getLayout(),
-                root: nodeData,
-                theme: {
-                    template: this.getTheme(),
-                    config: this.getCustomThemeConfig()
-                },
-                view: this.view.getTransformData()
-            }
-        } else {
-            data = nodeData
-        }
-        return simpleDeepClone(data)
-    }
+  /**
+   * @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-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
     }
+  }
 
-    /** 
-     * @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
     }
-
-    /** 
-     * 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)
+    this.opt.readonly = mode === 'readonly'
+    if (this.opt.readonly) {
+      // 取消当前激活的元素
+      this.renderer.clearAllActive()
     }
+    this.emit('mode_change', mode)
+  }
 }
 
 MindMap.xmind = xmind
 
-export default MindMap
+export default MindMap

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {
@@ -17,7 +17,10 @@
     "type": "git",
     "url": "https://github.com/wanglin2/mind-map"
   },
-  "scripts": {},
+  "scripts": {
+    "lint": "eslint src/",
+    "format": "prettier --write ."
+  },
   "module": "index.js",
   "main": "./dist/simpleMindMap.umd.min.js",
   "dependencies": {
@@ -35,5 +38,9 @@
     "mind-map",
     "mindMap",
     "MindMap"
-  ]
+  ],
+  "devDependencies": {
+    "eslint": "^8.25.0",
+    "prettier": "^2.7.1"
+  }
 }

simple-mind-map/src/BatchExecution.js

@@ -1,85 +1,85 @@
-/** 
- * @Author: 王林 
- * @Date: 2021-06-27 13:16:23 
- * @Desc: 在下一个事件循环里执行任务 
+/**
+ * @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)
+  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 () {
+    if (pending) return
+    pending = true
+    timerFunc(handle, 0)
+  }
 }
 
-
-/** 
- * @Author: 王林 
- * @Date: 2021-06-26 22:40:52 
- * @Desc: 批量执行 
+/**
+ * @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-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 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()
-        })
-    }
+  /**
+   * @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
+export default BatchExecution

simple-mind-map/src/Command.js

@@ -1,152 +1,160 @@
-import { copyRenderTree, simpleDeepClone } from './utils';
+import { copyRenderTree, simpleDeepClone } from './utils'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-05-04 13:10:06 
- * @Desc: 命令类 
+/**
+ * @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-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-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-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: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-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-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-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]);
-        }
+  /**
+   * @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]);
-        }
+  /**
+   * 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)
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2021-05-04 15:02:58
+   * @Desc: 获取渲染树数据副本
+   */
+  getCopyData() {
+    return copyRenderTree({}, this.mindMap.renderer.renderTree)
+  }
 }
 
-export default Command
+export default Command

simple-mind-map/src/Drag.js

@@ -1,317 +1,296 @@
-import {
-    bfsWalk,
-    throttle
-} from './utils'
+import { bfsWalk, throttle } from './utils'
 import Base from './layouts/Base'
 
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-11-23 17:38:55 
- * @Desc: 节点拖动类 
+/**
+ * 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()
-    }
+  /**
+   * @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
-    }
+  /**
+   * 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 || node.isGeneralization) {
-                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)
-    }
+  /**
+   * @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 || node.isGeneralization) {
+        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(e) {
-        if (!this.isMousedown) {
-            return;
-        }
-        this.isMousedown = false
-        let _nodeIsDrag = this.node.isDrag
-        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)
-        } else if (_nodeIsDrag) {
-            // 自定义位置
-            let {
-                x,
-                y
-            } = this.mindMap.toPos(e.clientX - this.offsetX, e.clientY - this.offsetY)
-            let {
-                scaleX,
-                scaleY,
-                translateX,
-                translateY
-            } = this.drawTransform
-            x = (x - translateX) / scaleX
-            y = (y - translateY) / scaleY
-            this.node.left = x
-            this.node.top = y
-            this.node.customLeft = x
-            this.node.customTop = y
-            this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y)
-            this.mindMap.render()
-        }
-        this.reset()
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2021-11-23 19:38:02
+   * @Desc: 鼠标松开事件
+   */
+  onMouseup(e) {
+    if (!this.isMousedown) {
+      return
     }
+    this.isMousedown = false
+    let _nodeIsDrag = this.node.isDrag
+    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)
+    } else if (_nodeIsDrag) {
+      // 自定义位置
+      let { x, y } = this.mindMap.toPos(
+        e.clientX - this.offsetX,
+        e.clientY - this.offsetY
+      )
+      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
+      x = (x - translateX) / scaleX
+      y = (y - translateY) / scaleY
+      this.node.left = x
+      this.node.top = y
+      this.node.customLeft = x
+      this.node.customTop = y
+      this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y)
+      this.mindMap.render()
+    }
+    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.styleLine(this.line, this.node)
-            // 同级位置占位符
-            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: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.styleLine(this.line, this.node)
+      // 同级位置占位符
+      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 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()
+  /**
+   * 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)
-        }
+  /**
+   * @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
+export default Drag

simple-mind-map/src/Event.js

@@ -1,182 +1,182 @@
 import EventEmitter from 'eventemitter3'
 
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-07 14:53:09 
- * @Desc: 事件类 
+/**
+ * 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 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 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 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)
-    }
+  /**
+   * 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-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)
-    }
+  /**
+   * @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: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: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: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)
+  /**
+   * 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)
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2021-07-10 22:34:13
+   * @Desc: 鼠标右键菜单事件
+   */
+  onContextmenu(e) {
+    e.preventDefault()
+    this.emit('contextmenu', e)
+  }
 }
 
-export default Event
+export default Event

simple-mind-map/src/Export.js

@@ -1,249 +1,265 @@
 import { imgToDataUrl, downloadFile } from './utils'
 import JsPDF from 'jspdf'
-import {
-    SVG,
-} from '@svgdotjs/svg.js'
+import { SVG } from '@svgdotjs/svg.js'
 const URL = window.URL || window.webkitURL || window
 
-/** 
- * @Author: 王林 
- * @Date: 2021-07-01 22:05:16 
- * @Desc: 导出类 
+/**
+ * @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-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 = '思维导图', ...args) {
-        if (this[type]) {
-            let result = await this[type](name, ...args)
-            if (isDownload && type !== 'pdf') {
-                downloadFile(result, name + '.' + type)
-            }
-            return result
-        } else {
-            return null
+  /**
+   * @Author: 王林
+   * @Date: 2021-07-02 07:44:06
+   * @Desc: 导出
+   */
+  async export(type, isDownload = true, name = '思维导图', ...args) {
+    if (this[type]) {
+      let result = await this[type](name, ...args)
+      if (isDownload && type !== 'pdf') {
+        downloadFile(result, name + '.' + type)
+      }
+      return result
+    } else {
+      return null
+    }
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2021-07-04 14:57:40
+   * @Desc: 获取svg数据
+   */
+  async getSvgData() {
+    let { svg, svgHTML } = this.mindMap.miniMap.getMiniMap()
+    // 把图片的url转换成data:url类型，否则导出会丢失图片
+    let imageList = svg.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: svg,
+      str: svgHTML
+    }
+  }
+
+  /**
+   * @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 14:57:40 
-     * @Desc: 获取svg数据 
-     */
-    async getSvgData() {
-        let { svg, svgHTML } = this.mindMap.miniMap.getMiniMap()
-        // 把图片的url转换成data:url类型，否则导出会丢失图片
-        let imageList = svg.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: svg,
-            str: svgHTML
+  /**
+   * @Author: 王林
+   * @Date: 2021-07-04 15:32:07
+   * @Desc: 在canvas上绘制思维导图背景
+   */
+  drawBackgroundToCanvas(ctx, width, height) {
+    return new Promise((resolve, reject) => {
+      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()
         }
-    }
-
-    /** 
-     * @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
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-08-08 19:23:08 
-     * @Desc: 导出为pdf 
-     */
-    async pdf(name) {
-        let img = await this.png()
-        let pdf = new JsPDF('', 'pt', 'a4')
-        let a4Width = 595
-        let a4Height = 841
-        let a4Ratio = a4Width / a4Height
-        let image = new Image()
-        image.onload = () => {
-            let imageWidth = image.width
-            let imageHeight = image.height
-            let imageRatio = imageWidth / imageHeight
-            let w, h
-            if (imageWidth <= a4Width && imageHeight <= a4Height) {
-                // 使用图片原始宽高
-                w = imageWidth
-                h = imageHeight
-            } else if (a4Ratio > imageRatio) {
-                // 以a4Height为高度，缩放图片宽度
-                w = imageRatio * a4Height
-                h = a4Height
-            } else {
-                // 以a4Width为宽度，缩放图片高度
-                w = a4Width
-                h = a4Width / imageRatio
-            }
-            pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h)
-            pdf.save(name)
+        img.onerror = e => {
+          reject(e)
         }
-        image.src = img
-    }
+      } else {
+        resolve()
+      }
+    })
+  }
 
-    /** 
-     * @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-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 14:54:07 
-     * @Desc: 导出为svg 
-     */
-    async svg(name) {
-        let { node } = await this.getSvgData()
-        node.first().before(SVG(`<title>${name}</title>`))
-        await this.drawBackgroundToSvg(node)
-        let str = node.svg()
-        // 转换成blob数据
-        let blob = new Blob([str], {
-            type: 'image/svg+xml'
-        })
-        return URL.createObjectURL(blob)
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-08-08 19:23:08
+   * @Desc: 导出为pdf
+   */
+  async pdf(name) {
+    let img = await this.png()
+    let pdf = new JsPDF('', 'pt', 'a4')
+    let a4Width = 595
+    let a4Height = 841
+    let a4Ratio = a4Width / a4Height
+    let image = new Image()
+    image.onload = () => {
+      let imageWidth = image.width
+      let imageHeight = image.height
+      let imageRatio = imageWidth / imageHeight
+      let w, h
+      if (imageWidth <= a4Width && imageHeight <= a4Height) {
+        // 使用图片原始宽高
+        w = imageWidth
+        h = imageHeight
+      } else if (a4Ratio > imageRatio) {
+        // 以a4Height为高度，缩放图片宽度
+        w = imageRatio * a4Height
+        h = a4Height
+      } else {
+        // 以a4Width为宽度，缩放图片高度
+        w = a4Width
+        h = a4Width / imageRatio
+      }
+      pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h)
+      pdf.save(name)
     }
+    image.src = img
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-08-03 22:19:17 
-     * @Desc: 导出为json 
-     */
-    json (name, withConfig = true) {
-        let data = this.mindMap.getData(withConfig)
-        let str = JSON.stringify(data)
-        let blob = new Blob([str])
-        return URL.createObjectURL(blob)
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2021-07-04 15:32:07
+   * @Desc: 在svg上绘制思维导图背景
+   */
+  drawBackgroundToSvg(svg) {
+    return new Promise(async resolve => {
+      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-08-03 22:24:24 
-     * @Desc: 专有文件，其实就是json文件 
-     */
-    smm (name, withConfig) {
-        return this.json(name, withConfig);
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2021-07-04 14:54:07
+   * @Desc: 导出为svg
+   */
+  async svg(name) {
+    let { node } = await this.getSvgData()
+    node.first().before(SVG(`<title>${name}</title>`))
+    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(name, withConfig = true) {
+    let data = this.mindMap.getData(withConfig)
+    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(name, withConfig) {
+    return this.json(name, withConfig)
+  }
 }
 
 export default Export

simple-mind-map/src/KeyCommand.js

@@ -1,200 +1,200 @@
-import { keyMap } from './utils/keyMap';
-/** 
- * @Author: 王林 
- * @Date: 2021-04-24 15:20:46 
- * @Desc: 快捷按键、命令处理类 
+import { keyMap } from './utils/keyMap'
+/**
+ * @Author: 王林
+ * @Date: 2021-04-24 15:20:46
+ * @Desc: 快捷按键、命令处理类
  */
 export default class KeyCommand {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 15:21:32 
-     * @Desc: 构造函数 
-     */
-    constructor(opt) {
-        this.opt = opt
-        this.mindMap = opt.mindMap
-        this.shortcutMap = {
-            //Enter: [fn]
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-24 15:21:32
+   * @Desc: 构造函数
+   */
+  constructor(opt) {
+    this.opt = opt
+    this.mindMap = opt.mindMap
+    this.shortcutMap = {
+      //Enter: [fn]
+    }
+    this.shortcutMapCache = {}
+    this.isPause = false
+    this.bindEvent()
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2022-08-14 08:57:55
+   * @Desc: 暂停快捷键响应
+   */
+  pause() {
+    this.isPause = true
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2022-08-14 08:58:43
+   * @Desc: 恢复快捷键响应
+   */
+  recovery() {
+    this.isPause = false
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-08-16 16:29:01
+   * @Desc: 保存当前注册的快捷键数据，然后清空快捷键数据
+   */
+  save() {
+    this.shortcutMapCache = this.shortcutMap
+    this.shortcutMap = {}
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-08-16 16:29:38
+   * @Desc: 恢复保存的快捷键数据，然后清空缓存数据
+   */
+  restore() {
+    this.shortcutMap = this.shortcutMapCache
+    this.shortcutMapCache = {}
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-24 15:23:22
+   * @Desc: 绑定事件
+   */
+  bindEvent() {
+    window.addEventListener('keydown', e => {
+      if (this.isPause) {
+        return
+      }
+      Object.keys(this.shortcutMap).forEach(key => {
+        if (this.checkKey(e, key)) {
+          e.stopPropagation()
+          e.preventDefault()
+          this.shortcutMap[key].forEach(fn => {
+            fn()
+          })
         }
-        this.shortcutMapCache = {}
-        this.isPause = false
-        this.bindEvent()
-    }
+      })
+    })
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-08-14 08:57:55 
-     * @Desc: 暂停快捷键响应 
-     */
-    pause() {
-        this.isPause = true
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-24 19:24:53
+   * @Desc: 检查键值是否符合
+   */
+  checkKey(e, key) {
+    let o = this.getOriginEventCodeArr(e)
+    let k = this.getKeyCodeArr(key)
+    if (o.length !== k.length) {
+      return false
     }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-08-14 08:58:43 
-     * @Desc: 恢复快捷键响应 
-     */
-    recovery() {
-        this.isPause = false
+    for (let i = 0; i < o.length; i++) {
+      let index = k.findIndex(item => {
+        return item === o[i]
+      })
+      if (index === -1) {
+        return false
+      } else {
+        k.splice(index, 1)
+      }
     }
+    return true
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-08-16 16:29:01 
-     * @Desc: 保存当前注册的快捷键数据，然后清空快捷键数据
-     */
-    save() {
-        this.shortcutMapCache = this.shortcutMap
-        this.shortcutMap = {}
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-24 19:15:19
+   * @Desc: 获取事件对象里的键值数组
+   */
+  getOriginEventCodeArr(e) {
+    let arr = []
+    if (e.ctrlKey || e.metaKey) {
+      arr.push(keyMap['Control'])
     }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-08-16 16:29:38 
-     * @Desc: 恢复保存的快捷键数据，然后清空缓存数据 
-     */
-    restore() {
-        this.shortcutMap = this.shortcutMapCache
-        this.shortcutMapCache = {}
+    if (e.altKey) {
+      arr.push(keyMap['Alt'])
     }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 15:23:22 
-     * @Desc: 绑定事件 
-     */
-    bindEvent() {
-        window.addEventListener('keydown', (e) => {
-            if (this.isPause) {
-                return
-            }
-            Object.keys(this.shortcutMap).forEach((key) => {
-                if (this.checkKey(e, key)) {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    this.shortcutMap[key].forEach((fn) => {
-                        fn()
-                    })
-                }
-            })
-        })
+    if (e.shiftKey) {
+      arr.push(keyMap['Shift'])
     }
+    if (!arr.includes(e.keyCode)) {
+      arr.push(e.keyCode)
+    }
+    return arr
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 19:24:53 
-     * @Desc: 检查键值是否符合 
-     */
-    checkKey(e, key) {
-        let o = this.getOriginEventCodeArr(e)
-        let k = this.getKeyCodeArr(key)
-        if (o.length !== k.length) {
-            return false
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-24 19:40:11
+   * @Desc: 获取快捷键对应的键值数组
+   */
+  getKeyCodeArr(key) {
+    let keyArr = key.split(/\s*\+\s*/)
+    let arr = []
+    keyArr.forEach(item => {
+      arr.push(keyMap[item])
+    })
+    return arr
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-24 15:23:00
+   * @Desc: 添加快捷键命令
+   * Enter
+   * Tab | Insert
+   * Shift + a
+   */
+  addShortcut(key, fn) {
+    key.split(/\s*\|\s*/).forEach(item => {
+      if (this.shortcutMap[item]) {
+        this.shortcutMap[item].push(fn)
+      } else {
+        this.shortcutMap[item] = [fn]
+      }
+    })
+  }
+
+  /**
+   * 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]
         }
-        for (let i = 0; i < o.length; i++) {
-            let index = k.findIndex((item) => {
-                return item === o[i];
-            })
-            if (index === -1) {
-                return false
-            } else {
-                k.splice(index, 1)
-            }
-        }
-        return true
-    }
+      }
+    })
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 19:15:19 
-     * @Desc: 获取事件对象里的键值数组 
-     */
-    getOriginEventCodeArr(e) {
-        let arr = []
-        if (e.ctrlKey || e.metaKey) {
-            arr.push(keyMap['Control'])
-        }
-        if (e.altKey) {
-            arr.push(keyMap['Alt'])
-        }
-        if (e.shiftKey) {
-            arr.push(keyMap['Shift'])
-        }
-        if (!arr.includes(e.keyCode)) {
-            arr.push(e.keyCode)
-        }
-        return arr
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 19:40:11 
-     * @Desc: 获取快捷键对应的键值数组 
-     */
-    getKeyCodeArr(key) {
-        let keyArr = key.split(/\s*\+\s*/)
-        let arr = []
-        keyArr.forEach((item) => {
-            arr.push(keyMap[item])
-        })
-        return arr
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-24 15:23:00 
-     * @Desc: 添加快捷键命令 
-     * Enter
-     * Tab | Insert
-     * Shift + a
-     */
-    addShortcut(key, fn) {
-        key.split(/\s*\|\s*/).forEach((item) => {
-            if (this.shortcutMap[item]) {
-                this.shortcutMap[item].push(fn)
-            } else {
-                this.shortcutMap[item] = [fn]
-            }
-        })
-    }
-
-    /** 
-     * 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]
-                }
-            }
-        })
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-08-14 08:49:58 
-     * @Desc: 获取指定快捷键的处理函数 
-     */
-    getShortcutFn(key) {
-        let res = []
-        key.split(/\s*\|\s*/).forEach((item) => {
-            res = this.shortcutMap[item] || []
-        })
-        return res
-    }
-}
+  /**
+   * @Author: 王林
+   * @Date: 2022-08-14 08:49:58
+   * @Desc: 获取指定快捷键的处理函数
+   */
+  getShortcutFn(key) {
+    let res = []
+    key.split(/\s*\|\s*/).forEach(item => {
+      res = this.shortcutMap[item] || []
+    })
+    return res
+  }
+}

simple-mind-map/src/MiniMap.js

@@ -7,16 +7,16 @@ class MiniMap {
    * @Desc: 构造函数
    */
   constructor(opt) {
-    this.mindMap = opt.mindMap;
-    this.isMousedown = false;
+    this.mindMap = opt.mindMap
+    this.isMousedown = false
     this.mousedownPos = {
       x: 0,
-      y: 0,
-    };
+      y: 0
+    }
     this.startViewPos = {
       x: 0,
-      y: 0,
-    };
+      y: 0
+    }
   }
 
   /**
@@ -26,39 +26,39 @@ class MiniMap {
    * @Desc:  获取小地图相关数据
    */
   getMiniMap() {
-    const svg = this.mindMap.svg;
-    const draw = this.mindMap.draw;
+    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();
+    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);
+    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
     // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
-    const rect = draw.rbox();
+    const rect = draw.rbox()
     // 将svg设置为实际内容的宽高
-    svg.size(rect.width, rect.height);
+    svg.size(rect.width, rect.height)
     // 把实际内容变换
-    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top);
+    draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
     // 克隆一份数据
-    const clone = svg.clone();
+    const clone = svg.clone()
     // 恢复原先的大小和变换信息
-    svg.size(origWidth, origHeight);
-    draw.transform(origTransform);
+    svg.size(origWidth, origHeight)
+    draw.transform(origTransform)
 
     return {
       svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
       svgHTML: clone.svg(), // svg字符串
       rect: {
         ...rect, // 思维导图图形未缩放时的位置尺寸等信息
-        ratio: rect.width / rect.height, // 思维导图图形的宽高比
+        ratio: rect.width / rect.height // 思维导图图形的宽高比
       },
       origWidth, // 画布宽度
       origHeight, // 画布高度
       scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
-      scaleY: origTransform.scaleY, // 思维导图图形的垂直缩放值
-    };
+      scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
+    }
   }
 
   /**
@@ -71,57 +71,57 @@ class MiniMap {
    */
   calculationMiniMap(boxWidth, boxHeight) {
     let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
-      this.getMiniMap();
+      this.getMiniMap()
     // 计算数据
-    let boxRatio = boxWidth / boxHeight;
-    let actWidth = 0;
-    let actHeight = 0;
+    let boxRatio = boxWidth / boxHeight
+    let actWidth = 0
+    let actHeight = 0
     if (boxRatio > rect.ratio) {
       // 高度以box为准，缩放宽度
-      actHeight = boxHeight;
-      actWidth = rect.ratio * actHeight;
+      actHeight = boxHeight
+      actWidth = rect.ratio * actHeight
     } else {
       // 宽度以box为准，缩放高度
-      actWidth = boxWidth;
-      actHeight = actWidth / rect.ratio;
+      actWidth = boxWidth
+      actHeight = actWidth / rect.ratio
     }
     // svg图形的缩放及位置
-    let miniMapBoxScale = actWidth / rect.width;
-    let miniMapBoxLeft = (boxWidth - actWidth) / 2;
-    let miniMapBoxTop = (boxHeight - actHeight) / 2;
+    let miniMapBoxScale = actWidth / rect.width
+    let miniMapBoxLeft = (boxWidth - actWidth) / 2
+    let miniMapBoxTop = (boxHeight - actHeight) / 2
     // 视口框大小及位置
-    let _rectX = rect.x - (rect.width * scaleX - rect.width) / 2;
-    let _rectX2 = rect.x2 + (rect.width * scaleX - rect.width) / 2;
-    let _rectY = rect.y - (rect.height * scaleY - rect.height) / 2;
-    let _rectY2 = rect.y2 + (rect.height * scaleY - rect.height) / 2;
-    let _rectWidth = rect.width * scaleX;
-    let _rectHeight = rect.height * scaleY;
+    let _rectX = rect.x - (rect.width * scaleX - rect.width) / 2
+    let _rectX2 = rect.x2 + (rect.width * scaleX - rect.width) / 2
+    let _rectY = rect.y - (rect.height * scaleY - rect.height) / 2
+    let _rectY2 = rect.y2 + (rect.height * scaleY - rect.height) / 2
+    let _rectWidth = rect.width * scaleX
+    let _rectHeight = rect.height * scaleY
     let viewBoxStyle = {
       left: 0,
       top: 0,
       right: 0,
-      bottom: 0,
-    };
+      bottom: 0
+    }
     viewBoxStyle.left =
-      Math.max(0, (-_rectX / _rectWidth) * actWidth) + miniMapBoxLeft + "px";
+      Math.max(0, (-_rectX / _rectWidth) * actWidth) + miniMapBoxLeft + 'px'
     viewBoxStyle.right =
       Math.max(0, ((_rectX2 - origWidth) / _rectWidth) * actWidth) +
       miniMapBoxLeft +
-      "px";
+      'px'
 
     viewBoxStyle.top =
-      Math.max(0, (-_rectY / _rectHeight) * actHeight) + miniMapBoxTop + "px";
+      Math.max(0, (-_rectY / _rectHeight) * actHeight) + miniMapBoxTop + 'px'
     viewBoxStyle.bottom =
       Math.max(0, ((_rectY2 - origHeight) / _rectHeight) * actHeight) +
       miniMapBoxTop +
-      "px";
+      'px'
     return {
       svgHTML, // 小地图html
       viewBoxStyle, // 视图框的位置信息
       miniMapBoxScale, // 视图框的缩放值
       miniMapBoxLeft, // 视图框的left值
-      miniMapBoxTop, // 视图框的top值
-    };
+      miniMapBoxTop // 视图框的top值
+    }
   }
 
   /**
@@ -131,17 +131,17 @@ class MiniMap {
    * @Desc: 小地图鼠标按下事件
    */
   onMousedown(e) {
-    this.isMousedown = true;
+    this.isMousedown = true
     this.mousedownPos = {
       x: e.clientX,
-      y: e.clientY,
-    };
+      y: e.clientY
+    }
     // 保存视图当前的偏移量
-    let transformData = this.mindMap.view.getTransformData();
+    let transformData = this.mindMap.view.getTransformData()
     this.startViewPos = {
       x: transformData.state.x,
-      y: transformData.state.y,
-    };
+      y: transformData.state.y
+    }
   }
 
   /**
@@ -152,13 +152,13 @@ class MiniMap {
    */
   onMousemove(e, sensitivityNum = 5) {
     if (!this.isMousedown) {
-      return;
+      return
     }
-    let ox = e.clientX - this.mousedownPos.x;
-    let oy = e.clientY - this.mousedownPos.y;
+    let ox = e.clientX - this.mousedownPos.x
+    let oy = e.clientY - this.mousedownPos.y
     // 在视图最初偏移量上累加更新量
-    this.mindMap.view.translateXTo(ox * sensitivityNum + this.startViewPos.x);
-    this.mindMap.view.translateYTo(oy * sensitivityNum + this.startViewPos.y);
+    this.mindMap.view.translateXTo(ox * sensitivityNum + this.startViewPos.x)
+    this.mindMap.view.translateYTo(oy * sensitivityNum + this.startViewPos.y)
   }
 
   /**
@@ -168,8 +168,8 @@ class MiniMap {
    * @Desc: 小地图鼠标松开事件
    */
   onMouseup() {
-    this.isMousedown = false;
+    this.isMousedown = false
   }
 }
 
-export default MiniMap;
+export default MiniMap

simple-mind-map/src/Select.js

@@ -1,191 +1,198 @@
 import { bfsWalk, throttle } from './utils'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-07-10 22:34:51 
- * @Desc: 选择节点类 
+/**
+ * @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: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.ctrlKey && 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)
+  /**
+   * @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.ctrlKey && 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', () => {
+      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)
         })
-        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)
+      } 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)
         })
-        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
+export default Select

simple-mind-map/src/Shape.js

@@ -1,178 +1,178 @@
-/** 
- * @Author: 王林 
- * @Date: 2022-08-22 21:32:50 
- * @Desc: 节点形状类 
+/**
+ * @Author: 王林
+ * @Date: 2022-08-22 21:32:50
+ * @Desc: 节点形状类
  */
- export default class Shape {
-    constructor(node) {
-        this.node = node
-    }
+export default class Shape {
+  constructor(node) {
+    this.node = node
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-08-17 22:32:32 
-     * @Desc: 形状需要的padding 
-     */
-    getShapePadding(width, height, paddingX, paddingY) {
-        const shape = this.node.getShape()
-        const defaultPaddingX = 15
-        const defaultPaddingY = 5
-        const actWidth = width + paddingX * 2
-        const actHeight = height + paddingY * 2
-        const actOffset = Math.abs(actWidth - actHeight)
-        switch (shape) {
-            case 'roundedRectangle':
-                return {
-                    paddingX: height > width ? (height - width) / 2 : 0,
-                    paddingY: 0
-                }  
-            case 'diamond':
-                return {
-                    paddingX: width / 2,
-                    paddingY: height / 2
-                }
-            case 'parallelogram':
-                return {
-                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-                    paddingY: 0
-                }
-            case 'outerTriangularRectangle':
-                return {
-                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-                    paddingY: 0
-                }
-            case 'innerTriangularRectangle':
-                return {
-                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-                    paddingY: 0
-                }
-            case 'ellipse':
-                return {
-                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
-                    paddingY: paddingY <= 0 ? defaultPaddingY : 0
-                }
-            case 'circle':
-                return {
-                    paddingX: actHeight > actWidth ? actOffset / 2 : 0,
-                    paddingY: actHeight < actWidth ? actOffset / 2 : 0,
-                }
-            default:
-                return {
-                    paddingX: 0,
-                    paddingY: 0
-                }
+  /**
+   * @Author: 王林
+   * @Date: 2022-08-17 22:32:32
+   * @Desc: 形状需要的padding
+   */
+  getShapePadding(width, height, paddingX, paddingY) {
+    const shape = this.node.getShape()
+    const defaultPaddingX = 15
+    const defaultPaddingY = 5
+    const actWidth = width + paddingX * 2
+    const actHeight = height + paddingY * 2
+    const actOffset = Math.abs(actWidth - actHeight)
+    switch (shape) {
+      case 'roundedRectangle':
+        return {
+          paddingX: height > width ? (height - width) / 2 : 0,
+          paddingY: 0
+        }
+      case 'diamond':
+        return {
+          paddingX: width / 2,
+          paddingY: height / 2
+        }
+      case 'parallelogram':
+        return {
+          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+          paddingY: 0
+        }
+      case 'outerTriangularRectangle':
+        return {
+          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+          paddingY: 0
+        }
+      case 'innerTriangularRectangle':
+        return {
+          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+          paddingY: 0
+        }
+      case 'ellipse':
+        return {
+          paddingX: paddingX <= 0 ? defaultPaddingX : 0,
+          paddingY: paddingY <= 0 ? defaultPaddingY : 0
+        }
+      case 'circle':
+        return {
+          paddingX: actHeight > actWidth ? actOffset / 2 : 0,
+          paddingY: actHeight < actWidth ? actOffset / 2 : 0
+        }
+      default:
+        return {
+          paddingX: 0,
+          paddingY: 0
         }
     }
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-08-17 22:22:53 
-     * @Desc: 创建形状节点 
-     */
-    createShape() {
-        const shape = this.node.getShape()
-        let { width, height } = this.node
-        let node = null
-        // 矩形
-        if (shape === 'rectangle') {
-            node = this.node.group.rect(width, height)
-        } else if (shape === 'diamond') {
-            // 菱形
-            node = this.createDiamond()
-        } else if (shape === 'parallelogram') {
-            // 平行四边形
-            node = this.createParallelogram()
-        } else if (shape === 'roundedRectangle') {
-            // 圆角矩形
-            node = this.createRoundedRectangle()
-        } else if (shape === 'octagonalRectangle') {
-            // 八角矩形
-            node = this.createOctagonalRectangle()
-        } else if (shape === 'outerTriangularRectangle') {
-            // 外三角矩形
-            node = this.createOuterTriangularRectangle()
-        } else if (shape === 'innerTriangularRectangle') {
-            // 内三角矩形
-            node = this.createInnerTriangularRectangle()
-        } else if (shape === 'ellipse') {
-            // 椭圆
-            node = this.createEllipse()
-        } else if (shape === 'circle') {
-            // 圆
-            node = this.createCircle()
-        }
-        return node
+  /**
+   * @Author: 王林
+   * @Date: 2022-08-17 22:22:53
+   * @Desc: 创建形状节点
+   */
+  createShape() {
+    const shape = this.node.getShape()
+    let { width, height } = this.node
+    let node = null
+    // 矩形
+    if (shape === 'rectangle') {
+      node = this.node.group.rect(width, height)
+    } else if (shape === 'diamond') {
+      // 菱形
+      node = this.createDiamond()
+    } else if (shape === 'parallelogram') {
+      // 平行四边形
+      node = this.createParallelogram()
+    } else if (shape === 'roundedRectangle') {
+      // 圆角矩形
+      node = this.createRoundedRectangle()
+    } else if (shape === 'octagonalRectangle') {
+      // 八角矩形
+      node = this.createOctagonalRectangle()
+    } else if (shape === 'outerTriangularRectangle') {
+      // 外三角矩形
+      node = this.createOuterTriangularRectangle()
+    } else if (shape === 'innerTriangularRectangle') {
+      // 内三角矩形
+      node = this.createInnerTriangularRectangle()
+    } else if (shape === 'ellipse') {
+      // 椭圆
+      node = this.createEllipse()
+    } else if (shape === 'circle') {
+      // 圆
+      node = this.createCircle()
     }
+    return node
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-04 09:08:54 
-     * @Desc: 创建菱形 
-     */
-    createDiamond() {
-        let { width, height } = this.node
-        let halfWidth = width / 2
-        let halfHeight = height / 2
-        let topX = halfWidth
-        let topY = 0
-        let rightX = width
-        let rightY = halfHeight
-        let bottomX = halfWidth
-        let bottomY = height
-        let leftX = 0
-        let leftY = halfHeight
-        return this.node.group.polygon(`
+  /**
+   * @Author: 王林
+   * @Date: 2022-09-04 09:08:54
+   * @Desc: 创建菱形
+   */
+  createDiamond() {
+    let { width, height } = this.node
+    let halfWidth = width / 2
+    let halfHeight = height / 2
+    let topX = halfWidth
+    let topY = 0
+    let rightX = width
+    let rightY = halfHeight
+    let bottomX = halfWidth
+    let bottomY = height
+    let leftX = 0
+    let leftY = halfHeight
+    return this.node.group.polygon(`
             ${topX}, ${topY}
             ${rightX}, ${rightY}
             ${bottomX}, ${bottomY}
             ${leftX}, ${leftY}
         `)
-    }
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-03 16:14:12 
-     * @Desc: 创建平行四边形 
-     */
-    createParallelogram() {
-        let { paddingX } = this.node.getPaddingVale()
-        paddingX = paddingX || this.node.shapePadding.paddingX
-        let { width, height } = this.node
-        return this.node.group.polygon(`
+  /**
+   * @Author: 王林
+   * @Date: 2022-09-03 16:14:12
+   * @Desc: 创建平行四边形
+   */
+  createParallelogram() {
+    let { paddingX } = this.node.getPaddingVale()
+    paddingX = paddingX || this.node.shapePadding.paddingX
+    let { width, height } = this.node
+    return this.node.group.polygon(`
             ${paddingX}, ${0}
             ${width}, ${0}
             ${width - paddingX}, ${height}
             ${0}, ${height}
         `)
-    }
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-03 16:50:23 
-     * @Desc: 创建圆角矩形 
-     */
-    createRoundedRectangle() {
-        let { width, height } = this.node
-        let halfHeight = height / 2
-        return this.node.group.path(`
+  /**
+   * @Author: 王林
+   * @Date: 2022-09-03 16:50:23
+   * @Desc: 创建圆角矩形
+   */
+  createRoundedRectangle() {
+    let { width, height } = this.node
+    let halfHeight = height / 2
+    return this.node.group.path(`
             M${halfHeight},0
             L${width - halfHeight},0
             A${height / 2},${height / 2} 0 0,1 ${width - halfHeight},${height} 
             L${halfHeight},${height}
             A${height / 2},${height / 2} 0 0,1 ${halfHeight},${0}
         `)
-    }
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林 
-     * @Date: 2022-09-12 16:14:08 
-     * @Desc: 创建八角矩形 
-     */
-    createOctagonalRectangle() {
-        let w = 5
-        let { width, height } = this.node
-        return this.node.group.polygon(`
+  /**
+   * javascript comment
+   * @Author: 王林
+   * @Date: 2022-09-12 16:14:08
+   * @Desc: 创建八角矩形
+   */
+  createOctagonalRectangle() {
+    let w = 5
+    let { width, height } = this.node
+    return this.node.group.polygon(`
             ${0}, ${w}
             ${w}, ${0}
             ${width - w}, ${0}
@@ -182,19 +182,19 @@
             ${w}, ${height}
             ${0}, ${height - w}
         `)
-    }
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林 
-     * @Date: 2022-09-12 20:55:50 
-     * @Desc: 创建外三角矩形 
-     */
-    createOuterTriangularRectangle() {
-        let { paddingX } = this.node.getPaddingVale()
-        paddingX = paddingX || this.node.shapePadding.paddingX
-        let { width, height } = this.node
-        return this.node.group.polygon(`
+  /**
+   * javascript comment
+   * @Author: 王林
+   * @Date: 2022-09-12 20:55:50
+   * @Desc: 创建外三角矩形
+   */
+  createOuterTriangularRectangle() {
+    let { paddingX } = this.node.getPaddingVale()
+    paddingX = paddingX || this.node.shapePadding.paddingX
+    let { width, height } = this.node
+    return this.node.group.polygon(`
             ${paddingX}, ${0}
             ${width - paddingX}, ${0}
             ${width}, ${height / 2}
@@ -202,19 +202,19 @@
             ${paddingX}, ${height}
             ${0}, ${height / 2}
         `)
-    }
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林 
-     * @Date: 2022-09-12 20:59:37 
-     * @Desc: 创建内三角矩形 
-     */
-    createInnerTriangularRectangle() {
-        let { paddingX } = this.node.getPaddingVale()
-        paddingX = paddingX || this.node.shapePadding.paddingX
-        let { width, height } = this.node
-        return this.node.group.polygon(`
+  /**
+   * javascript comment
+   * @Author: 王林
+   * @Date: 2022-09-12 20:59:37
+   * @Desc: 创建内三角矩形
+   */
+  createInnerTriangularRectangle() {
+    let { paddingX } = this.node.getPaddingVale()
+    paddingX = paddingX || this.node.shapePadding.paddingX
+    let { width, height } = this.node
+    return this.node.group.polygon(`
             ${0}, ${0}
             ${width}, ${0}
             ${width - paddingX / 2}, ${height / 2}
@@ -222,44 +222,54 @@
             ${0}, ${height}
             ${paddingX / 2}, ${height / 2}
         `)
-    }
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林 
-     * @Date: 2022-09-12 21:06:31 
-     * @Desc: 创建椭圆 
-     */
-    createEllipse() {
-        let { width, height } = this.node
-        let halfWidth = width / 2
-        let halfHeight = height / 2
-        return this.node.group.path(`
+  /**
+   * javascript comment
+   * @Author: 王林
+   * @Date: 2022-09-12 21:06:31
+   * @Desc: 创建椭圆
+   */
+  createEllipse() {
+    let { width, height } = this.node
+    let halfWidth = width / 2
+    let halfHeight = height / 2
+    return this.node.group.path(`
             M${halfWidth},0
             A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
             M${halfWidth},${height} 
             A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
         `)
-    }
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林 
-     * @Date: 2022-09-12 21:14:04 
-     * @Desc: 创建圆 
-     */
-    createCircle() {
-        let { width, height } = this.node
-        let halfWidth = width / 2
-        let halfHeight = height / 2
-        return this.node.group.path(`
+  /**
+   * javascript comment
+   * @Author: 王林
+   * @Date: 2022-09-12 21:14:04
+   * @Desc: 创建圆
+   */
+  createCircle() {
+    let { width, height } = this.node
+    let halfWidth = width / 2
+    let halfHeight = height / 2
+    return this.node.group.path(`
             M${halfWidth},0
             A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
             M${halfWidth},${height} 
             A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
         `)
-    }
+  }
 }
 
 // 形状列表
-export const shapeList = ['rectangle', 'diamond', 'parallelogram', 'roundedRectangle', 'octagonalRectangle', 'outerTriangularRectangle', 'innerTriangularRectangle', 'ellipse', 'circle']
+export const shapeList = [
+  'rectangle',
+  'diamond',
+  'parallelogram',
+  'roundedRectangle',
+  'octagonalRectangle',
+  'outerTriangularRectangle',
+  'innerTriangularRectangle',
+  'ellipse',
+  'circle'
+]

simple-mind-map/src/Style.js

@@ -1,210 +1,230 @@
-import { tagColorList } from './utils/constant';
+import { tagColorList } from './utils/constant'
 const rootProp = ['paddingX', 'paddingY']
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 10:09:08 
- * @Desc: 样式类 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 10:09:08
+ * @Desc: 样式类
  */
 class Style {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 16:01:53 
-     * @Desc:  设置背景样式
-     */
-    static setBackgroundStyle(el, themeConfig) {
-        let { backgroundColor, backgroundImage, backgroundRepeat } = themeConfig
-        el.style.backgroundColor = backgroundColor
-        if (backgroundImage) {
-            el.style.backgroundImage = `url(${backgroundImage})`
-            el.style.backgroundRepeat = backgroundRepeat
-        }
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 16:01:53
+   * @Desc:  设置背景样式
+   */
+  static setBackgroundStyle(el, themeConfig) {
+    let { backgroundColor, backgroundImage, backgroundRepeat } = themeConfig
+    el.style.backgroundColor = backgroundColor
+    if (backgroundImage) {
+      el.style.backgroundImage = `url(${backgroundImage})`
+      el.style.backgroundRepeat = backgroundRepeat
     }
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 10:10:11 
-     * @Desc: 构造函数 
-     */
-    constructor(ctx, themeConfig) {
-        this.ctx = ctx
-        this.themeConfig = themeConfig
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 10:10:11
+   * @Desc: 构造函数
+   */
+  constructor(ctx, themeConfig) {
+    this.ctx = ctx
+    this.themeConfig = themeConfig
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-12 07:40:14 
-     * @Desc: 更新主题配置 
-     */
-    updateThemeConfig(themeConfig) {
-        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 
-     * @Desc: 合并样式 
-     */
-    merge(prop, root, isActive) {
-        // 三级及以下节点
-        let defaultConfig = this.themeConfig.node
-        if (root || rootProp.includes(prop)) {// 直接使用最外层样式
-            defaultConfig = this.themeConfig
-        } else if (this.ctx.isGeneralization) {// 概要节点
-            defaultConfig = this.themeConfig.generalization
-        } else if (this.ctx.layerIndex === 0) {// 根节点
-            defaultConfig = this.themeConfig.root
-        } else if (this.ctx.layerIndex === 1) {// 二级节点
-            defaultConfig = this.themeConfig.second
-        }
-        // 激活状态
-        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.getSelfStyle(prop) !== undefined ? this.getSelfStyle(prop) : defaultConfig[prop]
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 12:02:55
+   * @Desc: 合并样式
+   */
+  merge(prop, root, isActive) {
+    // 三级及以下节点
+    let defaultConfig = this.themeConfig.node
+    if (root || rootProp.includes(prop)) {
+      // 直接使用最外层样式
+      defaultConfig = this.themeConfig
+    } else if (this.ctx.isGeneralization) {
+      // 概要节点
+      defaultConfig = this.themeConfig.generalization
+    } else if (this.ctx.layerIndex === 0) {
+      // 根节点
+      defaultConfig = this.themeConfig.root
+    } else if (this.ctx.layerIndex === 1) {
+      // 二级节点
+      defaultConfig = this.themeConfig.second
     }
+    // 激活状态
+    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.getSelfStyle(prop) !== undefined
+      ? this.getSelfStyle(prop)
+      : defaultConfig[prop]
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林 
-     * @Date: 2022-09-12 21:55:57 
-     * @Desc: 获取某个样式值 
-     */
-    getStyle(prop, root, isActive) {
-        return this.merge(prop, root, isActive)
-    }
+  /**
+   * javascript comment
+   * @Author: 王林
+   * @Date: 2022-09-12 21:55:57
+   * @Desc: 获取某个样式值
+   */
+  getStyle(prop, root, isActive) {
+    return this.merge(prop, root, isActive)
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: flydreame 
-     * @Date: 2022-09-17 12:09:39 
-     * @Desc: 获取自身自定义样式 
-     */
-    getSelfStyle(prop) {
-        return this.ctx.nodeData.data[prop]
-    }
+  /**
+   * javascript comment
+   * @Author: flydreame
+   * @Date: 2022-09-17 12:09:39
+   * @Desc: 获取自身自定义样式
+   */
+  getSelfStyle(prop) {
+    return this.ctx.nodeData.data[prop]
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 10:12:56 
-     * @Desc: 矩形 
-     */
-    rect(node) {
-        this.shape(node)
-        node.radius(this.merge('borderRadius'))
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 10:12:56
+   * @Desc: 矩形
+   */
+  rect(node) {
+    this.shape(node)
+    node.radius(this.merge('borderRadius'))
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林 
-     * @Date: 2022-09-12 15:04:28 
-     * @Desc:  矩形外的其他形状 
-     */
-    shape(node) {
-        node.fill({
-            color: this.merge('fillColor')
-        }).stroke({
-            color: this.merge('borderColor'),
-            width: this.merge('borderWidth'),
-            dasharray: this.merge('borderDasharray')
-        })
-    }
+  /**
+   * javascript comment
+   * @Author: 王林
+   * @Date: 2022-09-12 15:04:28
+   * @Desc:  矩形外的其他形状
+   */
+  shape(node) {
+    node
+      .fill({
+        color: this.merge('fillColor')
+      })
+      .stroke({
+        color: this.merge('borderColor'),
+        width: this.merge('borderWidth'),
+        dasharray: this.merge('borderDasharray')
+      })
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 12:07:59 
-     * @Desc: 文字 
-     */
-    text(node) {
-        node.fill({
-            color: this.merge('color')
-        }).css({
-            'font-family': this.merge('fontFamily'),
-            'font-size': this.merge('fontSize'),
-            'font-weight': this.merge('fontWeight'),
-            'font-style': this.merge('fontStyle'),
-            'text-decoration': this.merge('textDecoration')
-        })
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 12:07:59
+   * @Desc: 文字
+   */
+  text(node) {
+    node
+      .fill({
+        color: this.merge('color')
+      })
+      .css({
+        'font-family': this.merge('fontFamily'),
+        'font-size': this.merge('fontSize'),
+        'font-weight': this.merge('fontWeight'),
+        'font-style': this.merge('fontStyle'),
+        'text-decoration': this.merge('textDecoration')
+      })
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-13 08:14:34 
-     * @Desc: html文字节点 
-     */
-    domText(node, fontSizeScale = 1) {
-        node.style.fontFamily = this.merge('fontFamily')
-        node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
-        node.style.fontWeight = this.merge('fontWeight') || 'normal'
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-13 08:14:34
+   * @Desc: html文字节点
+   */
+  domText(node, fontSizeScale = 1) {
+    node.style.fontFamily = this.merge('fontFamily')
+    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 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-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-07-03 22:37:19
+   * @Desc: 内置图标
+   */
+  iconNode(node) {
+    node.attr({
+      fill: this.merge('color')
+    })
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 14:50:49 
-     * @Desc: 连线 
-     */
-    line(node, { width, color, dasharray } = {}) {
-        node.stroke({ width, color, dasharray }).fill({ color: 'none' })
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 14:50:49
+   * @Desc: 连线
+   */
+  line(node, { width, color, dasharray } = {}) {
+    node.stroke({ width, color, dasharray }).fill({ color: 'none' })
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-07-30 16:19:03 
-     * @Desc: 概要连线 
-     */
-    generalizationLine(node) {
-        node.stroke({ width: this.merge('generalizationLineWidth', true), color: this.merge('generalizationLineColor', true) }).fill({ color: 'none' })
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2022-07-30 16:19:03
+   * @Desc: 概要连线
+   */
+  generalizationLine(node) {
+    node
+      .stroke({
+        width: this.merge('generalizationLineWidth', true),
+        color: this.merge('generalizationLineColor', true)
+      })
+      .fill({ color: 'none' })
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 20:03:59 
-     * @Desc: 按钮 
-     */
-    iconBtn(node, fillNode) {
-        node.fill({ color: '#808080' })
-        fillNode.fill({ color: '#fff' })
-    }
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 20:03:59
+   * @Desc: 按钮
+   */
+  iconBtn(node, fillNode) {
+    node.fill({ color: '#808080' })
+    fillNode.fill({ color: '#fff' })
+  }
 }
 
-export default Style
+export default Style

simple-mind-map/src/TextEdit.js

@@ -1,146 +1,150 @@
-import {
-    getStrWithBrFromHtml
-} from './utils'
+import { getStrWithBrFromHtml } from './utils'
 
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-06-19 11:11:28 
- * @Desc: 节点文字编辑类 
+/**
+ * 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()
-    }
+  /**
+   * 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('F2', () => {
-            if (this.renderer.activeNodeList.length <= 0) {
-                return
-            }
-            this.show(this.renderer.activeNodeList[0])
-        })
-    }
+  /**
+   * @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('F2', () => {
+      if (this.renderer.activeNodeList.length <= 0) {
+        return
+      }
+      this.show(this.renderer.activeNodeList[0])
+    })
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-08-16 16:27:02 
-     * @Desc: 注册临时快捷键 
-     */
-    registerTmpShortcut() {
-        // 注册回车快捷键
-        this.mindMap.keyCommand.addShortcut('Enter', () => {
-            this.hideEditTextBox()
-        })
-    }
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-08-16 16:27:02
+   * @Desc: 注册临时快捷键
+   */
+  registerTmpShortcut() {
+    // 注册回车快捷键
+    this.mindMap.keyCommand.addShortcut('Enter', () => {
+      this.hideEditTextBox()
+    })
+  }
 
-    /** 
-     * @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: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')
-        this.registerTmpShortcut()
-        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-04-13 22:13:02
+   * @Desc: 显示文本编辑框
+   */
+  showEditTextBox(node, rect) {
+    this.mindMap.emit('before_show_text_edit')
+    this.registerTmpShortcut()
+    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/gim)
+      .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-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)
-            if (node.isGeneralization) {
-                // 概要节点
-                node.generalizationBelongNode.updateGeneralization()
-            }
-            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
+  /**
+   * @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)
+      if (node.isGeneralization) {
+        // 概要节点
+        node.generalizationBelongNode.updateGeneralization()
+      }
+      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
+  }
+}

simple-mind-map/src/View.js

@@ -1,215 +1,218 @@
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-07 14:45:24 
- * @Desc: 视图操作类 
+/**
+ * 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 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 (e.ctrlKey) {
-                // 按住ctrl键拖动为多选
-                return
-            }
-            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-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 (e.ctrlKey) {
+        // 按住ctrl键拖动为多选
+        return
+      }
+      if (this.firstDrag) {
+        this.firstDrag = false
+        // 清除激活节点
+        if (this.mindMap.renderer.activeNodeList.length > 0) {
+          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 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-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-07-13 15:49:06 
-     * @Desc: 平移x方向 
-     */
-    translateX(step) {
-        this.x += step
-        this.transform()
+  /**
+   * 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: 2022-10-10 14:03:53 
-     * @Desc: 平移x方式到 
-     */
-    translateXTo(x) {
-        this.x = x
-        this.transform()
-    }
+  /**
+   * 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()
-    }
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:03:53
+   * @Desc: 平移x方式到
+   */
+  translateXTo(x) {
+    this.x = x
+    this.transform()
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-10-10 14:04:10 
-     * @Desc: 平移y方向到 
-     */
-    translateYTo(y) {
-        this.y = y
-        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())
-    }
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-10-10 14:04:10
+   * @Desc: 平移y方向到
+   */
+  translateYTo(y) {
+    this.y = y
+    this.transform()
+  }
 
-    /** 
-     * @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: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-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-11 17:41:35
+   * @Desc: 恢复
+   */
+  reset() {
+    this.scale = 1
+    this.x = 0
+    this.y = 0
+    this.transform()
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-07-04 17:10:41 
-     * @Desc: 放大 
-     */
-    enlarge() {
-        this.scale += this.mindMap.opt.scaleRatio
-        this.transform()
-        this.mindMap.emit('scale', this.scale)
+  /**
+   * @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
+export default View

simple-mind-map/src/layouts/Base.js

@@ -1,248 +1,264 @@
 import Node from '../Node'
-import {
-    walk,
-} from '../utils'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-12 22:24:30 
- * @Desc: 布局基类 
+/**
+ * @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: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: 2022-07-30 22:49:28
+   * @Desc: 概要节点
+   */
+  renderGeneralization() {}
+
+  /**
+   * @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)
+      }
     }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:39:50 
-     * @Desc: 计算节点位置 
-     */
-    doLayout() {
-        throw new Error('【computed】方法为必要方法，需要子类进行重写！')
+    // 根节点
+    if (isRoot) {
+      newNode.isRoot = true
+      this.root = newNode
+    } else {
+      // 互相收集
+      newNode.parent = parent._node
+      parent._node.addChildren(newNode)
     }
+    return newNode
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:41:04 
-     * @Desc: 连线 
-     */
-    renderLine() {
-        throw new Error('【renderLine】方法为必要方法，需要子类进行重写！')
-    }
+  /**
+   * @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
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:42:08 
-     * @Desc: 定位展开收缩按钮 
-     */
-    renderExpandBtn() {
-        throw new Error('【renderExpandBtn】方法为必要方法，需要子类进行重写！')
-    }
+  /**
+   * 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 && !item.hasCustomPosition()) {
+        // 适配自定义位置
+        this.updateChildren(item.children, prop, offset)
+      }
+    })
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-07-30 22:49:28 
-     * @Desc: 概要节点 
-     */
-    renderGeneralization() {}
+  /**
+   * @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-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-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-07-16 13:48:43 
-     * @Desc: 定位节点到画布中间 
-     */
-    setNodeCenter(node) {
-        node.left = (this.mindMap.width - node.width) / 2
-        node.top = (this.mindMap.height - node.height) / 2
-    }
+  /**
+   * @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
+  }
 
-    /** 
-     * 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 && !item.hasCustomPosition()) {// 适配自定义位置
-                this.updateChildren(item.children, prop, offset)
-            }
+  /**
+   * @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
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2022-07-31 20:53:12
+   * @Desc: 获取节点包括概要在内的宽度
+   */
+  getNodeWidthWithGeneralization(node) {
+    return Math.max(
+      node.width,
+      node.checkHasGeneralization() ? node._generalizationNodeWidth : 0
+    )
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2022-07-31 20:53:12
+   * @Desc: 获取节点包括概要在内的高度
+   */
+  getNodeHeightWithGeneralization(node) {
+    return Math.max(
+      node.height,
+      node.checkHasGeneralization() ? node._generalizationNodeHeight : 0
+    )
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2022-07-31 09:14:03
+   * @Desc: 获取节点的边界值
+   * dir：生长方向，h（水平）、v（垂直）
+   * isLeft：是否向左生长
+   */
+  getNodeBoundaries(node, dir) {
+    let { generalizationLineMargin, generalizationNodeMargin } =
+      this.mindMap.themeConfig
+    let walk = root => {
+      let _left = Infinity
+      let _right = -Infinity
+      let _top = Infinity
+      let _bottom = -Infinity
+      if (root.children && root.children.length > 0) {
+        root.children.forEach(child => {
+          let { left, right, top, bottom } = walk(child)
+          // 概要内容的宽度
+          let generalizationWidth =
+            child.checkHasGeneralization() && child.nodeData.data.expand
+              ? child._generalizationNodeWidth + generalizationNodeMargin
+              : 0
+          // 概要内容的高度
+          let generalizationHeight =
+            child.checkHasGeneralization() && child.nodeData.data.expand
+              ? child._generalizationNodeHeight + generalizationNodeMargin
+              : 0
+          if (left - (dir === 'h' ? generalizationWidth : 0) < _left) {
+            _left = left - (dir === 'h' ? generalizationWidth : 0)
+          }
+          if (right + (dir === 'h' ? generalizationWidth : 0) > _right) {
+            _right = right + (dir === 'h' ? generalizationWidth : 0)
+          }
+          if (top < _top) {
+            _top = top
+          }
+          if (bottom + (dir === 'v' ? generalizationHeight : 0) > _bottom) {
+            _bottom = bottom + (dir === 'v' ? generalizationHeight : 0)
+          }
         })
+      }
+      let cur = {
+        left: root.left,
+        right: root.left + root.width,
+        top: root.top,
+        bottom: root.top + root.height
+      }
+      return {
+        left: cur.left < _left ? cur.left : _left,
+        right: cur.right > _right ? cur.right : _right,
+        top: cur.top < _top ? cur.top : _top,
+        bottom: cur.bottom > _bottom ? cur.bottom : _bottom
+      }
     }
-
-    /** 
-     * @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;
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-07-31 20:53:12 
-     * @Desc: 获取节点包括概要在内的宽度 
-     */
-    getNodeWidthWithGeneralization(node) {
-        return Math.max(node.width, node.checkHasGeneralization() ? node._generalizationNodeWidth : 0)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-07-31 20:53:12 
-     * @Desc: 获取节点包括概要在内的高度 
-     */
-    getNodeHeightWithGeneralization(node) {
-        return Math.max(node.height, node.checkHasGeneralization() ? node._generalizationNodeHeight : 0)
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-07-31 09:14:03 
-     * @Desc: 获取节点的边界值 
-     * dir：生长方向，h（水平）、v（垂直）
-     * isLeft：是否向左生长
-     */
-    getNodeBoundaries(node, dir, isLeft) {
-        let { generalizationLineMargin, generalizationNodeMargin } = this.mindMap.themeConfig
-        let walk = (root) => {
-            let _left = Infinity
-            let _right = -Infinity
-            let _top = Infinity
-            let _bottom = -Infinity
-            if (root.children && root.children.length > 0) {
-                root.children.forEach((child) => {
-                    let {left, right, top, bottom} = walk(child)
-                    // 概要内容的宽度
-                    let generalizationWidth = child.checkHasGeneralization() && child.nodeData.data.expand ? child._generalizationNodeWidth + generalizationNodeMargin : 0
-                    // 概要内容的高度
-                    let generalizationHeight = child.checkHasGeneralization() && child.nodeData.data.expand ? child._generalizationNodeHeight + generalizationNodeMargin : 0
-                    if (left - (dir === 'h' ? generalizationWidth : 0) < _left) {
-                        _left = left - (dir === 'h' ? generalizationWidth : 0)
-                    }
-                    if (right + (dir === 'h' ? generalizationWidth : 0) > _right) {
-                        _right = right + (dir === 'h' ? generalizationWidth : 0)
-                    }
-                    if (top < _top) {
-                        _top = top
-                    }
-                    if (bottom + (dir === 'v' ? generalizationHeight : 0) > _bottom) {
-                        _bottom = bottom + (dir === 'v' ? generalizationHeight : 0)
-                    }
-                })
-            }
-            let cur = {
-                left: root.left,
-                right: root.left + root.width,
-                top: root.top,
-                bottom: root.top + root.height
-            }
-            return {
-                left: cur.left < _left ? cur.left : _left,
-                right: cur.right > _right ? cur.right : _right,
-                top: cur.top < _top ? cur.top : _top,
-                bottom: cur.bottom > _bottom ? cur.bottom : _bottom
-            }
-        }
-        let {left, right, top, bottom} = walk(node)
-        return {
-            left, 
-            right,
-            top,
-            bottom,
-            generalizationLineMargin,
-            generalizationNodeMargin
-        };
+    let { left, right, top, bottom } = walk(node)
+    return {
+      left,
+      right,
+      top,
+      bottom,
+      generalizationLineMargin,
+      generalizationNodeMargin
     }
+  }
 }
 
-export default Base
+export default Base

simple-mind-map/src/layouts/CatalogOrganization.js

@@ -1,386 +1,430 @@
-import Base from './Base';
-import {
-    walk,
-    asyncRun
-} from '../utils'
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-12 22:25:58 
- * @Desc: 目录组织图 
+/**
+ * @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)
-    }
+  /**
+   * @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-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) && childrenList.length > 1) {
-                let _offset = index === 0 ? -addWidth : addWidth
-                node.left += _offset
-                if (node.children && node.children.length && !node.hasCustomPosition()) {
-                    this.updateChildren(node.children, 'left', _offset)
-                }
-            }
-            childrenList.forEach((item, _index) => {
-                if (item.hasCustomPosition()) {// 适配自定义位置
-                    return
-                }
-                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) => {
-                if (item.hasCustomPosition()) {// 适配自定义位置
-                    return
-                }
-                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, style) {
-        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 = Infinity
-            let maxx = -Infinity
-            node.children.forEach((item, index) => {
-                let x2 = item.left +item.width / 2
-                let y2 = item.top
-                if (x2 < minx) {
-                    minx = x2
-                }
-                if (x2 > maxx) {
-                    maxx = x2
-                }
-                let path = `M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}`
-                // 竖线
-                lines[index].plot(path)
-                style && style(lines[index], item)
-            })
-            minx = Math.min(minx, x1)
-            maxx = Math.max(maxx, x1)
-            // 父节点的竖线
-            let line1 = this.draw.path()
-            node.style.line(line1)
-            line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
-            node._lines.push(line1)
-            style && style(line1, node)
-            // 水平线
-            if (len > 0) {
-                let lin2 = this.draw.path()
-                node.style.line(lin2)
-                lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
-                node._lines.push(lin2)
-                style && style(lin2, node)
-            }
+  /**
+   * 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 {
-            // 非根节点
-            let y1 = top + height
-            let maxy = -Infinity
-            let x2 = node.left + node.width * 0.3
-            node.children.forEach((item, index) => {
-                // 为了适配自定义位置，下面做了各种位置的兼容
-                let y2 = item.top + item.height / 2
-                if (y2 > maxy) {
-                    maxy = y2
-                }
-                // 水平线
-                let path = ''
-                let _left = item.left
-                let _isLeft = item.left + item.width < x2
-                let _isXCenter = false
-                if (_isLeft) {
-                    // 水平位置在父节点左边
-                    _left = item.left + item.width
-                } else if (item.left < x2 && item.left + item.width > x2) {
-                    // 水平位置在父节点之间
-                    _isXCenter = true
-                    y2 = item.top
-                    maxy = y2
-                }   
-                if (y2 > top && y2 < y1) {
-                    // 自定义位置的情况：垂直位置节点在父节点之间
-                    path = `M ${_isLeft ? node.left : node.left + node.width},${y2} L ${_left},${y2}`
-                } else if (y2 < y1) {
-                    // 自定义位置的情况：垂直位置节点在父节点上面
-                    if (_isXCenter) {
-                        y2 = item.top + item.height
-                        _left = x2
-                    }
-                    path = `M ${x2},${top} L ${x2},${y2} L ${_left},${y2}`
-                } else {
-                    if (_isXCenter) {
-                        _left = x2
-                    }
-                    path = `M ${x2},${y2} L ${_left},${y2}`
-                }
-                lines[index].plot(path)
-                style && style(lines[index], item)
+          // 非根节点
+          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
             })
-            // 竖线
-            if (len > 0) {
-                let lin2 = this.draw.path()
-                expandBtnSize = len > 0 ? expandBtnSize : 0
-                node.style.line(lin2)
-                if (maxy < y1 + expandBtnSize) {
-                    lin2.hide()
-                } else {
-                    lin2.plot(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
-                    lin2.show()
-                }
-                node._lines.push(lin2)
-                style && style(lin2, node)
-            }
+          } 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
+    )
+  }
 
-    /** 
-     * @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)
+  /**
+   * 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
+    )
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-07-30 08:30:35 
-     * @Desc: 创建概要节点 
-     */
-    renderGeneralization(node, gLine, gNode) {
-        let { top, bottom, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h')
-        let x1 = right + generalizationLineMargin
-        let y1 = top
-        let x2 = right + generalizationLineMargin
-        let y2 = bottom
-        let cx = x1 + 20
-        let cy = y1 + (y2 - y1) / 2
-        let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-        gLine.plot(path)
-        gNode.left = right + generalizationNodeMargin
-        gNode.top = top + (bottom - top - gNode.height) / 2
+  /**
+   * 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) &&
+        childrenList.length > 1
+      ) {
+        let _offset = index === 0 ? -addWidth : addWidth
+        node.left += _offset
+        if (
+          node.children &&
+          node.children.length &&
+          !node.hasCustomPosition()
+        ) {
+          this.updateChildren(node.children, 'left', _offset)
+        }
+      }
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        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) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        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, style) {
+    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 = Infinity
+      let maxx = -Infinity
+      node.children.forEach((item, index) => {
+        let x2 = item.left + item.width / 2
+        let y2 = item.top
+        if (x2 < minx) {
+          minx = x2
+        }
+        if (x2 > maxx) {
+          maxx = x2
+        }
+        let path = `M ${x2},${y1 + s1} L ${x2},${
+          y1 + s1 > y2 ? y2 + item.height : y2
+        }`
+        // 竖线
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      })
+      minx = Math.min(minx, x1)
+      maxx = Math.max(maxx, x1)
+      // 父节点的竖线
+      let line1 = this.draw.path()
+      node.style.line(line1)
+      line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`)
+      node._lines.push(line1)
+      style && style(line1, node)
+      // 水平线
+      if (len > 0) {
+        let lin2 = this.draw.path()
+        node.style.line(lin2)
+        lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
+        node._lines.push(lin2)
+        style && style(lin2, node)
+      }
+    } else {
+      // 非根节点
+      let y1 = top + height
+      let maxy = -Infinity
+      let x2 = node.left + node.width * 0.3
+      node.children.forEach((item, index) => {
+        // 为了适配自定义位置，下面做了各种位置的兼容
+        let y2 = item.top + item.height / 2
+        if (y2 > maxy) {
+          maxy = y2
+        }
+        // 水平线
+        let path = ''
+        let _left = item.left
+        let _isLeft = item.left + item.width < x2
+        let _isXCenter = false
+        if (_isLeft) {
+          // 水平位置在父节点左边
+          _left = item.left + item.width
+        } else if (item.left < x2 && item.left + item.width > x2) {
+          // 水平位置在父节点之间
+          _isXCenter = true
+          y2 = item.top
+          maxy = y2
+        }
+        if (y2 > top && y2 < y1) {
+          // 自定义位置的情况：垂直位置节点在父节点之间
+          path = `M ${
+            _isLeft ? node.left : node.left + node.width
+          },${y2} L ${_left},${y2}`
+        } else if (y2 < y1) {
+          // 自定义位置的情况：垂直位置节点在父节点上面
+          if (_isXCenter) {
+            y2 = item.top + item.height
+            _left = x2
+          }
+          path = `M ${x2},${top} L ${x2},${y2} L ${_left},${y2}`
+        } else {
+          if (_isXCenter) {
+            _left = x2
+          }
+          path = `M ${x2},${y2} L ${_left},${y2}`
+        }
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      })
+      // 竖线
+      if (len > 0) {
+        let lin2 = this.draw.path()
+        expandBtnSize = len > 0 ? expandBtnSize : 0
+        node.style.line(lin2)
+        if (maxy < y1 + expandBtnSize) {
+          lin2.hide()
+        } else {
+          lin2.plot(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
+          lin2.show()
+        }
+        node._lines.push(lin2)
+        style && style(lin2, node)
+      }
+    }
+  }
+
+  /**
+   * @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
+      )
+    }
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2022-07-30 08:30:35
+   * @Desc: 创建概要节点
+   */
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      top,
+      bottom,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h')
+    let x1 = right + generalizationLineMargin
+    let y1 = top
+    let x2 = right + generalizationLineMargin
+    let y2 = bottom
+    let cx = x1 + 20
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left = right + generalizationNodeMargin
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
 }
 
-export default CatalogOrganization
+export default CatalogOrganization

simple-mind-map/src/layouts/LogicalStructure.js

@@ -1,287 +1,308 @@
-import Base from './Base';
-import {
-    walk,
-    asyncRun
-} from '../utils'
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-12 22:25:58 
- * @Desc: 逻辑结构图 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-12 22:25:58
+ * @Desc: 逻辑结构图
  */
 class LogicalStructure extends Base {
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-12 22:26:31 
-     * @Desc: 构造函数 
-     */
-    constructor(opt = {}) {
-        super(opt)
-    }
+  /**
+   * @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-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) => {
-            let newNode = this.createNode(cur, parent, isRoot, layerIndex)
-            // 根节点定位在画布中心位置
-            if (isRoot) {
-                this.setNodeCenter(newNode)
-            } else {
-                // 非根节点
-                // 定位到父节点右侧
-                newNode.left = parent._node.left + parent._node.width + this.getMarginX(layerIndex)
-            }
-            if (!cur.data.expand) {
-                return true;
-            }
-        }, (cur, parent, isRoot, layerIndex) => {
-            // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
-            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)
-    }
-
-    /** 
-     * 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)
-                // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
-                let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
-                let totalTop = top + marginY
-                node.children.forEach((cur) => {
-                    cur.top = totalTop
-                    totalTop += 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 difference = node.childrenAreaHeight - this.getMarginY(layerIndex + 1) * 2 - node.height
-            if (difference > 0) {
-                this.updateBrothers(node, difference / 2)
-            }
-        }, null, true)
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2021-04-07 14:26:03 
-     * @Desc: 更新兄弟节点的top
-     */
-    updateBrothers(node, addHeight) {
-        if (node.parent) {
-            let childrenList = node.parent.children
-            let index = childrenList.findIndex((item) => {
-                return item === node
-            })
-            childrenList.forEach((item, _index) => {
-                if (item === node || item.hasCustomPosition()) {// 适配自定义位置
-                    return
-                }
-                let _offset = 0
-                // 上面的节点往上移
-                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, addHeight)
-        }
-    }
-
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 14:42:48 
-     * @Desc: 绘制连线，连接该节点到其子节点
-     */
-    renderLine(node, lines, style, lineStyle) {
-        if (lineStyle === 'curve') {
-            this.renderLineCurve(node, lines, style)
-        } else if (lineStyle === 'direct') {
-            this.renderLineDirect(node, lines, style)
+  /**
+   * 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 {
-            this.renderLineStraight(node, lines, style)
+          // 非根节点
+          // 定位到父节点右侧
+          newNode.left =
+            parent._node.left + parent._node.width + this.getMarginX(layerIndex)
         }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-09-30 14:17:30 
-     * @Desc: 直线风格连线 
-     */
-    renderLineStraight(node, lines, style) {
-        if (node.children.length <= 0) {
-            return [];
+        if (!cur.data.expand) {
+          return true
         }
-        let {
-            left,
-            top,
-            width,
-            height,
-            expandBtnSize
-        } = node
-        let marginX = this.getMarginX(node.layerIndex + 1)
-        let s1 = (marginX - expandBtnSize) * 0.6
-        node.children.forEach((item, index) => {
-            let x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
-            let y1 = top + height / 2
-            let x2 = item.left
-            let y2 = item.top + item.height / 2
-            let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${x2},${y2}`
-            lines[index].plot(path)
-            style && style(lines[index], item)
-        })
-    }
+      },
+      (cur, parent, isRoot, layerIndex) => {
+        // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
+        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
+    )
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-09-30 14:34:41 
-     * @Desc: 直连风格 
-     */
-    renderLineDirect(node, lines, style) {
-        if (node.children.length <= 0) {
-            return [];
+  /**
+   * 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)
+          // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+          let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
+          let totalTop = top + marginY
+          node.children.forEach(cur => {
+            cur.top = totalTop
+            totalTop += cur.height + marginY
+          })
         }
-        let {
-            left,
-            top,
-            width,
-            height,
-            expandBtnSize
-        } = node
-        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 = `M ${x1},${y1} L ${x2},${y2}`
-            lines[index].plot(path)
-            style && style(lines[index], item)
-        })
-    }
+      },
+      null,
+      true
+    )
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-09-30 14:17:43 
-     * @Desc: 曲线风格连线 
-     */
-    renderLineCurve(node, lines, style) {
-        if (node.children.length <= 0) {
-            return [];
+  /**
+   * 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 {
-            left,
-            top,
-            width,
-            height,
-            expandBtnSize
-        } = node
-        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 = ''
-            if (node.isRoot) {
-                path = this.quadraticCurvePath(x1, y1, x2, y2)
-            } else {
-                path = this.cubicBezierPath(x1, y1, x2, y2)
-            }
-            lines[index].plot(path)
-            style && style(lines[index], item)
-        })
-    }
+        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+        let difference =
+          node.childrenAreaHeight -
+          this.getMarginY(layerIndex + 1) * 2 -
+          node.height
+        if (difference > 0) {
+          this.updateBrothers(node, difference / 2)
+        }
+      },
+      null,
+      true
+    )
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2021-04-11 19:54:26 
-     * @Desc: 渲染按钮 
-     */
-    renderExpandBtn(node, btn) {
-        let {
-            width,
-            height
-        } = node
-        let {
-            translateX,
-            translateY
-        } = btn.transform()
-        btn.translate(width - translateX, height / 2 - translateY)
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2021-04-07 14:26:03
+   * @Desc: 更新兄弟节点的top
+   */
+  updateBrothers(node, addHeight) {
+    if (node.parent) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item === node || item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 上面的节点往上移
+        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, addHeight)
     }
+  }
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-07-30 08:30:35 
-     * @Desc: 创建概要节点 
-     */
-    renderGeneralization(node, gLine, gNode) {
-        let { top, bottom, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h')
-        let x1 = right + generalizationLineMargin
-        let y1 = top
-        let x2 = right + generalizationLineMargin
-        let y2 = bottom
-        let cx = x1 + 20
-        let cy = y1 + (y2 - y1) / 2
-        let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-        gLine.plot(path)
-        gNode.left = right + generalizationNodeMargin
-        gNode.top = top + (bottom - top - gNode.height) / 2
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 14:42:48
+   * @Desc: 绘制连线，连接该节点到其子节点
+   */
+  renderLine(node, lines, style, lineStyle) {
+    if (lineStyle === 'curve') {
+      this.renderLineCurve(node, lines, style)
+    } else if (lineStyle === 'direct') {
+      this.renderLineDirect(node, lines, style)
+    } else {
+      this.renderLineStraight(node, lines, style)
     }
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-09-30 14:17:30
+   * @Desc: 直线风格连线
+   */
+  renderLineStraight(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    let marginX = this.getMarginX(node.layerIndex + 1)
+    let s1 = (marginX - expandBtnSize) * 0.6
+    node.children.forEach((item, index) => {
+      let x1 =
+        node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = item.left
+      let y2 = item.top + item.height / 2
+      let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${
+        x1 + s1
+      },${y2} L ${x2},${y2}`
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-09-30 14:34:41
+   * @Desc: 直连风格
+   */
+  renderLineDirect(node, lines, style) {
+    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 : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = item.left
+      let y2 = item.top + item.height / 2
+      let path = `M ${x1},${y1} L ${x2},${y2}`
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-09-30 14:17:43
+   * @Desc: 曲线风格连线
+   */
+  renderLineCurve(node, lines, style) {
+    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 : left + width + expandBtnSize
+      let y1 = top + height / 2
+      let x2 = 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)
+      style && style(lines[index], item)
+    })
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 19:54:26
+   * @Desc: 渲染按钮
+   */
+  renderExpandBtn(node, btn) {
+    let { width, height } = node
+    let { translateX, translateY } = btn.transform()
+    btn.translate(width - translateX, height / 2 - translateY)
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2022-07-30 08:30:35
+   * @Desc: 创建概要节点
+   */
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      top,
+      bottom,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h')
+    let x1 = right + generalizationLineMargin
+    let y1 = top
+    let x2 = right + generalizationLineMargin
+    let y2 = bottom
+    let cx = x1 + 20
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left = right + generalizationNodeMargin
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
 }
 
-export default LogicalStructure
+export default LogicalStructure

simple-mind-map/src/layouts/MindMap.js

@@ -1,336 +1,372 @@
-import Base from './Base';
-import {
-    walk,
-    asyncRun
-} from '../utils'
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-12 22:25:58 
- * @Desc: 思维导图 
+/**
+ * @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)
-    }
+  /**
+   * @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-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) => {
-                if (item.hasCustomPosition()) {// 适配自定义位置
-                    return
-                }
-                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, style, lineStyle) {
-        if (lineStyle === 'curve') {
-            this.renderLineCurve(node, lines, style)
-        } else if (lineStyle === 'direct') {
-            this.renderLineDirect(node, lines, style)
+  /**
+   * 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 {
-            this.renderLineStraight(node, lines, style)
+          // 非根节点
+          // 三级及以下节点以上级为准
+          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: 2022-09-30 14:10:47 
-     * @Desc: 直线风格连线 
-     */
-    renderLineStraight(node, lines, style) {
-        if (node.children.length <= 0) {
-            return [];
-        }
-        let {
-            left,
-            top,
-            width,
-            height,
-            expandBtnSize
-        } = node
-        let marginX = this.getMarginX(node.layerIndex + 1)
-        let s1 = (marginX - expandBtnSize) * 0.6
-        node.children.forEach((item, index) => {
-            let x1 = 0
-            let _s = 0
-            if (item.dir === 'left') {
-                _s = -s1
-                x1 = node.layerIndex === 0 ? left : left - expandBtnSize
+  /**
+   * 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 {
-                _s = s1
-                x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+              cur.top = rightTotalTop
+              rightTotalTop += cur.height + marginY
             }
-            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 = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${x2},${y2}` 
-            lines[index].plot(path)
-            style && style(lines[index], item)
-        })
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-09-30 14:34:41 
-     * @Desc: 直连风格 
-     */
-     renderLineDirect(node, lines, style) {
-        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 + expandBtnSize
-            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 = `M ${x1},${y1} L ${x2},${y2}`
-            lines[index].plot(path)
-            style && style(lines[index], item)
-        })
-    }
+      },
+      null,
+      true
+    )
+  }
 
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-09-30 14:10:56 
-     * @Desc: 曲线风格连线 
-     */
-    renderLineCurve(node, lines, style) {
-        if (node.children.length <= 0) {
-            return [];
+  /**
+   * 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 {
-            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)
-            style && style(lines[index], item)
-        })
-    }
+        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+        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
+    )
+  }
 
-    /** 
-     * @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)
+  /**
+   * 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) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        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: 2022-07-30 08:30:35 
-     * @Desc: 创建概要节点 
-     */
-    renderGeneralization(node, gLine, gNode) {
-        let isLeft = node.dir === 'left'
-        let { top, bottom, left, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h', isLeft)
-        let x = isLeft ? left - generalizationLineMargin : right + generalizationLineMargin
-        let x1 = x
-        let y1 = top
-        let x2 = x
-        let y2 = bottom
-        let cx = x1 + (isLeft ? -20 : 20)
-        let cy = y1 + (y2 - y1) / 2
-        let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-        gLine.plot(path)
-        gNode.left = x + (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) - (isLeft ? gNode.width : 0)
-        gNode.top = top + (bottom - top - gNode.height) / 2
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 14:42:48
+   * @Desc: 绘制连线，连接该节点到其子节点
+   */
+  renderLine(node, lines, style, lineStyle) {
+    if (lineStyle === 'curve') {
+      this.renderLineCurve(node, lines, style)
+    } else if (lineStyle === 'direct') {
+      this.renderLineDirect(node, lines, style)
+    } else {
+      this.renderLineStraight(node, lines, style)
     }
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-09-30 14:10:47
+   * @Desc: 直线风格连线
+   */
+  renderLineStraight(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    let marginX = this.getMarginX(node.layerIndex + 1)
+    let s1 = (marginX - expandBtnSize) * 0.6
+    node.children.forEach((item, index) => {
+      let x1 = 0
+      let _s = 0
+      if (item.dir === 'left') {
+        _s = -s1
+        x1 = node.layerIndex === 0 ? left : left - expandBtnSize
+      } else {
+        _s = s1
+        x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
+      }
+      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 = `M ${x1},${y1} L ${x1 + _s},${y1} L ${
+        x1 + _s
+      },${y2} L ${x2},${y2}`
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-09-30 14:34:41
+   * @Desc: 直连风格
+   */
+  renderLineDirect(node, lines, style) {
+    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 + expandBtnSize
+      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 = `M ${x1},${y1} L ${x2},${y2}`
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-09-30 14:10:56
+   * @Desc: 曲线风格连线
+   */
+  renderLineCurve(node, lines, style) {
+    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)
+      style && style(lines[index], item)
+    })
+  }
+
+  /**
+   * @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)
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2022-07-30 08:30:35
+   * @Desc: 创建概要节点
+   */
+  renderGeneralization(node, gLine, gNode) {
+    let isLeft = node.dir === 'left'
+    let {
+      top,
+      bottom,
+      left,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h', isLeft)
+    let x = isLeft
+      ? left - generalizationLineMargin
+      : right + generalizationLineMargin
+    let x1 = x
+    let y1 = top
+    let x2 = x
+    let y2 = bottom
+    let cx = x1 + (isLeft ? -20 : 20)
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left =
+      x +
+      (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
+      (isLeft ? gNode.width : 0)
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
 }
 
-export default MindMap
+export default MindMap

simple-mind-map/src/layouts/OrganizationStructure.js

@@ -1,280 +1,304 @@
-import Base from './Base';
-import {
-    walk,
-    asyncRun
-} from '../utils'
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-12 22:25:58 
+/**
+ * @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)
-    }
+  /**
+   * @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-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) => {
-                if (item.hasCustomPosition()) {// 适配自定义位置
-                    return
-                }
-                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, style, lineStyle) {
-        if (lineStyle === 'direct') {
-            this.renderLineDirect(node, lines, style)
+  /**
+   * 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 {
-            this.renderLineStraight(node, lines, style)
+          // 非根节点
+          // 定位到父节点下方
+          newNode.top =
+            parent._node.top + parent._node.height + this.getMarginX(layerIndex)
         }
-    }
-
-    /** 
-     * javascript comment 
-     * @Author: 王林25 
-     * @Date: 2022-09-30 14:34:41 
-     * @Desc: 直连风格 
-     */
-     renderLineDirect(node, lines, style) {
-        if (node.children.length <= 0) {
-            return [];
+        if (!cur.data.expand) {
+          return true
         }
-        let {
-            left,
-            top,
-            width,
-            height,
-        } = node
-        let x1 = left + width / 2
-        let y1 = top + height
-        node.children.forEach((item, index) => {
-            let x2 = item.left + item.width / 2
-            let y2 = item.top
-            let path = `M ${x1},${y1} L ${x2},${y2}`
-            lines[index].plot(path)
-            style && style(lines[index], item)
-        })
-    }
+      },
+      (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: 2022-09-30 14:39:07 
-     * @Desc: 直线风格连线 
-     */
-    renderLineStraight(node, lines, style) {
-        if (node.children.length <= 0) {
-            return [];
+  /**
+   * 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
+          })
         }
-        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 = Infinity
-        let maxx = -Infinity
-        let len = node.children.length
-        node.children.forEach((item, index) => {
-            let x2 = item.left + item.width / 2
-            let y2 = y1 + s1 > item.top ? item.top + item.height : item.top
-            if (x2 < minx) {
-                minx = x2
-            }
-            if (x2 > maxx) {
-                maxx = x2
-            }
-            let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
-            lines[index].plot(path)
-            style && style(lines[index], item)
-        })
-        minx = Math.min(x1, minx)
-        maxx = Math.max(x1, maxx)
-        // 父节点的竖线
-        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)
-        style && style(line1, node)
-        // 水平线
-        if (len > 0) {
-            let lin2 = this.draw.path()
-            node.style.line(lin2)
-            lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
-            node._lines.push(lin2)
-            style && style(lin2, node)
+      },
+      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
+    )
+  }
 
-    /** 
-     * @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)
+  /**
+   * 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) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        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: 2022-07-30 08:30:35 
-     * @Desc: 创建概要节点 
-     */
-    renderGeneralization(node, gLine, gNode) {
-        let { bottom, left, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'v')
-        let x1 = left
-        let y1 = bottom + generalizationLineMargin
-        let x2 = right
-        let y2 = bottom + generalizationLineMargin
-        let cx = x1 + (x2 - x1) / 2
-        let cy = y1 + 20
-        let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-        gLine.plot(path)
-        gNode.top = bottom + generalizationNodeMargin
-        gNode.left = left + (right - left - gNode.width) / 2
+  /**
+   * @Author: 王林
+   * @Date: 2021-04-11 14:42:48
+   * @Desc: 绘制连线，连接该节点到其子节点
+   */
+  renderLine(node, lines, style, lineStyle) {
+    if (lineStyle === 'direct') {
+      this.renderLineDirect(node, lines, style)
+    } else {
+      this.renderLineStraight(node, lines, style)
     }
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-09-30 14:34:41
+   * @Desc: 直连风格
+   */
+  renderLineDirect(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height } = node
+    let x1 = left + width / 2
+    let y1 = top + height
+    node.children.forEach((item, index) => {
+      let x2 = item.left + item.width / 2
+      let y2 = item.top
+      let path = `M ${x1},${y1} L ${x2},${y2}`
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-09-30 14:39:07
+   * @Desc: 直线风格连线
+   */
+  renderLineStraight(node, lines, style) {
+    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 = Infinity
+    let maxx = -Infinity
+    let len = node.children.length
+    node.children.forEach((item, index) => {
+      let x2 = item.left + item.width / 2
+      let y2 = y1 + s1 > item.top ? item.top + item.height : item.top
+      if (x2 < minx) {
+        minx = x2
+      }
+      if (x2 > maxx) {
+        maxx = x2
+      }
+      let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
+      lines[index].plot(path)
+      style && style(lines[index], item)
+    })
+    minx = Math.min(x1, minx)
+    maxx = Math.max(x1, maxx)
+    // 父节点的竖线
+    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)
+    style && style(line1, node)
+    // 水平线
+    if (len > 0) {
+      let lin2 = this.draw.path()
+      node.style.line(lin2)
+      lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`)
+      node._lines.push(lin2)
+      style && style(lin2, node)
+    }
+  }
+
+  /**
+   * @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
+    )
+  }
+
+  /**
+   * @Author: 王林
+   * @Date: 2022-07-30 08:30:35
+   * @Desc: 创建概要节点
+   */
+  renderGeneralization(node, gLine, gNode) {
+    let {
+      bottom,
+      left,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'v')
+    let x1 = left
+    let y1 = bottom + generalizationLineMargin
+    let x2 = right
+    let y2 = bottom + generalizationLineMargin
+    let cx = x1 + (x2 - x1) / 2
+    let cy = y1 + 20
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.top = bottom + generalizationNodeMargin
+    gNode.left = left + (right - left - gNode.width) / 2
+  }
 }
 
-export default OrganizationStructure
+export default OrganizationStructure

simple-mind-map/src/parse/xmind.js

@@ -1,5 +1,5 @@
-import JSZip from "jszip";
-import xmlConvert from "xml-js";
+import JSZip from 'jszip'
+import xmlConvert from 'xml-js'
 
 /**
  * javascript comment
@@ -7,35 +7,35 @@ import xmlConvert from "xml-js";
  * @Date: 2022-09-21 14:07:47
  * @Desc: 解析.xmind文件
  */
-const parseXmindFile = (file) => {
+const parseXmindFile = file => {
   return new Promise((resolve, reject) => {
     JSZip.loadAsync(file).then(
-      async (zip) => {
+      async zip => {
         try {
-          let content = "";
-          if (zip.files["content.json"]) {
-            let json = await zip.files["content.json"].async("string");
-            content = transformXmind(json);
-          } else if (zip.files["content.xml"]) {
-            let xml = await zip.files["content.xml"].async("string");
-            let json = xmlConvert.xml2json(xml);
-            content = transformOldXmind(json);
+          let content = ''
+          if (zip.files['content.json']) {
+            let json = await zip.files['content.json'].async('string')
+            content = transformXmind(json)
+          } else if (zip.files['content.xml']) {
+            let xml = await zip.files['content.xml'].async('string')
+            let json = xmlConvert.xml2json(xml)
+            content = transformOldXmind(json)
           }
           if (content) {
-            resolve(content);
+            resolve(content)
           } else {
-            reject(new Error("解析失败"));
+            reject(new Error('解析失败'))
           }
         } catch (error) {
-          reject(error);
+          reject(error)
         }
       },
-      (e) => {
-        reject(e);
+      e => {
+        reject(e)
       }
-    );
-  });
-};
+    )
+  })
+}
 
 /**
  * javascript comment
@@ -43,44 +43,44 @@ const parseXmindFile = (file) => {
  * @Date: 2022-09-21 18:57:25
  * @Desc: 转换xmind数据
  */
-const transformXmind = (content) => {
-  let data = JSON.parse(content)[0];
-  let nodeTree = data.rootTopic;
-  let newTree = {};
+const transformXmind = content => {
+  let data = JSON.parse(content)[0]
+  let nodeTree = data.rootTopic
+  let newTree = {}
   let walk = (node, newNode) => {
     newNode.data = {
       // 节点内容
-      text: node.title,
-    };
+      text: node.title
+    }
     // 节点备注
     if (node.notes) {
-      newNode.data.note = (node.notes.realHTML || node.notes.plain).content;
+      newNode.data.note = (node.notes.realHTML || node.notes.plain).content
     }
     // 超链接
     if (node.href && /^https?:\/\//.test(node.href)) {
-      newNode.data.hyperlink = node.href;
+      newNode.data.hyperlink = node.href
     }
     // 标签
     if (node.labels && node.labels.length > 0) {
-      newNode.data.tag = node.labels;
+      newNode.data.tag = node.labels
     }
     // 子节点
-    newNode.children = [];
+    newNode.children = []
     if (
       node.children &&
       node.children.attached &&
       node.children.attached.length > 0
     ) {
-      node.children.attached.forEach((item) => {
-        let newChild = {};
-        newNode.children.push(newChild);
-        walk(item, newChild);
-      });
+      node.children.attached.forEach(item => {
+        let newChild = {}
+        newNode.children.push(newChild)
+        walk(item, newChild)
+      })
     }
-  };
-  walk(nodeTree, newTree);
-  return newTree;
-};
+  }
+  walk(nodeTree, newTree)
+  return newTree
+}
 
 /**
  * javascript comment
@@ -88,86 +88,92 @@ const transformXmind = (content) => {
  * @Date: 2022-09-23 15:51:51
  * @Desc: 转换旧版xmind数据，xmind8
  */
-const transformOldXmind = (content) => {
-  let data = JSON.parse(content);
-  let elements = data.elements;
-  let root = null;
-  let getRoot = (arr) => {
+const transformOldXmind = content => {
+  let data = JSON.parse(content)
+  let elements = data.elements
+  let root = null
+  let getRoot = arr => {
     for (let i = 0; i < arr.length; i++) {
-      if (!root && arr[i].name === "topic") {
-        root = arr[i];
-        return;
+      if (!root && arr[i].name === 'topic') {
+        root = arr[i]
+        return
       }
     }
-    arr.forEach((item) => {
-      getRoot(item.elements);
-    });
-  };
-  getRoot(elements);
-  let newTree = {};
+    arr.forEach(item => {
+      getRoot(item.elements)
+    })
+  }
+  getRoot(elements)
+  let newTree = {}
   let getItemByName = (arr, name) => {
-    return arr.find((item) => {
-      return item.name === name;
-    });
-  };
+    return arr.find(item => {
+      return item.name === name
+    })
+  }
   let walk = (node, newNode) => {
-    let nodeElements = node.elements;
+    let nodeElements = node.elements
     newNode.data = {
       // 节点内容
-      text: getItemByName(nodeElements, "title").elements[0].text,
-    };
+      text: getItemByName(nodeElements, 'title').elements[0].text
+    }
     try {
       // 节点备注
-      let notesElement = getItemByName(nodeElements, "notes");
+      let notesElement = getItemByName(nodeElements, 'notes')
       if (notesElement) {
         newNode.data.note =
-          notesElement.elements[0].elements[0].elements[0].text;
+          notesElement.elements[0].elements[0].elements[0].text
       }
-    } catch (error) {}
+    } catch (error) {
+      console.log(error)
+    }
     try {
       // 超链接
       if (
         node.attributes &&
-        node.attributes["xlink:href"] &&
-        /^https?:\/\//.test(node.attributes["xlink:href"])
+        node.attributes['xlink:href'] &&
+        /^https?:\/\//.test(node.attributes['xlink:href'])
       ) {
-        newNode.data.hyperlink = node.attributes["xlink:href"];
+        newNode.data.hyperlink = node.attributes['xlink:href']
       }
-    } catch (error) {}
+    } catch (error) {
+      console.log(error)
+    }
     try {
       // 标签
-      let labelsElement = getItemByName(nodeElements, "labels");
+      let labelsElement = getItemByName(nodeElements, 'labels')
       if (labelsElement) {
-        newNode.data.tag = labelsElement.elements.map((item) => {
-          return item.elements[0].text;
-        });
+        newNode.data.tag = labelsElement.elements.map(item => {
+          return item.elements[0].text
+        })
       }
-    } catch (error) {}
-    // 子节点
-    newNode.children = [];
-    let _children = getItemByName(nodeElements, "children");
-    if (_children && _children.elements && _children.elements.length > 0) {
-      _children.elements.forEach((item) => {
-        if (item.name === "topics") {
-          item.elements.forEach((item2) => {
-            let newChild = {};
-            newNode.children.push(newChild);
-            walk(item2, newChild);
-          });
-        } else {
-          let newChild = {};
-          newNode.children.push(newChild);
-          walk(item, newChild);
-        }
-      });
+    } catch (error) {
+      console.log(error)
     }
-  };
-  walk(root, newTree);
-  return newTree;
-};
+    // 子节点
+    newNode.children = []
+    let _children = getItemByName(nodeElements, 'children')
+    if (_children && _children.elements && _children.elements.length > 0) {
+      _children.elements.forEach(item => {
+        if (item.name === 'topics') {
+          item.elements.forEach(item2 => {
+            let newChild = {}
+            newNode.children.push(newChild)
+            walk(item2, newChild)
+          })
+        } else {
+          let newChild = {}
+          newNode.children.push(newChild)
+          walk(item, newChild)
+        }
+      })
+    }
+  }
+  walk(root, newTree)
+  return newTree
+}
 
 export default {
   parseXmindFile,
   transformXmind,
-  transformOldXmind,
-};
+  transformOldXmind
+}

simple-mind-map/src/svg/btns.js

@@ -1,18 +1,18 @@
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 19:46:10 
- * @Desc: 展开按钮 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 19:46:10
+ * @Desc: 展开按钮
  */
 const open = `<svg t="1618141562310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13476" width="200" height="200"><path d="M475.136 327.168v147.968h-147.968v74.24h147.968v147.968h74.24v-147.968h147.968v-74.24h-147.968v-147.968h-74.24z m36.864-222.208c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13477"></path></svg>`
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 19:46:23 
- * @Desc: 收缩按钮 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 19:46:23
+ * @Desc: 收缩按钮
  */
 const close = `<svg t="1618141589243" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13611" width="200" height="200"><path d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13612"></path><path d="M252.928 474.624h518.144v74.24h-518.144z" p-id="13613"></path></svg>`
 
 export default {
-    open,
-    close
-}
+  open,
+  close
+}

simple-mind-map/src/svg/icons.js

@@ -1,299 +1,301 @@
 // 超链接图标
-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 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>'
+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>`
-            }
-        ]
-    }
+  {
+    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内容 
+/**
+ * @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;
+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
-}
+  hyperlink,
+  note,
+  nodeIconList,
+  getNodeIconListIcon
+}

simple-mind-map/src/themes/blueSky.js

@@ -1,53 +1,53 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 天空蓝
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(115, 161, 191)',
-    // 背景颜色
-    backgroundColor: 'rgb(251, 251, 251)',
-    // 概要连线的粗细
-    generalizationLineWidth: 1,
-    // 概要连线的颜色
-    generalizationLineColor: '#333',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(115, 161, 191)',
-        active: {
-            borderColor: 'rgb(57, 80, 96)'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(238, 243, 246)',
-        color: '#333',
-        borderColor: 'rgb(115, 161, 191)',
-        borderWidth: 1,
-        fontSize: 14,
-        active: {
-            borderColor: 'rgb(57, 80, 96)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#333',
-        active: {
-            borderColor: 'rgb(57, 80, 96)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: '#333',
-        color: '#333',
-        active: {
-            borderColor: 'rgb(57, 80, 96)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(115, 161, 191)',
+  // 背景颜色
+  backgroundColor: 'rgb(251, 251, 251)',
+  // 概要连线的粗细
+  generalizationLineWidth: 1,
+  // 概要连线的颜色
+  generalizationLineColor: '#333',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(115, 161, 191)',
+    active: {
+      borderColor: 'rgb(57, 80, 96)'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(238, 243, 246)',
+    color: '#333',
+    borderColor: 'rgb(115, 161, 191)',
+    borderWidth: 1,
+    fontSize: 14,
+    active: {
+      borderColor: 'rgb(57, 80, 96)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#333',
+    active: {
+      borderColor: 'rgb(57, 80, 96)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: '#333',
+    color: '#333',
+    active: {
+      borderColor: 'rgb(57, 80, 96)'
+    }
+  }
+})

simple-mind-map/src/themes/brainImpairedPink.js

@@ -1,53 +1,53 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 脑残粉
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(191, 115, 148)',
-    // 背景颜色
-    backgroundColor: 'rgb(251, 251, 251)',
-    // 概要连线的粗细
-    generalizationLineWidth: 1,
-    // 概要连线的颜色
-    generalizationLineColor: '#333',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(191, 115, 148)',
-        active: {
-            borderColor: 'rgb(96, 57, 74)'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(246, 238, 242)',
-        color: '#333',
-        borderColor: 'rgb(191, 115, 148)',
-        borderWidth: 1,
-        fontSize: 14,
-        active: {
-            borderColor: 'rgb(96, 57, 74)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#333',
-        active: {
-            borderColor: 'rgb(96, 57, 74)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: '#333',
-        color: '#333',
-        active: {
-            borderColor: 'rgb(96, 57, 74)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(191, 115, 148)',
+  // 背景颜色
+  backgroundColor: 'rgb(251, 251, 251)',
+  // 概要连线的粗细
+  generalizationLineWidth: 1,
+  // 概要连线的颜色
+  generalizationLineColor: '#333',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(191, 115, 148)',
+    active: {
+      borderColor: 'rgb(96, 57, 74)'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(246, 238, 242)',
+    color: '#333',
+    borderColor: 'rgb(191, 115, 148)',
+    borderWidth: 1,
+    fontSize: 14,
+    active: {
+      borderColor: 'rgb(96, 57, 74)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#333',
+    active: {
+      borderColor: 'rgb(96, 57, 74)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: '#333',
+    color: '#333',
+    active: {
+      borderColor: 'rgb(96, 57, 74)'
+    }
+  }
+})

simple-mind-map/src/themes/classic.js

@@ -1,67 +1,68 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 脑图经典
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: '#fff',
-    // 连线的粗细
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: '#fff',
-    // 背景颜色
-    backgroundColor: 'rgb(58, 65, 68)',
-    // 背景图片
-    backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzg5QTQ0NDhENzgxMUUzOENGREE4QTg0RDgzRTZDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzg5QTQ0NThENzgxMUUzOENGREE4QTg0RDgzRTZDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEQ1NDRGOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEQ1NDUwOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+e9P33AAAACVJREFUeNpisXJ0YUACTAyoAMr/+eM7EGGRZ4FQ7BycEAZAgAEAHbEGtkoQm/wAAAAASUVORK5CYII=',
-    // 背景重复
-    backgroundRepeat: 'repeat',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(233, 223, 152)',
-        color: '#333',
-        fontSize: 24,
-        borderRadius: 21,
-        active: {
-            fillColor: 'rgb(254, 219, 0)',
-            borderColor: 'transparent'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(164, 197, 192)',
-        borderColor: 'transparent',
-        color: '#333',
-        fontSize: 16,
-        borderRadius: 10,
-        active: {
-            fillColor: 'rgb(254, 219, 0)',
-            borderColor: 'transparent'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#fff',
-        fontWeight: 'bold',
-        active: {
-            fillColor: 'rgb(254, 219, 0)',
-            borderColor: 'transparent'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: 'transparent',
-        color: '#333',
-        active: {
-            fillColor: 'rgb(254, 219, 0)',
-            borderColor: 'transparent'
-        }
+  // 连线的颜色
+  lineColor: '#fff',
+  // 连线的粗细
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: '#fff',
+  // 背景颜色
+  backgroundColor: 'rgb(58, 65, 68)',
+  // 背景图片
+  backgroundImage:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzg5QTQ0NDhENzgxMUUzOENGREE4QTg0RDgzRTZDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzg5QTQ0NThENzgxMUUzOENGREE4QTg0RDgzRTZDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEQ1NDRGOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEQ1NDUwOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+e9P33AAAACVJREFUeNpisXJ0YUACTAyoAMr/+eM7EGGRZ4FQ7BycEAZAgAEAHbEGtkoQm/wAAAAASUVORK5CYII=',
+  // 背景重复
+  backgroundRepeat: 'repeat',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(233, 223, 152)',
+    color: '#333',
+    fontSize: 24,
+    borderRadius: 21,
+    active: {
+      fillColor: 'rgb(254, 219, 0)',
+      borderColor: 'transparent'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(164, 197, 192)',
+    borderColor: 'transparent',
+    color: '#333',
+    fontSize: 16,
+    borderRadius: 10,
+    active: {
+      fillColor: 'rgb(254, 219, 0)',
+      borderColor: 'transparent'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#fff',
+    fontWeight: 'bold',
+    active: {
+      fillColor: 'rgb(254, 219, 0)',
+      borderColor: 'transparent'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: 'transparent',
+    color: '#333',
+    active: {
+      fillColor: 'rgb(254, 219, 0)',
+      borderColor: 'transparent'
+    }
+  }
+})

simple-mind-map/src/themes/classic2.js

@@ -1,59 +1,59 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 经典2
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(51, 51, 51)',
-    // 连线的粗细
-    lineWidth: 2,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(51, 51, 51)',
-    // 背景颜色
-    backgroundColor: '#fff',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(18, 187, 55)',
-        color: '#fff',
-        fontSize: 24,
-        borderRadius: 10,
-        active: {
-            borderColor: 'rgb(51, 51, 51)'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(241, 242, 241)',
-        borderColor: 'transparent',
-        color: '#1a1a1a',
-        fontSize: 18,
-        borderRadius: 10,
-        active: {
-            borderColor: 'rgb(51, 51, 51)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 14,
-        color: '#1a1a1a',
-        active: {
-            borderColor: 'rgb(51, 51, 51)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: 'rgb(51, 51, 51)',
-        borderWidth: 2,
-        color: '#1a1a1a',
-        active: {
-            borderColor: 'rgb(18, 187, 55)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(51, 51, 51)',
+  // 连线的粗细
+  lineWidth: 2,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(51, 51, 51)',
+  // 背景颜色
+  backgroundColor: '#fff',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(18, 187, 55)',
+    color: '#fff',
+    fontSize: 24,
+    borderRadius: 10,
+    active: {
+      borderColor: 'rgb(51, 51, 51)'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(241, 242, 241)',
+    borderColor: 'transparent',
+    color: '#1a1a1a',
+    fontSize: 18,
+    borderRadius: 10,
+    active: {
+      borderColor: 'rgb(51, 51, 51)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: '#1a1a1a',
+    active: {
+      borderColor: 'rgb(51, 51, 51)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: 'rgb(51, 51, 51)',
+    borderWidth: 2,
+    color: '#1a1a1a',
+    active: {
+      borderColor: 'rgb(18, 187, 55)'
+    }
+  }
+})

simple-mind-map/src/themes/classic3.js

@@ -1,62 +1,62 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 经典3
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(94, 202, 110)',
-    // 连线的粗细
-    lineWidth: 2,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: '#1a1a1a',
-    // 背景颜色
-    backgroundColor: 'rgb(241, 241, 241)',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(255, 245, 214)',
-        color: '#1a1a1a',
-        fontSize: 24,
-        borderRadius: 10,
-        borderColor: 'rgb(249, 199, 84)',
-        borderWidth: 1,
-        active: {
-            borderColor: 'rgb(94, 202, 110)'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(255, 245, 214)',
-        borderColor: 'rgb(249, 199, 84)',
-        borderWidth: 1,
-        color: '#1a1a1a',
-        fontSize: 18,
-        borderRadius: 10,
-        active: {
-            borderColor: 'rgb(94, 202, 110)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 14,
-        color: '#1a1a1a',
-        active: {
-            borderColor: 'rgb(94, 202, 110)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: '#1a1a1a',
-        color: '#1a1a1a',
-        borderWidth: 2,
-        active: {
-            borderColor: 'rgb(94, 202, 110)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(94, 202, 110)',
+  // 连线的粗细
+  lineWidth: 2,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: '#1a1a1a',
+  // 背景颜色
+  backgroundColor: 'rgb(241, 241, 241)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(255, 245, 214)',
+    color: '#1a1a1a',
+    fontSize: 24,
+    borderRadius: 10,
+    borderColor: 'rgb(249, 199, 84)',
+    borderWidth: 1,
+    active: {
+      borderColor: 'rgb(94, 202, 110)'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(255, 245, 214)',
+    borderColor: 'rgb(249, 199, 84)',
+    borderWidth: 1,
+    color: '#1a1a1a',
+    fontSize: 18,
+    borderRadius: 10,
+    active: {
+      borderColor: 'rgb(94, 202, 110)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: '#1a1a1a',
+    active: {
+      borderColor: 'rgb(94, 202, 110)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: '#1a1a1a',
+    color: '#1a1a1a',
+    borderWidth: 2,
+    active: {
+      borderColor: 'rgb(94, 202, 110)'
+    }
+  }
+})

simple-mind-map/src/themes/classic4.js

@@ -1,65 +1,65 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 经典4
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(30, 53, 86)',
-    // 连线的粗细
-    lineWidth: 2,
-    // 概要连线的粗细
-    generalizationLineWidth: 2,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(56, 123, 233)',
-    // 背景颜色
-    backgroundColor: 'rgb(241, 241, 241)',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(30, 53, 86)',
-        color: '#fff',
-        fontSize: 24,
-        borderRadius: 10,
-        borderColor: 'rgb(189, 197, 201)',
-        borderWidth: 2,
-        active: {
-            borderColor: 'rgb(169, 218, 218)'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(169, 218, 218)',
-        borderColor: 'rgb(30, 53, 86)',
-        borderWidth: 2,
-        color: '#fff',
-        fontSize: 18,
-        borderRadius: 10,
-        active: {
-            borderColor: 'rgb(56, 123, 233)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 14,
-        color: 'rgb(30, 53, 86)',
-        borderColor: 'rgb(30, 53, 86)',
-        borderWidth: 1,
-        marginY: 20,
-        active: {
-            borderColor: 'rgb(169, 218, 218)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: 'rgb(56, 123, 233)',
-        borderColor: 'rgb(56, 123, 233)',
-        color: '#fff',
-        borderWidth: 0,
-        active: {
-            borderColor: 'rgb(169, 218, 218)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(30, 53, 86)',
+  // 连线的粗细
+  lineWidth: 2,
+  // 概要连线的粗细
+  generalizationLineWidth: 2,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(56, 123, 233)',
+  // 背景颜色
+  backgroundColor: 'rgb(241, 241, 241)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(30, 53, 86)',
+    color: '#fff',
+    fontSize: 24,
+    borderRadius: 10,
+    borderColor: 'rgb(189, 197, 201)',
+    borderWidth: 2,
+    active: {
+      borderColor: 'rgb(169, 218, 218)'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(169, 218, 218)',
+    borderColor: 'rgb(30, 53, 86)',
+    borderWidth: 2,
+    color: '#fff',
+    fontSize: 18,
+    borderRadius: 10,
+    active: {
+      borderColor: 'rgb(56, 123, 233)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(30, 53, 86)',
+    borderColor: 'rgb(30, 53, 86)',
+    borderWidth: 1,
+    marginY: 20,
+    active: {
+      borderColor: 'rgb(169, 218, 218)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: 'rgb(56, 123, 233)',
+    borderColor: 'rgb(56, 123, 233)',
+    color: '#fff',
+    borderWidth: 0,
+    active: {
+      borderColor: 'rgb(169, 218, 218)'
+    }
+  }
+})

simple-mind-map/src/themes/classicBlue.js

@@ -1,56 +1,56 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 经典蓝
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(51, 51, 51)',
-    // 连线的粗细
-    lineWidth: 2,
-    // 概要连线的粗细
-    generalizationLineWidth: 2,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(51, 51, 51)',
-    // 背景颜色
-    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)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: 'rgb(51, 51, 51)',
-        color: '#333',
-        active: {
-            borderColor: 'rgb(94, 199, 248)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(51, 51, 51)',
+  // 连线的粗细
+  lineWidth: 2,
+  // 概要连线的粗细
+  generalizationLineWidth: 2,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(51, 51, 51)',
+  // 背景颜色
+  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)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: 'rgb(51, 51, 51)',
+    color: '#333',
+    active: {
+      borderColor: 'rgb(94, 199, 248)'
+    }
+  }
+})

simple-mind-map/src/themes/classicGreen.js

@@ -1,55 +1,55 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 经典绿
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(123, 199, 120)',
-    // 背景颜色
-    backgroundColor: 'rgb(236, 245, 231)',
-    // 概要连线的粗细
-    generalizationLineWidth: 2,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(123, 199, 120)',
-    // 根节点样式
-    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)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: 'rgb(123, 199, 120)',
-        borderColor: 'transparent',
-        borderWidth: 2,
-        color: '#fff',
-        active: {
-            borderColor: 'rgb(94, 199, 248)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(123, 199, 120)',
+  // 背景颜色
+  backgroundColor: 'rgb(236, 245, 231)',
+  // 概要连线的粗细
+  generalizationLineWidth: 2,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(123, 199, 120)',
+  // 根节点样式
+  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)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: 'rgb(123, 199, 120)',
+    borderColor: 'transparent',
+    borderWidth: 2,
+    color: '#fff',
+    active: {
+      borderColor: 'rgb(94, 199, 248)'
+    }
+  }
+})

simple-mind-map/src/themes/dark.js

@@ -1,58 +1,58 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 暗色
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(17, 68, 23)',
-    // 连线的粗细
-    lineWidth: 2,
-    // 概要连线的粗细
-    generalizationLineWidth: 2,
-    // 概要连线的颜色
-    generalizationLineColor: '#fff',
-    // 背景颜色
-    backgroundColor: 'rgb(15, 16, 17)',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(28, 178, 43)',
-        color: '#fff',
-        fontSize: 24,
-        borderRadius: 10,
-        active: {
-            borderColor: 'rgb(17, 68, 23)'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(55, 56, 58)',
-        color: 'rgb(147,148,149)',
-        fontSize: 18,
-        borderRadius: 10,
-        borderWidth: 0,
-        active: {
-            borderColor: 'rgb(17, 68, 23)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 14,
-        color: 'rgb(147, 148, 149)',
-        active: {
-            borderColor: 'rgb(17, 68, 23)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: 'transparent',
-        color: '#333',
-        active: {
-            borderColor: 'rgb(17, 68, 23)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(17, 68, 23)',
+  // 连线的粗细
+  lineWidth: 2,
+  // 概要连线的粗细
+  generalizationLineWidth: 2,
+  // 概要连线的颜色
+  generalizationLineColor: '#fff',
+  // 背景颜色
+  backgroundColor: 'rgb(15, 16, 17)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(28, 178, 43)',
+    color: '#fff',
+    fontSize: 24,
+    borderRadius: 10,
+    active: {
+      borderColor: 'rgb(17, 68, 23)'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(55, 56, 58)',
+    color: 'rgb(147,148,149)',
+    fontSize: 18,
+    borderRadius: 10,
+    borderWidth: 0,
+    active: {
+      borderColor: 'rgb(17, 68, 23)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 14,
+    color: 'rgb(147, 148, 149)',
+    active: {
+      borderColor: 'rgb(17, 68, 23)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: 'transparent',
+    color: '#333',
+    active: {
+      borderColor: 'rgb(17, 68, 23)'
+    }
+  }
+})

simple-mind-map/src/themes/dark2.js

@@ -1,60 +1,60 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 暗色2
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(75, 81, 78)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(255, 119, 34)',
-    // 背景颜色
-    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)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: 'transparent',
-        borderColor: 'rgb(255, 119, 34)',
-        borderWidth: 2,
-        color: 'rgb(204, 204, 204)',
-        active: {
-            borderColor: 'rgb(254, 199, 13)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(75, 81, 78)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(255, 119, 34)',
+  // 背景颜色
+  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)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: 'transparent',
+    borderColor: 'rgb(255, 119, 34)',
+    borderWidth: 2,
+    color: 'rgb(204, 204, 204)',
+    active: {
+      borderColor: 'rgb(254, 199, 13)'
+    }
+  }
+})

simple-mind-map/src/themes/default.js

@@ -1,134 +1,144 @@
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 10:19:55 
- * @Desc: 默认主题 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 10:19:55
+ * @Desc: 默认主题
  */
 export default {
-    // 节点内边距
-    paddingX: 15,
-    paddingY: 5,
-    // 图片显示的最大宽度
-    imgMaxWidth: 100,
-    // 图片显示的最大高度
-    imgMaxHeight: 100,
-    // icon的大小
-    iconSize: 20,
-    // 连线的粗细
-    lineWidth: 1,
-    // 连线的颜色
-    lineColor: '#549688',
-    // 连线样式
-    lineDasharray: 'none',
-    // 连线风格
-    lineStyle: 'straight',// 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
-    // 概要连线的粗细
-    generalizationLineWidth: 1,
-    // 概要连线的颜色
-    generalizationLineColor: '#549688',
-    // 概要曲线距节点的距离
-    generalizationLineMargin: 0,
-    // 概要节点距节点的距离
-    generalizationNodeMargin: 20,
-    // 背景颜色
-    backgroundColor: '#fafafa',
-    // 背景图片
-    backgroundImage: 'none',
-    // 背景重复
-    backgroundRepeat: 'no-repeat',
-    // 根节点样式
-    root: {
-        shape: 'rectangle',
-        fillColor: '#549688',
-        fontFamily: '微软雅黑, Microsoft YaHei',
-        color: '#fff',
-        fontSize: 16,
-        fontWeight: 'bold',
-        fontStyle: 'normal',
-        lineHeight: 1.5,
-        borderColor: 'transparent',
-        borderWidth: 0,
-        borderDasharray: 'none',
-        borderRadius: 5,
-        textDecoration: 'none',
-        active: {
-            borderColor: 'rgb(57, 80, 96)',
-            borderWidth: 3,
-            borderDasharray: 'none',
-        }
-    },
-    // 二级节点样式
-    second: {
-        shape: 'rectangle',
-        marginX: 100,
-        marginY: 40,
-        fillColor: '#fff',
-        fontFamily: '微软雅黑, Microsoft YaHei',
-        color: '#565656',
-        fontSize: 16,
-        fontWeight: 'noraml',
-        fontStyle: 'normal',
-        lineHeight: 1.5,
-        borderColor: '#549688',
-        borderWidth: 1,
-        borderDasharray: 'none',
-        borderRadius: 5,
-        textDecoration: 'none',
-        active: {
-            borderColor: 'rgb(57, 80, 96)',
-            borderWidth: 3,
-            borderDasharray: 'none',
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        shape: 'rectangle',
-        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,
-        borderDasharray: 'none',
-        textDecoration: 'none',
-        active: {
-            borderColor: 'rgb(57, 80, 96)',
-            borderWidth: 3,
-            borderDasharray: 'none',
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        shape: 'rectangle',
-        marginX: 100,
-        marginY: 40,
-        fillColor: '#fff',
-        fontFamily: '微软雅黑, Microsoft YaHei',
-        color: '#565656',
-        fontSize: 16,
-        fontWeight: 'noraml',
-        fontStyle: 'normal',
-        lineHeight: 1.5,
-        borderColor: '#549688',
-        borderWidth: 1,
-        borderDasharray: 'none',
-        borderRadius: 5,
-        textDecoration: 'none',
-        active: {
-            borderColor: 'rgb(57, 80, 96)',
-            borderWidth: 3,
-            borderDasharray: 'none',
-        }
+  // 节点内边距
+  paddingX: 15,
+  paddingY: 5,
+  // 图片显示的最大宽度
+  imgMaxWidth: 100,
+  // 图片显示的最大高度
+  imgMaxHeight: 100,
+  // icon的大小
+  iconSize: 20,
+  // 连线的粗细
+  lineWidth: 1,
+  // 连线的颜色
+  lineColor: '#549688',
+  // 连线样式
+  lineDasharray: 'none',
+  // 连线风格
+  lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线（curve）、直线（straight）、直连（direct）
+  // 概要连线的粗细
+  generalizationLineWidth: 1,
+  // 概要连线的颜色
+  generalizationLineColor: '#549688',
+  // 概要曲线距节点的距离
+  generalizationLineMargin: 0,
+  // 概要节点距节点的距离
+  generalizationNodeMargin: 20,
+  // 背景颜色
+  backgroundColor: '#fafafa',
+  // 背景图片
+  backgroundImage: 'none',
+  // 背景重复
+  backgroundRepeat: 'no-repeat',
+  // 根节点样式
+  root: {
+    shape: 'rectangle',
+    fillColor: '#549688',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: 'transparent',
+    borderWidth: 0,
+    borderDasharray: 'none',
+    borderRadius: 5,
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
     }
+  },
+  // 二级节点样式
+  second: {
+    shape: 'rectangle',
+    marginX: 100,
+    marginY: 40,
+    fillColor: '#fff',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#565656',
+    fontSize: 16,
+    fontWeight: 'noraml',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: '#549688',
+    borderWidth: 1,
+    borderDasharray: 'none',
+    borderRadius: 5,
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    shape: 'rectangle',
+    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,
+    borderDasharray: 'none',
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    shape: 'rectangle',
+    marginX: 100,
+    marginY: 40,
+    fillColor: '#fff',
+    fontFamily: '微软雅黑, Microsoft YaHei',
+    color: '#565656',
+    fontSize: 16,
+    fontWeight: 'noraml',
+    fontStyle: 'normal',
+    lineHeight: 1.5,
+    borderColor: '#549688',
+    borderWidth: 1,
+    borderDasharray: 'none',
+    borderRadius: 5,
+    textDecoration: 'none',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
+    }
+  }
 }
 
 // 支持激活样式的属性
 // 简单来说，会改变节点大小的都不支持在激活时设置，为了性能考虑，节点切换激活态时不会重新计算节点大小
-export const supportActiveStyle = ['fillColor', 'color', 'fontWeight', 'fontStyle', 'borderColor', 'borderWidth', 'borderDasharray', 'borderRadius', 'textDecoration']
+export const supportActiveStyle = [
+  'fillColor',
+  'color',
+  'fontWeight',
+  'fontStyle',
+  'borderColor',
+  'borderWidth',
+  'borderDasharray',
+  'borderRadius',
+  'textDecoration'
+]
 
-export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']
+export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']

simple-mind-map/src/themes/earthYellow.js

@@ -1,53 +1,53 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 泥土黄
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(191, 147, 115)',
-    // 背景颜色
-    backgroundColor: 'rgb(251, 251, 251)',
-    // 概要连线的粗细
-    generalizationLineWidth: 1,
-    // 概要连线的颜色
-    generalizationLineColor: '#333',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(191, 147, 115)',
-        active: {
-            borderColor: 'rgb(96, 73, 57)'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(246, 242, 238)',
-        color: '#333',
-        borderColor: 'rgb(191, 147, 115)',
-        borderWidth: 1,
-        fontSize: 14,
-        active: {
-            borderColor: 'rgb(96, 73, 57)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#333',
-        active: {
-            borderColor: 'rgb(96, 73, 57)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: '#333',
-        color: '#333',
-        active: {
-            borderColor: 'rgb(96, 73, 57)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(191, 147, 115)',
+  // 背景颜色
+  backgroundColor: 'rgb(251, 251, 251)',
+  // 概要连线的粗细
+  generalizationLineWidth: 1,
+  // 概要连线的颜色
+  generalizationLineColor: '#333',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(191, 147, 115)',
+    active: {
+      borderColor: 'rgb(96, 73, 57)'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(246, 242, 238)',
+    color: '#333',
+    borderColor: 'rgb(191, 147, 115)',
+    borderWidth: 1,
+    fontSize: 14,
+    active: {
+      borderColor: 'rgb(96, 73, 57)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#333',
+    active: {
+      borderColor: 'rgb(96, 73, 57)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: '#333',
+    color: '#333',
+    active: {
+      borderColor: 'rgb(96, 73, 57)'
+    }
+  }
+})

simple-mind-map/src/themes/freshGreen.js

@@ -1,40 +1,40 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
- * @Desc: 清新绿 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
+ * @Desc: 清新绿
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: '#333',
-    // 背景颜色
-    backgroundColor: '#d1f6ec',
-    // 概要连线的粗细
-    generalizationLineWidth: 1,
-    // 概要连线的颜色
-    generalizationLineColor: '#333',
-    // 根节点样式
-    root: {
-        fillColor: '#1fb27d'
-    },
-    // 二级节点样式
-    second: {
-        fillColor: '#fff',
-        color: '#565656',
-        borderColor: 'transparent',
-        borderWidth: 0
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: '#333',
-        color: '#333',
-        active: {
-            borderColor: 'rgb(57, 80, 96)',
-            borderWidth: 3,
-            borderDasharray: 'none',
-        }
+  // 连线的颜色
+  lineColor: '#333',
+  // 背景颜色
+  backgroundColor: '#d1f6ec',
+  // 概要连线的粗细
+  generalizationLineWidth: 1,
+  // 概要连线的颜色
+  generalizationLineColor: '#333',
+  // 根节点样式
+  root: {
+    fillColor: '#1fb27d'
+  },
+  // 二级节点样式
+  second: {
+    fillColor: '#fff',
+    color: '#565656',
+    borderColor: 'transparent',
+    borderWidth: 0
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: '#333',
+    color: '#333',
+    active: {
+      borderColor: 'rgb(57, 80, 96)',
+      borderWidth: 3,
+      borderDasharray: 'none'
     }
-})
+  }
+})

simple-mind-map/src/themes/freshRed.js

@@ -1,53 +1,53 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 清新红
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(191, 115, 115)',
-    // 背景颜色
-    backgroundColor: 'rgb(251, 251, 251)',
-    // 概要连线的粗细
-    generalizationLineWidth: 1,
-    // 概要连线的颜色
-    generalizationLineColor: '#333',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(191, 115, 115)',
-        active: {
-            borderColor: 'rgb(96, 57, 57)'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(246, 238, 238)',
-        color: '#333',
-        borderColor: 'rgb(191, 115, 115)',
-        borderWidth: 1,
-        fontSize: 14,
-        active: {
-            borderColor: 'rgb(96, 57, 57)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#333',
-        active: {
-            borderColor: 'rgb(96, 57, 57)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: '#333',
-        color: '#333',
-        active: {
-            borderColor: 'rgb(96, 57, 57)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(191, 115, 115)',
+  // 背景颜色
+  backgroundColor: 'rgb(251, 251, 251)',
+  // 概要连线的粗细
+  generalizationLineWidth: 1,
+  // 概要连线的颜色
+  generalizationLineColor: '#333',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(191, 115, 115)',
+    active: {
+      borderColor: 'rgb(96, 57, 57)'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(246, 238, 238)',
+    color: '#333',
+    borderColor: 'rgb(191, 115, 115)',
+    borderWidth: 1,
+    fontSize: 14,
+    active: {
+      borderColor: 'rgb(96, 57, 57)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#333',
+    active: {
+      borderColor: 'rgb(96, 57, 57)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: '#333',
+    color: '#333',
+    active: {
+      borderColor: 'rgb(96, 57, 57)'
+    }
+  }
+})

simple-mind-map/src/themes/gold.js

@@ -1,59 +1,59 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 金色vip
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(51, 56, 62)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(127, 93, 64)',
-    // 背景颜色
-    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)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: 'rgb(127, 93, 64)',
-        borderColor: 'transparent',
-        color: 'rgb(255, 214, 175)',
-        active: {
-            borderColor: 'rgb(51, 56, 62)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(51, 56, 62)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(127, 93, 64)',
+  // 背景颜色
+  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)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: 'rgb(127, 93, 64)',
+    borderColor: 'transparent',
+    color: 'rgb(255, 214, 175)',
+    active: {
+      borderColor: 'rgb(51, 56, 62)'
+    }
+  }
+})

simple-mind-map/src/themes/greenLeaf.js

@@ -1,60 +1,60 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 绿叶
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(40, 193, 84)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(251, 158, 0)',
-    // 背景颜色
-    backgroundColor: 'rgb(238, 255, 243)',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(25, 193, 73)',
-        color: '#fff',
-        borderColor: '',
-        borderWidth: 0,
-        active: {
-            borderColor: '#222',
-            borderWidth: 3,
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: '#fff',
-        color: 'rgb(69, 149, 96)',
-        borderColor: '',
-        borderWidth: 0,
-        fontSize: 14,
-        active: {
-            borderColor: 'rgb(25, 193, 73)',
-            borderWidth: 2
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#222',
-        active: {
-            borderColor: 'rgb(25, 193, 73)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: 'rgb(251, 158, 0)',
-        borderWidth: 2,
-        color: 'rgb(51, 51, 51)',
-        active: {
-            borderColor: 'rgb(25, 193, 73)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(40, 193, 84)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(251, 158, 0)',
+  // 背景颜色
+  backgroundColor: 'rgb(238, 255, 243)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(25, 193, 73)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    active: {
+      borderColor: '#222',
+      borderWidth: 3
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: '#fff',
+    color: 'rgb(69, 149, 96)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 14,
+    active: {
+      borderColor: 'rgb(25, 193, 73)',
+      borderWidth: 2
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#222',
+    active: {
+      borderColor: 'rgb(25, 193, 73)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: 'rgb(251, 158, 0)',
+    borderWidth: 2,
+    color: 'rgb(51, 51, 51)',
+    active: {
+      borderColor: 'rgb(25, 193, 73)'
+    }
+  }
+})

simple-mind-map/src/themes/index.js

@@ -8,8 +8,8 @@ import earthYellow from './earthYellow'
 import classic from './classic'
 import classic2 from './classic2'
 import classic3 from './classic3'
-import classic4 from './classic4';
-import dark from './dark';
+import classic4 from './classic4'
+import dark from './dark'
 import classicGreen from './classicGreen'
 import classicBlue from './classicBlue'
 import minions from './minions'
@@ -22,26 +22,26 @@ import dark2 from './dark2'
 import skyGreen from './skyGreen'
 
 export default {
-    default: defaultTheme,
-    freshGreen,
-    blueSky,
-    brainImpairedPink,
-    romanticPurple,
-    freshRed,
-    earthYellow,
-    classic,
-    classic2,
-    classic3,
-    classic4,
-    dark,
-    classicGreen,
-    classicBlue,
-    minions,
-    pinkGrape,
-    mint,
-    gold,
-    vitalityOrange,
-    greenLeaf,
-    dark2,
-    skyGreen
-}
+  default: defaultTheme,
+  freshGreen,
+  blueSky,
+  brainImpairedPink,
+  romanticPurple,
+  freshRed,
+  earthYellow,
+  classic,
+  classic2,
+  classic3,
+  classic4,
+  dark,
+  classicGreen,
+  classicBlue,
+  minions,
+  pinkGrape,
+  mint,
+  gold,
+  vitalityOrange,
+  greenLeaf,
+  dark2,
+  skyGreen
+}

simple-mind-map/src/themes/minions.js

@@ -1,56 +1,56 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 小黄人
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(51, 51, 51)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: '#222',
-    // 背景颜色
-    backgroundColor: 'rgb(248, 215, 49)',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(55, 165, 255)',
-        borderColor: 'rgb(51, 51, 51)',
-        borderWidth: 3,
-        active: {
-            borderColor: 'rgb(255, 160, 36)'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(255, 160, 36)',
-        color: '#222',
-        borderColor: 'rgb(51, 51, 51)',
-        borderWidth: 3,
-        fontSize: 14,
-        active: {
-            borderColor: 'rgb(55, 165, 255)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#222',
-        active: {
-            borderColor: 'rgb(55, 165, 255)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        borderColor: '#222',
-        borderWidth: 3,
-        color: '#222',
-        active: {
-            borderColor: 'rgb(55, 165, 255)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(51, 51, 51)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: '#222',
+  // 背景颜色
+  backgroundColor: 'rgb(248, 215, 49)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(55, 165, 255)',
+    borderColor: 'rgb(51, 51, 51)',
+    borderWidth: 3,
+    active: {
+      borderColor: 'rgb(255, 160, 36)'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(255, 160, 36)',
+    color: '#222',
+    borderColor: 'rgb(51, 51, 51)',
+    borderWidth: 3,
+    fontSize: 14,
+    active: {
+      borderColor: 'rgb(55, 165, 255)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#222',
+    active: {
+      borderColor: 'rgb(55, 165, 255)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    borderColor: '#222',
+    borderWidth: 3,
+    color: '#222',
+    active: {
+      borderColor: 'rgb(55, 165, 255)'
+    }
+  }
+})

simple-mind-map/src/themes/mint.js

@@ -1,57 +1,57 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 薄荷
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(104, 204, 202)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(90, 206, 241)',
-    // 背景颜色
-    backgroundColor: 'rgb(239, 255, 255)',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(0, 192, 184)',
-        borderColor: '',
-        borderWidth: 0,
-        active: {
-            borderColor: 'rgb(255, 160, 36)',
-            borderWidth: 3,
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: '#fff',
-        color: '#222',
-        borderColor: 'rgb(184, 235, 233)',
-        borderWidth: 2,
-        fontSize: 14,
-        active: {
-            borderColor: 'rgb(0, 192, 184)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#222',
-        active: {
-            borderColor: 'rgb(0, 192, 184)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: 'rgb(90, 206, 241)',
-        borderColor: 'transparent',
-        color: '#fff',
-        active: {
-            borderColor: 'rgb(0, 192, 184)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(104, 204, 202)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(90, 206, 241)',
+  // 背景颜色
+  backgroundColor: 'rgb(239, 255, 255)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(0, 192, 184)',
+    borderColor: '',
+    borderWidth: 0,
+    active: {
+      borderColor: 'rgb(255, 160, 36)',
+      borderWidth: 3
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: '#fff',
+    color: '#222',
+    borderColor: 'rgb(184, 235, 233)',
+    borderWidth: 2,
+    fontSize: 14,
+    active: {
+      borderColor: 'rgb(0, 192, 184)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#222',
+    active: {
+      borderColor: 'rgb(0, 192, 184)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: 'rgb(90, 206, 241)',
+    borderColor: 'transparent',
+    color: '#fff',
+    active: {
+      borderColor: 'rgb(0, 192, 184)'
+    }
+  }
+})

simple-mind-map/src/themes/pinkGrape.js

@@ -1,59 +1,59 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 粉红葡萄
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(166, 101, 106)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: '#fff',
-    // 背景颜色
-    backgroundColor: 'rgb(255, 208, 211)',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(139, 109, 225)',
-        borderColor: '',
-        borderWidth: 0,
-        active: {
-            borderColor: 'rgb(243, 104, 138)',
-            borderWidth: 2,
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(243, 104, 138)',
-        color: '#fff',
-        borderColor: '',
-        borderWidth: 0,
-        fontSize: 14,
-        active: {
-            borderColor: 'rgb(139, 109, 225)',
-            borderWidth: 2,
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#222',
-        active: {
-            borderColor: 'rgb(139, 109, 225)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: 'transparent',
-        color: '#222',
-        active: {
-            borderColor: 'rgb(139, 109, 225)',
-            borderWidth: 2,
-        }
+  // 连线的颜色
+  lineColor: 'rgb(166, 101, 106)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: '#fff',
+  // 背景颜色
+  backgroundColor: 'rgb(255, 208, 211)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(139, 109, 225)',
+    borderColor: '',
+    borderWidth: 0,
+    active: {
+      borderColor: 'rgb(243, 104, 138)',
+      borderWidth: 2
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(243, 104, 138)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 14,
+    active: {
+      borderColor: 'rgb(139, 109, 225)',
+      borderWidth: 2
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#222',
+    active: {
+      borderColor: 'rgb(139, 109, 225)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: 'transparent',
+    color: '#222',
+    active: {
+      borderColor: 'rgb(139, 109, 225)',
+      borderWidth: 2
+    }
+  }
+})

simple-mind-map/src/themes/romanticPurple.js

@@ -1,53 +1,53 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 浪漫紫
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(123, 115, 191)',
-    // 背景颜色
-    backgroundColor: 'rgb(251, 251, 251)',
-    // 概要连线的粗细
-    generalizationLineWidth: 1,
-    // 概要连线的颜色
-    generalizationLineColor: '#333',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(123, 115, 191)',
-        active: {
-            borderColor: 'rgb(61, 57, 96)'
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(239, 238, 246)',
-        color: '#333',
-        borderColor: 'rgb(123, 115, 191)',
-        borderWidth: 1,
-        fontSize: 14,
-        active: {
-            borderColor: 'rgb(61, 57, 96)'
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#333',
-        active: {
-            borderColor: 'rgb(61, 57, 96)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: '#333',
-        color: '#333',
-        active: {
-            borderColor: 'rgb(61, 57, 96)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(123, 115, 191)',
+  // 背景颜色
+  backgroundColor: 'rgb(251, 251, 251)',
+  // 概要连线的粗细
+  generalizationLineWidth: 1,
+  // 概要连线的颜色
+  generalizationLineColor: '#333',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(123, 115, 191)',
+    active: {
+      borderColor: 'rgb(61, 57, 96)'
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(239, 238, 246)',
+    color: '#333',
+    borderColor: 'rgb(123, 115, 191)',
+    borderWidth: 1,
+    fontSize: 14,
+    active: {
+      borderColor: 'rgb(61, 57, 96)'
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#333',
+    active: {
+      borderColor: 'rgb(61, 57, 96)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: '#333',
+    color: '#333',
+    active: {
+      borderColor: 'rgb(61, 57, 96)'
+    }
+  }
+})

simple-mind-map/src/themes/skyGreen.js

@@ -1,59 +1,59 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 天清绿
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: '#fff',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: '#fff',
-    // 背景颜色
-    backgroundColor: 'rgb(80, 156, 170)',
-    // 根节点样式
-    root: {
-        fillColor: '#fff',
-        borderColor: '',
-        borderWidth: 0,
-        color: 'rgb(65, 89, 158)',
-        active: {
-            borderColor: 'rgb(251, 227, 188)',
-            borderWidth: 3,
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: 'rgb(251, 227, 188)',
-        color: 'rgb(65, 89, 158)',
-        borderColor: '',
-        borderWidth: 0,
-        fontSize: 14,
-        active: {
-            borderColor: '#fff',
-            borderWidth: 2,
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: 'rgb(65, 89, 158)',
-        active: {
-            borderColor: 'rgb(251, 227, 188)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: '#fff',
-        borderColor: 'transparent',
-        color: 'rgb(65, 89, 158)',
-        active: {
-            borderColor: 'rgb(251, 227, 188)'
-        }
+  // 连线的颜色
+  lineColor: '#fff',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: '#fff',
+  // 背景颜色
+  backgroundColor: 'rgb(80, 156, 170)',
+  // 根节点样式
+  root: {
+    fillColor: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    color: 'rgb(65, 89, 158)',
+    active: {
+      borderColor: 'rgb(251, 227, 188)',
+      borderWidth: 3
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: 'rgb(251, 227, 188)',
+    color: 'rgb(65, 89, 158)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 14,
+    active: {
+      borderColor: '#fff',
+      borderWidth: 2
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: 'rgb(65, 89, 158)',
+    active: {
+      borderColor: 'rgb(251, 227, 188)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: '#fff',
+    borderColor: 'transparent',
+    color: 'rgb(65, 89, 158)',
+    active: {
+      borderColor: 'rgb(251, 227, 188)'
+    }
+  }
+})

simple-mind-map/src/themes/vitalityOrange.js

@@ -1,59 +1,59 @@
-import defaultTheme from './default';
-import merge from 'deepmerge';
+import defaultTheme from './default'
+import merge from 'deepmerge'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-11 15:22:18 
+/**
+ * @Author: 王林
+ * @Date: 2021-04-11 15:22:18
  * @Desc: 活力橙
  */
 export default merge(defaultTheme, {
-    // 连线的颜色
-    lineColor: 'rgb(254, 146, 0)',
-    lineWidth: 3,
-    // 概要连线的粗细
-    generalizationLineWidth: 3,
-    // 概要连线的颜色
-    generalizationLineColor: 'rgb(255, 222, 69)',
-    // 背景颜色
-    backgroundColor: 'rgb(255, 246, 243)',
-    // 根节点样式
-    root: {
-        fillColor: 'rgb(255, 112, 52)',
-        color: '#fff',
-        borderColor: '',
-        borderWidth: 0,
-        active: {
-            borderColor: 'rgb(51, 51, 51)',
-            borderWidth: 3,
-        }
-    },
-    // 二级节点样式
-    second: {
-        fillColor: '#fff',
-        color: 'rgb(51, 51, 51)',
-        borderColor: '',
-        borderWidth: 0,
-        fontSize: 14,
-        active: {
-            borderColor: 'rgb(255, 112, 52)',
-            borderWidth: 2
-        }
-    },
-    // 三级及以下节点样式
-    node: {
-        fontSize: 12,
-        color: '#222',
-        active: {
-            borderColor: 'rgb(255, 112, 52)'
-        }
-    },
-    // 概要节点样式
-    generalization: {
-        fillColor: 'rgb(255, 222, 69)',
-        borderColor: 'transparent',
-        color: 'rgb(51, 51, 51)',
-        active: {
-            borderColor: 'rgb(255, 112, 52)'
-        }
+  // 连线的颜色
+  lineColor: 'rgb(254, 146, 0)',
+  lineWidth: 3,
+  // 概要连线的粗细
+  generalizationLineWidth: 3,
+  // 概要连线的颜色
+  generalizationLineColor: 'rgb(255, 222, 69)',
+  // 背景颜色
+  backgroundColor: 'rgb(255, 246, 243)',
+  // 根节点样式
+  root: {
+    fillColor: 'rgb(255, 112, 52)',
+    color: '#fff',
+    borderColor: '',
+    borderWidth: 0,
+    active: {
+      borderColor: 'rgb(51, 51, 51)',
+      borderWidth: 3
     }
-})
+  },
+  // 二级节点样式
+  second: {
+    fillColor: '#fff',
+    color: 'rgb(51, 51, 51)',
+    borderColor: '',
+    borderWidth: 0,
+    fontSize: 14,
+    active: {
+      borderColor: 'rgb(255, 112, 52)',
+      borderWidth: 2
+    }
+  },
+  // 三级及以下节点样式
+  node: {
+    fontSize: 12,
+    color: '#222',
+    active: {
+      borderColor: 'rgb(255, 112, 52)'
+    }
+  },
+  // 概要节点样式
+  generalization: {
+    fillColor: 'rgb(255, 222, 69)',
+    borderColor: 'transparent',
+    color: 'rgb(51, 51, 51)',
+    active: {
+      borderColor: 'rgb(255, 112, 52)'
+    }
+  }
+})

simple-mind-map/src/utils/constant.js

@@ -1,175 +1,180 @@
-/** 
- * @Author: 王林 
- * @Date: 2021-06-24 21:42:07 
- * @Desc: 标签颜色列表 
+/**
+ * @Author: 王林
+ * @Date: 2021-06-24 21:42:07
+ * @Desc: 标签颜色列表
  */
 export const tagColorList = [
-    {
-        color: 'rgb(77, 65, 0)',
-        background: 'rgb(255, 244, 179)'
-    },
-    {
-        color: 'rgb(0, 50, 77)',
-        background: 'rgb(179, 229, 255)'
-    },
-    {
-        color: 'rgb(77, 0, 73)',
-        background: 'rgb(255, 179, 251)'
-    },
-    {
-        color: 'rgb(57, 77, 0)',
-        background: 'rgb(236, 255, 179)'
-    },
-    {
-        color: 'rgb(0, 77, 47)',
-        background: 'rgb(179, 255, 226)'
-    }
+  {
+    color: 'rgb(77, 65, 0)',
+    background: 'rgb(255, 244, 179)'
+  },
+  {
+    color: 'rgb(0, 50, 77)',
+    background: 'rgb(179, 229, 255)'
+  },
+  {
+    color: 'rgb(77, 0, 73)',
+    background: 'rgb(255, 179, 251)'
+  },
+  {
+    color: 'rgb(57, 77, 0)',
+    background: 'rgb(236, 255, 179)'
+  },
+  {
+    color: 'rgb(0, 77, 47)',
+    background: 'rgb(179, 255, 226)'
+  }
 ]
 
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-07-13 15:56:28 
- * @Desc: 布局结构列表 
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2021-07-13 15:56:28
+ * @Desc: 布局结构列表
  */
 export const layoutList = [
-    {
-        name: '逻辑结构图',
-        value: 'logicalStructure',
-        img: require('../assets/logicalStructure.jpg')
-    },
-    {
-        name: '思维导图',
-        value: 'mindMap',
-        img: require('../assets/mindMap.jpg')
-    },
-    {
-        name: '组织结构图',
-        value: 'organizationStructure',
-        img: require('../assets/organizationStructure.jpg')
-    },
-    {
-        name: '目录组织图',
-        value: 'catalogOrganization',
-        img: require('../assets/catalogOrganization.jpg')
-    }
+  {
+    name: '逻辑结构图',
+    value: 'logicalStructure',
+    img: require('../assets/logicalStructure.jpg')
+  },
+  {
+    name: '思维导图',
+    value: 'mindMap',
+    img: require('../assets/mindMap.jpg')
+  },
+  {
+    name: '组织结构图',
+    value: 'organizationStructure',
+    img: require('../assets/organizationStructure.jpg')
+  },
+  {
+    name: '目录组织图',
+    value: 'catalogOrganization',
+    img: require('../assets/catalogOrganization.jpg')
+  }
+]
+export const layoutValueList = [
+  'logicalStructure',
+  'mindMap',
+  'catalogOrganization',
+  'organizationStructure'
 ]
-export const layoutValueList = ['logicalStructure', 'mindMap', 'catalogOrganization', 'organizationStructure']
 
-/** 
- * @Author: 王林 
- * @Date: 2021-06-24 22:58:42 
- * @Desc: 主题列表 
+/**
+ * @Author: 王林
+ * @Date: 2021-06-24 22:58:42
+ * @Desc: 主题列表
  */
 export const themeList = [
-    {
-        name: '默认',
-        value: 'default',
-        img: require('../assets/default.jpg')
-    },
-    {
-        name: '脑图经典',
-        value: 'classic',
-        img: require('../assets/classic.jpg')
-    },
-    {
-        name: '小黄人',
-        value: 'minions',
-        img: require('../assets/minions.jpg')
-    },
-    {
-        name: '粉红葡萄',
-        value: 'pinkGrape',
-        img: require('../assets/pinkGrape.jpg')
-    },
-    {
-        name: '薄荷',
-        value: 'mint',
-        img: require('../assets/mint.jpg')
-    },
-    {
-        name: '金色vip',
-        value: 'gold',
-        img: require('../assets/gold.jpg')
-    },
-    {
-        name: '活力橙',
-        value: 'vitalityOrange',
-        img: require('../assets/vitalityOrange.jpg')
-    },
-    {
-        name: '绿叶',
-        value: 'greenLeaf',
-        img: require('../assets/greenLeaf.jpg')
-    },
-    {
-        name: '暗色2',
-        value: 'dark2',
-        img: require('../assets/dark2.jpg')
-    },
-    {
-        name: '天清绿',
-        value: 'skyGreen',
-        img: require('../assets/skyGreen.jpg')
-    },
-    {
-        name: '脑图经典2',
-        value: 'classic2',
-        img: require('../assets/classic2.jpg')
-    },
-    {
-        name: '脑图经典3',
-        value: 'classic3',
-        img: require('../assets/classic3.jpg')
-    },
-    {
-        name: '脑图经典4',
-        value: 'classic4',
-        img: require('../assets/classic4.jpg')
-    },
-    {
-        name: '经典绿',
-        value: 'classicGreen',
-        img: require('../assets/classicGreen.jpg')
-    },
-    {
-        name: '经典蓝',
-        value: 'classicBlue',
-        img: require('../assets/classicBlue.jpg')
-    },
-    {
-        name: '天空蓝',
-        value: 'blueSky',
-        img: require('../assets/blueSky.jpg')
-    },
-    {
-        name: '脑残粉',
-        value: 'brainImpairedPink',
-        img: require('../assets/brainImpairedPink.jpg')
-    },
-    {
-        name: '暗色',
-        value: 'dark',
-        img: require('../assets/dark.jpg')
-    },
-    {
-        name: '泥土黄',
-        value: 'earthYellow',
-        img: require('../assets/earthYellow.jpg')
-    },
-    {
-        name: '清新绿',
-        value: 'freshGreen',
-        img: require('../assets/freshGreen.jpg')
-    },
-    {
-        name: '清新红',
-        value: 'freshRed',
-        img: require('../assets/freshRed.jpg')
-    },
-    {
-        name: '浪漫紫',
-        value: 'romanticPurple',
-        img: require('../assets/romanticPurple.jpg')
-    }
-]
+  {
+    name: '默认',
+    value: 'default',
+    img: require('../assets/default.jpg')
+  },
+  {
+    name: '脑图经典',
+    value: 'classic',
+    img: require('../assets/classic.jpg')
+  },
+  {
+    name: '小黄人',
+    value: 'minions',
+    img: require('../assets/minions.jpg')
+  },
+  {
+    name: '粉红葡萄',
+    value: 'pinkGrape',
+    img: require('../assets/pinkGrape.jpg')
+  },
+  {
+    name: '薄荷',
+    value: 'mint',
+    img: require('../assets/mint.jpg')
+  },
+  {
+    name: '金色vip',
+    value: 'gold',
+    img: require('../assets/gold.jpg')
+  },
+  {
+    name: '活力橙',
+    value: 'vitalityOrange',
+    img: require('../assets/vitalityOrange.jpg')
+  },
+  {
+    name: '绿叶',
+    value: 'greenLeaf',
+    img: require('../assets/greenLeaf.jpg')
+  },
+  {
+    name: '暗色2',
+    value: 'dark2',
+    img: require('../assets/dark2.jpg')
+  },
+  {
+    name: '天清绿',
+    value: 'skyGreen',
+    img: require('../assets/skyGreen.jpg')
+  },
+  {
+    name: '脑图经典2',
+    value: 'classic2',
+    img: require('../assets/classic2.jpg')
+  },
+  {
+    name: '脑图经典3',
+    value: 'classic3',
+    img: require('../assets/classic3.jpg')
+  },
+  {
+    name: '脑图经典4',
+    value: 'classic4',
+    img: require('../assets/classic4.jpg')
+  },
+  {
+    name: '经典绿',
+    value: 'classicGreen',
+    img: require('../assets/classicGreen.jpg')
+  },
+  {
+    name: '经典蓝',
+    value: 'classicBlue',
+    img: require('../assets/classicBlue.jpg')
+  },
+  {
+    name: '天空蓝',
+    value: 'blueSky',
+    img: require('../assets/blueSky.jpg')
+  },
+  {
+    name: '脑残粉',
+    value: 'brainImpairedPink',
+    img: require('../assets/brainImpairedPink.jpg')
+  },
+  {
+    name: '暗色',
+    value: 'dark',
+    img: require('../assets/dark.jpg')
+  },
+  {
+    name: '泥土黄',
+    value: 'earthYellow',
+    img: require('../assets/earthYellow.jpg')
+  },
+  {
+    name: '清新绿',
+    value: 'freshGreen',
+    img: require('../assets/freshGreen.jpg')
+  },
+  {
+    name: '清新红',
+    value: 'freshRed',
+    img: require('../assets/freshRed.jpg')
+  },
+  {
+    name: '浪漫紫',
+    value: 'romanticPurple',
+    img: require('../assets/romanticPurple.jpg')
+  }
+]

simple-mind-map/src/utils/index.js

@@ -1,252 +1,279 @@
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-06 14:13:17 
- * @Desc: 深度优先遍历树 
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2021-04-06 14:13:17
+ * @Desc: 深度优先遍历树
  */
-export const walk = (root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0) => {
-    let stop = false
-    if (beforeCallback) {
-        stop = beforeCallback(root, parent, isRoot, layerIndex, index)
-    }
-    if (!stop && root.children && root.children.length > 0) {
-        let _layerIndex = layerIndex + 1
-        root.children.forEach((node, nodeIndex) => {
-            walk(node, root, beforeCallback, afterCallback, false, _layerIndex, nodeIndex)
-        })
-    }
-    afterCallback && afterCallback(root, parent, isRoot, layerIndex, index)
+export const walk = (
+  root,
+  parent,
+  beforeCallback,
+  afterCallback,
+  isRoot,
+  layerIndex = 0,
+  index = 0
+) => {
+  let stop = false
+  if (beforeCallback) {
+    stop = beforeCallback(root, parent, isRoot, layerIndex, index)
+  }
+  if (!stop && root.children && root.children.length > 0) {
+    let _layerIndex = layerIndex + 1
+    root.children.forEach((node, nodeIndex) => {
+      walk(
+        node,
+        root,
+        beforeCallback,
+        afterCallback,
+        false,
+        _layerIndex,
+        nodeIndex
+      )
+    })
+  }
+  afterCallback && afterCallback(root, parent, isRoot, layerIndex, index)
 }
 
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-07 18:47:20 
- * @Desc: 广度优先遍历树 
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2021-04-07 18:47:20
+ * @Desc: 广度优先遍历树
  */
 export const bfsWalk = (root, callback) => {
-    callback(root)
-    let stack = [root]
-    let isStop = false
-    while (stack.length) {
-        if (isStop) {
-            break
-        }
-        let cur = stack.shift()
-        if (cur.children && cur.children.length) {
-            cur.children.forEach((item) => {
-                stack.push(item)
-                if(callback(item) === 'stop') {
-                    isStop = true
-                }
-            })
-        }
+  callback(root)
+  let stack = [root]
+  let isStop = false
+  while (stack.length) {
+    if (isStop) {
+      break
     }
+    let cur = stack.shift()
+    if (cur.children && cur.children.length) {
+      cur.children.forEach(item => {
+        stack.push(item)
+        if (callback(item) === 'stop') {
+          isStop = true
+        }
+      })
+    }
+  }
 }
 
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-09 10:44:54 
- * @Desc: 缩放图片尺寸 
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2021-04-09 10:44:54
+ * @Desc: 缩放图片尺寸
  */
 export const resizeImgSize = (width, height, maxWidth, maxHeight) => {
-    let nRatio = width / height
-    let arr = []
-    if (maxWidth && maxHeight) {
-        if (width <= maxWidth && height <= maxHeight) {
-            arr = [width, height]
-        } else {
-            let mRatio = maxWidth / maxHeight
-            if (nRatio > mRatio) { // 固定高度
-                arr = [nRatio * maxHeight, maxHeight]
-            } else { // 固定宽度
-                arr = [maxWidth, maxWidth / nRatio]
-            }
-        }
-    } else if (maxWidth) {
-        if (width <= maxWidth) {
-            arr = [width, height]
-        } else {
-            arr = [maxWidth, maxWidth / nRatio]
-        }
-    } else if (maxHeight) {
-        if (height <= maxHeight) {
-            arr = [width, height]
-        } else {
-            arr = [nRatio * maxHeight, maxHeight]
-        }
+  let nRatio = width / height
+  let arr = []
+  if (maxWidth && maxHeight) {
+    if (width <= maxWidth && height <= maxHeight) {
+      arr = [width, height]
+    } else {
+      let mRatio = maxWidth / maxHeight
+      if (nRatio > mRatio) {
+        // 固定高度
+        arr = [nRatio * maxHeight, maxHeight]
+      } else {
+        // 固定宽度
+        arr = [maxWidth, maxWidth / nRatio]
+      }
     }
-    return arr
+  } else if (maxWidth) {
+    if (width <= maxWidth) {
+      arr = [width, height]
+    } else {
+      arr = [maxWidth, maxWidth / nRatio]
+    }
+  } else if (maxHeight) {
+    if (height <= maxHeight) {
+      arr = [width, height]
+    } else {
+      arr = [nRatio * maxHeight, maxHeight]
+    }
+  }
+  return arr
 }
 
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-04-09 10:18:42 
- * @Desc: 缩放图片 
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2021-04-09 10:18:42
+ * @Desc: 缩放图片
  */
 export const resizeImg = (imgUrl, maxWidth, maxHeight) => {
-    return new Promise((resolve, reject) => {
-        let img = new Image()
-        img.src = imgUrl
-        img.onload = () => {
-            let arr = resizeImgSize(img.naturalWidth, img.naturalHeight, maxWidth, maxHeight)
-            resolve(arr)
-        }
-        img.onerror = (e) => {
-            reject(e)
-        }
-    })
-}
-
-/** 
- * @Author: 王林 
- * @Date: 2021-05-04 12:26:56 
- * @Desc: 从头html结构字符串里获取带换行符的字符串 
- */
-export const getStrWithBrFromHtml = (str) => {
-    str = str.replace(/<br>/img, '\n')
-    let el = document.createElement('div')
-    el.innerHTML = str
-    str = el.textContent
-    return str;
-}
-
-/** 
- * @Author: 王林 
- * @Date: 2021-05-04 14:45:39 
- * @Desc: 极简的深拷贝 
- */
-export const simpleDeepClone = (data) => {
-    try {
-        return JSON.parse(JSON.stringify(data))
-    } catch (error) {
-        return null
+  return new Promise((resolve, reject) => {
+    let img = new Image()
+    img.src = imgUrl
+    img.onload = () => {
+      let arr = resizeImgSize(
+        img.naturalWidth,
+        img.naturalHeight,
+        maxWidth,
+        maxHeight
+      )
+      resolve(arr)
     }
+    img.onerror = e => {
+      reject(e)
+    }
+  })
 }
 
-/** 
- * @Author: 王林 
- * @Date: 2021-05-04 14:40:11 
- * @Desc: 复制渲染树数据 
+/**
+ * @Author: 王林
+ * @Date: 2021-05-04 12:26:56
+ * @Desc: 从头html结构字符串里获取带换行符的字符串
+ */
+export const getStrWithBrFromHtml = str => {
+  str = str.replace(/<br>/gim, '\n')
+  let el = document.createElement('div')
+  el.innerHTML = str
+  str = el.textContent
+  return str
+}
+
+/**
+ * @Author: 王林
+ * @Date: 2021-05-04 14:45:39
+ * @Desc: 极简的深拷贝
+ */
+export const simpleDeepClone = data => {
+  try {
+    return JSON.parse(JSON.stringify(data))
+  } catch (error) {
+    return null
+  }
+}
+
+/**
+ * @Author: 王林
+ * @Date: 2021-05-04 14:40:11
+ * @Desc: 复制渲染树数据
  */
 export const copyRenderTree = (tree, root) => {
-    tree.data = simpleDeepClone(root.data)
-    tree.children = []
-    if (root.children && root.children.length > 0) {
-        root.children.forEach((item, index) => {
-            tree.children[index] = copyRenderTree({}, item)
-        })
-    }
-    return tree;
+  tree.data = simpleDeepClone(root.data)
+  tree.children = []
+  if (root.children && root.children.length > 0) {
+    root.children.forEach((item, index) => {
+      tree.children[index] = copyRenderTree({}, item)
+    })
+  }
+  return tree
 }
 
-/** 
- * @Author: 王林 
- * @Date: 2021-05-04 14:40:11 
- * @Desc: 复制节点树数据 
+/**
+ * @Author: 王林
+ * @Date: 2021-05-04 14:40:11
+ * @Desc: 复制节点树数据
  */
 export const copyNodeTree = (tree, root, removeActiveState = false) => {
-    tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data)
-    if (removeActiveState) {
-        tree.data.isActive = false
-    }
-    tree.children = []
-    if (root.children && root.children.length > 0) {
-        root.children.forEach((item, index) => {
-            tree.children[index] = copyNodeTree({}, item, removeActiveState)
-        })
-    } else if (root.nodeData && root.nodeData.children && root.nodeData.children.length > 0) {
-        root.nodeData.children.forEach((item, index) => {
-            tree.children[index] = copyNodeTree({}, item, removeActiveState)
-        })
-    }
-    return tree;
+  tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data)
+  if (removeActiveState) {
+    tree.data.isActive = false
+  }
+  tree.children = []
+  if (root.children && root.children.length > 0) {
+    root.children.forEach((item, index) => {
+      tree.children[index] = copyNodeTree({}, item, removeActiveState)
+    })
+  } else if (
+    root.nodeData &&
+    root.nodeData.children &&
+    root.nodeData.children.length > 0
+  ) {
+    root.nodeData.children.forEach((item, index) => {
+      tree.children[index] = copyNodeTree({}, item, removeActiveState)
+    })
+  }
+  return tree
 }
 
-/** 
- * @Author: 王林 
- * @Date: 2021-07-04 09:08:43 
- * @Desc: 图片转成dataURL 
+/**
+ * @Author: 王林
+ * @Date: 2021-07-04 09:08:43
+ * @Desc: 图片转成dataURL
  */
-export const imgToDataUrl = (src) => {
-    return new Promise((resolve, reject) => {
-        const img = new Image()
-        // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
-        img.setAttribute('crossOrigin', 'anonymous')
-        img.onload = () => {
-            try {
-                let canvas = document.createElement('canvas')
-                canvas.width = img.width
-                canvas.height = img.height
-                let ctx = canvas.getContext('2d')
-                // 图片绘制到canvas里
-                ctx.drawImage(img, 0, 0, img.width, img.height)
-                resolve(canvas.toDataURL())
-            } catch (e) {
-                reject(e)
-            }
-        }
-        img.onerror = (e) => {
-            reject(e)
-        }
-        img.src = src
-    });
+export const imgToDataUrl = src => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
+    img.setAttribute('crossOrigin', 'anonymous')
+    img.onload = () => {
+      try {
+        let canvas = document.createElement('canvas')
+        canvas.width = img.width
+        canvas.height = img.height
+        let ctx = canvas.getContext('2d')
+        // 图片绘制到canvas里
+        ctx.drawImage(img, 0, 0, img.width, img.height)
+        resolve(canvas.toDataURL())
+      } catch (e) {
+        reject(e)
+      }
+    }
+    img.onerror = e => {
+      reject(e)
+    }
+    img.src = src
+  })
 }
 
-/** 
- * @Author: 王林 
- * @Date: 2021-07-04 16:20:06 
- * @Desc: 下载文件 
+/**
+ * @Author: 王林
+ * @Date: 2021-07-04 16:20:06
+ * @Desc: 下载文件
  */
 export const downloadFile = (file, fileName) => {
-    let a = document.createElement('a')
-    a.href = file
-    a.download = fileName
-    a.click()
+  let a = document.createElement('a')
+  a.href = file
+  a.download = fileName
+  a.click()
 }
 
-/** 
- * @Author: 王林 
- * @Date: 2021-07-11 10:36:47 
- * @Desc: 节流函数 
+/**
+ * @Author: 王林
+ * @Date: 2021-07-11 10:36:47
+ * @Desc: 节流函数
  */
 export const throttle = (fn, time = 300, ctx) => {
-    let timer = null
-    return () => {
-        if (timer) {
-            return
-        }
-        timer = setTimeout(() => {
-            fn.call(ctx)
-            timer = null
-        }, 300)
-    };
+  let timer = null
+  return () => {
+    if (timer) {
+      return
+    }
+    timer = setTimeout(() => {
+      fn.call(ctx)
+      timer = null
+    }, time)
+  }
 }
 
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2021-07-12 10:27:36 
- * @Desc: 异步执行任务队列 
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2021-07-12 10:27:36
+ * @Desc: 异步执行任务队列
  */
 export const asyncRun = (taskList, callback = () => {}) => {
-    let index = 0
-    let len = taskList.length
-    if (len <= 0) {
-        return callback()
+  let index = 0
+  let len = taskList.length
+  if (len <= 0) {
+    return callback()
+  }
+  let loop = () => {
+    if (index >= len) {
+      callback()
+      return
     }
-    let loop = () => {
-        if (index >= len) {
-            callback()
-            return
-        }
-        taskList[index]()
-        setTimeout(() => {
-            index++
-            loop()
-        }, 0)
-    }
-    loop()
+    taskList[index]()
+    setTimeout(() => {
+      index++
+      loop()
+    }, 0)
+  }
+  loop()
 }

simple-mind-map/src/utils/keyMap.js

@@ -1,69 +1,69 @@
 const map = {
-    'Backspace': 8,
-    'Tab': 9,
-    'Enter': 13,
+  Backspace: 8,
+  Tab: 9,
+  Enter: 13,
 
-    'Shift': 16,
-    'Control': 17,
-    'Alt': 18,
-    'CapsLock': 20,
+  Shift: 16,
+  Control: 17,
+  Alt: 18,
+  CapsLock: 20,
 
-    'Esc': 27,
+  Esc: 27,
 
-    'Spacebar': 32,
+  Spacebar: 32,
 
-    'PageUp': 33,
-    'PageDown': 34,
-    'End': 35,
-    'Home': 36,
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
 
-    'Insert': 45,
+  Insert: 45,
 
-    'Left': 37,
-    'Up': 38,
-    'Right': 39,
-    'Down': 40,
+  Left: 37,
+  Up: 38,
+  Right: 39,
+  Down: 40,
 
-    'Del': 46,
+  Del: 46,
 
-    'NumLock': 144,
+  NumLock: 144,
 
-    'Cmd': 91,
-    'CmdFF': 224,
-    'F1': 112,
-    'F2': 113,
-    'F3': 114,
-    'F4': 115,
-    'F5': 116,
-    'F6': 117,
-    'F7': 118,
-    'F8': 119,
-    'F9': 120,
-    'F10': 121,
-    'F11': 122,
-    'F12': 123,
+  Cmd: 91,
+  CmdFF: 224,
+  F1: 112,
+  F2: 113,
+  F3: 114,
+  F4: 115,
+  F5: 116,
+  F6: 117,
+  F7: 118,
+  F8: 119,
+  F9: 120,
+  F10: 121,
+  F11: 122,
+  F12: 123,
 
-    '`': 192,
-    '=': 187,
-    '-': 189,
+  '`': 192,
+  '=': 187,
+  '-': 189,
 
-    '/': 191,
-    '.': 190,
+  '/': 191,
+  '.': 190
 }
 
 // 数字
 for (let i = 0; i <= 9; i++) {
-    map[i] = i + 48
+  map[i] = i + 48
 }
 
 // 字母
 'abcdefghijklmnopqrstuvwxyz'.split('').forEach((n, index) => {
-    map[n] = index + 65
+  map[n] = index + 65
 })
 
 export const keyMap = map
 
 export const isKey = (e, key) => {
-    let code = typeof e === 'object' ? e.keyCode : e
-    return map[key] === code
+  let code = typeof e === 'object' ? e.keyCode : e
+  return map[key] === code
 }

web/.prettierignore

@@ -0,0 +1,9 @@
+src/assets
+*/.DS_Store
+node_modules
+public
+*.json
+*.md
+.eslintrc.js
+.prettierignore
+.prettierrc

web/.prettierrc

@@ -0,0 +1,5 @@
+semi: false
+singleQuote: true
+printWidth: 80
+trailingComma: 'none'
+arrowParens: 'avoid'

web/package.json

@@ -6,15 +6,18 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build && node ../copy.js",
     "lint": "vue-cli-service lint",
-    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/index.js --dest ../simple-mind-map/dist"
+    "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/index.js --dest ../simple-mind-map/dist",
+    "format": "prettier --write src/**"
   },
   "dependencies": {
     "@toast-ui/editor": "^3.1.5",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.1",
+    "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-router": "^3.5.1",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.0",
@@ -25,6 +28,7 @@
     "eslint-plugin-vue": "^6.2.2",
     "less": "^3.12.2",
     "less-loader": "^7.1.0",
+    "prettier": "^1.19.1",
     "vue-template-compiler": "^2.6.11",
     "webpack": "^4.44.2"
   },

web/src/App.vue

@@ -6,9 +6,9 @@
 
 <script>
 export default {
-  name: "App",
-  components: {},
-};
+  name: 'App',
+  components: {}
+}
 </script>
 
 <style>

web/src/api/index.js

@@ -1,77 +1,77 @@
-import exampleData from "simple-mind-map/example/exampleData"
+import exampleData from 'simple-mind-map/example/exampleData'
 import { simpleDeepClone } from 'simple-mind-map/src/utils/index'
 import Vue from 'vue'
 
 const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-08-02 22:36:48 
- * @Desc: 克隆思维导图数据，去除激活状态 
+/**
+ * @Author: 王林
+ * @Date: 2021-08-02 22:36:48
+ * @Desc: 克隆思维导图数据，去除激活状态
  */
 const copyMindMapTreeData = (tree, root) => {
-    tree.data = simpleDeepClone(root.data)
-    // tree.data.isActive = false
-    tree.children = []
-    if (root.children && root.children.length > 0) {
-        root.children.forEach((item, index) => {
-            tree.children[index] = copyMindMapTreeData({}, item)
-        })
-    }
-    return tree;
+  tree.data = simpleDeepClone(root.data)
+  // tree.data.isActive = false
+  tree.children = []
+  if (root.children && root.children.length > 0) {
+    root.children.forEach((item, index) => {
+      tree.children[index] = copyMindMapTreeData({}, item)
+    })
+  }
+  return tree
 }
 
-/** 
- * @Author: 王林 
- * @Date: 2021-08-01 10:10:49 
- * @Desc: 获取缓存的思维导图数据 
+/**
+ * @Author: 王林
+ * @Date: 2021-08-01 10:10:49
+ * @Desc: 获取缓存的思维导图数据
  */
 export const getData = () => {
-    let store = localStorage.getItem(SIMPLE_MIND_MAP_DATA)
-    if (store === null) {
-        return simpleDeepClone(exampleData)
-    } else {
-        try {
-            return JSON.parse(store)
-        } catch (error) {
-            return simpleDeepClone(exampleData)
-        }
+  let store = localStorage.getItem(SIMPLE_MIND_MAP_DATA)
+  if (store === null) {
+    return simpleDeepClone(exampleData)
+  } else {
+    try {
+      return JSON.parse(store)
+    } catch (error) {
+      return simpleDeepClone(exampleData)
     }
+  }
 }
 
-/** 
- * @Author: 王林 
- * @Date: 2021-08-01 10:14:28 
- * @Desc: 存储思维导图数据 
+/**
+ * @Author: 王林
+ * @Date: 2021-08-01 10:14:28
+ * @Desc: 存储思维导图数据
  */
-export const storeData = (data) => {
-    try {
-        let originData = getData()
-        originData.root = copyMindMapTreeData({}, data)
-        Vue.prototype.$bus.$emit('write_local_file', originData)
-        let dataStr = JSON.stringify(originData)
-        localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
-    } catch (error) {
-        console.log(error)
-    }
+export const storeData = data => {
+  try {
+    let originData = getData()
+    originData.root = copyMindMapTreeData({}, data)
+    Vue.prototype.$bus.$emit('write_local_file', originData)
+    let dataStr = JSON.stringify(originData)
+    localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
+  } catch (error) {
+    console.log(error)
+  }
 }
 
-/** 
- * @Author: 王林 
- * @Date: 2021-08-01 10:24:56 
- * @Desc: 存储思维导图配置数据 
+/**
+ * @Author: 王林
+ * @Date: 2021-08-01 10:24:56
+ * @Desc: 存储思维导图配置数据
  */
-export const storeConfig = (config) => {
-    try {
-        let originData = getData()
-        originData = {
-            ...originData,
-            ...config
-        }
-        Vue.prototype.$bus.$emit('write_local_file', originData)
-        let dataStr = JSON.stringify(originData)
-        localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
-    } catch (error) {
-        console.log(error)
+export const storeConfig = config => {
+  try {
+    let originData = getData()
+    originData = {
+      ...originData,
+      ...config
     }
-}
+    Vue.prototype.$bus.$emit('write_local_file', originData)
+    let dataStr = JSON.stringify(originData)
+    localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
+  } catch (error) {
+    console.log(error)
+  }
+}

web/src/assets/icon-font/demo.css

@@ -1,15 +1,19 @@
 /* Logo 字体 */
 @font-face {
-  font-family: "iconfont logo";
+  font-family: 'iconfont logo';
   src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix')
+      format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834')
+      format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834')
+      format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
+      format('svg');
 }
 
 .logo {
-  font-family: "iconfont logo";
+  font-family: 'iconfont logo';
   font-size: 160px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -48,7 +52,6 @@
   color: #666;
 }
 
-
 #tabs .active {
   border-bottom-color: #f00;
   color: #222;
@@ -215,35 +218,35 @@
   margin: 1em 0;
 }
 
-.markdown>p,
-.markdown>blockquote,
-.markdown>.highlight,
-.markdown>ol,
-.markdown>ul {
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
   width: 80%;
 }
 
-.markdown ul>li {
+.markdown ul > li {
   list-style: circle;
 }
 
-.markdown>ul li,
-.markdown blockquote ul>li {
+.markdown > ul li,
+.markdown blockquote ul > li {
   margin-left: 20px;
   padding-left: 4px;
 }
 
-.markdown>ul li p,
-.markdown>ol li p {
+.markdown > ul li p,
+.markdown > ol li p {
   margin: 0.6em 0;
 }
 
-.markdown ol>li {
+.markdown ol > li {
   list-style: decimal;
 }
 
-.markdown>ol li,
-.markdown blockquote ol>li {
+.markdown > ol li,
+.markdown blockquote ol > li {
   margin-left: 20px;
   padding-left: 4px;
 }
@@ -260,7 +263,7 @@
   font-weight: 600;
 }
 
-.markdown>table {
+.markdown > table {
   border-collapse: collapse;
   border-spacing: 0px;
   empty-cells: show;
@@ -269,21 +272,21 @@
   margin-bottom: 24px;
 }
 
-.markdown>table th {
+.markdown > table th {
   white-space: nowrap;
   color: #333;
   font-weight: 600;
 }
 
-.markdown>table th,
-.markdown>table td {
+.markdown > table th,
+.markdown > table td {
   border: 1px solid #e9e9e9;
   padding: 8px 16px;
   text-align: left;
 }
 
-.markdown>table th {
-  background: #F7F7F7;
+.markdown > table th {
+  background: #f7f7f7;
 }
 
 .markdown blockquote {
@@ -318,12 +321,11 @@
   display: inline-block;
 }
 
-.markdown>br,
-.markdown>p>br {
+.markdown > br,
+.markdown > p > br {
   clear: both;
 }
 
-
 .hljs {
   display: block;
   background: white;
@@ -399,8 +401,8 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
  * Based on dabblet (http://dabblet.com)
  * @author Lea Verou
  */
-code[class*="language-"],
-pre[class*="language-"] {
+code[class*='language-'],
+pre[class*='language-'] {
   color: black;
   background: none;
   text-shadow: 0 1px white;
@@ -422,46 +424,45 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
-pre[class*="language-"]::-moz-selection,
-pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection {
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
   text-shadow: none;
   background: #b3d4fc;
 }
 
-pre[class*="language-"]::selection,
-pre[class*="language-"] ::selection,
-code[class*="language-"]::selection,
-code[class*="language-"] ::selection {
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
   text-shadow: none;
   background: #b3d4fc;
 }
 
 @media print {
-
-  code[class*="language-"],
-  pre[class*="language-"] {
+  code[class*='language-'],
+  pre[class*='language-'] {
     text-shadow: none;
   }
 }
 
 /* Code blocks */
-pre[class*="language-"] {
+pre[class*='language-'] {
   padding: 1em;
-  margin: .5em 0;
+  margin: 0.5em 0;
   overflow: auto;
 }
 
-:not(pre)>code[class*="language-"],
-pre[class*="language-"] {
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
   background: #f5f2f0;
 }
 
 /* Inline code */
-:not(pre)>code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
   white-space: normal;
 }
 
@@ -477,7 +478,7 @@ pre[class*="language-"] {
 }
 
 .namespace {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .token.property,
@@ -505,7 +506,7 @@ pre[class*="language-"] {
 .language-css .token.string,
 .style .token.string {
   color: #9a6e3a;
-  background: hsla(0, 0%, 100%, .5);
+  background: hsla(0, 0%, 100%, 0.5);
 }
 
 .token.atrule,
@@ -516,7 +517,7 @@ pre[class*="language-"] {
 
 .token.function,
 .token.class-name {
-  color: #DD4A68;
+  color: #dd4a68;
 }
 
 .token.regex,

web/src/assets/icon-font/iconfont.css

@@ -1,12 +1,12 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 2479351 */
+  font-family: 'iconfont'; /* Project id 2479351 */
   src: url('iconfont.woff2?t=1664005697217') format('woff2'),
-       url('iconfont.woff?t=1664005697217') format('woff'),
-       url('iconfont.ttf?t=1664005697217') format('truetype');
+    url('iconfont.woff?t=1664005697217') format('woff'),
+    url('iconfont.ttf?t=1664005697217') format('truetype');
 }
 
 .iconfont {
-  font-family: "iconfont" !important;
+  font-family: 'iconfont' !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -14,174 +14,173 @@
 }
 
 .icondaochu1:before {
-  content: "\e63e";
+  content: '\e63e';
 }
 
 .iconlingcunwei:before {
-  content: "\e657";
+  content: '\e657';
 }
 
 .iconexport:before {
-  content: "\e642";
+  content: '\e642';
 }
 
 .icondakai:before {
-  content: "\ebdf";
+  content: '\ebdf';
 }
 
 .iconxinjian:before {
-  content: "\e64e";
+  content: '\e64e';
 }
 
 .iconjianqie:before {
-  content: "\e601";
+  content: '\e601';
 }
 
 .iconzhengli:before {
-  content: "\e83b";
+  content: '\e83b';
 }
 
 .iconfuzhi:before {
-  content: "\e604";
+  content: '\e604';
 }
 
 .iconniantie:before {
-  content: "\e63f";
+  content: '\e63f';
 }
 
 .iconshangyi:before {
-  content: "\e6be";
+  content: '\e6be';
 }
 
 .iconxiayi:before {
-  content: "\e6bf";
+  content: '\e6bf';
 }
 
 .icongaikuozonglan:before {
-  content: "\e609";
+  content: '\e609';
 }
 
 .iconquanxuan:before {
-  content: "\f199";
+  content: '\f199';
 }
 
 .icondaoru:before {
-  content: "\e6a3";
+  content: '\e6a3';
 }
 
 .iconhoutui-shi:before {
-  content: "\e656";
+  content: '\e656';
 }
 
 .iconqianjin1:before {
-  content: "\e654";
+  content: '\e654';
 }
 
 .iconwithdraw:before {
-  content: "\e603";
+  content: '\e603';
 }
 
 .iconqianjin:before {
-  content: "\e600";
+  content: '\e600';
 }
 
 .iconhuifumoren:before {
-  content: "\e60e";
+  content: '\e60e';
 }
 
 .iconhuanhang:before {
-  content: "\e61e";
+  content: '\e61e';
 }
 
 .iconsuoxiao:before {
-  content: "\ec13";
+  content: '\ec13';
 }
 
 .iconbianji:before {
-  content: "\e626";
+  content: '\e626';
 }
 
 .iconfangda:before {
-  content: "\e663";
+  content: '\e663';
 }
 
 .iconquanping1:before {
-  content: "\e664";
+  content: '\e664';
 }
 
 .icondingwei:before {
-  content: "\e616";
+  content: '\e616';
 }
 
 .icondaohang:before {
-  content: "\e611";
+  content: '\e611';
 }
 
 .iconjianpan:before {
-  content: "\e64d";
+  content: '\e64d';
 }
 
 .iconquanping:before {
-  content: "\e602";
+  content: '\e602';
 }
 
 .icondaochu:before {
-  content: "\e63d";
+  content: '\e63d';
 }
 
 .iconbiaoqian:before {
-  content: "\e63c";
+  content: '\e63c';
 }
 
 .iconflow-Mark:before {
-  content: "\e65b";
+  content: '\e65b';
 }
 
 .iconchaolianjie:before {
-  content: "\e6f4";
+  content: '\e6f4';
 }
 
 .iconjingzi:before {
-  content: "\e610";
+  content: '\e610';
 }
 
 .iconxiaolian:before {
-  content: "\e60f";
+  content: '\e60f';
 }
 
 .iconimage:before {
-  content: "\e629";
+  content: '\e629';
 }
 
 .iconjiegou:before {
-  content: "\e61d";
+  content: '\e61d';
 }
 
 .iconyangshi:before {
-  content: "\e631";
+  content: '\e631';
 }
 
 .iconfuhao-dagangshu:before {
-  content: "\e71f";
+  content: '\e71f';
 }
 
 .icontianjiazijiedian:before {
-  content: "\e622";
+  content: '\e622';
 }
 
 .iconjiedian:before {
-  content: "\e655";
+  content: '\e655';
 }
 
 .iconshanchu:before {
-  content: "\e696";
+  content: '\e696';
 }
 
 .iconzhankai:before {
-  content: "\e64c";
+  content: '\e64c';
 }
 
 .iconzhankai1:before {
-  content: "\e673";
+  content: '\e673';
 }
-

web/src/components/ImgUpload/index.vue

@@ -30,21 +30,21 @@
 
 <script>
 export default {
-  name: "ImgUpload",
+  name: 'ImgUpload',
   model: {
-    prop: "value",
-    event: "change",
+    prop: 'value',
+    event: 'change'
   },
   props: {
     value: {
       type: String,
-      default: "",
-    },
+      default: ''
+    }
   },
   data() {
     return {
-      file: null,
-    };
+      file: null
+    }
   },
   methods: {
     /**
@@ -53,8 +53,8 @@ export default {
      * @Desc: 图片选择事件
      */
     onImgUploadInputChange(e) {
-      let file = e.target.files[0];
-      this.selectImg(file);
+      let file = e.target.files[0]
+      this.selectImg(file)
     },
 
     /**
@@ -63,9 +63,9 @@ export default {
      * @Desc: 拖动上传图片
      */
     onDrop(e) {
-      let dt = e.dataTransfer;
-      let file = dt.files && dt.files[0];
-      this.selectImg(file);
+      let dt = e.dataTransfer
+      let file = dt.files && dt.files[0]
+      this.selectImg(file)
     },
 
     /**
@@ -74,12 +74,12 @@ export default {
      * @Desc: 选择图片
      */
     selectImg(file) {
-      this.file = file;
-      let fr = new FileReader();
-      fr.readAsDataURL(file);
-      fr.onload = (e) => {
-        this.$emit("change", e.target.result);
-      };
+      this.file = file
+      let fr = new FileReader()
+      fr.readAsDataURL(file)
+      fr.onload = e => {
+        this.$emit('change', e.target.result)
+      }
     },
 
     /**
@@ -88,22 +88,22 @@ export default {
      * @Desc: 获取图片大小
      */
     getSize() {
-      return new Promise((resolve, reject) => {
-        let img = new Image();
-        img.src = this.value;
+      return new Promise(resolve => {
+        let img = new Image()
+        img.src = this.value
         img.onload = () => {
           resolve({
             width: img.width,
-            height: img.height,
-          });
-        };
-        img.onerror = (e) => {
+            height: img.height
+          })
+        }
+        img.onerror = () => {
           resolve({
             width: 0,
-            height: 0,
-          });
-        };
-      });
+            height: 0
+          })
+        }
+      })
     },
 
     /**
@@ -112,13 +112,13 @@ export default {
      * @Desc: 删除图片
      */
     deleteImg() {
-      this.$emit("change", "");
-      this.file = null;
-    },
-  },
-};
+      this.$emit('change', '')
+      this.file = null
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
-@import "./style.less";
+@import './style.less';
 </style>

web/src/components/ImgUpload/style.less

@@ -1,80 +1,80 @@
 .imgUploadContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.9);
+  z-index: 1000;
+
+  .imgUploadPanel {
+    position: relative;
     width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(255,255,255,.9);
-    z-index: 1000;
+    font-size: 22px;
+    white-space: nowrap;
+    color: #909090;
+    cursor: default;
+    user-select: none;
 
-    .imgUploadPanel {
-        position: relative;
-        width: 100%;
-        font-size: 22px;
-        white-space: nowrap;
-        color: #909090;
-        cursor: default;
-        user-select: none;
-    
-        .title {
-            margin-bottom: 15px;
-            font-size: 22px;
-            font-weight: 700;
-            color: hsla(218,9%,51%,.8);
-        }
-
-        .closeBtn {
-            position: absolute;
-            right: 25px;
-            top: 32px;
-            cursor: pointer;
-        }
-
-        .imgUploadInputArea {
-            display: block;
-            width: 100%;
-            height: 200px;
-            font-size: 20px;
-            color: rgba(51,51,51,.4);
-            background-color: hsla(0,0%,87%,.6);
-            border: none;
-            outline: none;
-            cursor: pointer;
-            text-align: center;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            white-space: normal;
-            padding: 10px;
-        }
-
-        #imgUploadInput {
-            display: none;
-        }
-
-        .uploadInfoBox {
-            position: relative;
-            width: 100%;
-            height: 200px;
-            background-color: hsla(0,0%,87%,.6);
-
-            .previewBox {
-                width: 100%;
-                height: 100%;
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-position: center;
-            }
-
-            .delBtn {
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                cursor: pointer;
-                width: 20px;
-                height: 20px;
-                background-color: #fff;
-            }
-        }
+    .title {
+      margin-bottom: 15px;
+      font-size: 22px;
+      font-weight: 700;
+      color: hsla(218, 9%, 51%, 0.8);
     }
-}
+
+    .closeBtn {
+      position: absolute;
+      right: 25px;
+      top: 32px;
+      cursor: pointer;
+    }
+
+    .imgUploadInputArea {
+      display: block;
+      width: 100%;
+      height: 200px;
+      font-size: 20px;
+      color: rgba(51, 51, 51, 0.4);
+      background-color: hsla(0, 0%, 87%, 0.6);
+      border: none;
+      outline: none;
+      cursor: pointer;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      white-space: normal;
+      padding: 10px;
+    }
+
+    #imgUploadInput {
+      display: none;
+    }
+
+    .uploadInfoBox {
+      position: relative;
+      width: 100%;
+      height: 200px;
+      background-color: hsla(0, 0%, 87%, 0.6);
+
+      .previewBox {
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+
+      .delBtn {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+        background-color: #fff;
+      }
+    }
+  }
+}

web/src/config/index.js

@@ -1,46 +1,57 @@
 // 字体列表
 export const fontFamilyList = [
-    {
-        name: '宋体',
-        value: '宋体, SimSun, Songti SC'
-    }, {
-        name: '微软雅黑',
-        value: '微软雅黑, Microsoft YaHei'
-    }, {
-        name: '楷体',
-        value: '楷体, 楷体_GB2312, SimKai, STKaiti'
-    }, {
-        name: '黑体',
-        value: '黑体, SimHei, Heiti SC'
-    }, {
-        name: '隶书',
-        value: '隶书, SimLi'
-    }, {
-        name: 'Andale Mono',
-        value: 'andale mono'
-    }, {
-        name: 'Arial',
-        value: 'arial, helvetica, sans-serif'
-    }, {
-        name: 'arialBlack',
-        value: 'arial black, avant garde'
-    }, {
-        name: 'Comic Sans Ms',
-        value: 'comic sans ms'
-    }, {
-        name: 'Impact',
-        value: 'impact, chicago'
-    }, {
-        name: 'Times New Roman',
-        value: 'times new roman'
-    }, {
-        name: 'Sans-Serif',
-        value: 'sans-serif'
-    },
-    {
-        name: 'serif',
-        value: 'serif'
-    }
+  {
+    name: '宋体',
+    value: '宋体, SimSun, Songti SC'
+  },
+  {
+    name: '微软雅黑',
+    value: '微软雅黑, Microsoft YaHei'
+  },
+  {
+    name: '楷体',
+    value: '楷体, 楷体_GB2312, SimKai, STKaiti'
+  },
+  {
+    name: '黑体',
+    value: '黑体, SimHei, Heiti SC'
+  },
+  {
+    name: '隶书',
+    value: '隶书, SimLi'
+  },
+  {
+    name: 'Andale Mono',
+    value: 'andale mono'
+  },
+  {
+    name: 'Arial',
+    value: 'arial, helvetica, sans-serif'
+  },
+  {
+    name: 'arialBlack',
+    value: 'arial black, avant garde'
+  },
+  {
+    name: 'Comic Sans Ms',
+    value: 'comic sans ms'
+  },
+  {
+    name: 'Impact',
+    value: 'impact, chicago'
+  },
+  {
+    name: 'Times New Roman',
+    value: 'times new roman'
+  },
+  {
+    name: 'Sans-Serif',
+    value: 'sans-serif'
+  },
+  {
+    name: 'serif',
+    value: 'serif'
+  }
 ]
 
 // 字号
@@ -51,42 +62,42 @@ export const lineHeightList = [1, 1.5, 2, 2.5, 3]
 
 // 颜色
 export const colorList = [
-    '#4D4D4D',
-    '#999999',
-    '#FFFFFF',
-    '#F44E3B',
-    '#FE9200',
-    '#FCDC00',
-    '#DBDF00',
-    '#A4DD00',
-    '#68CCCA',
-    '#73D8FF',
-    '#AEA1FF',
-    '#FDA1FF',
-    '#333333',
-    '#808080',
-    '#cccccc',
-    '#D33115',
-    '#E27300',
-    '#FCC400',
-    '#B0BC00',
-    '#68BC00',
-    '#16A5A5',
-    '#009CE0',
-    '#7B64FF',
-    '#FA28FF',
-    '#000000',
-    '#666666',
-    '#B3B3B3',
-    '#9F0500',
-    '#C45100',
-    '#FB9E00',
-    '#808900',
-    '#194D33',
-    '#0C797D',
-    '#0062B1',
-    '#653294',
-    '#AB149E'
+  '#4D4D4D',
+  '#999999',
+  '#FFFFFF',
+  '#F44E3B',
+  '#FE9200',
+  '#FCDC00',
+  '#DBDF00',
+  '#A4DD00',
+  '#68CCCA',
+  '#73D8FF',
+  '#AEA1FF',
+  '#FDA1FF',
+  '#333333',
+  '#808080',
+  '#cccccc',
+  '#D33115',
+  '#E27300',
+  '#FCC400',
+  '#B0BC00',
+  '#68BC00',
+  '#16A5A5',
+  '#009CE0',
+  '#7B64FF',
+  '#FA28FF',
+  '#000000',
+  '#666666',
+  '#B3B3B3',
+  '#9F0500',
+  '#C45100',
+  '#FB9E00',
+  '#808900',
+  '#194D33',
+  '#0C797D',
+  '#0062B1',
+  '#653294',
+  '#AB149E'
 ]
 
 // 边框宽度
@@ -94,34 +105,34 @@ export const borderWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
 // 边框样式
 export const borderDasharrayList = [
-    {
-        name: '实线',
-        value: 'none'
-    },
-    {
-        name: '虚线1',
-        value: '5,5'
-    },
-    {
-        name: '虚线2',
-        value: '10,10'
-    },
-    {
-        name: '虚线3',
-        value: '20,10,5,5,5,10'
-    },
-    {
-        name: '虚线4',
-        value: '5, 5, 1, 5'
-    },
-    {
-        name: '虚线5',
-        value: '15, 10, 5, 10, 15'
-    },
-    {
-        name: '虚线6',
-        value: '1, 5'
-    }
+  {
+    name: '实线',
+    value: 'none'
+  },
+  {
+    name: '虚线1',
+    value: '5,5'
+  },
+  {
+    name: '虚线2',
+    value: '10,10'
+  },
+  {
+    name: '虚线3',
+    value: '20,10,5,5,5,10'
+  },
+  {
+    name: '虚线4',
+    value: '5, 5, 1, 5'
+  },
+  {
+    name: '虚线5',
+    value: '15, 10, 5, 10, 15'
+  },
+  {
+    name: '虚线6',
+    value: '1, 5'
+  }
 ]
 
 // 圆角
@@ -132,239 +143,239 @@ export const lineWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
 // 连线风格
 export const lineStyleList = [
-    {
-        name: '直线',
-        value: 'straight'
-    },
-    {
-        name: '曲线',
-        value: 'curve'
-    },
-    {
-        name: '直连',
-        value: 'direct'
-    }
+  {
+    name: '直线',
+    value: 'straight'
+  },
+  {
+    name: '曲线',
+    value: 'curve'
+  },
+  {
+    name: '直连',
+    value: 'direct'
+  }
 ]
 
 // 图片重复方式
 export const backgroundRepeatList = [
-    {
-        name: '不重复',
-        value: 'no-repeat'
-    },
-    {
-        name: '重复',
-        value: 'repeat'
-    },
-    {
-        name: '水平方向重复',
-        value: 'repeat-x'
-    },
-    {
-        name: '垂直方向重复',
-        value: 'repeat-y'
-    }
+  {
+    name: '不重复',
+    value: 'no-repeat'
+  },
+  {
+    name: '重复',
+    value: 'repeat'
+  },
+  {
+    name: '水平方向重复',
+    value: 'repeat-x'
+  },
+  {
+    name: '垂直方向重复',
+    value: 'repeat-y'
+  }
 ]
 
 // 背景图片定位
 export const backgroundPositionList = [
-    {
-        name: '默认',
-        value: '0% 0%'
-    },
-    {
-        name: '左上',
-        value: 'left top'
-    },
-    {
-        name: '左中',
-        value: 'left center'
-    },
-    {
-        name: '左下',
-        value: 'left bottom'
-    },
-    {
-        name: '右上',
-        value: 'right top'
-    },
-    {
-        name: '右中',
-        value: 'right center'
-    },
-    {
-        name: '右下',
-        value: 'right bottom'
-    },
-    {
-        name: '中上',
-        value: 'center top'
-    },
-    {
-        name: '居中',
-        value: 'center center'
-    },
-    {
-        name: '中下',
-        value: 'center bottom'
-    }
+  {
+    name: '默认',
+    value: '0% 0%'
+  },
+  {
+    name: '左上',
+    value: 'left top'
+  },
+  {
+    name: '左中',
+    value: 'left center'
+  },
+  {
+    name: '左下',
+    value: 'left bottom'
+  },
+  {
+    name: '右上',
+    value: 'right top'
+  },
+  {
+    name: '右中',
+    value: 'right center'
+  },
+  {
+    name: '右下',
+    value: 'right bottom'
+  },
+  {
+    name: '中上',
+    value: 'center top'
+  },
+  {
+    name: '居中',
+    value: 'center center'
+  },
+  {
+    name: '中下',
+    value: 'center bottom'
+  }
 ]
 
 // 数据存储
 export const store = {
-    sidebarZIndex: 1//侧边栏zIndex
+  sidebarZIndex: 1 //侧边栏zIndex
 }
 
 // 快捷键列表
 export const shortcutKeyList = [
-    {
-        type: '节点操作',
-        list: [
-            {
-                icon: 'icontianjiazijiedian',
-                name: '插入下级节点',
-                value: 'Tab'
-            },
-            {
-                icon: 'iconjiedian',
-                name: '插入同级节点',
-                value: 'Enter'
-            },
-            {
-                icon: 'iconshangyi',
-                name: '上移节点',
-                value: 'Ctrl + ↑'
-            },
-            {
-                icon: 'iconxiayi',
-                name: '下移节点',
-                value: 'Ctrl + ↓'
-            },
-            {
-                icon: 'icongaikuozonglan',
-                name: '插入概要',
-                value: 'Ctrl + S'
-            },
-            {
-                icon: 'iconzhankai',
-                name: '展开/收起节点',
-                value: '/'
-            },
-            {
-                icon: 'iconshanchu',
-                name: '删除节点',
-                value: 'Delete | Backspace'
-            },
-            {
-                icon: 'iconfuzhi',
-                name: '复制节点',
-                value: 'Ctrl + C'
-            },
-            {
-                icon: 'iconjianqie',
-                name: '剪切节点',
-                value: 'Ctrl + X'
-            },
-            {
-                icon: 'iconniantie',
-                name: '粘贴节点',
-                value: 'Ctrl + V'
-            },
-            {
-                icon: 'iconbianji',
-                name: '编辑节点',
-                value: 'F2'
-            },
-            {
-                icon: 'iconhuanhang',
-                name: '文本换行',
-                value: 'Shift + Enter'
-            },
-            {
-                icon: 'iconhoutui-shi',
-                name: '回退',
-                value: 'Ctrl + Z'
-            },
-            {
-                icon: 'iconqianjin1',
-                name: '前进',
-                value: 'Ctrl + Y'
-            },
-            {
-                icon: 'iconquanxuan',
-                name: '全选',
-                value: 'Ctrl + A'
-            },
-            {
-                icon: 'iconquanxuan',
-                name: '多选',
-                value: '右键 / Ctrl + 左键'
-            },
-            {
-                icon: 'iconzhengli',
-                name: '一键整理布局',
-                value: 'Ctrl + L'
-            },
-        ]
-    },
-    {
-        type: '画布操作',
-        list: [
-            {
-                icon: 'iconfangda',
-                name: '放大',
-                value: 'Ctrl + +'
-            },
-            {
-                icon: 'iconsuoxiao',
-                name: '缩小',
-                value: 'Ctrl + -'
-            },
-            {
-                icon: 'icondingwei',
-                name: '恢复默认',
-                value: 'Ctrl + Enter'
-            }
-        ]
-    }
+  {
+    type: '节点操作',
+    list: [
+      {
+        icon: 'icontianjiazijiedian',
+        name: '插入下级节点',
+        value: 'Tab'
+      },
+      {
+        icon: 'iconjiedian',
+        name: '插入同级节点',
+        value: 'Enter'
+      },
+      {
+        icon: 'iconshangyi',
+        name: '上移节点',
+        value: 'Ctrl + ↑'
+      },
+      {
+        icon: 'iconxiayi',
+        name: '下移节点',
+        value: 'Ctrl + ↓'
+      },
+      {
+        icon: 'icongaikuozonglan',
+        name: '插入概要',
+        value: 'Ctrl + S'
+      },
+      {
+        icon: 'iconzhankai',
+        name: '展开/收起节点',
+        value: '/'
+      },
+      {
+        icon: 'iconshanchu',
+        name: '删除节点',
+        value: 'Delete | Backspace'
+      },
+      {
+        icon: 'iconfuzhi',
+        name: '复制节点',
+        value: 'Ctrl + C'
+      },
+      {
+        icon: 'iconjianqie',
+        name: '剪切节点',
+        value: 'Ctrl + X'
+      },
+      {
+        icon: 'iconniantie',
+        name: '粘贴节点',
+        value: 'Ctrl + V'
+      },
+      {
+        icon: 'iconbianji',
+        name: '编辑节点',
+        value: 'F2'
+      },
+      {
+        icon: 'iconhuanhang',
+        name: '文本换行',
+        value: 'Shift + Enter'
+      },
+      {
+        icon: 'iconhoutui-shi',
+        name: '回退',
+        value: 'Ctrl + Z'
+      },
+      {
+        icon: 'iconqianjin1',
+        name: '前进',
+        value: 'Ctrl + Y'
+      },
+      {
+        icon: 'iconquanxuan',
+        name: '全选',
+        value: 'Ctrl + A'
+      },
+      {
+        icon: 'iconquanxuan',
+        name: '多选',
+        value: '右键 / Ctrl + 左键'
+      },
+      {
+        icon: 'iconzhengli',
+        name: '一键整理布局',
+        value: 'Ctrl + L'
+      }
+    ]
+  },
+  {
+    type: '画布操作',
+    list: [
+      {
+        icon: 'iconfangda',
+        name: '放大',
+        value: 'Ctrl + +'
+      },
+      {
+        icon: 'iconsuoxiao',
+        name: '缩小',
+        value: 'Ctrl + -'
+      },
+      {
+        icon: 'icondingwei',
+        name: '恢复默认',
+        value: 'Ctrl + Enter'
+      }
+    ]
+  }
 ]
 
 // 形状列表
 export const shapeList = [
-    {
-        name: '矩形',
-        value: 'rectangle'
-    },
-    {
-        name: '菱形',
-        value: 'diamond'
-    },
-    {
-        name: '平行四边形',
-        value: 'parallelogram'
-    },
-    {
-        name: '圆角矩形',
-        value: 'roundedRectangle'
-    },
-    {
-        name: '八角矩形',
-        value: 'octagonalRectangle'
-    },
-    {
-        name: '外三角矩形',
-        value: 'outerTriangularRectangle'
-    },
-    {
-        name: '内三角矩形',
-        value: 'innerTriangularRectangle'
-    },
-    {
-        name: '椭圆',
-        value: 'ellipse'
-    },
-    {
-        name: '圆',
-        value: 'circle'
-    }
-]
+  {
+    name: '矩形',
+    value: 'rectangle'
+  },
+  {
+    name: '菱形',
+    value: 'diamond'
+  },
+  {
+    name: '平行四边形',
+    value: 'parallelogram'
+  },
+  {
+    name: '圆角矩形',
+    value: 'roundedRectangle'
+  },
+  {
+    name: '八角矩形',
+    value: 'octagonalRectangle'
+  },
+  {
+    name: '外三角矩形',
+    value: 'outerTriangularRectangle'
+  },
+  {
+    name: '内三角矩形',
+    value: 'innerTriangularRectangle'
+  },
+  {
+    name: '椭圆',
+    value: 'ellipse'
+  },
+  {
+    name: '圆',
+    value: 'circle'
+  }
+]

web/src/main.js

@@ -4,11 +4,14 @@ import router from './router'
 import store from './store'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import '@/assets/icon-font/iconfont.css';
+import '@/assets/icon-font/iconfont.css'
+import 'viewerjs/dist/viewer.css'
+import VueViewer from 'v-viewer'
 
 Vue.config.productionTip = false
 Vue.prototype.$bus = new Vue()
 Vue.use(ElementUI)
+Vue.use(VueViewer)
 
 new Vue({
   render: h => h(App),

web/src/pages/Edit/Index.vue

@@ -8,34 +8,34 @@
 </template>
 
 <script>
-import Toolbar from "./components/Toolbar";
-import Edit from "./components/Edit";
-import { mapState, mapActions } from "vuex";
+import Toolbar from './components/Toolbar'
+import Edit from './components/Edit'
+import { mapActions } from 'vuex'
 
 export default {
-  name: "Index",
+  name: 'Index',
   components: {
     Toolbar,
-    Edit,
+    Edit
   },
   data() {
     return {
-      show: false,
-    };
+      show: false
+    }
   },
   async created() {
     const loading = this.$loading({
       lock: true,
-      text: "正在加载，请稍后...",
-    });
-    await this.getUserMindMapData();
-    this.show = true;
-    loading.close();
+      text: '正在加载，请稍后...'
+    })
+    await this.getUserMindMapData()
+    this.show = true
+    loading.close()
   },
   methods: {
-    ...mapActions(["getUserMindMapData"]),
-  },
-};
+    ...mapActions(['getUserMindMapData'])
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/BaseStyle.vue

@@ -9,8 +9,8 @@
             <Color
               :color="style.backgroundColor"
               @change="
-                (color) => {
-                  update('backgroundColor', color);
+                color => {
+                  update('backgroundColor', color)
                 }
               "
             ></Color>
@@ -20,8 +20,8 @@
               class="imgUpload"
               v-model="style.backgroundImage"
               @change="
-                (img) => {
-                  update('backgroundImage', img);
+                img => {
+                  update('backgroundImage', img)
                 }
               "
             ></ImgUpload>
@@ -33,8 +33,8 @@
                 v-model="style.backgroundRepeat"
                 placeholder=""
                 @change="
-                  (value) => {
-                    update('backgroundRepeat', value);
+                  value => {
+                    update('backgroundRepeat', value)
                   }
                 "
               >
@@ -64,8 +64,8 @@
             <Color
               :color="style.lineColor"
               @change="
-                (color) => {
-                  update('lineColor', color);
+                color => {
+                  update('lineColor', color)
                 }
               "
             ></Color>
@@ -79,8 +79,8 @@
             v-model="style.lineWidth"
             placeholder=""
             @change="
-              (value) => {
-                update('lineWidth', value);
+              value => {
+                update('lineWidth', value)
               }
             "
           >
@@ -103,8 +103,8 @@
             v-model="style.lineStyle"
             placeholder=""
             @change="
-              (value) => {
-                update('lineStyle', value);
+              value => {
+                update('lineStyle', value)
               }
             "
           >
@@ -132,8 +132,8 @@
             <Color
               :color="style.generalizationLineColor"
               @change="
-                (color) => {
-                  update('generalizationLineColor', color);
+                color => {
+                  update('generalizationLineColor', color)
                 }
               "
             ></Color>
@@ -147,8 +147,8 @@
             v-model="style.generalizationLineWidth"
             placeholder=""
             @change="
-              (value) => {
-                update('generalizationLineWidth', value);
+              value => {
+                update('generalizationLineWidth', value)
               }
             "
           >
@@ -171,8 +171,8 @@
             style="width: 200px"
             v-model="style.paddingX"
             @change="
-              (value) => {
-                update('paddingX', value);
+              value => {
+                update('paddingX', value)
               }
             "
           ></el-slider>
@@ -185,8 +185,8 @@
             style="width: 200px"
             v-model="style.paddingY"
             @change="
-              (value) => {
-                update('paddingY', value);
+              value => {
+                update('paddingY', value)
               }
             "
           ></el-slider>
@@ -203,8 +203,8 @@
             :min="10"
             :max="300"
             @change="
-              (value) => {
-                update('imgMaxWidth', value);
+              value => {
+                update('imgMaxWidth', value)
               }
             "
           ></el-slider>
@@ -219,8 +219,8 @@
             :min="10"
             :max="300"
             @change="
-              (value) => {
-                update('imgMaxHeight', value);
+              value => {
+                update('imgMaxHeight', value)
               }
             "
           ></el-slider>
@@ -237,8 +237,8 @@
             :min="12"
             :max="50"
             @change="
-              (value) => {
-                update('iconSize', value);
+              value => {
+                update('iconSize', value)
               }
             "
           ></el-slider>
@@ -262,8 +262,8 @@
             style="width: 200px"
             v-model="style.marginX"
             @change="
-              (value) => {
-                updateMargin('marginX', value);
+              value => {
+                updateMargin('marginX', value)
               }
             "
           ></el-slider>
@@ -275,8 +275,8 @@
             style="width: 200px"
             v-model="style.marginY"
             @change="
-              (value) => {
-                updateMargin('marginY', value);
+              value => {
+                updateMargin('marginY', value)
               }
             "
           ></el-slider>
@@ -287,15 +287,11 @@
 </template>
 
 <script>
-import Sidebar from "./Sidebar";
-import Color from "./Color";
-import {
-  lineWidthList,
-  lineStyleList,
-  backgroundRepeatList
-} from "@/config";
-import ImgUpload from "@/components/ImgUpload";
-import { storeConfig } from "@/api";
+import Sidebar from './Sidebar'
+import Color from './Color'
+import { lineWidthList, lineStyleList, backgroundRepeatList } from '@/config'
+import ImgUpload from '@/components/ImgUpload'
+import { storeConfig } from '@/api'
 
 /**
  * @Author: 王林
@@ -303,55 +299,55 @@ import { storeConfig } from "@/api";
  * @Desc: 基础样式
  */
 export default {
-  name: "BaseStyle",
+  name: 'BaseStyle',
   components: {
     Sidebar,
     Color,
-    ImgUpload,
+    ImgUpload
   },
   props: {
     data: {
       type: [Object, null],
-      default: null,
+      default: null
     },
     mindMap: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   data() {
     return {
       lineWidthList,
       lineStyleList,
       backgroundRepeatList,
-      activeTab: "color",
-      marginActiveTab: "second",
+      activeTab: 'color',
+      marginActiveTab: 'second',
       style: {
-        backgroundColor: "",
-        lineColor: "",
-        lineWidth: "",
-        lineStyle: "",
-        generalizationLineWidth: "",
-        generalizationLineColor: "",
+        backgroundColor: '',
+        lineColor: '',
+        lineWidth: '',
+        lineStyle: '',
+        generalizationLineWidth: '',
+        generalizationLineColor: '',
         paddingX: 0,
         paddingY: 0,
         imgMaxWidth: 0,
         imgMaxHeight: 0,
         iconSize: 0,
-        backgroundImage: "",
-        backgroundRepeat: "no-repeat",
+        backgroundImage: '',
+        backgroundRepeat: 'no-repeat',
         marginX: 0,
-        marginY: 0,
-      },
-    };
+        marginY: 0
+      }
+    }
   },
   created() {
-    this.$bus.$on("showBaseStyle", () => {
-      this.$refs.sidebar.show = false;
+    this.$bus.$on('showBaseStyle', () => {
+      this.$refs.sidebar.show = false
       this.$nextTick(() => {
-        this.$refs.sidebar.show = true;
-        this.initStyle();
-      });
-    });
+        this.$refs.sidebar.show = true
+        this.initStyle()
+      })
+    })
   },
   methods: {
     /**
@@ -360,27 +356,27 @@ export default {
      * @Desc: 初始样式
      */
     initStyle() {
-      [
-        "backgroundColor",
-        "lineWidth",
-        "lineStyle",
-        "lineColor",
-        "generalizationLineWidth",
-        "generalizationLineColor",
-        "paddingX",
-        "paddingY",
-        "imgMaxWidth",
-        "imgMaxHeight",
-        "iconSize",
-        "backgroundImage",
-        "backgroundRepeat",
-      ].forEach((key) => {
-        this.style[key] = this.mindMap.getThemeConfig(key);
-        if (key === "backgroundImage" && this.style[key] === "none") {
-          this.style[key] = "";
+      ;[
+        'backgroundColor',
+        'lineWidth',
+        'lineStyle',
+        'lineColor',
+        'generalizationLineWidth',
+        'generalizationLineColor',
+        'paddingX',
+        'paddingY',
+        'imgMaxWidth',
+        'imgMaxHeight',
+        'iconSize',
+        'backgroundImage',
+        'backgroundRepeat'
+      ].forEach(key => {
+        this.style[key] = this.mindMap.getThemeConfig(key)
+        if (key === 'backgroundImage' && this.style[key] === 'none') {
+          this.style[key] = ''
         }
-      });
-      this.initMarginStyle();
+      })
+      this.initMarginStyle()
     },
 
     /**
@@ -389,10 +385,11 @@ export default {
      * @Desc: margin初始值
      */
     initMarginStyle() {
-      ["marginX", "marginY"].forEach((key) => {
-        this.style[key] =
-          this.mindMap.getThemeConfig()[this.marginActiveTab][key];
-      });
+      ;['marginX', 'marginY'].forEach(key => {
+        this.style[key] = this.mindMap.getThemeConfig()[this.marginActiveTab][
+          key
+        ]
+      })
     },
 
     /**
@@ -401,19 +398,19 @@ export default {
      * @Desc: 更新配置
      */
     update(key, value) {
-      if (key === "backgroundImage" && value === "none") {
-        this.style[key] = "";
+      if (key === 'backgroundImage' && value === 'none') {
+        this.style[key] = ''
       } else {
-        this.style[key] = value;
+        this.style[key] = value
       }
-      this.data.theme.config[key] = value;
-      this.mindMap.setThemeConfig(this.data.theme.config);
+      this.data.theme.config[key] = value
+      this.mindMap.setThemeConfig(this.data.theme.config)
       storeConfig({
         theme: {
-            "template": this.mindMap.getTheme(),
-            "config": this.data.theme.config
+          template: this.mindMap.getTheme(),
+          config: this.data.theme.config
         }
-      });
+      })
     },
 
     /**
@@ -422,15 +419,15 @@ export default {
      * @Desc: 设置margin
      */
     updateMargin(type, value) {
-      this.style[type] = value;
+      this.style[type] = value
       if (!this.data.theme.config[this.marginActiveTab]) {
-        this.data.theme.config[this.marginActiveTab] = {};
+        this.data.theme.config[this.marginActiveTab] = {}
       }
-      this.data.theme.config[this.marginActiveTab][type] = value;
-      this.mindMap.setThemeConfig(this.data.theme.config);
-    },
-  },
-};
+      this.data.theme.config[this.marginActiveTab][type] = value
+      this.mindMap.setThemeConfig(this.data.theme.config)
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/Color.vue

@@ -21,34 +21,34 @@
 </template>
 
 <script>
-import { colorList } from "@/config";
+import { colorList } from '@/config'
 
-/** 
- * @Author: 王林 
- * @Date: 2021-06-24 22:53:10 
- * @Desc: 颜色选择器 
+/**
+ * @Author: 王林
+ * @Date: 2021-06-24 22:53:10
+ * @Desc: 颜色选择器
  */
 export default {
-  name: "Color",
+  name: 'Color',
   props: {
     color: {
       type: String,
-      default: "",
-    },
+      default: ''
+    }
   },
   data() {
     return {
       colorList,
-      selectColor: "",
-    };
+      selectColor: ''
+    }
   },
   watch: {
     color() {
-      this.selectColor = this.color;
-    },
+      this.selectColor = this.color
+    }
   },
   created() {
-    this.selectColor = this.color;
+    this.selectColor = this.color
   },
   methods: {
     /**
@@ -57,7 +57,7 @@ export default {
      * @Desc: 点击预设颜色
      */
     clickColorItem(color) {
-      this.$emit("change", color);
+      this.$emit('change', color)
     },
 
     /**
@@ -66,10 +66,10 @@ export default {
      * @Desc: 修改颜色
      */
     changeColor() {
-      this.$emit("change", this.selectColor);
-    },
-  },
-};
+      this.$emit('change', this.selectColor)
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/Contextmenu.vue

@@ -17,7 +17,11 @@
         插入子级节点
         <span class="desc">Tab</span>
       </div>
-      <div class="item" @click="exec('ADD_GENERALIZATION')" :class="{ disabled: insertNodeBtnDisabled }">
+      <div
+        class="item"
+        @click="exec('ADD_GENERALIZATION')"
+        :class="{ disabled: insertNodeBtnDisabled }"
+      >
         插入概要
         <span class="desc">Ctrl + S</span>
       </div>
@@ -65,7 +69,14 @@
       <div class="item">
         展开到
         <div class="subItems listBox">
-          <div class="item" v-for="(item, index) in expandList" :key="item" @click="exec('UNEXPAND_TO_LEVEL', false, index + 1)">{{item}}</div>
+          <div
+            class="item"
+            v-for="(item, index) in expandList"
+            :key="item"
+            @click="exec('UNEXPAND_TO_LEVEL', false, index + 1)"
+          >
+            {{ item }}
+          </div>
         </div>
       </div>
       <div class="item" @click="exec('RESET_LAYOUT')">
@@ -83,11 +94,11 @@
  * @Desc: 右键菜单
  */
 export default {
-  name: "Contextmenu",
+  name: 'Contextmenu',
   props: {
     mindMap: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   data() {
     return {
@@ -96,63 +107,70 @@ export default {
       top: 0,
       node: null,
       copyData: null,
-      type: "",
+      type: '',
       isMousedown: false,
       mosuedownX: 0,
       mosuedownY: 0,
-      expandList: ['一级主题', '二级主题', '三级主题', '四级主题', '五级主题', '六级主题']
-    };
+      expandList: [
+        '一级主题',
+        '二级主题',
+        '三级主题',
+        '四级主题',
+        '五级主题',
+        '六级主题'
+      ]
+    }
   },
   computed: {
     insertNodeBtnDisabled() {
-      return !this.node || this.node.isRoot;
+      return !this.node || this.node.isRoot
     },
     upNodeBtnDisabled() {
       if (!this.node || this.node.isRoot) {
-        return true;
+        return true
       }
       let isFirst =
-        this.node.parent.children.findIndex((item) => {
-          return item === this.node;
-        }) === 0;
-      return isFirst;
+        this.node.parent.children.findIndex(item => {
+          return item === this.node
+        }) === 0
+      return isFirst
     },
     downNodeBtnDisabled() {
       if (!this.node || this.node.isRoot) {
-        return true;
+        return true
       }
-      let children = this.node.parent.children;
+      let children = this.node.parent.children
       let isLast =
-        children.findIndex((item) => {
-          return item === this.node;
+        children.findIndex(item => {
+          return item === this.node
         }) ===
-        children.length - 1;
-      return isLast;
-    },
+        children.length - 1
+      return isLast
+    }
   },
   created() {
-    this.$bus.$on("node_contextmenu", this.show);
-    this.$bus.$on("node_click", this.hide);
-    this.$bus.$on("draw_click", this.hide);
-    this.$bus.$on("expand_btn_click", this.hide);
-    this.$bus.$on("svg_mousedown", this.onMousedown);
-    this.$bus.$on("mouseup", this.onMouseup);
+    this.$bus.$on('node_contextmenu', this.show)
+    this.$bus.$on('node_click', this.hide)
+    this.$bus.$on('draw_click', this.hide)
+    this.$bus.$on('expand_btn_click', this.hide)
+    this.$bus.$on('svg_mousedown', this.onMousedown)
+    this.$bus.$on('mouseup', this.onMouseup)
     // 注册快捷键
-    this.mindMap.keyCommand.addShortcut('Control+c', this.copy);
-    this.mindMap.keyCommand.addShortcut('Control+v', this.paste);
-    this.mindMap.keyCommand.addShortcut('Control+x', this.cut);
+    this.mindMap.keyCommand.addShortcut('Control+c', this.copy)
+    this.mindMap.keyCommand.addShortcut('Control+v', this.paste)
+    this.mindMap.keyCommand.addShortcut('Control+x', this.cut)
   },
   beforeDestroy() {
-    this.$bus.$off("node_contextmenu", this.show);
-    this.$bus.$off("node_click", this.hide);
-    this.$bus.$off("draw_click", this.hide);
-    this.$bus.$off("expand_btn_click", this.hide);
-    this.$bus.$on("svg_mousedown", this.onMousedown);
-    this.$bus.$on("mouseup", this.onMouseup);
+    this.$bus.$off('node_contextmenu', this.show)
+    this.$bus.$off('node_click', this.hide)
+    this.$bus.$off('draw_click', this.hide)
+    this.$bus.$off('expand_btn_click', this.hide)
+    this.$bus.$on('svg_mousedown', this.onMousedown)
+    this.$bus.$on('mouseup', this.onMouseup)
     // 移除快捷键
-    this.mindMap.keyCommand.removeShortcut('Control+c', this.copy);
-    this.mindMap.keyCommand.removeShortcut('Control+v', this.paste);
-    this.mindMap.keyCommand.removeShortcut('Control+x', this.cut);
+    this.mindMap.keyCommand.removeShortcut('Control+c', this.copy)
+    this.mindMap.keyCommand.removeShortcut('Control+v', this.paste)
+    this.mindMap.keyCommand.removeShortcut('Control+x', this.cut)
   },
   methods: {
     /**
@@ -161,11 +179,11 @@ export default {
      * @Desc: 节点右键显示
      */
     show(e, node) {
-      this.type = "node";
-      this.left = e.clientX + 10;
-      this.top = e.clientY + 10;
-      this.isShow = true;
-      this.node = node;
+      this.type = 'node'
+      this.left = e.clientX + 10
+      this.top = e.clientY + 10
+      this.isShow = true
+      this.node = node
     },
 
     /**
@@ -175,11 +193,11 @@ export default {
      */
     onMousedown(e) {
       if (e.which !== 3) {
-        return;
+        return
       }
       this.mosuedownX = e.clientX
       this.mosuedownY = e.clientY
-      this.isMousedown = true;
+      this.isMousedown = true
     },
 
     /**
@@ -189,12 +207,15 @@ export default {
      */
     onMouseup(e) {
       if (!this.isMousedown) {
-        return;
+        return
       }
       this.isMousedown = false
-      if (Math.abs(this.mosuedownX - e.clientX) > 3 || Math.abs(this.mosuedownY - e.clientY) > 3) {
+      if (
+        Math.abs(this.mosuedownX - e.clientX) > 3 ||
+        Math.abs(this.mosuedownY - e.clientY) > 3
+      ) {
         this.hide()
-        return;
+        return
       }
       this.show2(e)
     },
@@ -205,10 +226,10 @@ export default {
      * @Desc: 画布右键显示
      */
     show2(e) {
-      this.type = "svg";
-      this.left = e.clientX + 10;
-      this.top = e.clientY + 10;
-      this.isShow = true;
+      this.type = 'svg'
+      this.left = e.clientX + 10
+      this.top = e.clientY + 10
+      this.isShow = true
     },
 
     /**
@@ -217,10 +238,10 @@ export default {
      * @Desc: 隐藏
      */
     hide() {
-      this.isShow = false;
-      this.left = 0;
-      this.top = 0;
-      this.type = "";
+      this.isShow = false
+      this.left = 0
+      this.top = 0
+      this.type = ''
     },
 
     /**
@@ -230,58 +251,58 @@ export default {
      */
     exec(key, disabled, ...args) {
       if (disabled) {
-        return;
+        return
       }
       switch (key) {
-        case "COPY_NODE":
-          this.copyData = this.mindMap.renderer.copyNode();
-          break;
-        case "CUT_NODE":
-          this.$bus.$emit("execCommand", key, (copyData) => {
-            this.copyData = copyData;
-          });
-          break;
-        case "PASTE_NODE":
-          this.$bus.$emit("execCommand", key, this.copyData);
-          break;
-        case "RETURN_CENTER":
-          this.mindMap.view.reset();
-          break;
+        case 'COPY_NODE':
+          this.copyData = this.mindMap.renderer.copyNode()
+          break
+        case 'CUT_NODE':
+          this.$bus.$emit('execCommand', key, copyData => {
+            this.copyData = copyData
+          })
+          break
+        case 'PASTE_NODE':
+          this.$bus.$emit('execCommand', key, this.copyData)
+          break
+        case 'RETURN_CENTER':
+          this.mindMap.view.reset()
+          break
         default:
-          this.$bus.$emit("execCommand", key, ...args);
-          break;
+          this.$bus.$emit('execCommand', key, ...args)
+          break
       }
-      this.hide();
+      this.hide()
     },
 
-    /** 
-     * @Author: 王林25 
-     * @Date: 2022-08-04 14:25:45 
-     * @Desc: 复制 
+    /**
+     * @Author: 王林25
+     * @Date: 2022-08-04 14:25:45
+     * @Desc: 复制
      */
     copy() {
-      this.exec("COPY_NODE");
+      this.exec('COPY_NODE')
     },
 
-    /** 
-     * @Author: 王林25 
-     * @Date: 2022-08-04 14:26:43 
-     * @Desc: 粘贴 
+    /**
+     * @Author: 王林25
+     * @Date: 2022-08-04 14:26:43
+     * @Desc: 粘贴
      */
     paste() {
-      this.exec("PASTE_NODE");
+      this.exec('PASTE_NODE')
     },
 
-    /** 
-     * @Author: 王林25 
-     * @Date: 2022-08-04 14:27:32 
-     * @Desc: 剪切 
+    /**
+     * @Author: 王林25
+     * @Date: 2022-08-04 14:27:32
+     * @Desc: 剪切
      */
     cut() {
-      this.exec("CUT_NODE");
+      this.exec('CUT_NODE')
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/Count.vue

@@ -18,20 +18,20 @@
  * @Desc: 字数及节点数量统计
  */
 export default {
-  name: "Count",
+  name: 'Count',
   props: {},
   data() {
     return {
       words: 0,
-      num: 0,
-    };
+      num: 0
+    }
   },
   created() {
-    this.$bus.$on("data_change", (data) => {
-      this.words = 0;
-      this.num = 0;
-      this.walk(data);
-    });
+    this.$bus.$on('data_change', data => {
+      this.words = 0
+      this.num = 0
+      this.walk(data)
+    })
   },
   methods: {
     /**
@@ -40,16 +40,16 @@ export default {
      * @Desc: 遍历
      */
     walk(data) {
-      this.num++;
-      this.words += (String(data.data.text) || "").length;
+      this.num++
+      this.words += (String(data.data.text) || '').length
       if (data.children && data.children.length > 0) {
-        data.children.forEach((item) => {
-          this.walk(item);
-        });
+        data.children.forEach(item => {
+          this.walk(item)
+        })
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/Edit.vue

@@ -12,6 +12,7 @@
     <ShortcutKey></ShortcutKey>
     <Contextmenu v-if="mindMap" :mindMap="mindMap"></Contextmenu>
     <NodeNoteContentShow></NodeNoteContentShow>
+    <NodeImgPreview v-if="mindMap" :mindMap="mindMap"></NodeImgPreview>
   </div>
 </template>
 
@@ -28,7 +29,8 @@ import ShortcutKey from './ShortcutKey'
 import Contextmenu from './Contextmenu'
 import NodeNoteContentShow from './NodeNoteContentShow.vue'
 import { getData, storeData, storeConfig } from '@/api'
-import Navigator from './Navigator.vue';
+import Navigator from './Navigator.vue'
+import NodeImgPreview from './NodeImgPreview.vue'
 
 /**
  * @Author: 王林
@@ -48,7 +50,8 @@ export default {
     ShortcutKey,
     Contextmenu,
     NodeNoteContentShow,
-    Navigator
+    Navigator,
+    NodeImgPreview
   },
   data() {
     return {
@@ -65,11 +68,11 @@ export default {
     this.$bus.$on('export', this.export)
     this.$bus.$on('setData', this.setData)
     this.$bus.$on('startTextEdit', () => {
-      this.mindMap.renderer.startTextEdit();
-    });
+      this.mindMap.renderer.startTextEdit()
+    })
     this.$bus.$on('endTextEdit', () => {
-      this.mindMap.renderer.endTextEdit();
-    });
+      this.mindMap.renderer.endTextEdit()
+    })
     if (this.openTest) {
       setTimeout(() => {
         this.test()
@@ -85,7 +88,7 @@ export default {
     test() {
       let nodeData = {
         data: { text: '根节点', expand: true, isActive: false },
-        children: [],
+        children: []
       }
       setTimeout(() => {
         nodeData.data.text = '理想青年实验室'
@@ -94,25 +97,67 @@ export default {
         setTimeout(() => {
           nodeData.children.push({
             data: { text: '网站', expand: true, isActive: false },
-            children: [],
+            children: []
           })
           this.mindMap.setData(JSON.parse(JSON.stringify(nodeData)))
 
           setTimeout(() => {
             nodeData.children.push({
               data: { text: '博客', expand: true, isActive: false },
-              children: [],
+              children: []
             })
             this.mindMap.setData(JSON.parse(JSON.stringify(nodeData)))
 
             setTimeout(() => {
-              let viewData = {"transform":{"scaleX":1,"scaleY":1,"shear":0,"rotate":0,"translateX":179,"translateY":0,"originX":0,"originY":0,"a":1,"b":0,"c":0,"d":1,"e":179,"f":0},"state":{"scale":1,"x":179,"y":0,"sx":0,"sy":0}}
+              let viewData = {
+                transform: {
+                  scaleX: 1,
+                  scaleY: 1,
+                  shear: 0,
+                  rotate: 0,
+                  translateX: 179,
+                  translateY: 0,
+                  originX: 0,
+                  originY: 0,
+                  a: 1,
+                  b: 0,
+                  c: 0,
+                  d: 1,
+                  e: 179,
+                  f: 0
+                },
+                state: { scale: 1, x: 179, y: 0, sx: 0, sy: 0 }
+              }
               this.mindMap.view.setTransformData(viewData)
-              
+
               setTimeout(() => {
-                let viewData = {"transform":{"scaleX":1.6000000000000005,"scaleY":1.6000000000000005,"shear":0,"rotate":0,"translateX":-373.3000000000004,"translateY":-281.10000000000025,"originX":0,"originY":0,"a":1.6000000000000005,"b":0,"c":0,"d":1.6000000000000005,"e":-373.3000000000004,"f":-281.10000000000025},"state":{"scale":1.6000000000000005,"x":179,"y":0,"sx":0,"sy":0}}
+                let viewData = {
+                  transform: {
+                    scaleX: 1.6000000000000005,
+                    scaleY: 1.6000000000000005,
+                    shear: 0,
+                    rotate: 0,
+                    translateX: -373.3000000000004,
+                    translateY: -281.10000000000025,
+                    originX: 0,
+                    originY: 0,
+                    a: 1.6000000000000005,
+                    b: 0,
+                    c: 0,
+                    d: 1.6000000000000005,
+                    e: -373.3000000000004,
+                    f: -281.10000000000025
+                  },
+                  state: {
+                    scale: 1.6000000000000005,
+                    x: 179,
+                    y: 0,
+                    sx: 0,
+                    sy: 0
+                  }
+                }
                 this.mindMap.view.setTransformData(viewData)
-              }, 1000);
+              }, 1000)
             }, 1000)
           }, 1000)
         }, 1000)
@@ -138,12 +183,12 @@ export default {
       if (this.openTest) {
         return
       }
-      this.$bus.$on('data_change', (data) => {
+      this.$bus.$on('data_change', data => {
         storeData(data)
       })
-      this.$bus.$on('view_data_change', (data) => {
+      this.$bus.$on('view_data_change', data => {
         storeConfig({
-          view: data,
+          view: data
         })
       })
     },
@@ -177,10 +222,10 @@ export default {
         viewData: view,
         customNoteContentShow: {
           show: (content, left, top) => {
-            this.$bus.$emit('showNoteContent', content, left, top);
+            this.$bus.$emit('showNoteContent', content, left, top)
           },
           hide: () => {
-            this.$bus.$emit('hideNoteContent');
+            this.$bus.$emit('hideNoteContent')
           }
         }
       })
@@ -199,8 +244,9 @@ export default {
         'expand_btn_click',
         'svg_mousedown',
         'mouseup',
-        'mode_change'
-      ].forEach((event) => {
+        'mode_change',
+        'node_tree_render_end'
+      ].forEach(event => {
         this.mindMap.on(event, (...args) => {
           this.$bus.$emit(event, ...args)
         })
@@ -251,8 +297,8 @@ export default {
       } catch (error) {
         console.log(error)
       }
-    },
-  },
+    }
+  }
 }
 </script>
 

web/src/pages/Edit/components/Export.vue

@@ -8,8 +8,17 @@
     <div>
       <div class="nameInputBox">
         <span class="name">导出文件名称</span>
-        <el-input style="width: 300px" v-model="fileName" size="mini"></el-input>
-        <el-checkbox v-show="['smm', 'json'].includes(exportType)" v-model="widthConfig" style="margin-left: 12px">是否包含主题、结构等配置数据</el-checkbox>
+        <el-input
+          style="width: 300px"
+          v-model="fileName"
+          size="mini"
+        ></el-input>
+        <el-checkbox
+          v-show="['smm', 'json'].includes(exportType)"
+          v-model="widthConfig"
+          style="margin-left: 12px"
+          >是否包含主题、结构等配置数据</el-checkbox
+        >
       </div>
       <el-radio-group v-model="exportType" size="mini">
         <el-radio-button label="smm">专有文件（.smm）</el-radio-button>
@@ -34,19 +43,19 @@
  * @Desc: 导出
  */
 export default {
-  name: "Export",
+  name: 'Export',
   data() {
     return {
       dialogVisible: false,
-      exportType: "smm",
+      exportType: 'smm',
       fileName: '思维导图',
       widthConfig: true
-    };
+    }
   },
   created() {
-    this.$bus.$on("showExport", () => {
-      this.dialogVisible = true;
-    });
+    this.$bus.$on('showExport', () => {
+      this.dialogVisible = true
+    })
   },
   methods: {
     /**
@@ -55,7 +64,7 @@ export default {
      * @Desc: 取消
      */
     cancel() {
-      this.dialogVisible = false;
+      this.dialogVisible = false
     },
 
     /**
@@ -64,15 +73,21 @@ export default {
      * @Desc:  确定
      */
     confirm() {
-      this.$bus.$emit("export", this.exportType, true, this.fileName, this.widthConfig);
+      this.$bus.$emit(
+        'export',
+        this.exportType,
+        true,
+        this.fileName,
+        this.widthConfig
+      )
       this.$notify.info({
-          title: '消息',
-          message: '如果没有触发下载，请检查是否被浏览器拦截了'
-        });
-      this.cancel();
-    },
-  },
-};
+        title: '消息',
+        message: '如果没有触发下载，请检查是否被浏览器拦截了'
+      })
+      this.cancel()
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -89,4 +104,4 @@ export default {
     margin-top: 10px;
   }
 }
-</style>
+</style>

web/src/pages/Edit/components/Fullscreen.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { fullscrrenEvent, fullScreen } from "@/utils";
+import { fullscrrenEvent, fullScreen } from '@/utils'
 
 /**
  * @Author: 王林
@@ -15,27 +15,21 @@ import { fullscrrenEvent, fullScreen } from "@/utils";
  * @Desc: 全屏
  */
 export default {
-  name: "Fullscreen",
+  name: 'Fullscreen',
   props: {
     mindMap: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   data() {
-    return {};
-  },
-  watch: {
-    mindMap(val, oldVal) {
-      if (val && !oldVal) {
-      }
-    },
+    return {}
   },
   created() {
-    document[fullscrrenEvent] = (e) => {
+    document[fullscrrenEvent] = () => {
       setTimeout(() => {
-        this.mindMap.resize();
-      }, 1000);
-    };
+        this.mindMap.resize()
+      }, 1000)
+    }
   },
   methods: {
     /**
@@ -44,10 +38,10 @@ export default {
      * @Desc: 准备全屏
      */
     toFullscreen() {
-      fullScreen(this.mindMap.el);
-    },
-  },
-};
+      fullScreen(this.mindMap.el)
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/Import.vue

@@ -1,18 +1,36 @@
 <template>
-<el-dialog class="nodeDialog" title="导入" :visible.sync="dialogVisible" width="300px">
-    <el-upload ref="upload" action="x" :file-list="fileList" :auto-upload="false" :multiple="false" :on-change="onChange" :limit="1" :on-exceed="onExceed">
-        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-        <div slot="tip" class="el-upload__tip">支持.smm、.json、.xmind文件</div>
+  <el-dialog
+    class="nodeDialog"
+    title="导入"
+    :visible.sync="dialogVisible"
+    width="300px"
+  >
+    <el-upload
+      ref="upload"
+      action="x"
+      :file-list="fileList"
+      :auto-upload="false"
+      :multiple="false"
+      :on-change="onChange"
+      :limit="1"
+      :on-exceed="onExceed"
+    >
+      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+      <div slot="tip" class="el-upload__tip">
+        支持.smm、.json、.xmind、.xlsx文件
+      </div>
     </el-upload>
     <span slot="footer" class="dialog-footer">
-        <el-button @click="cancel">取 消</el-button>
-        <el-button type="primary" @click="confirm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+      <el-button type="primary" @click="confirm">确 定</el-button>
     </span>
-</el-dialog>
+  </el-dialog>
 </template>
 
 <script>
 import MindMap from 'simple-mind-map'
+import { fileToBuffer } from '@/utils'
+import { read, utils } from 'xlsx'
 
 /**
  * @Author: 王林
@@ -20,110 +38,190 @@ import MindMap from 'simple-mind-map'
  * @Desc: 导入
  */
 export default {
-    name: "Import",
-    data() {
-        return {
-            dialogVisible: false,
-            fileList: [],
-        };
+  name: 'Import',
+  data() {
+    return {
+      dialogVisible: false,
+      fileList: []
+    }
+  },
+  watch: {
+    dialogVisible(val, oldVal) {
+      if (!val && oldVal) {
+        this.fileList = []
+      }
+    }
+  },
+  created() {
+    this.$bus.$on('showImport', () => {
+      this.dialogVisible = true
+    })
+  },
+  methods: {
+    /**
+     * @Author: 王林
+     * @Date: 2021-08-03 22:48:42
+     * @Desc: 文件选择
+     */
+    onChange(file) {
+      let reg = /\.(smm|xmind|json|xlsx)$/
+      if (!reg.test(file.name)) {
+        this.$message.error('请选择.smm、.json、.xmind、.xlsx文件')
+        this.fileList = []
+      } else {
+        this.fileList.push(file)
+      }
     },
-    watch: {
-        dialogVisible(val, oldVal) {
-            if (!val && oldVal) {
-                this.fileList = [];
-            }
-        },
+
+    /**
+     * @Author: 王林
+     * @Date: 2021-08-03 22:48:47
+     * @Desc: 数量超出限制
+     */
+    onExceed() {
+      this.$message.error('最多只能选择一个文件')
     },
-    created() {
-        this.$bus.$on("showImport", () => {
-            this.dialogVisible = true;
-        });
+
+    /**
+     * @Author: 王林
+     * @Date: 2021-06-22 22:08:11
+     * @Desc: 取消
+     */
+    cancel() {
+      this.dialogVisible = false
     },
-    methods: {
-        /**
-         * @Author: 王林
-         * @Date: 2021-08-03 22:48:42
-         * @Desc: 文件选择
-         */
-        onChange(file) {
-            let reg = /\.(smm|xmind|json)$/;
-            if (!reg.test(file.name)) {
-                this.$message.error("请选择.smm、.json、.xmind文件");
-                this.fileList = [];
-            } else {
-                this.fileList.push(file)
-            }
-        },
 
-        /**
-         * @Author: 王林
-         * @Date: 2021-08-03 22:48:47
-         * @Desc: 数量超出限制
-         */
-        onExceed() {
-            this.$message.error("最多只能选择一个文件");
-        },
+    /**
+     * @Author: 王林
+     * @Date: 2021-06-06 22:28:20
+     * @Desc:  确定
+     */
+    confirm() {
+      if (this.fileList.length <= 0) {
+        return this.$message.error('请选择要导入的文件')
+      }
+      this.$store.commit('setIsHandleLocalFile', false)
+      let file = this.fileList[0]
+      if (/\.(smm|json)$/.test(file.name)) {
+        this.handleSmm(file)
+      } else if (/\.xmind$/.test(file.name)) {
+        this.handleXmind(file)
+      } else if (/\.xlsx$/.test(file.name)) {
+        this.handleExcel(file)
+      }
+      this.cancel()
+    },
 
-        /**
-         * @Author: 王林
-         * @Date: 2021-06-22 22:08:11
-         * @Desc: 取消
-         */
-        cancel() {
-            this.dialogVisible = false;
-        },
-
-        /**
-         * @Author: 王林
-         * @Date: 2021-06-06 22:28:20
-         * @Desc:  确定
-         */
-        confirm() {
-            if (this.fileList.length <= 0) {
-                return this.$message.error("请选择要导入的文件");
-            }
-            this.$store.commit('setIsHandleLocalFile', false);
-            let file = this.fileList[0];
-            if (/\.(smm|json)$/.test(file.name)) {
-                this.handleSmm(file)
-            } else if (/\.xmind$/.test(file.name)) {
-                this.handleXmind(file)
-            }
-            this.cancel();
-        },
-
-        handleSmm(file) {
-            let fileReader = new FileReader()
-            fileReader.readAsText(file.raw)
-            fileReader.onload = (evt) => {
-                try {
-                    let data = JSON.parse(evt.target.result)
-                    if (typeof data !== 'object') {
-                        throw new Error('文件内容有误')
-                    }
-                    this.$bus.$emit('setData', data)
-                    this.$message.success("导入成功");
-                } catch (error) {
-                    console.log(error)
-                    this.$message.error("文件解析失败");
-                }
-            }
-        },
-
-        async handleXmind(file) {
-            try {
-                let data = await MindMap.xmind.parseXmindFile(file.raw)
-                this.$bus.$emit('setData', data)
-                this.$message.success("导入成功");
-            } catch (error) {
-                console.log(error)
-                this.$message.error("文件解析失败");
-            }
+    /**
+     * @Author: 王林25
+     * @Date: 2022-10-24 14:19:33
+     * @Desc: 处理.smm文件
+     */
+    handleSmm(file) {
+      let fileReader = new FileReader()
+      fileReader.readAsText(file.raw)
+      fileReader.onload = evt => {
+        try {
+          let data = JSON.parse(evt.target.result)
+          if (typeof data !== 'object') {
+            throw new Error('文件内容有误')
+          }
+          this.$bus.$emit('setData', data)
+          this.$message.success('导入成功')
+        } catch (error) {
+          console.log(error)
+          this.$message.error('文件解析失败')
         }
+      }
     },
-};
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-10-24 14:19:41
+     * @Desc: 处理.xmind文件
+     */
+    async handleXmind(file) {
+      try {
+        let data = await MindMap.xmind.parseXmindFile(file.raw)
+        this.$bus.$emit('setData', data)
+        this.$message.success('导入成功')
+      } catch (error) {
+        console.log(error)
+        this.$message.error('文件解析失败')
+      }
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-10-24 14:19:51
+     * @Desc: 处理.xlsx文件
+     */
+    async handleExcel(file) {
+      try {
+        const wb = read(await fileToBuffer(file.raw))
+        const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
+          header: 1
+        })
+        if (data.length <= 0) {
+          return
+        }
+        let max = 0
+        data.forEach(arr => {
+          if (arr.length > max) {
+            max = arr.length
+          }
+        })
+        let layers = []
+        let walk = layer => {
+          if (!layers[layer]) {
+            layers[layer] = []
+          }
+          for (let i = 0; i < data.length; i++) {
+            if (data[i][layer]) {
+              let node = {
+                data: {
+                  text: data[i][layer]
+                },
+                children: [],
+                _row: i
+              }
+              layers[layer].push(node)
+            }
+          }
+          if (layer < max - 1) {
+            walk(layer + 1)
+          }
+        }
+        walk(0)
+        let getParent = (arr, row) => {
+          for (let i = arr.length - 1; i >= 0; i--) {
+            if (row >= arr[i]._row) {
+              return arr[i]
+            }
+          }
+        }
+        for (let i = 1; i < layers.length; i++) {
+          let arr = layers[i]
+          for (let j = 0; j < arr.length; j++) {
+            let item = arr[j]
+            let parent = getParent(layers[i - 1], item._row)
+            if (parent) {
+              parent.children.push(item)
+            }
+          }
+        }
+        this.$bus.$emit('setData', layers[0][0])
+        this.$message.success('导入成功')
+      } catch (error) {
+        console.log(error)
+        this.$message.error('文件解析失败')
+      }
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
-.nodeDialog {}
+.nodeDialog {
+}
 </style>

web/src/pages/Edit/components/Navigator.vue

@@ -13,7 +13,7 @@
       :style="{
         transform: `scale(${svgBoxScale})`,
         left: svgBoxLeft + 'px',
-        top: svgBoxTop + 'px',
+        top: svgBoxTop + 'px'
       }"
     ></div>
     <div class="windowBox" :style="viewBoxStyle"></div>
@@ -24,8 +24,8 @@
 export default {
   props: {
     mindMap: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   data() {
     return {
@@ -40,44 +40,47 @@ export default {
         left: 0,
         top: 0,
         bottom: 0,
-        right: 0,
-      },
-    };
+        right: 0
+      }
+    }
   },
   mounted() {
-    this.$bus.$on("toggle_mini_map", (show) => {
-      this.showMiniMap = show;
-      this.$nextTick(() => {
-        if (show) {
-          this.init();
-          this.drawMiniMap();
-        }
-      });
-    });
-    this.$bus.$on("data_change", () => {
-      if (!this.showMiniMap) {
-        return;
-      }
-      clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
-        this.drawMiniMap();
-      }, 500);
-    });
-    this.$bus.$on("view_data_change", () => {
-      if (!this.showMiniMap) {
-        return;
-      }
-      clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
-        this.drawMiniMap();
-      }, 500);
-    });
+    this.$bus.$on('toggle_mini_map', this.toggle_mini_map)
+    this.$bus.$on('data_change', this.data_change)
+    this.$bus.$on('view_data_change', this.data_change)
+    this.$bus.$on('node_tree_render_end', this.data_change)
+  },
+  destroyed() {
+    this.$bus.$off('toggle_mini_map', this.toggle_mini_map)
+    this.$bus.$off('data_change', this.data_change)
+    this.$bus.$off('view_data_change', this.data_change)
+    this.$bus.$off('node_tree_render_end', this.data_change)
   },
   methods: {
+    toggle_mini_map(show) {
+      this.showMiniMap = show
+      this.$nextTick(() => {
+        if (this.$refs.navigatorBox) {
+          this.init()
+        }
+        if (this.$refs.svgBox) {
+          this.drawMiniMap()
+        }
+      })
+    },
+    data_change() {
+      if (!this.showMiniMap) {
+        return
+      }
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        this.drawMiniMap()
+      }, 500)
+    },
     init() {
-      let { width, height } = this.$refs.navigatorBox.getBoundingClientRect();
-      this.boxWidth = width;
-      this.boxHeight = height;
+      let { width, height } = this.$refs.navigatorBox.getBoundingClientRect()
+      this.boxWidth = width
+      this.boxHeight = height
     },
 
     drawMiniMap() {
@@ -86,32 +89,29 @@ export default {
         viewBoxStyle,
         miniMapBoxScale,
         miniMapBoxLeft,
-        miniMapBoxTop,
-      } = this.mindMap.miniMap.calculationMiniMap(
-        this.boxWidth,
-        this.boxHeight
-      );
+        miniMapBoxTop
+      } = this.mindMap.miniMap.calculationMiniMap(this.boxWidth, this.boxHeight)
       // 渲染到小地图
-      this.$refs.svgBox.innerHTML = svgHTML;
-      this.viewBoxStyle = viewBoxStyle;
-      this.svgBoxScale = miniMapBoxScale;
-      this.svgBoxLeft = miniMapBoxLeft;
-      this.svgBoxTop = miniMapBoxTop;
+      this.$refs.svgBox.innerHTML = svgHTML
+      this.viewBoxStyle = viewBoxStyle
+      this.svgBoxScale = miniMapBoxScale
+      this.svgBoxLeft = miniMapBoxLeft
+      this.svgBoxTop = miniMapBoxTop
     },
 
     onMousedown(e) {
-      this.mindMap.miniMap.onMousedown(e);
+      this.mindMap.miniMap.onMousedown(e)
     },
 
     onMousemove(e) {
-      this.mindMap.miniMap.onMousemove(e);
+      this.mindMap.miniMap.onMousemove(e)
     },
 
     onMouseup(e) {
-      this.mindMap.miniMap.onMouseup(e);
-    },
-  },
-};
+      this.mindMap.miniMap.onMouseup(e)
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/NavigatorToolbar.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="navigatorContainer">
     <div class="item">
-      <el-checkbox v-model="openMiniMap" @change="toggleMiniMap">开启小地图</el-checkbox>
+      <el-checkbox v-model="openMiniMap" @change="toggleMiniMap"
+        >开启小地图</el-checkbox
+      >
     </div>
     <div class="item">
       <el-switch
@@ -22,8 +24,8 @@
 </template>
 
 <script>
-import Scale from "./Scale";
-import Fullscreen from "./Fullscreen";
+import Scale from './Scale'
+import Fullscreen from './Fullscreen'
 
 /**
  * @Author: 王林
@@ -31,23 +33,23 @@ import Fullscreen from "./Fullscreen";
  * @Desc: 导航器工具栏
  */
 export default {
-  name: "NavigatorToolbar",
+  name: 'NavigatorToolbar',
   components: {
     Scale,
-    Fullscreen,
+    Fullscreen
   },
   props: {
     mindMap: {
-      type: Object,
-    },
+      type: Object
+    }
   },
-  data () {
+  data() {
     return {
       isReadonly: false,
       openMiniMap: false
     }
   },
-  mounted () {
+  mounted() {
     this.toggleMiniMap(this.openMiniMap)
   },
   methods: {
@@ -59,7 +61,7 @@ export default {
       this.$bus.$emit('toggle_mini_map', show)
     }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/NodeHyperlink.vue

@@ -31,32 +31,32 @@
  * @Desc: 节点超链接内容设置
  */
 export default {
-  name: "NodeHyperlink",
+  name: 'NodeHyperlink',
   data() {
     return {
       dialogVisible: false,
-      link: "",
-      linkTitle: "",
-      activeNodes: [],
-    };
+      link: '',
+      linkTitle: '',
+      activeNodes: []
+    }
   },
   created() {
-    this.$bus.$on("node_active", (...args) => {
-      this.activeNodes = args[1];
+    this.$bus.$on('node_active', (...args) => {
+      this.activeNodes = args[1]
       if (this.activeNodes.length > 0) {
-        let firstNode = this.activeNodes[0];
-        this.link = firstNode.getData("hyperlink");
-        this.linkTitle = firstNode.getData("hyperlinkTitle");
+        let firstNode = this.activeNodes[0]
+        this.link = firstNode.getData('hyperlink')
+        this.linkTitle = firstNode.getData('hyperlinkTitle')
       } else {
-        this.link = "";
-        this.linkTitle = "";
+        this.link = ''
+        this.linkTitle = ''
       }
-    });
-    this.$bus.$on("showNodeLink", () => {
-      this.activeNodes[0].mindMap.keyCommand.pause();
-      this.$bus.$emit('startTextEdit');
-      this.dialogVisible = true;
-    });
+    })
+    this.$bus.$on('showNodeLink', () => {
+      this.activeNodes[0].mindMap.keyCommand.pause()
+      this.$bus.$emit('startTextEdit')
+      this.dialogVisible = true
+    })
   },
   methods: {
     /**
@@ -65,9 +65,9 @@ export default {
      * @Desc: 取消
      */
     cancel() {
-      this.dialogVisible = false;
-      this.activeNodes[0].mindMap.keyCommand.recovery();
-      this.$bus.$emit('endTextEdit');
+      this.dialogVisible = false
+      this.activeNodes[0].mindMap.keyCommand.recovery()
+      this.$bus.$emit('endTextEdit')
     },
 
     /**
@@ -76,13 +76,13 @@ export default {
      * @Desc:  确定
      */
     confirm() {
-      this.activeNodes.forEach((node) => {
-        node.setHyperlink(this.link, this.linkTitle);
-        this.cancel();
-      });
-    },
-  },
-};
+      this.activeNodes.forEach(node => {
+        node.setHyperlink(this.link, this.linkTitle)
+        this.cancel()
+      })
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -98,4 +98,4 @@ export default {
     }
   }
 }
-</style>
+</style>

web/src/pages/Edit/components/NodeIcon.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { nodeIconList } from "simple-mind-map/src/svg/icons";
+import { nodeIconList } from 'simple-mind-map/src/svg/icons'
 
 /**
  * @Author: 王林
@@ -32,28 +32,28 @@ import { nodeIconList } from "simple-mind-map/src/svg/icons";
  * @Desc: 节点图标内容设置
  */
 export default {
-  name: "NodeIcon",
+  name: 'NodeIcon',
   data() {
     return {
       nodeIconList,
       dialogVisible: false,
       iconList: [],
-      activeNodes: [],
-    };
+      activeNodes: []
+    }
   },
   created() {
-    this.$bus.$on("node_active", (...args) => {
-      this.activeNodes = args[1];
+    this.$bus.$on('node_active', (...args) => {
+      this.activeNodes = args[1]
       if (this.activeNodes.length > 0) {
-        let firstNode = this.activeNodes[0];
-        this.iconList = firstNode.getData("icon") || [];
+        let firstNode = this.activeNodes[0]
+        this.iconList = firstNode.getData('icon') || []
       } else {
-        this.iconList = [];
+        this.iconList = []
       }
-    });
-    this.$bus.$on("showNodeIcon", () => {
-      this.dialogVisible = true;
-    });
+    })
+    this.$bus.$on('showNodeIcon', () => {
+      this.dialogVisible = true
+    })
   },
   methods: {
     /**
@@ -62,31 +62,31 @@ export default {
      * @Desc: 设置icon
      */
     setIcon(type, name) {
-      let key = type + "_" + name;
-      let index = this.iconList.findIndex((item) => {
-        return item === key;
-      });
+      let key = type + '_' + name
+      let index = this.iconList.findIndex(item => {
+        return item === key
+      })
       // 删除icon
       if (index !== -1) {
-        this.iconList.splice(index, 1);
+        this.iconList.splice(index, 1)
       } else {
-        let typeIndex = this.iconList.findIndex((item) => {
-          return item.split("_")[0] === type;
-        });
+        let typeIndex = this.iconList.findIndex(item => {
+          return item.split('_')[0] === type
+        })
         // 替换icon
         if (typeIndex !== -1) {
-          this.iconList.splice(typeIndex, 1, key);
+          this.iconList.splice(typeIndex, 1, key)
         } else {
           // 增加icon
-          this.iconList.push(key);
+          this.iconList.push(key)
         }
       }
-      this.activeNodes.forEach((node) => {
-        node.setIcon([...this.iconList]);
-      });
-    },
-  },
-};
+      this.activeNodes.forEach(node => {
+        node.setIcon([...this.iconList])
+      })
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -128,11 +128,11 @@ export default {
             width: 28px;
             height: 28px;
             border-radius: 50%;
-            border: 2px solid #409EFF;
+            border: 2px solid #409eff;
           }
         }
       }
     }
   }
 }
-</style>
+</style>

web/src/pages/Edit/components/NodeImage.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import ImgUpload from "@/components/ImgUpload";
+import ImgUpload from '@/components/ImgUpload'
 
 /**
  * @Author: 王林
@@ -26,33 +26,33 @@ import ImgUpload from "@/components/ImgUpload";
  * @Desc: 节点图片内容设置
  */
 export default {
-  name: "NodeImage",
+  name: 'NodeImage',
   components: {
-    ImgUpload,
+    ImgUpload
   },
   data() {
     return {
       dialogVisible: false,
-      img: "",
-      imgTitle: "",
-      activeNodes: null,
-    };
+      img: '',
+      imgTitle: '',
+      activeNodes: null
+    }
   },
   created() {
-    this.$bus.$on("node_active", (...args) => {
-      this.activeNodes = args[1];
+    this.$bus.$on('node_active', (...args) => {
+      this.activeNodes = args[1]
       if (this.activeNodes.length > 0) {
-        let firstNode = this.activeNodes[0];
-        this.img = firstNode.getData("image");
-        this.imgTitle = firstNode.getData("imageTitle");
+        let firstNode = this.activeNodes[0]
+        this.img = firstNode.getData('image')
+        this.imgTitle = firstNode.getData('imageTitle')
       } else {
-        this.img = "";
-        this.imgTitle = "";
+        this.img = ''
+        this.imgTitle = ''
       }
-    });
-    this.$bus.$on("showNodeImage", () => {
-      this.dialogVisible = true;
-    });
+    })
+    this.$bus.$on('showNodeImage', () => {
+      this.dialogVisible = true
+    })
   },
   methods: {
     /**
@@ -61,7 +61,7 @@ export default {
      * @Desc: 取消
      */
     cancel() {
-      this.dialogVisible = false;
+      this.dialogVisible = false
     },
 
     /**
@@ -71,22 +71,22 @@ export default {
      */
     async confirm() {
       try {
-        let { width, height } = await this.$refs.ImgUpload.getSize();
-        this.activeNodes.forEach((node) => {
+        let { width, height } = await this.$refs.ImgUpload.getSize()
+        this.activeNodes.forEach(node => {
           node.setImage({
-            url: this.img || "none",
+            url: this.img || 'none',
             title: this.imgTitle,
             width,
-            height,
-          });
-        });
-        this.cancel();
+            height
+          })
+        })
+        this.cancel()
       } catch (error) {
-        console.log(error);
+        console.log(error)
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -101,4 +101,4 @@ export default {
     }
   }
 }
-</style>
+</style>

web/src/pages/Edit/components/NodeImgPreview.vue

@@ -0,0 +1,41 @@
+<template>
+  <viewer :images="images">
+    <img v-for="src in images" :key="src" :src="src" />
+  </viewer>
+</template>
+
+<script>
+export default {
+  props: {
+    mindMap: {
+      type: Object,
+      default() {
+        return null
+      }
+    }
+  },
+  data() {
+    return {
+      images: []
+    }
+  },
+  mounted() {
+    this.mindMap.on('node_img_dblclick', this.onNodeTmgDblclick)
+  },
+  beforeDestroy() {
+    this.mindMap.off('node_img_dblclick', this.onNodeTmgDblclick)
+  },
+  methods: {
+    onNodeTmgDblclick(node, e) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.images = [node.nodeData.data.image]
+      this.$viewerApi({
+        images: this.images
+      })
+    }
+  }
+}
+</script>
+
+<style></style>

web/src/pages/Edit/components/NodeNote.vue

@@ -22,8 +22,8 @@
 </template>
 
 <script>
-import Editor from '@toast-ui/editor';
-import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
+import Editor from '@toast-ui/editor'
+import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style
 
 /**
  * @Author: 王林
@@ -31,38 +31,38 @@ import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
  * @Desc: 节点备注内容设置
  */
 export default {
-  name: "NodeNote",
+  name: 'NodeNote',
   data() {
     return {
       dialogVisible: false,
-      note: "",
+      note: '',
       activeNodes: [],
       editor: null
-    };
+    }
   },
   created() {
-    this.$bus.$on("node_active", (...args) => {
-      this.activeNodes = args[1];
+    this.$bus.$on('node_active', (...args) => {
+      this.activeNodes = args[1]
       if (this.activeNodes.length > 0) {
-        let firstNode = this.activeNodes[0];
-        this.note = firstNode.getData("note");
+        let firstNode = this.activeNodes[0]
+        this.note = firstNode.getData('note')
       } else {
-        this.note = "";
+        this.note = ''
       }
-    });
-    this.$bus.$on("showNodeNote", () => {
-      this.$bus.$emit('startTextEdit');
-      this.dialogVisible = true;
+    })
+    this.$bus.$on('showNodeNote', () => {
+      this.$bus.$emit('startTextEdit')
+      this.dialogVisible = true
       this.$nextTick(() => {
-        this.initEditor();
-      });
-    });
+        this.initEditor()
+      })
+    })
   },
   methods: {
-    /** 
-     * @Author: 王林25 
-     * @Date: 2022-05-09 11:37:05 
-     * @Desc: 初始化编辑器 
+    /**
+     * @Author: 王林25
+     * @Date: 2022-05-09 11:37:05
+     * @Desc: 初始化编辑器
      */
     initEditor() {
       if (!this.editor) {
@@ -71,9 +71,9 @@ export default {
           height: '500px',
           initialEditType: 'markdown',
           previewStyle: 'vertical'
-        });
+        })
       }
-      this.editor.setMarkdown(this.note);
+      this.editor.setMarkdown(this.note)
     },
 
     /**
@@ -82,8 +82,8 @@ export default {
      * @Desc: 取消
      */
     cancel() {
-      this.dialogVisible = false;
-      this.$bus.$emit('endTextEdit');
+      this.dialogVisible = false
+      this.$bus.$emit('endTextEdit')
     },
 
     /**
@@ -92,14 +92,14 @@ export default {
      * @Desc:  确定
      */
     confirm() {
-      this.note = this.editor.getMarkdown();
-      this.activeNodes.forEach((node) => {
-        node.setNote(this.note);
-      });
-      this.cancel();
-    },
-  },
-};
+      this.note = this.editor.getMarkdown()
+      this.activeNodes.forEach(node => {
+        node.setNote(this.note)
+      })
+      this.cancel()
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -109,4 +109,4 @@ export default {
     color: #dcdfe6;
   }
 }
-</style>
+</style>

web/src/pages/Edit/components/NodeNoteContentShow.vue

@@ -2,13 +2,17 @@
   <div
     class="noteContentViewer"
     ref="noteContentViewer"
-    :style="{ left: this.left + 'px', top: this.top + 'px', visibility: show ? 'visible' : 'hidden' }"
+    :style="{
+      left: this.left + 'px',
+      top: this.top + 'px',
+      visibility: show ? 'visible' : 'hidden'
+    }"
   ></div>
 </template>
 
 <script>
-import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
-import '@toast-ui/editor/dist/toastui-editor-viewer.css';
+import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer'
+import '@toast-ui/editor/dist/toastui-editor-viewer.css'
 
 /**
  * @Author: 王林
@@ -16,28 +20,28 @@ import '@toast-ui/editor/dist/toastui-editor-viewer.css';
  * @Desc: 节点备注内容显示
  */
 export default {
-  name: "NodeNoteContentShow",
+  name: 'NodeNoteContentShow',
   data() {
     return {
       editor: null,
       show: false,
       left: 0,
-      top: 0,
-    };
+      top: 0
+    }
   },
   created() {
-    this.$bus.$on("showNoteContent", (content, left, top) => {
-      this.editor.setMarkdown(content);
-      this.left = left;
-      this.top = top;
-      this.show = true;
-    });
-    this.$bus.$on("hideNoteContent", () => {
-      this.show = false;
-    });
+    this.$bus.$on('showNoteContent', (content, left, top) => {
+      this.editor.setMarkdown(content)
+      this.left = left
+      this.top = top
+      this.show = true
+    })
+    this.$bus.$on('hideNoteContent', () => {
+      this.show = false
+    })
   },
   mounted() {
-    this.initEditor();
+    this.initEditor()
   },
   methods: {
     /**
@@ -49,11 +53,11 @@ export default {
       if (!this.editor) {
         this.editor = new Viewer({
           el: this.$refs.noteContentViewer
-        });
+        })
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/NodeTag.vue

@@ -19,7 +19,7 @@
         :key="index"
         :style="{
           backgroundColor: tagColorList[index].background,
-          color: tagColorList[index].color,
+          color: tagColorList[index].color
         }"
       >
         {{ item }}
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { tagColorList } from "simple-mind-map/src/utils/constant";
+import { tagColorList } from 'simple-mind-map/src/utils/constant'
 
 /**
  * @Author: 王林
@@ -44,32 +44,32 @@ import { tagColorList } from "simple-mind-map/src/utils/constant";
  * @Desc: 节点标签内容设置
  */
 export default {
-  name: "NodeTag",
+  name: 'NodeTag',
   data() {
     return {
       dialogVisible: false,
       tagColorList,
       tagArr: [],
-      tag: "",
+      tag: '',
       activeNodes: [],
-      max: 5,
-    };
+      max: 5
+    }
   },
   created() {
-    this.$bus.$on("node_active", (...args) => {
-      this.activeNodes = args[1];
+    this.$bus.$on('node_active', (...args) => {
+      this.activeNodes = args[1]
       if (this.activeNodes.length > 0) {
-        let firstNode = this.activeNodes[0];
-        this.tagArr = firstNode.getData("tag") || [];
+        let firstNode = this.activeNodes[0]
+        this.tagArr = firstNode.getData('tag') || []
       } else {
-        this.tagArr = [];
-        this.tag = "";
+        this.tagArr = []
+        this.tag = ''
       }
-    });
-    this.$bus.$on("showNodeTag", () => {
-      this.$bus.$emit('startTextEdit');
-      this.dialogVisible = true;
-    });
+    })
+    this.$bus.$on('showNodeTag', () => {
+      this.$bus.$emit('startTextEdit')
+      this.dialogVisible = true
+    })
   },
   methods: {
     /**
@@ -78,8 +78,8 @@ export default {
      * @Desc: 添加
      */
     add() {
-      this.tagArr.push(this.tag);
-      this.tag = "";
+      this.tagArr.push(this.tag)
+      this.tag = ''
     },
 
     /**
@@ -88,7 +88,7 @@ export default {
      * @Desc: 删除
      */
     del(index) {
-      this.tagArr.splice(index, 1);
+      this.tagArr.splice(index, 1)
     },
 
     /**
@@ -97,8 +97,8 @@ export default {
      * @Desc: 取消
      */
     cancel() {
-      this.dialogVisible = false;
-      this.$bus.$emit('endTextEdit');
+      this.dialogVisible = false
+      this.$bus.$emit('endTextEdit')
     },
 
     /**
@@ -107,13 +107,13 @@ export default {
      * @Desc:  确定
      */
     confirm() {
-      this.activeNodes.forEach((node) => {
-        node.setTag(this.tagArr);
-      });
-      this.cancel();
-    },
-  },
-};
+      this.activeNodes.forEach(node => {
+        node.setTag(this.tagArr)
+      })
+      this.cancel()
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -152,4 +152,4 @@ export default {
     }
   }
 }
-</style>
+</style>

web/src/pages/Edit/components/Outline.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Sidebar from "./Sidebar";
+import Sidebar from './Sidebar'
 
 /**
  * @Author: 王林
@@ -13,33 +13,32 @@ import Sidebar from "./Sidebar";
  * @Desc: 大纲内容
  */
 export default {
-  name: "Outline",
+  name: 'Outline',
   components: {
-    Sidebar,
+    Sidebar
   },
   data() {
     return {
       data: [],
       defaultProps: {
         label(data) {
-          return data.data.text;
-        },
-      },
-    };
+          return data.data.text
+        }
+      }
+    }
   },
   created() {
-    this.$bus.$on("data_change", (data) => {
-      this.data = [data];
-    });
-    this.$bus.$on("showOutline", () => {
-      this.$refs.sidebar.show = false;
+    this.$bus.$on('data_change', data => {
+      this.data = [data]
+    })
+    this.$bus.$on('showOutline', () => {
+      this.$refs.sidebar.show = false
       this.$nextTick(() => {
-        this.$refs.sidebar.show = true;
-      });
-    });
-  },
-};
+        this.$refs.sidebar.show = true
+      })
+    })
+  }
+}
 </script>
 
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>

web/src/pages/Edit/components/Scale.vue

@@ -17,32 +17,32 @@
  * @Desc: 放大缩小
  */
 export default {
-  name: "Scale",
+  name: 'Scale',
   props: {
     mindMap: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   data() {
     return {
-      scaleNum: 100,
-    };
+      scaleNum: 100
+    }
   },
   watch: {
     mindMap(val, oldVal) {
       if (val && !oldVal) {
-        this.mindMap.on("scale", (scale) => {
-          this.scaleNum = this.toPer(scale);
-        });
+        this.mindMap.on('scale', scale => {
+          this.scaleNum = this.toPer(scale)
+        })
         this.scaleNum = this.toPer(this.mindMap.view.scale)
       }
-    },
+    }
   },
   methods: {
-    /** 
-     * @Author: 王林25 
-     * @Date: 2021-11-25 14:20:16 
-     * @Desc: 转换成百分数 
+    /**
+     * @Author: 王林25
+     * @Date: 2021-11-25 14:20:16
+     * @Desc: 转换成百分数
      */
     toPer(scale) {
       return (scale * 100).toFixed(0)
@@ -54,7 +54,7 @@ export default {
      * @Desc: 缩小
      */
     narrow() {
-      this.mindMap.view.narrow();
+      this.mindMap.view.narrow()
     },
 
     /**
@@ -63,10 +63,10 @@ export default {
      * @Desc: 放大
      */
     enlarge() {
-      this.mindMap.view.enlarge();
-    },
-  },
-};
+      this.mindMap.view.enlarge()
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -79,8 +79,8 @@ export default {
   }
 
   .scaleInfo {
-		width: 40px;
-		text-align: center;
+    width: 40px;
+    text-align: center;
     margin: 0 20px;
   }
 }

web/src/pages/Edit/components/ShortcutKey.vue

@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import Sidebar from "./Sidebar";
-import { shortcutKeyList } from "@/config";
+import Sidebar from './Sidebar'
+import { shortcutKeyList } from '@/config'
 
 /**
  * @Author: 王林
@@ -29,24 +29,24 @@ import { shortcutKeyList } from "@/config";
  * @Desc: 快捷键
  */
 export default {
-  name: "ShortcutKey",
+  name: 'ShortcutKey',
   components: {
-    Sidebar,
+    Sidebar
   },
   data() {
     return {
-      shortcutKeyList,
-    };
+      shortcutKeyList
+    }
   },
   created() {
-    this.$bus.$on("showShortcutKey", () => {
-      this.$refs.sidebar.show = false;
+    this.$bus.$on('showShortcutKey', () => {
+      this.$refs.sidebar.show = false
       this.$nextTick(() => {
-        this.$refs.sidebar.show = true;
-      });
-    });
-  },
-};
+        this.$refs.sidebar.show = true
+      })
+    })
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/Sidebar.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { store } from "@/config";
+import { store } from '@/config'
 
 /**
  * @Author: 王林
@@ -24,34 +24,34 @@ import { store } from "@/config";
  * @Desc: 侧边栏容器
  */
 export default {
-  name: "Sidebar",
+  name: 'Sidebar',
   props: {
     title: {
       type: String,
-      default: "",
-    },
+      default: ''
+    }
   },
   data() {
     return {
       show: false,
-      zIndex: 0,
-    };
+      zIndex: 0
+    }
   },
   watch: {
     show(val, oldVal) {
       if (val && !oldVal) {
-        this.zIndex = store.sidebarZIndex++;
+        this.zIndex = store.sidebarZIndex++
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
 .sidebarContainer {
   position: fixed;
   right: -300px;
-  top: 100px;
+  top: 110px;
   bottom: 0;
   width: 300px;
   background-color: #fff;

web/src/pages/Edit/components/Structure.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script>
-import Sidebar from "./Sidebar";
-import { layoutList } from "simple-mind-map/src/utils/constant";
-import { storeConfig } from "@/api";
+import Sidebar from './Sidebar'
+import { layoutList } from 'simple-mind-map/src/utils/constant'
+import { storeConfig } from '@/api'
 
 /**
  * @Author: 王林
@@ -28,29 +28,29 @@ import { storeConfig } from "@/api";
  * @Desc: 结构
  */
 export default {
-  name: "Structure",
+  name: 'Structure',
   components: {
-    Sidebar,
+    Sidebar
   },
   props: {
     mindMap: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   data() {
     return {
       layoutList,
-      layout: "",
-    };
+      layout: ''
+    }
   },
   created() {
-    this.$bus.$on("showStructure", () => {
-      this.$refs.sidebar.show = false;
+    this.$bus.$on('showStructure', () => {
+      this.$refs.sidebar.show = false
       this.$nextTick(() => {
-        this.layout = this.mindMap.getLayout();
-        this.$refs.sidebar.show = true;
-      });
-    });
+        this.layout = this.mindMap.getLayout()
+        this.$refs.sidebar.show = true
+      })
+    })
   },
   methods: {
     /**
@@ -59,14 +59,14 @@ export default {
      * @Desc: 使用主题
      */
     useLayout(layout) {
-      this.layout = layout.value;
-      this.mindMap.setLayout(layout.value);
+      this.layout = layout.value
+      this.mindMap.setLayout(layout.value)
       storeConfig({
-        layout: layout.value,
-      });
-    },
-  },
-};
+        layout: layout.value
+      })
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/Style.vue

@@ -72,7 +72,11 @@
         <div class="row">
           <div class="btnGroup">
             <el-tooltip content="颜色" placement="bottom">
-              <div class="styleBtn" v-popover:popover :class="{ disabled: checkDisabled('color') }">
+              <div
+                class="styleBtn"
+                v-popover:popover
+                :class="{ disabled: checkDisabled('color') }"
+              >
                 A
                 <span
                   class="colorShow"
@@ -83,7 +87,10 @@
             <el-tooltip content="加粗" placement="bottom">
               <div
                 class="styleBtn"
-                :class="{ actived: style.fontWeight === 'bold', disabled: checkDisabled('fontWeight') }"
+                :class="{
+                  actived: style.fontWeight === 'bold',
+                  disabled: checkDisabled('fontWeight')
+                }"
                 @click="toggleFontWeight"
               >
                 B
@@ -92,7 +99,10 @@
             <el-tooltip content="斜体" placement="bottom">
               <div
                 class="styleBtn i"
-                :class="{ actived: style.fontStyle === 'italic', disabled: checkDisabled('fontStyle') }"
+                :class="{
+                  actived: style.fontStyle === 'italic',
+                  disabled: checkDisabled('fontStyle')
+                }"
                 @click="toggleFontStyle"
               >
                 I
@@ -109,10 +119,20 @@
               </div>
             </el-tooltip>
           </div>
-          <el-popover ref="popover" placement="bottom" trigger="click" :disabled="checkDisabled('color')">
+          <el-popover
+            ref="popover"
+            placement="bottom"
+            trigger="click"
+            :disabled="checkDisabled('color')"
+          >
             <Color :color="style.color" @change="changeFontColor"></Color>
           </el-popover>
-          <el-popover ref="popover2" placement="bottom" trigger="click" :disabled="checkDisabled('textDecoration')">
+          <el-popover
+            ref="popover2"
+            placement="bottom"
+            trigger="click"
+            :disabled="checkDisabled('textDecoration')"
+          >
             <el-radio-group
               size="mini"
               v-model="style.textDecoration"
@@ -135,7 +155,12 @@
               :style="{ width: '80px', backgroundColor: style.borderColor }"
               :class="{ disabled: checkDisabled('borderColor') }"
             ></span>
-            <el-popover ref="popover3" placement="bottom" trigger="click" :disabled="checkDisabled('borderColor')">
+            <el-popover
+              ref="popover3"
+              placement="bottom"
+              trigger="click"
+              :disabled="checkDisabled('borderColor')"
+            >
               <Color
                 :color="style.borderColor"
                 @change="changeBorderColor"
@@ -213,7 +238,12 @@
               :style="{ backgroundColor: style.fillColor }"
               :class="{ disabled: checkDisabled('fillColor') }"
             ></span>
-            <el-popover ref="popover4" placement="bottom" trigger="click" :disabled="checkDisabled('fillColor')">
+            <el-popover
+              ref="popover4"
+              placement="bottom"
+              trigger="click"
+              :disabled="checkDisabled('fillColor')"
+            >
               <Color :color="style.fillColor" @change="changeFillColor"></Color>
             </el-popover>
           </div>
@@ -252,11 +282,13 @@
               :style="{ width: '80px', backgroundColor: style.lineColor }"
               :class="{ disabled: checkDisabled('lineColor') }"
             ></span>
-            <el-popover ref="popover5" placement="bottom" trigger="click" :disabled="checkDisabled('lineColor')">
-              <Color
-                :color="style.lineColor"
-                @change="changeLineColor"
-              ></Color>
+            <el-popover
+              ref="popover5"
+              placement="bottom"
+              trigger="click"
+              :disabled="checkDisabled('lineColor')"
+            >
+              <Color :color="style.lineColor" @change="changeLineColor"></Color>
             </el-popover>
           </div>
           <div class="rowItem">
@@ -330,8 +362,8 @@
 </template>
 
 <script>
-import Sidebar from "./Sidebar";
-import Color from "./Color";
+import Sidebar from './Sidebar'
+import Color from './Color'
 import {
   fontFamilyList,
   fontSizeList,
@@ -339,9 +371,9 @@ import {
   borderDasharrayList,
   borderRadiusList,
   lineHeightList,
-  shapeList,
-} from "@/config";
-import { supportActiveStyle } from 'simple-mind-map/src/themes/default';
+  shapeList
+} from '@/config'
+import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
 
 /**
  * @Author: 王林
@@ -349,10 +381,10 @@ import { supportActiveStyle } from 'simple-mind-map/src/themes/default';
  * @Desc: 节点样式设置
  */
 export default {
-  name: "Style",
+  name: 'Style',
   components: {
     Sidebar,
-    Color,
+    Color
   },
   data() {
     return {
@@ -365,39 +397,40 @@ export default {
       borderRadiusList,
       lineHeightList,
       activeNodes: [],
-      activeTab: "normal",
+      activeTab: 'normal',
       style: {
         shape: '',
         paddingX: 0,
         paddingY: 0,
-        color: "",
-        fontFamily: "",
-        fontSize: "",
-        lineHeight: "",
-        textDecoration: "",
-        fontWeight: "",
-        fontStyle: "",
-        borderWidth: "",
-        borderColor: "",
-        fillColor: "",
-        borderDasharray: "",
-        borderRadius: "",
-        lineColor: "",
-        lineDasharray: "",
-        lineWidth: "",
-      },
-    };
+        color: '',
+        fontFamily: '',
+        fontSize: '',
+        lineHeight: '',
+        textDecoration: '',
+        fontWeight: '',
+        fontStyle: '',
+        borderWidth: '',
+        borderColor: '',
+        fillColor: '',
+        borderDasharray: '',
+        borderRadius: '',
+        lineColor: '',
+        lineDasharray: '',
+        lineWidth: ''
+      }
+    }
   },
   created() {
-    this.$bus.$on("node_active", (...args) => {
-      if (this.$refs.sidebar) this.$refs.sidebar.show = false;
+    this.$bus.$on('node_active', (...args) => {
+      if (this.$refs.sidebar) this.$refs.sidebar.show = false
       this.$nextTick(() => {
-        this.activeTab = "normal";
-        this.activeNodes = args[1];
-        if (this.$refs.sidebar) this.$refs.sidebar.show = this.activeNodes.length > 0;
-        this.initNodeStyle();
-      });
-    });
+        this.activeTab = 'normal'
+        this.activeNodes = args[1]
+        if (this.$refs.sidebar)
+          this.$refs.sidebar.show = this.activeNodes.length > 0
+        this.initNodeStyle()
+      })
+    })
   },
   methods: {
     /**
@@ -406,16 +439,18 @@ export default {
      * @Desc: tab切换
      */
     handleTabClick() {
-      this.initNodeStyle();
+      this.initNodeStyle()
     },
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-12 22:16:56 
-     * @Desc: 检查是否禁用 
+    /**
+     * @Author: 王林
+     * @Date: 2022-09-12 22:16:56
+     * @Desc: 检查是否禁用
      */
     checkDisabled(prop) {
-      return this.activeTab === 'active' && !this.supportActiveStyle.includes(prop)
+      return (
+        this.activeTab === 'active' && !this.supportActiveStyle.includes(prop)
+      )
     },
 
     /**
@@ -425,35 +460,35 @@ export default {
      */
     initNodeStyle() {
       if (this.activeNodes.length <= 0) {
-        this.activeTab = "normal";
-        return;
+        this.activeTab = 'normal'
+        return
       }
-      [
-        "shape",
-        "paddingX",
-        "paddingY",
-        "color",
-        "fontFamily",
-        "fontSize",
-        "lineHeight",
-        "textDecoration",
-        "fontWeight",
-        "fontStyle",
-        "borderWidth",
-        "borderColor",
-        "fillColor",
-        "borderDasharray",
-        "borderRadius",
-        "lineColor",
-        "lineDasharray",
-        "lineWidth",
-      ].forEach((item) => {
+      ;[
+        'shape',
+        'paddingX',
+        'paddingY',
+        'color',
+        'fontFamily',
+        'fontSize',
+        'lineHeight',
+        'textDecoration',
+        'fontWeight',
+        'fontStyle',
+        'borderWidth',
+        'borderColor',
+        'fillColor',
+        'borderDasharray',
+        'borderRadius',
+        'lineColor',
+        'lineDasharray',
+        'lineWidth'
+      ].forEach(item => {
         this.style[item] = this.activeNodes[0].getStyle(
           item,
           false,
-          this.activeTab === "active"
-        );
-      });
+          this.activeTab === 'active'
+        )
+      })
     },
 
     /**
@@ -462,9 +497,9 @@ export default {
      * @Desc: 修改样式
      */
     update(prop) {
-      this.activeNodes.forEach((node) => {
-        node.setStyle(prop, this.style[prop], this.activeTab === "active");
-      });
+      this.activeNodes.forEach(node => {
+        node.setStyle(prop, this.style[prop], this.activeTab === 'active')
+      })
     },
 
     /**
@@ -473,12 +508,12 @@ export default {
      * @Desc: 切换加粗样式
      */
     toggleFontWeight() {
-      if (this.style.fontWeight === "bold") {
-        this.style.fontWeight = "normal";
+      if (this.style.fontWeight === 'bold') {
+        this.style.fontWeight = 'normal'
       } else {
-        this.style.fontWeight = "bold";
+        this.style.fontWeight = 'bold'
       }
-      this.update("fontWeight");
+      this.update('fontWeight')
     },
 
     /**
@@ -487,12 +522,12 @@ export default {
      * @Desc: 切换字体样式
      */
     toggleFontStyle() {
-      if (this.style.fontStyle === "italic") {
-        this.style.fontStyle = "normal";
+      if (this.style.fontStyle === 'italic') {
+        this.style.fontStyle = 'normal'
       } else {
-        this.style.fontStyle = "italic";
+        this.style.fontStyle = 'italic'
       }
-      this.update("fontStyle");
+      this.update('fontStyle')
     },
 
     /**
@@ -501,8 +536,8 @@ export default {
      * @Desc: 修改字体颜色
      */
     changeFontColor(color) {
-      this.style.color = color;
-      this.update("color");
+      this.style.color = color
+      this.update('color')
     },
 
     /**
@@ -511,18 +546,18 @@ export default {
      * @Desc: 修改边框颜色
      */
     changeBorderColor(color) {
-      this.style.borderColor = color;
-      this.update("borderColor");
+      this.style.borderColor = color
+      this.update('borderColor')
     },
 
-    /** 
-     * @Author: flydreame 
-     * @Date: 2022-09-17 10:18:15 
-     * @Desc: 修改线条颜色 
+    /**
+     * @Author: flydreame
+     * @Date: 2022-09-17 10:18:15
+     * @Desc: 修改线条颜色
      */
     changeLineColor(color) {
-      this.style.lineColor = color;
-      this.update("lineColor");
+      this.style.lineColor = color
+      this.update('lineColor')
     },
 
     /**
@@ -531,11 +566,11 @@ export default {
      * @Desc: 修改背景颜色
      */
     changeFillColor(color) {
-      this.style.fillColor = color;
-      this.update("fillColor");
-    },
-  },
-};
+      this.style.fillColor = color
+      this.update('fillColor')
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -598,9 +633,9 @@ export default {
         cursor: pointer;
 
         &.disabled {
-          background-color: #F5F7FA !important;
-          border-color: #E4E7ED !important;
-          color: #C0C4CC !important;
+          background-color: #f5f7fa !important;
+          border-color: #e4e7ed !important;
+          color: #c0c4cc !important;
           cursor: not-allowed !important;
         }
       }
@@ -624,9 +659,9 @@ export default {
       }
 
       &.disabled {
-        background-color: #F5F7FA !important;
-        border-color: #E4E7ED !important;
-        color: #C0C4CC !important;
+        background-color: #f5f7fa !important;
+        border-color: #e4e7ed !important;
+        color: #c0c4cc !important;
         cursor: not-allowed !important;
       }
 

web/src/pages/Edit/components/Theme.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script>
-import Sidebar from "./Sidebar";
-import { themeList } from "simple-mind-map/src/utils/constant";
-import { storeConfig } from "@/api";
+import Sidebar from './Sidebar'
+import { themeList } from 'simple-mind-map/src/utils/constant'
+import { storeConfig } from '@/api'
 
 /**
  * @Author: 王林
@@ -28,29 +28,29 @@ import { storeConfig } from "@/api";
  * @Desc: 主题
  */
 export default {
-  name: "Theme",
+  name: 'Theme',
   components: {
-    Sidebar,
+    Sidebar
   },
   props: {
     mindMap: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   data() {
     return {
       themeList,
-      theme: "",
-    };
+      theme: ''
+    }
   },
   created() {
-    this.$bus.$on("showTheme", () => {
-      this.$refs.sidebar.show = false;
+    this.$bus.$on('showTheme', () => {
+      this.$refs.sidebar.show = false
       this.$nextTick(() => {
-        this.theme = this.mindMap.getTheme();
-        this.$refs.sidebar.show = true;
-      });
-    });
+        this.theme = this.mindMap.getTheme()
+        this.$refs.sidebar.show = true
+      })
+    })
   },
   methods: {
     /**
@@ -59,17 +59,17 @@ export default {
      * @Desc: 使用主题
      */
     useTheme(theme) {
-      this.theme = theme.value;
-      this.mindMap.setTheme(theme.value);
+      this.theme = theme.value
+      this.mindMap.setTheme(theme.value)
       storeConfig({
         theme: {
-            "template": theme.value,
-            "config": this.mindMap.getCustomThemeConfig()
+          template: theme.value,
+          config: this.mindMap.getCustomThemeConfig()
         }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>

web/src/pages/Edit/components/Toolbar.vue

@@ -6,7 +6,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: readonly || backEnd,
+            disabled: readonly || backEnd
           }"
           @click="$bus.$emit('execCommand', 'BACK')"
         >
@@ -16,7 +16,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: readonly || forwardEnd,
+            disabled: readonly || forwardEnd
           }"
           @click="$bus.$emit('execCommand', 'FORWARD')"
         >
@@ -26,7 +26,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization,
+            disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization
           }"
           @click="$bus.$emit('execCommand', 'INSERT_NODE')"
         >
@@ -36,7 +36,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: activeNodes.length <= 0 || hasGeneralization,
+            disabled: activeNodes.length <= 0 || hasGeneralization
           }"
           @click="$bus.$emit('execCommand', 'INSERT_CHILD_NODE')"
         >
@@ -46,7 +46,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: activeNodes.length <= 0,
+            disabled: activeNodes.length <= 0
           }"
           @click="$bus.$emit('execCommand', 'REMOVE_NODE')"
         >
@@ -56,7 +56,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: activeNodes.length <= 0,
+            disabled: activeNodes.length <= 0
           }"
           @click="$bus.$emit('showNodeImage')"
         >
@@ -66,7 +66,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: activeNodes.length <= 0,
+            disabled: activeNodes.length <= 0
           }"
           @click="$bus.$emit('showNodeIcon')"
         >
@@ -76,7 +76,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: activeNodes.length <= 0,
+            disabled: activeNodes.length <= 0
           }"
           @click="$bus.$emit('showNodeLink')"
         >
@@ -86,7 +86,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: activeNodes.length <= 0,
+            disabled: activeNodes.length <= 0
           }"
           @click="$bus.$emit('showNodeNote')"
         >
@@ -96,7 +96,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: activeNodes.length <= 0,
+            disabled: activeNodes.length <= 0
           }"
           @click="$bus.$emit('showNodeTag')"
         >
@@ -106,7 +106,7 @@
         <div
           class="toolbarBtn"
           :class="{
-            disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization,
+            disabled: activeNodes.length <= 0 || hasRoot || hasGeneralization
           }"
           @click="$bus.$emit('execCommand', 'ADD_GENERALIZATION')"
         >
@@ -172,26 +172,26 @@
 </template>
 
 <script>
-import NodeImage from "./NodeImage";
-import NodeHyperlink from "./NodeHyperlink";
-import NodeIcon from "./NodeIcon";
-import NodeNote from "./NodeNote";
-import NodeTag from "./NodeTag";
-import Export from "./Export";
-import Import from './Import';
-import { mapState } from 'vuex';
-import { Notification } from 'element-ui';
-import exampleData from 'simple-mind-map/example/exampleData';
-import { getData } from '../../../api';
+import NodeImage from './NodeImage'
+import NodeHyperlink from './NodeHyperlink'
+import NodeIcon from './NodeIcon'
+import NodeNote from './NodeNote'
+import NodeTag from './NodeTag'
+import Export from './Export'
+import Import from './Import'
+import { mapState } from 'vuex'
+import { Notification } from 'element-ui'
+import exampleData from 'simple-mind-map/example/exampleData'
+import { getData } from '../../../api'
 
 /**
  * @Author: 王林
  * @Date: 2021-06-24 22:54:58
  * @Desc: 工具栏
  */
-let fileHandle = null;
+let fileHandle = null
 export default {
-  name: "Toolbar",
+  name: 'Toolbar',
   components: {
     NodeImage,
     NodeHyperlink,
@@ -208,203 +208,220 @@ export default {
       forwardEnd: true,
       readonly: false,
       isFullDataFile: false,
-      timer: null,
-    };
+      timer: null
+    }
   },
   computed: {
     ...mapState(['isHandleLocalFile']),
     hasRoot() {
-      return this.activeNodes.findIndex((node) => {
-        return node.isRoot;
-      }) !== -1;
+      return (
+        this.activeNodes.findIndex(node => {
+          return node.isRoot
+        }) !== -1
+      )
     },
     hasGeneralization() {
-      return this.activeNodes.findIndex((node) => {
-        return node.isGeneralization;
-      }) !== -1;;
+      return (
+        this.activeNodes.findIndex(node => {
+          return node.isGeneralization
+        }) !== -1
+      )
     }
   },
   watch: {
     isHandleLocalFile(val) {
       if (!val) {
-        Notification.closeAll();
+        Notification.closeAll()
       }
     }
   },
   created() {
-    this.$bus.$on("mode_change", (mode) => {
+    this.$bus.$on('mode_change', mode => {
       this.readonly = mode === 'readonly'
-    });
-    this.$bus.$on("node_active", (...args) => {
-      this.activeNodes = args[1];
-    });
-    this.$bus.$on("back_forward", (index, len) => {
+    })
+    this.$bus.$on('node_active', (...args) => {
+      this.activeNodes = args[1]
+    })
+    this.$bus.$on('back_forward', (index, len) => {
       this.backEnd = index <= 0
       this.forwardEnd = index >= len - 1
-    });
-    this.$bus.$on("write_local_file", (content) => {
-      clearTimeout(this.timer);
+    })
+    this.$bus.$on('write_local_file', content => {
+      clearTimeout(this.timer)
       this.timer = setTimeout(() => {
-        this.writeLocalFile(content);
-      }, 1000);
-    });
+        this.writeLocalFile(content)
+      }, 1000)
+    })
   },
   methods: {
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-24 15:40:09 
-     * @Desc: 打开本地文件 
+    /**
+     * @Author: 王林
+     * @Date: 2022-09-24 15:40:09
+     * @Desc: 打开本地文件
      */
     async openLocalFile() {
       try {
-        let [ _fileHandle ] = await window.showOpenFilePicker({
+        let [_fileHandle] = await window.showOpenFilePicker({
           types: [
             {
-              description: 'file',
+              description: '',
               accept: {
-                'application/*': ['.json', '.smm']
+                'application/json': ['.smm']
               }
-            },
+            }
           ],
           excludeAcceptAllOption: true,
           multiple: false
-        });
+        })
         if (!_fileHandle) {
-          return;
+          return
         }
-        fileHandle = _fileHandle;
+        fileHandle = _fileHandle
         if (fileHandle.kind === 'directory') {
-          this.$message.warning('请选择文件');
-          return;
+          this.$message.warning('请选择文件')
+          return
         }
-        this.readFile();
+        this.readFile()
       } catch (error) {
-        console.log(error);
-        this.$message.warning('你的浏览器可能不支持哦');
+        console.log(error)
+        if (error.toString().includes('aborted')) {
+          return
+        }
+        this.$message.warning(
+          '你的浏览器可能不支持，建议使用最新版本的Chrome浏览器'
+        )
       }
     },
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-24 15:40:18 
-     * @Desc: 读取本地文件 
+    /**
+     * @Author: 王林
+     * @Date: 2022-09-24 15:40:18
+     * @Desc: 读取本地文件
      */
     async readFile() {
-      let file = await fileHandle.getFile();
-      let fileReader = new FileReader();
+      let file = await fileHandle.getFile()
+      let fileReader = new FileReader()
       fileReader.onload = async () => {
-        this.$store.commit('setIsHandleLocalFile', true);
-        this.setData(fileReader.result);
-        Notification.closeAll();
+        this.$store.commit('setIsHandleLocalFile', true)
+        this.setData(fileReader.result)
+        Notification.closeAll()
         Notification({
           title: '提示',
-          message: `当前正在编辑你本机的【${ file.name }】文件`,
+          message: `当前正在编辑你本机的【${file.name}】文件`,
           duration: 0,
           showClose: false
-        });
+        })
       }
-      fileReader.readAsText(file);
+      fileReader.readAsText(file)
     },
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-24 15:40:26 
-     * @Desc: 渲染读取的数据 
+    /**
+     * @Author: 王林
+     * @Date: 2022-09-24 15:40:26
+     * @Desc: 渲染读取的数据
      */
     setData(str) {
       try {
-        let data = JSON.parse(str);
+        let data = JSON.parse(str)
         if (typeof data !== 'object') {
-            throw new Error('文件内容有误');
+          throw new Error('文件内容有误')
         }
         if (data.root) {
-          this.isFullDataFile = true;
+          this.isFullDataFile = true
         } else {
-          this.isFullDataFile = false;
+          this.isFullDataFile = false
           data = {
             ...exampleData,
             root: data
           }
         }
-        this.$bus.$emit('setData', data);
+        this.$bus.$emit('setData', data)
       } catch (error) {
         console.log(error)
-        this.$message.error("文件打开失败");
+        this.$message.error('文件打开失败')
       }
     },
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-24 15:40:42 
-     * @Desc: 写入本地文件 
+    /**
+     * @Author: 王林
+     * @Date: 2022-09-24 15:40:42
+     * @Desc: 写入本地文件
      */
     async writeLocalFile(content) {
       if (!fileHandle || !this.isHandleLocalFile) {
-        return;
+        return
       }
       if (!this.isFullDataFile) {
-        content = content.root;
+        content = content.root
       }
-      let string = JSON.stringify(content);
-      const writable = await fileHandle.createWritable();
-      await writable.write(string);
-      await writable.close();
+      let string = JSON.stringify(content)
+      const writable = await fileHandle.createWritable()
+      await writable.write(string)
+      await writable.close()
     },
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-24 15:40:48 
-     * @Desc: 创建本地文件 
+    /**
+     * @Author: 王林
+     * @Date: 2022-09-24 15:40:48
+     * @Desc: 创建本地文件
      */
     async createNewLocalFile() {
-      await this.createLocalFile(exampleData);
+      await this.createLocalFile(exampleData)
     },
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-24 15:49:17 
-     * @Desc: 另存为 
+    /**
+     * @Author: 王林
+     * @Date: 2022-09-24 15:49:17
+     * @Desc: 另存为
      */
     async saveLocalFile() {
-      let data = getData();
-      await this.createLocalFile(data);
+      let data = getData()
+      await this.createLocalFile(data)
     },
 
-    /** 
-     * @Author: 王林 
-     * @Date: 2022-09-24 15:50:22 
-     * @Desc: 创建本地文件 
+    /**
+     * @Author: 王林
+     * @Date: 2022-09-24 15:50:22
+     * @Desc: 创建本地文件
      */
     async createLocalFile(content) {
       try {
         let _fileHandle = await window.showSaveFilePicker({
-          types: [{
-            description: 'file',
-            accept: {'application/*': ['.json', '.smm']},
-          }],
-        });
+          types: [
+            {
+              description: '',
+              accept: { 'application/json': ['.smm'] }
+            }
+          ],
+          suggestedName: '思维导图'
+        })
         if (!_fileHandle) {
-          return;
+          return
         }
         const loading = this.$loading({
           lock: true,
           text: '正在创建文件',
           spinner: 'el-icon-loading',
           background: 'rgba(0, 0, 0, 0.7)'
-        });
-        fileHandle = _fileHandle;
-        this.$store.commit('setIsHandleLocalFile', true);
-        this.isFullDataFile = true;
-        await this.writeLocalFile(content);
-        await this.readFile();
-        loading.close();
+        })
+        fileHandle = _fileHandle
+        this.$store.commit('setIsHandleLocalFile', true)
+        this.isFullDataFile = true
+        await this.writeLocalFile(content)
+        await this.readFile()
+        loading.close()
       } catch (error) {
-        console.log(error);
-        this.$message.warning('你的浏览器可能不支持哦');
+        console.log(error)
+        if (error.toString().includes('aborted')) {
+          return
+        }
+        this.$message.warning(
+          '你的浏览器可能不支持，建议使用最新版本的Chrome浏览器'
+        )
       }
-    },
+    }
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -413,6 +430,7 @@ export default {
     position: fixed;
     left: 0;
     top: 0;
+    right: 0;
     display: flex;
     padding: 0 20px;
     padding-top: 20px;
@@ -421,6 +439,7 @@ export default {
     font-weight: 400;
     color: rgba(26, 26, 26, 0.8);
     z-index: 2;
+    overflow-x: auto;
 
     .toolbarBlock {
       display: flex;
@@ -430,6 +449,7 @@ export default {
       box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
       border: 1px solid rgba(0, 0, 0, 0.06);
       margin-right: 20px;
+      flex-shrink: 0;
 
       &:last-of-type {
         margin-right: 0;

web/src/router.js

@@ -4,12 +4,10 @@ import EditPage from '@/pages/Edit/Index'
 
 Vue.use(VueRouter)
 
-const routes = [
-    { path: '/', name: 'Edit', component: EditPage }
-]
+const routes = [{ path: '/', name: 'Edit', component: EditPage }]
 
 const router = new VueRouter({
-    routes
+  routes
 })
 
-export default router
+export default router

web/src/store.js

@@ -1,57 +1,55 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import exampleData from 'simple-mind-map/example/exampleData';
+import exampleData from 'simple-mind-map/example/exampleData'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
-    state: {
-        mindMapData: null, // 思维导图数据
-        isHandleLocalFile: false// 是否操作的是本地文件
+  state: {
+    mindMapData: null, // 思维导图数据
+    isHandleLocalFile: false // 是否操作的是本地文件
+  },
+  mutations: {
+    /**
+     * @Author: 王林
+     * @Date: 2021-04-10 14:50:01
+     * @Desc: 设置思维导图数据
+     */
+    setMindMapData(state, data) {
+      state.mindMapData = data
     },
-    mutations: {
-        /** 
-         * @Author: 王林 
-         * @Date: 2021-04-10 14:50:01 
-         * @Desc: 设置思维导图数据 
-         */
-        setMindMapData(state, data) {
-            state.mindMapData = data
-        },
 
-        /** 
-         * javascript comment 
-         * @Author: 王林 
-         * @Date: 2022-09-24 13:55:38 
-         * @Desc: 设置操作本地文件标志位 
-         */
-        setIsHandleLocalFile(state, data) {
-            state.isHandleLocalFile = data
-        }
-    },
-    actions: {
-        /** 
-         * @Author: 王林 
-         * @Date: 2021-04-10 14:50:40 
-         * @Desc: 设置初始思维导图数据 
-         */
-        getUserMindMapData(ctx) {
-            try {
-                let {
-                    data
-                } = {
-                    data: {
-                        data: {
-                            mindMapData: exampleData
-                        }
-                    }
-                }
-                ctx.commit('setMindMapData', data.data)
-            } catch (error) {
-                console.log(error)
-            }
-        }
+    /**
+     * javascript comment
+     * @Author: 王林
+     * @Date: 2022-09-24 13:55:38
+     * @Desc: 设置操作本地文件标志位
+     */
+    setIsHandleLocalFile(state, data) {
+      state.isHandleLocalFile = data
     }
+  },
+  actions: {
+    /**
+     * @Author: 王林
+     * @Date: 2021-04-10 14:50:40
+     * @Desc: 设置初始思维导图数据
+     */
+    getUserMindMapData(ctx) {
+      try {
+        let { data } = {
+          data: {
+            data: {
+              mindMapData: exampleData
+            }
+          }
+        }
+        ctx.commit('setMindMapData', data.data)
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
 })
 
-export default store
+export default store

web/src/utils/index.js

@@ -1,33 +1,49 @@
-/** 
- * @Author: 王林 
- * @Date: 2021-07-11 21:38:09 
- * @Desc: 全屏事件检测 
+/**
+ * @Author: 王林
+ * @Date: 2021-07-11 21:38:09
+ * @Desc: 全屏事件检测
  */
 const getOnfullscreEnevt = () => {
-    if (document.documentElement.requestFullScreen) {
-        return 'onfullscreenchange';
-    } else if (document.documentElement.webkitRequestFullScreen) {
-        return 'onwebkitfullscreenchange';
-    } else if (document.documentElement.mozRequestFullScreen) {
-        return 'onmozfullscreenchange';
-    } else if (document.documentElement.msRequestFullscreen) {
-        return 'onmsfullscreenchange';
-    }
+  if (document.documentElement.requestFullScreen) {
+    return 'onfullscreenchange'
+  } else if (document.documentElement.webkitRequestFullScreen) {
+    return 'onwebkitfullscreenchange'
+  } else if (document.documentElement.mozRequestFullScreen) {
+    return 'onmozfullscreenchange'
+  } else if (document.documentElement.msRequestFullscreen) {
+    return 'onmsfullscreenchange'
+  }
 }
 
 export const fullscrrenEvent = getOnfullscreEnevt()
 
-/** 
- * @Author: 王林 
- * @Date: 2021-07-11 21:45:06 
- * @Desc: 全屏 
+/**
+ * @Author: 王林
+ * @Date: 2021-07-11 21:45:06
+ * @Desc: 全屏
  */
-export const fullScreen = (element) => {
-    if (element.requestFullScreen) {
-        element.requestFullScreen();
-    } else if (element.webkitRequestFullScreen) {
-        element.webkitRequestFullScreen();
-    } else if (element.mozRequestFullScreen) {
-        element.mozRequestFullScreen();
+export const fullScreen = element => {
+  if (element.requestFullScreen) {
+    element.requestFullScreen()
+  } else if (element.webkitRequestFullScreen) {
+    element.webkitRequestFullScreen()
+  } else if (element.mozRequestFullScreen) {
+    element.mozRequestFullScreen()
+  }
+}
+
+/** 
+ * javascript comment 
+ * @Author: 王林25 
+ * @Date: 2022-10-24 14:16:18 
+ * @Desc: 文件转buffer 
+ */
+export const fileToBuffer = file => {
+  return new Promise(r => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      r(reader.result)
     }
-}
+    reader.readAsArrayBuffer(file)
+  })
+}