更新群二维码

Merge branch 'feature' into main
打包0.5.6
2026-02-17 22:08:25 +08:00 · 2023-04-21 10:08:49 +08:00 · 2023-04-21 10:08:11 +08:00 · 2023-04-21 10:07:08 +08:00 · 2023-04-21 09:56:14 +08:00 · 2023-04-21 09:55:29 +08:00
52 changed files with 1370 additions and 110 deletions
--- a/index.html
+++ b/index.html
--- a/qrcode.jpg
+++ b/qrcode.jpg
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -92,7 +92,18 @@ const defaultOpt = {
  // 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
  nodeTransitionMoveDuration: 300,
  // 初始根节点的位置
-  initRootNodePosition: null
+  initRootNodePosition: null,
+  // 导出png、svg、pdf时的图形内边距
+  exportPaddingX: 10,
+  exportPaddingY: 10,
+  // 节点文本编辑框的z-index
+  nodeTextEditZIndex: 3000,
+  // 节点备注浮层的z-index
+  nodeNoteTooltipZIndex: 3000,
+  // 是否在点击了画布外的区域时结束节点文本的编辑状态
+  isEndNodeTextEditOnClickOuter: true,
+  // 最大历史记录数
+  maxHistoryCount: 1000
 }

 //  思维导图
@@ -272,6 +283,7 @@ class MindMap {
      layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
    }
    this.opt.layout = layout
+    this.view.reset()
    this.renderer.setLayout()
    this.render()
  }
@@ -359,7 +371,7 @@ class MindMap {
  }

  // 获取svg数据
-  getSvgData() {
+  getSvgData({ paddingX = 0, paddingY = 0 } = {}) {
    const svg = this.svg
    const draw = this.draw
    // 保存原始信息
@@ -371,6 +383,10 @@ class MindMap {
    draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
    // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
    const rect = draw.rbox()
+    // 内边距
+    rect.width += paddingX
+    rect.height += paddingY
+    draw.translate(paddingX / 2, paddingY / 2)
    // 将svg设置为实际内容的宽高
    svg.size(rect.width, rect.height)
    // 把实际内容变换
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.5.4-fix.1",
+  "version": "0.5.6",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/simple-mind-map/src/Command.js
+++ b/simple-mind-map/src/Command.js
@@ -84,6 +84,10 @@ class Command {
    // 删除当前历史指针后面的数据
    this.history = this.history.slice(0, this.activeHistoryIndex + 1)
    this.history.push(simpleDeepClone(data))
+    // 历史记录数超过最大数量
+    if (this.history.length > this.mindMap.opt.maxHistoryCount) {
+      this.history.shift()
+    }
    this.activeHistoryIndex = this.history.length - 1
    this.mindMap.emit('data_change', this.removeDataUid(data))
    this.mindMap.emit(
--- a/simple-mind-map/src/Event.js
+++ b/simple-mind-map/src/Event.js
@@ -27,6 +27,7 @@ class Event extends EventEmitter {

  //  绑定函数上下文
  bindFn() {
+    this.onBodyClick = this.onBodyClick.bind(this)
    this.onDrawClick = this.onDrawClick.bind(this)
    this.onMousedown = this.onMousedown.bind(this)
    this.onMousemove = this.onMousemove.bind(this)
@@ -41,6 +42,7 @@ class Event extends EventEmitter {

  //  绑定事件
  bind() {
+    document.body.addEventListener('click', this.onBodyClick)
    this.mindMap.svg.on('click', this.onDrawClick)
    this.mindMap.el.addEventListener('mousedown', this.onMousedown)
    this.mindMap.svg.on('mousedown', this.onSvgMousedown)
@@ -55,6 +57,7 @@ class Event extends EventEmitter {

  //  解绑事件
  unbind() {
+    document.body.removeEventListener('click', this.onBodyClick)
    this.mindMap.svg.off('click', this.onDrawClick)
    this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
    window.removeEventListener('mousemove', this.onMousemove)
@@ -71,6 +74,11 @@ class Event extends EventEmitter {
    this.emit('draw_click', e)
  }

+  // 页面的单击事件
+  onBodyClick(e) {
+    this.emit('body_click', e)
+  }
+
  //   svg画布的鼠标按下事件
  onSvgMousedown(e) {
    this.emit('svg_mousedown', e)
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -28,7 +28,11 @@ class Export {

  //  获取svg数据
  async getSvgData(domToImage) {
-    let { svg, svgHTML } = this.mindMap.getSvgData()
+    let { exportPaddingX, exportPaddingY } = this.mindMap.opt
+    let { svg, svgHTML } = this.mindMap.getSvgData({
+      paddingX: exportPaddingX,
+      paddingY: exportPaddingY
+    })
    // 把图片的url转换成data:url类型，否则导出会丢失图片
    let imageList = svg.find('image')
    let task = imageList.map(async item => {
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
@@ -389,7 +389,7 @@ class Node {
    // 右键菜单事件
    this.group.on('contextmenu', e => {
      // 按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
-      if (this.mindMap.opt.readonly || this.isGeneralization || e.ctrlKey) {
+      if (this.mindMap.opt.readonly || e.ctrlKey) {// || this.isGeneralization
        return
      }
      e.stopPropagation()
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -250,6 +250,7 @@ class Render {

  //   渲染
  render(callback = () => {}, source) {
+    let t = Date.now()
    // 如果当前还没有渲染完毕，不再触发渲染
    if (this.isRendering) {
      // 等待当前渲染完毕后再进行一次渲染
@@ -281,7 +282,7 @@ class Render {
      // 更新根节点
      this.root = root
      // 渲染节点
-      this.root.render(() => {
+      const onEnd = () => {
        this.isRendering = false
        this.mindMap.emit('node_tree_render_end')
        callback && callback()
@@ -289,6 +290,18 @@ class Render {
          this.hasWaitRendering = false
          this.render(callback, source)
        }
+      }
+      let { enableNodeTransitionMove, nodeTransitionMoveDuration } =
+      this.mindMap.opt
+      this.root.render(() => {
+        let dur = Date.now() - t
+        if (enableNodeTransitionMove && dur <= nodeTransitionMoveDuration) {
+          setTimeout(() => {
+            onEnd()
+          }, nodeTransitionMoveDuration - dur);
+        } else {
+          onEnd()
+        }
      })
    })
    this.mindMap.emit('node_active', null, this.activeNodeList)
--- a/simple-mind-map/src/RichText.js
+++ b/simple-mind-map/src/RichText.js
@@ -1,6 +1,5 @@
 import Quill from 'quill'
 import 'quill/dist/quill.snow.css'
-import './css/quill.css'
 import html2canvas from 'html2canvas'
 import { Image as SvgImage } from '@svgdotjs/svg.js'
 import { walk } from './utils'
@@ -41,8 +40,43 @@ class RichText {
    this.range = null
    this.lastRange = null
    this.node = null
+    this.styleEl = null
+    this.cacheEditingText = ''
    this.initOpt()
    this.extendQuill()
+    this.appendCss()
+  }
+
+  // 插入样式
+  appendCss() {
+    let cssText = `
+      .ql-editor {
+        overflow: hidden;
+        padding: 0;
+        height: auto;
+        line-height: normal;
+      }
+      
+      .ql-container {
+        height: auto;
+        font-size: inherit;
+      }
+
+      .ql-container.ql-snow {
+        border: none;
+      }
+    `
+    // .smm-richtext-node-wrap p {
+    //   display: flex;
+    // }
+    
+    // .smm-richtext-node-edit-wrap p {
+    //   display: flex;
+    // }
+    this.styleEl = document.createElement('style')
+    this.styleEl.type = 'text/css'
+    this.styleEl.innerHTML = cssText
+    document.head.appendChild(this.styleEl)
  }

  // 处理选项参数
@@ -96,9 +130,15 @@ class RichText {
    if (!rect) rect = node._textData.node.node.getBoundingClientRect()
    this.mindMap.emit('before_show_text_edit')
    this.mindMap.renderer.textEdit.registerTmpShortcut()
+    const paddingX = 5
+    const paddingY = 3
    if (!this.textEditNode) {
      this.textEditNode = document.createElement('div')
-      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: 3px 5px;margin-left: -5px;margin-top: -3px;`
+      this.textEditNode.classList.add('smm-richtext-node-edit-wrap')
+      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;margin-left: -${paddingX}px;margin-top: -${paddingY}px;`
+      this.textEditNode.addEventListener('click', e => {
+        e.stopPropagation()
+      })
      document.body.appendChild(this.textEditNode)
    }
    // 原始宽高
@@ -107,15 +147,16 @@ class RichText {
    let originHeight = g.attr('data-height')
    // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
    let bgColor = node.style.merge('fillColor')
+    this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
    this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? '#fff' : bgColor
-    this.textEditNode.style.minWidth = originWidth + 'px'
+    this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px'
    this.textEditNode.style.minHeight = originHeight + 'px'
    this.textEditNode.style.left =
      rect.left + (rect.width - originWidth) / 2 + 'px'
    this.textEditNode.style.top =
      rect.top + (rect.height - originHeight) / 2 + 'px'
    this.textEditNode.style.display = 'block'
-    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
+    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px'
    this.textEditNode.style.transform = `scale(${rect.width / originWidth}, ${
      rect.height / originHeight
    })`
@@ -123,9 +164,9 @@ class RichText {
      // 还不是富文本的情况
      let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
      let html = `<p>${text}</p>`
-      this.textEditNode.innerHTML = html
+      this.textEditNode.innerHTML = this.cacheEditingText || html
    } else {
-      this.textEditNode.innerHTML = node.nodeData.data.text
+      this.textEditNode.innerHTML = this.cacheEditingText || node.nodeData.data.text
    }
    this.initQuillEditor()
    document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
@@ -135,6 +176,7 @@ class RichText {
      // 如果是非富文本的情况，需要手动应用文本样式
      this.setTextStyleIfNotRichText(node)
    }
+    this.cacheEditingText = ''
  }

  // 如果是非富文本的情况，需要手动应用文本样式
@@ -151,14 +193,19 @@ class RichText {
    this.formatAllText(style)
  }

+  // 获取当前正在编辑的内容
+  getEditText() {
+    let html = this.quill.container.firstChild.innerHTML
+    // 去除最后的空行
+    return html.replace(/<p><br><\/p>$/, '')
+  }
+
  // 隐藏文本编辑控件，即完成编辑
  hideEditText(nodes) {
    if (!this.showTextEdit) {
      return
    }
-    let html = this.quill.container.firstChild.innerHTML
-    // 去除最后的空行
-    html = html.replace(/<p><br><\/p>$/, '')
+    let html = this.getEditText()
    let list = nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList
    list.forEach(node => {
      this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
@@ -454,6 +501,7 @@ class RichText {
  // 插件被移除前做的事情
  beforePluginRemove() {
    this.transformAllNodesToNormalNode()
+    document.head.removeChild(this.styleEl)
  }
 }

--- a/simple-mind-map/src/Select.js
+++ b/simple-mind-map/src/Select.js
@@ -17,7 +17,7 @@ class Select {

  //  绑定事件
  bindEvent() {
-    this.checkInNodes = throttle(this.checkInNodes, 500, this)
+    this.checkInNodes = throttle(this.checkInNodes, 300, this)
    this.mindMap.on('mousedown', e => {
      if (this.mindMap.opt.readonly) {
        return
@@ -146,22 +146,26 @@ class Select {
      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 ((left >= minx && left <= maxx ||
+          right >= minx && right <= maxx) && 
+          (top >= miny && top <= maxy ||
+          bottom >= 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, () => {
+        // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
          if (!node.nodeData.data.isActive) {
            return
          }
          this.mindMap.renderer.setNodeActive(node, false)
          this.mindMap.renderer.removeActiveNode(node)
-        })
+        // })
      }
    })
  }
--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -1,4 +1,4 @@
-import { getStrWithBrFromHtml } from './utils'
+import { getStrWithBrFromHtml, checkNodeOuter } from './utils'

 //  节点文字编辑类
 export default class TextEdit {
@@ -6,16 +6,21 @@ export default class TextEdit {
  constructor(renderer) {
    this.renderer = renderer
    this.mindMap = renderer.mindMap
+    // 当前编辑的节点
+    this.currentNode = null
    // 文本编辑框
    this.textEditNode = null
    // 文本编辑框是否显示
    this.showTextEdit = false
+    // 如果编辑过程中缩放画布了，那么缓存当前编辑的内容
+    this.cacheEditingText = ''
    this.bindEvent()
  }

  //  事件
  bindEvent() {
    this.show = this.show.bind(this)
+    this.onScale = this.onScale.bind(this)
    // 节点双击事件
    this.mindMap.on('node_dblclick', this.show)
    // 点击事件
@@ -23,6 +28,12 @@ export default class TextEdit {
      // 隐藏文本编辑框
      this.hideEditTextBox()
    })
+    this.mindMap.on('body_click', () => {
+      // 隐藏文本编辑框
+      if (this.mindMap.opt.isEndNodeTextEditOnClickOuter) {
+        this.hideEditTextBox()
+      }
+    })
    this.mindMap.on('svg_mousedown', () => {
      // 隐藏文本编辑框
      this.hideEditTextBox()
@@ -42,6 +53,7 @@ export default class TextEdit {
      }
      this.show(this.renderer.activeNodeList[0])
    })
+    this.mindMap.on('scale', this.onScale)
  }

  //  注册临时快捷键
@@ -54,6 +66,9 @@ export default class TextEdit {

  //  显示文本编辑框
  show(node) {
+    this.currentNode = node
+    let { offsetLeft, offsetTop } = checkNodeOuter(this.mindMap, node)
+    this.mindMap.view.translateXY(offsetLeft, offsetTop)
    let rect = node._textData.node.node.getBoundingClientRect()
    if (this.mindMap.richText) {
      this.mindMap.richText.showEditText(node, rect)
@@ -62,6 +77,19 @@ export default class TextEdit {
    this.showEditTextBox(node, rect)
  }

+  // 处理画布缩放
+  onScale() {
+    if (!this.currentNode) return
+    if (this.mindMap.richText) {
+      this.mindMap.richText.cacheEditingText = this.mindMap.richText.getEditText()
+      this.mindMap.richText.showTextEdit = false
+    } else {
+      this.cacheEditingText = this.getEditText()
+      this.showTextEdit = false
+    }
+    this.show(this.currentNode)
+  }
+
  //  显示文本编辑框
  showEditTextBox(node, rect) {
    this.mindMap.emit('before_show_text_edit')
@@ -73,13 +101,17 @@ export default class TextEdit {
      this.textEditNode.addEventListener('keyup', e => {
        e.stopPropagation()
      })
+      this.textEditNode.addEventListener('click', e => {
+        e.stopPropagation()
+      })
      document.body.appendChild(this.textEditNode)
    }
    let scale = this.mindMap.view.scale
    let lineHeight = node.style.merge('lineHeight')
    let fontSize = node.style.merge('fontSize')
-    let textLines = node.nodeData.data.text.split(/\n/gim)
+    let textLines = (this.cacheEditingText || node.nodeData.data.text).split(/\n/gim)
    node.style.domText(this.textEditNode, scale, textLines.length)
+    this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
    this.textEditNode.innerHTML = textLines.join('<br>')
    this.textEditNode.style.minWidth = rect.width + 10 + 'px'
    this.textEditNode.style.minHeight = rect.height + 6 + 'px'
@@ -92,7 +124,10 @@ export default class TextEdit {
    }
    this.showTextEdit = true
    // 选中文本
-    this.selectNodeText()
+    if (!this.cacheEditingText) {
+      this.selectNodeText()
+    }
+    this.cacheEditingText = ''
  }

  //  选中文本
@@ -104,8 +139,14 @@ export default class TextEdit {
    selection.addRange(range)
  }

+  // 获取当前正在编辑的内容
+  getEditText() {
+    return getStrWithBrFromHtml(this.textEditNode.innerHTML)
+  }
+
  //  隐藏文本编辑框
  hideEditTextBox() {
+    this.currentNode = null
    if (this.mindMap.richText) {
      return this.mindMap.richText.hideEditText()
    }
@@ -113,7 +154,7 @@ export default class TextEdit {
      return
    }
    this.renderer.activeNodeList.forEach(node => {
-      let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
+      let str = this.getEditText()
      this.mindMap.execCommand('SET_NODE_TEXT', node, str)
      if (node.isGeneralization) {
        // 概要节点
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -124,6 +124,13 @@ class View {
    }
  }

+  //  平移x,y方向
+  translateXY(x, y) {
+    this.x += x
+    this.y += y
+    this.transform()
+  }
+
  //  平移x方向
  translateX(step) {
    this.x += step
@@ -160,10 +167,14 @@ class View {

  //  恢复
  reset() {
+    let scaleChange = this.scale !== 1
    this.scale = 1
    this.x = 0
    this.y = 0
    this.transform()
+    if (scaleChange) {
+      this.mindMap.emit('scale', this.scale)
+    }
  }

  //  缩小
--- a/simple-mind-map/src/css/quill.css
+++ b/simple-mind-map/src/css/quill.css
@@ -1,11 +0,0 @@
-.ql-editor {
-    overflow: hidden;
-    padding: 0;
-    height: auto;
-    line-height: normal;
-}
-
-.ql-container {
-    height: auto;
-    font-size: inherit;
-}
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -302,4 +302,34 @@ export const nextTick = function (fn, ctx) {
    pending = true
    timerFunc(handle, 0)
  }
+}
+
+// 检查节点是否超出画布
+export const checkNodeOuter = (mindMap, node) => {
+  let elRect = mindMap.elRect
+  let { scaleX, scaleY, translateX, translateY } = mindMap.draw.transform()
+  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
+  let offsetLeft = 0
+  let offsetTop = 0
+  if (left < 0) {
+    offsetLeft = -left
+  }
+  if (right > elRect.width) {
+    offsetLeft = -(right - elRect.width)
+  }
+  if (top < 0) {
+    offsetTop = -top
+  }
+  if (bottom > elRect.height) {
+    offsetTop = -(bottom - elRect.height)
+  }
+  return {
+    isOuter: offsetLeft !== 0 || offsetTop !== 0,
+    offsetLeft,
+    offsetTop
+  }
 }
--- a/simple-mind-map/src/utils/nodeCreateContents.js
+++ b/simple-mind-map/src/utils/nodeCreateContents.js
@@ -57,6 +57,7 @@ function createRichTextNode() {
  div.innerHTML = html
  div.style.cssText = `position: fixed; left: -999999px;`
  let el = div.children[0]
+  el.classList.add('smm-richtext-node-wrap')
  el.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
  el.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
  this.mindMap.el.appendChild(div)
@@ -100,11 +101,13 @@ function createTextNode() {
    let lines = []
    let line = []
    while (arr.length) {
-      line.push(arr.shift())
-      let text = line.join('')
-      if (measureText(text, textStyle).width >= maxWidth) {
-        lines.push(text)
-        line = []
+      let str = arr.shift()
+      let text = [...line, str].join('')
+      if (measureText(text, textStyle).width <= maxWidth) {
+        line.push(str)
+      } else {
+        lines.push(line.join(''))
+        line = [str]
      }
    }
    if (line.length > 0) {
@@ -205,13 +208,14 @@ function createNoteNode() {
    if (!this.noteEl) {
      this.noteEl = document.createElement('div')
      this.noteEl.style.cssText = `
-                    position: absolute;
-                    padding: 10px;
-                    border-radius: 5px;
-                    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
-                    display: none;
-                    background-color: #fff;
-                `
+          position: absolute;
+          padding: 10px;
+          border-radius: 5px;
+          box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
+          display: none;
+          background-color: #fff;
+          z-index: ${ this.mindMap.opt.nodeNoteTooltipZIndex }
+      `
      document.body.appendChild(this.noteEl)
    }
    this.noteEl.innerText = this.nodeData.data.note
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -18450,7 +18450,6 @@
      "integrity": "sha512-VCNRiAt2P/bLo09rYt3DLe6xXUMlhJwrvU18Ddd/lYJgC7s8+wvhgYs+MTx4OiAXdu58drGwSBO9SPx7C6J82Q==",
      "dev": true,
      "requires": {
-        "@babel/core": "^7.11.0",
        "@babel/helper-compilation-targets": "^7.9.6",
        "@babel/helper-module-imports": "^7.8.3",
        "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -18463,7 +18462,6 @@
        "@vue/babel-plugin-jsx": "^1.0.3",
        "@vue/babel-preset-jsx": "^1.2.4",
        "babel-plugin-dynamic-import-node": "^2.3.3",
-        "core-js": "^3.6.5",
        "core-js-compat": "^3.6.5",
        "semver": "^6.1.0"
      }
--- a/web/src/assets/avatar/Think.jpg
+++ b/web/src/assets/avatar/Think.jpg
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -95,7 +95,9 @@ export default {
    svgTips: 'tips: Exporting pictures in rich text mode is time-consuming',
    transformingDomToImages: 'Converting nodes: ',
    notifyTitle: 'Info',
-    notifyMessage: 'If the download is not triggered, check whether it is blocked by the browser'
+    notifyMessage: 'If the download is not triggered, check whether it is blocked by the browser',
+    paddingX: 'Padding x',
+    paddingY: 'Padding y'
  },
  fullscreen: {
    fullscreenShow: 'Full screen show',
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -95,7 +95,9 @@ export default {
    svgTips: 'tips：富文本模式导出图片非常耗时',
    transformingDomToImages: '正在转换节点：',
    notifyTitle: '消息',
-    notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了'
+    notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了',
+    paddingX: '水平内边距',
+    paddingY: '垂直内边距'
  },
  fullscreen: {
    fullscreenShow: '全屏查看',
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -10,7 +10,7 @@ let langList = [
    path: 'en'
  }
 ]
-let StartList = ['introduction', 'start', 'translate', 'changelog']
+let StartList = ['introduction', 'start', 'deploy', 'translate', 'changelog']
 let CourseList = new Array(18).fill(0).map((_, index) => {
  return 'course' + (index + 1)
 })
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,25 @@
 # Changelog

+## 0.5.6
+
+Fix: 1.Fix the issue of node position disorder during fast and multiple renderings in a short period of time. 2.Fix the issue of dragging the canvas while the node is being edited, causing the edit box and node to separate.
+
+New: 1.Add a maximum history limit.
+
+## 0.5.5-fix.1
+
+Fix: 1.Fix the issue where the edit box is also outside the canvas when editing nodes outside the canvas. 2.After modifying the structure, reset the transformation to prevent the problem of sudden position changes during the first drag after switching the structure during scaling.
+
+optimization: 1.When multiple nodes are selected, as long as there is a cross between the node and the selection area, it is considered selected.
+
+## 0.5.5-fix.2
+
+Fix: 1.Fix mini map error.
+
+## 0.5.5
+
+New: 1.Supports configuring the padding when exporting to PNG, SVG, or PDF. 2.Support the configuration of z-index for node text editing boxes and node comment floating layer elements. 3.Support clicking on areas outside the canvas to end node editing status.
+
 ## 0.5.4

 New: 1.Add new themes. 2.Added timeline and fishbone structure.
@@ -8,6 +28,10 @@ Fix: 1.Fix the conflict issue between node right-click and canvas right-click. 2

 optimization: 1.Optimize the layout of organizational chart. 2.Optimize the layout of the directory organization chart.

+## 0.5.4-fix.1
+
+optimization: 1.Optimize fishbone layout.
+
 ## 0.5.3

 Fix: 1.Fixed the issue of setting the text style when multiple nodes were selected in rich text mode, which would change the text of all selected nodes to the text of the last selected node.
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,10 +1,22 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.5.6</h2>
+<p>Fix: 1.Fix the issue of node position disorder during fast and multiple renderings in a short period of time. 2.Fix the issue of dragging the canvas while the node is being edited, causing the edit box and node to separate.</p>
+<p>New: 1.Add a maximum history limit.</p>
+<h2>0.5.5-fix.1</h2>
+<p>Fix: 1.Fix the issue where the edit box is also outside the canvas when editing nodes outside the canvas. 2.After modifying the structure, reset the transformation to prevent the problem of sudden position changes during the first drag after switching the structure during scaling.</p>
+<p>optimization: 1.When multiple nodes are selected, as long as there is a cross between the node and the selection area, it is considered selected.</p>
+<h2>0.5.5-fix.2</h2>
+<p>Fix: 1.Fix mini map error.</p>
+<h2>0.5.5</h2>
+<p>New: 1.Supports configuring the padding when exporting to PNG, SVG, or PDF. 2.Support the configuration of z-index for node text editing boxes and node comment floating layer elements. 3.Support clicking on areas outside the canvas to end node editing status.</p>
 <h2>0.5.4</h2>
 <p>New: 1.Add new themes. 2.Added timeline and fishbone structure.</p>
 <p>Fix: 1.Fix the conflict issue between node right-click and canvas right-click. 2.Fix the bug that the line segment is not hidden when dragging nodes such as organizational chart and directory organization chart.</p>
 <p>optimization: 1.Optimize the layout of organizational chart. 2.Optimize the layout of the directory organization chart.</p>
+<h2>0.5.4-fix.1</h2>
+<p>optimization: 1.Optimize fishbone layout.</p>
 <h2>0.5.3</h2>
 <p>Fix: 1.Fixed the issue of setting the text style when multiple nodes were selected in rich text mode, which would change the text of all selected nodes to the text of the last selected node.</p>
 <p>New: 1.Support setting the position of the initial central node.</p>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -53,6 +53,12 @@ const mindMap = new MindMap({
 | enableNodeTransitionMove（v0.5.1+）     | Boolean  | true | Whether to enable node animation transition  |          |
 | nodeTransitionMoveDuration（v0.5.1+）     | Number  | 300 | If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds  |          |
 | initRootNodePosition（v0.5.3+）     | Array  | null | The position of the initial root node can be passed as an array, default is `['center', 'center']`, Represents the root node at the center of the canvas, In addition to `center`, keywords can also be set to `left`, `top`, `right`, and `bottom`, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as `['40%', '60%']`, Represents a horizontal position at `40%` of the canvas width, and a vertical position at `60%` of the canvas height   |          |
+| exportPaddingX（v0.5.5+）     |  Number | 10 | Horizontal padding of graphics when exporting PNG, SVG, and PDF  |          |
+| exportPaddingY（v0.5.5+）     | Number  | 10 | Vertical padding of graphics when exporting PNG, SVG, and PDF  |          |
+| nodeTextEditZIndex（v0.5.5+）     | Number  | 3000 |   | z-index of node text edit box elements         |
+| nodeNoteTooltipZIndex（v0.5.5+）     | Number  | 3000 | z-index of floating layer elements in node comments  |          |
+| isEndNodeTextEditOnClickOuter（v0.5.5+）     | Boolean  | true | Whether to end the editing status of node text when clicking on an area outside the canvas  |          |
+| maxHistoryCount（v0.5.6+）     | Number  | 1000 |   | Maximum number of history records         |

 ### Watermark config

--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -231,6 +231,48 @@
 <td>The position of the initial root node can be passed as an array, default is <code>['center', 'center']</code>, Represents the root node at the center of the canvas, In addition to <code>center</code>, keywords can also be set to <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as <code>['40%', '60%']</code>, Represents a horizontal position at <code>40%</code> of the canvas width, and a vertical position at <code>60%</code> of the canvas height</td>
 <td></td>
 </tr>
+<tr>
+<td>exportPaddingX（v0.5.5+）</td>
+<td>Number</td>
+<td>10</td>
+<td>Horizontal padding of graphics when exporting PNG, SVG, and PDF</td>
+<td></td>
+</tr>
+<tr>
+<td>exportPaddingY（v0.5.5+）</td>
+<td>Number</td>
+<td>10</td>
+<td>Vertical padding of graphics when exporting PNG, SVG, and PDF</td>
+<td></td>
+</tr>
+<tr>
+<td>nodeTextEditZIndex（v0.5.5+）</td>
+<td>Number</td>
+<td>3000</td>
+<td></td>
+<td>z-index of node text edit box elements</td>
+</tr>
+<tr>
+<td>nodeNoteTooltipZIndex（v0.5.5+）</td>
+<td>Number</td>
+<td>3000</td>
+<td>z-index of floating layer elements in node comments</td>
+<td></td>
+</tr>
+<tr>
+<td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>Whether to end the editing status of node text when clicking on an area outside the canvas</td>
+<td></td>
+</tr>
+<tr>
+<td>maxHistoryCount（v0.5.6+）</td>
+<td>Number</td>
+<td>1000</td>
+<td></td>
+<td>Maximum number of history records</td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>
--- a/web/src/pages/Doc/en/deploy/index.md
+++ b/web/src/pages/Doc/en/deploy/index.md
@@ -0,0 +1 @@
+# Deploy
--- a/web/src/pages/Doc/en/xmind/index.md
+++ b/web/src/pages/Doc/en/xmind/index.md
@@ -24,9 +24,8 @@ MindMap.xmind

 ### xmind.parseXmindFile(file)

-Parsing the `.xmind` file and returning the parsed data. Note that this is
-complete data, including the node tree, theme, and structure. You can use
-`mindMap.setFullData(data)` to render the returned data to the canvas.
+Parsing the `.xmind` file and returning the parsed data. You can use
+`mindMap.setData(data)` to render the returned data to the canvas.

 `file`: `File` object

@@ -35,9 +34,8 @@ complete data, including the node tree, theme, and structure. You can use
 Convert `xmind` data. The `.xmind` file is essentially a `zip` file that can be
 decompressed by changing the suffix to zip. Inside, there is a `content.json`
 file. If you have parsed this file yourself, you can pass the contents of this
-file to this method for conversion. The converted data is the complete data,
-including the node tree, theme, structure, etc. You can use
-`mindMap.setFullData(data)` to render the returned data to the canvas.
+file to this method for conversion. You can use
+`mindMap.setData(data)` to render the returned data to the canvas.

 `content`: the contents of the `content.json` file within the `.xmind` zip
 package
--- a/web/src/pages/Doc/en/xmind/index.vue
+++ b/web/src/pages/Doc/en/xmind/index.vue
@@ -15,17 +15,15 @@
 </code></pre>
 <h2>Methods</h2>
 <h3>xmind.parseXmindFile(file)</h3>
-<p>Parsing the <code>.xmind</code> file and returning the parsed data. Note that this is
-complete data, including the node tree, theme, and structure. You can use
-<code>mindMap.setFullData(data)</code> to render the returned data to the canvas.</p>
+<p>Parsing the <code>.xmind</code> file and returning the parsed data. You can use
+<code>mindMap.setData(data)</code> to render the returned data to the canvas.</p>
 <p><code>file</code>: <code>File</code> object</p>
 <h3>xmind.transformXmind(content)</h3>
 <p>Convert <code>xmind</code> data. The <code>.xmind</code> file is essentially a <code>zip</code> file that can be
 decompressed by changing the suffix to zip. Inside, there is a <code>content.json</code>
 file. If you have parsed this file yourself, you can pass the contents of this
-file to this method for conversion. The converted data is the complete data,
-including the node tree, theme, structure, etc. You can use
-<code>mindMap.setFullData(data)</code> to render the returned data to the canvas.</p>
+file to this method for conversion. You can use
+<code>mindMap.setData(data)</code> to render the returned data to the canvas.</p>
 <p><code>content</code>: the contents of the <code>content.json</code> file within the <code>.xmind</code> zip
 package</p>
 <h3>xmind.transformOldXmind(content)</h3>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -41,7 +41,8 @@ export default [
      { path: 'utils', title: '内置工具方法' },
      { path: 'view', title: 'View实例' },
      { path: 'watermark', title: 'Watermark插件' },
-      { path: 'xmind', title: 'XMind解析' }
+      { path: 'xmind', title: 'XMind解析' },
+      { path: 'deploy', title: '部署' }
    ]
  },
  {
@@ -68,7 +69,8 @@ export default [
      { path: 'utils', title: 'Utility Methods' },
      { path: 'view', title: 'View instance' },
      { path: 'watermark', title: 'Watermark plugin' },
-      { path: 'xmind', title: 'XMind parse' }
+      { path: 'xmind', title: 'XMind parse' },
+      { path: 'deploy', title: 'Deploy' }
    ]
  }
 ]
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,25 @@
 # Changelog

+## 0.5.6
+
+修复：1.修复短时间快速多次渲染时节点位置错乱的问题。 2.修复节点正在编辑中时拖动画布导致编辑框和节点分离的问题。
+
+新增：1.添加最大历史记录数限制。
+
+## 0.5.5
+
+新增：1.支持配置导出为png、svg、pdf时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的z-index。 3.支持点击画布外的区域结束节点编辑状态。
+
+## 0.5.5-fix.1
+
+修复：1.修复节点在画布外编辑时编辑框也在画布外的问题。 2.修改结构后复位变换，防止存在缩放时切换结构后第一次拖动时会发生位置突变的问题。
+
+优化：1.节点多选时只要节点和选区存在交叉即认为被选中。 
+
+## 0.5.5-fix.2
+
+修复：1.修复小地图报错。
+
 ## 0.5.4

 新增：1.添加新主题。 2.新增时间轴和鱼骨结构。
@@ -8,6 +28,10 @@

 优化：1.优化组织结构图布局。2.优化目录组织图布局。

+## 0.5.4-fix.1
+
+优化：1.优化鱼骨图布局。
+
 ## 0.5.3

 修复：1.修复富文本模式下，如果选择了多个节点时设置文本样式，会将所有多选节点的文本改成最后一个多选节点的文本的问题。
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,10 +1,22 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.5.6</h2>
+<p>修复：1.修复短时间快速多次渲染时节点位置错乱的问题。 2.修复节点正在编辑中时拖动画布导致编辑框和节点分离的问题。</p>
+<p>新增：1.添加最大历史记录数限制。</p>
+<h2>0.5.5</h2>
+<p>新增：1.支持配置导出为png、svg、pdf时的内边距。 2.支持配置节点文本编辑框、节点备注浮层元素的z-index。 3.支持点击画布外的区域结束节点编辑状态。</p>
+<h2>0.5.5-fix.1</h2>
+<p>修复：1.修复节点在画布外编辑时编辑框也在画布外的问题。 2.修改结构后复位变换，防止存在缩放时切换结构后第一次拖动时会发生位置突变的问题。</p>
+<p>优化：1.节点多选时只要节点和选区存在交叉即认为被选中。</p>
+<h2>0.5.5-fix.2</h2>
+<p>修复：1.修复小地图报错。</p>
 <h2>0.5.4</h2>
 <p>新增：1.添加新主题。 2.新增时间轴和鱼骨结构。</p>
 <p>修复：1.修复节点右键和画布右键的冲突问题。 2.修复组织结构图、目录组织图等节点拖拽时存在线段未隐藏的bug。</p>
 <p>优化：1.优化组织结构图布局。2.优化目录组织图布局。</p>
+<h2>0.5.4-fix.1</h2>
+<p>优化：1.优化鱼骨图布局。</p>
 <h2>0.5.3</h2>
 <p>修复：1.修复富文本模式下，如果选择了多个节点时设置文本样式，会将所有多选节点的文本改成最后一个多选节点的文本的问题。</p>
 <p>新增：1.支持设置初始中心节点的位置。</p>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -53,6 +53,12 @@ const mindMap = new MindMap({
 | enableNodeTransitionMove（v0.5.1+）     | Boolean  | true | 是否开启节点动画过渡  |          |
 | nodeTransitionMoveDuration（v0.5.1+）     | Number  | 300 | 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms  |          |
 | initRootNodePosition（v0.5.3+）     | Array  | null | 初始根节点的位置，可传一个数组，默认为`['center', 'center']`，代表根节点处于画布中心位置，除了`center`，关键词还可以设置`left`、`top`、`right`、`bottom`，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如`['40%', '60%']`，代表水平位置在画布宽度的`40%`的位置，垂直位置在画布高度的`60%`的位置  |          |
+| exportPaddingX（v0.5.5+）     |  Number | 10 | 导出png、svg、pdf时的图形水平内边距  |          |
+| exportPaddingY（v0.5.5+）     | Number  | 10 | 导出png、svg、pdf时的图形垂直内边距  |          |
+| nodeTextEditZIndex（v0.5.5+）     | Number  | 3000 | 节点文本编辑框元素的z-index  |          |
+| nodeNoteTooltipZIndex（v0.5.5+）     | Number  | 3000 | 节点备注浮层元素的z-index  |          |
+| isEndNodeTextEditOnClickOuter（v0.5.5+）     | Boolean  | true |  是否在点击了画布外的区域时结束节点文本的编辑状态 |          |
+| maxHistoryCount（v0.5.6+）     | Number  | 1000 | 最大历史记录数  |          |

 ### 水印配置

--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -231,6 +231,48 @@
 <td>初始根节点的位置，可传一个数组，默认为<code>['center', 'center']</code>，代表根节点处于画布中心位置，除了<code>center</code>，关键词还可以设置<code>left</code>、<code>top</code>、<code>right</code>、<code>bottom</code>，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如<code>['40%', '60%']</code>，代表水平位置在画布宽度的<code>40%</code>的位置，垂直位置在画布高度的<code>60%</code>的位置</td>
 <td></td>
 </tr>
+<tr>
+<td>exportPaddingX（v0.5.5+）</td>
+<td>Number</td>
+<td>10</td>
+<td>导出png、svg、pdf时的图形水平内边距</td>
+<td></td>
+</tr>
+<tr>
+<td>exportPaddingY（v0.5.5+）</td>
+<td>Number</td>
+<td>10</td>
+<td>导出png、svg、pdf时的图形垂直内边距</td>
+<td></td>
+</tr>
+<tr>
+<td>nodeTextEditZIndex（v0.5.5+）</td>
+<td>Number</td>
+<td>3000</td>
+<td>节点文本编辑框元素的z-index</td>
+<td></td>
+</tr>
+<tr>
+<td>nodeNoteTooltipZIndex（v0.5.5+）</td>
+<td>Number</td>
+<td>3000</td>
+<td>节点备注浮层元素的z-index</td>
+<td></td>
+</tr>
+<tr>
+<td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>是否在点击了画布外的区域时结束节点文本的编辑状态</td>
+<td></td>
+</tr>
+<tr>
+<td>maxHistoryCount（v0.5.6+）</td>
+<td>Number</td>
+<td>1000</td>
+<td>最大历史记录数</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>
--- a/web/src/pages/Doc/zh/course11/index.md
+++ b/web/src/pages/Doc/zh/course11/index.md
@@ -1,6 +1,6 @@
 # 结构

-`simple-mind-map`目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）。
+`simple-mind-map`目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）。

 可以在实例化`simple-mind-map`时通过选项指定使用的结构：

--- a/web/src/pages/Doc/zh/course11/index.vue
+++ b/web/src/pages/Doc/zh/course11/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <h1>结构</h1>
-<p><code>simple-mind-map</code>目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）。</p>
+<p><code>simple-mind-map</code>目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）。</p>
 <p>可以在实例化<code>simple-mind-map</code>时通过选项指定使用的结构：</p>
 <pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
    <span class="hljs-comment">// ...</span>
--- a/web/src/pages/Doc/zh/course16/index.md
+++ b/web/src/pages/Doc/zh/course16/index.md
@@ -1,3 +1,101 @@
 # 如何渲染富文本的悬浮工具栏

-> 要支持节点富文本编辑需要使用富文本插件
+> 要支持节点富文本编辑需要使用富文本插件
+
+如果开启了节点富文本编辑，那么可以对节点内的部分文本应用样式，一般当选中文本时上方会出现一个工具栏，有加粗、斜体、改变颜色等等的按钮。
+
+首先要监听`rich_text_selection_change`事件，也就是选中文本的事件：
+
+```js
+mindMap.on('rich_text_selection_change', (hasRange, rect, formatInfo) => {
+    // hasRange（是否存在选区）
+    // rectInfo（选区的尺寸和位置信息）
+    // formatInfo（选区的文本格式化信息）
+    // 显示你的工具栏
+})
+```
+
+可以通过`hasRange`来判断是否显示工具栏，工具栏的位置可以通过`rectInfo`获取，通过`formatInfo`可以获取当前选中文本的样式信息，比如已经被加粗了，那么你的加粗按钮就可以渲染为激活状态。
+
+### 工具栏定位
+
+```js
+let left = rect.left + rect.width / 2 + 'px'
+let top = rect.top - 60 + 'px'
+```
+
+计算出来的是相对于浏览器窗口左上角的位置，所以你的工具栏元素最好是添加在body元素下面，并且使用固定定位或相对定位，另外`z-index`的属性最好也设置的高一点，否则在弹窗等场景下可能会被挡住。
+
+### 加粗/取消加粗
+
+```js
+mindMap.richText.formatText({
+    bold: true/false
+})
+```
+
+### 斜体/取消斜体
+
+```js
+mindMap.richText.formatText({
+    italic: true/false
+})
+```
+
+### 下划线/取消下划线
+
+```js
+mindMap.richText.formatText({
+    underline: true/false
+})
+```
+
+### 删除线/取消删除线
+
+```js
+mindMap.richText.formatText({
+    strike: true/false
+})
+```
+
+### 设置字体
+
+```js
+mindMap.richText.formatText({
+    font: '宋体, SimSun, Songti SC'
+})
+```
+
+### 设置字号
+
+```js
+mindMap.richText.formatText({
+    font: 16 + 'px'
+})
+```
+
+### 设置文字颜色
+
+```js
+mindMap.richText.formatText({
+    color: '#fff'
+})
+```
+
+### 设置文字背景颜色
+
+```js
+mindMap.richText.formatText({
+    background: '#fff'
+})
+```
+
+### 清除样式
+
+```js
+mindMap.richText.removeFormat()
+```
+
+## 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVk+P20QU/yqDUWUHEiegcjHZUlpA6mERWhUJialWjj2OB8Yzlj1Otkp96akUJCQOcOFQceHeA6J74ct0u+Vb8N6M/202aXMjUaKZN7/3fm/m/ZnZOJ/mub+qmBM48zIqeK5JyXSV36KSZ7kqNNmQgiVjouSxqqRm8ZiUaSiEWp+whNQkKVRGXLDgdhrHXMbHYW6XqFOCWLBJBtJJFubUoZIQKgXTBGWIPCKyEoJKKiMlS3AhVev7SolFWMAa8HtJKEo2atcFS3SzMOuEWqGhq7KoKgom9ReqyEJ9TyaqQWxqgPSKy6Vgd5SIYdUbkaNbZIM+XlP2V6GomL+wyHfetI76ze78gkfpfXam/cQgcegZAkIQGryRCHHobL3t79cyZoXgkh3mdDWA7/W8Ax3ofoffv4crJrc2EqWhXLK7SigM8wGbiBqoW7AY8u0gH41O0Kt0PnQZ7Q2YBxnJ1m0mt6aYCEisoioD3/wl058LhsM7D+/Fntto3lVSh7Ddwh2NrVYc6jCw1vFDHRRQZyCyYg1Oo5g6r569eP308eXjF7ZW8FM3xhAYpVzEcD4I/ra3sWVuJ8s208vzny7P/9wmu0q4g/RBvzbE/U8etMNG1upxyfWJUvpLFbOvVMk1VxI0XWwe7pi4EYQOwvTAwOvRx7Yt9TmlpOdiXp2is6clEyxCE6c2a8GCl4blCY7H0FMiPSY2+TBf+4QCP5IeOeoPA92waW16UqR909Xet+M1j3VKpuRDELj5GWQu1fiFJndVCbvehNycdTg8KwDuKSFQG4TD932vd5o8ekRMY9w6VyxWJZgv1NLbY7ZRalQG7btjbU8AN2JKEH7zqb1y4LKBiWZwT4SawYyQecxXJBJhWR5Rp4nIZyxT1DHLDYDH/WpXeACZT2F1CGwtaesVdchqwhMQDFwFYVDqh4KBeIOxCEyMxnixBPhXd+RgdVFBLCS5HQkefW8st5cIoDabHS3MXBufEPfi519f/fXk4umzy+e/uQQ6UzOs6/nUWn0bS9f691H1zb7je/n3jxdPfrk8/8dQ9rNDWAd9Ghj//eP31z8839LqT7wdzaeDgMLUHK1B3G7eCdTxp/Zx0PRZn5WZH5Uldbpi9AexbzPX1EZAPpjNbhgcIXlX3gUDRr5iZsGkI/7e3c6R1lSvGC4gxyttFW11BmTWzEwGtJPr9CnjyxTgN2ez/Kxl3s37XsuchcWSA29rNQ/jmMtlK+hchwK376C3eayLUJZYzJCrOMST/8abfDS7YVsbWIR6M0Fwxo4NAb7H/O9KJeH5Z+zTZgFC0PVt6sDrzjZrfwpDv4Bbk2cMozVZFGpdsgKMUKfpuztefFb3eqxRq/Gtdur/AJ09jnE=" />
--- a/web/src/pages/Doc/zh/course16/index.vue
+++ b/web/src/pages/Doc/zh/course16/index.vue
@@ -4,7 +4,66 @@
 <blockquote>
 <p>要支持节点富文本编辑需要使用富文本插件</p>
 </blockquote>
-
+<p>如果开启了节点富文本编辑，那么可以对节点内的部分文本应用样式，一般当选中文本时上方会出现一个工具栏，有加粗、斜体、改变颜色等等的按钮。</p>
+<p>首先要监听<code>rich_text_selection_change</code>事件，也就是选中文本的事件：</p>
+<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;rich_text_selection_change&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">hasRange, rect, formatInfo</span>) =&gt;</span> {
+    <span class="hljs-comment">// hasRange（是否存在选区）</span>
+    <span class="hljs-comment">// rectInfo（选区的尺寸和位置信息）</span>
+    <span class="hljs-comment">// formatInfo（选区的文本格式化信息）</span>
+    <span class="hljs-comment">// 显示你的工具栏</span>
+})
+</code></pre>
+<p>可以通过<code>hasRange</code>来判断是否显示工具栏，工具栏的位置可以通过<code>rectInfo</code>获取，通过<code>formatInfo</code>可以获取当前选中文本的样式信息，比如已经被加粗了，那么你的加粗按钮就可以渲染为激活状态。</p>
+<h3>工具栏定位</h3>
+<pre class="hljs"><code><span class="hljs-keyword">let</span> left = rect.left + rect.width / <span class="hljs-number">2</span> + <span class="hljs-string">&#x27;px&#x27;</span>
+<span class="hljs-keyword">let</span> top = rect.top - <span class="hljs-number">60</span> + <span class="hljs-string">&#x27;px&#x27;</span>
+</code></pre>
+<p>计算出来的是相对于浏览器窗口左上角的位置，所以你的工具栏元素最好是添加在body元素下面，并且使用固定定位或相对定位，另外<code>z-index</code>的属性最好也设置的高一点，否则在弹窗等场景下可能会被挡住。</p>
+<h3>加粗/取消加粗</h3>
+<pre class="hljs"><code>mindMap.richText.formatText({
+    <span class="hljs-attr">bold</span>: <span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>
+})
+</code></pre>
+<h3>斜体/取消斜体</h3>
+<pre class="hljs"><code>mindMap.richText.formatText({
+    <span class="hljs-attr">italic</span>: <span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>
+})
+</code></pre>
+<h3>下划线/取消下划线</h3>
+<pre class="hljs"><code>mindMap.richText.formatText({
+    <span class="hljs-attr">underline</span>: <span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>
+})
+</code></pre>
+<h3>删除线/取消删除线</h3>
+<pre class="hljs"><code>mindMap.richText.formatText({
+    <span class="hljs-attr">strike</span>: <span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>
+})
+</code></pre>
+<h3>设置字体</h3>
+<pre class="hljs"><code>mindMap.richText.formatText({
+    <span class="hljs-attr">font</span>: <span class="hljs-string">&#x27;宋体, SimSun, Songti SC&#x27;</span>
+})
+</code></pre>
+<h3>设置字号</h3>
+<pre class="hljs"><code>mindMap.richText.formatText({
+    <span class="hljs-attr">font</span>: <span class="hljs-number">16</span> + <span class="hljs-string">&#x27;px&#x27;</span>
+})
+</code></pre>
+<h3>设置文字颜色</h3>
+<pre class="hljs"><code>mindMap.richText.formatText({
+    <span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#fff&#x27;</span>
+})
+</code></pre>
+<h3>设置文字背景颜色</h3>
+<pre class="hljs"><code>mindMap.richText.formatText({
+    <span class="hljs-attr">background</span>: <span class="hljs-string">&#x27;#fff&#x27;</span>
+})
+</code></pre>
+<h3>清除样式</h3>
+<pre class="hljs"><code>mindMap.richText.removeFormat()
+</code></pre>
+<h2>完整示例</h2>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVk+P20QU/yqDUWUHEiegcjHZUlpA6mERWhUJialWjj2OB8Yzlj1Otkp96akUJCQOcOFQceHeA6J74ct0u+Vb8N6M/202aXMjUaKZN7/3fm/m/ZnZOJ/mub+qmBM48zIqeK5JyXSV36KSZ7kqNNmQgiVjouSxqqRm8ZiUaSiEWp+whNQkKVRGXLDgdhrHXMbHYW6XqFOCWLBJBtJJFubUoZIQKgXTBGWIPCKyEoJKKiMlS3AhVev7SolFWMAa8HtJKEo2atcFS3SzMOuEWqGhq7KoKgom9ReqyEJ9TyaqQWxqgPSKy6Vgd5SIYdUbkaNbZIM+XlP2V6GomL+wyHfetI76ze78gkfpfXam/cQgcegZAkIQGryRCHHobL3t79cyZoXgkh3mdDWA7/W8Ax3ofoffv4crJrc2EqWhXLK7SigM8wGbiBqoW7AY8u0gH41O0Kt0PnQZ7Q2YBxnJ1m0mt6aYCEisoioD3/wl058LhsM7D+/Fntto3lVSh7Ddwh2NrVYc6jCw1vFDHRRQZyCyYg1Oo5g6r569eP308eXjF7ZW8FM3xhAYpVzEcD4I/ra3sWVuJ8s208vzny7P/9wmu0q4g/RBvzbE/U8etMNG1upxyfWJUvpLFbOvVMk1VxI0XWwe7pi4EYQOwvTAwOvRx7Yt9TmlpOdiXp2is6clEyxCE6c2a8GCl4blCY7H0FMiPSY2+TBf+4QCP5IeOeoPA92waW16UqR909Xet+M1j3VKpuRDELj5GWQu1fiFJndVCbvehNycdTg8KwDuKSFQG4TD932vd5o8ekRMY9w6VyxWJZgv1NLbY7ZRalQG7btjbU8AN2JKEH7zqb1y4LKBiWZwT4SawYyQecxXJBJhWR5Rp4nIZyxT1DHLDYDH/WpXeACZT2F1CGwtaesVdchqwhMQDFwFYVDqh4KBeIOxCEyMxnixBPhXd+RgdVFBLCS5HQkefW8st5cIoDabHS3MXBufEPfi519f/fXk4umzy+e/uQQ6UzOs6/nUWn0bS9f691H1zb7je/n3jxdPfrk8/8dQ9rNDWAd9Ghj//eP31z8839LqT7wdzaeDgMLUHK1B3G7eCdTxp/Zx0PRZn5WZH5Uldbpi9AexbzPX1EZAPpjNbhgcIXlX3gUDRr5iZsGkI/7e3c6R1lSvGC4gxyttFW11BmTWzEwGtJPr9CnjyxTgN2ez/Kxl3s37XsuchcWSA29rNQ/jmMtlK+hchwK376C3eayLUJZYzJCrOMST/8abfDS7YVsbWIR6M0Fwxo4NAb7H/O9KJeH5Z+zTZgFC0PVt6sDrzjZrfwpDv4Bbk2cMozVZFGpdsgKMUKfpuztefFb3eqxRq/Gtdur/AJ09jnE=" />
  </div>
 </template>

--- a/web/src/pages/Doc/zh/course17/index.md
+++ b/web/src/pages/Doc/zh/course17/index.md
@@ -1,3 +1,245 @@
 # 导入和导出

-编写中。。。
+## 导出
+
+> 要使用导出功能需要使用导出插件。
+
+目前支持导出为`.smm`、`.json`、`.svg`、`.png`、`.pdf`、`.md`文件。
+
+`.smm`是`simple-mind-map`自己定义的一种文件，其实就是`json`文件，换了一个扩展名而已。
+
+导出直接调用`export`方法即可。
+
+### 导出为smm、json
+
+这两种文件的导出是一样的：
+
+```js
+mindMap.export(type, isDownload, fileName, withConfig)
+```
+
+`withConfig`指定导出的数据中是否要包含节点数据外的配置数据，比如使用的布局、主题等，传`true`，导出的结构如下：
+
+```js
+{
+    layout,
+    root,
+    theme: {
+        template,
+        config
+    },
+    view
+}
+```
+
+如果传`false`，导出的数据只有`root`部分，也就是纯节点树。
+
+示例：
+
+```js
+mindMap.export('smm', true, '文件名', true)
+mindMap.export('json', true, '文件名', false)
+```
+
+### 导出为png、pdf
+
+导出这两种文件很简单：
+
+```js
+mindMap.export('png', true, '文件名')
+mindMap.export('pdf', true, '文件名')
+```
+
+如果开启了节点富文本编辑，那么导出会非常慢，因为需要挨个转换节点，所以如果导出操作很频繁的话建议关闭节点非文本编辑功能。
+
+### 导出为svg
+
+导出为`svg`可以传递的参数如下：
+
+```js
+mindMap.export(type, isDownload, fileName, domToImage = false, plusCssText = '')
+```
+
+如果开启了节点富文本编辑功能，那么可以通过`domToImage`参数控制导出的`svg`中是否保留`html`结构，还是转换成图片形式，同样，如果传了`true`，导出会非常耗时，建议导出为`svg`时`domToImage`传`false`。
+
+如果`domToImage`传的是`false`，也就是`svg`中会保留节点的`html`结构，这就又存在一个问题，因为浏览器对每个元素默认会设置一些样式，影响最大的就是`margin`和`padding`，这就有可能会导致节点中的文字错位，所以可以通过`plusCssText`参数传入`css`样式：
+
+```js
+mindMap.export(
+    'svg', 
+    true, 
+    '文件名', 
+    false, 
+    `* {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }`
+)
+```
+
+### 导出为md
+
+导出为`markdown`文件只要传递默认的三个参数即可：
+
+```js
+mindMap.export('md', true, '文件名')
+```
+
+## 导入
+
+目前支持从`.smm`、`.json`、`.xmind`、`.xlsx`、`.md`格式的文件导入。
+
+### 导入smm、json
+
+这两个文件导入很简单，直接读取文件内容，转成对象，然后调用相关方法渲染到画布即可。
+
+因为导出这两种类型时可以选择是否包含配置数据，所以导入的时候调用的方法也是不一样的：
+
+```js
+let data = JSON.parse('json数据')
+// 如果数据中存在root属性，那么代表是包含配置的完整数据，则使用setFullData方法导入数据
+if (data.root) {
+    mindMap.setFullData(data)
+} else {
+// 否则使用setData方法导入
+    mindMap.setData(data)
+}
+// 导入数据后有可能新数据渲染在可视区域外了，所以为了更好的体验，可以复位一下视图的变换
+mindMap.view.reset()
+```
+
+### 导入xmind
+
+要导入`xmind`文件，需要引入`xmind`的解析方法：
+
+```js
+import xmind from 'simple-mind-map/src/parse/xmind.js'
+```
+
+如果使用的是`umd`文件，可以这样获取：
+
+```js
+MindMap.xmind
+```
+
+如果你是通过`input type=file`等方式获取到的`File`文件对象，那么可以直接传递给`parseXmindFile`方法解析，注意返回的是一个`Promise`实例，会返回解析后的节点树数据，使用`setData`方法渲染到画布即可。
+
+```js
+let data = await xmind.parseXmindFile(file)
+mindMap.setData(data)
+```
+
+`.xmind`文件本质上是一个压缩包，改成`zip`后缀可以解压缩，里面存在一个`content.json`文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个`transformXmind`方法进行转换：
+
+```js
+let data = await xmind.transformXmind(fileContent)
+mindMap.setData(data)
+```
+
+另外如果导入的是`xmind8`版本的数据，需要使用`transformOldXmind`方法。
+
+### 导入xlsx
+
+这个文件的导入没有内置方法，需要你自己开发，以下是一个使用`xlsx`库的方式：
+
+```js
+import { read, utils } from 'xlsx'
+
+// 文件转buffer
+export const fileToBuffer = file => {
+  return new Promise(r => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      r(reader.result)
+    }
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+// File文件对象
+const transformXLSXToJson = async (file) => {
+    const wb = read(await fileToBuffer(file))
+    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)
+        }
+        }
+    }
+
+    return layers[0][0]
+}
+
+let data = transformXLSXToJson('xlsx文件对象')
+mindMap.setData(data)
+```
+
+### 导入md
+
+要导入`markdown`文件需要引入相应的解析方法：
+
+```js
+import markdown from 'simple-mind-map/src/parse/markdown.js'
+```
+
+如果使用的是umd格式的文件，那么可以通过如下方式获取：
+
+```js
+MindMap.markdown
+```
+
+获取到`md`文件的内容后调用`transformMarkdownTo`方法转换即可，返回一个`Promise`实例：
+
+```js
+let data = await markdown.transformMarkdownTo('md文件内容')
+mindMap.setData(data)
+```
+
+### 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV81u20YQfpUN24JUoVAK0JMrB3YbB0gApYGTQ4EwhzW5kuiQu8TuypJhC0iDJkHaBsglPfXQQ4Oil7intnb7NvVf36KzfxRNUXUuQQ3bImdnvm925tsf7XnrRRHujIm34vVEzNNCIkHkuLge0TQvGJdoD3EyaCNG+2xMJUnaSIxwlrHJJhmgGRpwliMfEPwyop/SpI8LMxR5AswZuZqD9WqOi8iLKEIRzYhEyqY8VxEdZ1lEI9rpoJODv06evjn9/vnxn79FNGZUSGC/RYuxBMeAtNDqdbSnQBTEIM0ImEkoMR8SGap38aD70I1zMoThThSFgcjz/ami3N8WjO5PMzHdz5PWhx3lmw5QcAWcQ0mEDBRKSHFOWi1DhRDOCJeBf37w+z+PX5x++0sIcH8//ipUWOpTI+sHwFWfeWLm4LcMAIe6cpgiQjNHWKalQCCRpeQjTJOM3MtzPagBZ4hkgpQwmv5ShC+V13IMyPxSiI1pTLKlEPnlOfSrCUQUfk3bf/r67NWzalUvSqAsgRKBBljQwSbBCeFKTWSCbpaGQFPNHUIOH+viPpmaLOvDjGYMJ0pUO6A4y4GQ5Lvu0VAmWGLwun3vizthgbkgAQQ4HXIixpm0rTfdlrsFYQMTdmV1Fflsa5vE0i/ro1lGnE30BDY4ZzzwTRVOnj09eXt4+sOL84MDJygrJPUDa/YGwAYK247OUIxlPIIFo3AqHKqcDHqTsaEdswHNDdHCamqF1hLMH4tdGtdbUilWpVR4gtNyfzDIpnIaS3Vs3pCGSS2ZUvOEGmYC8m6aiFb0solA+NnrN3WsHPNHCZs0SrS/tCjvS6eG7N3UerEFbh6h5JiKAeN531rus/9Q83uRm9n2X/96+vKtK6jlUSteU5XzU8tJWULOmCzJ7HESQthNOE/q4tEb1aJrzU39c6M7KZmouROpelPN9PnR8R9HapNyqZKpOvvWxW2wqXxVrprLYRmHwFdBfhv6MyZt5Fb3q5dgGmBIsImnoMM6zV2qjjXNYqZUp4GYJhYHXx7nwSKGFabVSGArRrIVlLB4nBMqQ9DERkbU42e7t5LAt5GfMypxSgn3W20Tpeq6MhdD5ClD5FVMxixB5Moceac/Hp5/8+TsyaG5KGipWDDlGI/SLOGEKucHc4waXCNLnen46Luzo5/rZBcJG0j11WLR73/KwD1am4tLaSo3YW3cYQm5y0QqU0Yh0s/IQIIu/BhaB216qN1nrU9BFiCNXsfcAeH2By+SwMUNSwJvCPWSdAfFGRZiNfJsu2+QnEWeHrYOaTIfLcUALr0OjFYdHZJkLNvCysUMRrKX6pueOixhXG13kYfWtBHe7UWw9Ae4rbGUsObW4iyNH4FLdSWC34XV2usY78ujYYFVg2E51WLnU3JPvU6lYvAq5G5mirdmb8aRF3bMddhtwETkYSxE5EEH1K0YobBSXKeeSZrI0Qq61u1+pP0QKsqecgKM6Q7RA1oO6u+DehMc1DwQb8G+PJYmUJ0RA7mCuvZNsmL+skg/IulwBO6fdLvF1DE3835cbrlwlKTA61ALnCQpHTpDmXpoNfGOGV9zGdiky3cABD3rHnhtz3RAfQHRd0v4vqPhIzsAHSjXauTB1xmzQMMOPIYcdso0J6pZV7fgeibg8N2GCLvWGr7imNjFVqsod+55s38BRuykJA==" />
--- a/web/src/pages/Doc/zh/course17/index.vue
+++ b/web/src/pages/Doc/zh/course17/index.vue
@@ -1,8 +1,182 @@
 <template>
  <div>
    <h1>导入和导出</h1>
-<p>编写中。。。</p>
+<h2>导出</h2>
+<blockquote>
+<p>要使用导出功能需要使用导出插件。</p>
+</blockquote>
+<p>目前支持导出为<code>.smm</code>、<code>.json</code>、<code>.svg</code>、<code>.png</code>、<code>.pdf</code>、<code>.md</code>文件。</p>
+<p><code>.smm</code>是<code>simple-mind-map</code>自己定义的一种文件，其实就是<code>json</code>文件，换了一个扩展名而已。</p>
+<p>导出直接调用<code>export</code>方法即可。</p>
+<h3>导出为smm、json</h3>
+<p>这两种文件的导出是一样的：</p>
+<pre class="hljs"><code>mindMap.export(type, isDownload, fileName, withConfig)
+</code></pre>
+<p><code>withConfig</code>指定导出的数据中是否要包含节点数据外的配置数据，比如使用的布局、主题等，传<code>true</code>，导出的结构如下：</p>
+<pre class="hljs"><code>{
+    layout,
+    root,
+    <span class="hljs-attr">theme</span>: {
+        template,
+        config
+    },
+    view
+}
+</code></pre>
+<p>如果传<code>false</code>，导出的数据只有<code>root</code>部分，也就是纯节点树。</p>
+<p>示例：</p>
+<pre class="hljs"><code>mindMap.export(<span class="hljs-string">&#x27;smm&#x27;</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">&#x27;文件名&#x27;</span>, <span class="hljs-literal">true</span>)
+mindMap.export(<span class="hljs-string">&#x27;json&#x27;</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">&#x27;文件名&#x27;</span>, <span class="hljs-literal">false</span>)
+</code></pre>
+<h3>导出为png、pdf</h3>
+<p>导出这两种文件很简单：</p>
+<pre class="hljs"><code>mindMap.export(<span class="hljs-string">&#x27;png&#x27;</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">&#x27;文件名&#x27;</span>)
+mindMap.export(<span class="hljs-string">&#x27;pdf&#x27;</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">&#x27;文件名&#x27;</span>)
+</code></pre>
+<p>如果开启了节点富文本编辑，那么导出会非常慢，因为需要挨个转换节点，所以如果导出操作很频繁的话建议关闭节点非文本编辑功能。</p>
+<h3>导出为svg</h3>
+<p>导出为<code>svg</code>可以传递的参数如下：</p>
+<pre class="hljs"><code>mindMap.export(type, isDownload, fileName, domToImage = <span class="hljs-literal">false</span>, plusCssText = <span class="hljs-string">&#x27;&#x27;</span>)
+</code></pre>
+<p>如果开启了节点富文本编辑功能，那么可以通过<code>domToImage</code>参数控制导出的<code>svg</code>中是否保留<code>html</code>结构，还是转换成图片形式，同样，如果传了<code>true</code>，导出会非常耗时，建议导出为<code>svg</code>时<code>domToImage</code>传<code>false</code>。</p>
+<p>如果<code>domToImage</code>传的是<code>false</code>，也就是<code>svg</code>中会保留节点的<code>html</code>结构，这就又存在一个问题，因为浏览器对每个元素默认会设置一些样式，影响最大的就是<code>margin</code>和<code>padding</code>，这就有可能会导致节点中的文字错位，所以可以通过<code>plusCssText</code>参数传入<code>css</code>样式：</p>
+<pre class="hljs"><code>mindMap.export(
+    <span class="hljs-string">&#x27;svg&#x27;</span>, 
+    <span class="hljs-literal">true</span>, 
+    <span class="hljs-string">&#x27;文件名&#x27;</span>, 
+    <span class="hljs-literal">false</span>, 
+    <span class="hljs-string">`* {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }`</span>
+)
+</code></pre>
+<h3>导出为md</h3>
+<p>导出为<code>markdown</code>文件只要传递默认的三个参数即可：</p>
+<pre class="hljs"><code>mindMap.export(<span class="hljs-string">&#x27;md&#x27;</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">&#x27;文件名&#x27;</span>)
+</code></pre>
+<h2>导入</h2>
+<p>目前支持从<code>.smm</code>、<code>.json</code>、<code>.xmind</code>、<code>.xlsx</code>、<code>.md</code>格式的文件导入。</p>
+<h3>导入smm、json</h3>
+<p>这两个文件导入很简单，直接读取文件内容，转成对象，然后调用相关方法渲染到画布即可。</p>
+<p>因为导出这两种类型时可以选择是否包含配置数据，所以导入的时候调用的方法也是不一样的：</p>
+<pre class="hljs"><code><span class="hljs-keyword">let</span> data = <span class="hljs-built_in">JSON</span>.parse(<span class="hljs-string">&#x27;json数据&#x27;</span>)
+<span class="hljs-comment">// 如果数据中存在root属性，那么代表是包含配置的完整数据，则使用setFullData方法导入数据</span>
+<span class="hljs-keyword">if</span> (data.root) {
+    mindMap.setFullData(data)
+} <span class="hljs-keyword">else</span> {
+<span class="hljs-comment">// 否则使用setData方法导入</span>
+    mindMap.setData(data)
+}
+<span class="hljs-comment">// 导入数据后有可能新数据渲染在可视区域外了，所以为了更好的体验，可以复位一下视图的变换</span>
+mindMap.view.reset()
+</code></pre>
+<h3>导入xmind</h3>
+<p>要导入<code>xmind</code>文件，需要引入<code>xmind</code>的解析方法：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> xmind <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/parse/xmind.js&#x27;</span>
+</code></pre>
+<p>如果使用的是<code>umd</code>文件，可以这样获取：</p>
+<pre class="hljs"><code>MindMap.xmind
+</code></pre>
+<p>如果你是通过<code>input type=file</code>等方式获取到的<code>File</code>文件对象，那么可以直接传递给<code>parseXmindFile</code>方法解析，注意返回的是一个<code>Promise</code>实例，会返回解析后的节点树数据，使用<code>setData</code>方法渲染到画布即可。</p>
+<pre class="hljs"><code><span class="hljs-keyword">let</span> data = <span class="hljs-keyword">await</span> xmind.parseXmindFile(file)
+mindMap.setData(data)
+</code></pre>
+<p><code>.xmind</code>文件本质上是一个压缩包，改成<code>zip</code>后缀可以解压缩，里面存在一个<code>content.json</code>文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个<code>transformXmind</code>方法进行转换：</p>
+<pre class="hljs"><code><span class="hljs-keyword">let</span> data = <span class="hljs-keyword">await</span> xmind.transformXmind(fileContent)
+mindMap.setData(data)
+</code></pre>
+<p>另外如果导入的是<code>xmind8</code>版本的数据，需要使用<code>transformOldXmind</code>方法。</p>
+<h3>导入xlsx</h3>
+<p>这个文件的导入没有内置方法，需要你自己开发，以下是一个使用<code>xlsx</code>库的方式：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> { read, utils } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;xlsx&#x27;</span>

+<span class="hljs-comment">// 文件转buffer</span>
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> fileToBuffer = <span class="hljs-function"><span class="hljs-params">file</span> =&gt;</span> {
+  <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-params">r</span> =&gt;</span> {
+    <span class="hljs-keyword">const</span> reader = <span class="hljs-keyword">new</span> FileReader()
+    reader.onload = <span class="hljs-function">() =&gt;</span> {
+      r(reader.result)
+    }
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+<span class="hljs-comment">// File文件对象</span>
+<span class="hljs-keyword">const</span> transformXLSXToJson = <span class="hljs-keyword">async</span> (file) =&gt; {
+    <span class="hljs-keyword">const</span> wb = read(<span class="hljs-keyword">await</span> fileToBuffer(file))
+    <span class="hljs-keyword">const</span> data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[<span class="hljs-number">0</span>]], {
+        <span class="hljs-attr">header</span>: <span class="hljs-number">1</span>
+    })
+    <span class="hljs-keyword">if</span> (data.length &lt;= <span class="hljs-number">0</span>) {
+        <span class="hljs-keyword">return</span>
+    }
+    <span class="hljs-keyword">let</span> max = <span class="hljs-number">0</span>
+    data.forEach(<span class="hljs-function"><span class="hljs-params">arr</span> =&gt;</span> {
+        <span class="hljs-keyword">if</span> (arr.length &gt; max) {
+        max = arr.length
+        }
+    })
+    <span class="hljs-keyword">let</span> layers = []
+    <span class="hljs-keyword">let</span> walk = <span class="hljs-function"><span class="hljs-params">layer</span> =&gt;</span> {
+        <span class="hljs-keyword">if</span> (!layers[layer]) {
+        layers[layer] = []
+        }
+        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; data.length; i++) {
+        <span class="hljs-keyword">if</span> (data[i][layer]) {
+            <span class="hljs-keyword">let</span> node = {
+            <span class="hljs-attr">data</span>: {
+                <span class="hljs-attr">text</span>: data[i][layer]
+            },
+            <span class="hljs-attr">children</span>: [],
+            <span class="hljs-attr">_row</span>: i
+            }
+            layers[layer].push(node)
+        }
+        }
+        <span class="hljs-keyword">if</span> (layer &lt; max - <span class="hljs-number">1</span>) {
+        walk(layer + <span class="hljs-number">1</span>)
+        }
+    }
+    walk(<span class="hljs-number">0</span>)
+    <span class="hljs-keyword">let</span> getParent = <span class="hljs-function">(<span class="hljs-params">arr, row</span>) =&gt;</span> {
+        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = arr.length - <span class="hljs-number">1</span>; i &gt;= <span class="hljs-number">0</span>; i--) {
+        <span class="hljs-keyword">if</span> (row &gt;= arr[i]._row) {
+            <span class="hljs-keyword">return</span> arr[i]
+        }
+        }
+    }
+    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">1</span>; i &lt; layers.length; i++) {
+        <span class="hljs-keyword">let</span> arr = layers[i]
+        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> j = <span class="hljs-number">0</span>; j &lt; arr.length; j++) {
+        <span class="hljs-keyword">let</span> item = arr[j]
+        <span class="hljs-keyword">let</span> parent = getParent(layers[i - <span class="hljs-number">1</span>], item._row)
+        <span class="hljs-keyword">if</span> (parent) {
+            parent.children.push(item)
+        }
+        }
+    }
+
+    <span class="hljs-keyword">return</span> layers[<span class="hljs-number">0</span>][<span class="hljs-number">0</span>]
+}
+
+<span class="hljs-keyword">let</span> data = transformXLSXToJson(<span class="hljs-string">&#x27;xlsx文件对象&#x27;</span>)
+mindMap.setData(data)
+</code></pre>
+<h3>导入md</h3>
+<p>要导入<code>markdown</code>文件需要引入相应的解析方法：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> markdown <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/parse/markdown.js&#x27;</span>
+</code></pre>
+<p>如果使用的是umd格式的文件，那么可以通过如下方式获取：</p>
+<pre class="hljs"><code>MindMap.markdown
+</code></pre>
+<p>获取到<code>md</code>文件的内容后调用<code>transformMarkdownTo</code>方法转换即可，返回一个<code>Promise</code>实例：</p>
+<pre class="hljs"><code><span class="hljs-keyword">let</span> data = <span class="hljs-keyword">await</span> markdown.transformMarkdownTo(<span class="hljs-string">&#x27;md文件内容&#x27;</span>)
+mindMap.setData(data)
+</code></pre>
+<h3>完整示例</h3>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFV81u20YQfpUN24JUoVAK0JMrB3YbB0gApYGTQ4EwhzW5kuiQu8TuypJhC0iDJkHaBsglPfXQQ4Oil7intnb7NvVf36KzfxRNUXUuQQ3bImdnvm925tsf7XnrRRHujIm34vVEzNNCIkHkuLge0TQvGJdoD3EyaCNG+2xMJUnaSIxwlrHJJhmgGRpwliMfEPwyop/SpI8LMxR5AswZuZqD9WqOi8iLKEIRzYhEyqY8VxEdZ1lEI9rpoJODv06evjn9/vnxn79FNGZUSGC/RYuxBMeAtNDqdbSnQBTEIM0ImEkoMR8SGap38aD70I1zMoThThSFgcjz/ami3N8WjO5PMzHdz5PWhx3lmw5QcAWcQ0mEDBRKSHFOWi1DhRDOCJeBf37w+z+PX5x++0sIcH8//ipUWOpTI+sHwFWfeWLm4LcMAIe6cpgiQjNHWKalQCCRpeQjTJOM3MtzPagBZ4hkgpQwmv5ShC+V13IMyPxSiI1pTLKlEPnlOfSrCUQUfk3bf/r67NWzalUvSqAsgRKBBljQwSbBCeFKTWSCbpaGQFPNHUIOH+viPpmaLOvDjGYMJ0pUO6A4y4GQ5Lvu0VAmWGLwun3vizthgbkgAQQ4HXIixpm0rTfdlrsFYQMTdmV1Fflsa5vE0i/ro1lGnE30BDY4ZzzwTRVOnj09eXt4+sOL84MDJygrJPUDa/YGwAYK247OUIxlPIIFo3AqHKqcDHqTsaEdswHNDdHCamqF1hLMH4tdGtdbUilWpVR4gtNyfzDIpnIaS3Vs3pCGSS2ZUvOEGmYC8m6aiFb0solA+NnrN3WsHPNHCZs0SrS/tCjvS6eG7N3UerEFbh6h5JiKAeN531rus/9Q83uRm9n2X/96+vKtK6jlUSteU5XzU8tJWULOmCzJ7HESQthNOE/q4tEb1aJrzU39c6M7KZmouROpelPN9PnR8R9HapNyqZKpOvvWxW2wqXxVrprLYRmHwFdBfhv6MyZt5Fb3q5dgGmBIsImnoMM6zV2qjjXNYqZUp4GYJhYHXx7nwSKGFabVSGArRrIVlLB4nBMqQ9DERkbU42e7t5LAt5GfMypxSgn3W20Tpeq6MhdD5ClD5FVMxixB5Moceac/Hp5/8+TsyaG5KGipWDDlGI/SLOGEKucHc4waXCNLnen46Luzo5/rZBcJG0j11WLR73/KwD1am4tLaSo3YW3cYQm5y0QqU0Yh0s/IQIIu/BhaB216qN1nrU9BFiCNXsfcAeH2By+SwMUNSwJvCPWSdAfFGRZiNfJsu2+QnEWeHrYOaTIfLcUALr0OjFYdHZJkLNvCysUMRrKX6pueOixhXG13kYfWtBHe7UWw9Ae4rbGUsObW4iyNH4FLdSWC34XV2usY78ujYYFVg2E51WLnU3JPvU6lYvAq5G5mirdmb8aRF3bMddhtwETkYSxE5EEH1K0YobBSXKeeSZrI0Qq61u1+pP0QKsqecgKM6Q7RA1oO6u+DehMc1DwQb8G+PJYmUJ0RA7mCuvZNsmL+skg/IulwBO6fdLvF1DE3835cbrlwlKTA61ALnCQpHTpDmXpoNfGOGV9zGdiky3cABD3rHnhtz3RAfQHRd0v4vqPhIzsAHSjXauTB1xmzQMMOPIYcdso0J6pZV7fgeibg8N2GCLvWGr7imNjFVqsod+55s38BRuykJA==" />
  </div>
 </template>

--- a/web/src/pages/Doc/zh/course18/index.md
+++ b/web/src/pages/Doc/zh/course18/index.md
@@ -1,3 +1,102 @@
 # 如何持久化数据

-编写中。。。
+在线`demo`的数据是存储在电脑本地的，也就是`localStorage`里，当然，你也可以存储到数据库中。
+
+## 保存数据
+
+保存数据，一般有两种做法，一是让用户手动保存，二是当画布上的数据改变后自动保存，显然，第二中体验更好一点。
+
+要获取画布的数据，可以使用`getData`方法，可以传递一个参数，`true`指定返回的数据中包含配置数据，`false`指定只返回节点树数据。
+
+```js
+const data = mindMap.getData(true)
+```
+
+包含配置的完整数据结构：
+
+```js
+{
+    layout,
+    root,
+    theme: {
+        template,
+        config
+    },
+    view
+}
+```
+
+你可以直接把获取到的数据保存起来即可。
+
+如果要自动保存，那么肯定需要监听相关事件：
+
+```js
+this.$bus.$on('data_change', data => {
+    // 节点树数据改变
+    // data即完整数据中的root部分
+})
+this.$bus.$on('view_data_change', data => {
+    // 视图数据改变
+    // data即完整数据中的view部分
+})
+```
+
+主题和结构的改变一般是开发者提供一个ui界面让用户选择，所以可以自行触发保存。
+
+## 回显数据
+
+当从数据库获取到了保存的数据，那么怎么渲染到画布上呢，首先可以直接在`new`一个`MindMap`实例时直接传入：
+
+```js
+// 从数据中取出各个部分
+let { root, layout, theme, view } = storeData
+let mindMap = new MindMap({
+    el: container,
+    data: root,
+    layout: layout,
+    theme: theme.template,
+    themeConfig: theme.config,
+    viewData: view,
+    // ...
+})
+```
+
+其次如果是包含配置的完整数据也可以调用`setFullData`方法：
+
+```js
+mindMap.setFullData(data)
+```
+
+如果是纯节点数据可以调用`setData`方法：
+
+```js
+mindMap.setData(data)
+```
+
+修改结构可以调用`setLayout`方法：
+
+```js
+mindMap.setLayout(layout)
+```
+
+设置主题可以调用`setTheme`方法：
+
+```js
+mindMap.setTheme(theme)
+```
+
+设置主题配置可以调用`setThemeConfig`方法：
+
+```js
+mindMap.setThemeConfig(themeConfig)
+```
+
+设置视图数据可以调用`view.setTransformData`方法：
+
+```js
+mindMap.view.setTransformData(view)
+```
+
+### 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVc1u00AQfpXRIpQEpXYqcQpuVaAggdSCypHtYWNvkoX1ruVdN42qXHpEBU7lzI1bxQEJtc9D0z4Gs/6Lm0QIiQOWLO3OzPd945md9Ql5nCTeUcZJnwQmTEViwXCbJdtUiTjRqYUTSPmwC1rt6UxZHnXBjJmUenLAhzCDYapjaCFDq0bsCRXtsaRwUWLQLPlGjNaNmCWUUAVAleQWnM1FboHKpKSKKt+H208/rz9/ub44m5//mJ9/n3+8oCrUylgYcfsc43aZZQhhZqpCaHdgaxtOHCeTPLXtl29e7XvGpkKNxHDaLiU8xDpc26YZ73Q6VM3uyN1+OL05vVyR+yepIZOmoVVXsN0galSAT6rKtXMXAJd9iHSYxVxZx/pMcrd8Mn0RtVsl8qlWlgnF01anW6Ai1O4X7O6hxBkoaZgKs+XH1pkpmX+9LL6/6I17ZiWZCwzHQkYpVy747YJjiW6tyrLSr6uzm6tvy2J3BdeIHi58zbj/lEG1LG0VTihhD7S2+zrir7URVmiFyJbkQ9vqQivE1mGbDvPwWecRHgs8GoFfjB0OHG4sx1lhluMOIIjEEYSSGbNFSdnuXR5rSnJ3GSCihbc+DBgS+OhtBlZMVms5YC6k+pBgkFmrFeyEUoTvMaQxaBi2OpCBXyD+yHAH3ZyvJfQi0WoV+I064NbYqSxKslNeMZR4fnGvlCPjcRN7oTGUYF3d9QLgNUpWnYmJiOy4D5u93v08DiCpO5VyVBRHPHfkTXbvveXSVlQLIBsYLTNbAAFcv/vQK3dWJ4vNqvyYi9EYwx/2eslxpbxe90GlHLN0JFC3Yk1YFOEVVBnq1L2y03+Z8WaVQZl0vUdCPKV5D0iXFB1wN7n3zmiFP46cnpYO7EA9gZTgf6EYO8/HpZfi/Sdi7pq1MUj1xPAUSSgpJ2jNv6LArrbaocrcZmT2G71jRY0=" />
--- a/web/src/pages/Doc/zh/course18/index.vue
+++ b/web/src/pages/Doc/zh/course18/index.vue
@@ -1,8 +1,69 @@
 <template>
  <div>
    <h1>如何持久化数据</h1>
-<p>编写中。。。</p>
-
+<p>在线<code>demo</code>的数据是存储在电脑本地的，也就是<code>localStorage</code>里，当然，你也可以存储到数据库中。</p>
+<h2>保存数据</h2>
+<p>保存数据，一般有两种做法，一是让用户手动保存，二是当画布上的数据改变后自动保存，显然，第二中体验更好一点。</p>
+<p>要获取画布的数据，可以使用<code>getData</code>方法，可以传递一个参数，<code>true</code>指定返回的数据中包含配置数据，<code>false</code>指定只返回节点树数据。</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> data = mindMap.getData(<span class="hljs-literal">true</span>)
+</code></pre>
+<p>包含配置的完整数据结构：</p>
+<pre class="hljs"><code>{
+    layout,
+    root,
+    <span class="hljs-attr">theme</span>: {
+        template,
+        config
+    },
+    view
+}
+</code></pre>
+<p>你可以直接把获取到的数据保存起来即可。</p>
+<p>如果要自动保存，那么肯定需要监听相关事件：</p>
+<pre class="hljs"><code><span class="hljs-built_in">this</span>.$bus.$on(<span class="hljs-string">&#x27;data_change&#x27;</span>, <span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
+    <span class="hljs-comment">// 节点树数据改变</span>
+    <span class="hljs-comment">// data即完整数据中的root部分</span>
+})
+<span class="hljs-built_in">this</span>.$bus.$on(<span class="hljs-string">&#x27;view_data_change&#x27;</span>, <span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
+    <span class="hljs-comment">// 视图数据改变</span>
+    <span class="hljs-comment">// data即完整数据中的view部分</span>
+})
+</code></pre>
+<p>主题和结构的改变一般是开发者提供一个ui界面让用户选择，所以可以自行触发保存。</p>
+<h2>回显数据</h2>
+<p>当从数据库获取到了保存的数据，那么怎么渲染到画布上呢，首先可以直接在<code>new</code>一个<code>MindMap</code>实例时直接传入：</p>
+<pre class="hljs"><code><span class="hljs-comment">// 从数据中取出各个部分</span>
+<span class="hljs-keyword">let</span> { root, layout, theme, view } = storeData
+<span class="hljs-keyword">let</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-attr">el</span>: container,
+    <span class="hljs-attr">data</span>: root,
+    <span class="hljs-attr">layout</span>: layout,
+    <span class="hljs-attr">theme</span>: theme.template,
+    <span class="hljs-attr">themeConfig</span>: theme.config,
+    <span class="hljs-attr">viewData</span>: view,
+    <span class="hljs-comment">// ...</span>
+})
+</code></pre>
+<p>其次如果是包含配置的完整数据也可以调用<code>setFullData</code>方法：</p>
+<pre class="hljs"><code>mindMap.setFullData(data)
+</code></pre>
+<p>如果是纯节点数据可以调用<code>setData</code>方法：</p>
+<pre class="hljs"><code>mindMap.setData(data)
+</code></pre>
+<p>修改结构可以调用<code>setLayout</code>方法：</p>
+<pre class="hljs"><code>mindMap.setLayout(layout)
+</code></pre>
+<p>设置主题可以调用<code>setTheme</code>方法：</p>
+<pre class="hljs"><code>mindMap.setTheme(theme)
+</code></pre>
+<p>设置主题配置可以调用<code>setThemeConfig</code>方法：</p>
+<pre class="hljs"><code>mindMap.setThemeConfig(themeConfig)
+</code></pre>
+<p>设置视图数据可以调用<code>view.setTransformData</code>方法：</p>
+<pre class="hljs"><code>mindMap.view.setTransformData(view)
+</code></pre>
+<h3>完整示例</h3>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVc1u00AQfpXRIpQEpXYqcQpuVaAggdSCypHtYWNvkoX1ruVdN42qXHpEBU7lzI1bxQEJtc9D0z4Gs/6Lm0QIiQOWLO3OzPd945md9Ql5nCTeUcZJnwQmTEViwXCbJdtUiTjRqYUTSPmwC1rt6UxZHnXBjJmUenLAhzCDYapjaCFDq0bsCRXtsaRwUWLQLPlGjNaNmCWUUAVAleQWnM1FboHKpKSKKt+H208/rz9/ub44m5//mJ9/n3+8oCrUylgYcfsc43aZZQhhZqpCaHdgaxtOHCeTPLXtl29e7XvGpkKNxHDaLiU8xDpc26YZ73Q6VM3uyN1+OL05vVyR+yepIZOmoVVXsN0galSAT6rKtXMXAJd9iHSYxVxZx/pMcrd8Mn0RtVsl8qlWlgnF01anW6Ai1O4X7O6hxBkoaZgKs+XH1pkpmX+9LL6/6I17ZiWZCwzHQkYpVy747YJjiW6tyrLSr6uzm6tvy2J3BdeIHi58zbj/lEG1LG0VTihhD7S2+zrir7URVmiFyJbkQ9vqQivE1mGbDvPwWecRHgs8GoFfjB0OHG4sx1lhluMOIIjEEYSSGbNFSdnuXR5rSnJ3GSCihbc+DBgS+OhtBlZMVms5YC6k+pBgkFmrFeyEUoTvMaQxaBi2OpCBXyD+yHAH3ZyvJfQi0WoV+I064NbYqSxKslNeMZR4fnGvlCPjcRN7oTGUYF3d9QLgNUpWnYmJiOy4D5u93v08DiCpO5VyVBRHPHfkTXbvveXSVlQLIBsYLTNbAAFcv/vQK3dWJ4vNqvyYi9EYwx/2eslxpbxe90GlHLN0JFC3Yk1YFOEVVBnq1L2y03+Z8WaVQZl0vUdCPKV5D0iXFB1wN7n3zmiFP46cnpYO7EA9gZTgf6EYO8/HpZfi/Sdi7pq1MUj1xPAUSSgpJ2jNv6LArrbaocrcZmT2G71jRY0=" />
  </div>
 </template>

--- a/web/src/pages/Doc/zh/deploy/index.md
+++ b/web/src/pages/Doc/zh/deploy/index.md
@@ -0,0 +1,66 @@
+# 部署
+
+本项目的`web`目录下提供了一个基于`simple-mind-map`库、`Vue2.x`、`ElementUI`开发的完整项目，数据默认存储在电脑本地，此外可以操作电脑本地文件，原意是作为一个线上`demo`，但是也完全可以直接把它当做一个在线版思维导图应用使用，在线地址：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)。
+
+如果你的网络环境访问`GitHub`服务很慢，你也可以部署到你的服务器上。
+
+## 部署到静态文件服务器
+
+项目本身不依赖后端，所以完全可以部署到一个静态文件服务器上，可以依次执行如下命令：
+
+```bash
+git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+```
+
+然后你可以选择启动本地服务：
+
+```bash
+npm run serve
+```
+
+也可以直接打包生成构建产物：
+
+```bash
+npm run build
+```
+
+打包完后的入口页面`index.html`可以在项目根目录找到，对应的静态资源在根目录下的`dist`目录，`html`文件中会通过相对路径访问`dist`目录的资源，比如`dist/xxx`。你可以直接把这两个文件或目录上传到你的静态文件服务器，事实上，本项目就是这样部署到`GitHub Pages`上的。
+
+如果你没有代码修改需求的话，直接从本仓库复制这些文件也是可以的。
+
+如果你想把`index.html`也打包进`dist`目录，可以修改`web/package.json`文件的`scripts.build`命令，把`vue-cli-service build && node ../copy.js`中的` && node ../copy.js`删除即可。
+
+如果你想修改打包输出的目录，可以修改`web/vue.config.js`文件的`outputDir`配置，改成你想要输出的路径即可。
+
+如果你想修改`index.html`文件引用静态资源的路径的话可以修改`web/vue.config.js`文件的`publicPath`配置。
+
+另外默认使用的是`hash`路由，也就是路径中会在`#`，如果你想使用`history`路由，可以修改`web/src/router.js`文件，将：
+
+```js
+const router = new VueRouter({
+  routes
+})
+```
+
+改成：
+
+```js
+const router = new VueRouter({
+  mode: 'history',
+  routes
+})
+```
+
+不过这需要后台支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问子路由时会返回404，所以呢你要在服务端增加一个覆盖所有情况的候选资源：如果`URL`匹配不到任何静态资源，则应该返回同一个`index.html`页面。
+
+## Docker
+
+编写中。。。
--- a/web/src/pages/Doc/zh/deploy/index.vue
+++ b/web/src/pages/Doc/zh/deploy/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <h1>部署</h1>
+<p>本项目的<code>web</code>目录下提供了一个基于<code>simple-mind-map</code>库、<code>Vue2.x</code>、<code>ElementUI</code>开发的完整项目，数据默认存储在电脑本地，此外可以操作电脑本地文件，原意是作为一个线上<code>demo</code>，但是也完全可以直接把它当做一个在线版思维导图应用使用，在线地址：<a href="https://wanglin2.github.io/mind-map/">https://wanglin2.github.io/mind-map/</a>。</p>
+<p>如果你的网络环境访问<code>GitHub</code>服务很慢，你也可以部署到你的服务器上。</p>
+<h2>部署到静态文件服务器</h2>
+<p>项目本身不依赖后端，所以完全可以部署到一个静态文件服务器上，可以依次执行如下命令：</p>
+<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
+<span class="hljs-built_in">cd</span> mind-map
+<span class="hljs-built_in">cd</span> simple-mind-map
+npm i
+npm link
+<span class="hljs-built_in">cd</span> ..
+<span class="hljs-built_in">cd</span> web
+npm i
+npm link simple-mind-map
+</code></pre>
+<p>然后你可以选择启动本地服务：</p>
+<pre class="hljs"><code>npm run serve
+</code></pre>
+<p>也可以直接打包生成构建产物：</p>
+<pre class="hljs"><code>npm run build
+</code></pre>
+<p>打包完后的入口页面<code>index.html</code>可以在项目根目录找到，对应的静态资源在根目录下的<code>dist</code>目录，<code>html</code>文件中会通过相对路径访问<code>dist</code>目录的资源，比如<code>dist/xxx</code>。你可以直接把这两个文件或目录上传到你的静态文件服务器，事实上，本项目就是这样部署到<code>GitHub Pages</code>上的。</p>
+<p>如果你没有代码修改需求的话，直接从本仓库复制这些文件也是可以的。</p>
+<p>如果你想把<code>index.html</code>也打包进<code>dist</code>目录，可以修改<code>web/package.json</code>文件的<code>scripts.build</code>命令，把<code>vue-cli-service build &amp;&amp; node ../copy.js</code>中的<code> &amp;&amp; node ../copy.js</code>删除即可。</p>
+<p>如果你想修改打包输出的目录，可以修改<code>web/vue.config.js</code>文件的<code>outputDir</code>配置，改成你想要输出的路径即可。</p>
+<p>如果你想修改<code>index.html</code>文件引用静态资源的路径的话可以修改<code>web/vue.config.js</code>文件的<code>publicPath</code>配置。</p>
+<p>另外默认使用的是<code>hash</code>路由，也就是路径中会在<code>#</code>，如果你想使用<code>history</code>路由，可以修改<code>web/src/router.js</code>文件，将：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({
+  routes
+})
+</code></pre>
+<p>改成：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({
+  <span class="hljs-attr">mode</span>: <span class="hljs-string">&#x27;history&#x27;</span>,
+  routes
+})
+</code></pre>
+<p>不过这需要后台支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问子路由时会返回404，所以呢你要在服务端增加一个覆盖所有情况的候选资源：如果<code>URL</code>匹配不到任何静态资源，则应该返回同一个<code>index.html</code>页面。</p>
+<h2>Docker</h2>
+<p>编写中。。。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -99,4 +99,11 @@

 <img src="../../../../assets/img/alipay.jpg" style="width: 300px" />

-<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+
+<div  style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/Think.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>Think</p>
+    </div>
+</div>
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -7,19 +7,19 @@
 </blockquote>
 <h2>特性</h2>
 <ul>
-<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
-<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构</label></li>
-<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
-<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">支持快捷键</label></li>
-<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">支持前进后退</label></li>
-<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">支持拖动、缩放</label></li>
-<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持右键和Ctrl+左键两种多选方式</label></li>
-<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">支持节点自由拖拽、拖拽调整</label></li>
-<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">支持多种节点形状</label></li>
-<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
-<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">支持小地图、支持水印</label></li>
-<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">支持关联线</label></li>
+<li><input type="checkbox" id="checkbox216" checked="true" /><label for="checkbox216">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
+<li><input type="checkbox" id="checkbox217" checked="true" /><label for="checkbox217">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构</label></li>
+<li><input type="checkbox" id="checkbox218" checked="true" /><label for="checkbox218">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox219" checked="true" /><label for="checkbox219">支持快捷键</label></li>
+<li><input type="checkbox" id="checkbox220" checked="true" /><label for="checkbox220">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox221" checked="true" /><label for="checkbox221">支持前进后退</label></li>
+<li><input type="checkbox" id="checkbox222" checked="true" /><label for="checkbox222">支持拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox223" checked="true" /><label for="checkbox223">支持右键和Ctrl+左键两种多选方式</label></li>
+<li><input type="checkbox" id="checkbox224" checked="true" /><label for="checkbox224">支持节点自由拖拽、拖拽调整</label></li>
+<li><input type="checkbox" id="checkbox225" checked="true" /><label for="checkbox225">支持多种节点形状</label></li>
+<li><input type="checkbox" id="checkbox226" checked="true" /><label for="checkbox226">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
+<li><input type="checkbox" id="checkbox227" checked="true" /><label for="checkbox227">支持小地图、支持水印</label></li>
+<li><input type="checkbox" id="checkbox228" checked="true" /><label for="checkbox228">支持关联线</label></li>
 </ul>
 <h2>仓库目录介绍</h2>
 <p>1.<code>simple-mind-map</code></p>
@@ -27,11 +27,11 @@
 <p>2.<code>web</code></p>
 <p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
 <ul>
-<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
-<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
-<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">右键菜单，支持展开、收起、整理布局等操作</label></li>
-<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
+<li><input type="checkbox" id="checkbox229" checked="true" /><label for="checkbox229">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox230" checked="true" /><label for="checkbox230">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox231" checked="true" /><label for="checkbox231">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox232" checked="true" /><label for="checkbox232">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox233" checked="true" /><label for="checkbox233">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
 <p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
@@ -67,6 +67,12 @@
 </blockquote>
 <img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
 <img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
+<div  style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/Think.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>Think</p>
+    </div>
+</div>
  </div>
 </template>

--- a/web/src/pages/Doc/zh/xmind/index.md
+++ b/web/src/pages/Doc/zh/xmind/index.md
@@ -24,13 +24,13 @@ MindMap.xmind

 ### xmind.parseXmindFile(file)

-解析`.xmind`文件，返回解析后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用`mindMap.setFullData(data)`来将返回的数据渲染到画布上
+解析`.xmind`文件，返回解析后的数据，可以使用`mindMap.setData(data)`来将返回的数据渲染到画布上

 `file`：`File`对象

 ### xmind.transformXmind(content)

-转换`xmind`数据，`.xmind`文件本质上是一个压缩包，改成`zip`后缀可以解压缩，里面存在一个`content.json`文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用`mindMap.setFullData(data)`来将返回的数据渲染到画布上
+转换`xmind`数据，`.xmind`文件本质上是一个压缩包，改成`zip`后缀可以解压缩，里面存在一个`content.json`文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，可以使用`mindMap.setData(data)`来将返回的数据渲染到画布上

 `content`：`.xmind`压缩包内的`content.json`文件内容

--- a/web/src/pages/Doc/zh/xmind/index.vue
+++ b/web/src/pages/Doc/zh/xmind/index.vue
@@ -15,10 +15,10 @@
 </code></pre>
 <h2>方法</h2>
 <h3>xmind.parseXmindFile(file)</h3>
-<p>解析<code>.xmind</code>文件，返回解析后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用<code>mindMap.setFullData(data)</code>来将返回的数据渲染到画布上</p>
+<p>解析<code>.xmind</code>文件，返回解析后的数据，可以使用<code>mindMap.setData(data)</code>来将返回的数据渲染到画布上</p>
 <p><code>file</code>：<code>File</code>对象</p>
 <h3>xmind.transformXmind(content)</h3>
-<p>转换<code>xmind</code>数据，<code>.xmind</code>文件本质上是一个压缩包，改成<code>zip</code>后缀可以解压缩，里面存在一个<code>content.json</code>文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用<code>mindMap.setFullData(data)</code>来将返回的数据渲染到画布上</p>
+<p>转换<code>xmind</code>数据，<code>.xmind</code>文件本质上是一个压缩包，改成<code>zip</code>后缀可以解压缩，里面存在一个<code>content.json</code>文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，可以使用<code>mindMap.setData(data)</code>来将返回的数据渲染到画布上</p>
 <p><code>content</code>：<code>.xmind</code>压缩包内的<code>content.json</code>文件内容</p>
 <h3>xmind.transformOldXmind(content)</h3>
 <blockquote>
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@@ -13,7 +13,7 @@
        {{ $t('contextmenu.insertSiblingNode') }}
        <span class="desc">Enter</span>
      </div>
-      <div class="item" @click="exec('INSERT_CHILD_NODE')">
+      <div class="item" @click="exec('INSERT_CHILD_NODE')" :class="{ disabled: isGeneralization }">
        {{ $t('contextmenu.insertChildNode') }}
        <span class="desc">Tab</span>
      </div>
@@ -45,11 +45,11 @@
        {{ $t('contextmenu.deleteNode') }}
        <span class="desc">Delete</span>
      </div>
-      <div class="item" @click="exec('COPY_NODE')">
+      <div class="item" @click="exec('COPY_NODE')" :class="{ disabled: isGeneralization }">
        {{ $t('contextmenu.copyNode') }}
        <span class="desc">Ctrl + C</span>
      </div>
-      <div class="item" @click="exec('CUT_NODE')">
+      <div class="item" @click="exec('CUT_NODE')" :class="{ disabled: isGeneralization }">
        {{ $t('contextmenu.cutNode') }}
        <span class="desc">Ctrl + X</span>
      </div>
@@ -140,10 +140,10 @@ export default {
      ]
    },
    insertNodeBtnDisabled() {
-      return !this.node || this.node.isRoot
+      return !this.node || this.node.isRoot || this.node.isGeneralization
    },
    upNodeBtnDisabled() {
-      if (!this.node || this.node.isRoot) {
+      if (!this.node || this.node.isRoot || this.node.isGeneralization) {
        return true
      }
      let isFirst =
@@ -153,7 +153,7 @@ export default {
      return isFirst
    },
    downNodeBtnDisabled() {
-      if (!this.node || this.node.isRoot) {
+      if (!this.node || this.node.isRoot || this.node.isGeneralization) {
        return true
      }
      let children = this.node.parent.children
@@ -163,6 +163,9 @@ export default {
        }) ===
        children.length - 1
      return isLast
+    },
+    isGeneralization() {
+      return this.node.isGeneralization
    }
  },
  created() {
--- a/web/src/pages/Edit/components/Count.vue
+++ b/web/src/pages/Edit/components/Count.vue
@@ -17,11 +17,14 @@
 * @Date: 2021-06-24 22:53:10
 * @Desc: 字数及节点数量统计
 */
+
+let countEl = document.createElement('div')
 export default {
  name: 'Count',
  props: {},
  data() {
    return {
+      textStr: '',
      words: 0,
      num: 0
    }
@@ -39,9 +42,12 @@ export default {
     * @Desc: 监听数据变化
     */
    onDataChange(data) {
+      this.textStr = ''
      this.words = 0
      this.num = 0
      this.walk(data)
+      countEl.innerHTML = this.textStr
+      this.words = countEl.textContent.length
    },

    /**
@@ -51,7 +57,7 @@ export default {
     */
    walk(data) {
      this.num++
-      this.words += (String(data.data.text) || '').length
+      this.textStr += String(data.data.text) || ''
      if (data.children && data.children.length > 0) {
        data.children.forEach(item => {
          this.walk(item)
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -111,10 +111,11 @@ export default {
    }
  },
  mounted() {
-    this.showNewFeatureInfo()
+    // this.showNewFeatureInfo()
    this.getData()
    this.init()
    this.$bus.$on('execCommand', this.execCommand)
+    this.$bus.$on('paddingChange', this.onPaddingChange)
    this.$bus.$on('export', this.export)
    this.$bus.$on('setData', this.setData)
    this.$bus.$on('startTextEdit', () => {
@@ -276,6 +277,8 @@ export default {
        theme: theme.template,
        themeConfig: theme.config,
        viewData: view,
+        nodeTextEditZIndex: 1000,
+        nodeNoteTooltipZIndex: 1000,
        customNoteContentShow: {
          show: (content, left, top) => {
            this.$bus.$emit('showNoteContent', content, left, top)
@@ -305,7 +308,8 @@ export default {
        'mode_change',
        'node_tree_render_end',
        'rich_text_selection_change',
-        'transforming-dom-to-images'
+        'transforming-dom-to-images',
+        'generalization_node_contextmenu'
      ].forEach(event => {
        this.mindMap.on(event, (...args) => {
          this.$bus.$emit(event, ...args)
@@ -374,6 +378,11 @@ export default {
      }
    },

+    // 修改导出内边距
+    onPaddingChange(data) {
+      this.mindMap.updateConfig(data)
+    },
+
    // 显示新特性提示
    showNewFeatureInfo() {
      let showed = localStorage.getItem('SIMPLE_MIND_MAP_NEW_FEATURE_TIP_1')
--- a/web/src/pages/Edit/components/Export.vue
+++ b/web/src/pages/Edit/components/Export.vue
@@ -30,6 +30,22 @@
          >{{ $t('export.domToImage') }}</el-checkbox
        >
      </div>
+      <div class="paddingInputBox" v-show="['svg', 'png', 'pdf'].includes(exportType)">
+        <span class="name">{{ $t('export.paddingX') }}</span>
+        <el-input
+          style="width: 100px"
+          v-model="paddingX"
+          size="mini"
+          @change="onPaddingChange"
+        ></el-input>
+        <span class="name" style="margin-left: 10px;">{{ $t('export.paddingY') }}</span>
+        <el-input
+          style="width: 100px"
+          v-model="paddingY"
+          size="mini"
+          @change="onPaddingChange"
+        ></el-input>
+      </div>
      <div class="downloadTypeList">
        <div 
          class="downloadTypeItem" 
@@ -77,7 +93,9 @@ export default {
      widthConfig: true,
      domToImage: false,
      loading: false,
-      loadingText: ''
+      loadingText: '',
+      paddingX: 10,
+      paddingY: 10
    }
  },
  computed: {
@@ -102,6 +120,13 @@ export default {
    })
  },
  methods: {
+    onPaddingChange() {
+      this.$bus.$emit('paddingChange', {
+        exportPaddingX: Number(this.paddingX),
+        exportPaddingY: Number(this.paddingY)
+      })
+    },
+
    /**
     * @Author: 王林
     * @Date: 2021-06-22 22:08:11
@@ -163,6 +188,14 @@ export default {
    }
  }

+  .paddingInputBox {
+    margin-bottom: 10px;
+
+    .name {
+      margin-right: 10px;
+    }
+  }
+
  .tip {
    margin-top: 10px;

--- a/web/src/pages/Edit/components/Import.vue
+++ b/web/src/pages/Edit/components/Import.vue
@@ -150,6 +150,7 @@ export default {
    async handleXmind(file) {
      try {
        let data = await xmind.parseXmindFile(file.raw)
+        console.log(data);
        this.$bus.$emit('setData', data)
        this.$message.success('导入成功')
      } catch (error) {
Author	SHA1	Message	Date
wanglin2	fc1ba24834	更新群二维码	2023-04-21 10:08:49 +08:00
wanglin2	cf16937160	Merge branch 'feature' into main	2023-04-21 10:08:11 +08:00
wanglin2	c3393abed6	打包0.5.6	2023-04-21 10:07:08 +08:00
wanglin2	2abff3e21b	Demo：关闭新特性提示	2023-04-21 09:56:14 +08:00
wanglin2	e39a94c5e2	优化节点富文本编辑	2023-04-21 09:55:29 +08:00
wanglin2	a6fff7f7a3	Demo：修复节点文字数量计数不正确的问题	2023-04-21 09:37:49 +08:00
wanglin2	e584081b41	更新文档	2023-04-21 09:32:36 +08:00
wanglin2	b91dde8084	更新文档	2023-04-20 16:31:28 +08:00
wanglin2	077478d654	Feature：添加最大历史记录数限制	2023-04-20 16:10:25 +08:00
wanglin2	2be97cc1a0	Fix：修复节点正在编辑中时拖动画布导致编辑框和节点分离的问题	2023-04-20 15:29:16 +08:00
wanglin2	0f7dc949a4	优化富文本编辑	2023-04-20 09:40:47 +08:00
wanglin2	c7e91cc9eb	Fix：修复短时间快速多次渲染时节点位置错乱的问题	2023-04-20 08:31:47 +08:00
wanglin2	6eacfab9c2	Demo：支持右键删除概要节点	2023-04-19 16:07:52 +08:00
wanglin2	e36a408275	Fix：修复快速多次渲染时节点位置错乱的问题	2023-04-19 15:45:51 +08:00
wanglin2	abda5b7d06	Merge branch 'feature' into main	2023-04-19 09:41:17 +08:00
wanglin2	f815f71dd7	更新文档	2023-04-19 09:40:58 +08:00
wanglin2	fa2c5b420c	Merge branch 'feature' into main	2023-04-19 08:36:50 +08:00
wanglin2	4c19bc76a7	打包0.5.5-fix.1，修复小地图报错	2023-04-19 08:35:58 +08:00
wanglin2	d08a317920	Merge branch 'feature' into main	2023-04-18 17:38:38 +08:00
wanglin2	bd805836cd	打包0.5.5-fix.1	2023-04-18 17:37:10 +08:00
wanglin2	e804a8f2f7	Demo：修复富文本编辑时工具栏层级比节点编辑框低的问题	2023-04-18 17:19:43 +08:00
wanglin2	8bf876d446	优化：多选节点时改为节点只要和选区重叠就算被选中	2023-04-18 17:11:40 +08:00
wanglin2	f2521f663e	优化：切换结构时重置画布缩放，以修复当存在缩放时切换结构后第一次拖动会突变的问题	2023-04-18 16:59:12 +08:00
wanglin2	e676bff453	优化：当编辑节点文本时节点在画布外时移入画布内	2023-04-18 16:40:25 +08:00
wanglin2	8f2cc72d3c	Merge branch 'feature' into main	2023-04-18 09:54:45 +08:00
wanglin2	ec22656bee	打包0.5.5	2023-04-18 09:52:15 +08:00
wanglin2	4acf8ba2ac	更新文档	2023-04-18 09:45:40 +08:00
wanglin2	d45a18904e	Feature：1.支持配置节点文本编辑框、节点备注浮层的z-index。2.支持点击画布区域外结束节点编辑状态	2023-04-18 09:45:29 +08:00
wanglin2	9fc2dbabd4	Feature：支持配置导出为png、svg、pdf时的内边距。	2023-04-18 09:04:16 +08:00