Merge branch 'main' into main

simple-mind-map/package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "simple-mind-map",
-  "version": "0.6.11-fix.1",
+  "version": "0.6.12",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.6.11-fix.1",
+      "version": "0.6.12",
       "license": "MIT",
       "dependencies": {
         "@svgdotjs/svg.js": "^3.0.16",
         "deepmerge": "^1.5.2",
+        "dom-to-image-more": "^3.1.6",
         "eventemitter3": "^4.0.7",
-        "html2canvas": "^1.4.1",
         "jspdf": "^2.5.1",
         "jszip": "^3.10.1",
         "mdast-util-from-markdown": "^1.3.0",
@@ -255,6 +255,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
       "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -411,6 +412,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
       "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
       "dependencies": {
         "utrie": "^1.0.2"
       }
@@ -516,6 +518,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-to-image-more": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.1.6.tgz",
+      "integrity": "sha512-VMO0jNme32T06mWtkOC9QXfj+1npoJxkaTFW0DCwBLguwBKMjqwndiDANxDnbZ0kvNEecwxkv0Zmgdr96cGtAA=="
+    },
     "node_modules/dompurify": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.1.tgz",
@@ -937,6 +944,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
       "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
       "dependencies": {
         "css-line-break": "^2.1.0",
         "text-segmentation": "^1.0.3"
@@ -2142,6 +2150,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
       "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
       "dependencies": {
         "utrie": "^1.0.2"
       }
@@ -2206,6 +2215,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
       "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
       "dependencies": {
         "base64-arraybuffer": "^1.0.2"
       }
@@ -2461,7 +2471,8 @@
     "base64-arraybuffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
-      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -2576,6 +2587,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
       "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
       "requires": {
         "utrie": "^1.0.2"
       }
@@ -2648,6 +2660,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-to-image-more": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.1.6.tgz",
+      "integrity": "sha512-VMO0jNme32T06mWtkOC9QXfj+1npoJxkaTFW0DCwBLguwBKMjqwndiDANxDnbZ0kvNEecwxkv0Zmgdr96cGtAA=="
+    },
     "dompurify": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.1.tgz",
@@ -2966,6 +2983,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
       "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
       "requires": {
         "css-line-break": "^2.1.0",
         "text-segmentation": "^1.0.3"
@@ -3749,6 +3767,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
       "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
       "requires": {
         "utrie": "^1.0.2"
       }
@@ -3800,6 +3819,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
       "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
       "requires": {
         "base64-arraybuffer": "^1.0.2"
       }

simple-mind-map/package.json

@@ -26,8 +26,8 @@
   "dependencies": {
     "@svgdotjs/svg.js": "^3.0.16",
     "deepmerge": "^1.5.2",
+    "dom-to-image-more": "^3.1.6",
     "eventemitter3": "^4.0.7",
-    "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
     "mdast-util-from-markdown": "^1.3.0",

simple-mind-map/src/constants/defaultOptions.js

@@ -126,5 +126,10 @@ export const defaultOpt = {
   // 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下
   customInnerElsAppendTo: null,
   // 拖拽元素时，指示元素新位置的块的最大高度
-  nodeDragPlaceholderMaxSize: 20
+  nodeDragPlaceholderMaxSize: 20,
+  // 是否允许创建一个隐藏的输入框，该输入框会在节点激活时聚焦，用于粘贴数据和自动进入文本编辑状态
+  enableCreateHiddenInput: true,
+  // 是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式
+  // 该配置在enableCreateHiddenInput设为true时生效
+  enableAutoEnterTextEditWhenKeydown: true
 }

simple-mind-map/src/core/command/KeyCommand.js

@@ -108,6 +108,11 @@ export default class KeyCommand {
     return arr
   }
 
+  // 判断是否按下了组合键
+  hasCombinationKey(e) {
+    return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey
+  }
+
   //  获取快捷键对应的键值数组
   getKeyCodeArr(key) {
     let keyArr = key.split(/\s*\+\s*/)

simple-mind-map/src/core/render/TextEdit.js

@@ -1,4 +1,4 @@
-import { getStrWithBrFromHtml, checkNodeOuter } from '../../utils'
+import { getStrWithBrFromHtml, checkNodeOuter, isMobile } from '../../utils'
 
 //  节点文字编辑类
 export default class TextEdit {
@@ -67,7 +67,9 @@ export default class TextEdit {
 
   // 创建一个隐藏的文本输入框
   createHiddenInput() {
-    if (this.hiddenInputEl) return
+    const { enableCreateHiddenInput, enableAutoEnterTextEditWhenKeydown } =
+      this.mindMap.opt
+    if (this.hiddenInputEl || isMobile() || !enableCreateHiddenInput) return
     this.hiddenInputEl = document.createElement('input')
     this.hiddenInputEl.type = 'text'
     this.hiddenInputEl.style.cssText = `
@@ -75,6 +77,25 @@ export default class TextEdit {
       left: -99999px;
       top: -99999px;
     `
+    // 监听按键事件
+    if (enableAutoEnterTextEditWhenKeydown) {
+      this.hiddenInputEl.addEventListener('keydown', e => {
+        const activeNodeList = this.mindMap.renderer.activeNodeList
+        if (activeNodeList.length <= 0 || activeNodeList.length > 1) return
+        const node = activeNodeList[0]
+        // 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式
+        const keyCode = e.keyCode
+        if (
+          node &&
+          (keyCode === 229 ||
+            (keyCode >= 65 && keyCode <= 90) ||
+            (keyCode >= 48 && keyCode <= 57)) &&
+          !this.mindMap.keyCommand.hasCombinationKey(e)
+        ) {
+          this.show(node)
+        }
+      })
+    }
     // 监听粘贴事件
     this.hiddenInputEl.addEventListener('paste', async event => {
       event.preventDefault()
@@ -148,7 +169,7 @@ export default class TextEdit {
       this.mindMap.richText.showEditText(node, rect, isInserting)
       return
     }
-    this.showEditTextBox(node, rect)
+    this.showEditTextBox(node, rect, isInserting)
   }
 
   // 处理画布缩放
@@ -166,7 +187,7 @@ export default class TextEdit {
   }
 
   //  显示文本编辑框
-  showEditTextBox(node, rect) {
+  showEditTextBox(node, rect, isInserting) {
     this.mindMap.emit('before_show_text_edit')
     this.registerTmpShortcut()
     if (!this.textEditNode) {
@@ -179,10 +200,11 @@ export default class TextEdit {
       this.textEditNode.addEventListener('click', e => {
         e.stopPropagation()
       })
-      this.textEditNode.addEventListener('mousedown', (e) => {
+      this.textEditNode.addEventListener('mousedown', e => {
         e.stopPropagation()
       })
-      const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
+      const targetNode =
+        this.mindMap.opt.customInnerElsAppendTo || document.body
       targetNode.appendChild(this.textEditNode)
     }
     let scale = this.mindMap.view.scale
@@ -209,12 +231,27 @@ export default class TextEdit {
     }
     this.showTextEdit = true
     // 选中文本
-    if (!this.cacheEditingText) {
+    // if (!this.cacheEditingText) {
+    //   this.selectNodeText()
+    // }
+    if (isInserting) {
       this.selectNodeText()
+    } else {
+      this.focus()
     }
     this.cacheEditingText = ''
   }
 
+  // 聚焦
+  focus() {
+    let selection = window.getSelection()
+    let range = document.createRange()
+    range.selectNodeContents(this.textEditNode)
+    range.collapse()
+    selection.removeAllRanges()
+    selection.addRange(range)
+  }
+
   //  选中文本
   selectNodeText() {
     let selection = window.getSelection()

simple-mind-map/src/plugins/Drag.js

@@ -204,7 +204,7 @@ class Drag extends Base {
 
   //  检测重叠节点
   checkOverlapNode() {
-    if (!this.drawTransform) {
+    if (!this.drawTransform || !this.placeholder) {
       return
     }
     const { nodeDragPlaceholderMaxSize } = this.mindMap.opt 

simple-mind-map/src/plugins/RichText.js

@@ -1,7 +1,12 @@
 import Quill from 'quill'
 import 'quill/dist/quill.snow.css'
-import html2canvas from 'html2canvas'
+import domtoimage from 'dom-to-image-more'
-import { walk, getTextFromHtml, isWhite, getVisibleColorFromTheme } from '../utils'
+import {
+  walk,
+  getTextFromHtml,
+  isWhite,
+  getVisibleColorFromTheme
+} from '../utils'
 import { CONSTANTS } from '../constants/constant'
 
 let extended = false
@@ -172,10 +177,11 @@ class RichText {
       this.textEditNode.addEventListener('click', e => {
         e.stopPropagation()
       })
-      this.textEditNode.addEventListener('mousedown', (e) => {
+      this.textEditNode.addEventListener('mousedown', e => {
         e.stopPropagation()
       })
-      const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
+      const targetNode =
+        this.mindMap.opt.customInnerElsAppendTo || document.body
       targetNode.appendChild(this.textEditNode)
     }
     // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
@@ -185,7 +191,11 @@ class RichText {
     this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
     this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
     this.textEditNode.style.backgroundColor =
-      bgColor === 'transparent' ? isWhite(color) ? getVisibleColorFromTheme(this.mindMap.themeConfig) : '#fff' : bgColor
+      bgColor === 'transparent'
+        ? isWhite(color)
+          ? getVisibleColorFromTheme(this.mindMap.themeConfig)
+          : '#fff'
+        : bgColor
     this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px'
     this.textEditNode.style.minHeight = originHeight + 'px'
     this.textEditNode.style.left = rect.left + 'px'
@@ -507,11 +517,16 @@ class RichText {
       }
     }
     walk(node)
-    let canvas = await html2canvas(el, {
+
-      backgroundColor: null
+    // 如果使用html2canvas
-    })
+    // let canvas = await html2canvas(el, {
+    //   backgroundColor: null
+    // })
+    // return canvas.toDataURL()
+
+    const res = await domtoimage.toPng(el)
     this.mindMap.el.removeChild(el)
-    return canvas.toDataURL()
+    return res
   }
 
   // 将所有节点转换成非富文本节点

simple-mind-map/src/plugins/TouchEvent.js

@@ -58,7 +58,6 @@ class TouchEvent {
       let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(touch2.clientX, touch2.clientY)
       let cx = (touch1ClientX + touch2ClientX) / 2
       let cy = (touch1ClientY + touch2ClientY) / 2
-      
       // 手势缩放,基于最开始的位置进行缩放(基于前一个位置缩放不是线性关系); 缩放同时支持位置拖动
       var view = this.mindMap.view;
       if(!this.touchScaleViewBefore){

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

@@ -455,25 +455,25 @@ export const loadImage = imgFile => {
 }
 
 // 移除字符串中的html实体
-export const removeHTMLEntities = (str) => {
+export const removeHTMLEntities = str => {
-  [[' ', ' ']].forEach((item) => {
+  ;[[' ', ' ']].forEach(item => {
     str = str.replaceAll(item[0], item[1])
   })
   return str
 }
 
 // 获取一个数据的类型
-export const getType = (data) => {
+export const getType = data => {
   return Object.prototype.toString.call(data).slice(7, -1)
 }
 
 // 判断一个数据是否是null和undefined和空字符串
-export const isUndef = (data) => {
+export const isUndef = data => {
   return data === null || data === undefined || data === ''
 }
 
 // 移除html字符串中节点的内联样式
-export const removeHtmlStyle = (html) => {
+export const removeHtmlStyle = html => {
   return html.replaceAll(/(<[^\s]+)\s+style=["'][^'"]+["']\s*(>)/g, '$1$2')
 }
 
@@ -485,12 +485,12 @@ export const addHtmlStyle = (html, tag, style) => {
 
 // 检查一个字符串是否是富文本字符
 let checkIsRichTextEl = null
-export const checkIsRichText = (str) => {
+export const checkIsRichText = str => {
   if (!checkIsRichTextEl) {
     checkIsRichTextEl = document.createElement('div')
   }
   checkIsRichTextEl.innerHTML = str
-  for (let c = checkIsRichTextEl.childNodes, i = c.length; i--;) {
+  for (let c = checkIsRichTextEl.childNodes, i = c.length; i--; ) {
     if (c[i].nodeType == 1) return true
   }
   return false
@@ -503,13 +503,20 @@ export const replaceHtmlText = (html, searchText, replaceText) => {
     replaceHtmlTextEl = document.createElement('div')
   }
   replaceHtmlTextEl.innerHTML = html
-  let walk = (root) => {
+  let walk = root => {
     let childNodes = root.childNodes
-    childNodes.forEach((node) => {
+    childNodes.forEach(node => {
-      if (node.nodeType === 1) {// 元素节点
+      if (node.nodeType === 1) {
+        // 元素节点
         walk(node)
-      } else if (node.nodeType === 3) {// 文本节点
+      } else if (node.nodeType === 3) {
-        root.replaceChild(document.createTextNode(node.nodeValue.replaceAll(searchText, replaceText)), node)
+        // 文本节点
+        root.replaceChild(
+          document.createTextNode(
+            node.nodeValue.replaceAll(searchText, replaceText)
+          ),
+          node
+        )
       }
     })
   }
@@ -518,22 +525,39 @@ export const replaceHtmlText = (html, searchText, replaceText) => {
 }
 
 // 判断一个颜色是否是白色
-export const isWhite = (color) => {
+export const isWhite = color => {
   color = String(color).replaceAll(/\s+/g, '')
-  return ['#fff', '#ffffff', '#FFF', '#FFFFFF', 'rgb(255,255,255)'].includes(color) || /rgba\(255,255,255,[^)]+\)/.test(color)
+  return (
+    ['#fff', '#ffffff', '#FFF', '#FFFFFF', 'rgb(255,255,255)'].includes(
+      color
+    ) || /rgba\(255,255,255,[^)]+\)/.test(color)
+  )
 }
 
 // 判断一个颜色是否是透明
-export const isTransparent = (color) => {
+export const isTransparent = color => {
   color = String(color).replaceAll(/\s+/g, '')
-  return ['', 'transparent'].includes(color) || /rgba\(\d+,\d+,\d+,0\)/.test(color)
+  return (
+    ['', 'transparent'].includes(color) || /rgba\(\d+,\d+,\d+,0\)/.test(color)
+  )
 }
 
 // 从当前主题里获取一个非透明非白色的颜色
-export const getVisibleColorFromTheme = (themeConfig) => {
+export const getVisibleColorFromTheme = themeConfig => {
   let { lineColor, root, second, node } = themeConfig
-  let list = [lineColor, root.fillColor, root.color, second.fillColor, second.color, node.fillColor, node.color, root.borderColor, second.borderColor, node.borderColor]
+  let list = [
-  for(let i = 0; i < list.length; i++) {
+    lineColor,
+    root.fillColor,
+    root.color,
+    second.fillColor,
+    second.color,
+    node.fillColor,
+    node.color,
+    root.borderColor,
+    second.borderColor,
+    node.borderColor
+  ]
+  for (let i = 0; i < list.length; i++) {
     let color = list[i]
     if (!isTransparent(color) && !isWhite(color)) {
       return color
@@ -543,22 +567,24 @@ export const getVisibleColorFromTheme = (themeConfig) => {
 
 // 将<p><span></span><p>形式的节点富文本内容转换成\n换行的文本
 let nodeRichTextToTextWithWrapEl = null
-export const nodeRichTextToTextWithWrap = (html) => {
+export const nodeRichTextToTextWithWrap = html => {
   if (!nodeRichTextToTextWithWrapEl) {
     nodeRichTextToTextWithWrapEl = document.createElement('div')
   }
   nodeRichTextToTextWithWrapEl.innerHTML = html
   const childNodes = nodeRichTextToTextWithWrapEl.childNodes
   let res = ''
-  for(let i = 0; i < childNodes.length; i++) {
+  for (let i = 0; i < childNodes.length; i++) {
     const node = childNodes[i]
-    if (node.nodeType === 1) {// 元素节点
+    if (node.nodeType === 1) {
+      // 元素节点
       if (node.tagName.toLowerCase() === 'p') {
         res += node.textContent + '\n'
       } else {
         res += node.textContent
       }
-    } else if (node.nodeType === 3) {// 文本节点
+    } else if (node.nodeType === 3) {
+      // 文本节点
       res += node.nodeValue
     }
   }
@@ -567,7 +593,7 @@ export const nodeRichTextToTextWithWrap = (html) => {
 
 // 将<br>换行的文本转换成<p><span></span><p>形式的节点富文本内容
 let textToNodeRichTextWithWrapEl = null
-export const textToNodeRichTextWithWrap = (html) => {
+export const textToNodeRichTextWithWrap = html => {
   if (!textToNodeRichTextWithWrapEl) {
     textToNodeRichTextWithWrapEl = document.createElement('div')
   }
@@ -575,23 +601,34 @@ export const textToNodeRichTextWithWrap = (html) => {
   const childNodes = textToNodeRichTextWithWrapEl.childNodes
   let list = []
   let str = ''
-  for(let i = 0; i < childNodes.length; i++) {
+  for (let i = 0; i < childNodes.length; i++) {
     const node = childNodes[i]
-    if (node.nodeType === 1) {// 元素节点
+    if (node.nodeType === 1) {
+      // 元素节点
       if (node.tagName.toLowerCase() === 'br') {
         list.push(str)
         str = ''
       } else {
         str += node.textContent
       }
-    } else if (node.nodeType === 3) {// 文本节点
+    } else if (node.nodeType === 3) {
+      // 文本节点
       str += node.nodeValue
     }
   }
   if (str) {
     list.push(str)
   }
-  return list.map((item) => {
+  return list
-    return `<p><span>${item}</span></p>`
+    .map(item => {
-  }).join('')
+      return `<p><span>${item}</span></p>`
+    })
+    .join('')
+}
+
+// 判断是否是移动端环境
+export const isMobile = () => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  )
 }

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

@@ -3,6 +3,7 @@
     class="contextmenuContainer listBox"
     v-if="isShow"
     :style="{ left: left + 'px', top: top + 'px' }"
+    :class="{ isDark: isDark }"
   >
     <template v-if="type === 'node'">
       <div
@@ -13,7 +14,11 @@
         {{ $t('contextmenu.insertSiblingNode') }}
         <span class="desc">Enter</span>
       </div>
-      <div class="item" @click="exec('INSERT_CHILD_NODE')" :class="{ disabled: isGeneralization }">
+      <div
+        class="item"
+        @click="exec('INSERT_CHILD_NODE')"
+        :class="{ disabled: isGeneralization }"
+      >
         {{ $t('contextmenu.insertChildNode') }}
         <span class="desc">Tab</span>
       </div>
@@ -45,18 +50,23 @@
         {{ $t('contextmenu.deleteNode') }}
         <span class="desc">Delete</span>
       </div>
-      <div class="item" @click="exec('COPY_NODE')" :class="{ disabled: isGeneralization }">
+      <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')" :class="{ disabled: isGeneralization }">
+      <div
+        class="item"
+        @click="exec('CUT_NODE')"
+        :class="{ disabled: isGeneralization }"
+      >
         {{ $t('contextmenu.cutNode') }}
         <span class="desc">Ctrl + X</span>
       </div>
-      <div
+      <div class="item" @click="exec('PASTE_NODE')">
-        class="item"
-        @click="exec('PASTE_NODE')"
-      >
         {{ $t('contextmenu.pasteNode') }}
         <span class="desc">Ctrl + V</span>
       </div>
@@ -74,7 +84,7 @@
       </div>
       <div class="item">
         {{ $t('contextmenu.expandTo') }}
-        <div class="subItems listBox">
+        <div class="subItems listBox" :class="{ isDark: isDark }">
           <div
             class="item"
             v-for="(item, index) in expandList"
@@ -130,7 +140,8 @@ export default {
   },
   computed: {
     ...mapState({
-      isZenMode: state => state.localConfig.isZenMode
+      isZenMode: state => state.localConfig.isZenMode,
+      isDark: state => state.isDark
     }),
     expandList() {
       return [
@@ -309,6 +320,10 @@ export default {
   border-radius: 4px;
   padding-top: 16px;
   padding-bottom: 16px;
+
+  &.isDark {
+    background: #363b3f;
+  }
 }
 .contextmenuContainer {
   position: fixed;
@@ -317,6 +332,16 @@ export default {
   font-weight: 400;
   color: #1a1a1a;
 
+  &.isDark {
+    color: #fff;
+
+    .item {
+      &:hover {
+        background: hsla(0, 0%, 100%, 0.05);
+      }
+    }
+  }
+
   .item {
     position: relative;
     height: 28px;

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

@@ -61,7 +61,7 @@ export default {
       },
       currentData: null,
       notHandleDataChange: false,
-      handleNodeTreeRenderEnd: false,
+      isHandleNodeTreeRenderEnd: false,
       beInsertNodeUid: '',
       insertType: '',
       isInTreArea: false,
@@ -106,8 +106,8 @@ export default {
         return
       }
       // 插入了新节点后需要做一些操作
-      if (this.handleNodeTreeRenderEnd) {
+      if (this.isHandleNodeTreeRenderEnd) {
-        this.handleNodeTreeRenderEnd = false
+        this.isHandleNodeTreeRenderEnd = false
         this.refresh()
         this.$nextTick(() => {
           this.afterCreateNewNode()
@@ -236,7 +236,7 @@ export default {
     // 插入兄弟节点
     insertNode() {
       this.notHandleDataChange = true
-      this.handleNodeTreeRenderEnd = true
+      this.isHandleNodeTreeRenderEnd = true
       this.beInsertNodeUid = createUid()
       this.mindMap.execCommand('INSERT_NODE', false, [], {
         uid: this.beInsertNodeUid
@@ -246,7 +246,7 @@ export default {
     // 插入下级节点
     insertChildNode() {
       this.notHandleDataChange = true
-      this.handleNodeTreeRenderEnd = true
+      this.isHandleNodeTreeRenderEnd = true
       this.beInsertNodeUid = createUid()
       this.mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
         uid: this.beInsertNodeUid

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

@@ -3,6 +3,7 @@
     class="richTextToolbar"
     ref="richTextToolbar"
     :style="style"
+    :class="{ isDark: isDark }"
     @click.stop.passive
     v-show="showRichTextToolbar"
   >
@@ -44,7 +45,7 @@
 
     <el-tooltip content="字体" placement="top">
       <el-popover placement="bottom" trigger="hover">
-        <div class="fontOptionsList">
+        <div class="fontOptionsList" :class="{ isDark: isDark }">
           <div
             class="fontOptionItem"
             v-for="item in fontFamilyList"
@@ -64,7 +65,7 @@
 
     <el-tooltip content="字号" placement="top">
       <el-popover placement="bottom" trigger="hover">
-        <div class="fontOptionsList">
+        <div class="fontOptionsList" :class="{ isDark: isDark }">
           <div
             class="fontOptionItem"
             v-for="item in fontSizeList"
@@ -93,7 +94,10 @@
 
     <el-tooltip content="背景颜色" placement="top">
       <el-popover placement="bottom" trigger="hover">
-        <Color :color="fontBackgroundColor" @change="changeFontBackgroundColor"></Color>
+        <Color
+          :color="fontBackgroundColor"
+          @change="changeFontBackgroundColor"
+        ></Color>
         <div class="btn" slot="reference">
           <span class="icon iconfont iconbeijingyanse"></span>
         </div>
@@ -101,9 +105,7 @@
     </el-tooltip>
 
     <el-tooltip content="清除样式" placement="top">
-      <div
+      <div class="btn" @click="removeFormat">
-        class="btn" @click="removeFormat"
-      >
         <span class="icon iconfont iconqingchu"></span>
       </div>
     </el-tooltip>
@@ -113,6 +115,7 @@
 <script>
 import { fontFamilyList, fontSizeList } from '@/config'
 import Color from './Color'
+import { mapState } from 'vuex'
 
 export default {
   name: 'RichTextToolbar',
@@ -138,6 +141,8 @@ export default {
     }
   },
   computed: {
+    ...mapState(['isDark']),
+
     fontFamilyList() {
       return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
     }
@@ -211,7 +216,7 @@ export default {
     },
 
     changeFontBackgroundColor(background) {
-      this.formatInfo.background  = background
+      this.formatInfo.background = background
       this.mindMap.richText.formatText({
         background
       })
@@ -237,6 +242,18 @@ export default {
   align-items: center;
   transform: translateX(-50%);
 
+  &.isDark {
+    background: #363b3f;
+
+    .btn {
+      color: #fff;
+
+      &:hover {
+        background: hsla(0, 0%, 100%, 0.05);
+      }
+    }
+  }
+
   .btn {
     width: 55px;
     height: 55px;
@@ -266,6 +283,16 @@ export default {
 .fontOptionsList {
   width: 150px;
 
+  &.isDark {
+    .fontOptionItem {
+      color: #fff;
+
+      &:hover {
+        background-color: hsla(0, 0%, 100%, 0.05);
+      }
+    }
+  }
+
   .fontOptionItem {
     height: 30px;
     width: 100%;