Merge pull request #1254 from cuikaipeng/readme

Update README.md

.gitignore

@@ -3,3 +3,4 @@ node_modules
 dist_electron
 simple-mind-map/dist
 simple-mind-map/types
+utools/dist

copy.js

@@ -13,4 +13,4 @@ if (fs.existsSync(src)) {
     fs.unlinkSync(src)
 }
 
-console.warn('请检查付费插件是否启用！！！')
+// console.warn('请检查付费插件是否启用！！！')

dist/css/app.css

@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box}#app{font-family:Avenir,Helvetica,Arial,sans-serif;color:#2c3e50}@font-face{font-family:iconfont;src:url(../fonts/iconfont.woff2) format("woff2"),url(../fonts/iconfont.woff) format("woff"),url(../fonts/iconfont.ttf) format("truetype")}#app,.iconfont{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal}.iconfile-excel:before{content:"\e7b7"}.iconfreemind:before{content:"\e97d"}.iconwaikuang:before{content:"\e640"}.iconhighlight:before{content:"\e6b8"}.iconyanshibofang:before{content:"\e648"}.iconfujian:before{content:"\e88a"}.icongeshihua:before{content:"\e7a3"}.iconyuanma:before{content:"\e658"}.icongundongtiao:before{content:"\e670"}.iconxietongwendang:before{content:"\e60d"}.iconTXT:before{content:"\e6e1"}.iconwenjian1:before{content:"\e69f"}.icondodeparent:before{content:"\e70f"}.icongongshi:before{content:"\e617"}.icontouming:before{content:"\e60c"}.iconlieri:before{content:"\e60b"}.iconmoon_line:before{content:"\e745"}.iconsousuo:before{content:"\e693"}.iconjiantouyou:before{content:"\e62d"}.iconbianji1:before{content:"\e60a"}.icondaohang1:before{content:"\e632"}.iconyanjing:before{content:"\e8bf"}.iconwangzhan:before{content:"\e628"}.iconcsdn:before{content:"\e608"}.iconshejiaotubiao-10:before{content:"\e644"}.iconstar:before{content:"\e7df"}.iconfork:before{content:"\e641"}.iconxiazai:before{content:"\e613"}.iconteamwork:before{content:"\e870"}.iconshuiyin:before{content:"\e67a"}.iconxmind:before{content:"\ea57"}.iconmouseR:before{content:"\e6bd"}.iconmouseL:before{content:"\e6c0"}.iconwenjian:before{content:"\e607"}.iconpdf:before{content:"\e740"}.iconPNG:before{content:"\ec18"}.iconSVG:before{content:"\e621"}.iconmarkdown:before{content:"\ec04"}.iconjson:before{content:"\ea42"}.iconlianjiexian:before{content:"\e75b"}.iconbangzhu:before{content:"\e620"}.iconshezhi:before{content:"\e8b7"}.iconwushuju:before{content:"\e643"}.iconzuijinliulan:before{content:"\e62f"}.icon3zuidahua-3:before{content:"\e692"}.iconzuixiaohua:before{content:"\e650"}.iconzuidahua:before{content:"\e651"}.iconguanbi:before{content:"\e652"}.icondiannao:before{content:"\eac0"}.iconzhuye:before{content:"\e65c"}.iconbendi1x:before{content:"\e606"}.iconbeijingyanse:before{content:"\e6f8"}.iconqingchu:before{content:"\e605"}.iconcase:before{content:"\e6c6"}.iconxingzhuang-wenzi:before{content:"\eb99"}.iconzitijiacu:before{content:"\ec83"}.iconzitixiahuaxian:before{content:"\ec85"}.iconzitixieti:before{content:"\ec86"}.iconshanchuxian:before{content:"\e612"}.iconzitiyanse:before{content:"\e854"}.icongithub:before{content:"\e64f"}.iconchoose1:before{content:"\e6c5"}.iconzhuti:before{content:"\e7aa"}.icondaochu1:before{content:"\e63e"}.iconlingcunwei:before{content:"\e657"}.iconexport:before{content:"\e642"}.icondakai:before{content:"\ebdf"}.iconxinjian:before{content:"\e64e"}.iconjianqie:before{content:"\e601"}.iconzhengli:before{content:"\e83b"}.iconfuzhi:before{content:"\e604"}.iconniantie:before{content:"\e63f"}.iconshangyi:before{content:"\e6be"}.iconxiayi:before{content:"\e6bf"}.icongaikuozonglan:before{content:"\e609"}.iconquanxuan:before{content:"\f199"}.icondaoru:before{content:"\e6a3"}.iconhoutui-shi:before{content:"\e656"}.iconqianjin1:before{content:"\e654"}.iconwithdraw:before{content:"\e603"}.iconqianjin:before{content:"\e600"}.iconhuifumoren:before{content:"\e60e"}.iconhuanhang:before{content:"\e61e"}.iconsuoxiao:before{content:"\ec13"}.iconbianji:before{content:"\e626"}.iconfangda:before{content:"\e663"}.iconquanping1:before{content:"\e664"}.icondingwei:before{content:"\e616"}.icondaohang:before{content:"\e611"}.iconjianpan:before{content:"\e64d"}.iconquanping:before{content:"\e602"}.icondaochu:before{content:"\e63d"}.iconbiaoqian:before{content:"\e63c"}.iconflow-Mark:before{content:"\e65b"}.iconchaolianjie:before{content:"\e6f4"}.iconjingzi:before{content:"\e610"}.iconxiaolian:before{content:"\e60f"}.iconimage:before{content:"\e629"}.iconjiegou:before{content:"\e61d"}.iconyangshi:before{content:"\e631"}.iconfuhao-dagangshu:before{content:"\e71f"}.icontianjiazijiedian:before{content:"\e622"}.iconjiedian:before{content:"\e655"}.iconshanchu:before{content:"\e696"}.iconzhankai:before{content:"\e64c"}.iconzhankai1:before{content:"\e673"}
+*{margin:0;padding:0;box-sizing:border-box}#app{font-family:Avenir,Helvetica,Arial,sans-serif;color:#2c3e50}.customScrollbar::-webkit-scrollbar{width:7px;height:7px}.customScrollbar::-webkit-scrollbar-thumb{border-radius:7px;background-color:rgba(0,0,0,.3);cursor:pointer}.customScrollbar::-webkit-scrollbar-track{box-shadow:none;background:transparent;display:none}.el-dialog{border-radius:10px}@font-face{font-family:iconfont;src:url(../fonts/iconfont.woff2) format("woff2"),url(../fonts/iconfont.woff) format("woff"),url(../fonts/iconfont.ttf) format("truetype")}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.iconAIshengcheng:before{content:"\e6b5"}.iconprinting:before{content:"\ea28"}.iconwenjianjia:before{content:"\e614"}.iconcontentleft:before{content:"\e8c9"}.iconjuzhongduiqi:before{content:"\ec80"}.iconfile-excel:before{content:"\e7b7"}.iconfreemind:before{content:"\e97d"}.iconwaikuang:before{content:"\e640"}.iconhighlight:before{content:"\e6b8"}.iconyanshibofang:before{content:"\e648"}.iconfujian:before{content:"\e88a"}.icongeshihua:before{content:"\e7a3"}.iconyuanma:before{content:"\e658"}.icongundongtiao:before{content:"\e670"}.iconxietongwendang:before{content:"\e60d"}.iconTXT:before{content:"\e6e1"}.iconwenjian1:before{content:"\e69f"}.icondodeparent:before{content:"\e70f"}.icongongshi:before{content:"\e617"}.icontouming:before{content:"\e60c"}.iconlieri:before{content:"\e60b"}.iconmoon_line:before{content:"\e745"}.iconsousuo:before{content:"\e693"}.iconjiantouyou:before{content:"\e62d"}.iconbianji1:before{content:"\e60a"}.icondaohang1:before{content:"\e632"}.iconyanjing:before{content:"\e8bf"}.iconwangzhan:before{content:"\e628"}.iconcsdn:before{content:"\e608"}.iconshejiaotubiao-10:before{content:"\e644"}.iconstar:before{content:"\e7df"}.iconfork:before{content:"\e641"}.iconxiazai:before{content:"\e613"}.iconteamwork:before{content:"\e870"}.iconshuiyin:before{content:"\e67a"}.iconxmind:before{content:"\ea57"}.iconmouseR:before{content:"\e6bd"}.iconmouseL:before{content:"\e6c0"}.iconwenjian:before{content:"\e607"}.iconpdf:before{content:"\e740"}.iconPNG:before{content:"\ec18"}.iconSVG:before{content:"\e621"}.iconmarkdown:before{content:"\ec04"}.iconjson:before{content:"\ea42"}.iconlianjiexian:before{content:"\e75b"}.iconbangzhu:before{content:"\e620"}.iconshezhi:before{content:"\e8b7"}.iconwushuju:before{content:"\e643"}.iconzuijinliulan:before{content:"\e62f"}.icon3zuidahua-3:before{content:"\e692"}.iconzuixiaohua:before{content:"\e650"}.iconzuidahua:before{content:"\e651"}.iconguanbi:before{content:"\e652"}.icondiannao:before{content:"\eac0"}.iconzhuye:before{content:"\e65c"}.iconbendi1x:before{content:"\e606"}.iconbeijingyanse:before{content:"\e6f8"}.iconqingchu:before{content:"\e605"}.iconcase:before{content:"\e6c6"}.iconxingzhuang-wenzi:before{content:"\eb99"}.iconzitijiacu:before{content:"\ec83"}.iconzitixiahuaxian:before{content:"\ec85"}.iconzitixieti:before{content:"\ec86"}.iconshanchuxian:before{content:"\e612"}.iconzitiyanse:before{content:"\e854"}.icongithub:before{content:"\e64f"}.iconchoose1:before{content:"\e6c5"}.iconzhuti:before{content:"\e7aa"}.icondaochu1:before{content:"\e63e"}.iconlingcunwei:before{content:"\e657"}.iconexport:before{content:"\e642"}.icondakai:before{content:"\ebdf"}.iconxinjian:before{content:"\e64e"}.iconjianqie:before{content:"\e601"}.iconzhengli:before{content:"\e83b"}.iconfuzhi:before{content:"\e604"}.iconniantie:before{content:"\e63f"}.iconshangyi:before{content:"\e6be"}.iconxiayi:before{content:"\e6bf"}.icongaikuozonglan:before{content:"\e609"}.iconquanxuan:before{content:"\f199"}.icondaoru:before{content:"\e6a3"}.iconhoutui-shi:before{content:"\e656"}.iconqianjin1:before{content:"\e654"}.iconwithdraw:before{content:"\e603"}.iconqianjin:before{content:"\e600"}.iconhuifumoren:before{content:"\e60e"}.iconhuanhang:before{content:"\e61e"}.iconsuoxiao:before{content:"\ec13"}.iconbianji:before{content:"\e626"}.iconfangda:before{content:"\e663"}.iconquanping1:before{content:"\e664"}.icondingwei:before{content:"\e616"}.icondaohang:before{content:"\e611"}.iconjianpan:before{content:"\e64d"}.iconquanping:before{content:"\e602"}.icondaochu:before{content:"\e63d"}.iconbiaoqian:before{content:"\e63c"}.iconflow-Mark:before{content:"\e65b"}.iconchaolianjie:before{content:"\e6f4"}.iconjingzi:before{content:"\e610"}.iconxiaolian:before{content:"\e60f"}.iconimage:before{content:"\e629"}.iconjiegou:before{content:"\e61d"}.iconyangshi:before{content:"\e631"}.iconfuhao-dagangshu:before{content:"\e71f"}.icontianjiazijiedian:before{content:"\e622"}.iconjiedian:before{content:"\e655"}.iconshanchu:before{content:"\e696"}.iconzhankai:before{content:"\e64c"}.iconzhankai1:before{content:"\e673"}

index.html

@@ -9,7 +9,7 @@
         })
       } catch (error) {
         console.log(error)
-      }</script><link href="dist/css/chunk-vendors.css?f5839763ea0d5c47d80a" rel="stylesheet"><link href="dist/css/app.css?f5839763ea0d5c47d80a" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
+      }</script><link href="dist/css/chunk-vendors.css?227f61428db154a5d9bc" rel="stylesheet"><link href="dist/css/app.css?227f61428db154a5d9bc" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
         return new Promise((resolve, reject) => {
           setTimeout(() => {
             resolve({
@@ -28,6 +28,7 @@
                 config: {},
                 view: null
               },
+              mindMapConfig: {},
               lang: 'zh',
               localConfig: null
             })
@@ -44,6 +45,14 @@
         window.takeOverAppMethods.saveMindMapData = data => {
           console.log(data)
         }
+        // 获取思维导图配置，也就是实例化时会传入的选项
+        window.takeOverAppMethods.getMindMapConfig = () => {
+          return data.mindMapConfig
+        }
+        // 保存思维导图配置
+        window.takeOverAppMethods.saveMindMapConfig = config => {
+          console.log(config)
+        }
         // 获取语言的函数
         window.takeOverAppMethods.getLanguage = () => {
           return data.lang
@@ -74,4 +83,4 @@
         // 可以通过window.$bus.$on()来监听应用的一些事件
         // 实例化页面
         window.initApp()
-      }</script><script src="dist/js/chunk-vendors.js?f5839763ea0d5c47d80a"></script><script src="dist/js/app.js?f5839763ea0d5c47d80a"></script></body></html>
+      }</script><script src="dist/js/chunk-vendors.js?227f61428db154a5d9bc"></script><script src="dist/js/app.js?227f61428db154a5d9bc"></script></body></html>

simple-mind-map/example/exampleData.js

@@ -17,11 +17,7 @@ const createFullData = () => {
     };
 }
 
-/** 
- * @Author: 王林 
- * @Date: 2021-04-15 22:23:24 
- * @Desc: 节点较多示例数据 
- */
+// 节点较多示例数据
 const data1 = {
     "root": {
         "data": {
@@ -936,6 +932,5 @@ export default {
     "layout": "logicalStructure",
     // "layout": "mindMap",
     // "layout": "catalogOrganization"
-    // "layout": "organizationStructure",
-    "config": {}
+    // "layout": "organizationStructure"
 }

simple-mind-map/full.js

@@ -19,6 +19,7 @@ import RainbowLines from './src/plugins/RainbowLines.js'
 import Demonstrate from './src/plugins/Demonstrate.js'
 import OuterFrame from './src/plugins/OuterFrame.js'
 import MindMapLayoutPro from './src/plugins/MindMapLayoutPro.js'
+import NodeBase64ImageStorage from './src/plugins/NodeBase64ImageStorage.js'
 import xmind from './src/parse/xmind.js'
 import markdown from './src/parse/markdown.js'
 import icons from './src/svg/icons.js'
@@ -30,7 +31,7 @@ MindMap.markdown = markdown
 MindMap.iconList = icons.nodeIconList
 MindMap.constants = constants
 MindMap.defaultTheme = defaultTheme
-MindMap.version = '0.12.2'
+MindMap.version = '0.14.0-fix.1'
 
 MindMap.usePlugin(MiniMap)
   .usePlugin(Watermark)
@@ -52,5 +53,6 @@ MindMap.usePlugin(MiniMap)
   .usePlugin(Demonstrate)
   .usePlugin(OuterFrame)
   .usePlugin(MindMapLayoutPro)
+  .usePlugin(NodeBase64ImageStorage)
 
 export default MindMap

simple-mind-map/index.js

@@ -11,16 +11,18 @@ import {
   layoutValueList,
   CONSTANTS,
   ERROR_TYPES,
-  cssContent
+  cssContent,
+  nodeDataNoStylePropList
 } from './src/constants/constant'
-import { SVG } from '@svgdotjs/svg.js'
+import { SVG, G, Rect } from '@svgdotjs/svg.js'
 import {
   simpleDeepClone,
   getObjectChangedProps,
   isUndef,
   handleGetSvgDataExtraContent,
   getNodeTreeBoundingRect,
-  mergeTheme
+  mergeTheme,
+  createUidForAppointNodes
 } from './src/utils'
 import defaultTheme, {
   checkIsNodeSizeIndependenceConfig
@@ -56,7 +58,7 @@ class MindMap {
     this.cssEl = null
     this.cssTextMap = {} // 该样式在实例化时会动态添加到页面，同时导出为svg时也会添加到svg源码中
 
-    // 节点前置内容列表
+    // 节点前置/后置内容列表
     /*
       {
         name: '',// 一个唯一的类型标识
@@ -75,6 +77,27 @@ class MindMap {
       }
     */
     this.nodeInnerPrefixList = []
+    this.nodeInnerPostfixList = []
+
+    // 编辑节点的类名列表，快捷键响应会检查事件目标是否是body或该列表中的元素，是的话才会响应
+    // 该检查可以通过customCheckEnableShortcut选项来覆盖
+    this.editNodeClassList = []
+
+    // 扩展的节点形状列表
+    /*
+      {
+        createShape: (node) => {
+          return path
+        },
+        getPadding: ({ node, width, height, paddingX, paddingY }) => {
+          return {
+            paddingX: 0,
+            paddingY: 0
+          }  
+        }
+      }
+    */
+    this.extendShapeList = []
 
     // 画布
     this.initContainer()
@@ -85,6 +108,15 @@ class MindMap {
     // 初始化缓存数据
     this.initCache()
 
+    // 注册插件
+    MindMap.pluginList
+      .filter(plugin => {
+        return plugin.preload
+      })
+      .forEach(plugin => {
+        this.initPlugin(plugin)
+      })
+
     // 事件类
     this.event = new Event({
       mindMap: this
@@ -114,9 +146,13 @@ class MindMap {
     this.batchExecution = new BatchExecution()
 
     // 注册插件
-    MindMap.pluginList.forEach(plugin => {
-      this.initPlugin(plugin)
-    })
+    MindMap.pluginList
+      .filter(plugin => {
+        return !plugin.preload
+      })
+      .forEach(plugin => {
+        this.initPlugin(plugin)
+      })
 
     // 添加必要的css样式
     this.addCss()
@@ -149,6 +185,8 @@ class MindMap {
     if (data.data && !data.data.expand) {
       data.data.expand = true
     }
+    // 给没有uid的节点添加uid
+    createUidForAppointNodes([data], false, null, true)
     return data
   }
 
@@ -237,12 +275,33 @@ class MindMap {
     if (this.cssEl) document.head.removeChild(this.cssEl)
   }
 
+  // 检查某个编辑节点类名是否存在，返回索引
+  checkEditNodeClassIndex(className) {
+    return this.editNodeClassList.findIndex(item => {
+      return item === className
+    })
+  }
+
+  // 添加一个编辑节点类名
+  addEditNodeClass(className) {
+    const index = this.checkEditNodeClassIndex(className)
+    if (index === -1) {
+      this.editNodeClassList.push(className)
+    }
+  }
+
+  // 删除一个编辑节点类名
+  deleteEditNodeClass(className) {
+    const index = this.checkEditNodeClassIndex(className)
+    if (index !== -1) {
+      this.editNodeClassList.splice(index, 1)
+    }
+  }
+
   //  渲染，部分渲染
   render(callback, source = '') {
-    this.batchExecution.push('render', () => {
-      this.initTheme()
-      this.renderer.render(callback, source)
-    })
+    this.initTheme()
+    this.renderer.render(callback, source)
   }
 
   //  重新渲染
@@ -395,6 +454,7 @@ class MindMap {
 
   // 更新画布数据，如果新的数据是在当前画布节点数据基础上增删改查后形成的，那么可以使用该方法来更新画布数据
   updateData(data) {
+    data = this.handleData(data)
     this.emit('before_update_data', data)
     this.renderer.setData(data)
     this.render()
@@ -411,7 +471,7 @@ class MindMap {
     this.command.clearHistory()
     this.command.addHistory()
     this.renderer.setData(data)
-    this.reRender(() => {}, CONSTANTS.SET_DATA)
+    this.reRender()
     this.emit('set_data', data)
   }
 
@@ -632,6 +692,35 @@ class MindMap {
     }
   }
 
+  // 扩展节点形状
+  addShape(shape) {
+    if (!shape) return
+    const exist = this.extendShapeList.find(item => {
+      return item.name === shape.name
+    })
+    if (exist) return
+    this.extendShapeList.push(shape)
+  }
+
+  // 删除扩展的形状
+  removeShape(name) {
+    const index = this.extendShapeList.findIndex(item => {
+      return item.name === name
+    })
+    if (index !== -1) {
+      this.extendShapeList.splice(index, 1)
+    }
+  }
+
+  // 获取SVG.js库的一些对象
+  getSvgObjects() {
+    return {
+      SVG,
+      G,
+      Rect
+    }
+  }
+
   // 添加插件
   addPlugin(plugin, opt) {
     let index = MindMap.hasPlugin(plugin)
@@ -695,6 +784,39 @@ class MindMap {
   }
 }
 
+// 扩展节点数据中非样式的字段列表
+// 内部会根据这个列表判断，如果不在这个列表里的字段都会认为是样式字段
+/*
+比如一个节点的数据为：
+
+{
+  data: {
+    text: '',
+    note: '',
+    color: ''
+  },
+  children: []
+}
+
+color字段不在nodeDataNoStylePropList列表中，所以是样式，内部一些操作的方法会用到，所以如果你新增了自定义的节点数据，并且不是`_`开头的，那么需要通过该方法扩展
+*/
+let _extendNodeDataNoStylePropList = []
+MindMap.extendNodeDataNoStylePropList = (list = []) => {
+  _extendNodeDataNoStylePropList.push(...list)
+  nodeDataNoStylePropList.push(...list)
+}
+MindMap.resetNodeDataNoStylePropList = () => {
+  _extendNodeDataNoStylePropList.forEach(item => {
+    const index = nodeDataNoStylePropList.findIndex(item2 => {
+      return item2 === item
+    })
+    if (index !== -1) {
+      nodeDataNoStylePropList.splice(index, 1)
+    }
+  })
+  _extendNodeDataNoStylePropList = []
+}
+
 // 插件列表
 MindMap.pluginList = []
 MindMap.usePlugin = (plugin, opt = {}) => {

simple-mind-map/package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "simple-mind-map",
-  "version": "0.12.1",
+  "version": "0.14.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.12.1",
+      "version": "0.14.0",
       "license": "MIT",
       "dependencies": {
         "@svgdotjs/svg.js": "3.2.0",

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.12.2",
+  "version": "0.14.0-fix.1",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

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

@@ -2,8 +2,6 @@
 export const CONSTANTS = {
   CHANGE_THEME: 'changeTheme',
   CHANGE_LAYOUT: 'changeLayout',
-  SET_DATA: 'setData',
-  TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode',
   MODE: {
     READONLY: 'readonly',
     EDIT: 'edit'
@@ -17,7 +15,12 @@ export const CONSTANTS = {
     TIMELINE: 'timeline',
     TIMELINE2: 'timeline2',
     FISHBONE: 'fishbone',
-    VERTICAL_TIMELINE: 'verticalTimeline'
+    FISHBONE2: 'fishbone2',
+    RIGHT_FISHBONE: 'rightFishbone',
+    RIGHT_FISHBONE2: 'rightFishbone2',
+    VERTICAL_TIMELINE: 'verticalTimeline',
+    VERTICAL_TIMELINE2: 'verticalTimeline2',
+    VERTICAL_TIMELINE3: 'verticalTimeline3'
   },
   DIR: {
     UP: 'up',
@@ -72,14 +75,15 @@ export const CONSTANTS = {
     NOT_ACTIVE: 'notActive',
     ACTIVE_ONLY: 'activeOnly'
   },
-  TAG_POSITION: {
+  TAG_PLACEMENT: {
     RIGHT: 'right',
     BOTTOM: 'bottom'
   },
-  EDIT_NODE_CLASS: {
-    SMM_NODE_EDIT_WRAP: 'smm-node-edit-wrap',
-    RICH_TEXT_EDIT_WRAP: 'ql-editor',
-    ASSOCIATIVE_LINE_TEXT_EDIT_WRAP: 'associative-line-text-edit-warp'
+  IMG_PLACEMENT: {
+    LEFT: 'left',
+    TOP: 'top',
+    RIGHT: 'right',
+    BOTTOM: 'bottom'
   }
 }
 
@@ -125,9 +129,29 @@ export const layoutList = [
     name: '竖向时间轴',
     value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE
   },
+  {
+    name: '竖向时间轴2',
+    value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE2
+  },
+  {
+    name: '竖向时间轴3',
+    value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE3
+  },
   {
     name: '鱼骨图',
     value: CONSTANTS.LAYOUT.FISHBONE
+  },
+  {
+    name: '鱼骨图2',
+    value: CONSTANTS.LAYOUT.FISHBONE2
+  },
+  {
+    name: '向右鱼骨图',
+    value: CONSTANTS.LAYOUT.RIGHT_FISHBONE
+  },
+  {
+    name: '向右鱼骨图2',
+    value: CONSTANTS.LAYOUT.RIGHT_FISHBONE2
   }
 ]
 export const layoutValueList = [
@@ -139,7 +163,12 @@ export const layoutValueList = [
   CONSTANTS.LAYOUT.TIMELINE,
   CONSTANTS.LAYOUT.TIMELINE2,
   CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
-  CONSTANTS.LAYOUT.FISHBONE
+  CONSTANTS.LAYOUT.VERTICAL_TIMELINE2,
+  CONSTANTS.LAYOUT.VERTICAL_TIMELINE3,
+  CONSTANTS.LAYOUT.FISHBONE,
+  CONSTANTS.LAYOUT.FISHBONE2,
+  CONSTANTS.LAYOUT.RIGHT_FISHBONE,
+  CONSTANTS.LAYOUT.RIGHT_FISHBONE2
 ]
 
 // 节点数据中非样式的字段
@@ -157,7 +186,7 @@ export const nodeDataNoStylePropList = [
   'isActive',
   'generalization',
   'richText',
-  'resetRichText',
+  'resetRichText', // 重新创建富文本内容，去掉原有样式
   'uid',
   'activeStyle',
   'associativeLineTargets',
@@ -174,7 +203,10 @@ export const nodeDataNoStylePropList = [
   'customTop',
   'customTextWidth',
   'checkbox',
-  'dir'
+  'dir',
+  'needUpdate', // 重新创建节点内容
+  'imgMap',
+  'nodeLink'
 ]
 
 // 错误类型
@@ -208,7 +240,7 @@ export const cssContent = `
     stroke-width: 2;
   }
 
-  .smm-text-node-wrap {
+  .smm-text-node-wrap, .smm-expand-btn-text {
     user-select: none;
   }
 `
@@ -226,3 +258,14 @@ export const selfCloseTagList = [
 
 // 非富文本模式下的节点文本行高
 export const noneRichTextNodeLineHeight = 1.2
+
+// 富文本支持的样式列表
+export const richTextSupportStyleList = [
+  'fontFamily',
+  'fontSize',
+  'fontWeight',
+  'fontStyle',
+  'textDecoration',
+  'color',
+  'textAlign'
+]

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

@@ -35,8 +35,6 @@ export const defaultOpt = {
   mouseScaleCenterUseMousePosition: true,
   // 最多显示几个标签
   maxTag: 5,
-  // 标签显示的位置，相对于节点文本，bottom（下方）、right（右侧）
-  tagPosition: CONSTANTS.TAG_POSITION.RIGHT,
   // 展开收缩按钮尺寸
   expandBtnSize: 20,
   // 节点里图片和文字的间距
@@ -268,6 +266,63 @@ export const defaultOpt = {
   // 实例化完后是否立刻进行一次历史数据入栈操作
   // 即调用mindMap.command.addHistory方法
   addHistoryOnInit: true,
+  // 自定义节点备注图标
+  noteIcon: {
+    icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
+    style: {
+      // size: 20,// 图标大小，不手动设置则会使用主题的iconSize配置
+      // color: '',// 图标颜色，不手动设置则会使用节点文本的颜色
+    }
+  },
+  // 自定义节点超链接图标
+  hyperlinkIcon: {
+    icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
+    style: {
+      // size: 20,// 图标大小，不手动设置则会使用主题的iconSize配置
+      // color: '',// 图标颜色，不手动设置则会使用节点文本的颜色
+    }
+  },
+  // 自定义节点附件图标
+  attachmentIcon: {
+    icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
+    style: {
+      // size: 20,// 图标大小，不手动设置则会使用主题的iconSize配置
+      // color: '',// 图标颜色，不手动设置则会使用节点文本的颜色
+    }
+  },
+  // 是否显示快捷创建子节点按钮
+  isShowCreateChildBtnIcon: true,
+  // 自定义快捷创建子节点按钮图标
+  quickCreateChildBtnIcon: {
+    icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
+    style: {
+      // 图标大小使用的是expandBtnSize选项
+      // color: '',// 图标颜色，不手动设置则会使用expandBtnStyle选项的color字段
+    }
+  },
+  // 自定义快捷创建子节点按钮的点击操作，
+  customQuickCreateChildBtnClick: null,
+  // 添加自定义的节点内容
+  // 可传递一个对象，格式如下：
+  /*
+    {
+      // 返回要添加的DOM元素详细
+      create: (node) => { 
+        return {
+          el, // DOM节点
+          width: 20, // 宽高
+          height: 20
+        }
+      },
+      // 处理生成的@svgdotjs/svg.js库的ForeignObject节点实例，可以设置其在节点内的位置
+      handle: ({ content, element, node }) => {
+        
+      }
+    }
+  */
+  addCustomContentToNode: null,
+  // 节点连线样式是否允许继承祖先的连线样式
+  enableInheritAncestorLineStyle: true,
 
   // 【Select插件】
   // 多选节点时鼠标移动到边缘时的画布移动偏移量
@@ -441,6 +496,7 @@ export const defaultOpt = {
   // 【OuterFrame】插件
   outerFramePaddingX: 10,
   outerFramePaddingY: 10,
+  defaultOuterFrameText: '外框',
 
   // 【Painter】插件
   // 是否只格式刷节点手动设置的样式，不考虑节点通过主题的应用的样式
@@ -458,5 +514,10 @@ export const defaultOpt = {
   maxImgResizeWidthInheritTheme: false,
   // 最大允许缩放的尺寸，maxImgResizeWidthInheritTheme选项设置为false时生效，不限制最大值可传递Infinity
   maxImgResizeWidth: Infinity,
-  maxImgResizeHeight: Infinity
+  maxImgResizeHeight: Infinity,
+  // 自定义删除按钮和尺寸调整按钮的内容
+  // 默认为内置图标，你可以传递一个svg字符串，或者其他的html字符串
+  // 整体大小请使用上面的minImgResizeWidth和minImgResizeHeight选项设置
+  customDeleteBtnInnerHTML: '',
+  customResizeBtnInnerHTML: ''
 }

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

@@ -6,6 +6,7 @@ import {
   transformTreeDataToObject
 } from '../../utils'
 import { ERROR_TYPES } from '../../constants/constant'
+import pkg from '../../../package.json'
 
 //  命令类
 class Command {
@@ -14,7 +15,7 @@ class Command {
     this.opt = opt
     this.mindMap = opt.mindMap
     this.commands = {}
-    this.history = []
+    this.history = [] // 字符串形式存储
     this.activeHistoryIndex = 0
     // 注册快捷键
     this.registerShortcutKeys()
@@ -105,18 +106,19 @@ class Command {
     if (this.mindMap.opt.readonly || this.isPause) {
       return
     }
-    const lastData =
+    this.mindMap.emit('beforeAddHistory')
+    const lastDataStr =
       this.history.length > 0 ? this.history[this.activeHistoryIndex] : null
     const data = this.getCopyData()
+    const dataStr = JSON.stringify(data)
     // 此次数据和上次一样则不重复添加
-    if (lastData === data) return
-    if (lastData && JSON.stringify(lastData) === JSON.stringify(data)) {
+    if (lastDataStr && lastDataStr === dataStr) {
       return
     }
-    this.emitDataUpdatesEvent(lastData, data)
+    this.emitDataUpdatesEvent(lastDataStr, dataStr)
     // 删除当前历史指针后面的数据
     this.history = this.history.slice(0, this.activeHistoryIndex + 1)
-    this.history.push(simpleDeepClone(data))
+    this.history.push(dataStr)
     // 历史记录数超过最大数量
     if (this.history.length > this.mindMap.opt.maxHistoryCount) {
       this.history.shift()
@@ -136,15 +138,16 @@ class Command {
       return
     }
     if (this.activeHistoryIndex - step >= 0) {
-      const lastData = this.history[this.activeHistoryIndex]
+      const lastDataStr = this.history[this.activeHistoryIndex]
       this.activeHistoryIndex -= step
       this.mindMap.emit(
         'back_forward',
         this.activeHistoryIndex,
         this.history.length
       )
-      const data = simpleDeepClone(this.history[this.activeHistoryIndex])
-      this.emitDataUpdatesEvent(lastData, data)
+      const dataStr = this.history[this.activeHistoryIndex]
+      const data = JSON.parse(dataStr)
+      this.emitDataUpdatesEvent(lastDataStr, dataStr)
       return data
     }
   }
@@ -156,15 +159,16 @@ class Command {
     }
     let len = this.history.length
     if (this.activeHistoryIndex + step <= len - 1) {
-      const lastData = this.history[this.activeHistoryIndex]
+      const lastDataStr = this.history[this.activeHistoryIndex]
       this.activeHistoryIndex += step
       this.mindMap.emit(
         'back_forward',
         this.activeHistoryIndex,
         this.history.length
       )
-      const data = simpleDeepClone(this.history[this.activeHistoryIndex])
-      this.emitDataUpdatesEvent(lastData, data)
+      const dataStr = this.history[this.activeHistoryIndex]
+      const data = JSON.parse(dataStr)
+      this.emitDataUpdatesEvent(lastDataStr, dataStr)
       return data
     }
   }
@@ -172,7 +176,9 @@ class Command {
   //  获取渲染树数据副本
   getCopyData() {
     if (!this.mindMap.renderer.renderTree) return null
-    return copyRenderTree({}, this.mindMap.renderer.renderTree, true)
+    const res = copyRenderTree({}, this.mindMap.renderer.renderTree, true)
+    res.smmVersion = pkg.version
+    return res
   }
 
   // 移除节点数据中的uid
@@ -191,12 +197,14 @@ class Command {
   }
 
   // 派发思维导图更新明细事件
-  emitDataUpdatesEvent(lastData, data) {
+  emitDataUpdatesEvent(lastDataStr, dataStr) {
     try {
       // 如果data_change_detail没有监听者，那么不进行计算，节省性能
       const eventName = 'data_change_detail'
       const count = this.mindMap.event.listenerCount(eventName)
-      if (count > 0 && lastData && data) {
+      if (count > 0 && lastDataStr && dataStr) {
+        const lastData = JSON.parse(lastDataStr)
+        const data = JSON.parse(dataStr)
         const lastDataObj = simpleDeepClone(transformTreeDataToObject(lastData))
         const dataObj = simpleDeepClone(transformTreeDataToObject(data))
         const res = []

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

@@ -1,5 +1,4 @@
 import { keyMap } from './keyMap'
-import { CONSTANTS } from '../../constants/constant'
 
 //  快捷按键、命令处理类
 export default class KeyCommand {
@@ -13,6 +12,8 @@ export default class KeyCommand {
     this.shortcutMapCache = {}
     this.isPause = false
     this.isInSvg = false
+    this.isStopCheckInSvg = false
+    this.defaultEnableCheck = this.defaultEnableCheck.bind(this)
     this.bindEvent()
   }
 
@@ -58,6 +59,22 @@ export default class KeyCommand {
     this.shortcutMapCache = {}
   }
 
+  // 停止对鼠标是否在画布内的检查，前提是开启了enableShortcutOnlyWhenMouseInSvg选项
+  // 库内部节点文本编辑、关联线文本编辑、外框文本编辑前都会暂停检查，否则无法响应回车快捷键用于结束编辑
+  // 如果你新增了额外的文本编辑，也可以在编辑前调用此方法
+  stopCheckInSvg() {
+    const { enableShortcutOnlyWhenMouseInSvg } = this.mindMap.opt
+    if (!enableShortcutOnlyWhenMouseInSvg) return
+    this.isStopCheckInSvg = true
+  }
+
+  // 恢复对鼠标是否在画布内的检查
+  recoveryCheckInSvg() {
+    const { enableShortcutOnlyWhenMouseInSvg } = this.mindMap.opt
+    if (!enableShortcutOnlyWhenMouseInSvg) return
+    this.isStopCheckInSvg = true
+  }
+
   //  绑定事件
   bindEvent() {
     this.onKeydown = this.onKeydown.bind(this)
@@ -66,13 +83,6 @@ export default class KeyCommand {
       this.isInSvg = true
     })
     this.mindMap.on('svg_mouseleave', () => {
-      if (this.mindMap.renderer.textEdit.isShowTextEdit()) return
-      if (
-        this.mindMap.associativeLine &&
-        this.mindMap.associativeLine.showTextEdit
-      ) {
-        return
-      }
       this.isInSvg = false
     })
     window.addEventListener('keydown', this.onKeydown)
@@ -89,12 +99,14 @@ export default class KeyCommand {
   // 根据事件目标判断是否响应快捷键事件
   defaultEnableCheck(e) {
     const target = e.target
-    return (
-      target === document.body ||
-      target.classList.contains(CONSTANTS.EDIT_NODE_CLASS.SMM_NODE_EDIT_WRAP) ||
-      target.classList.contains(CONSTANTS.EDIT_NODE_CLASS.RICH_TEXT_EDIT_WRAP) || 
-      target.classList.contains(CONSTANTS.EDIT_NODE_CLASS.ASSOCIATIVE_LINE_TEXT_EDIT_WRAP)
-    )
+    if (target === document.body) return true
+    for (let i = 0; i < this.mindMap.editNodeClassList.length; i++) {
+      const cur = this.mindMap.editNodeClassList[i]
+      if (target.classList.contains(cur)) {
+        return true
+      }
+    }
+    return false
   }
 
   // 按键事件
@@ -109,7 +121,12 @@ export default class KeyCommand {
         ? customCheckEnableShortcut
         : this.defaultEnableCheck
     if (!checkFn(e)) return
-    if (this.isPause || (enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)) {
+    if (
+      this.isPause ||
+      (enableShortcutOnlyWhenMouseInSvg &&
+        !this.isStopCheckInSvg &&
+        !this.isInSvg)
+    ) {
       return
     }
     Object.keys(this.shortcutMap).forEach(key => {

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

@@ -30,10 +30,10 @@ import {
   createSmmFormatData,
   checkSmmFormatData,
   checkIsNodeStyleDataKey,
-  removeRichTextStyes,
   formatGetNodeGeneralization,
   sortNodeList,
   throttle,
+  debounce,
   checkClipboardReadEnable,
   isNodeNotNeedRenderData
 } from '../../utils'
@@ -60,8 +60,14 @@ const layouts = {
   [CONSTANTS.LAYOUT.TIMELINE2]: Timeline,
   // 竖向时间轴
   [CONSTANTS.LAYOUT.VERTICAL_TIMELINE]: VerticalTimeline,
+  // 竖向时间轴2
+  [CONSTANTS.LAYOUT.VERTICAL_TIMELINE2]: VerticalTimeline,
+  // 竖向时间轴3
+  [CONSTANTS.LAYOUT.VERTICAL_TIMELINE3]: VerticalTimeline,
   // 鱼骨图
-  [CONSTANTS.LAYOUT.FISHBONE]: Fishbone
+  [CONSTANTS.LAYOUT.FISHBONE]: Fishbone,
+  // 鱼骨图2
+  [CONSTANTS.LAYOUT.FISHBONE2]: Fishbone
 }
 
 //  渲染
@@ -81,14 +87,18 @@ class Render {
     this.isRendering = false
     // 是否存在等待渲染
     this.hasWaitRendering = false
-    this.waitRenderingParams = []
     // 用于缓存节点
     this.nodeCache = {}
     this.lastNodeCache = {}
-    // 触发render的来源
-    this.renderSource = ''
+    // 收集触发render的来源
+    this.renderSourceList = []
+    // 收集render的回调函数
+    this.renderCallbackList = []
     // 当前激活的节点列表
     this.activeNodeList = []
+    // 防抖定时器
+    this.emitNodeActiveEventTimer = null
+    this.renderTimer = null
     // 根节点
     this.root = null
     // 文本编辑框，需要再bindEvent之前实例化，否则单击事件只能触发隐藏文本编辑框，而无法保存文本修改
@@ -112,12 +122,16 @@ class Render {
 
   //  设置布局结构
   setLayout() {
+    if (this.layout && this.layout.beforeChange) {
+      this.layout.beforeChange()
+    }
     const { layout } = this.mindMap.opt
-    this.layout = new (
-      layouts[layout]
-        ? layouts[layout]
-        : layouts[CONSTANTS.LAYOUT.LOGICAL_STRUCTURE]
-    )(this, layout)
+    let L = layouts[layout] || this.mindMap[layout]
+    if (!L) {
+      L = layouts[CONSTANTS.LAYOUT.LOGICAL_STRUCTURE]
+      this.mindMap.opt.layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
+    }
+    this.layout = new L(this, layout)
   }
 
   // 重新设置思维导图数据
@@ -147,6 +161,9 @@ class Render {
     })
     // 性能模式
     const onViewDataChange = throttle(() => {
+      if (!this.renderTree) {
+        return
+      }
       if (this.root) {
         this.mindMap.emit('node_tree_render_start')
         this.root.render(
@@ -162,7 +179,7 @@ class Render {
       this.mindMap.on('view_data_change', onViewDataChange)
     }
     // 文本编辑时实时更新节点大小
-    this.onNodeTextEditChange = this.onNodeTextEditChange.bind(this)
+    this.onNodeTextEditChange = debounce(this.onNodeTextEditChange, 100, this)
     if (openRealtimeRenderOnNodeTextEdit) {
       this.mindMap.on('node_text_edit_change', this.onNodeTextEditChange)
     }
@@ -443,9 +460,10 @@ class Render {
     )
     if (!isChange) return
     this.lastActiveNodeList = [...activeNodeList]
-    this.mindMap.batchExecution.push('emitNodeActiveEvent', () => {
+    clearTimeout(this.emitNodeActiveEventTimer)
+    this.emitNodeActiveEventTimer = setTimeout(() => {
       this.mindMap.emit('node_active', node, activeNodeList)
-    })
+    }, 0)
   }
 
   // 鼠标点击画布时清空当前激活节点列表
@@ -488,22 +506,71 @@ class Render {
     this.lastNodeCache = {}
   }
 
-  //   渲染
-  render(callback = () => {}, source) {
+  // 保存触发渲染的参数
+  addRenderParams(callback, source) {
+    if (callback) {
+      const index = this.renderCallbackList.findIndex(fn => {
+        return fn === callback
+      })
+      if (index === -1) {
+        this.renderCallbackList.push(callback)
+      }
+    }
+    if (source) {
+      const index = this.renderSourceList.findIndex(s => {
+        return s === source
+      })
+      if (index === -1) {
+        this.renderSourceList.push(source)
+      }
+    }
+  }
+
+  // 判断是否包含某种触发渲染源
+  checkHasRenderSource(val) {
+    val = Array.isArray(val) ? val : [val]
+    for (let i = 0; i < this.renderSourceList.length; i++) {
+      if (val.includes(this.renderSourceList[i])) {
+        return true
+      }
+    }
+    return false
+  }
+
+  // 渲染完毕的操作
+  onRenderEnd() {
+    this.renderCallbackList.forEach(fn => {
+      fn()
+    })
+    this.isRendering = false
+    this.reRender = false
+    this.renderCallbackList = []
+    this.renderSourceList = []
+    this.mindMap.emit('node_tree_render_end')
+  }
+
+  // 渲染
+  render(callback, source) {
+    this.addRenderParams(callback, source)
+    clearTimeout(this.renderTimer)
+    this.renderTimer = setTimeout(() => {
+      this._render()
+    }, 0)
+  }
+
+  // 真正的渲染
+  _render() {
     // 切换主题时，被收起的节点需要添加样式复位的标注
-    if (source === CONSTANTS.CHANGE_THEME) {
+    if (this.checkHasRenderSource(CONSTANTS.CHANGE_THEME)) {
       this.resetUnExpandNodeStyle()
     }
     // 如果当前还没有渲染完毕，不再触发渲染
     if (this.isRendering) {
       // 等待当前渲染完毕后再进行一次渲染
       this.hasWaitRendering = true
-      this.waitRenderingParams = [callback, source]
       return
     }
     this.isRendering = true
-    // 触发当前重新渲染的来源
-    this.renderSource = source
     // 节点缓存
     this.lastNodeCache = this.nodeCache
     this.nodeCache = {}
@@ -513,8 +580,7 @@ class Render {
     }
     // 如果没有节点数据
     if (!this.renderTree) {
-      this.isRendering = false
-      this.mindMap.emit('node_tree_render_end')
+      this.onRenderEnd()
       return
     }
     this.mindMap.emit('node_tree_render_start')
@@ -536,38 +602,32 @@ class Render {
       // 渲染节点
       this.root.render(() => {
         this.isRendering = false
-        callback && callback()
         if (this.hasWaitRendering) {
-          const params = this.waitRenderingParams
           this.hasWaitRendering = false
-          this.waitRenderingParams = []
-          this.render(...params)
-        } else {
-          this.renderSource = ''
-          if (this.reRender) {
-            this.reRender = false
-          }
-          // 触发一次保存，因为修改了渲染树的数据
-          if (
-            this.hasRichTextPlugin() &&
-            [CONSTANTS.CHANGE_THEME, CONSTANTS.SET_DATA].includes(source)
-          ) {
-            this.mindMap.command.addHistory()
-          }
+          this.render()
+          return
         }
-        this.mindMap.emit('node_tree_render_end')
+        this.onRenderEnd()
       })
     })
     this.emitNodeActiveEvent()
   }
 
-  // 给当前被收起来的节点数据添加文本复位标志
+  // 当某个自定义节点内容改变后，可以调用该方法实时更新该节点大小和整体节点的定位
+  renderByCustomNodeContentNode(node) {
+    node.getSize()
+    node.customNodeContentRealtimeLayout()
+    this.mindMap.render()
+  }
+
+  // 给当前被收起来的节点数据添加更新标志
   resetUnExpandNodeStyle() {
-    if (!this.renderTree || !this.hasRichTextPlugin()) return
+    if (!this.renderTree) return
     walk(this.renderTree, null, node => {
       if (!node.data.expand) {
         walk(node, null, node2 => {
-          node2.data.resetRichText = true
+          // 主要是触发数据新旧对比，不一样则会重新创建节点
+          node2.data['needUpdate'] = true
         })
         return true
       }
@@ -750,15 +810,16 @@ class Render {
       richText: isRichText,
       isActive: focusNewNode // 如果同时对多个节点插入子节点，那么需要把新增的节点设为激活状态。如果不进入编辑状态，那么也需要手动设为激活状态
     }
-    if (isRichText) params.resetRichText = isRichText
+    if (isRichText) params.resetRichText = true
     // 动态指定的子节点数据也需要添加相关属性
-    appointChildren = addDataToAppointNodes(appointChildren, {
-      ...params
-    })
+    appointChildren = addDataToAppointNodes(appointChildren, params)
+    const alreadyIsRichText = appointData && appointData.richText
+    let createNewId = false
     list.forEach(node => {
       if (node.isGeneralization || node.isRoot) {
         return
       }
+      appointChildren = simpleDeepClone(appointChildren)
       const parent = node.parent
       const isOneLayer = node.layerIndex === 1
       // 新插入节点的默认文本
@@ -767,6 +828,10 @@ class Render {
         : defaultInsertBelowSecondLevelNodeText
       // 计算插入位置
       const index = getNodeDataIndex(node)
+      // 如果指定的数据就是富文本格式，那么不需要重新创建
+      if (alreadyIsRichText && params.resetRichText) {
+        delete params.resetRichText
+      }
       const newNodeData = {
         inserting,
         data: {
@@ -775,8 +840,9 @@ class Render {
           uid: createUid(),
           ...(appointData || {})
         },
-        children: [...createUidForAppointNodes(appointChildren)]
+        children: [...createUidForAppointNodes(appointChildren, createNewId)]
       }
+      createNewId = true
       parent.nodeData.children.splice(index + 1, 0, newNodeData)
     })
     // 如果同时对多个节点插入子节点，需要清除原来激活的节点
@@ -802,16 +868,19 @@ class Render {
       richText: isRichText,
       isActive: focusNewNode
     }
-    if (isRichText) params.resetRichText = isRichText
+    if (isRichText) params.resetRichText = true
     nodeList = addDataToAppointNodes(nodeList, params)
+    let createNewId = false
     list.forEach(node => {
       if (node.isGeneralization || node.isRoot) {
         return
       }
+      nodeList = simpleDeepClone(nodeList)
       const parent = node.parent
       // 计算插入位置
       const index = getNodeDataIndex(node)
-      const newNodeList = createUidForAppointNodes(simpleDeepClone(nodeList))
+      const newNodeList = createUidForAppointNodes(nodeList, createNewId)
+      createNewId = true
       parent.nodeData.children.splice(index + 1, 0, ...newNodeList)
     })
     if (focusNewNode) {
@@ -848,21 +917,26 @@ class Render {
       richText: isRichText,
       isActive: focusNewNode
     }
-    if (isRichText) params.resetRichText = isRichText
+    if (isRichText) params.resetRichText = true
     // 动态指定的子节点数据也需要添加相关属性
-    appointChildren = addDataToAppointNodes(appointChildren, {
-      ...params
-    })
+    appointChildren = addDataToAppointNodes(appointChildren, params)
+    const alreadyIsRichText = appointData && appointData.richText
+    let createNewId = false
     list.forEach(node => {
       if (node.isGeneralization) {
         return
       }
+      appointChildren = simpleDeepClone(appointChildren)
       if (!node.nodeData.children) {
         node.nodeData.children = []
       }
       const text = node.isRoot
         ? defaultInsertSecondLevelNodeText
         : defaultInsertBelowSecondLevelNodeText
+      // 如果指定的数据就是富文本格式，那么不需要重新创建
+      if (alreadyIsRichText && params.resetRichText) {
+        delete params.resetRichText
+      }
       const newNode = {
         inserting,
         data: {
@@ -871,8 +945,9 @@ class Render {
           ...params,
           ...(appointData || {})
         },
-        children: [...createUidForAppointNodes(appointChildren)]
+        children: [...createUidForAppointNodes(appointChildren, createNewId)]
       }
+      createNewId = true
       node.nodeData.children.push(newNode)
       // 插入子节点时自动展开子节点
       node.setData({
@@ -902,16 +977,20 @@ class Render {
       richText: isRichText,
       isActive: focusNewNode
     }
-    if (isRichText) params.resetRichText = isRichText
+    if (isRichText) params.resetRichText = true
     childList = addDataToAppointNodes(childList, params)
+    let createNewId = false
     list.forEach(node => {
       if (node.isGeneralization) {
         return
       }
+      childList = simpleDeepClone(childList)
       if (!node.nodeData.children) {
         node.nodeData.children = []
       }
-      childList = createUidForAppointNodes(childList)
+      childList = createUidForAppointNodes(childList, createNewId)
+      // 第一个引用不需要重新创建uid，后面的需要重新创建，否则id会重复
+      createNewId = true
       node.nodeData.children.push(...childList)
       // 插入子节点时自动展开子节点
       node.setData({
@@ -947,7 +1026,8 @@ class Render {
       richText: isRichText,
       isActive: focusNewNode
     }
-    if (isRichText) params.resetRichText = isRichText
+    if (isRichText) params.resetRichText = true
+    const alreadyIsRichText = appointData && appointData.richText
     list.forEach(node => {
       if (node.isGeneralization || node.isRoot) {
         return
@@ -956,6 +1036,10 @@ class Render {
         node.layerIndex === 1
           ? defaultInsertSecondLevelNodeText
           : defaultInsertBelowSecondLevelNodeText
+      // 如果指定的数据就是富文本格式，那么不需要重新创建
+      if (alreadyIsRichText && params.resetRichText) {
+        delete params.resetRichText
+      }
       const newNode = {
         inserting,
         data: {
@@ -966,11 +1050,6 @@ class Render {
         },
         children: [node.nodeData]
       }
-      if (isRichText) {
-        node.setData({
-          resetRichText: true
-        })
-      }
       const parent = node.parent
       // 获取当前节点所在位置
       const index = getNodeDataIndex(node)
@@ -1046,7 +1125,6 @@ class Render {
     const index = getNodeIndexInNodeList(node, parent.children)
     const parentIndex = getNodeIndexInNodeList(parent, grandpa.children)
     // 节点数据
-    this.checkNodeLayerChange(node, parent)
     parent.nodeData.children.splice(index, 1)
     grandpa.nodeData.children.splice(parentIndex + 1, 0, node.nodeData)
     this.mindMap.render()
@@ -1061,10 +1139,10 @@ class Render {
         delete nodeData[key]
       }
     })
-    // 如果是富文本，那么还要处理富文本内容
-    if (hasCustomStyles && this.hasRichTextPlugin()) {
+    // 如果是富文本，那么直接全部重新创建，因为有些样式是通过标签来渲染的
+    if (this.hasRichTextPlugin()) {
+      hasCustomStyles = true
       nodeData.resetRichText = true
-      nodeData.text = removeRichTextStyes(nodeData.text)
     }
     return hasCustomStyles
   }
@@ -1208,7 +1286,10 @@ class Render {
               Array.isArray(smmData) ? smmData : [smmData]
             )
           } else {
-            text = htmlEscape(text)
+            // 如果是富文本模式，那么需要转义特殊字符
+            if (this.hasRichTextPlugin()) {
+              text = htmlEscape(text)
+            }
             const textArr = text
               .split(new RegExp('\r?\n|(?<!\n)\r', 'g'))
               .filter(item => {
@@ -1302,7 +1383,6 @@ class Render {
       nodeList.reverse()
     }
     nodeList.forEach(item => {
-      this.checkNodeLayerChange(item, exist)
       // 移动节点
       let nodeParent = item.parent
       let nodeBorthers = nodeParent.children
@@ -1329,25 +1409,6 @@ class Render {
     this.mindMap.render()
   }
 
-  // 如果是富文本模式，那么某些层级变化需要更新样式
-  checkNodeLayerChange(node, toNode, toNodeIsParent = false) {
-    if (this.hasRichTextPlugin()) {
-      // 如果设置了自定义样式那么不需要更新
-      if (this.mindMap.richText.checkNodeHasCustomRichTextStyle(node)) {
-        return
-      }
-      const toIndex = toNodeIsParent ? toNode.layerIndex + 1 : toNode.layerIndex
-      let nodeLayerChanged =
-        (node.layerIndex === 1 && toIndex !== 1) ||
-        (node.layerIndex !== 1 && toIndex === 1)
-      if (nodeLayerChanged) {
-        node.setData({
-          resetRichText: true
-        })
-      }
-    }
-  }
-
   //  移除节点
   removeNode(appointNodes = []) {
     appointNodes = formatDataToArray(appointNodes)
@@ -1531,7 +1592,6 @@ class Render {
       return !item.isRoot
     })
     nodeList.forEach(item => {
-      this.checkNodeLayerChange(item, toNode, true)
       this.removeNodeFromActiveList(item)
       removeFromParentNodeData(item)
       toNode.setData({
@@ -1546,35 +1606,7 @@ class Render {
   //   粘贴节点到节点
   pasteNode(data) {
     data = formatDataToArray(data)
-    if (this.activeNodeList.length <= 0 || data.length <= 0) {
-      return
-    }
-    this.activeNodeList.forEach(node => {
-      // 概要节点不允许添加下级节点
-      if (node.isGeneralization) return
-      node.setData({
-        expand: true
-      })
-      node.nodeData.children.push(
-        ...data.map(item => {
-          const newData = simpleDeepClone(item)
-          createUidForAppointNodes([newData], true, node => {
-            // 可能跨层级复制，那么富文本样式需要更新
-            if (this.hasRichTextPlugin()) {
-              // 如果设置了自定义样式那么不需要更新
-              if (
-                this.mindMap.richText.checkNodeHasCustomRichTextStyle(node.data)
-              ) {
-                return
-              }
-              node.data.resetRichText = true
-            }
-          })
-          return newData
-        })
-      )
-    })
-    this.mindMap.render()
+    this.mindMap.execCommand('INSERT_MULTI_CHILD_NODE', [], data)
   }
 
   //  设置节点样式
@@ -1582,13 +1614,6 @@ class Render {
     const data = {
       [prop]: value
     }
-    // 如果开启了富文本，则需要应用到富文本上
-    if (
-      this.hasRichTextPlugin() &&
-      this.mindMap.richText.isHasRichTextStyle(data)
-    ) {
-      data.resetRichText = true
-    }
     this.setNodeDataRender(node, data)
     // 更新了连线的样式
     if (lineStyleProps.includes(prop)) {
@@ -1599,13 +1624,6 @@ class Render {
   //  设置节点多个样式
   setNodeStyles(node, style) {
     const data = { ...style }
-    // 如果开启了富文本，则需要应用到富文本上
-    if (
-      this.hasRichTextPlugin() &&
-      this.mindMap.richText.isHasRichTextStyle(data)
-    ) {
-      data.resetRichText = true
-    }
     this.setNodeDataRender(node, data)
     // 更新了连线的样式
     let props = Object.keys(style)
@@ -1826,6 +1844,7 @@ class Render {
       list.length > 1
     )
     let needRender = false
+    const alreadyIsRichText = data && data.richText
     list.forEach(item => {
       const newData = {
         inserting,
@@ -1837,7 +1856,7 @@ class Render {
         richText: isRichText,
         isActive: focusNewNode
       }
-      if (isRichText) newData.resetRichText = isRichText
+      if (isRichText && !alreadyIsRichText) newData.resetRichText = isRichText
       let generalization = item.node.getData('generalization')
       generalization = generalization
         ? Array.isArray(generalization)

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

@@ -16,6 +16,8 @@ import {
   noneRichTextNodeLineHeight
 } from '../../constants/constant'
 
+const SMM_NODE_EDIT_WRAP = 'smm-node-edit-wrap'
+
 //  节点文字编辑类
 export default class TextEdit {
   //  构造函数
@@ -33,6 +35,8 @@ export default class TextEdit {
     this.hasBodyMousedown = false
     this.textNodePaddingX = 5
     this.textNodePaddingY = 3
+    this.isNeedUpdateTextEditNode = false
+    this.mindMap.addEditNodeClass(SMM_NODE_EDIT_WRAP)
     this.bindEvent()
   }
 
@@ -91,7 +95,7 @@ export default class TextEdit {
       })
     })
     this.mindMap.on('scale', this.onScale)
-    // // 监听按键事件，判断是否自动进入文本编辑模式
+    // 监听按键事件，判断是否自动进入文本编辑模式
     if (this.mindMap.opt.enableAutoEnterTextEditWhenKeydown) {
       window.addEventListener('keydown', this.onKeydown)
     }
@@ -124,6 +128,18 @@ export default class TextEdit {
         ]('keydown', this.onKeydown)
       }
     })
+    // 正在编辑文本时，给节点添加了图标等其他内容时需要更新编辑框的位置
+    this.mindMap.on('afterExecCommand', () => {
+      if (!this.isShowTextEdit()) return
+      this.isNeedUpdateTextEditNode = true
+    })
+    this.mindMap.on('node_tree_render_end', () => {
+      if (!this.isShowTextEdit()) return
+      if (this.isNeedUpdateTextEditNode) {
+        this.isNeedUpdateTextEditNode = false
+        this.updateTextEditNode()
+      }
+    })
   }
 
   // 解绑事件
@@ -139,6 +155,9 @@ export default class TextEdit {
     const node = activeNodeList[0]
     // 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式
     if (node && this.checkIsAutoEnterTextEditKey(e)) {
+      // 忽略第一个键值，避免中文输入法时进入编辑会导致第一个键值变成字母的问题
+      // 带来的问题是按的第一下纯粹是进入文本编辑，但没有变成输入
+      e.preventDefault()
       this.show({
         node,
         e,
@@ -161,7 +180,6 @@ export default class TextEdit {
 
   //  注册临时快捷键
   registerTmpShortcut() {
-    // 注册回车快捷键
     this.mindMap.keyCommand.addShortcut('Enter', () => {
       this.hideEditTextBox()
     })
@@ -178,7 +196,17 @@ export default class TextEdit {
     return this.showTextEdit
   }
 
-  //  显示文本编辑框
+  // 设置文本编辑框是否处于显示状态
+  setIsShowTextEdit(val) {
+    this.showTextEdit = val
+    if (val) {
+      this.mindMap.keyCommand.stopCheckInSvg()
+    } else {
+      this.mindMap.keyCommand.recoveryCheckInSvg()
+    }
+  }
+
+  // 显示文本编辑框
   // isInserting：是否是刚创建的节点
   // isFromKeyDown：是否是在按键事件进入的编辑
   async show({
@@ -191,6 +219,11 @@ export default class TextEdit {
     if (node.isUseCustomNodeContent()) {
       return
     }
+    // 如果有正在编辑中的节点，那么先结束它
+    const currentEditNode = this.getCurrentEditNode()
+    if (currentEditNode) {
+      this.hideEditTextBox()
+    }
     const { beforeTextEdit, openRealtimeRenderOnNodeTextEdit } =
       this.mindMap.opt
     if (typeof beforeTextEdit === 'function') {
@@ -203,10 +236,13 @@ export default class TextEdit {
       }
       if (!isShow) return
     }
-    this.currentNode = node
     const { offsetLeft, offsetTop } = checkNodeOuter(this.mindMap, node)
     this.mindMap.view.translateXY(offsetLeft, offsetTop)
     const g = node._textData.node
+    // 需要先显示，不然宽高获取到的可能是0
+    if (openRealtimeRenderOnNodeTextEdit) {
+      g.show()
+    }
     const rect = g.node.getBoundingClientRect()
     // 如果开启了大小实时更新，那么直接隐藏节点原文本
     if (openRealtimeRenderOnNodeTextEdit) {
@@ -223,6 +259,7 @@ export default class TextEdit {
       this.mindMap.richText.showEditText(params)
       return
     }
+    this.currentNode = node
     this.showEditTextBox(params)
   }
 
@@ -251,7 +288,7 @@ export default class TextEdit {
       this.mindMap.richText.showTextEdit = false
     } else {
       this.cacheEditingText = this.getEditText()
-      this.showTextEdit = false
+      this.setIsShowTextEdit(false)
     }
     this.show({
       node,
@@ -275,9 +312,7 @@ export default class TextEdit {
     this.registerTmpShortcut()
     if (!this.textEditNode) {
       this.textEditNode = document.createElement('div')
-      this.textEditNode.classList.add(
-        CONSTANTS.EDIT_NODE_CLASS.SMM_NODE_EDIT_WRAP
-      )
+      this.textEditNode.classList.add(SMM_NODE_EDIT_WRAP)
       this.textEditNode.style.cssText = `
         position: fixed;
         box-sizing: border-box;
@@ -317,13 +352,10 @@ export default class TextEdit {
         } else {
           handleInputPasteText(e)
         }
+        this.emitTextChangeEvent()
       })
       this.textEditNode.addEventListener('input', () => {
-        this.mindMap.emit('node_text_edit_change', {
-          node: this.currentNode,
-          text: this.getEditText(),
-          richText: false
-        })
+        this.emitTextChangeEvent()
       })
       const targetNode =
         this.mindMap.opt.customInnerElsAppendTo || document.body
@@ -350,8 +382,8 @@ export default class TextEdit {
     this.textEditNode.style.minWidth =
       rect.width + this.textNodePaddingX * 2 + 'px'
     this.textEditNode.style.minHeight = rect.height + 'px'
-    this.textEditNode.style.left = rect.left + 'px'
-    this.textEditNode.style.top = rect.top + 'px'
+    this.textEditNode.style.left = Math.floor(rect.left) + 'px'
+    this.textEditNode.style.top = Math.floor(rect.top) + 'px'
     this.textEditNode.style.display = 'block'
     this.textEditNode.style.maxWidth = textAutoWrapWidth * scale + 'px'
     if (isMultiLine) {
@@ -362,7 +394,7 @@ export default class TextEdit {
     } else {
       this.textEditNode.style.lineHeight = 'normal'
     }
-    this.showTextEdit = true
+    this.setIsShowTextEdit(true)
     // 选中文本
     // if (!this.cacheEditingText) {
     //   selectAllInput(this.textEditNode)
@@ -375,6 +407,15 @@ export default class TextEdit {
     this.cacheEditingText = ''
   }
 
+  // 派发节点文本编辑事件
+  emitTextChangeEvent() {
+    this.mindMap.emit('node_text_edit_change', {
+      node: this.currentNode,
+      text: this.getEditText(),
+      richText: false
+    })
+  }
+
   // 更新文本编辑框的大小和位置
   updateTextEditNode() {
     if (this.mindMap.richText) {
@@ -389,8 +430,8 @@ export default class TextEdit {
       rect.width + this.textNodePaddingX * 2 + 'px'
     this.textEditNode.style.minHeight =
       rect.height + this.textNodePaddingY * 2 + 'px'
-    this.textEditNode.style.left = rect.left + 'px'
-    this.textEditNode.style.top = rect.top + 'px'
+    this.textEditNode.style.left = Math.floor(rect.left) + 'px'
+    this.textEditNode.style.top = Math.floor(rect.top) + 'px'
   }
 
   // 获取编辑区域的背景填充
@@ -447,7 +488,7 @@ export default class TextEdit {
     this.textEditNode.style.fontSize = 'inherit'
     this.textEditNode.style.fontWeight = 'normal'
     this.textEditNode.style.transform = 'translateY(0)'
-    this.showTextEdit = false
+    this.setIsShowTextEdit(false)
     this.mindMap.execCommand('SET_NODE_TEXT', currentNode, text)
     // if (currentNode.isGeneralization) {
     //   // 概要节点

simple-mind-map/src/core/render/node/MindMapNode.js

@@ -8,13 +8,10 @@ import nodeCreateContentsMethods from './nodeCreateContents'
 import nodeExpandBtnPlaceholderRectMethods from './nodeExpandBtnPlaceholderRect'
 import nodeModifyWidthMethods from './nodeModifyWidth'
 import nodeCooperateMethods from './nodeCooperate'
+import quickCreateChildBtnMethods from './quickCreateChildBtn'
+import nodeLayoutMethods from './nodeLayout'
 import { CONSTANTS } from '../../../constants/constant'
-import {
-  copyNodeTree,
-  createForeignObjectNode,
-  createUid,
-  addXmlns
-} from '../../../utils/index'
+import { copyNodeTree, createUid, addXmlns } from '../../../utils/index'
 
 //  节点类
 class MindMapNode {
@@ -102,20 +99,16 @@ class MindMapNode {
     this._generalizationList = []
     this._unVisibleRectRegionNode = null
     this._isMouseenter = false
+    this._customContentAddToNodeAdd = null
     // 尺寸信息
     this._rectInfo = {
-      imgContentWidth: 0,
-      imgContentHeight: 0,
       textContentWidth: 0,
-      textContentHeight: 0
+      textContentHeight: 0,
+      textContentWidthWithoutTag: 0
     }
     // 概要节点的宽高
     this._generalizationNodeWidth = 0
     this._generalizationNodeHeight = 0
-    // 各种文字信息的间距
-    this.textContentItemMargin = this.mindMap.opt.textContentMargin
-    // 图片和文字节点的间距
-    this.blockContentMargin = this.mindMap.opt.imgTextMargin
     // 展开收缩按钮尺寸
     this.expandBtnSize = this.mindMap.opt.expandBtnSize
     // 是否是多选节点
@@ -126,6 +119,10 @@ class MindMapNode {
     this.isHide = false
     const proto = Object.getPrototypeOf(this)
     if (!proto.bindEvent) {
+      // 节点尺寸计算和布局相关方法
+      Object.keys(nodeLayoutMethods).forEach(item => {
+        proto[item] = nodeLayoutMethods[item]
+      })
       // 概要相关方法
       Object.keys(nodeGeneralizationMethods).forEach(item => {
         proto[item] = nodeGeneralizationMethods[item]
@@ -156,10 +153,19 @@ class MindMapNode {
       Object.keys(nodeModifyWidthMethods).forEach(item => {
         proto[item] = nodeModifyWidthMethods[item]
       })
+      // 快捷创建子节点按钮
+      if (this.mindMap.opt.isShowCreateChildBtnIcon) {
+        Object.keys(quickCreateChildBtnMethods).forEach(item => {
+          proto[item] = quickCreateChildBtnMethods[item]
+        })
+        this.initQuickCreateChildBtn()
+      }
       proto.bindEvent = true
     }
     // 初始化
     this.getSize()
+    // 初始需要计算一下概要节点的大小，否则计算布局时获取不到概要的大小
+    this.updateGeneralization()
     this.initDragHandle()
   }
 
@@ -211,7 +217,8 @@ class MindMapNode {
       isUseCustomNodeContent,
       customCreateNodeContent,
       createNodePrefixContent,
-      createNodePostfixContent
+      createNodePostfixContent,
+      addCustomContentToNode
     } = this.mindMap.opt
     // 需要创建的内容类型
     const typeList = [
@@ -227,6 +234,9 @@ class MindMapNode {
       'postfix',
       ...this.mindMap.nodeInnerPrefixList.map(item => {
         return item.name
+      }),
+      ...this.mindMap.nodeInnerPostfixList.map(item => {
+        return item.name
       })
     ]
     const createTypes = {}
@@ -284,6 +294,23 @@ class MindMapNode {
         addXmlns(this._postfixData.el)
       }
     }
+    this.mindMap.nodeInnerPostfixList.forEach(item => {
+      if (createTypes[item.name]) {
+        this[`_${item.name}Data`] = item.createContent(this)
+      }
+    })
+    if (
+      addCustomContentToNode &&
+      typeof addCustomContentToNode.create === 'function'
+    ) {
+      this._customContentAddToNodeAdd = addCustomContentToNode.create(this)
+      if (
+        this._customContentAddToNodeAdd &&
+        this._customContentAddToNodeAdd.el
+      ) {
+        addXmlns(this._customContentAddToNodeAdd.el)
+      }
+    }
   }
 
   //  计算节点的宽高
@@ -305,330 +332,6 @@ class MindMapNode {
     return changed
   }
 
-  //  计算节点尺寸信息
-  getNodeRect() {
-    // 自定义节点内容
-    if (this.isUseCustomNodeContent()) {
-      const rect = this.measureCustomNodeContentSize(this._customNodeContent)
-      return {
-        width: this.hasCustomWidth() ? this.customTextWidth : rect.width,
-        height: rect.height
-      }
-    }
-    const { tagPosition } = this.mindMap.opt
-    const tagIsBottom = tagPosition === CONSTANTS.TAG_POSITION.BOTTOM
-    // 宽高
-    let imgContentWidth = 0
-    let imgContentHeight = 0
-    let textContentWidth = 0
-    let textContentHeight = 0
-    let tagContentWidth = 0
-    let tagContentHeight = 0
-    // 存在图片
-    if (this._imgData) {
-      this._rectInfo.imgContentWidth = imgContentWidth = this._imgData.width
-      this._rectInfo.imgContentHeight = imgContentHeight = this._imgData.height
-    }
-    // 库前置内容
-    this.mindMap.nodeInnerPrefixList.forEach(item => {
-      const itemData = this[`_${item.name}Data`]
-      if (itemData) {
-        textContentWidth += itemData.width
-        textContentHeight = Math.max(textContentHeight, itemData.height)
-      }
-    })
-    // 自定义前置内容
-    if (this._prefixData) {
-      textContentWidth += this._prefixData.width
-      textContentHeight = Math.max(textContentHeight, this._prefixData.height)
-    }
-    // 图标
-    if (this._iconData.length > 0) {
-      textContentWidth += this._iconData.reduce((sum, cur) => {
-        textContentHeight = Math.max(textContentHeight, cur.height)
-        return (sum += cur.width + this.textContentItemMargin)
-      }, 0)
-    }
-    // 文字
-    if (this._textData) {
-      textContentWidth += this._textData.width
-      textContentHeight = Math.max(textContentHeight, this._textData.height)
-    }
-    // 超链接
-    if (this._hyperlinkData) {
-      textContentWidth += this._hyperlinkData.width
-      textContentHeight = Math.max(
-        textContentHeight,
-        this._hyperlinkData.height
-      )
-    }
-    // 标签
-    if (this._tagData.length > 0) {
-      let maxTagHeight = 0
-      const totalTagWidth = this._tagData.reduce((sum, cur) => {
-        maxTagHeight = Math.max(maxTagHeight, cur.height)
-        return (sum += cur.width + this.textContentItemMargin)
-      }, 0)
-      if (tagIsBottom) {
-        // 文字下方
-        tagContentWidth = totalTagWidth
-        tagContentHeight = maxTagHeight
-      } else {
-        // 否则在右侧
-        textContentWidth += totalTagWidth
-        textContentHeight = Math.max(textContentHeight, maxTagHeight)
-      }
-    }
-    // 备注
-    if (this._noteData) {
-      textContentWidth += this._noteData.width
-      textContentHeight = Math.max(textContentHeight, this._noteData.height)
-    }
-    // 附件
-    if (this._attachmentData) {
-      textContentWidth += this._attachmentData.width
-      textContentHeight = Math.max(
-        textContentHeight,
-        this._attachmentData.height
-      )
-    }
-    // 自定义后置内容
-    if (this._postfixData) {
-      textContentWidth += this._postfixData.width
-      textContentHeight = Math.max(textContentHeight, this._postfixData.height)
-    }
-    // 文字内容部分的尺寸
-    this._rectInfo.textContentWidth = textContentWidth
-    this._rectInfo.textContentHeight = textContentHeight
-    // 间距
-    let margin =
-      imgContentHeight > 0 && textContentHeight > 0
-        ? this.blockContentMargin
-        : 0
-    const { paddingX, paddingY } = this.getPaddingVale()
-    // 纯内容宽高
-    let _width = Math.max(imgContentWidth, textContentWidth)
-    let _height = imgContentHeight + textContentHeight
-    // 如果标签在文字下方
-    if (tagIsBottom && tagContentHeight > 0 && textContentHeight > 0) {
-      // 那么文字和标签之间也需要间距
-      margin += this.blockContentMargin
-      // 整体高度要考虑标签宽度
-      _width = Math.max(_width, tagContentWidth)
-      // 整体高度要加上标签的高度
-      _height += tagContentHeight
-    }
-    // 计算节点形状需要的附加内边距
-    const { paddingX: shapePaddingX, paddingY: shapePaddingY } =
-      this.shapeInstance.getShapePadding(_width, _height, paddingX, paddingY)
-    this.shapePadding.paddingX = shapePaddingX
-    this.shapePadding.paddingY = shapePaddingY
-    // 边框宽度，因为边框是以中线向两端发散，所以边框会超出节点
-    const borderWidth = this.getBorderWidth()
-    return {
-      width: _width + paddingX * 2 + shapePaddingX * 2 + borderWidth,
-      height: _height + paddingY * 2 + margin + shapePaddingY * 2 + borderWidth
-    }
-  }
-
-  //  定位节点内容
-  layout() {
-    if (!this.group) return
-    // 清除之前的内容
-    this.group.clear()
-    const { hoverRectPadding, tagPosition, openRealtimeRenderOnNodeTextEdit } =
-      this.mindMap.opt
-    let { width, height, textContentItemMargin } = this
-    let { paddingY } = this.getPaddingVale()
-    const halfBorderWidth = this.getBorderWidth() / 2
-    paddingY += this.shapePadding.paddingY + halfBorderWidth
-    // 节点形状
-    this.shapeNode = this.shapeInstance.createShape()
-    this.shapeNode.addClass('smm-node-shape')
-    this.shapeNode.translate(halfBorderWidth, halfBorderWidth)
-    this.style.shape(this.shapeNode)
-    this.group.add(this.shapeNode)
-    // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
-    this.renderExpandBtnPlaceholderRect()
-    // 创建协同头像节点
-    if (this.createUserListNode) this.createUserListNode()
-    // 概要节点添加一个带所属节点id的类名
-    if (this.isGeneralization && this.generalizationBelongNode) {
-      this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
-    }
-    // 激活hover和激活边框
-    const addHoverNode = () => {
-      this.hoverNode = new Rect()
-        .size(width + hoverRectPadding * 2, height + hoverRectPadding * 2)
-        .x(-hoverRectPadding)
-        .y(-hoverRectPadding)
-      this.hoverNode.addClass('smm-hover-node')
-      this.style.hoverNode(this.hoverNode, width, height)
-      this.group.add(this.hoverNode)
-    }
-    // 如果存在自定义节点内容，那么使用自定义节点内容
-    if (this.isUseCustomNodeContent()) {
-      const foreignObject = createForeignObjectNode({
-        el: this._customNodeContent,
-        width,
-        height
-      })
-      this.group.add(foreignObject)
-      addHoverNode()
-      return
-    }
-    const tagIsBottom = tagPosition === CONSTANTS.TAG_POSITION.BOTTOM
-    const { textContentHeight } = this._rectInfo
-    // 图片节点
-    let imgHeight = 0
-    if (this._imgData) {
-      imgHeight = this._imgData.height
-      this.group.add(this._imgData.node)
-      this._imgData.node.cx(width / 2).y(paddingY)
-    }
-    // 内容节点
-    let textContentNested = new G()
-    let textContentOffsetX = 0
-    // 库前置内容
-    this.mindMap.nodeInnerPrefixList.forEach(item => {
-      const itemData = this[`_${item.name}Data`]
-      if (itemData) {
-        itemData.node
-          .x(textContentOffsetX)
-          .y((textContentHeight - itemData.height) / 2)
-        textContentNested.add(itemData.node)
-        textContentOffsetX += itemData.width + textContentItemMargin
-      }
-    })
-    // 自定义前置内容
-    if (this._prefixData) {
-      const foreignObject = createForeignObjectNode({
-        el: this._prefixData.el,
-        width: this._prefixData.width,
-        height: this._prefixData.height
-      })
-      foreignObject
-        .x(textContentOffsetX)
-        .y((textContentHeight - this._prefixData.height) / 2)
-      textContentNested.add(foreignObject)
-      textContentOffsetX += this._prefixData.width + textContentItemMargin
-    }
-    // icon
-    let iconNested = new G()
-    if (this._iconData && this._iconData.length > 0) {
-      let iconLeft = 0
-      this._iconData.forEach(item => {
-        item.node
-          .x(textContentOffsetX + iconLeft)
-          .y((textContentHeight - item.height) / 2)
-        iconNested.add(item.node)
-        iconLeft += item.width + textContentItemMargin
-      })
-      textContentNested.add(iconNested)
-      textContentOffsetX += iconLeft
-    }
-    // 文字
-    if (this._textData) {
-      const oldX = this._textData.node.attr('data-offsetx') || 0
-      this._textData.node.attr('data-offsetx', textContentOffsetX)
-      // 修复safari浏览器节点存在图标时文字位置不正确的问题
-      ;(this._textData.nodeContent || this._textData.node)
-        .x(-oldX) // 修复非富文本模式下同时存在图标和换行的文本时，被收起和展开时图标与文字距离会逐渐拉大的问题
-        .x(textContentOffsetX)
-        .y((textContentHeight - this._textData.height) / 2)
-      // 如果开启了文本编辑实时渲染，需要判断当前渲染的节点是否是正在编辑的节点，是的话将透明度设置为0不显示
-      if (openRealtimeRenderOnNodeTextEdit) {
-        this._textData.node.opacity(
-          this.mindMap.renderer.textEdit.getCurrentEditNode() === this ? 0 : 1
-        )
-      }
-      textContentNested.add(this._textData.node)
-      textContentOffsetX += this._textData.width + textContentItemMargin
-    }
-    // 超链接
-    if (this._hyperlinkData) {
-      this._hyperlinkData.node
-        .x(textContentOffsetX)
-        .y((textContentHeight - this._hyperlinkData.height) / 2)
-      textContentNested.add(this._hyperlinkData.node)
-      textContentOffsetX += this._hyperlinkData.width + textContentItemMargin
-    }
-    // 标签
-    let tagNested = new G()
-    if (this._tagData && this._tagData.length > 0) {
-      if (tagIsBottom) {
-        // 标签显示在文字下方
-        let tagLeft = 0
-        this._tagData.forEach(item => {
-          item.node.x(tagLeft).y(0)
-          tagNested.add(item.node)
-          tagLeft += item.width + textContentItemMargin
-        })
-        tagNested.cx(width / 2).y(
-          paddingY + // 内边距
-            imgHeight + // 图片高度
-            textContentHeight + // 文本区域高度
-            (imgHeight > 0 && textContentHeight > 0
-              ? this.blockContentMargin
-              : 0) + // 图片和文本之间的间距
-            this.blockContentMargin // 标签和文本之间的间距
-        )
-        this.group.add(tagNested)
-      } else {
-        // 标签显示在文字右侧
-        let tagLeft = 0
-        this._tagData.forEach(item => {
-          item.node
-            .x(textContentOffsetX + tagLeft)
-            .y((textContentHeight - item.height) / 2)
-          tagNested.add(item.node)
-          tagLeft += item.width + textContentItemMargin
-        })
-        textContentNested.add(tagNested)
-        textContentOffsetX += tagLeft
-      }
-    }
-    // 备注
-    if (this._noteData) {
-      this._noteData.node
-        .x(textContentOffsetX)
-        .y((textContentHeight - this._noteData.height) / 2)
-      textContentNested.add(this._noteData.node)
-      textContentOffsetX += this._noteData.width
-    }
-    // 附件
-    if (this._attachmentData) {
-      this._attachmentData.node
-        .x(textContentOffsetX)
-        .y((textContentHeight - this._attachmentData.height) / 2)
-      textContentNested.add(this._attachmentData.node)
-      textContentOffsetX += this._attachmentData.width
-    }
-    // 自定义后置内容
-    if (this._postfixData) {
-      const foreignObject = createForeignObjectNode({
-        el: this._postfixData.el,
-        width: this._postfixData.width,
-        height: this._postfixData.height
-      })
-      foreignObject
-        .x(textContentOffsetX)
-        .y((textContentHeight - this._postfixData.height) / 2)
-      textContentNested.add(foreignObject)
-      textContentOffsetX += this._postfixData.width
-    }
-    this.group.add(textContentNested)
-    // 文字内容整体
-    textContentNested.translate(
-      width / 2 - textContentNested.bbox().width / 2,
-      paddingY + // 内边距
-        imgHeight + // 图片高度
-        (imgHeight > 0 && textContentHeight > 0 ? this.blockContentMargin : 0) // 和图片的间距
-    )
-    addHoverNode()
-    this.mindMap.emit('node_layout_end', this)
-  }
-
   // 给节点绑定事件
   bindGroupEvent() {
     // 单击事件，选中节点
@@ -780,10 +483,15 @@ class MindMapNode {
       return
     }
     this.updateNodeActiveClass()
-    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    const {
+      alwaysShowExpandBtn,
+      notShowExpandBtn,
+      isShowCreateChildBtnIcon,
+      readonly
+    } = this.mindMap.opt
+    const childrenLength = this.getChildrenLength()
     // 不显示展开收起按钮则不需要处理
     if (!notShowExpandBtn) {
-      const childrenLength = this.nodeData.children.length
       if (alwaysShowExpandBtn) {
         // 需要移除展开收缩按钮
         if (this._expandBtn && childrenLength <= 0) {
@@ -804,6 +512,19 @@ class MindMapNode {
         }
       }
     }
+    // 更新快速创建子节点按钮
+    if (isShowCreateChildBtnIcon) {
+      if (childrenLength > 0) {
+        this.removeQuickCreateChildBtn()
+      } else {
+        const { isActive } = this.getData()
+        if (isActive) {
+          this.showQuickCreateChildBtn()
+        } else {
+          this.hideQuickCreateChildBtn()
+        }
+      }
+    }
     // 更新拖拽手柄的显示与否
     this.updateDragHandle()
     // 更新概要
@@ -813,7 +534,7 @@ class MindMapNode {
     // 更新节点位置
     const t = this.group.transform()
     // 保存一份当前节点数据快照
-    this.nodeDataSnapshot = JSON.stringify(this.getData())
+    this.nodeDataSnapshot = readonly ? '' : JSON.stringify(this.getData())
     // 节点位置变化才更新，因为即使值没有变化属性设置操作也是耗时的
     if (this.left !== t.translateX || this.top !== t.translateY) {
       this.group.translate(this.left - t.translateX, this.top - t.translateY)
@@ -861,11 +582,18 @@ class MindMapNode {
   // 根据是否激活更新节点
   updateNodeByActive(active) {
     if (this.group) {
+      const { isShowCreateChildBtnIcon } = this.mindMap.opt
       // 切换激活状态，需要切换展开收起按钮的显隐
       if (active) {
         this.showExpandBtn()
+        if (isShowCreateChildBtnIcon) {
+          this.showQuickCreateChildBtn()
+        }
       } else {
         this.hideExpandBtn()
+        if (isShowCreateChildBtnIcon) {
+          this.hideQuickCreateChildBtn()
+        }
       }
       this.updateNodeActiveClass()
       this.updateDragHandle()
@@ -1088,13 +816,12 @@ class MindMapNode {
     if (this.getData('expand') === false) {
       return
     }
-    let childrenLen = this.nodeData.children.length
+    let childrenLen = this.getChildrenLength()
     // 切换为鱼骨结构时，清空根节点和二级节点的连线
-    if (
-      this.mindMap.opt.layout === CONSTANTS.LAYOUT.FISHBONE &&
-      (this.isRoot || this.layerIndex === 1)
-    ) {
-      childrenLen = 0
+    if (this.mindMap.renderer.layout.nodeIsRemoveAllLines) {
+      if (this.mindMap.renderer.layout.nodeIsRemoveAllLines(this)) {
+        childrenLen = 0
+      }
     }
     if (childrenLen > this._lines.length) {
       // 创建缺少的线
@@ -1170,15 +897,18 @@ class MindMapNode {
 
   //  设置连线样式
   styleLine(line, childNode, enableMarker) {
+    const { enableInheritAncestorLineStyle } = this.mindMap.opt
+    const getName = enableInheritAncestorLineStyle
+      ? 'getSelfInhertStyle'
+      : 'getSelfStyle'
     const width =
-      childNode.getSelfInhertStyle('lineWidth') ||
-      childNode.getStyle('lineWidth', true)
+      childNode[getName]('lineWidth') || childNode.getStyle('lineWidth', true)
     const color =
-      childNode.getSelfInhertStyle('lineColor') ||
+      childNode[getName]('lineColor') ||
       this.getRainbowLineColor(childNode) ||
       childNode.getStyle('lineColor', true)
     const dasharray =
-      childNode.getSelfInhertStyle('lineDasharray') ||
+      childNode[getName]('lineDasharray') ||
       childNode.getStyle('lineDasharray', true)
     this.style.line(
       line,
@@ -1405,6 +1135,11 @@ class MindMapNode {
       this.customTextWidth !== undefined
     )
   }
+
+  // 获取子节点的数量
+  getChildrenLength() {
+    return this.nodeData.children ? this.nodeData.children.length : 0
+  }
 }
 
 export default MindMapNode

simple-mind-map/src/core/render/node/Shape.js

@@ -52,14 +52,36 @@ export default class Shape {
           paddingX: actHeight > actWidth ? actOffset / 2 : 0,
           paddingY: actHeight < actWidth ? actOffset / 2 : 0
         }
-      default:
-        return {
+    }
+    const extendShape = this.getShapeFromExtendList(shape)
+    if (extendShape) {
+      return (
+        extendShape.getPadding({
+          node: this.node,
+          width,
+          height,
+          paddingX,
+          paddingY
+        }) || {
           paddingX: 0,
           paddingY: 0
         }
+      )
+    } else {
+      return {
+        paddingX: 0,
+        paddingY: 0
+      }
     }
   }
 
+  // 从形状扩展列表里获取指定名称的形状
+  getShapeFromExtendList(shape) {
+    return this.mindMap.extendShapeList.find(item => {
+      return item.name === shape
+    })
+  }
+
   //  创建形状节点
   createShape() {
     const shape = this.node.getShape()
@@ -92,7 +114,13 @@ export default class Shape {
       // 圆
       node = this.createCircle()
     }
-    return node
+    if (!node) {
+      const extendShape = this.getShapeFromExtendList(shape)
+      if (extendShape) {
+        node = extendShape.createShape(this.node)
+      }
+    }
+    return node || this.createRect()
   }
 
   // 获取节点减去节点边框宽度、hover节点边框宽度后的尺寸

simple-mind-map/src/core/render/node/Style.js

@@ -8,6 +8,18 @@ const backgroundStyleProps = [
   'backgroundSize'
 ]
 
+export const shapeStyleProps = [
+  'gradientStyle',
+  'startColor',
+  'endColor',
+  'startDir',
+  'endDir',
+  'fillColor',
+  'borderColor',
+  'borderWidth',
+  'borderDasharray'
+]
+
 //  样式类
 class Style {
   //   设置背景样式
@@ -112,6 +124,8 @@ class Style {
 
   // 更新当前节点生效的样式数据
   addToEffectiveStyles(styles) {
+    // effectiveStyles目前只提供给格式刷插件使用，所以如果没有注册该插件，那么不需要保存该数据
+    if (!this.ctx.mindMap.painter) return
     this.ctx.effectiveStyles = {
       ...this.ctx.effectiveStyles,
       ...styles
@@ -126,17 +140,10 @@ class Style {
 
   // 形状
   shape(node) {
-    const styles = {
-      gradientStyle: this.merge('gradientStyle'),
-      startColor: this.merge('startColor'),
-      endColor: this.merge('endColor'),
-      startDir: this.merge('startDir'),
-      endDir: this.merge('endDir'),
-      fillColor: this.merge('fillColor'),
-      borderColor: this.merge('borderColor'),
-      borderWidth: this.merge('borderWidth'),
-      borderDasharray: this.merge('borderDasharray')
-    }
+    const styles = {}
+    shapeStyleProps.forEach(key => {
+      styles[key] = this.merge(key)
+    })
     if (styles.gradientStyle) {
       if (!this._gradient) {
         this._gradient = this.ctx.nodeDraw.gradient('linear')
@@ -191,45 +198,6 @@ class Style {
       })
   }
 
-  // 生成内联样式
-  createStyleText(customStyle = {}) {
-    const styles = {
-      color: this.merge('color'),
-      fontFamily: this.merge('fontFamily'),
-      fontSize: this.merge('fontSize'),
-      fontWeight: this.merge('fontWeight'),
-      fontStyle: this.merge('fontStyle'),
-      textDecoration: this.merge('textDecoration'),
-      ...customStyle
-    }
-    return `
-      color: ${styles.color};
-      font-family: ${styles.fontFamily};
-      font-size: ${styles.fontSize + 'px'};
-      font-weight: ${styles.fontWeight};
-      font-style: ${styles.fontStyle};
-      text-decoration: ${styles.textDecoration}
-    `
-  }
-
-  // 获取文本样式
-  getTextFontStyle() {
-    const styles = {
-      color: this.merge('color'),
-      fontFamily: this.merge('fontFamily'),
-      fontSize: this.merge('fontSize'),
-      fontWeight: this.merge('fontWeight'),
-      fontStyle: this.merge('fontStyle'),
-      textDecoration: this.merge('textDecoration')
-    }
-    return {
-      italic: styles.fontStyle === 'italic',
-      bold: styles.fontWeight,
-      fontSize: styles.fontSize,
-      fontFamily: styles.fontFamily
-    }
-  }
-
   //  html文字节点
   domText(node, fontSizeScale = 1) {
     const styles = {
@@ -238,7 +206,8 @@ class Style {
       fontSize: this.merge('fontSize'),
       fontWeight: this.merge('fontWeight'),
       fontStyle: this.merge('fontStyle'),
-      textDecoration: this.merge('textDecoration')
+      textDecoration: this.merge('textDecoration'),
+      textAlign: this.merge('textAlign')
     }
     node.style.color = styles.color
     node.style.textDecoration = styles.textDecoration
@@ -246,6 +215,7 @@ class Style {
     node.style.fontSize = styles.fontSize * fontSizeScale + 'px'
     node.style.fontWeight = styles.fontWeight || 'normal'
     node.style.fontStyle = styles.fontStyle
+    node.style.textAlign = styles.textAlign
   }
 
   //  标签文字
@@ -270,9 +240,9 @@ class Style {
   }
 
   //  内置图标
-  iconNode(node) {
+  iconNode(node, color) {
     node.attr({
-      fill: this.merge('color')
+      fill: color || this.merge('color')
     })
   }
 

simple-mind-map/src/core/render/node/nodeCreateContents.js

@@ -1,19 +1,17 @@
 import {
   resizeImgSize,
-  removeHtmlStyle,
-  addHtmlStyle,
+  removeRichTextStyes,
   checkIsRichText,
   isUndef,
   createForeignObjectNode,
   addXmlns,
-  generateColorByContent
+  generateColorByContent,
+  camelCaseToHyphen,
+  getNodeRichTextStyles
 } from '../../../utils'
 import { Image as SVGImage, SVG, A, G, Rect, Text } from '@svgdotjs/svg.js'
 import iconsSvg from '../../../svg/icons'
-import {
-  CONSTANTS,
-  noneRichTextNodeLineHeight
-} from '../../../constants/constant'
+import { noneRichTextNodeLineHeight } from '../../../constants/constant'
 
 // 测量svg文本宽高
 const measureText = (text, style) => {
@@ -34,12 +32,20 @@ const defaultTagStyle = {
   //width: 30 // 标签矩形的宽度，如果不设置，默认以文字的宽度+paddingX*2为宽度
 }
 
+// 获取图片的真实url
+// 因为如果注册了NodeBase64ImageStorage插件，那么节点图片字段保存的实际是一个id，所以如果要获取图片真实的url可以通过该方法
+function getImageUrl() {
+  const img = this.getData('image')
+  return (this.mindMap.renderer.renderTree.data.imgMap || {})[img] || img
+}
+
 //  创建图片节点
 function createImgNode() {
-  const img = this.getData('image')
+  const img = this.getImageUrl()
   if (!img) {
     return
   }
+  img = (this.mindMap.renderer.renderTree.data.imgMap || {})[img] || img
   const imgSize = this.getImgShowSize()
   const node = new SVGImage().load(img).size(...imgSize)
   // 如果指定了加载失败显示的图片，那么加载一下图片检测是否失败
@@ -54,8 +60,11 @@ function createImgNode() {
   if (this.getData('imageTitle')) {
     node.attr('title', this.getData('imageTitle'))
   }
+  node.on('click', e => {
+    this.mindMap.emit('node_img_click', this, node, e)
+  })
   node.on('dblclick', e => {
-    this.mindMap.emit('node_img_dblclick', this, e)
+    this.mindMap.emit('node_img_dblclick', this, e, node)
   })
   node.on('mouseenter', e => {
     this.mindMap.emit('node_img_mouseenter', this, node, e)
@@ -124,20 +133,6 @@ function createIconNode() {
   })
 }
 
-// 尝试给html指定标签添加内联样式
-function tryAddHtmlStyle(text, style) {
-  const tagList = ['span', 'strong', 's', 'em', 'u']
-  // let _text = text
-  // for (let i = 0; i < tagList.length; i++) {
-  //   text = addHtmlStyle(text, tagList[i], style)
-  //   if (text !== _text) {
-  //     break
-  //   }
-  // }
-  // return text
-  return addHtmlStyle(text, tagList, style)
-}
-
 // 创建富文本节点
 function createRichTextNode(specifyText) {
   const hasCustomWidth = this.hasCustomWidth()
@@ -145,40 +140,32 @@ function createRichTextNode(specifyText) {
     typeof specifyText === 'string' ? specifyText : this.getData('text')
   let { textAutoWrapWidth, emptyTextMeasureHeightText } = this.mindMap.opt
   textAutoWrapWidth = hasCustomWidth ? this.customTextWidth : textAutoWrapWidth
-  let g = new G()
-  // 重新设置富文本节点内容
+  const g = new G()
+  // 创建富文本结构，或复位富文本样式
   let recoverText = false
   if (this.getData('resetRichText')) {
     delete this.nodeData.data.resetRichText
     recoverText = true
   }
-  if ([CONSTANTS.CHANGE_THEME].includes(this.mindMap.renderer.renderSource)) {
-    // 如果自定义过样式则不允许覆盖
-    // if (!this.hasCustomStyle() ) {
-    recoverText = true
-    // }
-  }
   if (recoverText && !isUndef(text)) {
-    // 判断节点内容是否是富文本
-    const isRichText = checkIsRichText(text)
-    // 获取自定义样式
-    const customStyle = this.style.getCustomStyle()
-    // 样式字符串
-    const style = this.style.createStyleText(customStyle)
-    if (isRichText) {
-      // 如果是富文本那么线移除内联样式
-      text = removeHtmlStyle(text)
-      // 再添加新的内联样式
-      text = this.tryAddHtmlStyle(text, style)
+    if (checkIsRichText(text)) {
+      // 如果是富文本那么移除内联样式
+      text = removeRichTextStyes(text)
     } else {
-      // 非富文本
-      text = `<p><span style="${style}">${text}</span></p>`
+      // 非富文本则改为富文本结构
+      text = `<p>${text}</p>`
     }
     this.setData({
-      text: text
+      text
     })
   }
-  let html = `<div>${text}</div>`
+  // 节点的富文本样式数据
+  const nodeTextStyleList = []
+  const nodeRichTextStyles = getNodeRichTextStyles(this)
+  Object.keys(nodeRichTextStyles).forEach(prop => {
+    nodeTextStyleList.push([prop, nodeRichTextStyles[prop]])
+  })
+  // 测量文本大小
   if (!this.mindMap.commonCaches.measureRichtextNodeTextSizeEl) {
     this.mindMap.commonCaches.measureRichtextNodeTextSizeEl =
       document.createElement('div')
@@ -190,9 +177,15 @@ function createRichTextNode(specifyText) {
       this.mindMap.commonCaches.measureRichtextNodeTextSizeEl
     )
   }
-  let div = this.mindMap.commonCaches.measureRichtextNodeTextSizeEl
+  const div = this.mindMap.commonCaches.measureRichtextNodeTextSizeEl
+  // 应用节点的文本样式
+  nodeTextStyleList.forEach(([prop, value]) => {
+    div.style[prop] = value
+  })
+  div.style.lineHeight = 1.2
+  const html = `<div>${text}</div>`
   div.innerHTML = html
-  let el = div.children[0]
+  const el = div.children[0]
   el.classList.add('smm-richtext-node-wrap')
   addXmlns(el)
   el.style.maxWidth = textAutoWrapWidth + 'px'
@@ -219,6 +212,15 @@ function createRichTextNode(specifyText) {
     width,
     height
   })
+  // 应用节点文本样式
+  // 进入文本编辑时，这个样式也会同样添加到文本编辑框的元素上
+  const foreignObjectStyle = {
+    'line-height': 1.2
+  }
+  nodeTextStyleList.forEach(([prop, value]) => {
+    foreignObjectStyle[camelCaseToHyphen(prop)] = value
+  })
+  foreignObject.css(foreignObjectStyle)
   g.add(foreignObject)
   return {
     node: g,
@@ -230,6 +232,10 @@ function createRichTextNode(specifyText) {
 
 //  创建文本节点
 function createTextNode(specifyText) {
+  if (this.getData('needUpdate')) {
+    delete this.nodeData.data.needUpdate
+  }
+  // 如果是富文本内容，那么转给富文本函数
   if (this.getData('richText')) {
     return this.createRichTextNode(specifyText)
   }
@@ -238,8 +244,9 @@ function createTextNode(specifyText) {
   if (this.getData('resetRichText')) {
     delete this.nodeData.data.resetRichText
   }
-  let g = new G()
-  let fontSize = this.getStyle('fontSize', false)
+  const g = new G()
+  const fontSize = this.getStyle('fontSize', false)
+  const textAlign = this.getStyle('textAlign', false)
   // 文本超长自动换行
   let textArr = []
   if (!isUndef(text)) {
@@ -279,6 +286,14 @@ function createTextNode(specifyText) {
     }
     const node = new Text().text(item)
     node.addClass('smm-text-node-wrap')
+    node.attr(
+      'text-anchor',
+      {
+        left: 'start',
+        center: 'middle',
+        right: 'end'
+      }[textAlign] || 'start'
+    )
     this.style.text(node)
     node.y(
       fontSize * noneRichTextNodeLineHeight * index +
@@ -308,15 +323,16 @@ function createTextNode(specifyText) {
 
 //  创建超链接节点
 function createHyperlinkNode() {
-  let { hyperlink, hyperlinkTitle } = this.getData()
+  const { hyperlink, hyperlinkTitle } = this.getData()
   if (!hyperlink) {
     return
   }
-  const { customHyperlinkJump } = this.mindMap.opt
-  let iconSize = this.mindMap.themeConfig.iconSize
-  let node = new SVG().size(iconSize, iconSize)
+  const { customHyperlinkJump, hyperlinkIcon } = this.mindMap.opt
+  const { icon, style } = hyperlinkIcon
+  const iconSize = this.getNodeIconSize('hyperlinkIcon')
+  const node = new SVG().size(iconSize, iconSize)
   // 超链接节点
-  let a = new A().to(hyperlink).target('_blank')
+  const a = new A().to(hyperlink).target('_blank')
   a.node.addEventListener('click', e => {
     if (typeof customHyperlinkJump === 'function') {
       e.preventDefault()
@@ -329,8 +345,8 @@ function createHyperlinkNode() {
   // 添加一个透明的层，作为鼠标区域
   a.rect(iconSize, iconSize).fill({ color: 'transparent' })
   // 超链接图标
-  let iconNode = SVG(iconsSvg.hyperlink).size(iconSize, iconSize)
-  this.style.iconNode(iconNode)
+  const iconNode = SVG(icon || iconsSvg.hyperlink).size(iconSize, iconSize)
+  this.style.iconNode(iconNode, style.color)
   a.add(iconNode)
   node.add(a)
   return {
@@ -415,16 +431,17 @@ function createNoteNode() {
   if (!this.getData('note')) {
     return null
   }
-  let iconSize = this.mindMap.themeConfig.iconSize
-  let node = new SVG()
+  const { icon, style } = this.mindMap.opt.noteIcon
+  const iconSize = this.getNodeIconSize('noteIcon')
+  const node = new SVG()
     .attr('cursor', 'pointer')
     .addClass('smm-node-note')
     .size(iconSize, iconSize)
   // 透明的层，用来作为鼠标区域
   node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
   // 备注图标
-  let iconNode = SVG(iconsSvg.note).size(iconSize, iconSize)
-  this.style.iconNode(iconNode)
+  const iconNode = SVG(icon || iconsSvg.note).size(iconSize, iconSize)
+  this.style.iconNode(iconNode, style.color)
   node.add(iconNode)
   // 备注tooltip
   if (!this.mindMap.opt.customNoteContentShow) {
@@ -486,7 +503,8 @@ function createAttachmentNode() {
   if (!attachmentUrl) {
     return
   }
-  const iconSize = this.mindMap.themeConfig.iconSize
+  const iconSize = this.getNodeIconSize('attachmentIcon')
+  const { icon, style } = this.mindMap.opt.attachmentIcon
   const node = new SVG().attr('cursor', 'pointer').size(iconSize, iconSize)
   if (attachmentName) {
     node.add(SVG(`<title>${attachmentName}</title>`))
@@ -494,8 +512,8 @@ function createAttachmentNode() {
   // 透明的层，用来作为鼠标区域
   node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
   // 备注图标
-  const iconNode = SVG(iconsSvg.attachment).size(iconSize, iconSize)
-  this.style.iconNode(iconNode)
+  const iconNode = SVG(icon || iconsSvg.attachment).size(iconSize, iconSize)
+  this.style.iconNode(iconNode, style.color)
   node.add(iconNode)
   node.on('click', e => {
     this.mindMap.emit('node_attachmentClick', this, e, node)
@@ -510,9 +528,15 @@ function createAttachmentNode() {
   }
 }
 
+// 获取节点图标大小
+function getNodeIconSize(prop) {
+  const { style } = this.mindMap.opt[prop]
+  return isUndef(style.size) ? this.mindMap.themeConfig.iconSize : style.size
+}
+
 // 获取节点备注显示位置
 function getNoteContentPosition() {
-  const iconSize = this.mindMap.themeConfig.iconSize
+  const iconSize = this.getNodeIconSize('noteIcon')
   const { scaleY } = this.mindMap.view.getTransformData().transform
   const iconSizeAddScale = iconSize * scaleY
   let { left, top } = this._noteData.node.node.getBoundingClientRect()
@@ -553,10 +577,10 @@ function isUseCustomNodeContent() {
 }
 
 export default {
+  getImageUrl,
   createImgNode,
   getImgShowSize,
   createIconNode,
-  tryAddHtmlStyle,
   createRichTextNode,
   createTextNode,
   createHyperlinkNode,
@@ -564,6 +588,7 @@ export default {
   createNoteNode,
   createAttachmentNode,
   getNoteContentPosition,
+  getNodeIconSize,
   measureCustomNodeContentSize,
   isUseCustomNodeContent
 }

simple-mind-map/src/core/render/node/nodeExpandBtn.js

@@ -7,34 +7,36 @@ function createExpandNodeContent() {
   if (this._openExpandNode) {
     return
   }
-  let { close, open } = this.mindMap.opt.expandBtnIcon || {}
+  const { expandBtnSize, expandBtnIcon, isShowExpandNum } = this.mindMap.opt
+  let { close, open } = expandBtnIcon || {}
   // 根据配置判断是否显示数量按钮
-  if (this.mindMap.opt.isShowExpandNum) {
+  if (isShowExpandNum) {
     // 展开的节点
     this._openExpandNode = new Text()
+    this._openExpandNode.addClass('smm-expand-btn-text')
     // 文本垂直居中
     this._openExpandNode.attr({
       'text-anchor': 'middle',
       'dominant-baseline': 'middle',
-      x: this.expandBtnSize / 2,
+      x: expandBtnSize / 2,
       y: 2
     })
   } else {
     this._openExpandNode = SVG(open || btnsSvg.open).size(
-      this.expandBtnSize,
-      this.expandBtnSize
+      expandBtnSize,
+      expandBtnSize
     )
-    this._openExpandNode.x(0).y(-this.expandBtnSize / 2)
+    this._openExpandNode.x(0).y(-expandBtnSize / 2)
   }
   // 收起的节点
   this._closeExpandNode = SVG(close || btnsSvg.close).size(
-    this.expandBtnSize,
-    this.expandBtnSize
+    expandBtnSize,
+    expandBtnSize
   )
-  this._closeExpandNode.x(0).y(-this.expandBtnSize / 2)
+  this._closeExpandNode.x(0).y(-expandBtnSize / 2)
   // 填充节点
-  this._fillExpandNode = new Circle().size(this.expandBtnSize)
-  this._fillExpandNode.x(0).y(-this.expandBtnSize / 2)
+  this._fillExpandNode = new Circle().size(expandBtnSize)
+  this._fillExpandNode.x(0).y(-expandBtnSize / 2)
 
   // 设置样式
   this.style.iconBtn(
@@ -78,7 +80,7 @@ function updateExpandBtnNode() {
           color: expandBtnStyle.strokeColor
         })
         // 计算子节点数量
-        let count = this.sumNode(this.nodeData.children)
+        let count = this.sumNode(this.nodeData.children || [])
         if (typeof expandBtnNumHandler === 'function') {
           const res = expandBtnNumHandler(count, this)
           if (!isUndef(res)) {
@@ -104,11 +106,7 @@ function updateExpandBtnPos() {
 
 //  创建展开收缩按钮
 function renderExpandBtn() {
-  if (
-    !this.nodeData.children ||
-    this.nodeData.children.length <= 0 ||
-    this.isRoot
-  ) {
+  if (this.getChildrenLength() <= 0 || this.isRoot) {
     return
   }
   if (this._expandBtn) {

simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js

@@ -3,15 +3,12 @@ import { Rect } from '@svgdotjs/svg.js'
 // 渲染展开收起按钮的隐藏占位元素
 function renderExpandBtnPlaceholderRect() {
   // 根节点或没有子节点不需要渲染
-  if (
-    !this.nodeData.children ||
-    this.nodeData.children.length <= 0 ||
-    this.isRoot
-  ) {
+  if (this.getChildrenLength() <= 0 || this.isRoot) {
     return
   }
   // 默认显示展开按钮的情况下或不显示展开收起按钮的情况下不需要渲染
-  const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+  const { alwaysShowExpandBtn, notShowExpandBtn, expandBtnSize } =
+    this.mindMap.opt
   if (!alwaysShowExpandBtn && !notShowExpandBtn) {
     let { width, height } = this
     if (!this._unVisibleRectRegionNode) {
@@ -23,7 +20,7 @@ function renderExpandBtnPlaceholderRect() {
     this.group.add(this._unVisibleRectRegionNode)
     this.renderer.layout.renderExpandBtnRect(
       this._unVisibleRectRegionNode,
-      this.expandBtnSize,
+      expandBtnSize,
       width,
       height,
       this
@@ -48,7 +45,7 @@ function updateExpandBtnPlaceholderRect() {
     this.renderExpandBtnPlaceholderRect()
   }
   // 没有子节点到有子节点需要渲染
-  if (this.nodeData.children && this.nodeData.children.length > 0) {
+  if (this.getChildrenLength() > 0) {
     if (!this._unVisibleRectRegionNode) {
       this.renderExpandBtnPlaceholderRect()
     }

simple-mind-map/src/core/render/node/nodeGeneralization.js

@@ -106,7 +106,7 @@ function renderGeneralization(forceRender) {
 
 // 更新节点概要数据
 function updateGeneralizationData() {
-  const childrenLength = this.nodeData.children.length
+  const childrenLength = this.getChildrenLength()
   const list = this.formatGetGeneralization()
   const newList = []
   list.forEach(item => {

simple-mind-map/src/core/render/node/nodeLayout.js

@@ -0,0 +1,516 @@
+import { CONSTANTS } from '../../../constants/constant'
+import { G, Rect } from '@svgdotjs/svg.js'
+import { createForeignObjectNode } from '../../../utils/index'
+
+// 根据图片放置位置返回图片和文本的间距值
+function getImgTextMarin(dir, imgWidth, textWidth, imgHeight, textHeight) {
+  // 图片和文字节点的间距
+  const { imgTextMargin } = this.mindMap.opt
+  if (dir === 'v') {
+    // 垂直
+    return imgHeight > 0 && textHeight > 0 ? imgTextMargin : 0
+  } else {
+    // 水平
+    return imgWidth > 0 && textWidth > 0 ? imgTextMargin : 0
+  }
+}
+
+// 获取标签内容的大小
+function getTagContentSize(space) {
+  let maxTagHeight = 0
+  let width = this._tagData.reduce((sum, cur) => {
+    maxTagHeight = Math.max(maxTagHeight, cur.height)
+    return (sum += cur.width)
+  }, 0)
+  width += (this._tagData.length - 1) * space
+  return {
+    width,
+    height: maxTagHeight
+  }
+}
+
+//  计算节点尺寸信息
+function getNodeRect() {
+  // 自定义节点内容
+  if (this.isUseCustomNodeContent()) {
+    const rect = this.measureCustomNodeContentSize(
+      this._customNodeContent.cloneNode(true)
+    )
+    return {
+      width: this.hasCustomWidth() ? this.customTextWidth : rect.width,
+      height: rect.height
+    }
+  }
+  const { TAG_PLACEMENT, IMG_PLACEMENT } = CONSTANTS
+  const { textContentMargin } = this.mindMap.opt
+  const tagPlacement = this.getStyle('tagPlacement') || TAG_PLACEMENT.RIGHT
+  const tagIsBottom = tagPlacement === TAG_PLACEMENT.BOTTOM
+  const imgPlacement = this.getStyle('imgPlacement') || IMG_PLACEMENT.TOP
+  // 宽高
+  let imgContentWidth = 0
+  let imgContentHeight = 0
+  let textContentWidth = 0
+  let textContentHeight = 0
+  let tagContentWidth = 0
+  let tagContentHeight = 0
+  let spaceCount = 0
+  // 存在图片
+  if (this._imgData) {
+    imgContentWidth = this._imgData.width
+    imgContentHeight = this._imgData.height
+  }
+  // 库前置内容
+  this.mindMap.nodeInnerPrefixList.forEach(item => {
+    const itemData = this[`_${item.name}Data`]
+    if (itemData) {
+      textContentWidth += itemData.width
+      textContentHeight = Math.max(textContentHeight, itemData.height)
+      spaceCount++
+    }
+  })
+  // 自定义前置内容
+  if (this._prefixData) {
+    textContentWidth += this._prefixData.width
+    textContentHeight = Math.max(textContentHeight, this._prefixData.height)
+    spaceCount++
+  }
+  // 图标
+  if (this._iconData.length > 0) {
+    textContentWidth +=
+      this._iconData.reduce((sum, cur) => {
+        textContentHeight = Math.max(textContentHeight, cur.height)
+        return (sum += cur.width)
+      }, 0) +
+      (this._iconData.length - 1) * textContentMargin
+    spaceCount++
+  }
+  // 文字
+  if (this._textData) {
+    textContentWidth += this._textData.width
+    textContentHeight = Math.max(textContentHeight, this._textData.height)
+    spaceCount++
+  }
+  // 超链接
+  if (this._hyperlinkData) {
+    textContentWidth += this._hyperlinkData.width
+    textContentHeight = Math.max(textContentHeight, this._hyperlinkData.height)
+    spaceCount++
+  }
+  // 标签
+  if (this._tagData.length > 0) {
+    const { width: totalTagWidth, height: maxTagHeight } =
+      this.getTagContentSize(textContentMargin)
+    if (tagIsBottom) {
+      // 文字下方
+      tagContentWidth = totalTagWidth
+      tagContentHeight = maxTagHeight
+    } else {
+      // 否则在右侧
+      textContentWidth += totalTagWidth
+      textContentHeight = Math.max(textContentHeight, maxTagHeight)
+      spaceCount++
+    }
+  }
+  // 备注
+  if (this._noteData) {
+    textContentWidth += this._noteData.width
+    textContentHeight = Math.max(textContentHeight, this._noteData.height)
+    spaceCount++
+  }
+  // 附件
+  if (this._attachmentData) {
+    textContentWidth += this._attachmentData.width
+    textContentHeight = Math.max(textContentHeight, this._attachmentData.height)
+    spaceCount++
+  }
+  // 自定义后置内容
+  if (this._postfixData) {
+    textContentWidth += this._postfixData.width
+    textContentHeight = Math.max(textContentHeight, this._postfixData.height)
+    spaceCount++
+  }
+  // 库后置内容
+  this.mindMap.nodeInnerPostfixList.forEach(item => {
+    const itemData = this[`_${item.name}Data`]
+    if (itemData) {
+      textContentWidth += itemData.width
+      textContentHeight = Math.max(textContentHeight, itemData.height)
+      spaceCount++
+    }
+  })
+  textContentWidth += (spaceCount - 1) * textContentMargin
+  // 文字内容部分的尺寸
+  if (tagIsBottom && textContentWidth > 0 && tagContentHeight > 0) {
+    this._rectInfo.textContentWidthWithoutTag = textContentWidth
+    textContentWidth = Math.max(textContentWidth, tagContentWidth)
+    textContentHeight = textContentHeight + textContentMargin + tagContentHeight
+  }
+  this._rectInfo.textContentWidth = textContentWidth
+  this._rectInfo.textContentHeight = textContentHeight
+
+  // 纯内容宽高
+  let _width = 0
+  let _height = 0
+  if ([IMG_PLACEMENT.TOP, IMG_PLACEMENT.BOTTOM].includes(imgPlacement)) {
+    // 图片在上下
+    _width = Math.max(imgContentWidth, textContentWidth)
+    _height =
+      imgContentHeight +
+      textContentHeight +
+      this.getImgTextMarin('v', 0, 0, imgContentHeight, textContentHeight)
+  } else {
+    // 图片在左右
+    _width =
+      imgContentWidth +
+      textContentWidth +
+      this.getImgTextMarin('h', imgContentWidth, textContentWidth)
+    _height = Math.max(imgContentHeight, textContentHeight)
+  }
+  const { paddingX, paddingY } = this.getPaddingVale()
+  // 计算节点形状需要的附加内边距
+  const { paddingX: shapePaddingX, paddingY: shapePaddingY } =
+    this.shapeInstance.getShapePadding(_width, _height, paddingX, paddingY)
+  this.shapePadding.paddingX = shapePaddingX
+  this.shapePadding.paddingY = shapePaddingY
+  // 边框宽度，因为边框是以中线向两端发散，所以边框会超出节点
+  const borderWidth = this.getBorderWidth()
+  return {
+    width: _width + paddingX * 2 + shapePaddingX * 2 + borderWidth,
+    height: _height + paddingY * 2 + shapePaddingY * 2 + borderWidth
+  }
+}
+
+// 激活hover和激活边框
+function addHoverNode(width, height) {
+  const { hoverRectPadding } = this.mindMap.opt
+  this.hoverNode = new Rect()
+    .size(width + hoverRectPadding * 2, height + hoverRectPadding * 2)
+    .x(-hoverRectPadding)
+    .y(-hoverRectPadding)
+  this.hoverNode.addClass('smm-hover-node')
+  this.style.hoverNode(this.hoverNode, width, height)
+  this.group.add(this.hoverNode)
+}
+
+// 当使用了完全自定义节点内容后，可以通过该方法实时更新节点大小
+function customNodeContentRealtimeLayout() {
+  if (!this.group) return
+  if (!this.isUseCustomNodeContent()) return
+  // 删除除foreignObject外的其他元素
+  if (this.shapeNode) this.shapeNode.remove()
+  if (this._unVisibleRectRegionNode) this._unVisibleRectRegionNode.remove()
+  if (this.hoverNode) this.hoverNode.remove()
+  const { width, height } = this
+  const halfBorderWidth = this.getBorderWidth() / 2
+  // 节点形状
+  this.shapeNode = this.shapeInstance.createShape()
+  this.shapeNode.addClass('smm-node-shape')
+  this.shapeNode.translate(halfBorderWidth, halfBorderWidth)
+  this.style.shape(this.shapeNode)
+  this.group.add(this.shapeNode)
+  // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
+  this.renderExpandBtnPlaceholderRect()
+  // 概要节点添加一个带所属节点id的类名
+  if (this.isGeneralization && this.generalizationBelongNode) {
+    this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
+  }
+  // 激活hover和激活边框
+  this.addHoverNode(width, height)
+  // 将形状元素移至底层，避免遮挡foreignObject
+  this.shapeNode.back()
+  // 更新foreignObject元素大小
+  this.group.findOne('foreignObject').size(width, height)
+}
+
+//  定位节点内容
+function layout() {
+  if (!this.group) return
+  // 清除之前的内容
+  this.group.clear()
+  const {
+    openRealtimeRenderOnNodeTextEdit,
+    textContentMargin,
+    addCustomContentToNode
+  } = this.mindMap.opt
+  // 避免编辑过程中展开收起按钮闪烁的问题
+  // 暂时去掉，带来的问题太多
+  // if (
+  //   openRealtimeRenderOnNodeTextEdit &&
+  //   this._expandBtn &&
+  //   this.getChildrenLength() > 0
+  // ) {
+  //   this.group.add(this._expandBtn)
+  // }
+  const { width, height } = this
+  let { paddingX, paddingY } = this.getPaddingVale()
+  const halfBorderWidth = this.getBorderWidth() / 2
+  paddingX += this.shapePadding.paddingX + halfBorderWidth
+  paddingY += this.shapePadding.paddingY + halfBorderWidth
+  // 节点形状
+  this.shapeNode = this.shapeInstance.createShape()
+  this.shapeNode.addClass('smm-node-shape')
+  this.shapeNode.translate(halfBorderWidth, halfBorderWidth)
+  this.style.shape(this.shapeNode)
+  this.group.add(this.shapeNode)
+  // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
+  this.renderExpandBtnPlaceholderRect()
+  // 创建协同头像节点
+  if (this.createUserListNode) this.createUserListNode()
+  // 概要节点添加一个带所属节点id的类名
+  if (this.isGeneralization && this.generalizationBelongNode) {
+    this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
+  }
+  // 如果存在自定义节点内容，那么使用自定义节点内容
+  if (this.isUseCustomNodeContent()) {
+    const foreignObject = createForeignObjectNode({
+      el: this._customNodeContent,
+      width,
+      height
+    })
+    this.group.add(foreignObject)
+    this.addHoverNode(width, height)
+    return
+  }
+  const { IMG_PLACEMENT, TAG_PLACEMENT } = CONSTANTS
+  const imgPlacement = this.getStyle('imgPlacement') || IMG_PLACEMENT.TOP
+  const tagPlacement = this.getStyle('tagPlacement') || TAG_PLACEMENT.RIGHT
+  const tagIsBottom = tagPlacement === TAG_PLACEMENT.BOTTOM
+  let { textContentWidth, textContentHeight, textContentWidthWithoutTag } =
+    this._rectInfo
+  const textContentHeightWithTag = textContentHeight
+  // 如果存在显示在文本下方的标签，那么非标签内容的整体高度需要减去标签高度
+  let totalTagWidth = 0
+  let maxTagHeight = 0
+  const hasTagContent = this._tagData && this._tagData.length > 0
+  if (hasTagContent) {
+    const res = this.getTagContentSize(textContentMargin)
+    totalTagWidth = res.width
+    maxTagHeight = res.height
+    if (tagIsBottom) {
+      textContentHeight -= maxTagHeight + textContentMargin
+    }
+  }
+  // 图片节点
+  let imgWidth = 0
+  let imgHeight = 0
+  if (this._imgData) {
+    imgWidth = this._imgData.width
+    imgHeight = this._imgData.height
+    this.group.add(this._imgData.node)
+    switch (imgPlacement) {
+      case IMG_PLACEMENT.TOP:
+        this._imgData.node.cx(width / 2).y(paddingY)
+        break
+      case IMG_PLACEMENT.BOTTOM:
+        this._imgData.node.cx(width / 2).y(height - paddingY - imgHeight)
+        break
+      case IMG_PLACEMENT.LEFT:
+        this._imgData.node.x(paddingX).cy(height / 2)
+        break
+      case IMG_PLACEMENT.RIGHT:
+        this._imgData.node.x(width - paddingX - imgWidth).cy(height / 2)
+        break
+      default:
+        break
+    }
+  }
+  // 内容节点
+  let textContentNested = new G()
+  let textContentOffsetX = 0
+  if (hasTagContent && tagIsBottom) {
+    textContentOffsetX =
+      textContentWidthWithoutTag < textContentWidth
+        ? (textContentWidth - textContentWidthWithoutTag) / 2
+        : 0
+  }
+  // 库前置内容
+  this.mindMap.nodeInnerPrefixList.forEach(item => {
+    const itemData = this[`_${item.name}Data`]
+    if (itemData) {
+      itemData.node
+        .x(textContentOffsetX)
+        .y((textContentHeight - itemData.height) / 2)
+      textContentNested.add(itemData.node)
+      textContentOffsetX += itemData.width + textContentMargin
+    }
+  })
+  // 自定义前置内容
+  if (this._prefixData) {
+    const foreignObject = createForeignObjectNode({
+      el: this._prefixData.el,
+      width: this._prefixData.width,
+      height: this._prefixData.height
+    })
+    foreignObject
+      .x(textContentOffsetX)
+      .y((textContentHeight - this._prefixData.height) / 2)
+    textContentNested.add(foreignObject)
+    textContentOffsetX += this._prefixData.width + textContentMargin
+  }
+  // icon
+  let iconNested = new G()
+  if (this._iconData && this._iconData.length > 0) {
+    let iconLeft = 0
+    this._iconData.forEach(item => {
+      item.node
+        .x(textContentOffsetX + iconLeft)
+        .y((textContentHeight - item.height) / 2)
+      iconNested.add(item.node)
+      iconLeft += item.width + textContentMargin
+    })
+    textContentNested.add(iconNested)
+    textContentOffsetX += iconLeft
+  }
+  // 文字
+  if (this._textData) {
+    const oldX = this._textData.node.attr('data-offsetx') || 0
+    this._textData.node.attr('data-offsetx', textContentOffsetX)
+    // 修复safari浏览器节点存在图标时文字位置不正确的问题
+    ;(this._textData.nodeContent || this._textData.node)
+      .x(-oldX) // 修复非富文本模式下同时存在图标和换行的文本时，被收起和展开时图标与文字距离会逐渐拉大的问题
+      .x(textContentOffsetX)
+      .y((textContentHeight - this._textData.height) / 2)
+    // 如果开启了文本编辑实时渲染，需要判断当前渲染的节点是否是正在编辑的节点，是的话将透明度设置为0不显示
+    if (openRealtimeRenderOnNodeTextEdit) {
+      this._textData.node.opacity(
+        this.mindMap.renderer.textEdit.getCurrentEditNode() === this ? 0 : 1
+      )
+    }
+    textContentNested.add(this._textData.node)
+    textContentOffsetX += this._textData.width + textContentMargin
+  }
+  // 超链接
+  if (this._hyperlinkData) {
+    this._hyperlinkData.node
+      .x(textContentOffsetX)
+      .y((textContentHeight - this._hyperlinkData.height) / 2)
+    textContentNested.add(this._hyperlinkData.node)
+    textContentOffsetX += this._hyperlinkData.width + textContentMargin
+  }
+  // 标签
+  let tagNested = new G()
+  if (hasTagContent) {
+    if (tagIsBottom) {
+      // 标签显示在文字下方
+      let tagLeft = 0
+      this._tagData.forEach(item => {
+        item.node.x(tagLeft).y((maxTagHeight - item.height) / 2)
+        tagNested.add(item.node)
+        tagLeft += item.width + textContentMargin
+      })
+      tagNested
+        .x((textContentWidth - totalTagWidth) / 2)
+        .y(textContentHeightWithTag - maxTagHeight)
+      textContentNested.add(tagNested)
+    } else {
+      // 标签显示在文字右侧
+      let tagLeft = 0
+      this._tagData.forEach(item => {
+        item.node
+          .x(textContentOffsetX + tagLeft)
+          .y((textContentHeight - item.height) / 2)
+        tagNested.add(item.node)
+        tagLeft += item.width + textContentMargin
+      })
+      textContentNested.add(tagNested)
+      textContentOffsetX += tagLeft
+    }
+  }
+  // 备注
+  if (this._noteData) {
+    this._noteData.node
+      .x(textContentOffsetX)
+      .y((textContentHeight - this._noteData.height) / 2)
+    textContentNested.add(this._noteData.node)
+    textContentOffsetX += this._noteData.width + textContentMargin
+  }
+  // 附件
+  if (this._attachmentData) {
+    this._attachmentData.node
+      .x(textContentOffsetX)
+      .y((textContentHeight - this._attachmentData.height) / 2)
+    textContentNested.add(this._attachmentData.node)
+    textContentOffsetX += this._attachmentData.width + textContentMargin
+  }
+  // 自定义后置内容
+  if (this._postfixData) {
+    const foreignObject = createForeignObjectNode({
+      el: this._postfixData.el,
+      width: this._postfixData.width,
+      height: this._postfixData.height
+    })
+    foreignObject
+      .x(textContentOffsetX)
+      .y((textContentHeight - this._postfixData.height) / 2)
+    textContentNested.add(foreignObject)
+    textContentOffsetX += this._postfixData.width + textContentMargin
+  }
+  // 库后置内容
+  this.mindMap.nodeInnerPostfixList.forEach(item => {
+    const itemData = this[`_${item.name}Data`]
+    if (itemData) {
+      itemData.node
+        .x(textContentOffsetX)
+        .y((textContentHeight - itemData.height) / 2)
+      textContentNested.add(itemData.node)
+      textContentOffsetX += itemData.width + textContentMargin
+    }
+  })
+  this.group.add(textContentNested)
+  // 文字内容整体
+  const { width: bboxWidth, height: bboxHeight } = textContentNested.bbox()
+  let translateX = 0
+  let translateY = 0
+  switch (imgPlacement) {
+    case IMG_PLACEMENT.TOP:
+      translateX = width / 2 - bboxWidth / 2
+      translateY =
+        paddingY + // 内边距
+        imgHeight + // 图片高度
+        this.getImgTextMarin('v', 0, 0, imgHeight, textContentHeightWithTag) // 和图片的间距
+      break
+    case IMG_PLACEMENT.BOTTOM:
+      translateX = width / 2 - bboxWidth / 2
+      translateY = paddingY
+      break
+    case IMG_PLACEMENT.LEFT:
+      translateX =
+        imgWidth +
+        paddingX +
+        this.getImgTextMarin('h', imgWidth, textContentWidth)
+      translateY = height / 2 - bboxHeight / 2
+      break
+    case IMG_PLACEMENT.RIGHT:
+      translateX = paddingX
+      translateY = height / 2 - bboxHeight / 2
+      break
+  }
+  textContentNested.translate(translateX, translateY)
+  this.addHoverNode(width, height)
+  if (this._customContentAddToNodeAdd && this._customContentAddToNodeAdd.el) {
+    const foreignObject = createForeignObjectNode(
+      this._customContentAddToNodeAdd
+    )
+    this.group.add(foreignObject)
+    if (
+      addCustomContentToNode &&
+      typeof addCustomContentToNode.handle === 'function'
+    ) {
+      addCustomContentToNode.handle({
+        content: this._customContentAddToNodeAdd,
+        element: foreignObject,
+        node: this
+      })
+    }
+  }
+  this.mindMap.emit('node_layout_end', this)
+}
+
+export default {
+  getImgTextMarin,
+  getTagContentSize,
+  getNodeRect,
+  addHoverNode,
+  layout,
+  customNodeContentRealtimeLayout
+}

simple-mind-map/src/core/render/node/quickCreateChildBtn.js

@@ -0,0 +1,88 @@
+import btnsSvg from '../../../svg/btns'
+import { SVG, Circle, G } from '@svgdotjs/svg.js'
+
+function initQuickCreateChildBtn() {
+  if (this.isGeneralization) return
+  this._quickCreateChildBtn = null
+  this._showQuickCreateChildBtn = false
+}
+
+// 显示按钮
+function showQuickCreateChildBtn() {
+  if (this.isGeneralization || this.getChildrenLength() > 0) return
+  // 创建按钮
+  if (this._quickCreateChildBtn) {
+    this.group.add(this._quickCreateChildBtn)
+  } else {
+    const { quickCreateChildBtnIcon, expandBtnStyle, expandBtnSize } =
+      this.mindMap.opt
+    const { icon, style } = quickCreateChildBtnIcon
+    let { color, fill } = expandBtnStyle || {
+      color: '#808080',
+      fill: '#fff'
+    }
+    color = style.color || color
+    // 图标节点
+    const iconNode = SVG(icon || btnsSvg.quickCreateChild).size(
+      expandBtnSize,
+      expandBtnSize
+    )
+    iconNode.css({
+      cursor: 'pointer'
+    })
+    iconNode.x(0).y(-expandBtnSize / 2)
+    this.style.iconNode(iconNode, color)
+    // 填充节点
+    const fillNode = new Circle().size(expandBtnSize)
+    fillNode.x(0).y(-expandBtnSize / 2)
+    fillNode.fill({ color: fill }).css({
+      cursor: 'pointer'
+    })
+    // 容器节点
+    this._quickCreateChildBtn = new G()
+    this._quickCreateChildBtn.add(fillNode).add(iconNode)
+    this._quickCreateChildBtn.on('click', e => {
+      e.stopPropagation()
+      this.mindMap.emit('quick_create_btn_click', this)
+      const { customQuickCreateChildBtnClick } = this.mindMap.opt
+      if (typeof customQuickCreateChildBtnClick === 'function') {
+        customQuickCreateChildBtnClick(this)
+        return
+      }
+      this.mindMap.execCommand('INSERT_CHILD_NODE', true, [this])
+    })
+    this._quickCreateChildBtn.on('dblclick', e => {
+      e.stopPropagation()
+    })
+    this._quickCreateChildBtn.addClass('smm-quick-create-child-btn')
+    this.group.add(this._quickCreateChildBtn)
+  }
+  this._showQuickCreateChildBtn = true
+  // 更新按钮
+  this.renderer.layout.renderExpandBtn(this, this._quickCreateChildBtn)
+}
+
+//  移除按钮
+function removeQuickCreateChildBtn() {
+  if (this.isGeneralization) return
+  if (this._quickCreateChildBtn && this._showQuickCreateChildBtn) {
+    this._quickCreateChildBtn.remove()
+    this._showQuickCreateChildBtn = false
+  }
+}
+
+// 隐藏按钮
+function hideQuickCreateChildBtn() {
+  if (this.isGeneralization) return
+  const { isActive } = this.getData()
+  if (!isActive) {
+    this.removeQuickCreateChildBtn()
+  }
+}
+
+export default {
+  initQuickCreateChildBtn,
+  showQuickCreateChildBtn,
+  removeQuickCreateChildBtn,
+  hideQuickCreateChildBtn
+}

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

@@ -49,10 +49,7 @@ class Base {
 
   // 检查当前来源是否需要重新计算节点大小
   checkIsNeedResizeSources() {
-    return [
-      CONSTANTS.CHANGE_THEME,
-      CONSTANTS.TRANSFORM_TO_NORMAL_NODE
-    ].includes(this.renderer.renderSource)
+    return this.renderer.checkHasRenderSource(CONSTANTS.CHANGE_THEME)
   }
 
   // 层级类型改变
@@ -64,7 +61,7 @@ class Base {
 
   // 检查是否是结构布局改变重新渲染展开收起按钮占位元素
   checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(node) {
-    if (this.renderer.renderSource === CONSTANTS.CHANGE_LAYOUT) {
+    if (this.renderer.checkHasRenderSource(CONSTANTS.CHANGE_LAYOUT)) {
       node.needRerenderExpandBtnPlaceholderRect = true
     }
   }
@@ -77,10 +74,38 @@ class Base {
       lastData.isActive = curData.isActive
       lastData.expand = curData.expand
       lastData = JSON.stringify(lastData)
+    } else {
+      // 只在都有数据时才进行对比
+      return false
     }
     return lastData !== JSON.stringify(curData)
   }
 
+  // 检查库前置或后置内容是否改变了
+  checkNodeFixChange(newNode, nodeInnerPrefixData, nodeInnerPostfixData) {
+    // 库前置内容是否改变了
+    let isNodeInnerPrefixChange = false
+    this.mindMap.nodeInnerPrefixList.forEach(item => {
+      if (item.updateNodeData) {
+        const isChange = item.updateNodeData(newNode, nodeInnerPrefixData)
+        if (isChange) {
+          isNodeInnerPrefixChange = isChange
+        }
+      }
+    })
+    // 库后置内容是否改变了
+    let isNodeInnerPostfixChange = false
+    this.mindMap.nodeInnerPostfixList.forEach(item => {
+      if (item.updateNodeData) {
+        const isChange = item.updateNodeData(newNode, nodeInnerPostfixData)
+        if (isChange) {
+          isNodeInnerPostfixChange = isChange
+        }
+      }
+    })
+    return isNodeInnerPrefixChange || isNodeInnerPostfixChange
+  }
+
   //  创建节点实例
   createNode(data, parent, isRoot, layerIndex, index, ancestors) {
     // 创建节点
@@ -98,6 +123,20 @@ class Base {
         nodeInnerPrefixData[key] = value
       }
     })
+    // 库后置内容数据
+    const nodeInnerPostfixData = {}
+    this.mindMap.nodeInnerPostfixList.forEach(item => {
+      if (item.createNodeData) {
+        const [key, value] = item.createNodeData({
+          data,
+          parent,
+          ancestors,
+          layerIndex,
+          index
+        })
+        nodeInnerPostfixData[key] = value
+      }
+    })
     const uid = data.data.uid
     let newNode = null
     // 数据上保存了节点引用，那么直接复用节点
@@ -117,16 +156,12 @@ class Base {
       }
       this.cacheNode(data._node.uid, newNode)
       this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
-      // 库前置内容是否改变了
-      let isNodeInnerPrefixChange = false
-      this.mindMap.nodeInnerPrefixList.forEach(item => {
-        if (item.updateNodeData) {
-          const isChange = item.updateNodeData(newNode, nodeInnerPrefixData)
-          if (isChange) {
-            isNodeInnerPrefixChange = isChange
-          }
-        }
-      })
+      // 库前置或后置内容是否改变了
+      const isNodeInnerFixChange = this.checkNodeFixChange(
+        newNode,
+        nodeInnerPrefixData,
+        nodeInnerPostfixData
+      )
       // 主题或主题配置改变了
       const isResizeSource = this.checkIsNeedResizeSources()
       // 节点数据改变了
@@ -139,8 +174,10 @@ class Base {
         isResizeSource ||
         isNodeDataChange ||
         isLayerTypeChange ||
-        newNode.getData('resetRichText') ||
-        isNodeInnerPrefixChange
+        (newNode.getData('resetRichText') && // 自定义节点内容可以直接忽略resetRichText
+          !newNode.isUseCustomNodeContent()) ||
+        newNode.getData('needUpdate') ||
+        isNodeInnerFixChange
       ) {
         newNode.getSize()
         newNode.needLayout = true
@@ -177,23 +214,21 @@ class Base {
       const isResizeSource = this.checkIsNeedResizeSources()
       // 点数据改变了
       const isNodeDataChange = this.checkIsNodeDataChange(lastData, data.data)
-      // 库前置内容是否改变了
-      let isNodeInnerPrefixChange = false
-      this.mindMap.nodeInnerPrefixList.forEach(item => {
-        if (item.updateNodeData) {
-          const isChange = item.updateNodeData(newNode, nodeInnerPrefixData)
-          if (isChange) {
-            isNodeInnerPrefixChange = isChange
-          }
-        }
-      })
+      // 库前置或后置内容是否改变了
+      const isNodeInnerFixChange = this.checkNodeFixChange(
+        newNode,
+        nodeInnerPrefixData,
+        nodeInnerPostfixData
+      )
       // 重新计算节点大小和布局
       if (
         isResizeSource ||
         isNodeDataChange ||
         isLayerTypeChange ||
-        newNode.getData('resetRichText') ||
-        isNodeInnerPrefixChange
+        (newNode.getData('resetRichText') &&
+          !newNode.isUseCustomNodeContent()) ||
+        newNode.getData('needUpdate') ||
+        isNodeInnerFixChange
       ) {
         newNode.getSize()
         newNode.needLayout = true

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

@@ -2,14 +2,78 @@ import Base from './Base'
 import { walk, asyncRun, degToRad, getNodeIndexInNodeList } from '../utils'
 import { CONSTANTS } from '../constants/constant'
 import utils from './fishboneUtils'
+import { SVG } from '@svgdotjs/svg.js'
+import { shapeStyleProps } from '../core/render/node/Style'
 
 //  鱼骨图
 class Fishbone extends Base {
   //  构造函数
-  constructor(opt = {}) {
+  constructor(opt = {}, layout) {
     super(opt)
+    this.layout = layout
     this.indent = 0.3
     this.childIndent = 0.5
+    this.fishTail = null
+    this.maxx = 0
+    this.headRatio = 1
+    this.tailRatio = 0.6
+    this.paddingXRatio = 0.3
+    this.fishHeadPathStr =
+      'M4,181 C4,181, 0,177, 4,173 Q 96.09523809523809,0, 288.2857142857143,0 L 288.2857142857143,354 Q 48.047619047619044,354, 8,218.18367346938777 C8,218.18367346938777, 6,214.18367346938777, 8,214.18367346938777 L 41.183673469387756,214.18367346938777 Z'
+    this.fishTailPathStr =
+      'M 606.9342905223708 0 Q 713.1342905223709 -177 819.3342905223708 -177 L 766.2342905223709 0 L 819.3342905223708 177 Q 713.1342905223709 177 606.9342905223708 0 z'
+    this.bindEvent()
+    this.extendShape()
+    this.beforeChange = this.beforeChange.bind(this)
+  }
+
+  // 重新渲染时，节点连线是否全部删除
+  // 鱼尾鱼骨图会多渲染一些连线，按需删除无法删除掉，只能全部删除重新创建
+  nodeIsRemoveAllLines(node) {
+    return node.isRoot || node.layerIndex === 1
+  }
+
+  // 是否是带鱼头鱼尾的鱼骨图
+  isFishbone2() {
+    return this.layout === CONSTANTS.LAYOUT.FISHBONE2
+  }
+
+  bindEvent() {
+    if (!this.isFishbone2()) return
+    this.onCheckUpdateFishTail = this.onCheckUpdateFishTail.bind(this)
+    this.mindMap.on('afterExecCommand', this.onCheckUpdateFishTail)
+  }
+
+  unBindEvent() {
+    this.mindMap.off('afterExecCommand', this.onCheckUpdateFishTail)
+  }
+
+  // 扩展节点形状
+  extendShape() {
+    if (!this.isFishbone2()) return
+    // 扩展鱼头形状
+    this.mindMap.addShape({
+      name: 'fishHead',
+      createShape: node => {
+        const rect = SVG(`<path d="${this.fishHeadPathStr}"></path>`)
+        const { width, height } = node.shapeInstance.getNodeSize()
+        rect.size(width, height)
+        return rect
+      },
+      getPadding: ({ width, height, paddingX, paddingY }) => {
+        width += paddingX * 2
+        height += paddingY * 2
+        let shapePaddingX = this.paddingXRatio * width
+        let shapePaddingY = 0
+        width += shapePaddingX * 2
+        const newHeight = width / this.headRatio
+        shapePaddingY = (newHeight - height) / 2
+        return {
+          paddingX: shapePaddingX,
+          paddingY: shapePaddingY
+        }
+      }
+    })
   }
 
   //  布局
@@ -17,12 +81,14 @@ class Fishbone extends Base {
     let task = [
       () => {
         this.computedBaseValue()
+        this.addFishTail()
       },
       () => {
         this.computedLeftTopValue()
       },
       () => {
         this.adjustLeftTopValue()
+        this.updateFishTailPosition()
       },
       () => {
         callback(this.root)
@@ -31,14 +97,75 @@ class Fishbone extends Base {
     asyncRun(task)
   }
 
+  // 创建鱼尾
+  addFishTail() {
+    if (!this.isFishbone2()) return
+    const exist = this.mindMap.lineDraw.findOne('.smm-layout-fishbone-tail')
+    if (!exist) {
+      this.fishTail = SVG(`<path d="${this.fishTailPathStr}"></path>`)
+      this.fishTail.addClass('smm-layout-fishbone-tail')
+    } else {
+      this.fishTail = exist
+    }
+    const tailHeight = this.root.height
+    const tailWidth = tailHeight * this.tailRatio
+    this.fishTail.size(tailWidth, tailHeight)
+    this.styleFishTail()
+    this.mindMap.lineDraw.add(this.fishTail)
+  }
+
+  // 如果根节点更新了形状样式，那么鱼尾也要更新
+  onCheckUpdateFishTail(name, node, data) {
+    if (name === 'SET_NODE_DATA') {
+      let hasShapeProp = false
+      Object.keys(data).forEach(key => {
+        if (shapeStyleProps.includes(key)) {
+          hasShapeProp = true
+        }
+      })
+      if (hasShapeProp) {
+        this.styleFishTail()
+      }
+    }
+  }
+
+  styleFishTail() {
+    this.root.style.shape(this.fishTail)
+  }
+
+  // 删除鱼尾
+  removeFishTail() {
+    const exist = this.mindMap.lineDraw.findOne('.smm-layout-fishbone-tail')
+    if (exist) {
+      exist.remove()
+    }
+  }
+
+  // 更新鱼尾形状位置
+  updateFishTailPosition() {
+    if (!this.isFishbone2()) return
+    this.fishTail.x(this.maxx).cy(this.root.top + this.root.height / 2)
+  }
+
   //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
   computedBaseValue() {
     walk(
       this.renderer.renderTree,
       null,
       (node, parent, isRoot, layerIndex, index, ancestors) => {
+        if (isRoot && this.isFishbone2()) {
+          // 将根节点形状强制修改为鱼头
+          node.data.shape = 'fishHead'
+        }
         // 创建节点
-        let newNode = this.createNode(node, parent, isRoot, layerIndex, index, ancestors)
+        let newNode = this.createNode(
+          node,
+          parent,
+          isRoot,
+          layerIndex,
+          index,
+          ancestors
+        )
         // 根节点定位在画布中心位置
         if (isRoot) {
           this.setNodeCenter(newNode)
@@ -57,10 +184,14 @@ class Fishbone extends Base {
           // 计算二级节点的top值
           if (parent._node.isRoot) {
             let marginY = this.getMarginY(layerIndex)
+            // 带鱼头鱼尾的鱼骨图因为根节点高度比较大，所以二级节点需要向中间靠一点
+            const topOffset = this.isFishbone2() ? parent._node.height / 4 : 0
             if (this.checkIsTop(newNode)) {
-              newNode.top = parent._node.top - newNode.height - marginY
+              newNode.top =
+                parent._node.top - newNode.height - marginY + topOffset
             } else {
-              newNode.top = parent._node.top + parent._node.height + marginY
+              newNode.top =
+                parent._node.top + parent._node.height + marginY - topOffset
             }
           }
         }
@@ -82,8 +213,11 @@ class Fishbone extends Base {
       (node, parent, isRoot, layerIndex) => {
         if (node.isRoot) {
           let marginX = this.getMarginX(layerIndex + 1)
-          let topTotalLeft = node.left + node.width + node.height + marginX
-          let bottomTotalLeft = node.left + node.width + node.height + marginX
+          const heightOffsetRatio = this.isFishbone2() ? 2 : 1
+          let topTotalLeft =
+            node.left + node.width + node.height / heightOffsetRatio + marginX
+          let bottomTotalLeft =
+            node.left + node.width + node.height / heightOffsetRatio + marginX
           node.children.forEach(item => {
             if (this.checkIsTop(item)) {
               item.left = topTotalLeft
@@ -133,19 +267,27 @@ class Fishbone extends Base {
         if (node.isRoot) {
           let topTotalLeft = 0
           let bottomTotalLeft = 0
+          let maxx = -Infinity
           node.children.forEach(item => {
             if (this.checkIsTop(item)) {
               item.left += topTotalLeft
               this.updateChildren(item.children, 'left', topTotalLeft)
               let { left, right } = this.getNodeBoundaries(item, 'h')
+              if (right > maxx) {
+                maxx = right
+              }
               topTotalLeft += right - left
             } else {
               item.left += bottomTotalLeft
               this.updateChildren(item.children, 'left', bottomTotalLeft)
               let { left, right } = this.getNodeBoundaries(item, 'h')
+              if (right > maxx) {
+                maxx = right
+              }
               bottomTotalLeft += right - left
             }
           })
+          this.maxx = maxx
         }
       },
       true
@@ -249,7 +391,8 @@ class Fishbone extends Base {
         // 水平线段到二级节点的连线
         let marginY = this.getMarginY(item.layerIndex)
         let nodeLineX = item.left
-        let offset = node.height / 2 + marginY
+        let offset =
+          node.height / 2 + marginY - (this.isFishbone2() ? node.height / 4 : 0)
         let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
         let line = this.lineDraw.path()
         if (this.checkIsTop(item)) {
@@ -277,11 +420,14 @@ class Fishbone extends Base {
       let nodeHalfTop = node.top + node.height / 2
       let offset = node.height / 2 + this.getMarginY(node.layerIndex + 1)
       let line = this.lineDraw.path()
+      const lineEndX = this.isFishbone2()
+        ? this.maxx
+        : maxx - offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
       line.plot(
         this.transformPath(
-          `M ${node.left + node.width},${nodeHalfTop} L ${
-            maxx - offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
-          },${nodeHalfTop}`
+          `M ${
+            node.left + node.width
+          },${nodeHalfTop} L ${lineEndX},${nodeHalfTop}`
         )
       )
       node.style.line(line)
@@ -406,6 +552,16 @@ class Fishbone extends Base {
       rect.size(width, expandBtnSize).x(0).y(height)
     }
   }
+
+  // 切换切换为其他结构时的处理
+  beforeChange() {
+    // 删除鱼尾
+    if (!this.isFishbone2()) return
+    this.root.nodeData.data.shape = CONSTANTS.SHAPE.RECTANGLE
+    this.removeFishTail()
+    this.unBindEvent()
+    this.mindMap.removeShape('fishHead')
+  }
 }
 
 export default Fishbone

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

@@ -1,370 +0,0 @@
-import Base from './Base'
-import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
-import { CONSTANTS } from '../utils/constant'
-
-const degToRad = deg => {
-  return (Math.PI / 180) * deg
-}
-
-//  下方鱼骨图
-class Fishbone extends Base {
-  //  构造函数
-  constructor(opt = {}) {
-    super(opt)
-  }
-
-  //  布局
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedLeftTopValue()
-      },
-      () => {
-        this.adjustLeftTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
-
-  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
-  computedBaseValue() {
-    walk(
-      this.renderer.renderTree,
-      null,
-      (node, parent, isRoot, layerIndex, index) => {
-        // 创建节点
-        let newNode = this.createNode(node, parent, isRoot, layerIndex)
-        // 根节点定位在画布中心位置
-        if (isRoot) {
-          this.setNodeCenter(newNode)
-        } else {
-          // 非根节点
-          // 三级及以下节点以上级方向为准
-          if (parent._node.dir) {
-            newNode.dir = parent._node.dir
-          } else {
-            // 节点生长方向
-            newNode.dir =
-              index % 2 === 0
-                ? CONSTANTS.LAYOUT_GROW_DIR.TOP
-                : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
-          }
-          // 计算二级节点的top值
-          if (parent._node.isRoot) {
-            newNode.top = parent._node.top + parent._node.height
-          }
-        }
-        if (!node.data.expand) {
-          return true
-        }
-      },
-      null,
-      true,
-      0
-    )
-  }
-
-  //  遍历节点树计算节点的left、top
-  computedLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex, index) => {
-        if (node.isRoot) {
-          let totalLeft = node.left + node.width
-          node.children.forEach(item => {
-            item.left = totalLeft
-            totalLeft += item.width
-          })
-        }
-        if (layerIndex === 1 && node.children) {
-          // 遍历二级节点的子节点
-          let startLeft = node.left + node.width * 0.5
-          let totalTop =
-            node.top +
-            node.height +
-            (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-
-          node.children.forEach(item => {
-            item.left = startLeft
-            item.top =
-              totalTop +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-            totalTop +=
-              item.height +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-          })
-        }
-        if (layerIndex > 1 && node.children) {
-          // 遍历三级及以下节点的子节点
-          let startLeft = node.left + node.width * 0.5
-          let totalTop =
-            node.top -
-            (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-          node.children.forEach(item => {
-            item.left = startLeft
-            item.top = totalTop - item.height
-            totalTop -=
-              item.height +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-          })
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  调整节点left、top
-  adjustLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (!node.getData('expand')) {
-          return
-        }
-        // 调整top
-        let len = node.children.length
-        // 调整三级节点的top
-        // if (layerIndex === 2 && len > 0) {
-        //   let totalHeight = node.children.reduce((h, item) => {
-        //     return h + item.height
-        //   }, 0)
-        //   this.updateBrothersTop(node, totalHeight)
-        // }
-        if (layerIndex > 2 && len > 0) {
-          let totalHeight = node.children.reduce((h, item) => {
-            return (
-              h +
-              item.height +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-            )
-          }, 0)
-          this.updateBrothersTop(node, -totalHeight)
-        }
-      },
-      (node, parent) => {
-        // 将二级节点的子节点移到上方
-        if (parent && parent.isRoot) {
-          // 遍历二级节点的子节点
-          let totalHeight = 0
-          let totalHeight2 = 0
-          node.children.forEach(item => {
-            // 调整top
-            let hasChildren = this.getNodeActChildrenLength(item) > 0
-            let nodeTotalHeight = this.getNodeAreaHeight(item)
-            let offset =
-              hasChildren > 0
-                ? nodeTotalHeight -
-                  item.height -
-                  (hasChildren ? item.expandBtnSize : 0)
-                : 0
-            let _top = totalHeight + offset
-            item.top += _top
-            // 调整left
-            let offsetLeft =
-              (totalHeight2 + nodeTotalHeight) /
-              Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
-            item.left += offsetLeft
-            totalHeight += offset
-            totalHeight2 += nodeTotalHeight
-            // 同步更新后代节点
-            this.updateChildrenPro(item.children, {
-              top: _top,
-              left: offsetLeft
-            })
-          })
-        }
-        // 调整二级节点的子节点的left值
-        if (node.isRoot) {
-          let totalLeft = 0
-          node.children.forEach(item => {
-            item.left += totalLeft
-            this.updateChildren(item.children, 'left', totalLeft)
-            let { left, right } = this.getNodeBoundaries(item, 'h')
-            totalLeft += right - left
-          })
-        }
-      },
-      true
-    )
-  }
-
-  //  递归计算节点的宽度
-  getNodeAreaHeight(node) {
-    let totalHeight = 0
-    let loop = node => {
-      totalHeight +=
-        node.height +
-        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-      if (node.children.length) {
-        node.children.forEach(item => {
-          loop(item)
-        })
-      }
-    }
-    loop(node)
-    return totalHeight
-  }
-
-  //  调整兄弟节点的left
-  updateBrothersLeft(node) {
-    let childrenList = node.children
-    let totalAddWidth = 0
-    childrenList.forEach(item => {
-      item.left += totalAddWidth
-      if (item.children && item.children.length) {
-        this.updateChildren(item.children, 'left', totalAddWidth)
-      }
-      // let areaWidth = this.getNodeAreaWidth(item)
-      let { left, right } = this.getNodeBoundaries(item, 'h')
-      let areaWidth = right - left
-      let difference = areaWidth - item.width
-      if (difference > 0) {
-        totalAddWidth += difference
-      }
-    })
-  }
-
-  //  调整兄弟节点的top
-  updateBrothersTop(node, addHeight) {
-    if (node.parent && !node.parent.isRoot) {
-      let childrenList = node.parent.children
-      let index = getNodeIndexInNodeList(node, childrenList)
-      childrenList.forEach((item, _index) => {
-        if (item.hasCustomPosition()) {
-          // 适配自定义位置
-          return
-        }
-        let _offset = 0
-        // 下面的节点往下移
-        if (_index > index) {
-          _offset = addHeight
-        }
-        item.top += _offset
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'top', _offset)
-        }
-      })
-      // 更新父节点的位置
-      this.updateBrothersTop(node.parent, node.layerIndex === 3 ? 0 : addHeight)
-    }
-  }
-
-  //  绘制连线，连接该节点到其子节点
-  renderLine(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    let len = node.children.length
-    if (node.isRoot) {
-      // 当前节点是根节点
-      let prevBother = node
-      // 根节点的子节点是和根节点同一水平线排列
-      node.children.forEach((item, index) => {
-        let x1 = prevBother.left + prevBother.width
-        let x2 = item.left
-        let y = node.top + node.height / 2
-        let path = `M ${x1},${y} L ${x2},${y}`
-        lines[index].plot(path)
-        style && style(lines[index], item)
-        prevBother = item
-      })
-    } else {
-      // 当前节点为非根节点
-      let maxy = -Infinity
-      let miny = Infinity
-      let maxx = -Infinity
-      let x = node.left + node.width * 0.3
-      node.children.forEach((item, index) => {
-        if (item.left > maxx) {
-          maxx = item.left
-        }
-        let y = item.top + item.height / 2
-        if (y > maxy) {
-          maxy = y
-        }
-        if (y < miny) {
-          miny = y
-        }
-        // 水平线
-        if (node.layerIndex > 1) {
-          let path = `M ${x},${y} L ${item.left},${y}`
-          lines[index].plot(path)
-          style && style(lines[index], item)
-        }
-      })
-      // 竖线
-      if (len > 0) {
-        let line = this.lineDraw.path()
-        expandBtnSize = len > 0 ? expandBtnSize : 0
-        let lineLength = maxx - node.left - node.width * 0.3
-        if (node.parent && node.parent.isRoot) {
-          line.plot(
-            `M ${x},${top + height} L ${x + lineLength},${
-              top +
-              height +
-              Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
-            }`
-          )
-        } else {
-          line.plot(`M ${x},${top} L ${x},${miny}`)
-        }
-        node.style.line(line)
-        node._lines.push(line)
-        style && style(line, node)
-      }
-    }
-  }
-
-  //  渲染按钮
-  renderExpandBtn(node, btn) {
-    let { width, height, expandBtnSize, isRoot } = node
-    if (!isRoot) {
-      let { translateX, translateY } = btn.transform()
-      if (node.parent && node.parent.isRoot) {
-        btn.translate(
-          width * 0.3 - expandBtnSize / 2 - translateX,
-          height + expandBtnSize / 2 - translateY
-        )
-      } else {
-        btn.translate(
-          width * 0.3 - expandBtnSize / 2 - translateX,
-          -expandBtnSize / 2 - translateY
-        )
-      }
-    }
-  }
-
-  //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
-    let {
-      top,
-      bottom,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'h')
-    let x1 = right + generalizationLineMargin
-    let y1 = top
-    let x2 = right + generalizationLineMargin
-    let y2 = bottom
-    let cx = x1 + 20
-    let cy = y1 + (y2 - y1) / 2
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gLine.plot(path)
-    gNode.left = right + generalizationNodeMargin
-    gNode.top = top + (bottom - top - gNode.height) / 2
-  }
-}
-
-export default Fishbone

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

@@ -1,351 +0,0 @@
-import Base from './Base'
-import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
-import { CONSTANTS } from '../utils/constant'
-
-const degToRad = deg => {
-  return (Math.PI / 180) * deg
-}
-
-//  上方鱼骨图
-class Fishbone extends Base {
-  //  构造函数
-  constructor(opt = {}) {
-    super(opt)
-  }
-
-  //  布局
-  doLayout(callback) {
-    let task = [
-      () => {
-        this.computedBaseValue()
-      },
-      () => {
-        this.computedLeftTopValue()
-      },
-      () => {
-        this.adjustLeftTopValue()
-      },
-      () => {
-        callback(this.root)
-      }
-    ]
-    asyncRun(task)
-  }
-
-  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
-  computedBaseValue() {
-    walk(
-      this.renderer.renderTree,
-      null,
-      (node, parent, isRoot, layerIndex, index) => {
-        // 创建节点
-        let newNode = this.createNode(node, parent, isRoot, layerIndex)
-        // 根节点定位在画布中心位置
-        if (isRoot) {
-          this.setNodeCenter(newNode)
-        } else {
-          // 非根节点
-          // 三级及以下节点以上级方向为准
-          if (parent._node.dir) {
-            newNode.dir = parent._node.dir
-          } else {
-            // 节点生长方向
-            newNode.dir =
-              index % 2 === 0
-                ? CONSTANTS.LAYOUT_GROW_DIR.TOP
-                : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
-          }
-          // 计算二级节点的top值
-          if (parent._node.isRoot) {
-            newNode.top = parent._node.top - newNode.height
-          }
-        }
-        if (!node.data.expand) {
-          return true
-        }
-      },
-      null,
-      true,
-      0
-    )
-  }
-
-  //  遍历节点树计算节点的left、top
-  computedLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex, index) => {
-        if (node.isRoot) {
-          let totalLeft = node.left + node.width
-          node.children.forEach(item => {
-            item.left = totalLeft
-            totalLeft += item.width
-          })
-        }
-        if (layerIndex >= 1 && node.children) {
-          // 遍历三级及以下节点的子节点
-          let startLeft = node.left + node.width * 0.5
-          let totalTop =
-            node.top +
-            node.height +
-            (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-          node.children.forEach(item => {
-            item.left = startLeft
-            item.top += totalTop
-            totalTop +=
-              item.height +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-          })
-        }
-      },
-      null,
-      true
-    )
-  }
-
-  //  调整节点left、top
-  adjustLeftTopValue() {
-    walk(
-      this.root,
-      null,
-      (node, parent, isRoot, layerIndex) => {
-        if (!node.getData('expand')) {
-          return
-        }
-        // 调整top
-        let len = node.children.length
-        // 调整三级及以下节点的top
-        if (parent && !parent.isRoot && len > 0) {
-          let totalHeight = node.children.reduce((h, item) => {
-            return (
-              h +
-              item.height +
-              (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
-            )
-          }, 0)
-          this.updateBrothersTop(node, totalHeight)
-        }
-      },
-      (node, parent) => {
-        // 将二级节点的子节点移到上方
-        if (parent && parent.isRoot) {
-          // 遍历二级节点的子节点
-          let totalHeight = 0
-          node.children.forEach(item => {
-            // 调整top
-            let nodeTotalHeight = this.getNodeAreaHeight(item)
-            let _top = item.top
-            item.top =
-              node.top - (item.top - node.top) - nodeTotalHeight + node.height
-            // 调整left
-            let offsetLeft =
-              (nodeTotalHeight + totalHeight) /
-              Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
-            item.left += offsetLeft
-            totalHeight += nodeTotalHeight
-            // 同步更新后代节点
-            this.updateChildrenPro(item.children, {
-              top: item.top - _top,
-              left: offsetLeft
-            })
-          })
-        }
-        // 调整二级节点的子节点的left值
-        if (node.isRoot) {
-          let totalLeft = 0
-          node.children.forEach(item => {
-            item.left += totalLeft
-            this.updateChildren(item.children, 'left', totalLeft)
-            let { left, right } = this.getNodeBoundaries(item, 'h')
-            totalLeft += right - left
-          })
-        }
-      },
-      true
-    )
-  }
-
-  //  递归计算节点的宽度
-  getNodeAreaHeight(node) {
-    let totalHeight = 0
-    let loop = node => {
-      totalHeight +=
-        node.height +
-        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-      if (node.children.length) {
-        node.children.forEach(item => {
-          loop(item)
-        })
-      }
-    }
-    loop(node)
-    return totalHeight
-  }
-
-  //  调整兄弟节点的left
-  updateBrothersLeft(node) {
-    let childrenList = node.children
-    let totalAddWidth = 0
-    childrenList.forEach(item => {
-      item.left += totalAddWidth
-      if (item.children && item.children.length) {
-        this.updateChildren(item.children, 'left', totalAddWidth)
-      }
-      // let areaWidth = this.getNodeAreaWidth(item)
-      let { left, right } = this.getNodeBoundaries(item, 'h')
-      let areaWidth = right - left
-      let difference = areaWidth - item.width
-      if (difference > 0) {
-        totalAddWidth += difference
-      }
-    })
-  }
-
-  //  调整兄弟节点的top
-  updateBrothersTop(node, addHeight) {
-    if (node.parent && !node.parent.isRoot) {
-      let childrenList = node.parent.children
-      let index = getNodeIndexInNodeList(node, childrenList)
-      childrenList.forEach((item, _index) => {
-        if (item.hasCustomPosition()) {
-          // 适配自定义位置
-          return
-        }
-        let _offset = 0
-        // 下面的节点往下移
-        if (_index > index) {
-          _offset = addHeight
-        }
-        item.top += _offset
-        // 同步更新子节点的位置
-        if (item.children && item.children.length) {
-          this.updateChildren(item.children, 'top', _offset)
-        }
-      })
-      // 更新父节点的位置
-      this.updateBrothersTop(node.parent, addHeight)
-    }
-  }
-
-  //  绘制连线，连接该节点到其子节点
-  renderLine(node, lines, style) {
-    if (node.children.length <= 0) {
-      return []
-    }
-    let { left, top, width, height, expandBtnSize } = node
-    let len = node.children.length
-    if (node.isRoot) {
-      // 当前节点是根节点
-      let prevBother = node
-      // 根节点的子节点是和根节点同一水平线排列
-      node.children.forEach((item, index) => {
-        let x1 = prevBother.left + prevBother.width
-        let x2 = item.left
-        let y = node.top + node.height / 2
-        let path = `M ${x1},${y} L ${x2},${y}`
-        lines[index].plot(path)
-        style && style(lines[index], item)
-        prevBother = item
-      })
-    } else {
-      // 当前节点为非根节点
-      let maxy = -Infinity
-      let miny = Infinity
-      let maxx = -Infinity
-      let x = node.left + node.width * 0.3
-      node.children.forEach((item, index) => {
-        if (item.left > maxx) {
-          maxx = item.left
-        }
-        let y = item.top + item.height / 2
-        if (y > maxy) {
-          maxy = y
-        }
-        if (y < miny) {
-          miny = y
-        }
-        // 水平线
-        if (node.layerIndex > 1) {
-          let path = `M ${x},${y} L ${item.left},${y}`
-          lines[index].plot(path)
-          style && style(lines[index], item)
-        }
-      })
-      // 竖线
-      if (len > 0) {
-        let line = this.lineDraw.path()
-        expandBtnSize = len > 0 ? expandBtnSize : 0
-        let lineLength = maxx - node.left - node.width * 0.3
-        if (
-          node.parent &&
-          node.parent.isRoot &&
-          node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
-        ) {
-          line.plot(
-            `M ${x},${top} L ${x + lineLength},${
-              top -
-              Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
-            }`
-          )
-        } else {
-          if (node.parent && node.parent.isRoot) {
-            line.plot(
-              `M ${x},${top} L ${x + lineLength},${
-                top -
-                Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
-              }`
-            )
-          } else {
-            line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
-          }
-        }
-        node.style.line(line)
-        node._lines.push(line)
-        style && style(line, node)
-      }
-    }
-  }
-
-  //  渲染按钮
-  renderExpandBtn(node, btn) {
-    let { width, height, expandBtnSize, isRoot } = node
-    if (!isRoot) {
-      let { translateX, translateY } = btn.transform()
-      if (node.parent && node.parent.isRoot) {
-        btn.translate(
-          width * 0.3 - expandBtnSize / 2 - translateX,
-          -expandBtnSize / 2 - translateY
-        )
-      } else {
-        btn.translate(
-          width * 0.3 - expandBtnSize / 2 - translateX,
-          height + expandBtnSize / 2 - translateY
-        )
-      }
-    }
-  }
-
-  //  创建概要节点
-  renderGeneralization(node, gLine, gNode) {
-    let {
-      top,
-      bottom,
-      right,
-      generalizationLineMargin,
-      generalizationNodeMargin
-    } = this.getNodeBoundaries(node, 'h')
-    let x1 = right + generalizationLineMargin
-    let y1 = top
-    let x2 = right + generalizationLineMargin
-    let y2 = bottom
-    let cx = x1 + 20
-    let cy = y1 + (y2 - y1) / 2
-    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
-    gLine.plot(path)
-    gNode.left = right + generalizationNodeMargin
-    gNode.top = top + (bottom - top - gNode.height) / 2
-  }
-}
-
-export default Fishbone

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

@@ -35,7 +35,14 @@ class VerticalTimeline extends Base {
       this.renderer.renderTree,
       null,
       (cur, parent, isRoot, layerIndex, index, ancestors) => {
-        let newNode = this.createNode(cur, parent, isRoot, layerIndex, index, ancestors)
+        let newNode = this.createNode(
+          cur,
+          parent,
+          isRoot,
+          layerIndex,
+          index,
+          ancestors
+        )
         // 根节点定位在画布中心位置
         if (isRoot) {
           this.setNodeCenter(newNode)
@@ -46,10 +53,16 @@ class VerticalTimeline extends Base {
           if (parent._node.dir) {
             newNode.dir = parent._node.dir
           } else {
-            newNode.dir =
-              index % 2 === 0
-                ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
-                : CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            if (this.layout === CONSTANTS.LAYOUT.VERTICAL_TIMELINE2) {
+              newNode.dir = CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            } else if (this.layout === CONSTANTS.LAYOUT.VERTICAL_TIMELINE3) {
+              newNode.dir = CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+            } else {
+              newNode.dir =
+                index % 2 === 0
+                  ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+                  : CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            }
           }
           // 定位二级节点的left
           if (parent._node.isRoot) {

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

@@ -1,19 +1,18 @@
 import { fromMarkdown } from 'mdast-util-from-markdown'
 
 const getNodeText = node => {
-  // 优先找出其中的text类型的子节点
-  let textChild = (node.children || []).find(item => {
-    return item.type === 'text'
-  })
-  // 没有找到，那么直接使用第一个子节点
-  textChild = textChild || node.children[0]
-  if (textChild) {
-    if (textChild.value !== undefined) {
-      return textChild.value
+  if (node.type === 'list') return ''
+  let textStr = ''
+
+  ;(node.children || []).forEach(item => {
+    if (['inlineCode', 'text'].includes(item.type)) {
+      textStr += item.value || ''
+    } else {
+      textStr += getNodeText(item)
     }
-    return getNodeText(textChild)
-  }
-  return ''
+  })
+
+  return textStr
 }
 
 // 处理list的情况

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

@@ -253,7 +253,9 @@ const transformToXmind = async (data, name) => {
     }
     // 标签
     if (node.data.tag !== undefined) {
-      newData.labels = node.data.tag || []
+      newData.labels = (node.data.tag || []).map(item => {
+        return typeof item === 'object' && item !== null ? item.text : item
+      })
     }
     // 图片
     handleNodeImageToXmind(node, newNode, waitLoadImageList, imageList)

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

@@ -23,6 +23,8 @@ const styleProps = [
   'associativeLineTextFontFamily'
 ]
 
+const ASSOCIATIVE_LINE_TEXT_EDIT_WRAP = 'associative-line-text-edit-warp'
+
 // 关联线插件
 class AssociativeLine {
   constructor(opt = {}) {
@@ -62,9 +64,11 @@ class AssociativeLine {
       this[item] = associativeLineControlsMethods[item].bind(this)
     })
     // 关联线文字相关方法
+    this.showTextEdit = false
     Object.keys(associativeLineTextMethods).forEach(item => {
       this[item] = associativeLineTextMethods[item].bind(this)
     })
+    this.mindMap.addEditNodeClass(ASSOCIATIVE_LINE_TEXT_EDIT_WRAP)
     this.bindEvent()
   }
 
@@ -157,6 +161,7 @@ class AssociativeLine {
     // 取消激活关联线
     if (!this.isControlPointMousedown) {
       this.clearActiveLine()
+      this.renderAllLines()
     }
   }
 
@@ -166,6 +171,7 @@ class AssociativeLine {
       this.completeCreateLine(node)
     } else {
       this.clearActiveLine()
+      this.renderAllLines()
     }
   }
 
@@ -280,7 +286,7 @@ class AssociativeLine {
       .stroke({
         width: associativeLineWidth,
         color: associativeLineColor,
-        dasharray: associativeLineDasharray || [6, 4]
+        dasharray: associativeLineDasharray || '6,4'
       })
       .fill({ color: 'none' })
     path.plot(pathStr)
@@ -348,7 +354,7 @@ class AssociativeLine {
       .stroke({
         width: associativeLineWidth,
         color: associativeLineColor,
-        dasharray: associativeLineDasharray || [6, 4]
+        dasharray: associativeLineDasharray || '6,4'
       })
       .fill({ color: 'none' })
     clickPath
@@ -382,6 +388,7 @@ class AssociativeLine {
     if (this.controlPoint2) {
       this.controlPoint2.stroke({ color: associativeLineActiveColor })
     }
+    this.updateTextPos(path, text)
   }
 
   // 激活某根关联线
@@ -461,7 +468,7 @@ class AssociativeLine {
       .stroke({
         width: associativeLineWidth,
         color: associativeLineColor,
-        dasharray: associativeLineDasharray || [6, 4]
+        dasharray: associativeLineDasharray || '6,4'
       })
       .fill({ color: 'none' })
     // 箭头
@@ -742,11 +749,13 @@ class AssociativeLine {
 
   // 插件被移除前做的事情
   beforePluginRemove() {
+    this.mindMap.deleteEditNodeClass(ASSOCIATIVE_LINE_TEXT_EDIT_WRAP)
     this.unBindEvent()
   }
 
   // 插件被卸载前做的事情
   beforePluginDestroy() {
+    this.mindMap.deleteEditNodeClass(ASSOCIATIVE_LINE_TEXT_EDIT_WRAP)
     this.unBindEvent()
   }
 }

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

@@ -43,6 +43,18 @@ class Demonstrate {
       this.mindMap.opt.demonstrateConfig || {}
     )
     this.needRestorePerformanceMode = false
+    this.onConfigUpdate = this.onConfigUpdate.bind(this)
+    this.mindMap.on('after_update_config', this.onConfigUpdate)
+  }
+
+  // 监听配置更新
+  onConfigUpdate(opt) {
+    if (typeof opt.demonstrateConfig !== 'undefined') {
+      this.config = {
+        ...this.config,
+        ...opt.demonstrateConfig
+      }
+    }
   }
 
   // 进入演示模式
@@ -417,11 +429,13 @@ class Demonstrate {
   // 插件被移除前做的事情
   beforePluginRemove() {
     this.unBindEvent()
+    this.mindMap.off('after_update_config', this.onConfigUpdate)
   }
 
   // 插件被卸载前做的事情
   beforePluginDestroy() {
     this.unBindEvent()
+    this.mindMap.off('after_update_config', this.onConfigUpdate)
   }
 }
 

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

@@ -407,7 +407,12 @@ class Drag extends Base {
       TIMELINE,
       TIMELINE2,
       VERTICAL_TIMELINE,
-      FISHBONE
+      VERTICAL_TIMELINE2,
+      VERTICAL_TIMELINE3,
+      FISHBONE,
+      FISHBONE2,
+      RIGHT_FISHBONE,
+      RIGHT_FISHBONE2
     } = CONSTANTS.LAYOUT
     this.overlapNode = null
     this.prevNode = null
@@ -443,9 +448,14 @@ class Drag extends Base {
           this.handleTimeLine2(node)
           break
         case VERTICAL_TIMELINE:
+        case VERTICAL_TIMELINE2:
+        case VERTICAL_TIMELINE3:
           this.handleLogicalStructure(node)
           break
         case FISHBONE:
+        case FISHBONE2:
+        case RIGHT_FISHBONE:
+        case RIGHT_FISHBONE2:
           this.handleFishbone(node)
           break
         default:
@@ -469,7 +479,12 @@ class Drag extends Base {
       TIMELINE,
       TIMELINE2,
       VERTICAL_TIMELINE,
-      FISHBONE
+      VERTICAL_TIMELINE2,
+      VERTICAL_TIMELINE3,
+      FISHBONE,
+      FISHBONE2,
+      RIGHT_FISHBONE,
+      RIGHT_FISHBONE2
     } = CONSTANTS.LAYOUT
     const { LEFT, TOP, RIGHT, BOTTOM } = CONSTANTS.LAYOUT_GROW_DIR
     const layerIndex = this.overlapNode.layerIndex
@@ -563,6 +578,8 @@ class Drag extends Base {
           }
           break
         case VERTICAL_TIMELINE:
+        case VERTICAL_TIMELINE2:
+        case VERTICAL_TIMELINE3:
           if (layerIndex === 0) {
             x =
               lastNodeRect.originLeft +
@@ -580,6 +597,9 @@ class Drag extends Base {
           }
           break
         case FISHBONE:
+        case FISHBONE2:
+        case RIGHT_FISHBONE:
+        case RIGHT_FISHBONE2:
           if (layerIndex <= 1) {
             notRenderPlaceholder = true
             this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true)
@@ -655,6 +675,8 @@ class Drag extends Base {
           }
           break
         case VERTICAL_TIMELINE:
+        case VERTICAL_TIMELINE2:
+        case VERTICAL_TIMELINE3:
           if (layerIndex === 0) {
             rotate = true
           }
@@ -668,6 +690,9 @@ class Drag extends Base {
             halfPlaceholderHeight
           break
         case FISHBONE:
+        case FISHBONE2:
+        case RIGHT_FISHBONE:
+        case RIGHT_FISHBONE2:
           if (layerIndex <= 1) {
             notRenderPlaceholder = true
             this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true)
@@ -703,7 +728,12 @@ class Drag extends Base {
       MIND_MAP,
       TIMELINE2,
       VERTICAL_TIMELINE,
-      FISHBONE
+      VERTICAL_TIMELINE2,
+      VERTICAL_TIMELINE3,
+      FISHBONE,
+      FISHBONE2,
+      RIGHT_FISHBONE,
+      RIGHT_FISHBONE2
     } = CONSTANTS.LAYOUT
     switch (this.mindMap.opt.layout) {
       case LOGICAL_STRUCTURE:
@@ -713,7 +743,12 @@ class Drag extends Base {
       case MIND_MAP:
       case TIMELINE2:
       case VERTICAL_TIMELINE:
+      case VERTICAL_TIMELINE2:
+      case VERTICAL_TIMELINE3:
       case FISHBONE:
+      case FISHBONE2:
+      case RIGHT_FISHBONE:
+      case RIGHT_FISHBONE2:
         return node.dir
       default:
         return ''
@@ -725,17 +760,22 @@ class Drag extends Base {
   handleVerticalCheck(node, checkList, isReverse = false) {
     const { layout } = this.mindMap.opt
     const { LAYOUT, LAYOUT_GROW_DIR } = CONSTANTS
-    const { VERTICAL_TIMELINE, FISHBONE } = LAYOUT
-    const { BOTTOM, LEFT } = LAYOUT_GROW_DIR
+    const {
+      VERTICAL_TIMELINE,
+      VERTICAL_TIMELINE2,
+      VERTICAL_TIMELINE3,
+      FISHBONE,
+      FISHBONE2,
+      RIGHT_FISHBONE,
+      RIGHT_FISHBONE2
+    } = LAYOUT
+    const { LEFT } = LAYOUT_GROW_DIR
     const mouseMoveX = this.mouseMoveX
     const mouseMoveY = this.mouseMoveY
     const nodeRect = this.getNodeRect(node)
     const dir = this.getNewChildNodeDir(node)
     const layerIndex = node.layerIndex
-    if (
-      isReverse ||
-      (layout === FISHBONE && dir === BOTTOM && layerIndex >= 3)
-    ) {
+    if (isReverse) {
       checkList = checkList.reverse()
     }
     let oneFourthHeight = nodeRect.originHeight / 4
@@ -770,6 +810,8 @@ class Drag extends Base {
         let notRenderLine = false
         switch (layout) {
           case VERTICAL_TIMELINE:
+          case VERTICAL_TIMELINE2:
+          case VERTICAL_TIMELINE3:
             if (layerIndex === 1) {
               x =
                 nodeRect.originLeft +
@@ -777,6 +819,11 @@ class Drag extends Base {
                 this.placeholderWidth / 2
             }
             break
+          case RIGHT_FISHBONE:
+          case RIGHT_FISHBONE2:
+            x =
+              nodeRect.originLeft + nodeRect.originWidth - this.placeholderWidth
+            break
           default:
         }
         if (checkIsPrevNode) {
@@ -791,6 +838,9 @@ class Drag extends Base {
             this.placeholderHeight / 2
           switch (layout) {
             case FISHBONE:
+            case FISHBONE2:
+            case RIGHT_FISHBONE:
+            case RIGHT_FISHBONE2:
               if (layerIndex === 2) {
                 notRenderLine = true
                 y =
@@ -820,6 +870,9 @@ class Drag extends Base {
             this.placeholderHeight / 2
           switch (layout) {
             case FISHBONE:
+            case FISHBONE2:
+            case RIGHT_FISHBONE:
+            case RIGHT_FISHBONE2:
               if (layerIndex === 2) {
                 notRenderLine = true
                 y =
@@ -856,7 +909,14 @@ class Drag extends Base {
   handleHorizontalCheck(node, checkList) {
     const { layout } = this.mindMap.opt
     const { LAYOUT } = CONSTANTS
-    const { FISHBONE, TIMELINE, TIMELINE2 } = LAYOUT
+    const {
+      FISHBONE,
+      FISHBONE2,
+      RIGHT_FISHBONE,
+      RIGHT_FISHBONE2,
+      TIMELINE,
+      TIMELINE2
+    } = LAYOUT
     let mouseMoveX = this.mouseMoveX
     let mouseMoveY = this.mouseMoveY
     let nodeRect = this.getNodeRect(node)
@@ -896,6 +956,9 @@ class Drag extends Base {
               this.placeholderWidth / 2
             break
           case FISHBONE:
+          case FISHBONE2:
+          case RIGHT_FISHBONE:
+          case RIGHT_FISHBONE2:
             if (layerIndex === 1) {
               notRenderLine = true
               y =
@@ -907,7 +970,11 @@ class Drag extends Base {
           default:
         }
         if (checkIsPrevNode) {
-          this.prevNode = node
+          if ([RIGHT_FISHBONE, RIGHT_FISHBONE2].includes(layout)) {
+            this.nextNode = node
+          } else {
+            this.prevNode = node
+          }
           this.setPlaceholderRect({
             x:
               nodeRect.originRight +
@@ -918,7 +985,11 @@ class Drag extends Base {
             notRenderLine
           })
         } else if (checkIsNextNode) {
-          this.nextNode = node
+          if ([RIGHT_FISHBONE, RIGHT_FISHBONE2].includes(layout)) {
+            this.prevNode = node
+          } else {
+            this.nextNode = node
+          }
           this.setPlaceholderRect({
             x:
               nodeRect.originLeft -
@@ -1142,7 +1213,11 @@ class Drag extends Base {
       this.handleHorizontalCheck(node, checkList)
     } else {
       // 处于上方的三级节点需要特殊处理，因为节点排列方向反向了
-      if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP && node.layerIndex === 2) {
+      const is2LayerTop =
+        node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP && node.layerIndex === 2
+      const is2MoreLayerBottom =
+        node.dir === CONSTANTS.LAYOUT_GROW_DIR.BOTTOM && node.layerIndex >= 3
+      if (is2LayerTop || is2MoreLayerBottom) {
         this.handleVerticalCheck(node, checkList, true)
       } else {
         this.handleVerticalCheck(node, checkList)

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

@@ -128,7 +128,13 @@ class Export {
   }
 
   //   svg转png
-  svgToPng(svgSrc, transparent, clipData = null) {
+  svgToPng(
+    svgSrc,
+    transparent,
+    clipData = null,
+    fitBg = false,
+    format = 'image/png'
+  ) {
     const { maxCanvasSize, minExportImgCanvasScale } = this.mindMap.opt
     return new Promise((resolve, reject) => {
       const img = new Image()
@@ -138,6 +144,7 @@ class Export {
         try {
           const canvas = document.createElement('canvas')
           const dpr = Math.max(window.devicePixelRatio, minExportImgCanvasScale)
+          // 图片原始大小
           let imgWidth = img.width
           let imgHeight = img.height
           // 如果是裁减操作的话，那么需要手动添加内边距，及调整图片大小为实际的裁减区域的大小，不要忘了内边距哦
@@ -149,10 +156,39 @@ class Export {
             imgWidth = clipData.width + paddingX * 2
             imgHeight = clipData.height + paddingY * 2
           }
+          // 适配背景图片的大小
+          let fitBgImgWidth = 0
+          let fitBgImgHeight = 0
+          const { backgroundImage } = this.mindMap.themeConfig
+          if (fitBg && backgroundImage && !transparent) {
+            const bgImgSize = await new Promise(resolve => {
+              const bgImg = new Image()
+              bgImg.onload = () => {
+                resolve([bgImg.width, bgImg.height])
+              }
+              bgImg.onerror = () => {
+                resolve(null)
+              }
+              bgImg.src = backgroundImage
+            })
+            if (bgImgSize) {
+              const imgRatio = imgWidth / imgHeight
+              const bgRatio = bgImgSize[0] / bgImgSize[1]
+              if (imgRatio > bgRatio) {
+                fitBgImgWidth = imgWidth
+                fitBgImgHeight = imgWidth / bgRatio
+              } else {
+                fitBgImgHeight = imgHeight
+                fitBgImgWidth = imgHeight * bgRatio
+              }
+            }
+          }
           // 检查是否超出canvas支持的像素上限
           // canvas大小需要乘以dpr
-          let canvasWidth = imgWidth * dpr
-          let canvasHeight = imgHeight * dpr
+          let scaleX = 1
+          let scaleY = 1
+          let canvasWidth = (fitBgImgWidth || imgWidth) * dpr
+          let canvasHeight = (fitBgImgHeight || imgHeight) * dpr
           if (canvasWidth > maxCanvasSize || canvasHeight > maxCanvasSize) {
             let newWidth = null
             let newHeight = null
@@ -170,6 +206,8 @@ class Export {
               newWidth,
               newHeight
             )
+            scaleX = res[0] / canvasWidth
+            scaleY = res[1] / canvasHeight
             canvasWidth = res[0]
             canvasHeight = res[1]
           }
@@ -177,6 +215,7 @@ class Export {
           canvas.height = canvasHeight
           const styleWidth = canvasWidth / dpr
           const styleHeight = canvasHeight / dpr
+          // canvas元素实际上的大小
           canvas.style.width = styleWidth + 'px'
           canvas.style.height = styleHeight + 'px'
           const ctx = canvas.getContext('2d')
@@ -187,6 +226,10 @@ class Export {
           }
           // 图片绘制到canvas里
           // 如果有裁减数据，那么需要进行裁减
+          const fitBgLeft =
+            (fitBgImgWidth > 0 ? (fitBgImgWidth - imgWidth) / 2 : 0) * scaleX
+          const fitBgTop =
+            (fitBgImgHeight > 0 ? (fitBgImgHeight - imgHeight) / 2 : 0) * scaleY
           if (clipData) {
             ctx.drawImage(
               img,
@@ -194,15 +237,21 @@ class Export {
               clipData.top,
               clipData.width,
               clipData.height,
-              paddingX,
-              paddingY,
-              clipData.width,
-              clipData.height
+              paddingX * scaleX + fitBgLeft,
+              paddingY * scaleY + fitBgTop,
+              clipData.width * scaleX,
+              clipData.height * scaleY
             )
           } else {
-            ctx.drawImage(img, 0, 0, styleWidth, styleHeight)
+            ctx.drawImage(
+              img,
+              fitBgLeft,
+              fitBgTop,
+              imgWidth * scaleX,
+              imgHeight * scaleY
+            )
           }
-          resolve(canvas.toDataURL())
+          resolve(canvas.toDataURL(format))
         } catch (error) {
           reject(error)
         }
@@ -280,16 +329,35 @@ class Export {
     })
   }
 
+  // 导出为指定格式的图片
+  async _image(format, name, transparent = false, node = null, fitBg = false) {
+    this.mindMap.renderer.textEdit.hideEditTextBox()
+    this.handleNodeExport(node)
+    const { str, clipData } = await this.getSvgData(node)
+    const svgUrl = await this.fixSvgStrAndToBlob(str)
+    const res = await this.svgToPng(
+      svgUrl,
+      transparent,
+      clipData,
+      fitBg,
+      format
+    )
+    return res
+  }
+
   //  导出为png
   /**
    * 方法1.把svg的图片都转化成data:url格式，再转换
    * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
    */
-  async png(name, transparent = false, node = null) {
-    this.handleNodeExport(node)
-    const { str, clipData } = await this.getSvgData(node)
-    const svgUrl = await this.fixSvgStrAndToBlob(str)
-    const res = await this.svgToPng(svgUrl, transparent, clipData)
+  async png(...args) {
+    const res = await this._image('image/png', ...args)
+    return res
+  }
+
+  // 导出为jpg
+  async jpg(...args) {
+    const res = await this._image('image/jpg', ...args)
     return res
   }
 
@@ -305,11 +373,11 @@ class Export {
   }
 
   //  导出为pdf
-  async pdf(name, transparent = false) {
+  async pdf(name, transparent = false, fitBg = false) {
     if (!this.mindMap.doExportPDF) {
       throw new Error('请注册ExportPDF插件')
     }
-    const img = await this.png(name, transparent)
+    const img = await this.png(name, transparent, null, fitBg)
     // 使用jspdf库
     // await this.mindMap.doExportPDF.pdf(name, img)
     // 使用pdf-lib库
@@ -330,6 +398,7 @@ class Export {
 
   //  导出为svg
   async svg(name) {
+    this.mindMap.renderer.textEdit.hideEditTextBox()
     const { node } = await this.getSvgData()
     node.first().before(SVG(`<title>${name}</title>`))
     await this.drawBackgroundToSvg(node)

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

@@ -107,14 +107,13 @@ class Formula {
 
   // 给指定的节点插入指定公式
   insertFormulaToNode(node, formula) {
-    let richTextPlugin = this.mindMap.richText
+    const richTextPlugin = this.mindMap.richText
     richTextPlugin.showEditText({ node })
     richTextPlugin.quill.insertEmbed(
       richTextPlugin.quill.getLength() - 1,
       'formula',
       formula
     )
-    richTextPlugin.setTextStyleIfNotRichText(richTextPlugin.node)
     richTextPlugin.hideEditText([node])
   }
 
@@ -127,8 +126,18 @@ class Formula {
       for (const el of els)
         nodeText = nodeText.replace(
           el.outerHTML,
-          `\$${el.getAttribute('data-value')}\$`
+          `$${el.getAttribute('data-value')}$`
         )
+      // 如果开启了实时渲染，那么意味公式转换为源码时会影响节点尺寸，需要派发事件触发渲染
+      if (this.mindMap.opt.openRealtimeRenderOnNodeTextEdit) {
+        setTimeout(() => {
+          this.mindMap.emit('node_text_edit_change', {
+            node: this.mindMap.richText.node,
+            text: this.mindMap.richText.getEditText(),
+            richText: true
+          })
+        }, 0)
+      }
     }
     return nodeText
   }

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

@@ -1,8 +1,7 @@
 import {
   isWhite,
   isTransparent,
-  getVisibleColorFromTheme,
-  readBlob
+  getVisibleColorFromTheme
 } from '../utils/index'
 
 // 小地图插件

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

@@ -0,0 +1,100 @@
+import { walk, createUid } from '../utils/index'
+
+// 修改base64格式的节点图片在数据中的存储方式
+// 将base64格式的图片以key-map的形式存储在根节点的imgMap字段里，其他节点只保存key，避免不同的节点引用相同的图片重复存储的问题，普通url格式的图片不处理
+class NodeBase64ImageStorage {
+  constructor(opt) {
+    this.opt = opt
+    this.mindMap = opt.mindMap
+    this.bindEvent()
+  }
+
+  bindEvent() {
+    this.onBeforeAddHistory = this.onBeforeAddHistory.bind(this)
+    this.mindMap.on('beforeAddHistory', this.onBeforeAddHistory)
+  }
+
+  unBindEvent() {
+    this.mindMap.off('beforeAddHistory', this.onBeforeAddHistory)
+  }
+
+  isBase64ImgUrl(url) {
+    return /^data:/.test(url)
+  }
+
+  isImageKey(url) {
+    return /^smm_img_key_/.test(url)
+  }
+
+  createImageKey() {
+    return 'smm_img_key_' + createUid()
+  }
+
+  onBeforeAddHistory() {
+    const renderTree = this.mindMap.renderer.renderTree
+    if (!renderTree) return
+    let imgMap = renderTree.data.imgMap
+    if (!imgMap) {
+      imgMap = renderTree.data.imgMap = {}
+    }
+    const useIds = []
+
+    const getImgIds = () => {
+      return Object.keys(imgMap)
+    }
+
+    const getImgId = image => {
+      return getImgIds().find(id => {
+        return imgMap[id] === image
+      })
+    }
+
+    walk(renderTree, null, node => {
+      const image = node.data.image
+      if (image) {
+        // 如果是base64图片url
+        if (this.isBase64ImgUrl(image)) {
+          // 检查该图片是否已存在
+          const hasId = getImgId(image)
+          if (hasId) {
+            // 已存在则直接使用现有的key
+            useIds.push(hasId)
+            node.data.image = hasId
+          } else {
+            // 不存在则生成key，并存储
+            const newId = this.createImageKey()
+            node.data.image = newId
+            imgMap[newId] = image
+            useIds.push(newId)
+          }
+        } else if (this.isImageKey(image)) {
+          // 如果是key，那么收集一下
+          if (getImgIds().includes(image)) {
+            useIds.push(image)
+          }
+        }
+      }
+    })
+
+    // 删除已无节点引用的图片
+    getImgIds().forEach(id => {
+      if (!useIds.includes(id)) {
+        delete imgMap[id]
+      }
+    })
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+
+  // 插件被卸载前做的事情
+  beforePluginDestroy() {
+    this.unBindEvent()
+  }
+}
+
+NodeBase64ImageStorage.instanceName = 'nodeBase64ImageStorage'
+
+export default NodeBase64ImageStorage

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

@@ -31,12 +31,14 @@ class NodeImgAdjust {
     this.onMousemove = this.onMousemove.bind(this)
     this.onMouseup = this.onMouseup.bind(this)
     this.onRenderEnd = this.onRenderEnd.bind(this)
+    this.onScale = this.onScale.bind(this)
     this.mindMap.on('node_img_mouseleave', this.onNodeImgMouseleave)
     this.mindMap.on('node_img_mousemove', this.onNodeImgMousemove)
     this.mindMap.on('mousemove', this.onMousemove)
     this.mindMap.on('mouseup', this.onMouseup)
     this.mindMap.on('node_mouseup', this.onMouseup)
     this.mindMap.on('node_tree_render_end', this.onRenderEnd)
+    this.mindMap.on('scale', this.onScale)
   }
 
   // 解绑事件
@@ -47,6 +49,15 @@ class NodeImgAdjust {
     this.mindMap.off('mouseup', this.onMouseup)
     this.mindMap.off('node_mouseup', this.onMouseup)
     this.mindMap.off('node_tree_render_end', this.onRenderEnd)
+    this.mindMap.off('scale', this.onScale)
+  }
+
+  // 如果当前操作按钮正在显示时缩放了画布，那么需要更新位置
+  onScale() {
+    if (this.node && this.img && this.isShowHandleEl) {
+      this.rect = this.img.rbox()
+      this.setHandleElRect()
+    }
   }
 
   // 节点图片鼠标移动事件
@@ -122,7 +133,11 @@ class NodeImgAdjust {
 
   // 创建调整按钮元素
   createResizeBtnEl() {
-    const { imgResizeBtnSize } = this.mindMap.opt
+    const {
+      imgResizeBtnSize,
+      customResizeBtnInnerHTML,
+      customDeleteBtnInnerHTML
+    } = this.mindMap.opt
     // 容器元素
     this.handleEl = document.createElement('div')
     this.handleEl.style.cssText = `
@@ -134,7 +149,7 @@ class NodeImgAdjust {
     this.handleEl.className = 'node-img-handle'
     // 调整按钮元素
     const btnEl = document.createElement('div')
-    btnEl.innerHTML = btnsSvg.imgAdjust
+    btnEl.innerHTML = customResizeBtnInnerHTML || btnsSvg.imgAdjust
     btnEl.style.cssText = `
       position: absolute;
       right: 0;
@@ -179,7 +194,7 @@ class NodeImgAdjust {
     const btnRemove = document.createElement('div')
     this.handleEl.prepend(btnRemove)
     btnRemove.className = 'node-image-remove'
-    btnRemove.innerHTML = btnsSvg.remove
+    btnRemove.innerHTML = customDeleteBtnInnerHTML || btnsSvg.remove
     btnRemove.style.cssText = `
       position: absolute;
       right: 0;top:0;color:#fff;
@@ -206,6 +221,7 @@ class NodeImgAdjust {
       }
       if (!stop) {
         this.mindMap.execCommand('SET_NODE_IMAGE', this.node, { url: null })
+        this.mindMap.emit('delete_node_img_from_delete_btn', this.node)
       }
     })
     // 添加元素到页面
@@ -215,6 +231,7 @@ class NodeImgAdjust {
 
   // 鼠标按钮按下事件
   onMousedown(e) {
+    this.mindMap.emit('node_img_adjust_btn_mousedown', this.node)
     this.isMousedown = true
     this.mousedownDrawTransform = this.mindMap.draw.transform()
     // 隐藏节点实际图片

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

@@ -1,149 +1,68 @@
 import {
   formatDataToArray,
   walk,
-  getTopAncestorsFomNodeList,
   getNodeListBoundingRect,
   createUid
 } from '../utils'
-
-// 解析要添加外框的节点实例列表
-const parseAddNodeList = list => {
-  // 找出顶层节点
-  list = getTopAncestorsFomNodeList(list)
-  const cache = {}
-  const uidToParent = {}
-  // 找出列表中节点在兄弟节点中的索引，并和父节点关联起来
-  list.forEach(node => {
-    const parent = node.parent
-    if (parent) {
-      const pUid = parent.uid
-      uidToParent[pUid] = parent
-      const index = node.getIndexInBrothers()
-      const data = {
-        node,
-        index
-      }
-      if (cache[pUid]) {
-        if (
-          !cache[pUid].find(item => {
-            return item.index === data.index
-          })
-        ) {
-          cache[pUid].push(data)
-        }
-      } else {
-        cache[pUid] = [data]
-      }
-    }
-  })
-  const res = []
-  Object.keys(cache).forEach(uid => {
-    const indexList = cache[uid]
-    const parentNode = uidToParent[uid]
-    if (indexList.length > 1) {
-      // 多个节点
-      const rangeList = indexList
-        .map(item => {
-          return item.index
-        })
-        .sort((a, b) => {
-          return a - b
-        })
-      const minIndex = rangeList[0]
-      const maxIndex = rangeList[rangeList.length - 1]
-      let curStart = -1
-      let curEnd = -1
-      for (let i = minIndex; i <= maxIndex; i++) {
-        // 连续索引
-        if (rangeList.includes(i)) {
-          if (curStart === -1) {
-            curStart = i
-          }
-          curEnd = i
-        } else {
-          // 连续断开
-          if (curStart !== -1 && curEnd !== -1) {
-            res.push({
-              node: parentNode,
-              range: [curStart, curEnd]
-            })
-          }
-          curStart = -1
-          curEnd = -1
-        }
-      }
-      // 不要忘了最后一段索引
-      if (curStart !== -1 && curEnd !== -1) {
-        res.push({
-          node: parentNode,
-          range: [curStart, curEnd]
-        })
-      }
-    } else {
-      // 单个节点
-      res.push({
-        node: parentNode,
-        range: [indexList[0].index, indexList[0].index]
-      })
-    }
-  })
-  return res
-}
-
-// 解析获取节点的子节点生成的外框列表
-const getNodeOuterFrameList = node => {
-  const children = node.children
-  if (!children || children.length <= 0) return
-  const res = []
-  const map = {}
-  children.forEach((item, index) => {
-    const outerFrameData = item.getData('outerFrame')
-    if (!outerFrameData) return
-    const groupId = outerFrameData.groupId
-    if (groupId) {
-      if (!map[groupId]) {
-        map[groupId] = []
-      }
-      map[groupId].push({
-        node: item,
-        index
-      })
-    } else {
-      res.push({
-        nodeList: [item],
-        range: [index, index]
-      })
-    }
-  })
-  Object.keys(map).forEach(id => {
-    const list = map[id]
-    res.push({
-      nodeList: list.map(item => {
-        return item.node
-      }),
-      range: [list[0].index, list[list.length - 1].index]
-    })
-  })
-  return res
-}
+import {
+  parseAddNodeList,
+  getNodeOuterFrameList
+} from './outerFrame/outerFrameUtils'
+import outerFrameTextMethods from './outerFrame/outerFrameText'
 
 // 默认外框样式
 const defaultStyle = {
+  // 外框圆角大小
   radius: 5,
+  // 外框边框宽度
   strokeWidth: 2,
+  // 外框边框颜色
   strokeColor: '#0984e3',
+  // 外框边框虚线样式
   strokeDasharray: '5,5',
-  fill: 'rgba(9,132,227,0.05)'
+  // 外框填充颜色
+  fill: 'rgba(9,132,227,0.05)',
+  // 外框文字字号
+  fontSize: 14,
+  // 外框文字字体
+  fontFamily: '微软雅黑, Microsoft YaHei',
+  // 加粗
+  fontWeight: 'normal', // bold
+  // 斜体
+  fontStyle: 'normal', // italic
+  // 外框文字颜色
+  color: '#fff',
+  // 外框文字行高
+  lineHeight: 1.2,
+  // 外框文字背景
+  textFill: '#0984e3',
+  // 外框文字圆角
+  textFillRadius: 5,
+  // 外框文字矩内边距，左上右下
+  textFillPadding: [5, 5, 5, 5],
+  // 外框文字水平显示位置，相对于外框
+  textAlign: 'left' // left、center、right
 }
 
+const OUTER_FRAME_TEXT_EDIT_WRAP = 'outer-frame-text-edit-warp'
+
 // 外框插件
 class OuterFrame {
   constructor(opt = {}) {
     this.mindMap = opt.mindMap
     this.draw = null
     this.createDrawContainer()
+    this.isNotRenderOuterFrames = false
+    this.textNodeList = []
     this.outerFrameElList = []
     this.activeOuterFrame = null
+    // 文字相关方法
+    this.textEditNode = null
+    this.showTextEdit = false
+    Object.keys(outerFrameTextMethods).forEach(item => {
+      this[item] = outerFrameTextMethods[item].bind(this)
+    })
+    this.mindMap.addEditNodeClass(OUTER_FRAME_TEXT_EDIT_WRAP)
     this.bindEvent()
   }
 
@@ -164,6 +83,11 @@ class OuterFrame {
     this.clearActiveOuterFrame = this.clearActiveOuterFrame.bind(this)
     this.mindMap.on('draw_click', this.clearActiveOuterFrame)
     this.mindMap.on('node_click', this.clearActiveOuterFrame)
+    // 缩放事件
+    this.mindMap.on('scale', this.onScale)
+    // 实例销毁事件
+    this.onBeforeDestroy = this.onBeforeDestroy.bind(this)
+    this.mindMap.on('beforeDestroy', this.onBeforeDestroy)
 
     this.addOuterFrame = this.addOuterFrame.bind(this)
     this.mindMap.command.add('ADD_OUTER_FRAME', this.addOuterFrame)
@@ -181,6 +105,8 @@ class OuterFrame {
     this.mindMap.off('data_change', this.renderOuterFrames)
     this.mindMap.off('draw_click', this.clearActiveOuterFrame)
     this.mindMap.off('node_click', this.clearActiveOuterFrame)
+    this.mindMap.off('scale', this.onScale)
+    this.mindMap.off('beforeDestroy', this.onBeforeDestroy)
     this.mindMap.command.remove('ADD_OUTER_FRAME', this.addOuterFrame)
     this.mindMap.keyCommand.removeShortcut(
       'Del|Backspace',
@@ -188,6 +114,12 @@ class OuterFrame {
     )
   }
 
+  // 实例销毁时清除关联线文字编辑框
+  onBeforeDestroy() {
+    this.hideEditTextBox()
+    this.removeTextEditEl()
+  }
+
   // 给节点添加外框数据
   /*
   config: {
@@ -256,20 +188,47 @@ class OuterFrame {
     this.mindMap.emit('outer_frame_delete')
   }
 
+  // 删除当前激活外框的文字
+  removeActiveOuterFrameText() {
+    this.updateActiveOuterFrame({
+      text: ''
+    })
+  }
+
   // 更新当前激活的外框
-  // 执行了该方法后请立即隐藏你的样式面板，因为会清除当前激活的外框
   updateActiveOuterFrame(config = {}) {
     if (!this.activeOuterFrame) return
-    const { node, range } = this.activeOuterFrame
+    this.isNotRenderOuterFrames = true
+    const { el, node, range } = this.activeOuterFrame
+    let newStrokeDasharray = ''
     this.getRangeNodeList(node, range).forEach(node => {
       const outerFrame = node.getData('outerFrame')
+      const newData = {
+        ...outerFrame,
+        ...config
+      }
+      newStrokeDasharray = newData.strokeDasharray
       this.mindMap.execCommand('SET_NODE_DATA', node, {
-        outerFrame: {
-          ...outerFrame,
-          ...config
-        }
+        outerFrame: newData
       })
     })
+    el.cacheStyle = {
+      dasharray: newStrokeDasharray
+    }
+    this.updateOuterFrameStyle()
+  }
+
+  // 更新当前激活外框的样式
+  updateOuterFrameStyle() {
+    const { el, node, range, textNode } = this.activeOuterFrame
+    const firstNode = this.getNodeRangeFirstNode(node, range)
+    const styleConfig = this.getStyle(firstNode)
+    this.styleOuterFrame(el, {
+      ...styleConfig,
+      strokeDasharray: 'none'
+    })
+    const text = this.getText(firstNode)
+    this.renderText(text, el, textNode, node, range)
   }
 
   // 获取某个节点指定范围的带外框的子节点列表
@@ -279,8 +238,19 @@ class OuterFrame {
     })
   }
 
+  // 获取某个节点指定范围的带外框的第一个子节点
+  getNodeRangeFirstNode(node, range) {
+    return node.children[range[0]]
+  }
+
   // 渲染外框
   renderOuterFrames() {
+    if (this.isNotRenderOuterFrames) {
+      this.isNotRenderOuterFrames = false
+      return
+    }
+    this.clearActiveOuterFrame()
+    this.clearTextNodes()
     this.clearOuterFrameElList()
     let tree = this.mindMap.renderer.root
     if (!tree) return
@@ -317,11 +287,15 @@ class OuterFrame {
                 t.scaleY,
               (width + outerFramePaddingX * 2) / t.scaleX,
               (height + outerFramePaddingY * 2) / t.scaleY,
-              nodeList[0].getData('outerFrame') // 使用第一个节点的外框样式
+              this.getStyle(nodeList[0]) // 使用第一个节点的外框样式
             )
+            // 渲染文字，如果有的话
+            const textNode = this.createText(el, cur, range)
+            this.textNodeList.push(textNode)
+            this.renderText(this.getText(nodeList[0]), el, textNode, cur, range)
             el.on('click', e => {
               e.stopPropagation()
-              this.setActiveOuterFrame(el, cur, range)
+              this.setActiveOuterFrame(el, cur, range, textNode)
             })
           })
         }
@@ -333,37 +307,67 @@ class OuterFrame {
   }
 
   // 激活外框
-  setActiveOuterFrame(el, node, range) {
+  setActiveOuterFrame(el, node, range, textNode) {
     this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
     this.clearActiveOuterFrame()
     this.activeOuterFrame = {
       el,
       node,
-      range
+      range,
+      textNode
     }
     el.stroke({
       dasharray: 'none'
     })
+    // 如果没有输入过文字，那么显示默认文字
+    if (!this.getText(this.getNodeRangeFirstNode(node, range))) {
+      this.renderText(
+        this.mindMap.opt.defaultOuterFrameText,
+        el,
+        textNode,
+        node,
+        range
+      )
+    }
     this.mindMap.emit('outer_frame_active', el, node, range)
   }
 
   // 清除当前激活的外框
   clearActiveOuterFrame() {
     if (!this.activeOuterFrame) return
-    const { el } = this.activeOuterFrame
+    const { el, textNode, node, range } = this.activeOuterFrame
     el.stroke({
       dasharray: el.cacheStyle.dasharray || defaultStyle.strokeDasharray
     })
+    // 隐藏文本编辑框
+    this.hideEditTextBox()
+    // 如果没有输入过文字，那么隐藏
+    if (!this.getText(this.getNodeRangeFirstNode(node, range))) {
+      textNode.clear()
+    }
     this.activeOuterFrame = null
+    this.mindMap.emit('outer_frame_deactivate')
+  }
+
+  // 获取指定外框的样式
+  getStyle(node) {
+    return { ...defaultStyle, ...(node.getData('outerFrame') || {}) }
   }
 
   // 创建外框元素
   createOuterFrameEl(x, y, width, height, styleConfig = {}) {
-    styleConfig = { ...defaultStyle, ...styleConfig }
-    const el = this.draw
-      .rect()
-      .size(width, height)
-      .radius(styleConfig.radius)
+    const el = this.draw.rect().size(width, height).x(x).y(y)
+    this.styleOuterFrame(el, styleConfig)
+    el.cacheStyle = {
+      dasharray: styleConfig.strokeDasharray
+    }
+    this.outerFrameElList.push(el)
+    return el
+  }
+
+  // 设置外框样式
+  styleOuterFrame(el, styleConfig) {
+    el.radius(styleConfig.radius)
       .stroke({
         width: styleConfig.strokeWidth,
         color: styleConfig.strokeColor,
@@ -372,13 +376,13 @@ class OuterFrame {
       .fill({
         color: styleConfig.fill
       })
-      .x(x)
-      .y(y)
-    el.cacheStyle = {
-      dasharray: styleConfig.strokeDasharray
-    }
-    this.outerFrameElList.push(el)
-    return el
+  }
+
+  // 清除文本元素
+  clearTextNodes() {
+    this.textNodeList.forEach(item => {
+      item.remove()
+    })
   }
 
   // 清除外框元素
@@ -392,15 +396,18 @@ class OuterFrame {
 
   // 插件被移除前做的事情
   beforePluginRemove() {
+    this.mindMap.deleteEditNodeClass(OUTER_FRAME_TEXT_EDIT_WRAP)
     this.unBindEvent()
   }
 
   // 插件被卸载前做的事情
   beforePluginDestroy() {
+    this.mindMap.deleteEditNodeClass(OUTER_FRAME_TEXT_EDIT_WRAP)
     this.unBindEvent()
   }
 }
 
 OuterFrame.instanceName = 'outerFrame'
+OuterFrame.defaultStyle = defaultStyle
 
 export default OuterFrame

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

@@ -6,11 +6,13 @@ import {
   getTextFromHtml,
   isUndef,
   checkSmmFormatData,
-  removeHtmlNodeByClass,
   formatGetNodeGeneralization,
-  nodeRichTextToTextWithWrap
+  nodeRichTextToTextWithWrap,
+  getNodeRichTextStyles,
+  htmlEscape,
+  compareVersion
 } from '../utils'
-import { CONSTANTS } from '../constants/constant'
+import { richTextSupportStyleList } from '../constants/constant'
 import MindMapNode from '../core/render/node/MindMapNode'
 import { Scope } from 'parchment'
 
@@ -38,6 +40,8 @@ let fontSizeList = new Array(100).fill(0).map((_, index) => {
   return index + 'px'
 })
 
+const RICH_TEXT_EDIT_WRAP = 'ql-editor'
+
 // 富文本编辑插件
 class RichText {
   constructor({ mindMap, pluginOpt }) {
@@ -53,27 +57,16 @@ class RichText {
     this.isInserting = false
     this.styleEl = null
     this.cacheEditingText = ''
-    this.lostStyle = false
     this.isCompositing = false
     this.textNodePaddingX = 6
     this.textNodePaddingY = 4
-    this.supportStyleProps = [
-      'fontFamily',
-      'fontSize',
-      'fontWeight',
-      'fontStyle',
-      'textDecoration',
-      'color'
-    ]
+    this.mindMap.addEditNodeClass(RICH_TEXT_EDIT_WRAP)
     this.initOpt()
     this.extendQuill()
     this.appendCss()
     this.bindEvent()
 
-    // 处理数据，转成富文本格式
-    if (this.mindMap.opt.data) {
-      this.mindMap.opt.data = this.handleSetData(this.mindMap.opt.data)
-    }
+    this.handleDataToRichTextOnInit()
   }
 
   // 绑定事件
@@ -108,18 +101,28 @@ class RichText {
         user-select: none;
       }
 
-      .smm-richtext-node-wrap p {
-        font-family: auto;
+      .ql-editor .ql-align-left, 
+      .smm-richtext-node-wrap .ql-align-left {
+        text-align: left;
+      }
+
+      .smm-richtext-node-wrap .ql-align-right {
+        text-align: right;
+      }
+
+      .smm-richtext-node-wrap .ql-align-center {
+        text-align: center;
       }
       `
     )
     let cssText = `
-      .${CONSTANTS.EDIT_NODE_CLASS.RICH_TEXT_EDIT_WRAP} {
+      .${RICH_TEXT_EDIT_WRAP} {
         overflow: hidden;
         padding: 0;
         height: auto;
-        line-height: normal;
+        line-height: 1.2;
         -webkit-user-select: text;
+        text-align: inherit;
       }
       
       .ql-container {
@@ -130,10 +133,6 @@ class RichText {
       .ql-container.ql-snow {
         border: none;
       }
-
-      .smm-richtext-node-edit-wrap p {
-        font-family: auto;
-      }
     `
     this.styleEl = document.createElement('style')
     this.styleEl.type = 'text/css'
@@ -166,6 +165,8 @@ class RichText {
 
     this.extendFont([])
 
+    this.extendAlign()
+
     // 扩展quill的字号列表
     const SizeAttributor = Quill.import('attributors/class/size')
     SizeAttributor.whitelist = fontSizeList
@@ -190,6 +191,13 @@ class RichText {
     Quill.register(FontStyle, true)
   }
 
+  // 扩展文本对齐方式
+  extendAlign() {
+    const AlignFormat = Quill.import('formats/align')
+    AlignFormat.whitelist = ['right', 'center', 'justify', 'left']
+    Quill.register(AlignFormat, true)
+  }
+
   // 显示文本编辑控件
   showEditText({ node, rect, isInserting, isFromKeyDown, isFromScale }) {
     if (this.showTextEdit) {
@@ -238,6 +246,7 @@ class RichText {
         outline: none;
         word-break: break-all;
         padding: ${paddingY}px ${paddingX}px;
+        line-height: 1.2;
       `
       this.textEditNode.addEventListener('click', e => {
         e.stopPropagation()
@@ -253,6 +262,7 @@ class RichText {
       const targetNode = customInnerElsAppendTo || document.body
       targetNode.appendChild(this.textEditNode)
     }
+    this.addNodeTextStyleToTextEditNode(node)
     this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px`
     this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
     this.textEditNode.style.zIndex = nodeTextEditZIndex
@@ -277,13 +287,8 @@ class RichText {
     const isEmptyText = isUndef(nodeText)
     // 是否是非空的非富文本
     const noneEmptyNoneRichText = !node.getData('richText') && !isEmptyText
-    // 如果是空文本，那么设置为丢失样式状态，否则输入不会带上样式
-    if (isEmptyText) {
-      this.lostStyle = true
-    }
     if (isFromKeyDown && autoEmptyTextWhenKeydownEnterEdit) {
       this.textEditNode.innerHTML = ''
-      this.lostStyle = true
     } else if (noneEmptyNoneRichText) {
       // 还不是富文本
       let text = String(nodeText).split(/\n/gim).join('<br>')
@@ -294,19 +299,13 @@ class RichText {
       this.textEditNode.innerHTML = this.cacheEditingText || nodeText
     }
     this.initQuillEditor()
-    document.querySelector(
-      '.' + CONSTANTS.EDIT_NODE_CLASS.RICH_TEXT_EDIT_WRAP
-    ).style.minHeight = originHeight + 'px'
-    this.showTextEdit = true
+    this.setQuillContainerMinHeight(originHeight)
+    this.setIsShowTextEdit(true)
     // 如果是刚创建的节点，那么默认全选，否则普通激活不全选，除非selectTextOnEnterEditText配置为true
     // 在selectTextOnEnterEditText时，如果是在keydown事件进入的节点编辑，也不需要全选
     this.focus(
       isInserting || (selectTextOnEnterEditText && !isFromKeyDown) ? 0 : null
     )
-    if (noneEmptyNoneRichText) {
-      // 如果是非富文本的情况，需要手动应用文本样式
-      this.setTextStyleIfNotRichText(node)
-    }
     this.cacheEditingText = ''
   }
 
@@ -325,6 +324,20 @@ class RichText {
       : '0 0 20px rgba(0,0,0,.5)'
   }
 
+  // 将指定节点的文本样式添加到编辑框元素上
+  addNodeTextStyleToTextEditNode(node) {
+    const style = getNodeRichTextStyles(node)
+    Object.keys(style).forEach(prop => {
+      this.textEditNode.style[prop] = style[prop]
+    })
+  }
+
+  // 设置quill编辑器容器的最小高度
+  setQuillContainerMinHeight(minHeight) {
+    document.querySelector('.' + RICH_TEXT_EDIT_WRAP).style.minHeight =
+      minHeight + 'px'
+  }
+
   // 更新文本编辑框的大小和位置
   updateTextEditNode() {
     if (!this.node) return
@@ -337,6 +350,7 @@ class RichText {
     this.textEditNode.style.minHeight = originHeight + 'px'
     this.textEditNode.style.left = rect.left + 'px'
     this.textEditNode.style.top = rect.top + 'px'
+    this.setQuillContainerMinHeight(originHeight)
   }
 
   // 删除文本编辑框元素
@@ -346,24 +360,10 @@ class RichText {
     targetNode.removeChild(this.textEditNode)
   }
 
-  // 如果是非富文本的情况，需要手动应用文本样式
-  setTextStyleIfNotRichText(node) {
-    let style = {
-      font: node.style.merge('fontFamily'),
-      color: node.style.merge('color'),
-      italic: node.style.merge('fontStyle') === 'italic',
-      bold: node.style.merge('fontWeight') === 'bold',
-      size: node.style.merge('fontSize') + 'px',
-      underline: node.style.merge('textDecoration') === 'underline',
-      strike: node.style.merge('textDecoration') === 'line-through'
-    }
-    this.pureFormatAllText(style)
-  }
-
   // 获取当前正在编辑的内容
   getEditText() {
     // https://github.com/slab/quill/issues/4509
-    return this.quill.container.firstChild.innerHTML.replaceAll(/  +/g, match =>
+    return this.quill.container.firstChild.innerHTML.replace(/  +/g, match =>
       '&nbsp;'.repeat(match.length)
     )
     // 去除ql-cursor节点
@@ -374,18 +374,6 @@ class RichText {
     // return html.replace(/<p><br><\/p>$/, '')
   }
 
-  // 给html字符串中的节点样式按样式名首字母排序
-  sortHtmlNodeStyles(html) {
-    return html.replace(/(<[^<>]+\s+style=")([^"]+)("\s*>)/g, (_, a, b, c) => {
-      let arr = b.match(/[^:]+:[^:]+;/g) || []
-      arr = arr.map(item => {
-        return item.trim()
-      })
-      arr.sort()
-      return a + arr.join('') + c
-    })
-  }
-
   // 隐藏文本编辑控件，即完成编辑
   hideEditText(nodes) {
     if (!this.showTextEdit) {
@@ -395,12 +383,11 @@ class RichText {
     if (typeof beforeHideRichTextEdit === 'function') {
       beforeHideRichTextEdit(this)
     }
-    let html = this.getEditText()
-    html = this.sortHtmlNodeStyles(html)
+    const html = this.getEditText()
     const list = nodes && nodes.length > 0 ? nodes : [this.node]
     const node = this.node
     this.textEditNode.style.display = 'none'
-    this.showTextEdit = false
+    this.setIsShowTextEdit(false)
     this.mindMap.emit('rich_text_selection_change', false)
     this.node = null
     this.isInserting = false
@@ -482,7 +469,8 @@ class RichText {
         'background',
         'font',
         'size',
-        'formula'
+        'formula',
+        'align'
       ], // 明确指定允许的格式，不包含有序列表，无序列表等
       theme: 'snow'
     })
@@ -503,7 +491,10 @@ class RichText {
     })
     this.quill.on('selection-change', range => {
       // 刚创建的节点全选不需要显示操作条
-      if (this.isInserting) return
+      if (this.isInserting) {
+        this.isInserting = false
+        return
+      }
       this.lastRange = this.range
       this.range = null
       if (range) {
@@ -536,18 +527,6 @@ class RichText {
       }
     })
     this.quill.on('text-change', () => {
-      let contents = this.quill.getContents()
-      let len = contents.ops.length
-      // 如果编辑过程中删除所有字符，那么会丢失主题的样式
-      if (len <= 0 || (len === 1 && contents.ops[0].insert === '\n')) {
-        this.lostStyle = true
-        // 需要删除节点的样式数据
-        this.syncFormatToNodeConfig(null, true)
-      } else if (this.lostStyle && !this.isCompositing) {
-        // 如果处于样式丢失状态，那么需要进行格式化加回样式
-        this.setTextStyleIfNotRichText(this.node)
-        this.lostStyle = false
-      }
       this.mindMap.emit('node_text_edit_change', {
         node: this.node,
         text: this.getEditText(),
@@ -638,10 +617,16 @@ class RichText {
       return
     }
     this.isCompositing = false
-    if (!this.lostStyle) {
-      return
+  }
+
+  // 设置文本编辑框是否处于显示状态
+  setIsShowTextEdit(val) {
+    this.showTextEdit = val
+    if (val) {
+      this.mindMap.keyCommand.stopCheckInSvg()
+    } else {
+      this.mindMap.keyCommand.recoveryCheckInSvg()
     }
-    this.setTextStyleIfNotRichText(this.node)
   }
 
   // 选中全部
@@ -651,19 +636,28 @@ class RichText {
 
   // 聚焦
   focus(start) {
-    let len = this.quill.getLength()
+    const len = this.quill.getLength()
     this.quill.setSelection(typeof start === 'number' ? start : len, len)
   }
 
   // 格式化当前选中的文本
-  formatText(config = {}, clear = false, pure = false) {
+  formatText(config = {}, clear = false) {
     if (!this.range && !this.lastRange) return
-    if (!pure) this.syncFormatToNodeConfig(config, clear)
-    let rangeLost = !this.range
-    let range = rangeLost ? this.lastRange : this.range
-    clear
-      ? this.quill.removeFormat(range.index, range.length)
-      : this.quill.formatText(range.index, range.length, config)
+    const rangeLost = !this.range
+    const range = rangeLost ? this.lastRange : this.range
+    if (clear) {
+      this.quill.removeFormat(range.index, range.length)
+    } else {
+      const { align, ...rest } = config
+      // 文本对齐需要对行进行格式化
+      if (align) {
+        this.quill.formatLine(range.index, range.length, 'align', align)
+      }
+      // 其他内容对文本
+      if (Object.keys(rest).length > 0) {
+        this.quill.formatText(range.index, range.length, rest)
+      }
+    }
     if (rangeLost) {
       this.quill.setSelection(this.lastRange.index, this.lastRange.length)
     }
@@ -671,56 +665,25 @@ class RichText {
 
   // 清除当前选中文本的样式
   removeFormat() {
-    // 先移除全部样式
     this.formatText({}, true)
-    // 再将样式恢复为当前主题改节点的默认样式
-    const style = {}
-    if (this.node) {
-      this.supportStyleProps.forEach(key => {
-        style[key] = this.node.style.merge(key)
-      })
-    }
-    const config = this.normalStyleToRichTextStyle(style)
-    this.formatText(config, false, true)
   }
 
   // 格式化指定范围的文本
   formatRangeText(range, config = {}) {
     if (!range) return
-    this.syncFormatToNodeConfig(config)
     this.quill.formatText(range.index, range.length, config)
   }
 
   // 格式化所有文本
   formatAllText(config = {}) {
-    this.syncFormatToNodeConfig(config)
-    this.pureFormatAllText(config)
-  }
-
-  // 纯粹的格式化所有文本
-  pureFormatAllText(config = {}) {
     this.quill.formatText(0, this.quill.getLength(), config)
   }
 
-  // 同步格式化到节点样式配置
-  syncFormatToNodeConfig(config, clear) {
-    if (!this.node) return
-    if (clear) {
-      // 清除文本样式
-      this.supportStyleProps.forEach(prop => {
-        delete this.node.nodeData.data[prop]
-      })
-    } else {
-      let data = this.richTextStyleToNormalStyle(config)
-      this.mindMap.execCommand('SET_NODE_DATA', this.node, data)
-    }
-  }
-
   // 将普通节点样式对象转换成富文本样式对象
   normalStyleToRichTextStyle(style) {
-    let config = {}
+    const config = {}
     Object.keys(style).forEach(prop => {
-      let value = style[prop]
+      const value = style[prop]
       switch (prop) {
         case 'fontFamily':
           config.font = value
@@ -741,6 +704,9 @@ class RichText {
         case 'color':
           config.color = value
           break
+        case 'textAlign':
+          config.align = value
+          break
         default:
           break
       }
@@ -750,9 +716,9 @@ class RichText {
 
   // 将富文本样式对象转换成普通节点样式对象
   richTextStyleToNormalStyle(config) {
-    let data = {}
+    const data = {}
     Object.keys(config).forEach(prop => {
-      let value = config[prop]
+      const value = config[prop]
       switch (prop) {
         case 'font':
           data.fontFamily = value
@@ -775,6 +741,9 @@ class RichText {
         case 'color':
           data.color = value
           break
+        case 'align':
+          data.textAlign = value
+          break
         default:
           break
       }
@@ -787,39 +756,50 @@ class RichText {
     const keys = Object.keys(obj)
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i]
-      if (this.supportStyleProps.includes(key)) {
+      if (richTextSupportStyleList.includes(key)) {
         return true
       }
     }
     return false
   }
 
-  // 给未激活的节点设置富文本样式
-  setNotActiveNodeStyle(node, style) {
-    const config = this.normalStyleToRichTextStyle(style)
-    if (Object.keys(config).length > 0) {
-      this.showEditText({ node })
-      this.formatAllText(config)
-      this.hideEditText([node])
-    }
-  }
-
   // 检查指定节点是否存在自定义的富文本样式
   checkNodeHasCustomRichTextStyle(node) {
     const nodeData = node instanceof MindMapNode ? node.getData() : node
-    for (let i = 0; i < this.supportStyleProps.length; i++) {
-      if (nodeData[this.supportStyleProps[i]] !== undefined) {
+    for (let i = 0; i < richTextSupportStyleList.length; i++) {
+      if (nodeData[richTextSupportStyleList[i]] !== undefined) {
         return true
       }
     }
     return false
   }
 
+  // 转换数据后的渲染操作
+  afterHandleData() {
+    // 清空历史数据，并且触发数据变化
+    this.mindMap.command.clearHistory()
+    this.mindMap.command.addHistory()
+    this.mindMap.render()
+  }
+
+  // 插件实例化时处理思维导图数据，转换为富文本数据
+  handleDataToRichTextOnInit() {
+    // 处理数据，转成富文本格式
+    if (this.mindMap.renderer.renderTree) {
+      // 如果已经存在渲染树了，那么直接更新渲染树，并且触发重新渲染
+      this.handleSetData(this.mindMap.renderer.renderTree)
+      this.afterHandleData()
+    } else if (this.mindMap.opt.data) {
+      this.handleSetData(this.mindMap.opt.data)
+    }
+  }
+
   // 将所有节点转换成非富文本节点
   transformAllNodesToNormalNode() {
-    if (!this.mindMap.renderer.renderTree) return
+    const renderTree = this.mindMap.renderer.renderTree
+    if (!renderTree) return
     walk(
-      this.mindMap.renderer.renderTree,
+      renderTree,
       null,
       node => {
         if (node.data.richText) {
@@ -840,25 +820,36 @@ class RichText {
       0,
       0
     )
-    // 清空历史数据，并且触发数据变化
-    this.mindMap.command.clearHistory()
-    this.mindMap.command.addHistory()
-    this.mindMap.render(null, CONSTANTS.TRANSFORM_TO_NORMAL_NODE)
+    this.afterHandleData()
+  }
+
+  handleDataToRichText(data) {
+    const oldIsRichText = data.richText
+    data.richText = true
+    data.resetRichText = true
+    // 如果原本就是富文本，那么不能转换
+    if (!oldIsRichText) {
+      data.text = htmlEscape(data.text)
+    }
   }
 
   // 处理导入数据
   handleSetData(data) {
-    let walk = root => {
-      if (root.data && !root.data.richText) {
-        root.data.richText = true
-        root.data.resetRichText = true
+    if (!data) return
+    // 短期处理，为了兼容老数据，长期会去除
+    const isOldRichTextVersion =
+      !data.smmVersion || compareVersion(data.smmVersion, '0.13.0') === '<'
+    const walk = root => {
+      if (root.data && (!root.data.richText || isOldRichTextVersion)) {
+        this.handleDataToRichText(root.data)
       }
       // 概要
       if (root.data) {
         const generalizationList = formatGetNodeGeneralization(root.data)
         generalizationList.forEach(item => {
-          item.richText = true
-          item.resetRichText = true
+          if (!item.richText || isOldRichTextVersion) {
+            this.handleDataToRichText(item)
+          }
         })
       }
       if (root.children && root.children.length > 0) {
@@ -877,12 +868,14 @@ class RichText {
     document.head.removeChild(this.styleEl)
     this.unbindEvent()
     this.mindMap.removeAppendCss('richText')
+    this.mindMap.deleteEditNodeClass(RICH_TEXT_EDIT_WRAP)
   }
 
   // 插件被卸载前做的事情
   beforePluginDestroy() {
     document.head.removeChild(this.styleEl)
     this.unbindEvent()
+    this.mindMap.deleteEditNodeClass(RICH_TEXT_EDIT_WRAP)
   }
 }
 

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

@@ -107,6 +107,7 @@ class Search {
 
   // 搜索匹配的节点
   doSearch() {
+    this.clearHighlightOnReadonly()
     this.updateMatchNodeList([])
     this.currentIndex = -1
     const { isOnlySearchCurrentRenderNodes } = this.mindMap.opt
@@ -174,19 +175,17 @@ class Search {
       }
     }
     const { readonly } = this.mindMap.opt
-    // 只读模式下需要激活之前节点的高亮
-    if (readonly) {
-      this.matchNodeList.forEach(node => {
-        if (this.isNodeInstance(node)) {
-          node.closeHighlight()
-        }
-      })
-    }
+    // 只读模式下需要清除之前节点的高亮
+    this.clearHighlightOnReadonly()
     const currentNode = this.matchNodeList[this.currentIndex]
     this.notResetSearchText = true
     const uid = this.isNodeInstance(currentNode)
       ? currentNode.getData('uid')
       : currentNode.data.uid
+    if (!uid) {
+      callback()
+      return
+    }
     const targetNode = this.mindMap.renderer.findNodeByUid(uid)
     this.mindMap.execCommand('GO_TARGET_NODE', uid, node => {
       if (!this.isNodeInstance(currentNode)) {
@@ -205,6 +204,18 @@ class Search {
     })
   }
 
+  // 只读模式下清除现有匹配节点的高亮
+  clearHighlightOnReadonly() {
+    const { readonly } = this.mindMap.opt
+    if (readonly) {
+      this.matchNodeList.forEach(node => {
+        if (this.isNodeInstance(node)) {
+          node.closeHighlight()
+        }
+      })
+    }
+  }
+
   // 定位到指定搜索结果索引的节点
   jump(index, callback = () => {}) {
     this.searchNext(callback, index)
@@ -228,7 +239,7 @@ class Search {
     const keep = replaceText.includes(this.searchText)
     const text = this.getReplacedText(currentNode, this.searchText, replaceText)
     this.notResetSearchText = true
-    currentNode.setText(text, currentNode.getData('richText'), true)
+    currentNode.setText(text, currentNode.getData('richText'))
     if (keep) {
       this.updateMatchNodeList(this.matchNodeList)
       return
@@ -258,18 +269,15 @@ class Search {
     // 如果当前搜索文本是替换文本的子串，那么该节点还是符合搜索结果的
     const keep = replaceText.includes(this.searchText)
     this.notResetSearchText = true
-    const hasRichTextPlugin = this.mindMap.renderer.hasRichTextPlugin()
     this.matchNodeList.forEach(node => {
       const text = this.getReplacedText(node, this.searchText, replaceText)
       if (this.isNodeInstance(node)) {
         const data = {
           text
         }
-        if (hasRichTextPlugin) data.resetRichText = !!node.getData('richText')
         this.mindMap.renderer.setNodeDataRender(node, data, true)
       } else {
         node.data.text = text
-        if (hasRichTextPlugin) node.data.resetRichText = !!node.data.richText
       }
     })
     this.mindMap.render()
@@ -289,7 +297,7 @@ class Search {
     if (richText) {
       return replaceHtmlText(text, searchText, replaceText)
     } else {
-      return text.replaceAll(searchText, replaceText)
+      return text.replace(new RegExp(searchText, 'g'), replaceText)
     }
   }
 

simple-mind-map/src/plugins/associativeLine/associativeLineText.js

@@ -5,6 +5,8 @@ import {
   selectAllInput
 } from '../../utils/index'
 
+const ASSOCIATIVE_LINE_TEXT_EDIT_WRAP = 'associative-line-text-edit-warp'
+
 // 创建文字节点
 function createText(data) {
   let g = this.associativeLineDraw.group()
@@ -43,7 +45,7 @@ function showEditTextBox(g) {
   // 输入框元素没有创建过，则先创建
   if (!this.textEditNode) {
     this.textEditNode = document.createElement('div')
-    this.textEditNode.className = 'associative-line-text-edit-warp'
+    this.textEditNode.className = ASSOCIATIVE_LINE_TEXT_EDIT_WRAP
     this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
     this.textEditNode.setAttribute('contenteditable', true)
     this.textEditNode.addEventListener('keyup', e => {
@@ -73,7 +75,7 @@ function showEditTextBox(g) {
   this.textEditNode.innerHTML = textLines.join('<br>')
   this.textEditNode.style.display = 'block'
   this.updateTextEditBoxPos(g)
-  this.showTextEdit = true
+  this.setIsShowTextEdit(true)
   // 如果是默认文本要全选输入框
   if (text === '' || text === defaultAssociativeLineText) {
     selectAllInput(this.textEditNode)
@@ -83,6 +85,16 @@ function showEditTextBox(g) {
   }
 }
 
+// 设置文本编辑框是否处于显示状态
+function setIsShowTextEdit(val) {
+  this.showTextEdit = val
+  if (val) {
+    this.mindMap.keyCommand.stopCheckInSvg()
+  } else {
+    this.mindMap.keyCommand.recoveryCheckInSvg()
+  }
+}
+
 // 删除文本编辑框元素
 function removeTextEditEl() {
   if (!this.textEditNode) return
@@ -124,7 +136,7 @@ function hideEditTextBox() {
   })
   this.textEditNode.style.display = 'none'
   this.textEditNode.innerHTML = ''
-  this.showTextEdit = false
+  this.setIsShowTextEdit(false)
   this.renderText(str, path, text, node, toNode)
   this.mindMap.emit('hide_text_edit')
 }
@@ -192,6 +204,7 @@ export default {
   styleText,
   onScale,
   showEditTextBox,
+  setIsShowTextEdit,
   removeTextEditEl,
   hideEditTextBox,
   updateTextEditBoxPos,

simple-mind-map/src/plugins/outerFrame/outerFrameText.js

@@ -0,0 +1,234 @@
+import { Text, Rect, G } from '@svgdotjs/svg.js'
+import {
+  getStrWithBrFromHtml,
+  focusInput,
+  selectAllInput
+} from '../../utils/index'
+
+const OUTER_FRAME_TEXT_EDIT_WRAP = 'outer-frame-text-edit-warp'
+
+// 创建文字节点
+function createText(el, cur, range) {
+  const g = this.draw.group()
+  const setActive = () => {
+    if (!this.activeOuterFrame || this.activeOuterFrame.el !== el) {
+      this.setActiveOuterFrame(el, cur, range, g)
+    }
+  }
+  g.click(e => {
+    e.stopPropagation()
+    setActive()
+  })
+  g.on('dblclick', e => {
+    e.stopPropagation()
+    setActive()
+    this.showEditTextBox(g)
+  })
+  return g
+}
+
+//  显示文本编辑框
+function showEditTextBox(g) {
+  this.mindMap.emit('before_show_text_edit')
+  // 注册回车快捷键
+  this.mindMap.keyCommand.addShortcut('Enter', () => {
+    this.hideEditTextBox()
+  })
+  // 输入框元素没有创建过，则先创建
+  if (!this.textEditNode) {
+    this.textEditNode = document.createElement('div')
+    this.textEditNode.className = OUTER_FRAME_TEXT_EDIT_WRAP
+    this.textEditNode.style.cssText = `
+      position: fixed;
+      box-sizing: border-box;
+      background-color: #fff;
+      box-shadow: 0 0 20px rgba(0,0,0,.5);
+      outline: none; 
+      word-break: break-all;
+    `
+    this.textEditNode.setAttribute('contenteditable', true)
+    this.textEditNode.addEventListener('keyup', e => {
+      e.stopPropagation()
+    })
+    this.textEditNode.addEventListener('click', e => {
+      e.stopPropagation()
+    })
+    const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
+    targetNode.appendChild(this.textEditNode)
+  }
+  const { node, range } = this.activeOuterFrame
+  const style = this.getStyle(this.getNodeRangeFirstNode(node, range))
+  const [pl, pt, pr, pb] = style.textFillPadding
+  let { defaultOuterFrameText, nodeTextEditZIndex } = this.mindMap.opt
+  let scale = this.mindMap.view.scale
+  let text = this.getText(this.getNodeRangeFirstNode(node, range))
+  let textLines = (text || defaultOuterFrameText).split(/\n/gim)
+  this.textEditNode.style.padding = `${pl}px ${pt}px ${pr}px ${pb}px`
+  this.textEditNode.style.fontFamily = style.fontFamily
+  this.textEditNode.style.fontSize = style.fontSize * scale + 'px'
+  this.textEditNode.style.fontWeight = style.fontWeight
+  this.textEditNode.style.fontStyle = style.fontStyle
+  this.textEditNode.style.lineHeight =
+    textLines.length > 1 ? style.lineHeight : 'normal'
+  this.textEditNode.style.zIndex = nodeTextEditZIndex
+  this.textEditNode.innerHTML = textLines.join('<br>')
+  this.textEditNode.style.display = 'block'
+  this.updateTextEditBoxPos(g)
+  this.setIsShowTextEdit(true)
+  // 如果是默认文本要全选输入框
+  if (text === '' || text === defaultOuterFrameText) {
+    selectAllInput(this.textEditNode)
+  } else {
+    // 否则聚焦即可
+    focusInput(this.textEditNode)
+  }
+}
+
+// 设置文本编辑框是否处于显示状态
+function setIsShowTextEdit(val) {
+  this.showTextEdit = val
+  if (val) {
+    this.mindMap.keyCommand.stopCheckInSvg()
+  } else {
+    this.mindMap.keyCommand.recoveryCheckInSvg()
+  }
+}
+
+// 删除文本编辑框元素
+function removeTextEditEl() {
+  if (!this.textEditNode) return
+  const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
+  targetNode.removeChild(this.textEditNode)
+}
+
+// 处理画布缩放
+function onScale() {
+  this.hideEditTextBox()
+}
+
+// 更新文本编辑框位置
+function updateTextEditBoxPos(g) {
+  let rect = g.node.getBoundingClientRect()
+  if (this.textEditNode) {
+    this.textEditNode.style.minWidth = `${rect.width}px`
+    this.textEditNode.style.minHeight = `${rect.height}px`
+    this.textEditNode.style.left = `${rect.left}px`
+    this.textEditNode.style.top = `${rect.top}px`
+  }
+}
+
+//  隐藏文本编辑框
+function hideEditTextBox() {
+  if (!this.showTextEdit) {
+    return
+  }
+  let { el, textNode, node, range } = this.activeOuterFrame
+  let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
+  // 如果是默认文本，那么不保存
+  let isDefaultText = str === this.mindMap.opt.defaultOuterFrameText
+  str = isDefaultText ? '' : str
+  this.updateActiveOuterFrame({
+    text: str
+  })
+  this.textEditNode.style.display = 'none'
+  this.textEditNode.innerHTML = ''
+  this.setIsShowTextEdit(false)
+  this.renderText(str, el, textNode, node, range)
+  this.mindMap.emit('hide_text_edit')
+}
+
+// 渲染文字
+function renderText(str, rect, textNode, node, range) {
+  if (!str) return
+  // 先清空文字节点原内容
+  textNode.clear()
+  // 创建背景矩形
+  const shape = new Rect()
+  textNode.add(shape)
+  // 获取样式配置
+  const style = this.getStyle(this.getNodeRangeFirstNode(node, range))
+  const [pl, pt, pr, pb] = style.textFillPadding
+  // 创建文本节点
+  let textArr = str.replace(/\n$/g, '').split(/\n/gim)
+  const g = new G()
+  textArr.forEach((item, index) => {
+    // 避免尾部的空行不占宽度，导致文本编辑框定位异常的问题
+    if (item === '') {
+      item = ''
+    }
+    let text = new Text().text(item)
+    text.y(style.fontSize * style.lineHeight * index)
+    this.styleText(text, style)
+    g.add(text)
+  })
+  textNode.add(g)
+  // 计算高度
+  const { width: textWidth, height: textHeight } = textNode.bbox()
+  const totalWidth = textWidth + pl + pr
+  const totalHeight = textHeight + pt + pb
+  shape.size(totalWidth, totalHeight).x(0).dy(0)
+  this.styleTextShape(shape, style)
+  // 设置节点位置
+  let tx = 0
+  switch (style.textAlign) {
+    case 'left':
+      tx = rect.x()
+      break
+    case 'center':
+      tx = rect.x() + rect.width() / 2 - totalWidth / 2
+      break
+    case 'right':
+      tx = rect.x() + rect.width() - totalWidth
+      break
+    default:
+      break
+  }
+  const ty = rect.y() - totalHeight
+  shape.x(tx)
+  shape.y(ty)
+  g.x(tx + pl)
+  g.y(ty + pt)
+}
+
+// 给文本背景设置样式
+function styleTextShape(shape, style) {
+  shape
+    .fill({
+      color: style.textFill
+    })
+    .radius(style.textFillRadius)
+}
+
+// 给文本设置样式
+function styleText(textNode, style) {
+  textNode
+    .fill({
+      color: style.color
+    })
+    .css({
+      'font-family': style.fontFamily,
+      'font-size': style.fontSize + 'px',
+      'font-weight': style.fontWeight,
+      'font-style': style.fontStyle
+    })
+}
+
+// 获取外框文字
+function getText(node) {
+  const data = node.getData('outerFrame')
+  return data && data.text ? data.text : ''
+}
+
+export default {
+  getText,
+  createText,
+  styleTextShape,
+  styleText,
+  onScale,
+  showEditTextBox,
+  setIsShowTextEdit,
+  removeTextEditEl,
+  hideEditTextBox,
+  updateTextEditBoxPos,
+  renderText
+}

simple-mind-map/src/plugins/outerFrame/outerFrameUtils.js

@@ -0,0 +1,122 @@
+import { getTopAncestorsFomNodeList } from '../../utils'
+
+// 解析要添加外框的节点实例列表
+export const parseAddNodeList = list => {
+  // 找出顶层节点
+  list = getTopAncestorsFomNodeList(list)
+  const cache = {}
+  const uidToParent = {}
+  // 找出列表中节点在兄弟节点中的索引，并和父节点关联起来
+  list.forEach(node => {
+    const parent = node.parent
+    if (parent) {
+      const pUid = parent.uid
+      uidToParent[pUid] = parent
+      const index = node.getIndexInBrothers()
+      const data = {
+        node,
+        index
+      }
+      if (cache[pUid]) {
+        if (
+          !cache[pUid].find(item => {
+            return item.index === data.index
+          })
+        ) {
+          cache[pUid].push(data)
+        }
+      } else {
+        cache[pUid] = [data]
+      }
+    }
+  })
+  const res = []
+  Object.keys(cache).forEach(uid => {
+    const indexList = cache[uid]
+    const parentNode = uidToParent[uid]
+    if (indexList.length > 1) {
+      // 多个节点
+      const rangeList = indexList
+        .map(item => {
+          return item.index
+        })
+        .sort((a, b) => {
+          return a - b
+        })
+      const minIndex = rangeList[0]
+      const maxIndex = rangeList[rangeList.length - 1]
+      let curStart = -1
+      let curEnd = -1
+      for (let i = minIndex; i <= maxIndex; i++) {
+        // 连续索引
+        if (rangeList.includes(i)) {
+          if (curStart === -1) {
+            curStart = i
+          }
+          curEnd = i
+        } else {
+          // 连续断开
+          if (curStart !== -1 && curEnd !== -1) {
+            res.push({
+              node: parentNode,
+              range: [curStart, curEnd]
+            })
+          }
+          curStart = -1
+          curEnd = -1
+        }
+      }
+      // 不要忘了最后一段索引
+      if (curStart !== -1 && curEnd !== -1) {
+        res.push({
+          node: parentNode,
+          range: [curStart, curEnd]
+        })
+      }
+    } else {
+      // 单个节点
+      res.push({
+        node: parentNode,
+        range: [indexList[0].index, indexList[0].index]
+      })
+    }
+  })
+  return res
+}
+
+// 解析获取节点的子节点生成的外框列表
+export const getNodeOuterFrameList = node => {
+  const children = node.children
+  if (!children || children.length <= 0) return
+  const res = []
+  const map = {}
+  children.forEach((item, index) => {
+    const outerFrameData = item.getData('outerFrame')
+    if (!outerFrameData) return
+    const groupId = outerFrameData.groupId
+    if (groupId) {
+      if (!map[groupId]) {
+        map[groupId] = []
+      }
+      map[groupId].push({
+        node: item,
+        index
+      })
+    } else {
+      res.push({
+        nodeList: [item],
+        range: [index, index]
+      })
+    }
+  })
+  Object.keys(map).forEach(id => {
+    const list = map[id]
+    res.push({
+      nodeList: list.map(item => {
+        return item.node
+      }),
+      range: [list[0].index, list[list.length - 1].index]
+    })
+  })
+  return res
+}

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

@@ -1,18 +1,22 @@
 //  展开按钮
-const open = `<svg t="1618141562310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13476" width="200" height="200"><path d="M475.136 327.168v147.968h-147.968v74.24h147.968v147.968h74.24v-147.968h147.968v-74.24h-147.968v-147.968h-74.24z m36.864-222.208c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13477"></path></svg>`
+const open = `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M475.136 327.168v147.968h-147.968v74.24h147.968v147.968h74.24v-147.968h147.968v-74.24h-147.968v-147.968h-74.24z m36.864-222.208c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z"></path></svg>`
 
 //  收缩按钮
-const close = `<svg t="1618141589243" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13611" width="200" height="200"><path d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13612"></path><path d="M252.928 474.624h518.144v74.24h-518.144z" p-id="13613"></path></svg>`
+const close = `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z"></path><path d="M252.928 474.624h518.144v74.24h-518.144z"></path></svg>`
 
 // 删除按钮
-const remove = `<svg width="14px" height="14px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13611" width="200" height="200"><path fill="#ffffff" d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13612"></path><path fill="#ffffff" d="M252.928 474.624h518.144v74.24h-518.144z" p-id="13613"></path></svg>`
+const remove = `<svg width="14px" height="14px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path fill="#ffffff" d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z"></path><path fill="#ffffff" d="M252.928 474.624h518.144v74.24h-518.144z"></path></svg>`
 
 // 图片调整按钮
 const imgAdjust = `<svg width="12px" height="12px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M1008.128 614.4a25.6 25.6 0 0 0-27.648 5.632l-142.848 142.848L259.072 186.88 401.92 43.52A25.6 25.6 0 0 0 384 0h-358.4a25.6 25.6 0 0 0-25.6 25.6v358.4a25.6 25.6 0 0 0 43.52 17.92l143.36-142.848 578.048 578.048-142.848 142.848a25.6 25.6 0 0 0 17.92 43.52h358.4a25.6 25.6 0 0 0 25.6-25.6v-358.4a25.6 25.6 0 0 0-15.872-25.088z"  /></svg>`
 
+// 快捷创建子节点按钮
+const quickCreateChild = `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M514.048 62.464q93.184 0 175.616 35.328t143.872 96.768 96.768 143.872 35.328 175.616q0 94.208-35.328 176.128t-96.768 143.36-143.872 96.768-175.616 35.328q-94.208 0-176.64-35.328t-143.872-96.768-96.768-143.36-35.328-176.128q0-93.184 35.328-175.616t96.768-143.872 143.872-96.768 176.64-35.328zM772.096 576.512q26.624 0 45.056-18.944t18.432-45.568-18.432-45.056-45.056-18.432l-192.512 0 0-192.512q0-26.624-18.944-45.568t-45.568-18.944-45.056 18.944-18.432 45.568l0 192.512-192.512 0q-26.624 0-45.056 18.432t-18.432 45.056 18.432 45.568 45.056 18.944l192.512 0 0 191.488q0 26.624 18.432 45.568t45.056 18.944 45.568-18.944 18.944-45.568l0-191.488 192.512 0z"></path></svg>`
+
 export default {
   open,
   close,
   remove,
-  imgAdjust
+  imgAdjust,
+  quickCreateChild
 }

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

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

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

@@ -48,7 +48,7 @@ export default {
   // 关联线激活状态的颜色
   associativeLineActiveColor: 'rgba(2, 167, 240, 1)',
   // 关联线样式
-  associativeLineDasharray: [6, 4],
+  associativeLineDasharray: '6,4',
   // 关联线文字颜色
   associativeLineTextColor: 'rgb(51, 51, 51)',
   // 关联线文字大小
@@ -93,7 +93,13 @@ export default {
     // 节点鼠标hover和激活时显示的矩形边框的颜色，主题里不设置，默认会取hoverRectColor实例化选项的值
     hoverRectColor: '',
     // 点鼠标hover和激活时显示的矩形边框的圆角大小
-    hoverRectRadius: 5
+    hoverRectRadius: 5,
+    // 文本对齐
+    textAlign: 'left',// right、center、justify、left
+    // 图片放置位置，相对于整个文本内容
+    imgPlacement: 'top', // left、right、bottom、top
+    // 标签放置位置
+    tagPlacement: 'right' // right（文字右侧）、bottom（文本内容下方）
     // 下列样式也支持给节点设置，用于覆盖最外层的设置
     // paddingX,
     // paddingY,
@@ -128,7 +134,10 @@ export default {
     endDir: [1, 0],
     lineMarkerDir: 'end',
     hoverRectColor: '',
-    hoverRectRadius: 5
+    hoverRectRadius: 5,
+    textAlign: 'left',
+    imgPlacement: 'top',
+    tagPlacement: 'right'
   },
   // 三级及以下节点样式
   node: {
@@ -153,7 +162,10 @@ export default {
     endDir: [1, 0],
     lineMarkerDir: 'end',
     hoverRectColor: '',
-    hoverRectRadius: 5
+    hoverRectRadius: 5,
+    textAlign: 'left',
+    imgPlacement: 'top',
+    tagPlacement: 'right'
   },
   // 概要节点样式
   generalization: {
@@ -177,7 +189,10 @@ export default {
     startDir: [0, 0],
     endDir: [1, 0],
     hoverRectColor: '',
-    hoverRectRadius: 5
+    hoverRectRadius: 5,
+    textAlign: 'left',
+    imgPlacement: 'top',
+    tagPlacement: 'right'
   }
 }
 
@@ -210,7 +225,8 @@ const nodeSizeIndependenceList = [
   'hoverRectRadius',
   'lineFlow',
   'lineFlowDuration',
-  'lineFlowForward'
+  'lineFlowForward',
+  'textAlign'
 ]
 export const checkIsNodeSizeIndependenceConfig = config => {
   let keys = Object.keys(config)

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

@@ -1,7 +1,8 @@
 import { v4 as uuidv4 } from 'uuid'
 import {
   nodeDataNoStylePropList,
-  selfCloseTagList
+  selfCloseTagList,
+  richTextSupportStyleList
 } from '../constants/constant'
 import MersenneTwister from './mersenneTwister'
 import { ForeignObject } from '@svgdotjs/svg.js'
@@ -173,6 +174,12 @@ export const copyRenderTree = (tree, root, removeActiveState = false) => {
       tree.children[index] = copyRenderTree({}, item, removeActiveState)
     })
   }
+  // data、children外的其他字段
+  Object.keys(root).forEach(key => {
+    if (!['data', 'children'].includes(key) && !/^_/.test(key)) {
+      tree[key] = root[key]
+    }
+  })
   return tree
 }
 
@@ -183,7 +190,8 @@ export const copyNodeTree = (
   removeActiveState = false,
   removeId = true
 ) => {
-  tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data)
+  const rootData = root.nodeData ? root.nodeData : root
+  tree.data = simpleDeepClone(rootData.data)
   // 移除节点uid
   if (removeId) {
     delete tree.data.uid
@@ -208,6 +216,12 @@ export const copyNodeTree = (
       tree.children[index] = copyNodeTree({}, item, removeActiveState, removeId)
     })
   }
+  // data、children外的其他字段
+  Object.keys(rootData).forEach(key => {
+    if (!['data', 'children'].includes(key) && !/^_/.test(key)) {
+      tree[key] = rootData[key]
+    }
+  })
   return tree
 }
 
@@ -277,6 +291,19 @@ export const throttle = (fn, time = 300, ctx) => {
   }
 }
 
+// 防抖函数
+export const debounce = (fn, wait = 300, ctx) => {
+  let timeout = null
+
+  return (...args) => {
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      timeout = null
+      fn.apply(ctx, args)
+    }, wait)
+  }
+}
+
 //  异步执行任务队列
 export const asyncRun = (taskList, callback = () => {}) => {
   let index = 0
@@ -371,7 +398,7 @@ export const nextTick = function (fn, ctx) {
 }
 
 // 检查节点是否超出画布
-export const checkNodeOuter = (mindMap, node) => {
+export const checkNodeOuter = (mindMap, node, offsetX = 0, offsetY = 0) => {
   let elRect = mindMap.elRect
   let { scaleX, scaleY, translateX, translateY } = mindMap.draw.transform()
   let { left, top, width, height } = node
@@ -381,17 +408,17 @@ export const checkNodeOuter = (mindMap, node) => {
   top = top * scaleY + translateY
   let offsetLeft = 0
   let offsetTop = 0
-  if (left < 0) {
-    offsetLeft = -left
+  if (left < 0 + offsetX) {
+    offsetLeft = -left + offsetX
   }
-  if (right > elRect.width) {
-    offsetLeft = -(right - elRect.width)
+  if (right > elRect.width - offsetX) {
+    offsetLeft = -(right - elRect.width) - offsetX
   }
-  if (top < 0) {
-    offsetTop = -top
+  if (top < 0 + offsetY) {
+    offsetTop = -top + offsetY
   }
-  if (bottom > elRect.height) {
-    offsetTop = -(bottom - elRect.height)
+  if (bottom > elRect.height - offsetY) {
+    offsetTop = -(bottom - elRect.height) - offsetY
   }
   return {
     isOuter: offsetLeft !== 0 || offsetTop !== 0,
@@ -481,8 +508,8 @@ export const loadImage = imgFile => {
 
 // 移除字符串中的html实体
 export const removeHTMLEntities = str => {
-  ;[['&nbsp;', '&#160;']].forEach(item => {
-    str = str.replaceAll(item[0], item[1])
+  [['&nbsp;', '&#160;']].forEach(item => {
+    str = str.replace(new RegExp(item[0], 'g'), item[1])
   })
   return str
 }
@@ -499,7 +526,7 @@ export const isUndef = data => {
 
 // 移除html字符串中节点的内联样式
 export const removeHtmlStyle = html => {
-  return html.replaceAll(/(<[^\s]+)\s+style=["'][^'"]+["']\s*(>)/g, '$1$2')
+  return html.replace(/(<[^\s]+)\s+style=["'][^'"]+["']\s*(>)/g, '$1$2')
 }
 
 // 给html标签中指定的标签添加内联样式
@@ -557,7 +584,7 @@ export const replaceHtmlText = (html, searchText, replaceText) => {
         // 文本节点
         root.replaceChild(
           document.createTextNode(
-            node.nodeValue.replaceAll(searchText, replaceText)
+            node.nodeValue.replace(new RegExp(searchText, 'g'), replaceText)
           ),
           node
         )
@@ -584,7 +611,7 @@ export const removeHtmlNodeByClass = (html, selector) => {
 
 // 判断一个颜色是否是白色
 export const isWhite = color => {
-  color = String(color).replaceAll(/\s+/g, '')
+  color = String(color).replace(/\s+/g, '')
   return (
     ['#fff', '#ffffff', '#FFF', '#FFFFFF', 'rgb(255,255,255)'].includes(
       color
@@ -594,7 +621,7 @@ export const isWhite = color => {
 
 // 判断一个颜色是否是透明
 export const isTransparent = color => {
-  color = String(color).replaceAll(/\s+/g, '')
+  color = String(color).replace(/\s+/g, '')
   return (
     ['', 'transparent'].includes(color) || /rgba\(\d+,\d+,\d+,0\)/.test(color)
   )
@@ -949,6 +976,12 @@ export const selectAllInput = el => {
 
 // 给指定的节点列表树数据添加附加数据，会修改原数据
 export const addDataToAppointNodes = (appointNodes, data = {}) => {
+  data = { ...data }
+  const alreadyIsRichText = data && data.richText
+  // 如果指定的数据就是富文本格式，那么不需要重新创建
+  if (alreadyIsRichText && data.resetRichText) {
+    delete data.resetRichText
+  }
   const walk = list => {
     list.forEach(node => {
       node.data = {
@@ -969,7 +1002,8 @@ export const addDataToAppointNodes = (appointNodes, data = {}) => {
 export const createUidForAppointNodes = (
   appointNodes,
   createNewId = false,
-  handle = null
+  handle = null,
+  handleGeneralization = false
 ) => {
   const walk = list => {
     list.forEach(node => {
@@ -979,6 +1013,14 @@ export const createUidForAppointNodes = (
       if (createNewId || isUndef(node.data.uid)) {
         node.data.uid = createUid()
       }
+      if (handleGeneralization) {
+        const generalizationList = formatGetNodeGeneralization(node.data)
+        generalizationList.forEach(gNode => {
+          if (createNewId || isUndef(gNode.uid)) {
+            gNode.uid = createUid()
+          }
+        })
+      }
       handle && handle(node)
       if (node.children && node.children.length > 0) {
         walk(node.children)
@@ -1027,7 +1069,7 @@ export const generateColorByContent = str => {
 
 //  html转义
 export const htmlEscape = str => {
-  ;[
+  [
     ['&', '&amp;'],
     ['<', '&lt;'],
     ['>', '&gt;']
@@ -1131,7 +1173,7 @@ export const removeFromParentNodeData = node => {
 // 给html自闭合标签添加闭合状态
 export const handleSelfCloseTags = str => {
   selfCloseTagList.forEach(tagName => {
-    str = str.replaceAll(
+    str = str.replace(
       new RegExp(`<${tagName}([^>]*)>`, 'g'),
       `<${tagName} $1 />`
     )
@@ -1201,10 +1243,12 @@ export const handleInputPasteText = (e, text) => {
   if (!selection.rangeCount) return
   selection.deleteFromDocument()
   text = text || e.clipboardData.getData('text')
+  // 转义特殊字符
+  text = htmlEscape(text)
   // 去除格式
   text = getTextFromHtml(text)
   // 去除换行
-  // text = text.replaceAll(/\n/g, '')
+  // text = text.replace(/\n/g, '')
   const textArr = text.split(/\n/g)
   const fragment = document.createDocumentFragment()
   textArr.forEach((item, index) => {
@@ -1639,3 +1683,38 @@ export const mergeTheme = (dest, source) => {
     }
   })
 }
+
+// 获取节点实例的文本样式数据
+export const getNodeRichTextStyles = node => {
+  const res = {}
+  richTextSupportStyleList.forEach(prop => {
+    let value = node.style.merge(prop)
+    if (prop === 'fontSize') {
+      value = value + 'px'
+    }
+    res[prop] = value
+  })
+  return res
+}
+
+// 判断两个版本号的关系
+/*
+a > b 返回 >
+a < b 返回 <
+a = b 返回 =
+*/
+export const compareVersion = (a, b) => {
+  const aArr = String(a).split('.')
+  const bArr = String(b).split('.')
+  const max = Math.max(aArr.length, bArr.length)
+  for (let i = 0; i < max; i++) {
+    const ai = aArr[i] || 0
+    const bi = bArr[i] || 0
+    if (ai > bi) {
+      return '>'
+    } else if (ai < bi) {
+      return '<'
+    }
+  }
+  return '='
+}

web/package.json

@@ -8,10 +8,12 @@
     "lint": "vue-cli-service lint",
     "buildLibrary": "node ./scripts/updateVersion.js && vue-cli-service build --mode library --target lib --name simpleMindMap ../simple-mind-map/full.js --dest ../simple-mind-map/dist && esbuild ../simple-mind-map/full.js --bundle --external:buffer --format=esm --outfile=../simple-mind-map/dist/simpleMindMap.esm.js && esbuild ../simple-mind-map/full.js --bundle --minify --external:buffer --format=esm --outfile=../simple-mind-map/dist/simpleMindMap.esm.min.js",
     "format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*",
-    "createNodeImageList": "node ./scripts/createNodeImageList.js"
+    "createNodeImageList": "node ./scripts/createNodeImageList.js",
+    "ai:serve": "node ./scripts/ai.js"
   },
   "dependencies": {
     "@toast-ui/editor": "^3.1.5",
+    "axios": "^1.7.9",
     "codemirror": "^5.65.16",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.1",
@@ -34,6 +36,7 @@
     "esbuild": "^0.17.15",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "express": "^4.21.2",
     "less": "^3.12.2",
     "less-loader": "^7.1.0",
     "markdown-it": "^13.0.1",

web/public/index.html

@@ -62,6 +62,7 @@
                 config: {},
                 view: null
               },
+              mindMapConfig: {},
               lang: 'zh',
               localConfig: null
             })
@@ -78,6 +79,14 @@
         window.takeOverAppMethods.saveMindMapData = data => {
           console.log(data)
         }
+        // 获取思维导图配置，也就是实例化时会传入的选项
+        window.takeOverAppMethods.getMindMapConfig = () => {
+          return data.mindMapConfig
+        }
+        // 保存思维导图配置
+        window.takeOverAppMethods.saveMindMapConfig = config => {
+          console.log(config)
+        }
         // 获取语言的函数
         window.takeOverAppMethods.getLanguage = () => {
           return data.lang

web/scripts/ai.js

@@ -0,0 +1,81 @@
+const express = require('express')
+const axios = require('axios')
+const net = require('net')
+
+const port = 3456
+
+const isPortUsed = port => {
+  return new Promise(resolve => {
+    const server = net.createServer()
+    server.once('error', err => {
+      if (err.code === 'EADDRINUSE') {
+        resolve(true) // 端口被占用
+      } else {
+        resolve(false) // 其他错误
+      }
+    })
+    server.once('listening', () => {
+      server.close(() => resolve(false)) // 端口可用
+    })
+    server.listen(port) // 尝试监听端口
+  })
+}
+
+const createServe = () => {
+  // 起个服务
+  const app = express()
+  app.use(express.json())
+  app.use(express.urlencoded({ extended: true }))
+
+  // 允许跨域
+  app.use((req, res, next) => {
+    res.header('Access-Control-Allow-Origin', '*') // 允许所有来源的跨域请求，或者指定一个域名
+    res.header('Access-Control-Allow-Methods', '*') // 允许的方法
+    res.header('Access-Control-Allow-Headers', '*') // 允许的头部信息
+    next()
+  })
+
+  // 监听对话请求
+  app.get('/ai/test', (req, res) => {
+    res
+      .json({
+        code: 0,
+        data: null,
+        msg: '连接成功'
+      })
+      .end()
+  })
+  app.post('/ai/chat', async (req, res, next) => {
+    // 设置SSE响应头
+    res.setHeader('Content-Type', 'text/event-stream')
+    res.setHeader('Cache-Control', 'no-cache')
+    res.setHeader('Connection', 'keep-alive')
+
+    const { api, method = 'POST', headers = {}, data } = req.body
+
+    try {
+      const response = await axios({
+        url: api,
+        method,
+        headers,
+        data,
+        responseType: 'stream'
+      })
+      response.data.pipe(res)
+    } catch (error) {
+      next(error)
+    }
+  })
+
+  app.listen(port, () => {
+    console.log(`app listening on port ${port}`)
+  })
+}
+
+isPortUsed(port).then(isUsed => {
+  if (isUsed) {
+    console.error('端口被占用')
+  } else {
+    createServe()
+  }
+})

web/scripts/createNodeImageList.js

@@ -4,46 +4,50 @@ const fs = require('fs')
 const fileDest = path.join(__dirname, '../src/assets/svg')
 const targetDest = path.join(__dirname, '../src/config/image.js')
 
-const run = (dir) => {
-    let dirs = fs.readdirSync(dir)
-    dirs.forEach(item => {
-        let cur = path.join(dir, item)
-        if (fs.statSync(cur).isDirectory()) {
-            walkDir(cur, item)
-        }
-    })
+const run = dir => {
+  let dirs = fs.readdirSync(dir)
+  dirs.forEach(item => {
+    let cur = path.join(dir, item)
+    if (fs.statSync(cur).isDirectory()) {
+      walkDir(cur, item)
+    }
+  })
 }
 
 const list = []
 const importList = []
 const walkDir = (dir, item) => {
-    let files = fs.readdirSync(dir)
-    let name = files.find((file) => {
-        return !/\./.test(file)
+  let files = fs.readdirSync(dir)
+  let name = files.find(file => {
+    return !/\./.test(file)
+  })
+  let fileList = files.filter(file => {
+    return /\.svg$/.test(file)
+  })
+  let itemList = []
+  fileList.forEach(file => {
+    let fileName =
+      item + '_' + file.replace(/\.svg$/, '').replace(new RegExp('-', 'g'), '')
+    importList.push(`import ${fileName} from '../assets/svg/${item}/${file}'`)
+    itemList.push({
+      url: fileName,
+      width: 100,
+      height: 100
     })
-    let fileList = files.filter((file) => {
-        return /\.svg$/.test(file)
-    })
-    let itemList = []
-    fileList.forEach((file) => {
-        let fileName = item + '_' + file.replace(/\.svg$/, '').replaceAll('-', '')
-        importList.push(`import ${fileName} from '../assets/svg/${item}/${file}'`)
-        itemList.push({
-            url: fileName,
-            width: 100,
-            height: 100
-        })
-    })
-    list.push({
-        name,
-        list: itemList
-    })
-    const content = `
+  })
+  list.push({
+    name,
+    list: itemList
+  })
+  const content = `
 // 该文件请运行npm run createNodeImageList命令自动生成
 ${importList.join('\n')}
-export default ${JSON.stringify(list, null, 2).replace(/(url":\s*)"([^"]+)"(,)/g, '$1$2$3')}
+export default ${JSON.stringify(list, null, 2).replace(
+    /(url":\s*)"([^"]+)"(,)/g,
+    '$1$2$3'
+  )}
 `
-    fs.writeFileSync(targetDest, content)
+  fs.writeFileSync(targetDest, content)
 }
 
 run(fileDest)

web/src/App.vue

@@ -6,12 +6,11 @@
 
 <script>
 export default {
-  name: 'App',
-  components: {}
+  name: 'App'
 }
 </script>
 
-<style>
+<style lang="less">
 * {
   margin: 0;
   padding: 0;
@@ -19,8 +18,29 @@ export default {
 }
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
 }
+
+.customScrollbar {
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 7px;
+    background-color: rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: none;
+    background: transparent;
+    display: none;
+  }
+}
+
+.el-dialog{
+  border-radius: 10px;
+}
 </style>

web/src/api/index.js

@@ -4,39 +4,20 @@ import Vue from 'vue'
 import vuexStore from '@/store'
 
 const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'
+const SIMPLE_MIND_MAP_CONFIG = 'SIMPLE_MIND_MAP_CONFIG'
 const SIMPLE_MIND_MAP_LANG = 'SIMPLE_MIND_MAP_LANG'
 const SIMPLE_MIND_MAP_LOCAL_CONFIG = 'SIMPLE_MIND_MAP_LOCAL_CONFIG'
 
 let mindMapData = null
 
-/**
- * @Author: 王林
- * @Date: 2021-08-02 22:36:48
- * @Desc: 克隆思维导图数据，去除激活状态
- */
-const copyMindMapTreeData = (tree, root) => {
-  if (!root) return null
-  tree.data = simpleDeepClone(root.data)
-  // tree.data.isActive = false
-  tree.children = []
-  if (root.children && root.children.length > 0) {
-    root.children.forEach((item, index) => {
-      tree.children[index] = copyMindMapTreeData({}, item)
-    })
-  }
-  return tree
-}
-
-/**
- * @Author: 王林
- * @Date: 2021-08-01 10:10:49
- * @Desc: 获取缓存的思维导图数据
- */
+// 获取缓存的思维导图数据
 export const getData = () => {
+  // 接管模式
   if (window.takeOverApp) {
     mindMapData = window.takeOverAppMethods.getMindMapData()
     return mindMapData
   }
+  // 操作本地文件模式
   if (vuexStore.state.isHandleLocalFile) {
     return Vue.prototype.getCurrentData()
   }
@@ -52,11 +33,7 @@ export const getData = () => {
   }
 }
 
-/**
- * @Author: 王林
- * @Date: 2021-08-01 10:14:28
- * @Desc: 存储思维导图数据
- */
+// 存储思维导图数据
 export const storeData = data => {
   try {
     let originData = null
@@ -65,39 +42,12 @@ export const storeData = data => {
     } else {
       originData = getData()
     }
-    originData.root = copyMindMapTreeData({}, data)
-    if (window.takeOverApp) {
-      mindMapData = originData
-      window.takeOverAppMethods.saveMindMapData(originData)
-      return
-    }
-    Vue.prototype.$bus.$emit('write_local_file', originData)
-    if (vuexStore.state.isHandleLocalFile) {
-      return
-    }
-    let dataStr = JSON.stringify(originData)
-    localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-/**
- * @Author: 王林
- * @Date: 2021-08-01 10:24:56
- * @Desc: 存储思维导图配置数据
- */
-export const storeConfig = config => {
-  try {
-    let originData = null
-    if (window.takeOverApp) {
-      originData = mindMapData
-    } else {
-      originData = getData()
+    if (!originData) {
+      originData = {}
     }
     originData = {
       ...originData,
-      ...config
+      ...data
     }
     if (window.takeOverApp) {
       mindMapData = originData
@@ -108,19 +58,42 @@ export const storeConfig = config => {
     if (vuexStore.state.isHandleLocalFile) {
       return
     }
-    let dataStr = JSON.stringify(originData)
-    localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr)
+    localStorage.setItem(SIMPLE_MIND_MAP_DATA, JSON.stringify(originData))
+  } catch (error) {
+    console.log(error)
+    if ('exceeded') {
+      Vue.prototype.$bus.$emit('localStorageExceeded')
+    }
+  }
+}
+
+// 获取思维导图配置数据
+export const getConfig = () => {
+  if (window.takeOverApp) {
+    window.takeOverAppMethods.getMindMapConfig()
+    return
+  }
+  let config = localStorage.getItem(SIMPLE_MIND_MAP_CONFIG)
+  if (config) {
+    return JSON.parse(config)
+  }
+  return null
+}
+
+// 存储思维导图配置数据
+export const storeConfig = config => {
+  try {
+    if (window.takeOverApp) {
+      window.takeOverAppMethods.saveMindMapConfig(config)
+      return
+    }
+    localStorage.setItem(SIMPLE_MIND_MAP_CONFIG, JSON.stringify(config))
   } catch (error) {
     console.log(error)
   }
 }
 
-/**
- * javascript comment
- * @Author: 王林
- * @Date: 2022-11-05 14:36:50
- * @Desc: 存储语言
- */
+// 存储语言
 export const storeLang = lang => {
   if (window.takeOverApp) {
     window.takeOverAppMethods.saveLanguage(lang)
@@ -129,12 +102,7 @@ export const storeLang = lang => {
   localStorage.setItem(SIMPLE_MIND_MAP_LANG, lang)
 }
 
-/**
- * javascript comment
- * @Author: 王林
- * @Date: 2022-11-05 14:37:36
- * @Desc: 获取存储的语言
- */
+// 获取存储的语言
 export const getLang = () => {
   if (window.takeOverApp) {
     return window.takeOverAppMethods.getLanguage() || 'zh'
@@ -147,12 +115,7 @@ export const getLang = () => {
   return 'zh'
 }
 
-/**
- * javascript comment
- * @Author: 王林25
- * @Date: 2022-11-14 18:57:31
- * @Desc: 存储本地配置
- */
+// 存储本地配置
 export const storeLocalConfig = config => {
   if (window.takeOverApp) {
     return window.takeOverAppMethods.saveLocalConfig(config)
@@ -160,12 +123,7 @@ export const storeLocalConfig = config => {
   localStorage.setItem(SIMPLE_MIND_MAP_LOCAL_CONFIG, JSON.stringify(config))
 }
 
-/**
- * javascript comment
- * @Author: 王林25
- * @Date: 2022-11-14 18:57:37
- * @Desc: 获取本地配置
- */
+// 获取本地配置
 export const getLocalConfig = () => {
   if (window.takeOverApp) {
     return window.takeOverAppMethods.getLocalConfig()