打包0.13.1

fix: en_ui 文案错误

.gitignore

@@ -2,4 +2,5 @@ node_modules
 .DS_Store
 dist_electron
 simple-mind-map/dist
-simple-mind-map/types
+simple-mind-map/types
+utools/dist

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;-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,.3);cursor:pointer}&::-webkit-scrollbar-track{box-shadow:none;background:transparent;display:none}}@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}.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?81d94c3507392bec62bc" rel="stylesheet"><link href="dist/css/app.css?81d94c3507392bec62bc" 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({
@@ -74,4 +74,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?81d94c3507392bec62bc"></script><script src="dist/js/app.js?81d94c3507392bec62bc"></script></body></html>

simple-mind-map/full.js

@@ -30,7 +30,7 @@ MindMap.markdown = markdown
 MindMap.iconList = icons.nodeIconList
 MindMap.constants = constants
 MindMap.defaultTheme = defaultTheme
-MindMap.version = '0.12.2'
+MindMap.version = '0.13.1'
 
 MindMap.usePlugin(MiniMap)
   .usePlugin(Watermark)

simple-mind-map/index.js

@@ -20,7 +20,8 @@ import {
   isUndef,
   handleGetSvgDataExtraContent,
   getNodeTreeBoundingRect,
-  mergeTheme
+  mergeTheme,
+  createUidForAppointNodes
 } from './src/utils'
 import defaultTheme, {
   checkIsNodeSizeIndependenceConfig
@@ -149,6 +150,8 @@ class MindMap {
     if (data.data && !data.data.expand) {
       data.data.expand = true
     }
+    // 给没有uid的节点添加uid
+    createUidForAppointNodes([data], false, null, true)
     return data
   }
 
@@ -395,6 +398,7 @@ class MindMap {
 
   // 更新画布数据，如果新的数据是在当前画布节点数据基础上增删改查后形成的，那么可以使用该方法来更新画布数据
   updateData(data) {
+    data = this.handleData(data)
     this.emit('before_update_data', data)
     this.renderer.setData(data)
     this.render()
@@ -583,7 +587,7 @@ class MindMap {
       this.watermark.isInExport = false
     }
     // 添加必要的样式
-    [this.joinCss(), ...cssTextList].forEach(s => {
+    ;[this.joinCss(), ...cssTextList].forEach(s => {
       clone.add(SVG(`<style>${s}</style>`))
     })
     // 附加内容

simple-mind-map/package.json

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

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

@@ -3,7 +3,6 @@ export const CONSTANTS = {
   CHANGE_THEME: 'changeTheme',
   CHANGE_LAYOUT: 'changeLayout',
   SET_DATA: 'setData',
-  TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode',
   MODE: {
     READONLY: 'readonly',
     EDIT: 'edit'
@@ -72,7 +71,13 @@ export const CONSTANTS = {
     NOT_ACTIVE: 'notActive',
     ACTIVE_ONLY: 'activeOnly'
   },
-  TAG_POSITION: {
+  TAG_PLACEMENT: {
+    RIGHT: 'right',
+    BOTTOM: 'bottom'
+  },
+  IMG_PLACEMENT: {
+    LEFT: 'left',
+    TOP: 'top',
     RIGHT: 'right',
     BOTTOM: 'bottom'
   },
@@ -157,7 +162,7 @@ export const nodeDataNoStylePropList = [
   'isActive',
   'generalization',
   'richText',
-  'resetRichText',
+  'resetRichText',// 重新创建富文本内容，去掉原有样式
   'uid',
   'activeStyle',
   'associativeLineTargets',
@@ -174,7 +179,8 @@ export const nodeDataNoStylePropList = [
   'customTop',
   'customTextWidth',
   'checkbox',
-  'dir'
+  'dir',
+  'needUpdate'// 重新创建节点内容
 ]
 
 // 错误类型
@@ -208,7 +214,7 @@ export const cssContent = `
     stroke-width: 2;
   }
 
-  .smm-text-node-wrap {
+  .smm-text-node-wrap, .smm-expand-btn-text {
     user-select: none;
   }
 `
@@ -226,3 +232,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,
   // 节点里图片和文字的间距
@@ -134,7 +132,7 @@ export const defaultOpt = {
   // 开启该特性后，需要给你的输入框绑定keydown事件，并禁止冒泡
   enableAutoEnterTextEditWhenKeydown: false,
   // 当enableAutoEnterTextEditWhenKeydown选项开启时生效，当通过按键进入文本编辑时是否自动清空原有文本
-  autoEmptyTextWhenKeydownEnterEdit: false, 
+  autoEmptyTextWhenKeydownEnterEdit: false,
   // 自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片，默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据，如果你想处理其他思维导图的数据，比如processon、zhixi等，那么可以传递一个函数，接受当前剪贴板中的文本为参数，返回处理后的数据，可以返回两种类型：
   /*
     1.返回一个纯文本，那么会直接以该文本创建一个子节点
@@ -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插件】
   // 多选节点时鼠标移动到边缘时的画布移动偏移量
@@ -458,5 +513,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 {
@@ -172,7 +173,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

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'
@@ -162,7 +162,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)
     }
@@ -547,13 +547,6 @@ class Render {
           if (this.reRender) {
             this.reRender = false
           }
-          // 触发一次保存，因为修改了渲染树的数据
-          if (
-            this.hasRichTextPlugin() &&
-            [CONSTANTS.CHANGE_THEME, CONSTANTS.SET_DATA].includes(source)
-          ) {
-            this.mindMap.command.addHistory()
-          }
         }
         this.mindMap.emit('node_tree_render_end')
       })
@@ -561,13 +554,14 @@ class Render {
     this.emitNodeActiveEvent()
   }
 
-  // 给当前被收起来的节点数据添加文本复位标志
+  // 给当前被收起来的节点数据添加更新标志
   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 +744,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 +762,10 @@ class Render {
         : defaultInsertBelowSecondLevelNodeText
       // 计算插入位置
       const index = getNodeDataIndex(node)
+      // 如果指定的数据就是富文本格式，那么不需要重新创建
+      if (alreadyIsRichText && params.resetRichText) {
+        delete params.resetRichText
+      }
       const newNodeData = {
         inserting,
         data: {
@@ -775,8 +774,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 +802,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 +851,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 +879,9 @@ class Render {
           ...params,
           ...(appointData || {})
         },
-        children: [...createUidForAppointNodes(appointChildren)]
+        children: [...createUidForAppointNodes(appointChildren, createNewId)]
       }
+      createNewId = true
       node.nodeData.children.push(newNode)
       // 插入子节点时自动展开子节点
       node.setData({
@@ -902,16 +911,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 +960,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 +970,10 @@ class Render {
         node.layerIndex === 1
           ? defaultInsertSecondLevelNodeText
           : defaultInsertBelowSecondLevelNodeText
+      // 如果指定的数据就是富文本格式，那么不需要重新创建
+      if (alreadyIsRichText && params.resetRichText) {
+        delete params.resetRichText
+      }
       const newNode = {
         inserting,
         data: {
@@ -966,11 +984,6 @@ class Render {
         },
         children: [node.nodeData]
       }
-      if (isRichText) {
-        node.setData({
-          resetRichText: true
-        })
-      }
       const parent = node.parent
       // 获取当前节点所在位置
       const index = getNodeDataIndex(node)
@@ -1046,7 +1059,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 +1073,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 +1220,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 +1317,6 @@ class Render {
       nodeList.reverse()
     }
     nodeList.forEach(item => {
-      this.checkNodeLayerChange(item, exist)
       // 移动节点
       let nodeParent = item.parent
       let nodeBorthers = nodeParent.children
@@ -1329,25 +1343,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 +1526,6 @@ class Render {
       return !item.isRoot
     })
     nodeList.forEach(item => {
-      this.checkNodeLayerChange(item, toNode, true)
       this.removeNodeFromActiveList(item)
       removeFromParentNodeData(item)
       toNode.setData({
@@ -1546,35 +1540,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 +1548,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 +1558,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 +1778,7 @@ class Render {
       list.length > 1
     )
     let needRender = false
+    const alreadyIsRichText = data && data.richText
     list.forEach(item => {
       const newData = {
         inserting,
@@ -1837,7 +1790,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

@@ -33,6 +33,7 @@ export default class TextEdit {
     this.hasBodyMousedown = false
     this.textNodePaddingX = 5
     this.textNodePaddingY = 3
+    this.isNeedUpdateTextEditNode = false
     this.bindEvent()
   }
 
@@ -91,7 +92,7 @@ export default class TextEdit {
       })
     })
     this.mindMap.on('scale', this.onScale)
-    // // 监听按键事件，判断是否自动进入文本编辑模式
+    // 监听按键事件，判断是否自动进入文本编辑模式
     if (this.mindMap.opt.enableAutoEnterTextEditWhenKeydown) {
       window.addEventListener('keydown', this.onKeydown)
     }
@@ -124,6 +125,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 +152,9 @@ export default class TextEdit {
     const node = activeNodeList[0]
     // 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式
     if (node && this.checkIsAutoEnterTextEditKey(e)) {
+      // 忽略第一个键值，避免中文输入法时进入编辑会导致第一个键值变成字母的问题
+      // 带来的问题是按的第一下纯粹是进入文本编辑，但没有变成输入
+      e.preventDefault()
       this.show({
         node,
         e,
@@ -161,7 +177,6 @@ export default class TextEdit {
 
   //  注册临时快捷键
   registerTmpShortcut() {
-    // 注册回车快捷键
     this.mindMap.keyCommand.addShortcut('Enter', () => {
       this.hideEditTextBox()
     })
@@ -178,7 +193,7 @@ export default class TextEdit {
     return this.showTextEdit
   }
 
-  //  显示文本编辑框
+  // 显示文本编辑框
   // isInserting：是否是刚创建的节点
   // isFromKeyDown：是否是在按键事件进入的编辑
   async show({
@@ -191,6 +206,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 +223,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 +246,7 @@ export default class TextEdit {
       this.mindMap.richText.showEditText(params)
       return
     }
+    this.currentNode = node
     this.showEditTextBox(params)
   }
 
@@ -317,13 +341,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 +371,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) {
@@ -375,6 +396,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 +419,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'
   }
 
   // 获取编辑区域的背景填充

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 = [
@@ -284,6 +291,18 @@ class MindMapNode {
         addXmlns(this._postfixData.el)
       }
     }
+    if (
+      addCustomContentToNode &&
+      typeof addCustomContentToNode.create === 'function'
+    ) {
+      this._customContentAddToNodeAdd = addCustomContentToNode.create(this)
+      if (
+        this._customContentAddToNodeAdd &&
+        this._customContentAddToNodeAdd.el
+      ) {
+        addXmlns(this._customContentAddToNodeAdd.el)
+      }
+    }
   }
 
   //  计算节点的宽高
@@ -305,330 +324,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 +475,11 @@ class MindMapNode {
       return
     }
     this.updateNodeActiveClass()
-    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    const { alwaysShowExpandBtn, notShowExpandBtn, isShowCreateChildBtnIcon } =
+      this.mindMap.opt
+    const childrenLength = this.getChildrenLength()
     // 不显示展开收起按钮则不需要处理
     if (!notShowExpandBtn) {
-      const childrenLength = this.nodeData.children.length
       if (alwaysShowExpandBtn) {
         // 需要移除展开收缩按钮
         if (this._expandBtn && childrenLength <= 0) {
@@ -804,6 +500,19 @@ class MindMapNode {
         }
       }
     }
+    // 更新快速创建子节点按钮
+    if (isShowCreateChildBtnIcon) {
+      if (childrenLength > 0) {
+        this.removeQuickCreateChildBtn()
+      } else {
+        const { isActive } = this.getData()
+        if (isActive) {
+          this.showQuickCreateChildBtn()
+        } else {
+          this.hideQuickCreateChildBtn()
+        }
+      }
+    }
     // 更新拖拽手柄的显示与否
     this.updateDragHandle()
     // 更新概要
@@ -861,11 +570,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,7 +804,7 @@ 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 &&
@@ -1170,15 +886,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 +1124,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/Style.js

@@ -191,45 +191,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 +199,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 +208,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 +233,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) => {
@@ -54,8 +52,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 +125,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 +132,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 +169,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 +204,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 +224,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 +236,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 +278,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 +315,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 +337,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 +423,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 +495,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 +504,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 +520,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()
@@ -556,7 +572,6 @@ export default {
   createImgNode,
   getImgShowSize,
   createIconNode,
-  tryAddHtmlStyle,
   createRichTextNode,
   createTextNode,
   createHyperlinkNode,
@@ -564,6 +579,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,456 @@
+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)
+    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++
+  }
+  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
+  }
+}
+
+//  定位节点内容
+function layout() {
+  if (!this.group) return
+  // 清除之前的内容
+  this.group.clear()
+  const {
+    hoverRectPadding,
+    openRealtimeRenderOnNodeTextEdit,
+    textContentMargin,
+    addCustomContentToNode
+  } = this.mindMap.opt
+  // 避免编辑过程中展开收起按钮闪烁的问题
+  if (openRealtimeRenderOnNodeTextEdit && this._expandBtn) {
+    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)
+  }
+  // 激活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 { 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
+  }
+  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)
+  addHoverNode()
+  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,
+  layout
+}

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 [CONSTANTS.CHANGE_THEME].includes(this.renderer.renderSource)
   }
 
   // 层级类型改变
@@ -140,6 +137,7 @@ class Base {
         isNodeDataChange ||
         isLayerTypeChange ||
         newNode.getData('resetRichText') ||
+        newNode.getData('needUpdate') ||
         isNodeInnerPrefixChange
       ) {
         newNode.getSize()
@@ -193,6 +191,7 @@ class Base {
         isNodeDataChange ||
         isLayerTypeChange ||
         newNode.getData('resetRichText') ||
+        newNode.getData('needUpdate') ||
         isNodeInnerPrefixChange
       ) {
         newNode.getSize()

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/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/NodeImgAdjust.js

@@ -122,7 +122,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 +138,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 +183,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;

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 { CONSTANTS, richTextSupportStyleList } from '../constants/constant'
 import MindMapNode from '../core/render/node/MindMapNode'
 import { Scope } from 'parchment'
 
@@ -53,27 +55,15 @@ 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.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,8 +98,17 @@ 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;
       }
       `
     )
@@ -118,8 +117,9 @@ class RichText {
         overflow: hidden;
         padding: 0;
         height: auto;
-        line-height: normal;
+        line-height: 1.2;
         -webkit-user-select: text;
+        text-align: inherit;
       }
       
       .ql-container {
@@ -130,10 +130,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 +162,8 @@ class RichText {
 
     this.extendFont([])
 
+    this.extendAlign()
+
     // 扩展quill的字号列表
     const SizeAttributor = Quill.import('attributors/class/size')
     SizeAttributor.whitelist = fontSizeList
@@ -190,6 +188,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 +243,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 +259,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 +284,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 +296,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.setQuillContainerMinHeight(originHeight)
     this.showTextEdit = true
     // 如果是刚创建的节点，那么默认全选，否则普通激活不全选，除非selectTextOnEnterEditText配置为true
     // 在selectTextOnEnterEditText时，如果是在keydown事件进入的节点编辑，也不需要全选
     this.focus(
       isInserting || (selectTextOnEnterEditText && !isFromKeyDown) ? 0 : null
     )
-    if (noneEmptyNoneRichText) {
-      // 如果是非富文本的情况，需要手动应用文本样式
-      this.setTextStyleIfNotRichText(node)
-    }
     this.cacheEditingText = ''
   }
 
@@ -325,6 +321,21 @@ 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(
+      '.' + CONSTANTS.EDIT_NODE_CLASS.RICH_TEXT_EDIT_WRAP
+    ).style.minHeight = minHeight + 'px'
+  }
+
   // 更新文本编辑框的大小和位置
   updateTextEditNode() {
     if (!this.node) return
@@ -337,6 +348,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 +358,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 +372,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,8 +381,7 @@ 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'
@@ -482,7 +467,8 @@ class RichText {
         'background',
         'font',
         'size',
-        'formula'
+        'formula',
+        'align'
       ], // 明确指定允许的格式，不包含有序列表，无序列表等
       theme: 'snow'
     })
@@ -536,18 +522,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 +612,6 @@ class RichText {
       return
     }
     this.isCompositing = false
-    if (!this.lostStyle) {
-      return
-    }
-    this.setTextStyleIfNotRichText(this.node)
   }
 
   // 选中全部
@@ -651,19 +621,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 +650,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 +689,9 @@ class RichText {
         case 'color':
           config.color = value
           break
+        case 'textAlign':
+          config.align = value
+          break
         default:
           break
       }
@@ -750,9 +701,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 +726,9 @@ class RichText {
         case 'color':
           data.color = value
           break
+        case 'align':
+          data.textAlign = value
+          break
         default:
           break
       }
@@ -787,39 +741,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 +805,35 @@ 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
+    // 短期处理，为了兼容老数据，长期会去除
+    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) {

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/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

@@ -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
@@ -482,7 +509,7 @@ export const loadImage = imgFile => {
 // 移除字符串中的html实体
 export const removeHTMLEntities = str => {
   ;[[' ', ' ']].forEach(item => {
-    str = str.replaceAll(item[0], item[1])
+    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)
@@ -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/scripts/createNodeImageList.js

@@ -4,47 +4,51 @@ 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)
-console.log('运行成功')
+console.log('运行成功')

web/src/App.vue

@@ -23,4 +23,23 @@ export default {
   -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;
+  }
+}
 </style>

web/src/api/index.js

@@ -9,24 +9,6 @@ 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
@@ -65,7 +47,7 @@ export const storeData = data => {
     } else {
       originData = getData()
     }
-    originData.root = copyMindMapTreeData({}, data)
+    originData.root = data
     if (window.takeOverApp) {
       mindMapData = originData
       window.takeOverAppMethods.saveMindMapData(originData)

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

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1726022313538') format('woff2'),
-       url('iconfont.woff?t=1726022313538') format('woff'),
-       url('iconfont.ttf?t=1726022313538') format('truetype');
+  src: url('iconfont.woff2?t=1739152990179') format('woff2'),
+       url('iconfont.woff?t=1739152990179') format('woff'),
+       url('iconfont.ttf?t=1739152990179') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconprinting:before {
+  content: "\ea28";
+}
+
+.iconwenjianjia:before {
+  content: "\e614";
+}
+
+.iconcontentleft:before {
+  content: "\e8c9";
+}
+
+.iconjuzhongduiqi:before {
+  content: "\ec80";
+}
+
 .iconfile-excel:before {
   content: "\e7b7";
 }

web/src/config/en.js

@@ -457,19 +457,20 @@ export const downTypeList = [
     name: 'Dedicated file',
     type: 'smm',
     icon: 'iconwenjian',
-    desc: 'Available for import'
+    desc:
+      'SimpleMindMap private format, can be used for re import, and the client can directly edit it'
   },
   {
     name: 'JSON',
     type: 'json',
     icon: 'iconjson',
-    desc: 'Popular data exchange formats, Available for import'
+    desc: 'Popular data exchange format that can be used for re importing'
   },
   {
     name: 'Image',
     type: 'png',
     icon: 'iconPNG',
-    desc: 'Suitable for viewing and sharing'
+    desc: 'Common image formats, suitable for viewing and sharing'
   },
   {
     name: 'SVG',
@@ -481,19 +482,19 @@ export const downTypeList = [
     name: 'PDF',
     type: 'pdf',
     icon: 'iconpdf',
-    desc: 'Suitable for printing'
+    desc: 'Suitable for viewing, browsing, and printing'
   },
   {
     name: 'Markdown',
     type: 'md',
     icon: 'iconmarkdown',
-    desc: 'Easy for other software to open'
+    desc: 'MD text format, easy for other software to open'
   },
   {
     name: 'XMind',
     type: 'xmind',
     icon: 'iconxmind',
-    desc: 'XMind file'
+    desc: 'XMind software file'
   },
   {
     name: 'Txt',
@@ -511,7 +512,7 @@ export const downTypeList = [
     name: 'Excel',
     type: 'xlsx',
     icon: 'iconfile-excel',
-    desc: 'Excel software format'
+    desc: 'Table text format, editable with Excel software'
   }
 ]
 
@@ -626,3 +627,19 @@ export const linearGradientDirList = [
     end: [0, 0]
   }
 ]
+
+// 文本对齐方式
+export const alignList = [
+  {
+    name: 'Align left',
+    value: 'left'
+  },
+  {
+    name: 'Align center',
+    value: 'center'
+  },
+  {
+    name: 'Align right',
+    value: 'right'
+  }
+]

web/src/config/index.js

@@ -21,7 +21,8 @@ import {
   lineStyleMap as lineStyleMapZh,
   numberTypeList as numberTypeListZh,
   numberLevelList as numberLevelListZh,
-  linearGradientDirList as linearGradientDirListZh
+  linearGradientDirList as linearGradientDirListZh,
+  alignList as alignListZh
 } from './zh'
 import {
   fontFamilyList as fontFamilyListEn,
@@ -37,7 +38,8 @@ import {
   downTypeList as downTypeListEn,
   numberTypeList as numberTypeListEn,
   numberLevelList as numberLevelListEn,
-  linearGradientDirList as linearGradientDirListEn
+  linearGradientDirList as linearGradientDirListEn,
+  alignList as alignListEn
 } from './en'
 import {
   fontFamilyList as fontFamilyListZhtw,
@@ -53,7 +55,8 @@ import {
   downTypeList as downTypeListZhtw,
   numberTypeList as numberTypeListZhtw,
   numberLevelList as numberLevelListZhtw,
-  linearGradientDirList as linearGradientDirListZhtw
+  linearGradientDirList as linearGradientDirListZhtw,
+  alignList as alignListZhtw
 } from './zhtw'
 
 const fontFamilyList = {
@@ -152,6 +155,12 @@ const linearGradientDirList = {
   zhtw: linearGradientDirListZhtw
 }
 
+const alignList = {
+  zh: alignListZh,
+  en: alignListEn,
+  zhtw: alignListZhtw
+}
+
 export {
   fontSizeList,
   borderWidthList,
@@ -175,5 +184,6 @@ export {
   downTypeList,
   numberTypeList,
   numberLevelList,
-  linearGradientDirList
+  linearGradientDirList,
+  alignList
 }

web/src/config/zh.js

@@ -144,9 +144,9 @@ export const borderRadiusList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 export const lineWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
 export const lineStyleMap = {
-  straight: `<svg width="60" height="26"><path d="M18,14L30,14L30,5L42,5" fill="none" stroke="#000" stroke-width="2"></path><path d="M18,14L30,14L30,23L42,23" fill="none" stroke="#000" stroke-width="2"></path></svg>`,
-  curve: `<svg width="60" height="26"><path d="M18,14L30,14A12,-9 0 0 1 42,5" fill="none" stroke="#000" stroke-width="2"></path><path d="M18,14L30,14A12,9 0 0 0 42,23" fill="none" stroke="#000" stroke-width="2"></path></svg>`,
-  direct: `<svg width="60" height="26"><path d="M18,14L30,14L42,5" fill="none" stroke="#000" stroke-width="2"></path><path d="M18,14L30,14L42,23" fill="none" stroke="#000" stroke-width="2"></path></svg>`
+  straight: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="26"><path d="M18,14L30,14L30,5L42,5" fill="none" stroke="#000" stroke-width="2"></path><path d="M18,14L30,14L30,23L42,23" fill="none" stroke="#000" stroke-width="2"></path></svg>`,
+  curve: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="26"><path d="M18,14L30,14A12,-9 0 0 1 42,5" fill="none" stroke="#000" stroke-width="2"></path><path d="M18,14L30,14A12,9 0 0 0 42,23" fill="none" stroke="#000" stroke-width="2"></path></svg>`,
+  direct: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="26"><path d="M18,14L30,14L42,5" fill="none" stroke="#000" stroke-width="2"></path><path d="M18,14L30,14L42,23" fill="none" stroke="#000" stroke-width="2"></path></svg>`
 }
 
 // 连线风格
@@ -552,19 +552,19 @@ export const downTypeList = [
     name: '专有文件',
     type: 'smm',
     icon: 'iconwenjian',
-    desc: '可用于导入'
+    desc: 'SimpleMindMap私有格式，可用于再次导入，客户端可直接编辑'
   },
   {
     name: 'JSON',
     type: 'json',
     icon: 'iconjson',
-    desc: '流行的数据交换格式，可用于导入'
+    desc: '流行的数据交换格式，可用于再次导入'
   },
   {
     name: '图片',
     type: 'png',
     icon: 'iconPNG',
-    desc: '适合查看分享'
+    desc: '常用图片格式，适合查看分享'
   },
   {
     name: 'SVG',
@@ -576,19 +576,19 @@ export const downTypeList = [
     name: 'PDF',
     type: 'pdf',
     icon: 'iconpdf',
-    desc: '适合打印'
+    desc: '适合查看浏览和打印'
   },
   {
     name: 'Markdown',
     type: 'md',
     icon: 'iconmarkdown',
-    desc: '便于其他软件打开'
+    desc: 'md文本格式，便于其他软件打开'
   },
   {
     name: 'XMind',
     type: 'xmind',
     icon: 'iconxmind',
-    desc: 'XMind格式'
+    desc: 'XMind软件格式'
   },
   {
     name: 'Txt',
@@ -606,7 +606,7 @@ export const downTypeList = [
     name: 'Excel',
     type: 'xlsx',
     icon: 'iconfile-excel',
-    desc: 'Excel软件格式'
+    desc: '表格文本形式，可用Excel软件编辑'
   }
 ]
 
@@ -721,3 +721,19 @@ export const linearGradientDirList = [
     end: [0, 0]
   }
 ]
+
+// 文本对齐方式
+export const alignList = [
+  {
+    name: '左对齐',
+    value: 'left'
+  },
+  {
+    name: '居中对齐',
+    value: 'center'
+  },
+  {
+    name: '右对齐',
+    value: 'right'
+  }
+]

web/src/config/zhtw.js

@@ -457,61 +457,61 @@ export const downTypeList = [
     name: '專用檔案',
     type: 'smm',
     icon: 'iconwenjian',
-    desc: '可用於匯入'
+    desc: 'SimpleMindMap私有格式，可用于再次導入，客戶端可直接編輯'
   },
   {
     name: 'JSON',
     type: 'json',
     icon: 'iconjson',
-    desc: '常見的資料交換格式，可用於匯入'
+    desc: '流行的數據交換格式，可用于再次導入'
   },
   {
     name: '圖片',
     type: 'png',
     icon: 'iconPNG',
-    desc: '適合檢視與分享'
+    desc: '常用圖片格式，適合查看分享'
   },
   {
     name: 'SVG',
     type: 'svg',
     icon: 'iconSVG',
-    desc: '可縮放向量圖形'
+    desc: '可縮放矢量圖形'
   },
   {
     name: 'PDF',
     type: 'pdf',
     icon: 'iconpdf',
-    desc: '適合列印'
+    desc: '適合查看浏覽和打印'
   },
   {
     name: 'Markdown',
     type: 'md',
     icon: 'iconmarkdown',
-    desc: '方便其他軟體開啟'
+    desc: 'md文本格式，便于其他軟件打開'
   },
   {
     name: 'XMind',
     type: 'xmind',
     icon: 'iconxmind',
-    desc: 'XMind 檔案'
+    desc: 'XMind軟件格式'
   },
   {
     name: 'Txt',
     type: 'txt',
     icon: 'iconTXT',
-    desc: '純文字檔案'
+    desc: '純文本文件'
   },
   {
     name: 'FreeMind',
     type: 'mm',
     icon: 'iconfreemind',
-    desc: 'FreeMind軟體格式'
+    desc: 'FreeMind軟件格式'
   },
   {
     name: 'Excel',
     type: 'xlsx',
     icon: 'iconfile-excel',
-    desc: 'Excel軟體格式'
+    desc: '表格文本形式，可用Excel軟件編輯'
   }
 ]
 
@@ -626,3 +626,19 @@ export const linearGradientDirList = [
     end: [0, 0]
   }
 ]
+
+// 文本对齐方式
+export const alignList = [
+  {
+    name: '左對齊',
+    value: 'left'
+  },
+  {
+    name: '居中對齊',
+    value: 'center'
+  },
+  {
+    name: '右對齊',
+    value: 'right'
+  }
+]

web/src/lang/en_us.js

@@ -73,11 +73,19 @@ export default {
     watermarkTextOpacity: 'Text opacity',
     watermarkTextFontSize: 'Font size',
     belowNode: 'Display below nodes',
-    tagPosition: 'Node tag position',
     tagPositionRight: 'Text right',
     tagPositionBottom: 'Text bottom',
     alwaysShowExpandBtn: 'Always show expand btn',
-    enableAutoEnterTextEditWhenKeydown: 'Auto enter text edit when keydown'
+    enableAutoEnterTextEditWhenKeydown: 'Auto enter text edit when keydown',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    changeRichTextTip: 'This operation will clear all historical modification records and modify the mind map data. Do you want to continue?',
+    changeRichTextTip2: 'Do you want to switch to rich text mode?',
+    changeRichTextTip3: 'Do you want to switch to non rich text mode?',
+    enableDragImport: 'Is it allowed to directly drag and drop files to the page for import',
+    imgTextMargin: 'Node image and text margin',
+    textContentMargin: 'Node contents margin',
+    enableInheritAncestorLineStyle: 'Node connection style inherits the style of ancestor nodes',
   },
   color: {
     moreColor: 'More color'
@@ -145,11 +153,7 @@ export default {
     svgFile: 'svg file',
     pdfFile: 'pdf file',
     markdownFile: 'markdown file',
-    tips: 'tips: .smm and .json file can be import',
     isTransparent: 'Background is transparent',
-    pngTips:
-      'tips: Exporting pictures in rich text mode is time-consuming. It is recommended to export to svg format',
-    svgTips: 'tips: Exporting pictures in rich text mode is time-consuming',
     transformingDomToImages: 'Converting nodes: ',
     notifyTitle: 'Info',
     notifyMessage:
@@ -159,7 +163,9 @@ export default {
     useMultiPageExport: 'Export multi page',
     defaultFileName: 'Mind map',
     addFooterTextPlaceholder: 'For example: From simple-mind-map',
-    addFooterText: 'Add text at the footer'
+    addFooterText: 'Add text at the footer',
+    desc: 'Desc',
+    options: 'Options'
   },
   fullscreen: {
     fullscreenShow: 'Full screen show',
@@ -184,7 +190,7 @@ export default {
   navigatorToolbar: {
     openMiniMap: 'Open mini map',
     closeMiniMap: 'Close mini map',
-    readonly: 'Change to eadonly',
+    readonly: 'Change to Readonly',
     edit: 'Change to edit',
     backToRoot: 'Back to root node',
     changeSourceCodeEdit: 'Switch to source code editing mode'
@@ -210,7 +216,9 @@ export default {
   },
   outline: {
     title: 'Outline',
-    nodeDefaultText: 'Branch node'
+    nodeDefaultText: 'Branch node',
+    print: 'Print',
+    fullscreen: 'Fullscreen'
   },
   scale: {
     zoomIn: 'Zoom in',
@@ -258,7 +266,14 @@ export default {
     openLineFlow: 'Open line flow',
     lineFlowDuration: 'Line flow duration',
     forward: 'Forward',
-    reverse: 'Reverse'
+    reverse: 'Reverse',
+    img: 'Image',
+    placement: 'Placement',
+    top: 'Top',
+    bottom: 'Bottom',
+    left: 'Left',
+    right: 'Right',
+    tag: 'Tag',
   },
   theme: {
     title: 'Theme',
@@ -326,7 +341,8 @@ export default {
     no: 'No',
     exportError: 'Export failed',
     dragTip: 'Release here to import the file',
-    deleteNodeImgTip: 'Are you sure to delete the node image?'
+    deleteNodeImgTip: 'Are you sure to delete the node image?',
+    autoOpenNodeRichTextTip: 'Detected imported rich text content, automatically enabled rich text mode'
   },
   mouseAction: {
     tip1:
@@ -363,7 +379,8 @@ export default {
     fontSize: 'Font size',
     color: 'Color',
     backgroundColor: 'Background color',
-    removeFormat: 'Clear Style'
+    removeFormat: 'Clear Style',
+    textAlign: 'Text align'
   },
   other: {
     loading: 'Loading, please wait...'

web/src/lang/zh_cn.js

@@ -71,11 +71,20 @@ export default {
     watermarkTextOpacity: '文字透明度',
     watermarkTextFontSize: '文字字号',
     belowNode: '显示在节点下方',
-    tagPosition: '节点标签显示的位置',
     tagPositionRight: '文本右侧',
     tagPositionBottom: '文本下面',
     alwaysShowExpandBtn: '是否一直显示展开收起按钮',
-    enableAutoEnterTextEditWhenKeydown: '键盘输入时自动进入文本编辑'
+    enableAutoEnterTextEditWhenKeydown: '键盘输入时自动进入文本编辑',
+    enableInheritAncestorLineStyle: '节点连线样式继承祖先节点的样式',
+    confirm: '确定',
+    cancel: '取消',
+    changeRichTextTip:
+      '该操作会清空所有历史修改记录，并且修改思维导图数据，是否继续？',
+    changeRichTextTip2: '是否切换为富文本模式？',
+    changeRichTextTip3: '是否切换为非富文本模式？',
+    enableDragImport: '是否允许直接拖拽文件到页面进行导入',
+    imgTextMargin: '节点图片和文本间隔',
+    textContentMargin: '节点各种内容间隔'
   },
   color: {
     moreColor: '更多颜色'
@@ -143,10 +152,7 @@ export default {
     svgFile: 'svg文件',
     pdfFile: 'pdf文件',
     markdownFile: 'markdown文件',
-    tips: 'tips：.smm和.json文件可用于导入',
     isTransparent: '背景是否透明',
-    pngTips: 'tips：富文本模式导出图片非常耗时，建议导出为svg格式',
-    svgTips: 'tips：富文本模式导出图片非常耗时',
     transformingDomToImages: '正在转换节点：',
     notifyTitle: '消息',
     notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了',
@@ -155,7 +161,9 @@ export default {
     useMultiPageExport: '是否多页导出',
     defaultFileName: '思维导图',
     addFooterText: '底部添加文字',
-    addFooterTextPlaceholder: '比如：来自simple-mind-map'
+    addFooterTextPlaceholder: '比如：来自simple-mind-map',
+    desc: '说明',
+    options: '选项'
   },
   fullscreen: {
     fullscreenShow: '全屏查看',
@@ -206,7 +214,9 @@ export default {
   },
   outline: {
     title: '大纲',
-    nodeDefaultText: '分支节点'
+    nodeDefaultText: '分支节点',
+    print: '打印',
+    fullscreen: '全屏'
   },
   scale: {
     zoomIn: '放大',
@@ -254,7 +264,14 @@ export default {
     openLineFlow: '开启流动效果',
     lineFlowDuration: '一个流动周期的时间',
     forward: '正向',
-    reverse: '反向'
+    reverse: '反向',
+    img: '图片',
+    placement: '布局',
+    top: '上',
+    bottom: '下',
+    left: '左',
+    right: '右',
+    tag: '标签'
   },
   theme: {
     title: '主题',
@@ -318,7 +335,8 @@ export default {
     no: '否',
     exportError: '导出失败',
     dragTip: '在此释放以导入该文件',
-    deleteNodeImgTip: '是否确认删除该节点图片？'
+    deleteNodeImgTip: '是否确认删除该节点图片？',
+    autoOpenNodeRichTextTip: '检测到导入了富文本内容，已自动开启富文本模式'
   },
   mouseAction: {
     tip1: '当前：左键拖动画布，右键框选节点',
@@ -353,7 +371,8 @@ export default {
     fontSize: '字号',
     color: '字体颜色',
     backgroundColor: '背景颜色',
-    removeFormat: '清除样式'
+    removeFormat: '清除样式',
+    textAlign: '对齐方式'
   },
   other: {
     loading: '正在加载，请稍后...'

web/src/lang/zh_tw.js

@@ -41,11 +41,8 @@ export default {
     rainbowLines: '彩虹線條',
     notUseRainbowLines: '不使用彩虹線條',
     outerFramePadding: '外框內距',
-    tagPosition: '節點標簽顯示的位置',
     tagPositionRight: '文本右側',
-    tagPositionBottom: '文本下面',
-    alwaysShowExpandBtn: '是否壹直顯示展開收起按鈕',
-    enableAutoEnterTextEditWhenKeydown: '鍵盤輸入時自動進入文本編輯'
+    tagPositionBottom: '文本下面'
   },
   setting: {
     title: '設置',
@@ -76,7 +73,19 @@ export default {
     watermarkAngle: '旋轉角度',
     watermarkTextOpacity: '文字透明度',
     watermarkTextFontSize: '字型大小',
-    belowNode: '顯示在節點下方'
+    belowNode: '顯示在節點下方',
+    confirm: '確定',
+    cancel: '取消',
+    changeRichTextTip:
+      '該操作會清空所有曆史修改記錄，並且修改思維導圖數據，是否繼續？',
+    changeRichTextTip2: '是否切換爲富文本模式？',
+    changeRichTextTip3: '是否切換爲非富文本模式？',
+    enableDragImport: '是否允許直接拖拽文件到頁面進行導入',
+    imgTextMargin: '節點圖片和文本間隔',
+    textContentMargin: '節點各種內容間隔',
+    enableAutoEnterTextEditWhenKeydown: '鍵盤輸入時自動進入文本編輯',
+    enableInheritAncestorLineStyle: '節點連線樣式繼承祖先節點的樣式',
+    alwaysShowExpandBtn: '是否壹直顯示展開收起按鈕'
   },
   color: {
     moreColor: '更多顏色'
@@ -144,10 +153,7 @@ export default {
     svgFile: 'SVG 檔案',
     pdfFile: 'PDF 檔案',
     markdownFile: 'Markdown 檔案',
-    tips: '提示：.smm 和 .json 檔案可以匯入',
     isTransparent: '背景透明',
-    pngTips: '提示：在豐富文字模式下匯出圖片非常耗時，建議匯出為 SVG 格式',
-    svgTips: '提示：在豐富文字模式下匯出圖片非常耗時',
     transformingDomToImages: '正在轉換節點：',
     notifyTitle: '訊息',
     notifyMessage: '如果沒有觸發下載，請檢查是否被瀏覽器封鎖',
@@ -156,7 +162,9 @@ export default {
     useMultiPageExport: '多頁匯出',
     defaultFileName: '心智圖',
     addFooterText: '在底部新增文字',
-    addFooterTextPlaceholder: '例如：來自 simple-mind-map'
+    addFooterTextPlaceholder: '例如：來自 simple-mind-map',
+    desc: '說明',
+    options: '選項'
   },
   fullscreen: {
     fullscreenShow: '全螢幕檢視',
@@ -207,7 +215,9 @@ export default {
   },
   outline: {
     title: '大綱',
-    nodeDefaultText: '分支節點'
+    nodeDefaultText: '分支節點',
+    print: '打印',
+    fullscreen: '全屏'
   },
   scale: {
     zoomIn: '放大',
@@ -254,7 +264,14 @@ export default {
     openLineFlow: '開啓流動效果',
     lineFlowDuration: '一個流動周期的時間',
     forward: '正向',
-    reverse: '反向'
+    reverse: '反向',
+    img: '圖片',
+    placement: '布局',
+    top: '上',
+    bottom: '下',
+    left: '左',
+    right: '右',
+    tag: '標簽'
   },
   theme: {
     title: '主題',
@@ -317,7 +334,8 @@ export default {
     yes: '是',
     no: '否',
     exportError: '匯出失敗',
-    dragTip: '在此釋放以匯入檔案'
+    dragTip: '在此釋放以匯入檔案',
+    autoOpenNodeRichTextTip: '檢測到導入了富文本內容，已自動開啓富文本模式'
   },
   mouseAction: {
     tip1: '目前：左鍵拖曳畫布，右鍵框選節點',
@@ -352,7 +370,8 @@ export default {
     fontSize: '字型大小',
     color: '字型顏色',
     backgroundColor: '背景顏色',
-    removeFormat: '清除樣式'
+    removeFormat: '清除樣式',
+    textAlign: '對齊方式'
   },
   other: {
     loading: '載入中，請稍候...'

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

@@ -1,6 +1,6 @@
 <template>
   <Sidebar ref="sidebar" :title="$t('baseStyle.title')">
-    <div class="sidebarContent" :class="{ isDark: isDark }" v-if="data">
+    <div class="sidebarContent customScrollbar" :class="{ isDark: isDark }" v-if="data">
       <!-- 背景 -->
       <div class="title noTop">{{ $t('baseStyle.background') }}</div>
       <div class="row">

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

@@ -43,6 +43,10 @@
     <NodeOuterFrame v-if="mindMap" :mindMap="mindMap"></NodeOuterFrame>
     <NodeTagStyle v-if="mindMap" :mindMap="mindMap"></NodeTagStyle>
     <Setting :data="mindMapData" :mindMap="mindMap"></Setting>
+    <NodeImgPlacementToolbar
+      v-if="mindMap"
+      :mindMap="mindMap"
+    ></NodeImgPlacementToolbar>
     <div
       class="dragMask"
       v-if="showDragMask"
@@ -127,6 +131,7 @@ import NodeOuterFrame from './NodeOuterFrame.vue'
 import NodeTagStyle from './NodeTagStyle.vue'
 import Setting from './Setting.vue'
 import AssociativeLineStyle from './AssociativeLineStyle.vue'
+import NodeImgPlacementToolbar from './NodeImgPlacementToolbar.vue'
 
 // 注册插件
 MindMap.usePlugin(MiniMap)
@@ -180,7 +185,8 @@ export default {
     NodeOuterFrame,
     NodeTagStyle,
     Setting,
-    AssociativeLineStyle
+    AssociativeLineStyle,
+    NodeImgPlacementToolbar
   },
   data() {
     return {
@@ -197,6 +203,7 @@ export default {
       isZenMode: state => state.localConfig.isZenMode,
       openNodeRichText: state => state.localConfig.openNodeRichText,
       isShowScrollbar: state => state.localConfig.isShowScrollbar,
+      enableDragImport: state => state.localConfig.enableDragImport,
       useLeftKeySelectionRightKeyDrag: state =>
         state.localConfig.useLeftKeySelectionRightKeyDrag,
       isUseHandDrawnLikeStyle: state =>
@@ -430,7 +437,7 @@ export default {
               })
           })
         }
-        // createNodePrefixContent: (node) => {
+        // createNodePrefixContent: node => {
         //   const el = document.createElement('div')
         //   el.style.width = '50px'
         //   el.style.height = '50px'
@@ -654,13 +661,24 @@ export default {
     // 动态设置思维导图数据
     setData(data) {
       this.handleShowLoading()
+      let rootNodeData = null
       if (data.root) {
         this.mindMap.setFullData(data)
+        rootNodeData = data.root
       } else {
         this.mindMap.setData(data)
+        rootNodeData = data
       }
       this.mindMap.view.reset()
       this.manualSave()
+      // 如果导入的是富文本内容，那么自动开启富文本模式
+      if (rootNodeData.data.richText && !this.openNodeRichText) {
+        this.$bus.$emit('toggleOpenNodeRichText', true)
+        this.$notify.info({
+          title: this.$t('edit.tip'),
+          message: this.$t('edit.autoOpenNodeRichTextTip')
+        })
+      }
     },
 
     // 重新渲染
@@ -878,13 +896,14 @@ export default {
 
     // 拖拽文件到页面导入
     onDragenter() {
-      if (this.isDragOutlineTreeNode) return
+      if (!this.enableDragImport || this.isDragOutlineTreeNode) return
       this.showDragMask = true
     },
     onDragleave() {
       this.showDragMask = false
     },
     onDrop(e) {
+      if (!this.enableDragImport) return
       this.showDragMask = false
       const dt = e.dataTransfer
       const file = dt.files && dt.files[0]

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

@@ -1,16 +1,18 @@
 <template>
   <el-dialog
     class="nodeExportDialog"
+    :class="{ isMobile: isMobile, isDark: isDark }"
     :title="$t('export.title')"
     :visible.sync="dialogVisible"
     v-loading.fullscreen.lock="loading"
     :element-loading-text="loadingText"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
-    :width="isMobile ? '90%' : '50%'"
+    :width="isMobile ? '90%' : '800px'"
     :top="isMobile ? '20px' : '15vh'"
   >
     <div class="exportContainer" :class="{ isDark: isDark }">
+      <!-- 文件名称输入 -->
       <div class="nameInputBox">
         <span class="name">{{ $t('export.filename') }}</span>
         <el-input
@@ -19,71 +21,90 @@
           size="mini"
           @keydown.native.stop
         ></el-input>
-        <el-checkbox
-          v-show="['smm', 'json'].includes(exportType)"
-          v-model="widthConfig"
-          style="margin-left: 12px"
-          >{{ $t('export.include') }}</el-checkbox
-        >
       </div>
-      <div
-        class="paddingInputBox"
-        v-show="['svg', 'png', 'pdf'].includes(exportType)"
-      >
-        <div class="paddingInputGroup">
-          <span class="name">{{ $t('export.paddingX') }}</span>
-          <el-input
-            style="max-width: 100px"
-            v-model="paddingX"
-            size="mini"
-            @change="onPaddingChange"
-            @keydown.native.stop
-          ></el-input>
-        </div>
-        <div class="paddingInputGroup">
-          <span class="name">{{ $t('export.paddingY') }}</span>
-          <el-input
-            style="width: 100px"
-            v-model="paddingY"
-            size="mini"
-            @change="onPaddingChange"
-            @keydown.native.stop
-          ></el-input>
-        </div>
-        <div class="paddingInputGroup">
-          <span class="name">{{ this.$t('export.addFooterText') }}</span>
-          <el-input
-            style="width: 200px"
-            v-model="extraText"
-            size="mini"
-            :placeholder="$t('export.addFooterTextPlaceholder')"
-            @keydown.native.stop
-          ></el-input>
-        </div>
-        <div class="paddingInputGroup">
-          <el-checkbox
-            v-show="['png', 'pdf'].includes(exportType)"
-            v-model="isTransparent"
-            >{{ $t('export.isTransparent') }}</el-checkbox
+      <!-- 导出类型选择 -->
+      <div class="downloadTypeSelectBox">
+        <!-- 类型列表 -->
+        <div class="downloadTypeList customScrollbar">
+          <div
+            class="downloadTypeItem"
+            v-for="item in downTypeList"
+            :key="item.type"
+            :class="{ active: exportType === item.type }"
+            @click="exportType = item.type"
           >
-        </div>
-      </div>
-      <div class="downloadTypeList">
-        <div
-          class="downloadTypeItem"
-          v-for="item in downTypeList"
-          :key="item.type"
-          :class="{ active: exportType === item.type }"
-          @click="exportType = item.type"
-        >
-          <div class="icon iconfont" :class="[item.icon, item.type]"></div>
-          <div class="info">
+            <div class="icon iconfont" :class="[item.icon, item.type]"></div>
             <div class="name">{{ item.name }}</div>
-            <div class="desc">{{ item.desc }}</div>
+            <div class="icon checked el-icon-check"></div>
+          </div>
+        </div>
+        <!-- 类型内容 -->
+        <div class="downloadTypeContent customScrollbar">
+          <div class="contentRow">
+            <div class="contentName">{{ $t('export.desc') }}</div>
+            <div class="contentValue">
+              {{ currentTypeData ? currentTypeData.desc : '' }}
+            </div>
+          </div>
+          <div class="contentRow">
+            <div class="contentName">{{ $t('export.options') }}</div>
+            <div class="contentValue">
+              <div
+                class="valueItem"
+                v-show="['smm', 'json'].includes(exportType)"
+              >
+                <el-checkbox v-model="widthConfig">{{
+                  $t('export.include')
+                }}</el-checkbox>
+              </div>
+              <div
+                class="valueItem"
+                v-show="['svg', 'png', 'pdf'].includes(exportType)"
+              >
+                <div class="valueSubItem">
+                  <span class="name">{{ $t('export.paddingX') }}</span>
+                  <el-input
+                    style="width: 200px"
+                    v-model="paddingX"
+                    size="mini"
+                    @change="onPaddingChange"
+                    @keydown.native.stop
+                  ></el-input>
+                </div>
+                <div class="valueSubItem">
+                  <span class="name">{{ $t('export.paddingY') }}</span>
+                  <el-input
+                    style="width: 200px"
+                    v-model="paddingY"
+                    size="mini"
+                    @change="onPaddingChange"
+                    @keydown.native.stop
+                  ></el-input>
+                </div>
+                <div class="valueSubItem">
+                  <span class="name">{{
+                    this.$t('export.addFooterText')
+                  }}</span>
+                  <el-input
+                    style="width: 200px"
+                    v-model="extraText"
+                    size="mini"
+                    :placeholder="$t('export.addFooterTextPlaceholder')"
+                    @keydown.native.stop
+                  ></el-input>
+                </div>
+                <div class="valueSubItem">
+                  <el-checkbox
+                    v-show="['png', 'pdf'].includes(exportType)"
+                    v-model="isTransparent"
+                    >{{ $t('export.isTransparent') }}</el-checkbox
+                  >
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <div class="tip">{{ $t('export.tips') }}</div>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
@@ -143,6 +164,13 @@ export default {
           return true
         }
       })
+    },
+
+    currentTypeData() {
+      const cur = this.downTypeList.find(item => {
+        return item.type === this.exportType
+      })
+      return cur
     }
   },
   created() {
@@ -247,15 +275,39 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.exportContainer {
-  &.isDark {
-    .downloadTypeList {
-      .downloadTypeItem {
-        background-color: #363b3f;
+.nodeExportDialog {
+  .exportContainer {
+    &.isDark {
+      .nameInputBox {
+        .name {
+          color: hsla(0, 0%, 100%, 0.6);
+        }
+      }
 
-        .info {
-          .name {
-            color: hsla(0, 0%, 100%, 0.9);
+      .downloadTypeSelectBox {
+        .downloadTypeList {
+          .downloadTypeItem {
+            background-color: #363b3f;
+
+            &.active {
+              background-color: #262a2e;
+            }
+
+            .name {
+              color: hsla(0, 0%, 100%, 0.9);
+            }
+          }
+        }
+
+        .downloadTypeContent {
+          .contentRow {
+            .contentName {
+              color: hsla(0, 0%, 100%, 0.6);
+            }
+
+            .contentValue {
+              color: hsla(0, 0%, 100%, 0.6);
+            }
           }
         }
       }
@@ -264,125 +316,228 @@ export default {
 }
 
 .nodeExportDialog {
-  /deep/ .el-dialog__body {
-    background-color: #f2f4f7;
-  }
-
-  .nameInputBox {
-    margin-bottom: 20px;
-
-    .name {
-      margin-right: 10px;
-    }
-  }
-
-  .paddingInputBox {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .paddingInputGroup {
-      margin-right: 12px;
-      margin-bottom: 12px;
-
-      &:last-of-type {
-        margin-right: 0;
+  &.isDark {
+    /deep/ .el-dialog__body {
+      .el-checkbox {
+        .el-checkbox__label {
+          color: hsla(0, 0%, 100%, 0.6);
+        }
       }
     }
+  }
 
-    .name {
-      margin-right: 10px;
+  /deep/ .el-dialog__body {
+    padding: 0;
+    border-top: 1px solid #f2f4f7;
+    border-bottom: 1px solid #f2f4f7;
+
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #409eff !important;
+    }
+
+    .el-checkbox {
+      .el-checkbox__label {
+        color: #1a1a1a;
+      }
     }
   }
 
-  .tip {
-    margin-top: 10px;
+  &.isMobile {
+    .exportContainer {
+      .downloadTypeSelectBox {
+        flex-direction: column;
 
-    &.warning {
-      color: #f56c6c;
+        .downloadTypeList {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          overflow-x: auto;
+          height: 60px;
+
+          .downloadTypeItem {
+            width: 100px;
+            flex-shrink: 0;
+            padding-left: 10px;
+
+            .icon {
+              margin-right: 5px;
+
+              &.checked {
+                display: none !important;
+              }
+            }
+          }
+        }
+
+        .downloadTypeContent {
+          .contentRow {
+            flex-direction: column;
+
+            .contentName {
+              margin-bottom: 10px;
+            }
+
+            .contentValue {
+              .valueItem {
+                .valueSubItem {
+                  display: flex;
+                  flex-direction: column;
+
+                  .name {
+                    margin-bottom: 5px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 
-  .downloadTypeList {
+  .exportContainer {
+    width: 100%;
+    height: 450px;
+    overflow: hidden;
     display: flex;
-    flex-wrap: wrap;
-    .downloadTypeItem {
-      width: 200px;
-      height: 88px;
-      padding: 22px;
-      overflow: hidden;
-      margin: 10px;
-      border-radius: 11px;
-      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.02);
-      background-color: #fff;
+    flex-direction: column;
+
+    .nameInputBox {
       display: flex;
       align-items: center;
-      cursor: pointer;
-      border: 2px solid transparent;
+      justify-content: center;
+      flex-wrap: wrap;
+      height: 50px;
+      flex-shrink: 0;
+      border-bottom: 1px solid #f2f4f7;
 
-      &.active {
-        border-color: #409eff;
-      }
-
-      .icon {
-        font-size: 30px;
+      .name {
         margin-right: 10px;
+      }
+    }
+
+    .downloadTypeSelectBox {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      display: flex;
+
+      .downloadTypeList {
+        width: 210px;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        background-color: #f2f4f7;
         flex-shrink: 0;
 
-        &.png {
-          color: #ffc038;
-        }
+        .downloadTypeItem {
+          width: 100%;
+          height: 60px;
+          padding-left: 28px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
 
-        &.pdf {
-          color: #ff6c4d;
-        }
+          &.active {
+            background-color: #fff;
 
-        &.md {
-          color: #2b2b2b;
-        }
+            .icon {
+              &.checked {
+                display: block;
+              }
+            }
+          }
 
-        &.json {
-          color: #12c87e;
-        }
+          .icon {
+            font-size: 25px;
+            margin-right: 15px;
+            flex-shrink: 0;
 
-        &.svg {
-          color: #4380ff;
-        }
+            &.png {
+              color: #ffc038;
+            }
 
-        &.smm {
-          color: #409eff;
-        }
+            &.pdf {
+              color: #ff6c4d;
+            }
 
-        &.xmind {
-          color: #f55e5e;
-        }
+            &.md {
+              color: #2b2b2b;
+            }
 
-        &.txt {
-          color: #70798e;
+            &.json {
+              color: #12c87e;
+            }
+
+            &.svg {
+              color: #4380ff;
+            }
+
+            &.smm {
+              color: #409eff;
+            }
+
+            &.xmind {
+              color: #f55e5e;
+            }
+
+            &.txt {
+              color: #70798e;
+            }
+
+            &.checked {
+              color: #409eff;
+              font-size: 20px;
+              margin-left: auto;
+              display: none;
+            }
+          }
+
+          .name {
+            color: #1a1a1a;
+            font-size: 15px;
+            margin-bottom: 5px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
         }
       }
 
-      .info {
-        width: 100%;
-        overflow: hidden;
+      .downloadTypeContent {
+        padding: 30px;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
 
-        .name {
-          color: #1a1a1a;
-          font-size: 15px;
-          margin-bottom: 5px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+        .contentRow {
+          display: flex;
+          font-size: 14px;
+          margin-bottom: 20px;
 
-        .desc {
-          color: #999;
-          font-size: 12px;
-          display: -webkit-box; /* 必须设置display属性为-webkit-box */
-          overflow: hidden; /* 超出部分隐藏 */
-          text-overflow: ellipsis; /* 显示省略号 */
-          -webkit-line-clamp: 2; /* 限制显示两行 */
-          -webkit-box-orient: vertical; /* 垂直方向上的换行 */
+          .contentName {
+            width: 80px;
+            color: #666;
+          }
+
+          .contentValue {
+            color: #1a1a1a;
+
+            .valueItem {
+              .valueSubItem {
+                margin-bottom: 12px;
+
+                &:last-of-type {
+                  margin-right: 0;
+                }
+
+                .name {
+                  margin-right: 12px;
+                }
+              }
+            }
+          }
         }
       }
     }

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

@@ -18,7 +18,7 @@
         >
       </div>
       <div class="title">{{ $t('formulaSidebar.common') }}</div>
-      <div class="formulaList">
+      <div class="formulaList customScrollbar">
         <div class="formulaItem" v-for="(item, index) in list" :key="index">
           <div class="overview" v-html="item.overview"></div>
           <div class="text" @click="formulaText = item.text">

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

@@ -0,0 +1,164 @@
+<template>
+  <div
+    class="nodeImgPlacementToolbar"
+    ref="nodeImgPlacementToolbar"
+    :style="style"
+    @click.stop.passive
+    v-show="showImgPlacementToolbar"
+  >
+    <div
+      class="imgPlacementItem iconfont iconcontentleft"
+      v-for="item in imgPlacementList"
+      :key="item"
+      :class="[
+        {
+          selected: imgPlacement === item
+        },
+        'icon_' + item
+      ]"
+      @click="updateImgPlacement(item)"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+
+export default {
+  name: 'NodeImgPlacementToolbar',
+  components: {},
+  props: {
+    mindMap: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      showImgPlacementToolbar: false,
+      style: {
+        left: 0,
+        top: 0
+      },
+      imgPlacementList: ['top', 'bottom', 'left', 'right'],
+      node: null,
+      imgNode: null,
+      imgPlacement: ''
+    }
+  },
+  computed: {},
+  created() {
+    this.mindMap.on('node_img_click', this.show)
+    this.mindMap.on('draw_click', this.close)
+    this.mindMap.on('svg_mousedown', this.close)
+    this.mindMap.on('node_dblclick', this.close)
+    this.mindMap.on('node_active', this.onNodeActive)
+    this.mindMap.on('scale', this.onScale)
+  },
+  mounted() {
+    document.body.append(this.$refs.nodeImgPlacementToolbar)
+  },
+  beforeDestroy() {
+    this.mindMap.off('node_img_click', this.show)
+    this.mindMap.off('draw_click', this.close)
+    this.mindMap.off('svg_mousedown', this.close)
+    this.mindMap.off('node_dblclick', this.close)
+    this.mindMap.off('node_active', this.onNodeActive)
+    this.mindMap.off('scale', this.onScale)
+  },
+  methods: {
+    show(node, imgNode) {
+      this.node = node
+      this.imgPlacement = node.getStyle('imgPlacement')
+      this.imgNode = imgNode
+      this.showImgPlacementToolbar = true
+      this.$nextTick(() => {
+        this.updatePos()
+      })
+    },
+
+    close() {
+      this.showImgPlacementToolbar = false
+      this.node = null
+      this.imgPlacement = ''
+      this.imgNode = null
+      this.style.left = 0
+      this.style.top = 0
+    },
+
+    updatePos() {
+      if (!this.imgNode) return
+      const {
+        width,
+        height
+      } = this.$refs.nodeImgPlacementToolbar.getBoundingClientRect()
+      const { width: imgWidth, x, y } = this.imgNode.rbox()
+      this.style.left = x + imgWidth / 2 - width / 2 + 'px'
+      this.style.top = y - height - 5 + 'px'
+    },
+
+    onScale() {
+      this.updatePos()
+    },
+
+    onNodeActive(node) {
+      if (node === this.node) {
+        return
+      }
+      this.close()
+    },
+
+    updateImgPlacement(item) {
+      this.imgPlacement = item
+      this.node.setStyle('imgPlacement', item)
+      this.close()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.nodeImgPlacementToolbar {
+  position: fixed;
+  z-index: 2000;
+  height: 40px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 8px;
+  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+
+  .imgPlacementItem {
+    width: 30px;
+    height: 30px;
+    margin: 5px;
+    cursor: pointer;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: rgb(237, 237, 237);
+    }
+
+    &.icon_top {
+      transform: rotateZ(90deg);
+    }
+
+    &.icon_bottom {
+      transform: rotateZ(-90deg);
+    }
+
+    &.icon_right {
+      transform: rotateZ(180deg);
+    }
+
+    &.selected {
+      background-color: rgb(237, 237, 237);
+    }
+  }
+}
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="noteContentViewer"
+    class="noteContentViewer customScrollbar"
     ref="noteContentViewer"
     :style="{
       left: this.left + 'px',
@@ -124,22 +124,5 @@ export default {
   overflow-y: auto;
   box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
   border: 1px solid rgba(0, 0, 0, 0.06);
-
-  &::-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;
-  }
 }
 </style>

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

@@ -142,7 +142,7 @@ export default {
           ? nodeRichTextToTextWithWrap(root.data.text)
           : root.data.text
         text = htmlEscape(text)
-        text = text.replaceAll(/\n/g, '<br>')
+        text = text.replace(/\n/g, '<br>')
         root.textCache = text // 保存一份修改前的数据，用于对比是否修改了
         root.label = text
         root.uid = root.data.uid
@@ -212,7 +212,7 @@ export default {
       if (!targetNode) return
       this.notHandleDataChange = true
       if (richText) {
-        targetNode.setText(textToNodeRichTextWithWrap(text), true, true)
+        targetNode.setText(textToNodeRichTextWithWrap(text), true)
       } else {
         targetNode.setText(text)
       }

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

@@ -5,10 +5,26 @@
     ref="outlineEditContainer"
     v-if="isOutlineEdit"
   >
-    <div class="closeBtn" @click="onClose">
-      <span class="icon iconfont iconguanbi"></span>
+    <div class="btnList">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :content="$t('outline.print')"
+        placement="top"
+      >
+        <div class="btn" @click="onPrint">
+          <span class="icon iconfont iconprinting"></span>
+        </div>
+      </el-tooltip>
+      <div class="btn" @click="onClose">
+        <span class="icon iconfont iconguanbi"></span>
+      </div>
     </div>
-    <div class="outlineEditBox" ref="outlineEditBox">
+    <div
+      class="outlineEditBox"
+      id="fullScreenOutlineEditBox"
+      ref="outlineEditBox"
+    >
       <div class="outlineEdit">
         <el-tree
           ref="tree"
@@ -58,6 +74,7 @@ import {
   handleInputPasteText
 } from 'simple-mind-map/src/utils'
 import { storeData } from '@/api'
+import { printOutline } from '@/utils'
 
 // 大纲侧边栏
 export default {
@@ -111,7 +128,7 @@ export default {
           ? nodeRichTextToTextWithWrap(root.data.text)
           : root.data.text
         text = htmlEscape(text)
-        text = text.replaceAll(/\n/g, '<br>')
+        text = text.replace(/\n/g, '<br>')
         root.textCache = text // 保存一份修改前的数据，用于对比是否修改了
         root.label = text
         root.uid = root.data.uid
@@ -149,7 +166,6 @@ export default {
       const richText = node.data.data.richText
       const text = richText ? e.target.innerHTML : e.target.innerText
       node.data.data.text = richText ? textToNodeRichTextWithWrap(text) : text
-      if (richText) node.data.data.resetRichText = true
       node.data.textCache = e.target.innerHTML
       this.save()
     },
@@ -170,9 +186,6 @@ export default {
         },
         children: []
       }
-      if (richText) {
-        data.data.resetRichText = true
-      }
       if (e.keyCode === 13 && !e.shiftKey) {
         e.preventDefault()
         if (node.data.root) {
@@ -229,6 +242,11 @@ export default {
       return Math.random()
     },
 
+    // 打印
+    onPrint() {
+      printOutline(this.$refs.outlineEditBox)
+    },
+
     // 关闭
     onClose() {
       this.setIsOutlineEdit(false)
@@ -278,28 +296,36 @@ export default {
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 9999;
+  z-index: 1999;
   background-color: #fff;
   overflow: hidden;
 
   &.isDark {
     background-color: #262a2e;
 
-    .closeBtn {
-      .icon {
-        color: #fff;
+    .btnList {
+      .btn {
+        .icon {
+          color: #fff;
+        }
       }
     }
   }
 
-  .closeBtn {
+  .btnList {
     position: absolute;
     right: 40px;
     top: 20px;
-    cursor: pointer;
+    display: flex;
+    align-items: center;
 
-    .icon {
-      font-size: 28px;
+    .btn {
+      cursor: pointer;
+      margin-left: 12px;
+
+      .icon {
+        font-size: 28px;
+      }
     }
   }
 

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

@@ -1,16 +1,36 @@
 <template>
   <Sidebar ref="sidebar" :title="$t('outline.title')">
-    <div
-      class="changeBtn"
-      :class="{ isDark: isDark }"
-      @click="onChangeToOutlineEdit"
-    >
-      <span class="icon iconfont iconquanping1"></span>
+    <div class="btnList">
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :content="$t('outline.print')"
+        placement="top"
+      >
+        <div class="btn" @click="onPrint">
+          <span class="icon iconfont iconprinting"></span>
+        </div>
+      </el-tooltip>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        :content="$t('outline.fullscreen')"
+        placement="top"
+      >
+        <div
+          class="btn"
+          :class="{ isDark: isDark }"
+          @click="onChangeToOutlineEdit"
+        >
+          <span class="icon iconfont iconquanping1"></span>
+        </div>
+      </el-tooltip>
     </div>
     <Outline
       :mindMap="mindMap"
       v-if="activeSidebar === 'outline'"
       @scrollTo="onScrollTo"
+      ref="outlineRef"
     ></Outline>
   </Sidebar>
 </template>
@@ -19,6 +39,7 @@
 import Sidebar from './Sidebar'
 import { mapState, mapMutations } from 'vuex'
 import Outline from './Outline.vue'
+import { printOutline } from '@/utils'
 
 // 大纲侧边栏
 export default {
@@ -62,20 +83,31 @@ export default {
       if (y > top + height) {
         container.scrollTo(0, y - height / 2)
       }
+    },
+
+    // 打印
+    onPrint() {
+      printOutline(this.$refs.outlineRef.$el)
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-.changeBtn {
+.btnList {
   position: absolute;
   right: 50px;
   top: 12px;
-  cursor: pointer;
+  display: flex;
+  align-items: center;
 
-  &.isDark {
-    color: #fff;
+  .btn {
+    cursor: pointer;
+    margin-left: 12px;
+
+    &.isDark {
+      color: #fff;
+    }
   }
 }
 </style>

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

@@ -110,6 +110,25 @@
       </el-popover>
     </el-tooltip>
 
+    <el-tooltip :content="$t('richTextToolbar.textAlign')" placement="top">
+      <el-popover placement="bottom" trigger="hover">
+        <div class="fontOptionsList" :class="{ isDark: isDark }">
+          <div
+            class="fontOptionItem"
+            v-for="item in alignList"
+            :key="item.value"
+            :class="{ active: formatInfo.align === item.value }"
+            @click="changeTextAlign(item.value)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="btn" slot="reference">
+          <span class="icon iconfont iconjuzhongduiqi"></span>
+        </div>
+      </el-popover>
+    </el-tooltip>
+
     <el-tooltip :content="$t('richTextToolbar.removeFormat')" placement="top">
       <div class="btn" @click="removeFormat">
         <span class="icon iconfont iconqingchu"></span>
@@ -119,7 +138,7 @@
 </template>
 
 <script>
-import { fontFamilyList, fontSizeList } from '@/config'
+import { fontFamilyList, fontSizeList, alignList } from '@/config'
 import Color from './Color'
 import { mapState } from 'vuex'
 
@@ -153,6 +172,10 @@ export default {
 
     fontFamilyList() {
       return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
+    },
+
+    alignList() {
+      return alignList[this.$i18n.locale] || alignList.zh
     }
   },
   created() {
@@ -230,6 +253,13 @@ export default {
       })
     },
 
+    changeTextAlign(align) {
+      this.formatInfo.align = align
+      this.mindMap.richText.formatText({
+        align
+      })
+    },
+
     removeFormat() {
       this.mindMap.richText.removeFormat()
     }

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

@@ -125,6 +125,7 @@ export default {
     )
     this.mindMap.keyCommand.addShortcut('Control+f', this.showSearch)
     window.addEventListener('resize', this.setSearchResultListHeight)
+    this.$bus.$on('setData', this.close)
   },
   mounted() {
     this.setSearchResultListHeight()
@@ -141,6 +142,7 @@ export default {
     )
     this.mindMap.keyCommand.removeShortcut('Control+f', this.showSearch)
     window.removeEventListener('resize', this.setSearchResultListHeight)
+    this.$bus.$off('setData', this.close)
   },
   methods: {
     isUndef,

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

@@ -1,8 +1,7 @@
 <template>
   <Sidebar ref="sidebar" :title="$t('setting.title')">
-    <div class="sidebarContent" :class="{ isDark: isDark }" v-if="data">
+    <div class="sidebarContent customScrollbar" :class="{ isDark: isDark }" v-if="data">
       <!-- 水印 -->
-      <div class="title noTop">{{ $t('setting.watermark') }}</div>
       <div class="row">
         <!-- 是否显示水印 -->
         <div class="rowItem">
@@ -214,11 +213,35 @@
         <div class="rowItem">
           <el-checkbox
             v-model="config.enableAutoEnterTextEditWhenKeydown"
-            @change="updateOtherConfig('enableAutoEnterTextEditWhenKeydown', $event)"
+            @change="
+              updateOtherConfig('enableAutoEnterTextEditWhenKeydown', $event)
+            "
             >{{ $t('setting.enableAutoEnterTextEditWhenKeydown') }}</el-checkbox
           >
         </div>
       </div>
+      <!-- 是否开启文件拖入页面导入的方式 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="localConfigs.enableDragImport"
+            @change="updateLocalConfig('enableDragImport', $event)"
+            >{{ $t('setting.enableDragImport') }}</el-checkbox
+          >
+        </div>
+      </div>
+      <!-- 节点连线样式是否允许继承祖先的连线样式 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="config.enableInheritAncestorLineStyle"
+            @change="
+              updateOtherConfig('enableInheritAncestorLineStyle', $event)
+            "
+            >{{ $t('setting.enableInheritAncestorLineStyle') }}</el-checkbox
+          >
+        </div>
+      </div>
       <!-- 是否开启手绘风格 -->
       <div class="row" v-if="supportHandDrawnLikeStyle">
         <div class="rowItem">
@@ -310,30 +333,34 @@
           </el-select>
         </div>
       </div>
-      <!-- 标签显示的位置 -->
+      <!-- 图片和文本内容的间距 -->
       <div class="row">
         <div class="rowItem">
-          <span class="name">{{ $t('setting.tagPosition') }}</span>
-          <el-select
-            size="mini"
-            style="width: 120px"
-            v-model="config.tagPosition"
-            placeholder=""
+          <span class="name">{{ $t('setting.imgTextMargin') }}</span>
+          <el-slider
+            style="width: 150px"
+            v-model="config.imgTextMargin"
             @change="
               value => {
-                updateOtherConfig('tagPosition', value)
+                updateOtherConfig('imgTextMargin', value)
               }
             "
-          >
-            <el-option
-              :label="$t('setting.tagPositionRight')"
-              value="right"
-            ></el-option>
-            <el-option
-              :label="$t('setting.tagPositionBottom')"
-              value="bottom"
-            ></el-option>
-          </el-select>
+          ></el-slider>
+        </div>
+      </div>
+      <!-- 文本各内容的间距 -->
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('setting.textContentMargin') }}</span>
+          <el-slider
+            style="width: 150px"
+            v-model="config.textContentMargin"
+            @change="
+              value => {
+                updateOtherConfig('textContentMargin', value)
+              }
+            "
+          ></el-slider>
         </div>
       </div>
     </div>
@@ -368,10 +395,12 @@ export default {
         mousewheelAction: 'zoom',
         mousewheelZoomActionReverse: false,
         createNewNodeBehavior: 'default',
-        tagPosition: 'right',
         openRealtimeRenderOnNodeTextEdit: true,
         alwaysShowExpandBtn: false,
-        enableAutoEnterTextEditWhenKeydown: true
+        enableAutoEnterTextEditWhenKeydown: true,
+        imgTextMargin: 0,
+        textContentMargin: 0,
+        enableInheritAncestorLineStyle: false
       },
       watermarkConfig: {
         show: false,
@@ -390,7 +419,8 @@ export default {
       enableNodeRichText: true,
       localConfigs: {
         isShowScrollbar: false,
-        isUseHandDrawnLikeStyle: false
+        isUseHandDrawnLikeStyle: false,
+        enableDragImport: false
       }
     }
   },
@@ -415,8 +445,11 @@ export default {
   },
   created() {
     this.initLoacalConfig()
+    this.$bus.$on('toggleOpenNodeRichText', this.onToggleOpenNodeRichText)
+  },
+  beforeDestroy() {
+    this.$bus.$off('toggleOpenNodeRichText', this.onToggleOpenNodeRichText)
   },
-  beforeDestroy() {},
   methods: {
     ...mapMutations(['setLocalConfig']),
 
@@ -432,7 +465,7 @@ export default {
       this.enableNodeRichText = this.localConfig.openNodeRichText
       this.mousewheelAction = this.localConfig.mousewheelAction
       this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
-      ;['isShowScrollbar', 'isUseHandDrawnLikeStyle'].forEach(key => {
+      Object.keys(this.localConfigs).forEach(key => {
         this.localConfigs[key] = this.localConfig[key]
       })
     },
@@ -459,7 +492,14 @@ export default {
       storeConfig({
         config: this.data.config
       })
-      if (['tagPosition', 'alwaysShowExpandBtn'].includes(key)) {
+      if (
+        [
+          'alwaysShowExpandBtn',
+          'imgTextMargin',
+          'textContentMargin',
+          'enableInheritAncestorLineStyle'
+        ].includes(key)
+      ) {
         this.mindMap.reRender()
       }
     },
@@ -496,10 +536,33 @@ export default {
 
     // 切换是否开启节点富文本编辑
     enableNodeRichTextChange(e) {
-      this.mindMap.renderer.textEdit.hideEditTextBox()
+      this.$confirm(
+        this.$t('setting.changeRichTextTip'),
+        e
+          ? this.$t('setting.changeRichTextTip2')
+          : this.$t('setting.changeRichTextTip3'),
+        {
+          confirmButtonText: this.$t('setting.confirm'),
+          cancelButtonText: this.$t('setting.cancel'),
+          type: 'warning'
+        }
+      )
+        .then(() => {
+          this.mindMap.renderer.textEdit.hideEditTextBox()
+          this.setLocalConfig({
+            openNodeRichText: e
+          })
+        })
+        .catch(() => {
+          this.enableNodeRichText = !this.enableNodeRichText
+        })
+    },
+
+    onToggleOpenNodeRichText(val) {
       this.setLocalConfig({
-        openNodeRichText: e
+        openNodeRichText: val
       })
+      this.enableNodeRichText = val
     },
 
     // 本地配置

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

@@ -9,7 +9,7 @@
     <div class="sidebarHeader" v-if="title">
       {{ title }}
     </div>
-    <div class="sidebarContent" ref="sidebarContent">
+    <div class="sidebarContent customScrollbar" ref="sidebarContent">
       <slot></slot>
     </div>
   </div>

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

@@ -5,12 +5,12 @@
       :class="{ isDark: isDark }"
       v-if="activeNodes.length > 0"
     >
-      <div class="sidebarContent">
+      <div class="sidebarContent customScrollbar">
         <!-- 文字 -->
         <div class="title noTop">{{ $t('style.text') }}</div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">{{ $t('style.fontFamily') }}</span>
+            <!-- <span class="name">{{ $t('style.fontFamily') }}</span> -->
             <el-select
               size="mini"
               style="width: 100px"
@@ -29,10 +29,10 @@
             </el-select>
           </div>
           <div class="rowItem">
-            <span class="name">{{ $t('style.fontSize') }}</span>
+            <!-- <span class="name">{{ $t('style.fontSize') }}</span> -->
             <el-select
               size="mini"
-              style="width: 80px"
+              style="width: 60px"
               v-model="style.fontSize"
               placeholder=""
               @change="update('fontSize')"
@@ -47,6 +47,23 @@
               </el-option>
             </el-select>
           </div>
+          <div class="rowItem">
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.textAlign"
+              placeholder=""
+              @change="update('textAlign')"
+            >
+              <el-option
+                v-for="item in alignList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
         </div>
         <div class="row">
           <div class="btnGroup">
@@ -480,6 +497,50 @@
             ></el-slider>
           </div>
         </div>
+        <!-- 节点图片布局 -->
+        <div class="title noTop">{{ $t('style.img') }}</div>
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('style.placement') }}</span>
+            <el-radio-group
+              v-model="style.imgPlacement"
+              size="mini"
+              @change="update('imgPlacement')"
+            >
+              <el-radio-button label="top">{{
+                $t('style.top')
+              }}</el-radio-button>
+              <el-radio-button label="bottom">{{
+                $t('style.bottom')
+              }}</el-radio-button>
+              <el-radio-button label="left">{{
+                $t('style.left')
+              }}</el-radio-button>
+              <el-radio-button label="right">{{
+                $t('style.right')
+              }}</el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+        <!-- 节点标签布局 -->
+        <div class="title noTop">{{ $t('style.tag') }}</div>
+        <div class="row">
+          <div class="rowItem">
+            <span class="name">{{ $t('style.placement') }}</span>
+            <el-radio-group
+              v-model="style.tagPlacement"
+              size="mini"
+              @change="update('tagPlacement')"
+            >
+              <el-radio-button label="right">{{
+                $t('style.right')
+              }}</el-radio-button>
+              <el-radio-button label="bottom">{{
+                $t('style.bottom')
+              }}</el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
       </div>
     </div>
     <div class="tipBox" v-else>
@@ -500,7 +561,8 @@ import {
   borderRadiusList,
   shapeList,
   shapeListMap,
-  linearGradientDirList
+  linearGradientDirList,
+  alignList
 } from '@/config'
 import { mapState } from 'vuex'
 
@@ -546,7 +608,10 @@ export default {
         linearGradientDir: '',
         lineFlow: false,
         lineFlowForward: true,
-        lineFlowDuration: 1
+        lineFlowDuration: 1,
+        textAlign: '',
+        imgPlacement: '',
+        tagPlacement: ''
       }
     }
   },
@@ -572,6 +637,9 @@ export default {
       return (
         linearGradientDirList[this.$i18n.locale] || linearGradientDirList.zh
       )
+    },
+    alignList() {
+      return alignList[this.$i18n.locale] || alignList.zh
     }
   },
   watch: {

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

@@ -215,7 +215,8 @@ export default {
   computed: {
     ...mapState({
       isDark: state => state.localConfig.isDark,
-      isHandleLocalFile: state => state.isHandleLocalFile
+      isHandleLocalFile: state => state.isHandleLocalFile,
+      openNodeRichText: state => state.localConfig.openNodeRichText
     })
   },
   watch: {
@@ -223,6 +224,24 @@ export default {
       if (!val) {
         Notification.closeAll()
       }
+    },
+    openNodeRichText: {
+      immediate: true,
+      handler(val) {
+        const index = this.list.findIndex(item => {
+          return item === 'formula'
+        })
+        if (val) {
+          if (index === -1) {
+            this.list.splice(13, 0, 'formula')
+          }
+        } else {
+          if (index !== -1) {
+            this.list.splice(index, 1)
+          }
+        }
+        this.computeToolbarShow()
+      }
     }
   },
   created() {
@@ -246,6 +265,7 @@ export default {
   methods: {
     // 计算工具按钮如何显示
     computeToolbarShow() {
+      if (!this.$refs.toolbarRef) return
       const windowWidth = window.innerWidth - 40
       const all = [...this.list]
       let index = 1

web/src/utils/index.js

@@ -74,3 +74,25 @@ export const setImgToClipboard = img => {
     navigator.clipboard.write(data)
   }
 }
+
+// 打印大纲
+export const printOutline = el => {
+  const printContent = el.outerHTML
+  const iframe = document.createElement('iframe')
+  iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;')
+  document.body.appendChild(iframe)
+  const iframeDoc = iframe.contentWindow.document
+  // 将当前页面的所有样式添加到iframe中
+  const styleList = document.querySelectorAll('style')
+  Array.from(styleList).forEach(el => {
+    iframeDoc.write(el.outerHTML)
+  })
+  // 设置打印展示方式 - 纵向展示
+  iframeDoc.write('<style media="print">@page {size: portrait;}</style>')
+  // 写入内容
+  iframeDoc.write('<div>' + printContent + '</div>')
+  setTimeout(function() {
+    iframe.contentWindow?.print()
+    document.body.removeChild(iframe)
+  }, 500)
+}