- 大佬git代码地址：GitHub - wanglin2/mind-map: 一个还算强大的Web思维导图。A relatively powerful web mind map.
- 开发API文档：思绪思维导图
个人使用simpleMindMap绘制脑图一点经验
注：以下是个人实际项目中的部分代码，需要注意的是里面的一些样式组件使用的是我们公司自己封装的样式控件【WinDesign】，在外网环境无法安装，各位可以根据实际需要用【Element - The world's most popular Vue UI framework】进行替换，使用方式相同。
本人也是第一次使用simpleMindMap，有bug的地方希望能够留言指正，谢谢各位大佬！！！
simpleMindMap的数据结构是：
{
data: {
// 节点文本
text: '根节点',
// 图片
image: 'xxx.jpg',
imageTitle: '图片名称',
imageSize: {
width: 1152,
height: 1152
},
// 图标
icon: ['priority_1'],
// 标签
tag: ['标签1', '标签2'],
// 链接
hyperlink: 'http://lxqnsys.com/',
hyperlinkTitle: '理想青年实验室',
// 备注内容
note: '理想青年实验室\n一个有意思的角落',
// 概要
generalization: {
text: '概要的内容'
},
// 节点是否展开
expand: true,
},
children: []// 子节点
}1、安装：
npm i simple-mind-map
2、我在utils文件夹中创建了一个simpleMindMap文件夹，里面存放一些封装的方法
2.1、simpleMindMap/index.js：
// 脑图SimpleMindMap开发文档地址：https://wanglin2.github.io/mind-map/#/doc/zh/start/使用
import MindMap from "simple-mind-map";
import Export from 'simple-mind-map/src/plugins/Export.js'
import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
MindMap.usePlugin(ExportXMind)
MindMap.usePlugin(Export)
MindMap.usePlugin(ExportPDF)
import { cloneDeep } from 'lodash'
import themeConfig from "./themeConfig.js"
import iconList from "./iconList.js"
let mindMap = null;
let wnMindMap = {
// 初始化脑图
/**
* @param id 脑图容器
* @param data 数据结构【树状结构】
*/
initMind: function (id, data) {
return mindMap = new MindMap({
el: document.getElementById(id),
data: data,
layout: 'logicalStructure', // 布局类型--logicalStructure（逻辑结构图-默认）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图）
// fit: true,
readonly: false, // 只读模式
iconList: iconList, // 注册图标
// theme: 'classic2', // 主题
themeConfig: themeConfig, // 主题配置，会和所选择的主题进行合并
initRootNodePosition: ['30%', '50%'], // 初始根节点的位置，可传一个数组，默认为['center', 'center']
textAutoWrapWidth: 600, // 节点内每行文本达到该宽度后自动换行
defaultInsertSecondLevelNodeText: '二级节点 ', // 默认插入的二级节点的文字
defaultInsertBelowSecondLevelNodeText: '分支主题', // 默认插入的二级以下节点的文字
defaultGeneralizationText: '概要', // 插入概要的默认文本
// 自定义备注内容
customNoteContentShow: {
show: (content, left, top) => {
// 在这里显示你的自定义弹窗
// content表示你插入的备注的内容，left和top时弹窗应该显示的位置，你需要将你的弹窗元素设置成fixed定位
let isCustomNoteContent = document.getElementById('isCustomNoteContent')
isCustomNoteContent.style.position = 'fixed'
isCustomNoteContent.style.left = `${left}px`
isCustomNoteContent.style.top = `${top}px`
isCustomNoteContent.innerHTML = `${content}`
isCustomNoteContent.style.display = 'block'
return isCustomNoteContent
},
hide: () => {
// 在这里隐藏你的自定义弹窗
// 你也可以选择不在鼠标移出备注图标时隐藏弹窗，比如可以在画布被点击时隐藏
}
},
})
},
// 插入子节点
addInsertChildNode: function () {
mindMap.execCommand('INSERT_CHILD_NODE')
},
// 插入多个子节点
/**
*
* @param childList 要插入的子节点数据的数组，必传。
*childList: [
{
data: {
text: '自定义节点1'
}
}
]
*/
addMulitChildNode: function (childList) {
mindMap.execCommand('INSERT_MULTI_CHILD_NODE', [], childList)
},
// 添加兄弟节点
addPeerNode: function () {
mindMap.execCommand('INSERT_NODE')
},
/**
* 插入多个同级节点
* @param nodeList 插入的同级节点数据的数组，必传。
*nodeList: [
{
data: {
text: '自定义节点1'
}
}
]
*/
addMorePeerNode: function (nodeList) {
mindMap.execCommand('INSERT_NODE', [], nodeList)
},
// 插入父节点
addParentNode: function () {
mindMap.execCommand('INSERT_PARENT_NODE')
},
// 删除节点---会删除当前激活的所有节点
removeNode: function () {
mindMap.execCommand('REMOVE_NODE')
},
// 仅删除当前节点---仅删除激活的节点，子节点不会被删除
removeCurrentNode: function () {
mindMap.execCommand('REMOVE_CURRENT_NODE')
},
// 前进一次
forwardNode: function () {
mindMap.execCommand('FORWARD')
},
// 后退一次
backNode: function () {
mindMap.execCommand('BACK')
},
/**
* 添加图标
* @param {*传入数据} data
* data: {
* activeNodes: '', // 当前选中的节点数组
type: '', // 图标类型
name: '', // 图标名称
NodeIconList: [], // 图标列表
currentIconList: [] // 当前节点icon列表
}
*/
addIconNode: function (data) {
// 获取当前选中节点的图标
// console.log(data, '--------------------')
let key = data.type + '_' + data.name
let NodeIconListNew = []
let currentIconList = cloneDeep(data.currentIconList) || []
// 检查当前节点是否存在该图标
let index = currentIconList.findIndex(item => {
return item === key
})
// 存在则删除icon
if (index !== -1) {
currentIconList.splice(index, 1)
} else {
// 否则判断当前图标是否和要插入的图标是一个组的
let typeIndex = currentIconList.findIndex(item => {
return item.split('_')[0] === data.type
})
// 是一个组的则进行替换
if (typeIndex !== -1) {
currentIconList.splice(typeIndex, 1, key)
} else {
// 否则添加icon
currentIconList.push(key)
}
}
data.activeNodes.forEach(node => {
node.setIcon([...currentIconList])
})
NodeIconListNew = this.isCheckIcon([...currentIconList], this.removeCheckIcon(data.NodeIconList), data.type, data.name)
return {
NodeIconListNew: NodeIconListNew,
currentIconList: [...currentIconList]
}
},
/**
* 图标列表某个图标是否选中
* @param {*当前节点icon列表} currentIconList
* @param {*图标列表} NodeIconList
* @param {*图标类型} type
* @param {*图标名称} name
*/
isCheckIcon: function (currentIconList, NodeIconList, type, name) {
let NodeIconListNew = cloneDeep(NodeIconList)
if (currentIconList.length > 0) {
currentIconList.forEach(item => {
NodeIconListNew.forEach(cItem => {
if (item.split('_')[0] === cItem.type) {
cItem.list.forEach(fItem => {
if (item.split('_')[1] === fItem.name) {
fItem.isChecked = true
} else {
fItem.isChecked = false
}
})
}
})
})
} else {
NodeIconListNew = cloneDeep(this.removeCheckIcon(NodeIconListNew))
}
return NodeIconListNew
},
/**
* 消除全部图标的选中状态
* @param {*图标列表} NodeIconList
* @returns
*/
removeCheckIcon: function (NodeIconList) {
let NodeIconListNew = cloneDeep(NodeIconList)
NodeIconListNew.forEach(item => {
item.list.forEach(cItem => {
cItem.isChecked = false
})
})
return NodeIconListNew
},
/**
* 获取节点当前位置信息【获取节点的尺寸和位置信息，宽高是应用了缩放效果后的实际宽高，位置信息相对于画布。】
* @param {*当前节点} node
*/
getNodePositionXY: function (node) {
return node.getRectInSvg()
},
/**
* 设置画布缩放
* @param {*缩放比例，必传} scale
* @param {*以画布指定位置进行缩放，默认为画布中心点} cx
* @param {*以画布指定位置进行缩放，默认为画布中心点} cy
*/
setScale: function (scale, cx, cy) {
mindMap.view.setScale(scale, cx, cy)
},
/**
* 插入超链接
* @param {*当前节点} node
* @param {*链接地址} url
* @param {*链接名称} name
*/
setHyperlink: function (node, url, name) {
node.setHyperlink(url, name)
},
/**
* 插入概要
* @param {*概要数据} data
*默认： { text: '概要' }
*/
addGeneralization: function (data) {
mindMap.execCommand('ADD_GENERALIZATION', data)
},
// 容器尺寸变化后，需要调用该方法进行适应【容器内容没有自适应】
mindMapResize: function () {
mindMap.resize()
},
// 缩放思维导图至适应画布
mindMapFit: function () {
mindMap.view.fit()
},
/**
* 插入备注
* @param {*当前节点} node
* @param {*备注信息} data
*/
setNote: function (node, data) {
node.setNote(data)
},
/**
* 获取节点的尺寸和位置信息，宽高是应用了缩放效果后的实际宽高，位置是相对于浏览器窗口左上角的位置。
* @param {*当前节点} node
* @returns
*/
getRect: function (node) {
return node.getRect()
},
/**
* 导出为png图片
* @param {* 导出文件名称} fileName
*/
mindMapExportPng: function (fileName) {
mindMap.doExport.png().then((data) => {
let a = document.createElement('a')
a.href = data // .png、.svg、.pdf、.md、.json、.smm
a.download = fileName + '.png'
a.click()
})
},
// 导出svg
mindMapExportSvg: function (fileName) {
mindMap.doExport.svg('', false, `* { margin: 0; padding: 0; box-sizing: border-box; }`).then((data) => {
let a = document.createElement('a')
a.href = data // .png、.svg、.pdf、.md、.json、.smm
a.download = fileName + '.svg'
a.click()
})
},
// 导出pdf
mindMapExportPDF: function (fileName) {
mindMap.doExport.pdf().then((data) => {
let a = document.createElement('a')
a.href = data // .png、.svg、.pdf、.md、.json、.smm
a.download = fileName + '.pdf'
a.click()
})
},
// 导出xmind
mindMapExportXmind: function (fileName) {
mindMap.doExport.xmind().then((data) => {
let a = document.createElement('a')
a.href = data // .png、.svg、.pdf、.md、.json、.smm
a.download = fileName + '.xmind'
a.click()
})
},
/**
* 添加标签
* @param {* 当前节点} node
* @param {* 标签列表} tagArry
*/
setTag: function (node, tagArry) {
node.setTag(tagArry)
},
// 销毁导图
mindMapDestroy: function () {
mindMap.destroy()
},
/**
* 获取导图数据
* @param {* Boolean, 默认为false, 即获取的数据只包括节点树, 如果传true则会包含主题、布局、视图等数据 } withConfig
*/
mindMapGetData: function (withConfig = false) {
let mindData = mindMap.getData(withConfig)
console.log('导图数据==>', JSON.parse(JSON.stringify(mindData)))
return mindData
},
/**
* 修改节点内容
* @param {* 当前节点} node
* @param {* 修改的内容} text
*/
setText: function (node, text) {
node.setText(text)
},
/**
* 设置脑图主题
* @param {* 主题} theme
*/
setTheme: function (theme) {
mindMap.setTheme(theme)
}
}
export default wnMindMap2.2、simpleMindMap/iconList.js【自定义图标列表】：
let iconList = [
{
"name": "优先级图标",
"type": "priority",
"list": [
{
"name": "1",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512.042667 1024C229.248 1024 0 794.794667 0 511.957333 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 511.957333 1024 794.794667 794.752 1024 512.042667 1024z\" fill=\"#E93B30\"></path><path d=\"M580.309333 256h-75.52c-10.666667 29.824-30.165333 55.765333-58.709333 78.165333-28.416 22.314667-54.869333 37.418667-79.146667 45.397334v84.608a320 320 0 0 0 120.234667-70.698667v352.085333H580.266667V256z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "2",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M511.957333 1024C229.248 1024 0 794.752 0 512S229.248 0 511.957333 0C794.752 0 1024 229.248 1024 512s-229.248 512-512.042667 512z\" fill=\"#FA8D2E\"></path><path d=\"M667.946667 658.602667h-185.301334c4.864-8.533333 11.178667-17.066667 19.072-25.984 7.808-8.874667 26.453333-26.837333 55.936-53.888 29.525333-27.008 49.877333-47.786667 61.226667-62.165334 16.981333-21.717333 29.44-42.453333 37.290667-62.293333 7.808-19.84 11.776-40.746667 11.776-62.677333 0-38.570667-13.738667-70.741333-41.088-96.725334C599.466667 268.928 561.706667 256 513.834667 256c-43.690667 0-80.128 11.136-109.354667 33.578667-29.098667 22.4-46.506667 59.306667-52.010667 110.805333l93.184 9.301333c1.792-27.349333 8.405333-46.890667 19.754667-58.624 11.434667-11.776 26.837333-17.664 46.165333-17.664 19.541333 0 34.858667 5.589333 45.909334 16.768 11.136 11.264 16.682667 27.221333 16.682666 48.042667 0 18.858667-6.4 37.930667-19.242666 57.258667-9.472 14.037333-35.157333 40.533333-77.098667 79.872-52.096 48.554667-87.04 87.509333-104.704 116.821333A226.688 226.688 0 0 0 341.333333 745.429333h326.613334v-86.826666z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "3",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z\" fill=\"#2E66FA\"></path><path d=\"M627.754667 731.733333c-29.354667 25.088-66.901333 37.632-112.725334 37.632-44.928 0-81.792-11.52-110.592-34.773333-33.066667-26.538667-49.877333-64.469333-50.304-114.133333h92.16c0.426667 21.76 7.552 38.314667 21.333334 49.664 12.288 10.88 28.117333 16.341333 47.402666 16.341333 20.309333 0 36.778667-6.101333 49.322667-18.432 12.544-12.330667 18.773333-29.568 18.773333-51.797333 0-21.290667-6.229333-38.186667-18.773333-50.773334-12.544-12.501333-29.866667-18.773333-52.138667-18.773333h-13.525333v-80.042667H512c42.112 0 63.274667-21.034667 63.274667-63.146666 0-20.309333-5.888-36.096-17.706667-47.445334a60.757333 60.757333 0 0 0-43.818667-17.066666c-17.493333 0-32 5.504-43.434666 16.298666-11.562667 10.88-17.792 25.728-18.773334 44.714667H359.68c0.981333-43.946667 16.042667-78.976 45.397333-104.96 29.354667-25.941333 65.706667-39.04 109.226667-39.04 44.928 0 81.792 13.525333 110.592 40.490667 28.8 26.922667 43.306667 61.610667 43.306667 104.149333 0 48.213333-19.413333 82.688-58.154667 103.552 43.52 23.125333 65.28 61.44 65.28 114.858667 0 48.128-15.957333 85.76-47.573333 112.682666z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "4",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512.042667 1024C229.248 1024 0 794.794667 0 512.042667 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 512.042667 1024 794.794667 794.752 1024 512.042667 1024z\" fill=\"#6D768D\"></path><path d=\"M600.96 256v309.802667h60.117333v81.536h-60.16v98.218666h-90.154666v-98.218666H311.466667v-81.237334L522.666667 256h78.293333zM510.72 399.104l-112.042667 166.698667h112.042667V399.104z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "5",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512.042667 1024C229.248 1024 0 794.794667 0 512.042667 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 512.042667 1024 794.794667 794.752 1024 512.042667 1024z\" fill=\"#6D768D\"></path><path d=\"M470.912 343.552h175.786667V256H400.256l-47.786667 253.952 75.434667 10.837333c21.205333-23.552 45.269333-35.413333 72.021333-35.413333 21.546667 0 38.997333 7.509333 52.437334 22.4 13.312 15.018667 20.053333 37.418667 20.053333 67.328 0 31.872-6.741333 55.765333-20.181333 71.552-13.397333 15.872-29.866667 23.765333-49.237334 23.765333-17.066667 0-32.085333-6.186667-45.013333-18.432-13.013333-12.373333-20.821333-29.013333-23.466667-50.133333L341.333333 611.498667c5.546667 40.874667 22.485333 73.429333 50.730667 97.621333 28.330667 24.32 64.938667 36.437333 109.866667 36.437333 56.149333 0 100.053333-21.546667 131.754666-64.554666a176.64 176.64 0 0 0 34.816-107.52c0-48.042667-14.378667-87.210667-43.221333-117.333334-28.8-30.208-63.957333-45.312-105.514667-45.312-21.674667 0-42.922667 5.248-63.829333 15.616l14.976-82.901333z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "6",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 1024C229.248 1024 0 794.794667 0 512.042667 0 229.205333 229.248 0 512 0c282.88 0 512 229.205333 512 512.042667C1024 794.794667 794.88 1024 512 1024z\" fill=\"#6D768D\"></path><path d=\"M519.210667 256c36.992 0 67.626667 10.368 91.776 31.189333 24.192 20.821333 39.68 51.029333 46.293333 90.709334l-90.197333 9.984c-2.176-18.56-7.978667-32.298667-17.28-41.173334-9.258667-8.874667-21.418667-13.226667-36.224-13.226666-19.754667 0-36.437333 8.789333-50.048 26.453333-13.696 17.664-22.314667 54.613333-25.856 110.549333 23.296-27.52 52.138667-41.258667 86.656-41.258666 38.997333 0 72.362667 14.805333 100.181333 44.544 27.733333 29.696 41.685333 68.010667 41.685333 114.858666 0 49.877333-14.634667 89.856-43.818666 119.936-29.226667 30.208-66.730667 45.226667-112.554667 45.226667-49.066667 0-89.429333-19.072-121.130667-57.344C357.12 658.218667 341.333333 595.541333 341.333333 508.416c0-89.344 16.469333-153.813333 49.493334-193.194667C423.722667 275.754667 466.56 256 519.168 256z m-9.472 241.834667c-17.962667 0-33.066667 6.997333-45.525334 21.12-12.330667 14.037333-18.56 34.858667-18.56 62.293333 0 30.421333 6.912 53.76 20.906667 70.4 13.952 16.469333 29.866667 24.746667 47.786667 24.746667 17.28 0 31.701333-6.826667 43.178666-20.309334 11.52-13.525333 17.237333-35.669333 17.237334-66.56 0-31.658667-6.186667-54.869333-18.517334-69.546666a58.197333 58.197333 0 0 0-46.506666-22.144z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "7",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512.042667 1024C229.248 1024 0 794.752 0 512S229.248 0 512.042667 0C794.752 0 1024 229.248 1024 512s-229.248 512-511.957333 512z\" fill=\"#6D768D\"></path><path d=\"M673.024 273.066667H354.133333v86.869333h212.224a691.2 691.2 0 0 0-104.746666 187.989333c-26.026667 70.101333-39.978667 138.88-41.429334 206.293334h89.6c-0.298667-42.922667 6.698667-91.776 21.034667-146.474667a654.72 654.72 0 0 1 62.08-154.965333c27.136-48.554667 53.888-85.76 80.128-111.701334V273.066667z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "8",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z\" fill=\"#6D768D\"></path><path d=\"M512.426667 256c46.208 0 82.048 11.861333 107.605333 35.541333 25.6 23.68 38.314667 53.674667 38.314667 89.898667 0 22.613333-5.802667 42.666667-17.578667 60.330667a111.445333 111.445333 0 0 1-49.450667 40.277333c26.965333 10.837333 47.36 26.752 61.312 47.658667 13.994667 20.906667 21.034667 45.013333 21.034667 72.362666 0 45.098667-14.336 81.834667-42.965333 109.952-28.586667 28.245333-66.602667 42.368-114.090667 42.368-44.245333 0-81.066667-11.648-110.464-34.986666-34.645333-27.52-52.010667-65.28-52.010667-113.365334 0-26.368 6.528-50.645333 19.626667-72.746666 13.056-22.144 33.578667-39.210667 61.696-51.242667-24.064-10.154667-41.557333-24.192-52.48-41.941333a109.824 109.824 0 0 1-16.512-58.666667c0-36.224 12.757333-66.218667 37.973333-89.898667 25.386667-23.68 61.354667-35.541333 108.032-35.541333z m1.28 265.429333c-22.784 0-39.722667 7.978667-50.901334 23.893334-11.136 15.786667-16.64 33.066667-16.64 51.498666 0 25.984 6.485333 46.208 19.712 60.714667 13.098667 14.506667 29.525333 21.802667 49.152 21.802667 19.242667 0 35.157333-6.997333 47.786667-20.992 12.629333-13.909333 18.858667-34.048 18.858667-60.416 0-23.082667-6.314667-41.557333-19.2-55.466667a63.274667 63.274667 0 0 0-48.725334-21.034667z m-0.341334-191.488c-17.792 0-32 5.333333-42.581333 16-10.538667 10.666667-15.872 24.746667-15.872 42.325334 0 18.645333 5.248 33.152 15.701333 43.648 10.453333 10.453333 24.362667 15.658667 41.770667 15.658666 17.664 0 31.658667-5.290667 42.24-15.872 10.538667-10.581333 15.872-25.173333 15.872-43.818666 0-17.493333-5.248-31.573333-15.701333-42.154667s-24.277333-15.786667-41.429334-15.786667z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "9",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 1024C229.248 1024 0 794.794667 0 512.042667 0 229.333333 229.248 0 512 0c282.88 0 512 229.333333 512 512.042667C1024 794.794667 794.88 1024 512 1024z\" fill=\"#6D768D\"></path><path d=\"M497.28 256c49.365333 0 89.856 19.157333 121.429333 57.429333 31.701333 38.229333 47.488 101.205333 47.488 188.842667 0 89.173333-16.384 153.386667-49.365333 192.853333-32.853333 39.594667-75.605333 59.264-128.426667 59.264-37.888 0-68.608-10.154667-91.989333-30.506666s-38.4-50.816-45.013333-91.306667l90.112-9.984c2.261333 18.474667 8.021333 32.085333 17.28 41.088 9.173333 8.874667 21.418667 13.312 36.608 13.312 19.2 0 35.541333-8.874667 48.981333-26.752 13.44-17.749333 22.016-54.613333 25.770667-110.549333-23.466667 27.264-52.821333 40.874667-88.064 40.874666-38.314667 0-71.253333-14.72-99.114667-44.330666C355.242667 506.709333 341.333333 468.224 341.333333 420.864c0-49.493333 14.592-89.258667 43.946667-119.466667C414.549333 271.104 451.925333 256 497.237333 256z m-4.352 77.482667c-17.237333 0-31.658667 6.826667-43.008 20.437333-11.477333 13.653333-17.194667 35.84-17.194667 66.816 0 31.402667 6.229333 54.485333 18.645334 69.205333 12.458667 14.72 27.946667 22.101333 46.592 22.101334 18.005333 0 33.066667-7.082667 45.44-21.205334 12.330667-14.208 18.432-35.029333 18.432-62.506666 0-29.994667-6.912-53.376-20.821334-69.973334-13.824-16.597333-29.866667-24.874667-48.085333-24.874666z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "10",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512.042667 1024C229.248 1024 0 794.794667 0 511.957333 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 511.957333 1024 794.794667 794.752 1024 512.042667 1024z\" fill=\"#6D768D\"></path><path d=\"M619.946667 273.066667c46.976 0 83.754667 16.042667 110.250666 48.042666 31.573333 37.973333 47.36 100.864 47.36 188.672 0 87.722667-15.829333 150.698667-47.658666 189.056-26.325333 31.616-62.976 47.36-109.952 47.36-47.274667 0-85.418667-17.237333-114.346667-51.968-28.885333-34.602667-43.392-96.426667-43.392-185.386666 0-87.168 15.872-150.016 47.701333-188.416 26.282667-31.488 62.933333-47.36 110.037334-47.36z m-207.488 12.8v452.266666H325.504V411.690667A299.904 299.904 0 0 1 213.333333 476.373333V398.933333c22.656-7.296 47.36-21.12 73.856-41.514666 26.624-20.522667 44.842667-44.288 54.784-71.552h70.485334z m207.488 60.842666c-11.306667 0-21.461333 3.413333-30.336 10.24-8.874667 6.826667-15.786667 19.157333-20.693334 36.864-6.4 22.997333-9.642667 61.653333-9.642666 115.968 0 54.442667 2.944 91.733333 8.661333 112.128 5.802667 20.352 13.098667 33.877333 21.845333 40.618667 8.789333 6.741333 18.858667 10.154667 30.165334 10.154667 11.349333 0 21.376-3.498667 30.250666-10.325334 8.874667-6.826667 15.786667-19.157333 20.693334-36.778666 6.4-22.826667 9.642667-61.354667 9.642666-115.797334 0-54.314667-2.858667-91.648-8.661333-112.042666-5.802667-20.352-13.013333-33.962667-21.76-40.789334a47.616 47.616 0 0 0-30.165333-10.24z\" fill=\"#FFFFFF\"></path></svg>"
},
]
},
{
"name": "进度图标",
"type": "progress",
"list": [
{
"name": "1",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z\" fill=\"#12BB37\"></path><path d=\"M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96V512l294.144-294.144A414.72 414.72 0 0 1 928 512c0 229.76-186.24 416-416 416z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "2",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z\" fill=\"#12BB37\"></path><path d=\"M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96V512h416c0 229.76-186.24 416-416 416z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "3",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z\" fill=\"#12BB37\"></path><path d=\"M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96V512l294.144 294.144A414.72 414.72 0 0 1 512 928z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "4",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z\" fill=\"#12BB37\"></path><path d=\"M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96v832z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "5",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z\" fill=\"#12BB37\"></path><path d=\"M512 512l-294.144 294.144A414.72 414.72 0 0 1 96 512c0-229.76 186.24-416 416-416V512z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "6",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z\" fill=\"#12BB37\"></path><path d=\"M512 512H96c0-229.76 186.24-416 416-416V512z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "7",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z\" fill=\"#12BB37\"></path><path d=\"M512 512L217.856 217.856A414.72 414.72 0 0 1 512 96V512z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "8",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 512c0 282.752 229.248 512 512 512s512-229.248 512-512S794.752 0 512 0 0 229.248 0 512z\" fill=\"#12BB37\"></path><path d=\"M716.629333 341.333333h-51.328a35.072 35.072 0 0 0-28.330666 14.293334l-171.989334 233.984-77.909333-106.026667a35.2 35.2 0 0 0-28.330667-14.293333H307.413333c-7.082667 0-11.264 7.936-7.082666 13.653333l136.32 185.472a35.2 35.2 0 0 0 56.533333 0l230.4-313.429333a8.533333 8.533333 0 0 0-6.954667-13.653334z\" fill=\"#FFFFFF\"></path></svg>"
}
]
},
// {
// "name": "表情图标",
// "type": "expression",
// "list": [
// {
// "name": "1",
// "icon": "<svg t=\"1624457751393\" class=\"icon\" viewBox=\"0 0 1026 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"12255\"><path d=\"M1.097856 1.097642h1021.804717v1021.804716H1.097856z\" fill=\"#F09495\" p-id=\"12256\"></path><path d=\"M1024.000214 1024H0.000214V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.195498v1019.609432z\" fill=\"#FFFFFF\" p-id=\"12257\"></path><path d=\"M234.695985 335.179887m-27.341259 0a27.341259 27.341259 0 1 0 54.682518 0 27.341259 27.341259 0 1 0-54.682518 0Z\" fill=\"#040000\" p-id=\"12258\"></path><path d=\"M234.695985 363.519002c-15.666342 0-28.339115-12.772559-28.339115-28.339115 0-15.666342 12.772559-28.339115 28.339115-28.339115s28.339115 12.772559 28.339115 28.339115c0.099786 15.666342-12.672773 28.339115-28.339115 28.339115z m0-54.582732c-14.468914 0-26.243617 11.774703-26.243617 26.243617s11.774703 26.243617 26.243617 26.243617 26.243617-11.774703 26.243617-26.243617-11.774703-26.243617-26.243617-26.243617z\" fill=\"#FFFFFF\" p-id=\"12259\"></path><path d=\"M776.232528 335.179887m-27.341259 0a27.341259 27.341259 0 1 0 54.682518 0 27.341259 27.341259 0 1 0-54.682518 0Z\" fill=\"#040000\" p-id=\"12260\"></path><path d=\"M776.232528 363.519002c-15.666342 0-28.339115-12.772559-28.339115-28.339115 0-15.666342 12.772559-28.339115 28.339115-28.339115 15.666342 0 28.339115 12.772559 28.339115 28.339115 0 15.666342-12.772559 28.339115-28.339115 28.339115z m0-54.582732c-14.468914 0-26.243617 11.774703-26.243617 26.243617s11.774703 26.243617 26.243617 26.243617 26.243617-11.774703 26.243617-26.243617c-0.099786-14.468914-11.874488-26.243617-26.243617-26.243617z\" fill=\"#FFFFFF\" p-id=\"12261\"></path><path d=\"M512.000214 671.656987c-52.58702 0-105.872539-17.961411-105.872539-52.387449S459.413194 566.882089 512.000214 566.882089s105.872539 17.961411 105.87254 52.387449S564.587234 671.656987 512.000214 671.656987z m0-74.240499c-21.952836 0-43.207172 3.592282-58.2748 9.77899-13.870201 5.68778-17.06334 11.275775-17.06334 12.07406s3.19314 6.386279 17.06334 12.07406c15.067628 6.186708 36.321965 9.77899 58.2748 9.77899s43.207172-3.592282 58.274801-9.77899c13.870201-5.68778 17.06334-11.275775 17.06334-12.07406s-3.19314-6.386279-17.06334-12.07406c-15.067628-6.286494-36.321965-9.77899-58.274801-9.77899z\" fill=\"#040000\" p-id=\"12262\"></path></svg>"
// },
// {
// "name": "2",
// "icon": "<svg t=\"1624457767572\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1048\"><path d=\"M0 0h1024v1024H0z\" fill=\"#E6A6C9\" p-id=\"1049\"></path><path d=\"M315.1 368.1c-23.9 0-43.3-19.4-43.3-43.3s19.4-43.3 43.3-43.3 43.3 19.4 43.3 43.3-19.4 43.3-43.3 43.3z m0-74.7c-17.3 0-31.3 14.1-31.3 31.3 0 17.3 14.1 31.3 31.3 31.3 17.3 0 31.3-14.1 31.3-31.3 0-17.2-14-31.3-31.3-31.3zM738.7 368.1c-23.9 0-43.3-19.4-43.3-43.3s19.4-43.3 43.3-43.3 43.3 19.4 43.3 43.3-19.4 43.3-43.3 43.3z m0-74.7c-17.3 0-31.3 14.1-31.3 31.3 0 17.3 14.1 31.3 31.3 31.3 17.3 0 31.3-14.1 31.3-31.3 0-17.2-14-31.3-31.3-31.3zM293.5 698.8l-14.5-1.3c0.1-0.6 1.5-14.6 15.1-27.9 17.2-16.7 45-24.8 82.7-24 4.9-0.1 10.9-10.5 16.1-19.6 8.4-14.7 19-33.1 37.9-34.3 19.4-1.2 42.2 16.4 71.5 55.4 9.9 5.2 16.5 11.2 21.8 16.1 8.4 7.7 13.1 11.9 25.1 10.8 14.9-1.4 38.9-11.1 77.5-31.4 26.8-28.4 56.4-41.4 83.5-36.6 27.9 4.9 50.6 27.6 67.5 67.5l-13.4 5.7c-14.7-34.5-34.3-54.9-56.7-58.8-22.3-3.9-47.6 7.8-71.2 33.1l-0.8 0.9-1.1 0.6c-85.6 45.1-99.4 38-120.2 19.1-5.5-5-11.2-10.2-20.1-14.7l-1.5-0.8-1-1.4c-32.2-43.2-50.4-51.6-60-51-11.1 0.7-18.8 14-26.2 27-7.6 13.2-15.4 26.9-28.8 26.9h-0.2c-78.4-1.6-83 38.3-83 38.7z\" fill=\"#040000\" p-id=\"1050\"></path></svg>"
// },
// {
// "name": "3",
// "icon": "<svg t=\"1624457776082\" class=\"icon\" viewBox=\"0 0 1026 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1204\" ><path d=\"M1.1 1.097642h1021.804716v1021.804716H1.1z\" fill=\"#F7E983\" p-id=\"1205\"></path><path d=\"M1024.002358 1024H0.002358V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.197642v1019.609432z\" fill=\"#FFFFFF\" p-id=\"1206\"></path><path d=\"M329.174412 344.491728a38.118106 10.277919 57.6 1 0 17.355867-11.014369 38.118106 10.277919 57.6 1 0-17.355867 11.014369Z\" fill=\"#040000\" p-id=\"1207\"></path><path d=\"M644.769475 355.956059a11.175989 36.321965 30 1 0 36.321965-62.911488 11.175989 36.321965 30 1 0-36.321965 62.911488Z\" fill=\"#040000\" p-id=\"1208\"></path><path d=\"M569.678445 671.158059c-26.343403 0-51.190021-5.288638-70.049503-14.967843-20.755408-10.577275-32.230754-25.445332-32.230755-41.710388 0-16.265056 11.475346-31.133112 32.230755-41.710387 18.859482-9.579419 43.805886-14.967843 70.049503-14.967843s51.190021 5.288638 70.049503 14.967843c20.755408 10.577275 32.230754 25.445332 32.230754 41.710387 0 16.265056-11.475346 31.133112-32.230754 41.710388-18.859482 9.679205-43.805886 14.967843-70.049503 14.967843z m0-95.095693c-49.693237 0-84.318846 20.356266-84.318846 38.517248s34.625609 38.517248 84.318846 38.517248 84.318846-20.356266 84.318846-38.517248-34.725395-38.517248-84.318846-38.517248z\" fill=\"#040000\" p-id=\"1209\"></path></svg>"
// },
// {
// "name": "4",
// "icon": "<svg t=\"1624457781889\" class=\"icon\" viewBox=\"0 0 1026 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1363\" ><path d=\"M1.1 1.097642h1021.804716v1021.804716H1.1z\" fill=\"#A6D9E2\" p-id=\"1364\"></path><path d=\"M1024.002358 1024H0.002358V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.197642v1019.609432z\" fill=\"#FFFFFF\" p-id=\"1365\"></path><path d=\"M376.194134 348.950302m-23.44962 0a23.44962 23.44962 0 1 0 46.89924 0 23.44962 23.44962 0 1 0-46.89924 0Z\" fill=\"#040000\" p-id=\"1366\"></path><path d=\"M629.150672 348.950302m-24.647047 0a24.647047 24.647047 0 1 0 49.294095 0 24.647047 24.647047 0 1 0-49.294095 0Z\" fill=\"#040000\" p-id=\"1367\"></path><path d=\"M397.847613 603.503411c13.471058 8.282206 28.738258 14.468914 43.7061 19.458195 29.835899 9.978562 62.266225 14.169558 93.299551 7.483921 21.054765-4.490353 40.213604-14.369129 56.778016-28.039758 6.785422-5.587995-2.893783-15.167414-9.579419-9.579419-46.999026 38.916391-112.258819 31.033327-163.847983 6.086922-4.590138-2.195284-9.080491-4.490353-13.371272-7.184564-7.583707-4.590138-14.468914 7.184564-6.984993 11.774703z\" fill=\"#040000\" p-id=\"1368\"></path><path d=\"M627.753674 534.052621c-31.033327 24.048334-58.474371 68.253362-37.419607 106.970182 10.577275 19.35841 29.835899 32.629897 48.795167 42.708244 7.982849 4.190996 15.067628-7.883064 7.084779-12.07406-25.245761-13.271487-53.485091-35.324108-49.094524-66.557006 2.793997-20.156695 15.766127-37.319821 29.736114-51.190022 3.392711-3.392711 6.984993-6.785422 10.776847-9.77899 2.993569-2.295069 2.394855-7.483921 0-9.878776-2.893783-3.19314-6.885208-2.49464-9.878776-0.199572z\" fill=\"#040000\" p-id=\"1369\"></path></svg>"
// },
// {
// "name": "5",
// "icon": "<svg t=\"1624457787809\" class=\"icon\" viewBox=\"0 0 1026 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1523\" ><path d=\"M1.1 1.097642h1021.804716v1021.804716H1.1z\" fill=\"#AD6F59\" p-id=\"1524\"></path><path d=\"M1024.002358 1024H0.002358V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.197642v1019.609432z\" fill=\"#FFFFFF\" p-id=\"1525\"></path><path d=\"M411.829832 330.730879a38.118106 10.277919 57.6 1 0 17.355867-11.014368 38.118106 10.277919 57.6 1 0-17.355867 11.014368Z\" fill=\"#040000\" p-id=\"1526\"></path><path d=\"M480.669675 609.989476c11.774703-25.844475 27.740401-51.788735 44.60417-73.342429 13.770415-17.462483 29.237186-33.92711 47.897096-44.803742 17.262912-10.078347 35.324108-13.67063 54.283376-6.58585 11.974274 4.390567 23.948548 14.468914 33.128825 24.547261 14.369129 15.865913 25.145975 34.625609 34.725394 53.684662 4.290782 8.581563 17.262912 0.997856 12.972131-7.583707-15.167414-30.334828-35.224323-63.763009-66.157864-80.327421-21.054765-11.37556-44.504385-11.475346-66.157864-1.895927-21.054765 9.280062-38.617034 25.644904-53.485091 42.907815-14.468914 16.863769-27.041902 35.324108-38.217891 54.582733-5.887351 10.178133-11.674917 20.555837-16.464627 31.232898-1.696355 3.692068-0.997856 7.982849 2.694212 10.277918 3.19314 1.895927 8.581563 0.898071 10.178133-2.694211z\" fill=\"#040000\" p-id=\"1527\"></path><path d=\"M663.863649 338.091735a14.468914 33.727538 30 1 0 33.727538-58.417811 14.468914 33.727538 30 1 0-33.727538 58.417811Z\" fill=\"#040000\" p-id=\"1528\"></path></svg>"
// },
// {
// "name": "6",
// "icon": "<svg t=\"1624457794933\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1680\" ><path d=\"M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z\" fill=\"#83CEE3\" p-id=\"1681\"></path><path d=\"M369 375.8m-34.6 0a34.6 34.6 0 1 0 69.2 0 34.6 34.6 0 1 0-69.2 0Z\" fill=\"#040000\" p-id=\"1682\"></path><path d=\"M369 411.7c-19.8 0-36-16.1-36-36s16.1-36 36-36 36 16.1 36 36-16.1 36-36 36z m0-69.1c-18.3 0-33.2 14.9-33.2 33.2S350.7 409 369 409s33.2-14.9 33.2-33.2-14.9-33.2-33.2-33.2z\" fill=\"#FFFFFF\" p-id=\"1683\"></path><path d=\"M672.2 333.6c-15.1 7.6-30.2 15.6-44.3 25-5.9 3.9-17 10.4-14.6 19.1 1.8 6.5 12 11.2 17.3 14.3 15.7 9.3 32.1 17.6 48.3 25.9 8.6 4.4 16.2-8.5 7.6-13-14.1-7.3-28.3-14.5-42.1-22.3-3.9-2.2-7.9-4.5-11.7-6.9-1.2-0.8-2.4-1.5-3.5-2.4-0.6-0.4-1.1-0.8-1.6-1.2 2.2 1.7-0.3-0.3-0.3-0.3-0.9 0.1-1.5-3.2-0.2 0.5 0.9 2.4 1.1 3.8 0.3 5.8 0.6-1.5-0.9 0.8-0.1 0 0.5-0.5 1-1.1 1.6-1.6 0.5-0.5 1-0.9 1.6-1.3 0.6-0.5 0 0 1.2-0.9 1.7-1.3 3.5-2.5 5.3-3.6 8.4-5.5 17.2-10.4 26-15.2 5.6-3 11.2-6 16.8-8.9 8.6-4.4 1-17.3-7.6-13zM578.2 720.9c-12.5-96.7-33.3-154.7-55.6-155.6-8.8 3.9-22.3 17.5-37.7 60.1-10.8 29.8-18.4 62.2-23 81.6-1.2 5.1-2.1 9.1-2.9 11.8l-9.3-2.4c0.7-2.6 1.6-6.6 2.8-11.6 14.9-63 36-136.8 67.5-148.8l0.8-0.3h0.8c18.2-0.4 33.2 19.5 45.8 60.8 10.2 33.3 16.7 74.6 20.5 103.3l-9.7 1.1z\" fill=\"#040000\" p-id=\"1684\"></path></svg>"
// },
// {
// "name": "7",
// "icon": "<svg t=\"1624457802025\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1838\" ><path d=\"M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z\" fill=\"#8CC66D\" p-id=\"1839\"></path><path d=\"M375.778679 404.47473a14.5 33.8 30 1 0 33.8-58.543317 14.5 33.8 30 1 0-33.8 58.543317Z\" fill=\"#040000\" p-id=\"1840\"></path><path d=\"M627.220263 374.211388a43.1 11.6 57.6 1 0 19.588408-12.431182 43.1 11.6 57.6 1 0-19.588408 12.431182Z\" fill=\"#040000\" p-id=\"1841\"></path><path d=\"M451.1 548.5c17.6-9.3 63.9-30 105.3-16.2 17 20.3 32.7 98.8 28.8 138.1-27.5 10.2-82.5 10.2-106.1 5.8-8.3-10.5-32.7-81.8-35.3-114.6-0.4-5.5 2.5-10.6 7.3-13.1z\" fill=\"#040000\" p-id=\"1842\"></path></svg>"
// },
// {
// "name": "8",
// "icon": "<svg t=\"1624457816632\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1996\" ><path d=\"M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z\" fill=\"#5A74B8\" p-id=\"1997\"></path><path d=\"M357.7 400m-34.6 0a34.6 34.6 0 1 0 69.2 0 34.6 34.6 0 1 0-69.2 0Z\" fill=\"#040000\" p-id=\"1998\"></path><path d=\"M357.7 436c-19.8 0-36-16.1-36-36s16.1-36 36-36 36 16.1 36 36-16.2 36-36 36z m0-69.2c-18.3 0-33.2 14.9-33.2 33.2s14.9 33.2 33.2 33.2 33.2-14.9 33.2-33.2-14.9-33.2-33.2-33.2z\" fill=\"#FFFFFF\" p-id=\"1999\"></path><path d=\"M676 400m-34.6 0a34.6 34.6 0 1 0 69.2 0 34.6 34.6 0 1 0-69.2 0Z\" fill=\"#040000\" p-id=\"2000\"></path><path d=\"M676 436c-19.8 0-36-16.1-36-36s16.1-36 36-36 36 16.1 36 36-16.2 36-36 36z m0-69.2c-18.3 0-33.2 14.9-33.2 33.2s14.9 33.2 33.2 33.2c18.3 0 33.2-14.9 33.2-33.2s-14.9-33.2-33.2-33.2z\" fill=\"#FFFFFF\" p-id=\"2001\"></path><path d=\"M347.6 684.1c0.3-0.9 0.6-1.7 0.9-2.6 0.2-0.5 1.4-3.2 0.3-0.8 0.6-1.4 1.3-2.9 2-4.3 3.2-6.3 6-10.7 10.9-15.3 4.3-4 10.8-7.5 17.1-6.1 3.9 0.9 7.9 4.9 11.1 7.2 3.1 2.2 6.3 4.5 9.7 6.2 7.5 3.8 15.3 4.4 23.4 1.9 4.7-1.5 9.2-3.6 13.6-5.9 5-2.6 10.7-5 14.2-9.5 4.5-5.7 6.1-8.5 11.4-14.1 1-1 2-2 3.1-3 0.2-0.2 2.2-1.7 0.6-0.5 0.6-0.4 1.2-0.9 1.8-1.3 1-0.6 2.1-1.3 3.2-1.7-2 0.8 0.2 0 0.6-0.1 2.3-0.7-0.3-0.2 1.2-0.3 2.8-0.1 3.6 0 5.5 1 3.8 1.9 6.6 4.7 9.5 7.8 4.5 5 7.5 11.1 11.7 16.2 1.8 2.2 3.7 4.3 5.4 6.5 8.1 10.3 17.7 22.2 32.2 22 8.8-0.1 16.6-5.2 22.6-11.2 4.2-4.1 7.7-8.9 11-13.7 2.9-4.2 4.6-9.9 6.2-13.5 3.2-7.1 7.2-13.1 13-18.1 4.8-4.2 11.1-6.5 16.7-5.3 10.5 2.4 17.2 12.1 23.1 20.2 4.7 6.5 9.8 13 16 18.2 7.8 6.4 17.1 11.4 27.5 11.1 14.1-0.4 25.5-9.5 34.2-19.9 3-3.6 3.6-8.8 0-12.4-3.1-3.1-9.4-3.7-12.4 0-6.3 7.6-14.7 15.9-24.9 14.7-2.2-0.3-5.3-1.5-7.9-3.1-3.5-2.1-6.1-4.4-9.1-7.5-4.9-5.1-6.8-8.1-10.9-13.8-7.3-10.1-16.1-19.6-28.2-23.7-18.5-6.3-35.7 5.6-46 20.1-2.4 3.3-4.4 6.9-6.1 10.6-1.8 3.9-2.7 8.5-5.2 11.9-3.1 4.4-6.2 8.8-10.2 12.5-3 2.8-5.7 4.4-8.6 5.1-0.4 0.1-1.7 0.1 0.1 0h-2.2c2.1 0.1 0 0-0.5-0.1-0.7-0.2-1.4-0.4-2-0.6 1.8 0.7-1.8-1.1-2.4-1.5l-1.2-0.9c1.5 1.2-0.9-0.9-1.2-1.1-4.7-4.3-8.4-9.5-12.3-14.4-10.9-13.6-20.9-34-41-34.9-14.2-0.6-24.5 10.6-32.4 20.8-1.2 1.6-2.5 3.2-3.7 4.8-1.5 1.9 1.1-1.4-0.4 0.5-0.4 0.5-0.8 1.2-1.3 1.6-1.7 1.4-4.6 2.6-6.6 3.6-2.9 1.6-5.9 3.2-9 4.5-1.6 0.7-3.4 1.2-5.1 1.7-2.2 0.6-0.7 0.5-2.8 0.4-2.8 0-3.9-0.4-6.6-1.9-3.9-2.2-7.5-4.9-11.1-7.5-5.6-4-10-6.9-17-7.5-10.5-0.9-20.3 3.2-28.2 9.9-9.4 8.1-16.4 20.2-20.1 32-3.6 11.2 13.3 15.8 16.8 5.1z\" fill=\"#040000\" p-id=\"2002\"></path></svg>"
// },
// {
// "name": "9",
// "icon": "<svg t=\"1624457826949\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2156\" ><path d=\"M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z\" fill=\"#F0884F\" p-id=\"2157\"></path><path d=\"M287.2 382c6.4 2.3 11.6-3.7 15.4-7.9 5.1-5.5 10.2-11 16-15.9 0.8-0.7 1.7-1.4 2.5-2.1 1.2-0.9-1.7 1.3 0.2-0.2l1.2-0.9c2.1-1.5 4.3-2.9 6.5-4.3 2-1.2 4-2.2 6.1-3.2 0.6-0.3 1.2-0.6 1.9-0.9-0.3 0.2-1.5 0.6 0.2-0.1 1.3-0.5 2.6-1 4-1.5 11.2-3.7 21.8-4 33.4-1.1 19.5 4.9 36.4 17 51.2 30.2 8.6 7.7 21.4-5 12.7-12.7-25.2-22.6-57.1-42.1-92.2-36.2-20.4 3.4-37.7 16.1-51.6 30.9-2.3 2.4-4.5 5-6.8 7.4-0.7 0.7-1.9 1.5-2.4 2.4-0.5 0.8 2.3-1.5 0.8-0.7 1.3-0.7 3.9-1.4 5.8-0.7-11.1-3.7-15.8 13.7-4.9 17.5zM598 382c6.4 2.3 11.6-3.7 15.4-7.9 5.1-5.5 10.2-11 16-15.9 0.8-0.7 1.7-1.4 2.5-2.1 1.2-0.9-1.7 1.3 0.2-0.2l1.2-0.9c2.1-1.5 4.3-2.9 6.5-4.3 2-1.2 4-2.2 6.1-3.2 0.6-0.3 1.2-0.6 1.9-0.9-0.3 0.2-1.5 0.6 0.2-0.1 1.3-0.5 2.6-1 4-1.5 11.2-3.7 21.8-4 33.4-1.1 19.5 4.9 36.4 17 51.2 30.2 8.6 7.7 21.4-5 12.7-12.7-25.2-22.6-57.1-42.1-92.2-36.2-20.4 3.4-37.7 16.1-51.6 30.9-2.3 2.4-4.5 5-6.8 7.4-0.7 0.7-1.9 1.5-2.4 2.4-0.5 0.8 2.3-1.5 0.8-0.7 1.3-0.7 3.9-1.4 5.8-0.7-11.1-3.7-15.8 13.7-4.9 17.5zM505.9 527.1c3.4 0.7 6.8 1.7 10.2 2.8 6.7 2.2 10.4 3.5 16.6 7.7 1.6 1.1-0.5-0.5 0.6 0.5 0.6 0.5 1.1 1.1 1.7 1.6 1.5 1.4-0.1-0.4 0.5 0.6 0.4 0.6 0.7 1.2 1 1.8-1-2 0.1 0 0 0.5 0.1-2-0.1 0-0.1 0-0.1 0.8 0 0.7 0.1-0.5-0.1 0.4-0.1 0.7-0.3 1.1-0.6 1 0.7-0.9-0.4 1-1.6 2.5-4.6 5.4-8.1 7.8-6.8 4.6-14.4 8.2-22 11.4-7 3-7.4 11.9 0 14.8 7.4 2.8 15 5.3 22.4 8.1 3.1 1.1 4.2 1.5 6.9 2.9 1.1 0.6 2.1 1.2 3.2 1.8 1.2 0.8-0.7-0.5 0.1 0 0.4 0.3 0.8 0.7 1.1 1.1 0.6 0.8-1.1-1.2-0.2-0.2 0.8 0.9-0.3-1.4-0.1-0.2 0.1 0.9 0.2-1.9 0-0.9-0.1 0.5-0.8 1.8 0 0.2-0.2 0.5-0.5 1-0.8 1.4-0.3 0.3-0.9 1.3-0.3 0.5-0.5 0.7-1.1 1.3-1.7 1.9-6.9 7.3-15.9 12.8-24.4 18.1-8.3 5.3-0.6 18.5 7.7 13.2 9.9-6.3 20.9-12.8 28.6-21.8 4.8-5.5 8.1-12.9 4.2-19.9-3.4-6-10.5-8.9-16.6-11.4-8.6-3.5-17.5-6.2-26.2-9.5v14.8c14.4-6.1 47.2-18.8 41.2-40.3-3.5-12.9-19.4-18.9-30.8-22.6-3.4-1.1-6.9-2.1-10.5-2.9-9.1-2.2-13.3 12.5-3.6 14.6z\" fill=\"#040000\" p-id=\"2158\"></path></svg>"
// },
// {
// "name": "10",
// "icon": "<svg t=\"1624457835383\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2312\" ><path d=\"M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z\" fill=\"#F6F180\" p-id=\"2313\"></path><path d=\"M342.9 400.6m-29.5 0a29.5 29.5 0 1 0 59 0 29.5 29.5 0 1 0-59 0Z\" fill=\"#040000\" p-id=\"2314\"></path><path d=\"M342.9 431.3c-16.9 0-30.7-13.8-30.7-30.7s13.8-30.7 30.7-30.7 30.7 13.8 30.7 30.7-13.7 30.7-30.7 30.7z m0-59c-15.6 0-28.3 12.7-28.3 28.3s12.7 28.3 28.3 28.3 28.3-12.7 28.3-28.3-12.6-28.3-28.3-28.3z\" fill=\"#FFFFFF\" p-id=\"2315\"></path><path d=\"M702 400.6m-29.5 0a29.5 29.5 0 1 0 59 0 29.5 29.5 0 1 0-59 0Z\" fill=\"#040000\" p-id=\"2316\"></path><path d=\"M702 431.3c-16.9 0-30.7-13.8-30.7-30.7s13.8-30.7 30.7-30.7 30.7 13.8 30.7 30.7-13.8 30.7-30.7 30.7z m0-59c-15.6 0-28.3 12.7-28.3 28.3s12.7 28.3 28.3 28.3 28.3-12.7 28.3-28.3-12.7-28.3-28.3-28.3z\" fill=\"#FFFFFF\" p-id=\"2317\"></path><path d=\"M358.7 519.9c20 22 45.5 40.4 71.3 54.8 51.2 28.5 111.7 39.9 168 19.5 44.3-16.1 80.7-47.8 110.2-83.9 3-3.7 3.6-8.9 0-12.5-3.1-3.1-9.5-3.7-12.5 0-25.5 31.4-56.2 59.7-93.7 76-27.1 11.7-56.6 15.7-85.8 12.2-24.7-2.9-49.5-11.8-71.5-23.4-18.7-9.8-36.6-22.2-51.1-34.3-7.8-6.5-15.5-13.3-22.4-20.9-7.7-8.5-20.1 4.1-12.5 12.5z\" p-id=\"2318\"></path></svg>"
// },
// {
// "name": "11",
// "icon": "<svg t=\"1624457841751\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2472\" ><path d=\"M48.2 844.9c-68.5-210.6 186-782.1 409.1-795.4 6.3-0.4 12.5 0.2 18.6 1.6C665.1 94.6 985.4 515 987.1 821.3c0.1 20-12.9 37.9-22.4 43.1-162.7 89.8-605.8 179.7-884.4 30.9-15-7.9-24.2-26.1-32.1-50.4z\" fill=\"#F0884F\" p-id=\"2473\"></path><path d=\"M401 352.1m-52.4 0a52.4 52.4 0 1 0 104.8 0 52.4 52.4 0 1 0-104.8 0Z\" fill=\"#FFFFFF\" p-id=\"2474\"></path><path d=\"M408.7 329m-29.3 0a29.3 29.3 0 1 0 58.6 0 29.3 29.3 0 1 0-58.6 0Z\" fill=\"#040000\" p-id=\"2475\"></path><path d=\"M527.5 352.1m-52.4 0a52.4 52.4 0 1 0 104.8 0 52.4 52.4 0 1 0-104.8 0Z\" fill=\"#FFFFFF\" p-id=\"2476\"></path><path d=\"M527.5 329m-29.3 0a29.3 29.3 0 1 0 58.6 0 29.3 29.3 0 1 0-58.6 0Z\" fill=\"#040000\" p-id=\"2477\"></path><path d=\"M450.7 517c1.1-8.2 3.2-16.4 6.1-24.1 0.1-0.3 1-2.5 0.5-1.4s0.3-0.7 0.5-1c0.7-1.4 1.4-2.8 2.2-4.1 0.4-0.8 2.8-3.9 1.3-2.1 0.8-1 1.7-1.9 2.6-2.8 1-1-1.5 1 0.1 0 0.5-0.3 1-0.6 1.5-0.8-1.3 0.7-1.2 0.3 0 0.1 1.9-0.3-1.8 0.3 0.1 0 1.2-0.2 1.5 0.3 0-0.1 0.6 0.2 1.3 0.3 1.9 0.5 0.3 0.1-1.3-0.7 0.2 0.1 0.8 0.5 1.6 0.9 2.4 1.4 1.4 1 0-0.1 1.4 1.1 0.9 0.8 1.8 1.7 2.6 2.6 1.8 1.9 3.5 3.9 5 6.1 5.1 7.1 9.3 14.8 13.2 22.6 3.5 6.9 13.7 4.7 15.8-2.1 2.6-8.7 4.8-17.4 7.4-26.1 0.9-3.2 1.9-6.4 3.2-9.4-0.7 1.6 0.8-1.6 1.2-2.2l0.9-1.5c0.7-1.2-1.4 0.7 0.1-0.1 1.7-0.9-1.2 0.3-0.3 0.1 0.8-0.2 1-1.2 0.3-0.3-0.6 0.8 0.6 0-0.5 0.2-2 0.3 2.4 0.5-1.1 0 0.5 0.1 1.2 0.2 1.6 0.4-1.1-0.8-0.8-0.4 0.2 0.2 0.7 0.4 3.4 2.3 2.7 1.8 8.9 7.1 15.9 16.9 22.5 26 2.8 3.8 7.5 5.6 11.8 3.1 3.7-2.2 5.9-8 3.1-11.8-8.2-11.1-16.6-23-27.7-31.4-6.3-4.7-14.5-7.6-21.7-3-6.7 4.2-9.6 12.5-11.9 19.6-3.2 9.9-5.5 20-8.6 29.9 5.3-0.7 10.5-1.4 15.8-2.1-7.8-15.5-24.8-50.1-48-41.7-14.1 5.1-19.7 23-22.9 36.2-0.9 3.8-1.8 7.7-2.3 11.6-0.6 4.6 1.1 9.3 6 10.6 4.2 1 10.2-1.5 10.8-6.1z\" fill=\"#040000\" p-id=\"2478\"></path></svg>"
// },
// {
// "name": "12",
// "icon": "<svg t=\"1624457847424\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2632\" ><path d=\"M485.538528 993.072489a362.00362 481.804818 3.149 1 0 52.933731-962.15464 362.00362 481.804818 3.149 1 0-52.933731 962.15464Z\" fill=\"#AADCF0\" p-id=\"2633\"></path><path d=\"M688.2 334.1c-15.1 7.6-30.2 15.6-44.3 25-5.9 3.9-17 10.4-14.6 19.1 1.8 6.5 12 11.2 17.3 14.3 15.7 9.3 32.1 17.6 48.3 25.9 8.6 4.4 16.2-8.5 7.6-13-14.1-7.3-28.3-14.5-42.1-22.3-3.9-2.2-7.9-4.5-11.7-6.9-1.2-0.8-2.4-1.5-3.5-2.4-0.6-0.4-1.1-0.8-1.6-1.2 2.2 1.7-0.3-0.3-0.3-0.3-0.9 0.1-1.5-3.2-0.2 0.5 0.9 2.4 1.1 3.8 0.3 5.8 0.6-1.5-0.9 0.8-0.1 0 0.5-0.5 1-1.1 1.6-1.6 0.5-0.5 1-0.9 1.6-1.3 0.6-0.5 0 0 1.2-0.9 1.7-1.3 3.5-2.5 5.3-3.6 8.4-5.5 17.2-10.4 26-15.2 5.6-3 11.2-6 16.8-8.9 8.6-4.4 1-17.4-7.6-13zM375.8 347c13.4 6.8 26.7 14 39.5 21.9 1.8 1.2 3.7 2.3 5.5 3.5 0.9 0.6 1.7 1.2 2.6 1.8 0.9 0.6 1.9 1.4 1.6 1.1 1.1 0.9 2.1 1.9 3.1 2.8 1.2 1 0-0.3 0.1 0 0-0.2-0.8-2.4-0.3-4.1 1.5-5.5 2.3-2.7 0.8-2-0.4 0.2-0.9 0.8-1.3 1.1 1.7-1.4-1.6 1.1-2.3 1.6-3.4 2.3-6.9 4.4-10.4 6.4-14.9 8.6-30.3 16.4-45.6 24.3-8.6 4.4-1 17.4 7.6 13 15-7.7 30.1-15.4 44.8-23.8 6.2-3.6 13.8-7.3 18.7-12.7 7.6-8.3-3.8-16.6-9.9-20.9-8.7-6.1-18-11.3-27.3-16.4-6.5-3.6-13-7.1-19.6-10.4-8.6-4.5-16.3 8.5-7.6 12.8zM412.8 570.9c13.5 7.7 28.5 13.3 43.3 17.9 29.8 9.2 61.7 13.1 92.6 7.3 20.6-3.9 40-12.5 56.6-25.2 2.8-2.2 4.3-5.6 2.3-9-1.6-2.8-6.2-4.5-9-2.3-48.3 36.9-113.3 30-165.6 6.7-4.6-2.1-9.2-4.2-13.7-6.7-7.3-4.2-13.9 7.2-6.5 11.3z\" fill=\"#040000\" p-id=\"2634\"></path><path d=\"M644.6 505.2c-30.1 21.5-60.6 62.5-39.1 99.8 10.7 18.6 30.3 30.9 49.1 40.1 7.8 3.8 14.6-7.9 6.8-11.7-23.6-11.5-53.7-31.4-49.4-60.9 2.8-18.9 15.8-34.6 29.5-47.2 2.5-2.3 5.1-4.6 7.8-6.7 0.5-0.4 0.9-0.7 1.4-1.1-0.4 0.3-1.2 0.9-0.1 0.1l0.9-0.6c6.9-5.1 0.2-16.8-6.9-11.8z\" fill=\"#040000\" p-id=\"2635\"></path></svg>"
// },
// {
// "name": "13",
// "icon": "<svg t=\"1624457855182\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2789\" ><path d=\"M235.1 76.9c75.6-26.5 297.3-90.1 514.2-16.6 16.3 5.5 29.8 17.4 37.1 33 57.5 122.4 127.1 602.1 62.1 785.6a62.58 62.58 0 0 1-32.5 35.8c-109.5 51.8-428.1 136.7-609.3 37.2-14.4-7.9-25-21.3-29.7-37.1-41.9-140.6-37-627.7 19.1-798 6.1-18.7 20.5-33.4 39-39.9z\" fill=\"#F9DABD\" p-id=\"2790\"></path><path d=\"M392.2 360.2m-35.2 0a35.2 35.2 0 1 0 70.4 0 35.2 35.2 0 1 0-70.4 0Z\" fill=\"#040000\" p-id=\"2791\"></path><path d=\"M618.6 360.2m-35.2 0a35.2 35.2 0 1 0 70.4 0 35.2 35.2 0 1 0-70.4 0Z\" fill=\"#040000\" p-id=\"2792\"></path><path d=\"M512 562.6c-36 0-65.3-29.3-65.3-65.3S476 432 512 432s65.3 29.3 65.3 65.3-29.3 65.3-65.3 65.3z m0-122.9c-31.7 0-57.6 25.8-57.6 57.6s25.8 57.6 57.6 57.6c31.7 0 57.6-25.8 57.6-57.6s-25.9-57.6-57.6-57.6z\" fill=\"#040000\" p-id=\"2793\"></path></svg>"
// },
// {
// "name": "14",
// "icon": "<svg t=\"1624457863444\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"2947\" ><path d=\"M178.1 971.5c38.1 15.9 98.7 26.6 171.3-12.3 3.7-2 8.4-1.6 11.6 1.1 43.3 35.9 123.3 80.8 236 10.9 3.8-2.4 8.7-2.4 12.6-0.2 41.8 23.9 191.6 58.2 246.6 14.2 4.4-3.5 9.1-6.6 14.5-8.5C1065 909.5 678.2-652 194.3 351c-37.5 77.8-38.4 94.1-71.9 211.3-27.6 96.3-29.1 231.3 1.4 348.1 7.2 27.3 27.3 49.9 54.3 61.1z\" fill=\"#ABAAAA\" p-id=\"2948\"></path><path d=\"M468.9 349H418c-6.1 0-11.1-5-11.1-11.1V336c0-6.1 5-11.1 11.1-11.1h50.9c6.1 0 11.1 5 11.1 11.1v1.9c0 6.1-5 11.1-11.1 11.1zM643 471.9H390c-6.6 0-12-5.4-12-12s5.4-12 12-12h253c6.6 0 12 5.4 12 12s-5.4 12-12 12zM609 349h-61.2c-6 0-11-4.9-11-11v-2.1c0-6 4.9-11 11-11H609c6 0 11 4.9 11 11v2.1c0 6.1-4.9 11-11 11z\" fill=\"#040000\" p-id=\"2949\"></path></svg>"
// },
// {
// "name": "15",
// "icon": "<svg t=\"1624457870536\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"3103\" ><path d=\"M673.1 318.7c3.7-17.5 5.6-35.7 5.6-54.4 0-137.9-105.5-249.7-235.6-249.7S207.4 126.4 207.4 264.3c0 55.4 17.1 106.7 45.9 148.1-55.2 63.3-88.6 145.9-88.6 236.3 0 199.2 162.1 360.6 362.1 360.6 200 0 362.1-161.5 362.1-360.6 0.1-147.3-88.7-274-215.8-330z\" fill=\"#4F8A54\" p-id=\"3104\"></path><path d=\"M392 246.2m-47.1 0a47.1 47.1 0 1 0 94.2 0 47.1 47.1 0 1 0-94.2 0Z\" fill=\"#FFFFFF\" p-id=\"3105\"></path><path d=\"M386 252.8m-26.4 0a26.4 26.4 0 1 0 52.8 0 26.4 26.4 0 1 0-52.8 0Z\" fill=\"#040000\" p-id=\"3106\"></path><path d=\"M505.6 246.2m-47.1 0a47.1 47.1 0 1 0 94.2 0 47.1 47.1 0 1 0-94.2 0Z\" fill=\"#FFFFFF\" p-id=\"3107\"></path><path d=\"M501.4 252.8m-26.4 0a26.4 26.4 0 1 0 52.8 0 26.4 26.4 0 1 0-52.8 0Z\" fill=\"#040000\" p-id=\"3108\"></path><path d=\"M474.3 364.8h-50.9c-6.1 0-11.1-5-11.1-11.1v-1.9c0-6.1 5-11.1 11.1-11.1h50.9c6.1 0 11.1 5 11.1 11.1v1.9c0 6.2-5 11.1-11.1 11.1z\" fill=\"#040000\" p-id=\"3109\"></path></svg>"
// },
// {
// "name": "16",
// "icon": "<svg t=\"1624457876371\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"3263\" ><path d=\"M246.4 227.6c-166.9 101.1-461.9 344 87 564.1 1.5 0.6 2.9 1.1 4.4 1.6 80.7 27.7 392.8 165.4 641-198.1 40-58.6 38.5-136.2-3.7-193.3C892 289.5 727 201.1 429.1 182.7c-64.1-4-127.8 11.6-182.7 44.9z\" fill=\"#CF92BE\" p-id=\"3264\"></path><path d=\"M617.1 393.4c-17.4 8.8-34.9 18.1-51.2 28.9-6.9 4.6-20.3 12.3-17.4 22.6 1.2 4.3 5.6 7 9 9.5 3.7 2.7 7.6 5 11.5 7.3 18.2 10.8 37.1 20.3 55.9 30 10 5.1 18.9-10 8.8-15.1-16.4-8.4-32.9-16.9-49-26-4.5-2.6-9.1-5.2-13.5-8l-4.5-3c-0.7-0.5-1.3-1-2-1.5 1.6 1.2 0.7 0.4-0.2-0.2-1.3-0.9-0.3-0.9-0.5-0.3 0.2 0.2 0.4 0.5 0.6 0.7 1 1.9 1.3 3.7 0.8 5.7 0.1-0.6 0.7-1.4-0.6 1.3 0.7-1.5-0.1 0-0.2 0.1 0.6-0.6 1.2-1.3 1.9-1.9l1.8-1.5c1.8-1.6-0.6 0.3 1.2-0.9 2-1.5 4.1-2.9 6.2-4.3 10-6.5 20.4-12.4 30.9-18 6.5-3.5 13.1-7 19.7-10.4 9.6-5 0.8-20.1-9.2-15zM323.1 408.5c15.9 8.1 31.7 16.5 46.8 26 2.2 1.4 4.3 2.8 6.5 4.2 1 0.7 1.9 1.3 2.8 2 0.5 0.3 1 0.7 1.4 1.1-1.1-0.9-0.3-0.3 0.3 0.3 1.1 1 2.2 2.2 3.3 3.1 1.4 1.1-1-1.7-0.1-0.1-0.6-1.1-0.9-4.1 0.3-6.7 2.2-4.8 0.7 0.1 0-0.5 0 0-1.1 0.9-1.3 1 2.3-1.9 0 0-0.5 0.4-0.8 0.5-1.5 1.1-2.3 1.6-4 2.7-8.1 5.1-12.3 7.5-17.3 10-35.1 19.1-52.8 28.2-10 5.1-1.2 20.2 8.8 15.1 17.5-9 35-17.9 52-27.7 7.3-4.2 15.9-8.6 21.8-14.7 9.3-9.7-4.3-19.7-11.5-24.7-10.1-7.1-20.9-13.1-31.7-19-7.6-4.2-15.2-8.2-22.9-12.1-9.7-5.2-18.6 9.9-8.6 15zM513 592.1c-12.2 0-24.6-1.4-36.3-4.3-8-2-13.9-8.2-15.4-16.2s1.7-15.8 8.4-20.5c23.2-16.3 60.5-31.9 106.2-13 6.4 2.6 11 8.3 12.3 15.1 1.3 6.7-0.8 13.6-5.7 18.3-13.5 13.1-40.9 20.6-69.5 20.6z m-37.4-32.5c-3.4 2.4-4.9 6.2-4.2 10.2 0.8 4.1 3.6 7.1 7.7 8.1 39.1 9.7 81.2 0.7 96.1-13.7 2.4-2.3 3.4-5.6 2.7-8.9-0.7-3.4-2.9-6.2-6.1-7.5-41.2-17.2-75.1-3.1-96.2 11.8z\" fill=\"#040000\" p-id=\"3265\"></path></svg>"
// },
// {
// "name": "17",
// "icon": "<svg t=\"1624457881793\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"3419\" ><path d=\"M1008.6 465.7c0-124.9-95.5-226.2-213.4-226.2-12 0-23.8 1.1-35.2 3.1v-3.1c0-124.9-95.5-226.2-213.4-226.2S333.4 114.6 333.4 239.5c0 2.4 0 4.8 0.1 7.2-17.1-4.7-35-7.2-53.4-7.2-117.8 0-213.4 101.3-213.4 226.2 0 92.1 51.9 171.3 126.3 206.6-13.7 29.9-21.4 63.4-21.4 98.8 0 124.9 95.5 226.2 213.4 226.2 68.8 0 130-34.5 169-88.1 39 53.6 100.2 88.1 169 88.1 117.8 0 213.4-101.3 213.4-226.2 0-41.2-10.4-79.9-28.6-113.1 60.5-39.9 100.8-111.1 100.8-192.3z\" fill=\"#8CC66D\" p-id=\"3420\"></path><path d=\"M437.8 400.7m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z\" fill=\"#040000\" p-id=\"3421\"></path><path d=\"M649.7 400.7m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z\" fill=\"#040000\" p-id=\"3422\"></path><path d=\"M527.3 625.9c6.3-14.2 13.1-28.3 17.9-43 6.2-19 8.3-38.6 10.5-58.3l2.1-19.2c0.7-6.2-9-6.1-9.7 0-1.7 16.3-2.8 32.8-5.7 48.9-4.2 23.7-13.8 45-23.5 66.7-2.5 5.6 5.9 10.5 8.4 4.9z\" fill=\"#252525\" p-id=\"3423\"></path><path d=\"M447.7 522.3c20.3-0.1 40.6-0.2 61-0.4l96.6-0.6c7.5 0 14.9-0.1 22.4-0.1 16.6-0.1 16.7-25.9 0-25.8-20.3 0.1-40.6 0.2-61 0.4l-96.6 0.6c-7.5 0-14.9 0.1-22.4 0.1-16.6 0.1-16.7 25.9 0 25.8z\" fill=\"#040000\" p-id=\"3424\"></path><path d=\"M495.4 508.2c-10.3 3.8-9.2 20.9-9.2 29.5 0.1 16 2.1 32.3 6.1 47.8 3.5 13.7 8.7 29.9 20.6 38.7 12.9 9.5 27.6 2.1 37.6-7.9 10.2-10.3 17.8-23 24.7-35.6 11.6-21.3 20.9-43.8 29.7-66.4 3-7.8-9.5-11.1-12.5-3.4-7.4 19.1-15.3 38.1-24.7 56.4-5.9 11.5-12.2 23-20.3 33.1-2.8 3.5-5.8 6.9-9.2 9.8-1.9 1.7-1.4 1.3-3.3 2.5-1.3 0.8-2.6 1.6-3.9 2.2-0.7 0.3 1-0.2-0.8 0.3-0.6 0.2-1.2 0.3-1.8 0.5-1.1 0.3-1.2 0.2-0.5 0.1-0.6 0-1.3 0-1.9 0.1-2.2 0.1 0.6 0.5-1.8-0.2l-1.8-0.6c1.5 0.5 0.2 0.1-0.5-0.3-0.8-0.5-2.9-2.1-1.7-1.1-1-0.9-2-1.7-2.8-2.7-0.4-0.5-0.9-1-1.3-1.5 0.4 0.5 0.1 0.2-0.5-0.7-0.8-1.3-1.7-2.5-2.4-3.9-0.7-1.3-1.4-2.5-2-3.8-0.4-0.8-0.8-1.6-1.1-2.4-0.1-0.2-0.5-1.1 0 0l-0.6-1.5a86.8 86.8 0 0 1-3.3-9.8c-4.4-14.9-6.2-27.9-6.8-42.8-0.3-6.6-0.3-13.1 0.4-19.7 0.2-1.5-0.3 1.5 0.1-0.5l0.3-1.8c0.2-0.9 0.5-1.8 0.7-2.8 0.4-1.9-0.7 1.1 0.3-0.7 0.5-1-1.3 1.2-0.3 0.5-0.3 0.3-1.1 0.8-2 1.1 7.7-2.9 4.3-15.4-3.5-12.5z\" fill=\"#040000\" p-id=\"3425\"></path></svg>"
// },
// {
// "name": "18",
// "icon": "<svg t=\"1624457899440\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"3579\" ><path d=\"M75.4 739.8c-78.7-134.4-194-455.7 401.4-579.6 9.8-2 19.2-6.2 29.2-7.5C656.8 133 947.3 205 1000.1 578.4c42.6 223.8 29.7 392.1-822 233.6-43.1-8-80.6-34.4-102.7-72.2z\" fill=\"#F09495\" p-id=\"3580\"></path><path d=\"M704.6 875.4c-129 0-301.8-20.5-526.6-62.3-43.5-8.1-81.2-34.6-103.5-72.7-19.3-32.9-44.8-84.3-57.1-142.5-13.9-65.1-8.8-125.3 15.1-179.2 54.3-122.3 203.7-209.6 444-259.6 4.1-0.9 8.3-2.1 12.3-3.4 5.5-1.7 11.1-3.4 16.9-4.2 29-3.8 75.7-5.9 133.8 5.7 54.5 10.9 105.3 31 150.8 59.9C843.7 251 888.2 296 922.7 351c39.7 63.1 66.1 139.6 78.5 227.3 8.1 42.4 15.2 87.3 12.5 127.9-2.8 42.6-16.4 75.5-41.5 100.7-42.5 42.7-120.3 65-237.8 68.1-9.6 0.2-19.6 0.4-29.8 0.4zM76.3 739.3c22 37.6 59.2 63.7 102.1 71.7 242.5 45.1 424.4 65.3 556.1 61.9 116.9-3.1 194.1-25.2 236.3-67.5 55.4-55.6 44.4-142.5 28.3-226.7C976 415.8 903.4 291.5 789.2 219c-124-78.7-248.1-69.9-283.2-65.3-5.6 0.7-11.2 2.4-16.6 4.1-4.1 1.2-8.3 2.5-12.5 3.4C237.3 211.1 88.5 298 34.5 419.6c-54.6 122.8 2.8 253 41.8 319.7z\" fill=\"#FFFFFF\" p-id=\"3581\"></path><path d=\"M424.1 442.5m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z\" fill=\"#040000\" p-id=\"3582\"></path><path d=\"M635.9 442.5m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z\" fill=\"#040000\" p-id=\"3583\"></path><path d=\"M426.2 543.3c17.1 7.9 36.6 26 25.5 46.1-6.9 12.5-19.8 21.2-31.7 28.4-4.5 2.7-0.4 9.8 4.1 7.1 17.4-10.5 41.6-27.6 39-51.1-1.6-14-12.4-24.8-23.5-32.3-3-2-6.1-3.9-9.3-5.4-4.8-2.1-8.9 5-4.1 7.2zM629.5 535.4c-21.8 11.7-40.6 37-25.7 61.3 8.2 13.4 22.2 22.7 35.7 30.3 4.7 2.7 8.9-4.6 4.2-7.2-15.5-8.7-39.9-23.9-36.9-45.2 1.6-11.4 10.7-20.7 19.6-27.2 2.4-1.7 4.8-3.4 7.4-4.8 4.7-2.5 0.4-9.8-4.3-7.2z\" fill=\"#040000\" p-id=\"3584\"></path><path d=\"M457.2 584.6c25.6 25.6 66.7 41 101.8 28.3 18.2-6.6 33.2-19.1 45.5-33.8 4.2-5.1-3-12.4-7.3-7.3-18.5 22-43.3 38.1-73 35-18.6-1.9-36.2-10.8-50.9-22-2.9-2.2-6.1-4.8-8.8-7.5-4.7-4.7-12 2.6-7.3 7.3z\" fill=\"#040000\" p-id=\"3585\"></path></svg>"
// },
// {
// "name": "19",
// "icon": "<svg t=\"1624457904464\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"3739\" ><path d=\"M915.9 510.5c8.4-19 13.1-39.8 13.1-61.7 0-90-78.9-162.9-176.2-162.9-3.2 0-6.3 0.1-9.5 0.2v-0.2c0-94.8-116.2-171.6-259.6-171.6S224 191.2 224 286v2c-96.2 0-174.1 72-174.1 160.9 0 38 14.3 73 38.2 100.5-41.8 29.4-68.8 75.9-68.8 128.2 0 88.9 78 160.9 174.1 160.9 17.1 0 33.6-2.3 49.3-6.5 28.9 46.1 88.7 77.7 157.6 77.7 49.4 0 94-16.2 126-42.3 32 26.1 76.6 42.3 126 42.3 77.3 0 143-39.7 166.7-95 3.1 0.2 6.3 0.2 9.5 0.2 97.3 0 176.2-72.9 176.2-162.9 0-60.6-35.7-113.4-88.8-141.5z\" fill=\"#5A74B8\" p-id=\"3740\"></path><path d=\"M357.6 449.5a46.6 73.2 0 1 0 93.2 0 46.6 73.2 0 1 0-93.2 0Z\" fill=\"#FEFEFD\" p-id=\"3741\"></path><path d=\"M357.5 449.5a25.1 39.4 0 1 0 50.2 0 25.1 39.4 0 1 0-50.2 0Z\" fill=\"#040000\" p-id=\"3742\"></path><path d=\"M531.3 449.5a46.6 73.2 0 1 0 93.2 0 46.6 73.2 0 1 0-93.2 0Z\" fill=\"#FEFEFD\" p-id=\"3743\"></path><path d=\"M531.2 449.5a25.1 39.4 0 1 0 50.2 0 25.1 39.4 0 1 0-50.2 0Z\" fill=\"#040000\" p-id=\"3744\"></path><path d=\"M426.7 574.6c20.9 29.9 59.7 52.2 96.2 38.6 19.2-7.2 34.7-21.2 47.6-36.9 2.8-3.5 3.4-8.3 0-11.7-2.9-2.9-8.9-3.5-11.7 0-16.5 20.2-40.9 40.9-68.1 35.5-17.3-3.4-31-13.2-42.9-25.9-2-2.2-3.9-4.4-5.8-6.7-1.6-1.9 1.1 1.5-0.4-0.6-0.2-0.2-0.3-0.5-0.5-0.7-6.2-8.7-20.6-0.4-14.4 8.4z\" fill=\"#040000\" p-id=\"3745\"></path></svg>"
// },
// {
// "name": "20",
// "icon": "<svg t=\"1624457910321\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"3899\" ><path d=\"M792.8 301.4c-8.2 0-16.2 0.4-24.2 1.3-12.3-81.8-129.2-145.9-271.8-145.9-137.1 0-250.5 59.3-269.9 136.6C105.3 295.5 7.4 391.2 7.4 508.9c0 119.1 100.2 215.6 223.7 215.6 5.3 0 10.6-0.2 15.8-0.5 14.4 80.5 130.4 143.2 271.3 143.2 135.9 0 248.6-58.3 269.4-134.6 1.7 0 3.4 0.1 5.1 0.1 123.6 0 223.7-96.5 223.7-215.6s-100-215.7-223.6-215.7z\" fill=\"#F6CD50\" p-id=\"3900\"></path><path d=\"M435.9 431.5m-52.2 0a52.2 52.2 0 1 0 104.4 0 52.2 52.2 0 1 0-104.4 0Z\" fill=\"#FAFAFA\" p-id=\"3901\"></path><path d=\"M588.1 431.5m-52.2 0a52.2 52.2 0 1 0 104.4 0 52.2 52.2 0 1 0-104.4 0Z\" fill=\"#FAFAFA\" p-id=\"3902\"></path><path d=\"M435.9 431.5m-27.8 0a27.8 27.8 0 1 0 55.6 0 27.8 27.8 0 1 0-55.6 0Z\" fill=\"#040000\" p-id=\"3903\"></path><path d=\"M601.9 407.4c-5.7 2.9-11.3 5.9-16.9 9-6.8 3.8-15.3 7.8-20.5 13.8-5.6 6.5 1.6 11.1 6.7 14.4 11.2 7.1 23.3 13 35.1 19 5.7 2.9 10.8-5.7 5.1-8.6-10.9-5.6-21.9-11.1-32.4-17.4-2.4-1.4-4.6-3.1-7-4.6 1 0.6-0.4-0.4-0.4-0.4-1.9-0.3-0.5 4.2 0.5 4.1-0.1 0-0.6 0.3 0.3-0.3 0.5-0.3 1-0.9 1.5-1.3 9.7-7.9 21.9-13.5 33.1-19.2 5.7-2.7 0.6-11.4-5.1-8.5zM406.6 547.6c11.5 14.4 27 26.7 42.7 36.3 32.2 19.8 71.2 27.2 107.6 15.4 29.5-9.6 54.6-29.1 75.5-51.6 10.8-11.6-6.6-29.1-17.5-17.5-9.4 10.1-19.5 19.7-30.8 27.7-4.6 3.2-9.3 6.2-14.2 8.9-5 2.8-9.9 5.1-14.1 6.7-4.6 1.7-9.3 3.2-14.1 4.4-2.2 0.5-4.4 1-6.6 1.4-1 0.2-2 0.3-2.9 0.5 2.6-0.4-2.1 0.2-2.5 0.3-4.1 0.4-8.3 0.5-12.5 0.4-2.2-0.1-4.4-0.2-6.6-0.4-1.1-0.1-2.2-0.2-3.2-0.3-1.5-0.2-1.4-0.2 0.1 0l-2.1-0.3c-7.8-1.3-15.4-3.4-22.8-6.2-0.9-0.4-1.8-0.7-2.8-1.1-3.1-1.2 2.3 1.1-0.7-0.3-1.5-0.7-2.9-1.3-4.4-2-3.7-1.8-7.2-3.7-10.8-5.8-5.7-3.4-11.1-7.1-16.4-11.1 3 2.3-1.1-0.9-1.8-1.5-1.1-0.9-2.1-1.7-3.1-2.6-2.1-1.8-4.2-3.7-6.3-5.6-4.4-4.1-8.7-8.4-12.4-13.1-4.2-5.2-13.1-4.3-17.5 0-5 5.1-4 12.2 0.2 17.4z\" fill=\"#040000\" p-id=\"3904\"></path></svg>"
// }
// ]
// },
{
"name": "标记图标",
"type": "sign",
"list": [
{
"name": "1",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M809.728 429.696a18.901333 18.901333 0 0 0-15.274667-12.885333l-183.466666-26.624-81.92-166.272a18.901333 18.901333 0 0 0-34.005334 0l-81.92 166.272-183.594666 26.624a19.029333 19.029333 0 0 0-10.496 32.298666l132.693333 129.536-31.274667 182.741334a18.816 18.816 0 0 0 27.477334 19.84l164.138666-86.186667 164.096 86.058667a18.773333 18.773333 0 1 0 27.434667-19.84l-31.36-182.741334 132.693333-129.408a18.901333 18.901333 0 0 0 4.778667-19.413333z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "2",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M644.565333 306.901333c32.128 0 65.834667-5.76 101.077334-17.237333a17.066667 17.066667 0 0 1 22.357333 16.213333v328.32c-1.109333 0.768 10.325333 27.093333-99.370667 19.84-109.653333-7.210667-181.76-45.098667-246.869333-45.098666-65.152 0-49.322667 2.688-74.154667 8.405333v168.064a24.746667 24.746667 0 0 1-24.490666 25.258667 22.528 22.528 0 0 1-17.28-7.253334 24.149333 24.149333 0 0 1-7.168-18.005333V281.258667C299.776 280.490667 328.106667 256 421.76 256s164.437333 50.901333 222.805333 50.901333z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "3",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M524.074667 225.408l274.517333 274.517333a17.066667 17.066667 0 0 1 0 24.149334l-274.517333 274.517333a17.066667 17.066667 0 0 1-24.149334 0l-274.517333-274.517333a17.066667 17.066667 0 0 1 0-24.149334l274.517333-274.517333a17.066667 17.066667 0 0 1 24.149334 0z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "4",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M317.866667 300.8h388.266666c9.386667 0 17.066667 7.68 17.066667 17.066667v388.266666a17.066667 17.066667 0 0 1-17.066667 17.066667h-388.266666a17.066667 17.066667 0 0 1-17.066667-17.066667v-388.266666c0-9.386667 7.68-17.066667 17.066667-17.066667z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "5",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M498.346667 279.082667L248.789333 701.44a15.829333 15.829333 0 0 0 13.653334 23.893333h499.114666a15.829333 15.829333 0 0 0 13.653334-23.893333l-249.6-422.357333a15.829333 15.829333 0 0 0-27.264 0z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "6",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M497.749333 798.549333l-31.445333-28.501333C313.941333 631.722667 213.333333 540.501333 213.333333 428.8a160.981333 160.981333 0 0 1 162.730667-162.730667c51.498667 0 100.906667 23.978667 133.12 61.696a177.536 177.536 0 0 1 133.162667-61.696 160.981333 160.981333 0 0 1 162.730666 162.730667c0 111.701333-100.608 202.965333-252.970666 341.333333l-31.445334 28.458667a17.066667 17.066667 0 0 1-22.912 0z\" fill=\"#FFFFFF\"></path><path d=\"M634.538667 487.808L555.050667 426.24 507.306667 256a201.002667 201.002667 0 0 0-23.594667 20.394667l-0.256-0.256L525.653333 426.666667l-133.290666 59.946666a14.08 14.08 0 0 0-8.021334 15.957334l28.757334 126.378666a14.208 14.208 0 0 0 27.733333-6.229333l-26.24-115.114667 126.037333-56.704 76.416 59.136a14.250667 14.250667 0 0 0 19.968-2.474666 14.08 14.08 0 0 0-2.474666-19.797334z\" fill=\"#6D768D\"></path></svg>"
},
{
"name": "7",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M497.749333 798.549333l-31.445333-28.501333C313.941333 631.722667 213.333333 540.501333 213.333333 428.8a160.981333 160.981333 0 0 1 162.730667-162.730667c51.498667 0 100.906667 23.978667 133.12 61.696a177.536 177.536 0 0 1 133.162667-61.696 160.981333 160.981333 0 0 1 162.730666 162.730667c0 111.701333-100.608 202.965333-252.970666 341.333333l-31.445334 28.458667a17.066667 17.066667 0 0 1-22.912 0z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "8",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M374.656 273.194667c5.973333 4.48 12.117333 9.6 18.346667 15.36 6.272 5.717333 11.904 12.373333 16.896 19.84 2.517333 4.010667 5.504 8.490667 9.002666 13.482666a529.493333 529.493333 0 0 1 20.266667 32.213334h155.221333a169.813333 169.813333 0 0 0 9.770667-15.744c2.474667-4.48 5.248-8.96 8.234667-13.482667a460.842667 460.842667 0 0 1 23.253333-31.829333c4.992-6.229333 12.245333-12.373333 21.76-18.346667a34.261333 34.261333 0 0 0 10.112-9.728 31.274667 31.274667 0 0 0 5.248-11.989333 18.56 18.56 0 0 0-1.536-11.605334 17.664 17.664 0 0 0-10.112-8.618666c-4.48-1.493333-8.362667-2.005333-11.605333-1.493334a46.933333 46.933333 0 0 0-9.770667 2.602667c-3.242667 1.28-6.613333 2.645333-10.112 4.138667a32.426667 32.426667 0 0 1-12.757333 2.261333 26.026667 26.026667 0 0 1-12.373334-2.645333 45.653333 45.653333 0 0 1-8.96-6.357334l-8.661333-7.850666a30.336 30.336 0 0 0-11.989333-6.4c-9.984-3.968-18.005333-4.693333-24.021334-2.218667-5.973333 2.474667-11.946667 6.485333-17.962666 11.946667a88.618667 88.618667 0 0 1-11.989334 10.496 7.338667 7.338667 0 0 1-3.754666 1.493333 46.165333 46.165333 0 0 1-8.277334-5.205333 71.808 71.808 0 0 1-7.125333-4.906667 37.973333 37.973333 0 0 1-6.4-6.357333c-3.968-3.968-9.941333-6.613333-17.92-7.850667a31.061333 31.061333 0 0 0-21.76 4.138667c-8.533333 5.461333-14.506667 10.069333-18.048 13.824a29.354667 29.354667 0 0 1-15.744 7.893333 23.978667 23.978667 0 0 1-13.098667-0.768 987.733333 987.733333 0 0 0-14.634666-4.48 80.725333 80.725333 0 0 0-14.250667-2.986667 16.768 16.768 0 0 0-11.989333 2.986667c-6.997333 5.461333-9.258667 12.074667-6.741334 19.84a34.56 34.56 0 0 0 13.482667 18.346667z\" fill=\"#FFFFFF\"></path><path d=\"M780.757333 545.152a219.306667 219.306667 0 0 0-19.882666-65.536 224.981333 224.981333 0 0 0-33.365334-49.792 430.336 430.336 0 0 0-37.12-37.12c-14.506667-11.946667-27.264-23.296-38.272-34.048a544.512 544.512 0 0 1-27.733333-28.842667 305.28 305.28 0 0 1-22.485333-26.197333h-168.746667c-6.485333 8.490667-13.994667 17.493333-22.485333 26.965333a360.96 360.96 0 0 1-26.24 28.074667c-10.538667 10.24-22.272 21.12-35.285334 32.597333a305.493333 305.493333 0 0 0-41.6 44.16 250.026667 250.026667 0 0 0-49.493333 117.589334 216.106667 216.106667 0 0 0 1.877333 70.4 220.586667 220.586667 0 0 0 75.349334 126.549333c21.248 18.005333 47.146667 32.597333 77.653333 43.818667 30.464 11.264 65.493333 16.853333 104.96 16.853333 38.528 0 72.874667-4.864 103.125333-14.592a265.045333 265.045333 0 0 0 78.378667-39.338667c21.973333-16.469333 39.594667-35.797333 52.864-58.026666 13.226667-22.186667 22.101333-45.824 26.624-70.784 4.992-30.421333 5.632-58.026667 1.877333-82.773334z\" fill=\"#FFFFFF\"></path><path d=\"M593.322667 647.509333a20.48 20.48 0 0 1-11.861334 3.2h-50.133333v14.165334c0 4.266667-1.792 8.362667-5.376 12.373333a15.914667 15.914667 0 0 1-13.952 5.333333 24.917333 24.917333 0 0 1-14.336-3.882666c-3.84-2.602667-5.973333-7.210667-6.4-13.824v-14.165334h-48.725333a17.792 17.792 0 0 1-11.818667-3.882666 10.24 10.24 0 0 1-3.968-9.6c0-4.266667 1.578667-7.68 4.693333-10.24a16.768 16.768 0 0 1 11.093334-3.925334h48.682666v-24.789333h-48.682666a15.573333 15.573333 0 0 1-11.52-4.266667 13.525333 13.525333 0 0 1-4.266667-9.941333 15.36 15.36 0 0 1 4.693333-10.624 14.72 14.72 0 0 1 11.093334-4.949333h48.682666l0.725334-14.890667a1053.568 1053.568 0 0 1-40.832-42.538667l-10.752-9.898666a41.216 41.216 0 0 1-6.442667-11.690667c-1.92-4.992-0.938667-10.069333 2.858667-15.274667a13.653333 13.653333 0 0 1 15.786666-3.84c6.186667 2.090667 11.221333 4.821333 15.018667 8.106667 1.92 2.389333 5.248 5.888 10.026667 10.666667l15.061333 14.848 19.328 19.157333 22.186667-20.565333a987.605333 987.605333 0 0 1 29.397333-25.514667 21.162667 21.162667 0 0 1 14.293333-5.674667c5.290667 0 9.557333 2.133333 12.928 6.4 6.186667 7.082667 3.84 15.36-7.168 24.789334a179.072 179.072 0 0 0-12.885333 12.373333c-5.76 5.973333-11.52 11.733333-17.194667 17.408-6.698667 7.082667-14.08 14.378667-22.186666 21.973333v13.44h46.506666c6.698667 0 11.605333 1.536 14.72 4.608a14.165333 14.165333 0 0 1 4.650667 10.282667c0 4.266667-1.450667 7.936-4.309333 11.008-2.858667 3.029333-7.637333 4.352-14.336 3.84l-46.506667 0.768-0.768 24.064h45.866667c13.354667 0 20.053333 4.992 20.053333 14.933333 0.469333 4.693333-0.853333 8.106667-3.925333 10.24z\" fill=\"#6D768D\"></path></svg>"
},
{
"name": "9",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M512 213.333333l234.666667 341.333334h-128v213.333333h-213.333334v-213.333333h-128L512 213.333333z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "10",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M533.333333 810.666667L298.666667 469.333333h128V256h213.333333v213.333333h128l-234.666667 341.333334z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "11",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M213.333333 533.333333L554.666667 298.666667v128h213.333333v213.333333h-213.333333v128l-341.333334-234.666667z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "12",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M810.666667 533.333333L469.333333 768v-128H256v-213.333333h213.333333V298.666667l341.333334 234.666666z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "13",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 512c0 282.752 229.248 512 512 512s512-229.248 512-512S794.752 0 512 0 0 229.248 0 512z\" fill=\"#6D768D\"></path><path d=\"M571.349333 508.586667l162.389334-162.346667a44.330667 44.330667 0 1 0-62.72-62.72l-162.389334 162.389333-162.517333-162.389333a44.330667 44.330667 0 1 0-62.72 62.72l162.389333 162.389333-162.389333 162.474667a44.330667 44.330667 0 1 0 62.72 62.72l162.389333-162.346667 162.389334 162.389334a44.330667 44.330667 0 1 0 62.72-62.72l-162.261334-162.56z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "14",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 0C233.386667 0 0 225.877333 0 512s225.877333 512 512 512 512-225.877333 512-512S790.613333 0 512 0z\" fill=\"#6D768D\"></path><path d=\"M726.144 311.210667l-277.333333 305.066666-124.8-124.8c-13.866667-13.866667-41.6-13.866667-55.466667 0-13.866667 13.866667-13.866667 41.6 0 55.466667l159.445333 152.533333c13.866667 13.866667 41.6 13.866667 55.466667 0l305.066667-332.8c13.866667-13.866667 13.866667-41.6 0-55.466666-20.778667-13.866667-48.512-13.866667-62.378667 0z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "15",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M541.952 755.626667a40.618667 40.618667 0 0 1-29.824 12.373333 41.344 41.344 0 0 1-30.122667-12.373333 40.106667 40.106667 0 0 1-12.672-30.122667c0-11.605333 4.096-21.845333 12.672-30.122667a40.405333 40.405333 0 0 1 30.122667-12.714666c11.605333 0 21.546667 4.138667 29.824 12.714666a40.32 40.32 0 0 1 12.714667 30.122667c0 11.861333-4.096 21.76-12.714667 30.122667zM450.986667 241.28A77.866667 77.866667 0 0 1 512.256 213.333333c24.874667 0 45.354667 8.917333 61.354667 27.946667 15.488 18.432 23.722667 41.685333 23.722666 69.674667 0 23.765333-33.152 200.533333-44.672 329.045333h-80.128C463.146667 511.402667 426.666667 334.677333 426.666667 310.954667c0-27.392 8.277333-50.645333 24.32-69.674667z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "16",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.794667 0 512 0z\" fill=\"#6D768D\"></path><path d=\"M490.666667 682.666667a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m13.994666-490.752c61.397333 0 112.341333 14.634667 153.002667 43.946666 40.533333 29.269333 60.885333 72.618667 60.885333 130.133334 0 35.242667-12.373333 64.938667-29.952 89.045333-10.282667 14.677333-33.664 33.408-62.890666 56.192l-32.426667 22.357333c-15.701333 12.202667-29.696 26.453333-34.858667 42.666667-1.706667 5.546667-3.072 14.677333-3.968 24.533333-0.426667 4.949333-4.864 15.018667-15.232 15.018667h-83.328c-13.568 0-15.957333-10.581333-15.744-15.786667 1.493333-34.005333 4.608-64.213333 18.474667-80.469333 28.074667-32.896 91.904-73.813333 91.904-73.813333a104.106667 104.106667 0 0 0 23.552-24.021334c10.837333-14.933333 19.797333-31.317333 19.797333-49.237333 0-20.565333-6.016-39.338667-18.090666-56.32-12.032-16.938667-34.090667-25.386667-66.005334-25.386667-31.445333 0-53.76 10.410667-66.901333 31.274667-9.685333 15.445333-15.786667 29.610667-18.346667 45.013333-0.853333 5.461333-4.394667 16.981333-16.042666 16.981334H327.210667c-17.322667 0-21.12-11.221333-20.650667-16.64 6.272-68.138667 32.896-114.688 80-144.597334 32-20.565333 71.381333-30.890667 118.101333-30.890666z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "17",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M336.256 410.026667H253.312a40.021333 40.021333 0 0 0-39.850667 43.264l23.296 278.101333c1.706667 20.693333 19.072 36.608 39.850667 36.608h59.648c11.050667 0 20.010667-8.96 20.010667-19.968v-318.037333a19.968 19.968 0 0 0-20.010667-19.968z m434.432 0h-178.944C653.312 182.314667 548.949333 170.666667 548.949333 170.666667c-44.288 0-35.114667 34.986667-38.442666 40.832 0 84.48-68.010667 155.093333-101.034667 184.362666a39.552 39.552 0 0 0-13.226667 29.653334v322.56c0 11.008 8.96 19.925333 20.010667 19.925333h233.728c30.378667 0 58.154667-17.152 71.68-44.373333 18.176-36.736 40.448-90.112 54.656-133.973334 13.781333-42.410667 26.24-94.976 33.578667-131.968a39.850667 39.850667 0 0 0-39.253334-47.658666z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "18",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M796.16 413.909333c-31.146667-0.298667-115.626667-0.085333-146.858667-0.085333h-158.464c8.533333-7.68 15.914667-14.506667 23.594667-20.906667 29.781333-24.874667 25.813333-71.082667-14.208-88.874666-22.954667-10.24-44.970667-5.632-64 11.52-34.944 31.274667-69.632 62.677333-104.277333 93.994666a15.488 15.488 0 0 1-11.178667 4.437334c-11.221333-0.085333-26.88-0.128-46.933333-0.170667a17.066667 17.066667 0 0 0-17.109334 17.066667L256 719.701333a17.066667 17.066667 0 0 0 17.066667 17.152l49.578666-0.085333c3.968 0 7.466667 0.768 10.88 2.602667 15.829333 8.832 31.701333 17.493333 47.616 26.24a18.133333 18.133333 0 0 0 9.301334 2.346666h168.405333c6.186667 0 11.946667-0.981333 17.834667-2.56 29.44-7.253333 40.021333-30.293333 38.528-52.565333-0.768-9.728-4.266667-18.346667-9.984-26.24 19.626667-5.76 35.114667-16.213333 42.112-36.096 7.125333-20.394667 1.621333-38.4-12.672-53.333333 28.16-19.754667 34.858667-44.672 18.645333-75.648h140.458667c6.570667 0 13.013333-0.597333 19.370666-2.645334 31.957333-9.813333 48.810667-42.88 35.626667-71.552-10.154667-22.186667-28.629333-33.152-52.608-33.450666z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "19",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M270.506667 413.909333c31.146667-0.298667 115.626667-0.085333 146.858666-0.085333h158.464c-8.533333-7.68-15.914667-14.506667-23.594666-20.906667-29.781333-24.874667-25.813333-71.082667 14.208-88.874666 22.954667-10.24 44.970667-5.632 64 11.52 34.944 31.274667 69.632 62.677333 104.277333 93.994666 3.413333 2.986667 6.528 4.437333 11.178667 4.437334 11.221333-0.085333 26.88-0.128 46.933333-0.170667a17.066667 17.066667 0 0 1 17.109333 17.066667l0.682667 288.853333a17.066667 17.066667 0 0 1-17.066667 17.152l-49.578666-0.085333a22.101333 22.101333 0 0 0-10.88 2.602666c-15.829333 8.832-31.701333 17.493333-47.616 26.24a18.133333 18.133333 0 0 1-9.301334 2.346667h-168.405333a68.693333 68.693333 0 0 1-17.834667-2.56c-29.44-7.253333-40.021333-30.293333-38.528-52.565333 0.768-9.728 4.266667-18.346667 9.984-26.24-19.626667-5.76-35.114667-16.213333-42.112-36.096-7.125333-20.394667-1.621333-38.4 12.672-53.333334-28.16-19.754667-34.858667-44.672-18.645333-75.648H272.853333c-6.570667 0-13.013333-0.597333-19.370666-2.645333-31.957333-9.813333-48.810667-42.88-35.626667-71.552 10.154667-22.186667 28.629333-33.152 52.608-33.450667z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "20",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M667.733333 480.128H400v-111.36a97.706667 97.706667 0 0 1 97.621333-97.621333 97.706667 97.706667 0 0 1 97.578667 97.621333 28.885333 28.885333 0 0 0 57.813333 0A155.605333 155.605333 0 0 0 497.621333 213.333333a155.605333 155.605333 0 0 0-155.392 155.434667v111.36h-14.677333A28.885333 28.885333 0 0 0 298.666667 509.013333v292.010667a28.885333 28.885333 0 0 0 28.885333 28.885333h340.138667a28.885333 28.885333 0 0 0 28.928-28.885333V509.013333a28.885333 28.885333 0 0 0-28.928-28.885333z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "21",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M400.042667 437.461333v-111.36a97.706667 97.706667 0 0 1 97.621333-97.621333 97.706667 97.706667 0 0 1 97.578667 97.621333 28.885333 28.885333 0 0 0 57.813333 0A155.605333 155.605333 0 0 0 497.621333 170.666667a155.605333 155.605333 0 0 0-155.392 155.434666v111.36h-14.677333A28.885333 28.885333 0 0 0 298.666667 466.346667v292.010666a28.885333 28.885333 0 0 0 28.885333 28.885334h340.138667a28.885333 28.885333 0 0 0 28.928-28.885334V466.346667a28.885333 28.885333 0 0 0-28.928-28.885334H400.042667z\" fill=\"#FFFFFF\"></path><path d=\"M595.242667 437.461333v-111.36a97.706667 97.706667 0 0 0-97.621334-97.621333 97.706667 97.706667 0 0 0-97.578666 97.621333 28.885333 28.885333 0 0 1-57.813334 0A155.605333 155.605333 0 0 1 497.621333 170.666667a155.605333 155.605333 0 0 1 155.434667 155.434666v111.36h14.634667c16 0 28.928 12.928 28.928 28.885334v292.010666a28.885333 28.885333 0 0 1-28.928 28.885334H327.552A28.885333 28.885333 0 0 1 298.666667 758.357333V466.346667c0-15.957333 12.928-28.885333 28.885333-28.885334h267.690667z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "22",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M511.999787 512.000213m-511.999787 0a511.999787 511.999787 0 1 0 1023.999573 0 511.999787 511.999787 0 1 0-1023.999573 0Z\" fill=\"#6D768D\"></path><path d=\"M381.354508 364.586941c0 54.015977 29.013321 103.935957 75.946635 130.986613a152.53327 152.53327 0 0 0 151.935936 0 151.12527 151.12527 0 0 0 75.946636-130.986613A151.594604 151.594604 0 0 0 533.333111 213.333671a151.594604 151.594604 0 0 0-151.89327 151.25327zM660.479725 498.901552a185.258589 185.258589 0 0 1-127.146614 50.346646c-49.066646 0-93.866628-19.199992-127.06128-50.346646C317.141201 544.853533 255.999893 637.440161 255.999893 744.106783c0 13.183995 10.709329 23.850657 23.978657 23.850657h506.709122a23.893323 23.893323 0 0 0 23.978657-23.893323c0-106.538622-61.098641-199.25325-150.186604-245.205232z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "23",
"icon": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#6D768D\"></path><path d=\"M445.610667 401.578667a129.322667 129.322667 0 1 0 258.645333 0 129.322667 129.322667 0 0 0-258.645333 0z m237.568 114.901333a157.354667 157.354667 0 0 1-216.362667 0 236.373333 236.373333 0 0 0-127.957333 209.706667c0 11.264 9.130667 20.394667 20.394666 20.394666h431.402667a20.394667 20.394667 0 0 0 20.394667-20.394666 236.373333 236.373333 0 0 0-127.872-209.706667zM409.813333 401.578667c0-40.362667 14.592-77.397333 38.698667-106.112a112.725333 112.725333 0 0 0-29.013333-3.925334 112.64 112.64 0 0 0-112.426667 112.469334 112.64 112.64 0 0 0 144.853333 107.648 164.693333 164.693333 0 0 1-42.112-110.08z m-18.602666 136.704a136.533333 136.533333 0 0 1-65.706667-34.474667 205.44 205.44 0 0 0-111.232 182.4c0 9.813333 7.936 17.706667 17.706667 17.706667H303.36a273.621333 273.621333 0 0 1 87.893333-165.632z\" fill=\"#FFFFFF\"></path></svg>"
},
{
"name": "24",
"icon": "<svg t=\"1711678952933\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"9423\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><path d=\"M512 0a512 512 0 1 1-512 512 512 512 0 0 1 512-512z\" fill=\"#d81e06\" p-id=\"9424\" data-spm-anchor-id=\"a313x.search_index.0.i0.75173a81IqvolW\" class=\"selected\"></path><path d=\"M292.571429 292.571429h438.857142v512L523.702857 676.571429 292.571429 804.571429z\" fill=\"#ffffff\" p-id=\"9425\" data-spm-anchor-id=\"a313x.search_index.0.i1.75173a81IqvolW\" class=\"selected\"></path></svg>"
},
{
"name": "25",
"icon": "<svg t=\"1711680537406\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"28748\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#d81e06\" p-id=\"28749\" data-spm-anchor-id=\"a313x.search_index.0.i32.71b33a815P0jmI\" class=\"selected\"></path><path d=\"M512 672l-188.096 98.88 35.904-209.408-152.128-148.352 210.304-30.592L512 192l94.08 190.528 210.24 30.592-152.128 148.352 35.84 209.408z\" fill=\"#FFFFFF\" p-id=\"28750\"></path></svg>"
},
{
"name": "26",
"icon": "<svg t=\"1711680346925\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"26083\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><path d=\"M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z\" fill=\"#F49712\" p-id=\"26084\"></path><path d=\"M780.97 315.453c0-20.028-10.152-24.101-10.152-24.101-11.438-8.554-26.057-0.407-26.057-0.407-37.834 21.656-81.014 18.33-81.014 18.33-46.158 4.073-86.834-22.472-86.834-22.472C528.048 257.407 467.948 257 467.948 257c-38.51 0-88.594 16.837-88.594 16.837v0.203c-3.722-9.912-13.197-17.04-24.297-17.04C340.709 257 329 268.745 329 283.137v506.726C329 804.255 340.709 816 355.057 816c14.348 0 26.057-11.745 26.057-26.137V576.012c33.84-22.88 85.006-21.182 85.006-21.182 52.453-3.326 87.579 22.471 87.579 22.471 62.334 31.84 109.168 28.582 109.168 28.582 59.897 0 106.326-25.73 106.326-25.73 12.995-6.45 11.777-23.218 11.777-23.218V315.453z\" fill=\"#FFFFFF\" p-id=\"26085\"></path></svg>"
}
]
},
{
"name": "附件图标",
"type": "fileIcon",
"list": [
{
"name": "1",
"icon": "<svg t=\"1711691493912\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"14045\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><path d=\"M511.943829 0a511.971914 511.971914 0 1 0 512.140428 512A511.943829 511.943829 0 0 0 511.943829 0z m64.063192 444.426111l-204.856171 204.856171a32.579265 32.579265 0 0 0 46.088426 46.088426l55.946462-55.946462 148.853538-148.853538 93.693472-93.693473a97.625453 97.625453 0 1 0-138.096763-138.012507L525.200219 311.300494l-190.111245 190.167416-41.229621 41.089194a151.914866 151.914866 0 0 0 214.826549 214.826549l231.284696-231.425123a21.738234 21.738234 0 0 1 30.837959 30.64136l-231.340866 231.340867a195.335162 195.335162 0 1 1-276.193528-276.277784l41.173451-41.17345 190.167416-190.251673 52.435765-52.239167a141.045749 141.045749 0 0 1 199.40757 199.40757l-93.777729 93.693473-148.853538 148.853538-56.030718 55.946462a75.915304 75.915304 0 0 1-107.371147-107.371147l203.845091-203.84509 0.140428-0.140428 0.870652-0.870653 0.140428 0.224685a21.513549 21.513549 0 0 1 30.472847 30.360504l0.140428 0.224685z\" fill=\"#3377FF\" p-id=\"14046\"></path></svg>"
}
]
},
{
"name": "核心流程",
"type": "coreProcess",
"list": [
{
"name": "1",
"icon": "<svg t=\"1711699101284\" class=\"icon\" viewBox=\"0 0 1053 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"24546\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><path d=\"M500.388718 890.177829l-238.036115 127.210057a56.144457 56.144457 0 0 1-76.361142-24.107886 58.192457 58.192457 0 0 1-5.646629-36.4544l50.410057-299.008-213.694171-211.997257a58.221714 58.221714 0 0 1-0.994743-81.334857c8.660114-9.069714 20.0704-14.921143 32.3584-16.822857l295.438628-43.593143 132.066743-272.003657a56.202971 56.202971 0 0 1 101.434515 0l132.066742 272.120685 295.438629 43.593143c30.866286 4.593371 52.311771 33.792 47.776914 65.155657-1.755429 12.4928-7.519086 24.078629-16.530285 32.885029l-213.8112 211.821714L872.715118 956.708571c5.266286 31.217371-15.447771 61.059657-46.167772 66.413715-12.288 2.165029-24.810057 0.117029-35.869257-5.7344l-237.860571-127.093029a55.003429 55.003429 0 0 0-52.4288-0.117028z\" fill=\"#F5A623\" p-id=\"24547\"></path></svg>"
}
]
}
]
export default iconList
2.3、simpleMindMap/themeConfig.js【脑图主图配置】：
// 默认主题
let themeConfig = {
// 节点内边距
paddingX: 15,
paddingY: 5,
// 图片显示的最大宽度
imgMaxWidth: 100,
// 图片显示的最大高度
imgMaxHeight: 100,
// icon的大小
iconSize: 20,
// 连线的粗细
lineWidth: 1,
// 连线的颜色
lineColor: '#549688',
// 连线样式
lineDasharray: 'none',
// 连线风格
lineStyle: 'straight', // 曲线（curve）【仅支持logicalStructure、mindMap、verticalTimeline三种结构】、直线（straight）、直连（direct）【仅支持logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构】
// 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型。仅支持logicalStructure、mindMap两种结构
rootLineKeepSameInCurve: true,
// 曲线连接时，根节点和其他节点的连线起始位置保持统一，默认根节点的连线起始位置在节点中心，其他节点在节点右侧，如果该配置设为true，那么根节点的连线起始位置也会在节点右侧
rootLineStartPositionKeepSameInCurve: false,
// 直线连接(straight)时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构
lineRadius: 5,
// 连线是否显示标记，目前只支持箭头
showLineMarker: false,
// 概要连线的粗细
generalizationLineWidth: 2,
// 概要连线的颜色
generalizationLineColor: '#549688',
// 概要曲线距节点的距离
generalizationLineMargin: 10,
// 概要节点距节点的距离
generalizationNodeMargin: 30,
// 关联线默认状态的粗细
associativeLineWidth: 2,
// 关联线默认状态的颜色
associativeLineColor: 'rgb(51, 51, 51)',
// 关联线激活状态的粗细
associativeLineActiveWidth: 8,
// 关联线激活状态的颜色
associativeLineActiveColor: 'rgba(2, 167, 240, 1)',
// 关联线文字颜色
associativeLineTextColor: 'rgb(51, 51, 51)',
// 关联线文字大小
associativeLineTextFontSize: 14,
// 关联线文字行高
associativeLineTextLineHeight: 1.2,
// 关联线文字字体
associativeLineTextFontFamily: '微软雅黑, Microsoft YaHei',
// 背景颜色
backgroundColor: '#ffffff',
// 背景图片
backgroundImage: 'none',
// 背景重复
backgroundRepeat: 'no-repeat',
// 设置背景图像的起始位置
backgroundPosition: 'center center',
// 设置背景图片大小
backgroundSize: 'cover',
// 节点使用只有底边横线的样式，仅支持logicalStructure、mindMap、catalogOrganization、organizationStructure四种结构
nodeUseLineStyle: false,
// 根节点样式
root: {
shape: 'rectangle',
fillColor: '#549688',
fontFamily: '微软雅黑, Microsoft YaHei',
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
fontStyle: 'normal',
lineHeight: 1.5,
borderColor: 'transparent',
borderWidth: 0,
borderDasharray: 'none',
borderRadius: 5,
textDecoration: 'none',
gradientStyle: false,
startColor: '#549688',
endColor: '#fff',
// 连线标记的位置，start（头部）、end（尾部），该配置在showLineMarker配置为true时生效
lineMarkerDir: 'end'
},
// 二级节点样式
second: {
shape: 'rectangle',
marginX: 100,
marginY: 40,
fillColor: '#fff',
fontFamily: '微软雅黑, Microsoft YaHei',
color: '#565656',
fontSize: 16,
fontWeight: 'noraml',
fontStyle: 'normal',
lineHeight: 1.5,
borderColor: '#549688',
borderWidth: 1,
borderDasharray: 'none',
borderRadius: 5,
textDecoration: 'none',
gradientStyle: false,
startColor: '#549688',
endColor: '#fff',
lineMarkerDir: 'end'
},
// 三级及以下节点样式
node: {
shape: 'rectangle',
marginX: 50,
marginY: 5,
fillColor: 'transparent',
fontFamily: '微软雅黑, Microsoft YaHei',
color: '#6a6d6c',
fontSize: 14,
fontWeight: 'noraml',
fontStyle: 'normal',
lineHeight: 1.5,
borderColor: '#549688',
borderWidth: 1,
borderRadius: 5,
borderDasharray: 'none',
textDecoration: 'none',
gradientStyle: false,
startColor: '#549688',
endColor: '#fff',
lineMarkerDir: 'end'
},
// 概要节点样式
generalization: {
shape: 'rectangle',
marginX: 100,
marginY: 40,
fillColor: '#fff',
fontFamily: '微软雅黑, Microsoft YaHei',
color: '#565656',
fontSize: 16,
fontWeight: 'noraml',
fontStyle: 'normal',
lineHeight: 1.5,
borderColor: '#549688',
borderWidth: 1,
borderDasharray: 'none',
borderRadius: 5,
textDecoration: 'none',
gradientStyle: false,
startColor: '#549688',
endColor: '#fff'
}
}
export default themeConfig
3、创建脑图vue组件
3.1、simpleMindMap/index.vue
<template>
<div class="simpleMindMap">
<div class="toolbarContainer">
<div class="toolbar">
<div class="toolbarBlock">
<div class="toolbarNodeBtnList">
<!-- <div class="toolbarBtn">
<w-button icon="w-icon-reply" size="mini" style="width:100%;" :disabled="isStart" @click="backNode()"></w-button>
<span class="text">回退</span>
</div>
<div class="toolbarBtn">
<w-button icon="w-icon-repost" size="mini" style="width:100%;" :disabled="isEnd" @click="forwardNode()"></w-button>
<span class="text">前进</span>
</div> -->
<div class="toolbarBtn">
<w-select v-model="themeVal" placeholder="请选择" ref="select" style="width: 120px;" @change="themeChange">
<w-option v-for="(item, index) in themeList" :key="index" :label="item.name" :value="item.value"></w-option>
</w-select>
<span class="text">主题</span>
</div>
<div class="toolbarBtn">
<w-button icon="w-icon-list-solid" size="mini" style="width:100%;" :disabled="!(activeNodes.length > 0 && !hasRoot && !hasGeneralization)" @click="addPeerNode()"></w-button>
<span class="text">同级节点</span>
</div>
<div class="toolbarBtn">
<w-button icon="w-icon-list-tree" size="mini" style="width:100%;" :disabled="!(activeNodes.length > 0 && !hasGeneralization)" @click="addChildNode()"></w-button>
<span class="text">子节点</span>
</div>
<div class="toolbarBtn">
<w-button icon="w-icon-delete" size="mini" style="width:100%;" :disabled="!(activeNodes.length > 0)" @click="removeNode()"></w-button>
<span class="text">删除节点</span>
</div>
<div class="toolbarBtn">
<w-popover trigger="hover" title="" :disabled="!(activeNodes.length > 0)" placement="bottom-end" :popper-class="'iconBodyList'">
<w-list split style="max-width: 380px;overflow: hidden;overflow-y: auto;" class="iconList-list">
<w-list-item v-for="(item, index) in NodeIconList" :key="index">
<w-list-item-meta :title="item.name">
<div slot="description">
<div class="icon-list">
<div class="icon-item" :class="cItem.isChecked ? 'icon-item-actived' : ''" v-for="(cItem, j) in item.list" :key="j" v-html="cItem.icon" @click="addIconNode(item.type, cItem.name)"></div>
</div>
</div>
</w-list-item-meta>
</w-list-item>
</w-list>
<w-button slot="reference" icon="w-icon-good" size="mini" style="width:100%;" :disabled="!(activeNodes.length > 0)"></w-button>
</w-popover>
<span class="text">图标</span>
</div>
<div class="toolbarBtn">
<w-button icon="w-icon-link" size="mini" style="width:100%;" :disabled="!(activeNodes.length > 0)" @click="addNodeLink()"></w-button>
<span class="text">超链接</span>
</div>
<div class="toolbarBtn">
<w-button icon="w-icon-theme-solid" size="mini" style="width:100%;" :disabled="!(activeNodes.length > 0 && !hasRoot && !hasGeneralization)" @click="addGeneralization()"></w-button>
<span class="text">概要</span>
</div>
<div class="toolbarBtn">
<w-button icon="w-icon-remarks" size="mini" style="width:100%;" :disabled="!(activeNodes.length > 0)" @click="nodeSetNote()"></w-button>
<span class="text">备注</span>
</div>
<div class="toolbarBtn">
<w-button icon="w-icon-flag" size="mini" style="width:100%;" :disabled="!(activeNodes.length > 0)" @click="nodeSetTag()"></w-button>
<span class="text">标签</span>
</div>
<div class="toolbarBtn">
<w-button icon="w-icon-export2" size="mini" style="width:100%;" @click="mindExport()"></w-button>
<span class="text">导出图片</span>
</div>
<div class="toolbarBtn">
<w-button icon="w-icon-cache" size="mini" style="width:100%;" @click="submitMind()"></w-button>
<span class="text">保存</span>
</div>
<div class="toolbarBtn">
<w-input-number v-model="scaleVal" controls-position="both-sides" unit="%" @decrease="setScale" @increase="setScale" @change="setScale" :increment="10" :min="0" :precision="0"></w-input-number>
<span class="text">缩放</span>
</div>
</div>
</div>
<!-- <div class="toolbarBlock"></div> -->
</div>
</div>
<div id="mindMapContainer"></div>
<!-- 节点图标类型弹窗 -->
<div class="icon-posotion" :style="{'left': iconPosotion.left + 'px', 'top': iconPosotion.top + 'px'}" v-if="iconPosotionShow">
<w-card>
<w-list split style="max-width: 250px;overflow: hidden;overflow-y: auto;" class="iconList-list">
<w-list-item v-for="(item, index) in clickIconList" :key="index">
<w-list-item-meta :title="item.name">
<div slot="description">
<div class="icon-list">
<div class="icon-item" :class="cItem.isChecked ? 'icon-item-actived' : ''" v-for="(cItem, j) in item.list" :key="j" v-html="cItem.icon" @click="addIconNode(item.type, cItem.name)"></div>
</div>
</div>
</w-list-item-meta>
</w-list-item>
</w-list>
</w-card>
</div>
<!-- 备注自定义弹窗 -->
<div id="isCustomNoteContent" class="ql-editor"></div>
<!-- 添加超链接弹窗 -->
<NodeLinkModal :visible.sync="nodeLinkDialog" :infromData="infromData" @nodeLinkData="nodeLinkData"></NodeLinkModal>
<!-- 添加备注弹窗 -->
<NodeNoteModal :visible.sync="nodeNoteDialog" :nodeNoteContent="nodeNoteContent" @updateNodeNote="updateNodeNote"></NodeNoteModal>
<!-- 添加标签弹窗 -->
<NodeTagModal :visible.sync="nodeTagDialog" :infromData="nodeTagArr" @nodeTagData="nodeTagData"></NodeTagModal>
</div>
</template>
<script>
import wnMindMap from "@/utils/simpleMindMap/index.js"
// import { nodeIconList } from 'simple-mind-map/src/svg/icons' // 自带的icon图标列表，我是将其copy出来，然后自己添加的
import NodeLinkModal from './modal/nodeLinkModal.vue'
import NodeNoteModal from './modal/nodeNoteModal.vue'
import NodeTagModal from './modal/nodeTagModal.vue'
import { isEmpty, isUndefined, isNull, cloneDeep } from 'lodash'
import nodeIconList from '@/utils/simpleMindMap/iconList.js' // 自己定义的icon列表
import { themeList } from 'simple-mind-map/src/constants/constant' // 自带的主题列表
export default {
components: { NodeLinkModal, NodeNoteModal, NodeTagModal},
name: "simpleMindMap",
data () {
return {
mindMap: null,
activeNodes: [],
mindMapData: {
"data": {
"text": "根节点"
},
"children": []
},
isStart: true,
isEnd: true,
NodeIconList: [], // 所有图标列表
currentIconList: [], // 当前节点图标列表
clickIconList: [], // 节点图标类型列表
iconPosotion: { // 节点图标列表弹窗位置
left: 0,
top: 0
},
iconPosotionShow: false, // 节点图标类型列表弹窗
nodeActiveIcon: '', // 点击的节点图标
scaleVal: 100, // 默认缩放比例
nodeLinkDialog: false, // 节点超链接弹窗
infromData: {
url: '',
name: ''
},
nodeNoteDialog: false,
nodeNoteContent: '',
nodeTagDialog: false,
nodeTagArr: [],
themeVal: 'default',
themeList: [],
}
},
computed: {
// 是否是根节点---根节点不能添加兄弟节点
hasRoot () {
return this.activeNodes.findIndex(node => {
return node.isRoot
}) !== -1
},
// 是否是概要节点---概要节点则子节点、兄弟节点、概要节点、关联线都不能添加
hasGeneralization () {
return this.activeNodes.findIndex(node => {
return node.isGeneralization
}) !== -1
}
},
mounted () {
console.log(themeList, '===============')
this.themeList = themeList
this.init()
},
methods: {
// 选择主题
themeChange (val) {
wnMindMap.setTheme(val)
},
init () {
this.NodeIconList = cloneDeep(nodeIconList.filter(fItem => fItem && (fItem.name !== '附件图标' && fItem.name !== '核心流程')))
console.log(this.NodeIconList, '====图标列表===')
// 初始化
this.mindMap = wnMindMap.initMind('mindMapContainer', this.mindMapData)
// 监听节点激活事件--默认是单选节点不可多选节点
let _this = this
this.mindMap.on('node_active', (node, nodeList) => {
_this.activeNodes = cloneDeep(nodeList)
console.log(_this.activeNodes, '====_this.activeNodes======')
_this.currentIconList = []
if (_this.activeNodes.length > 0) {
_this.activeNodes.forEach(itemNode => {
_this.currentIconList = itemNode.getData('icon') || []
// console.log(this.currentIconList, '--------当前选中节点的图标列表--------')
let NodeIconListNew = cloneDeep(_this.NodeIconList)
if (_this.currentIconList.length > 0) { // 当前节点有图标时才走这一步
_this.NodeIconList = wnMindMap.isCheckIcon(_this.currentIconList, wnMindMap.removeCheckIcon(NodeIconListNew))
} else { // 如果当前选中节点没有图标，则清空图标列表中的选中效果
_this.NodeIconList = wnMindMap.removeCheckIcon(NodeIconListNew)
}
})
} else {
_this.iconPosotionShow = false
_this.hideletCustomNoteContent()
}
})
// 监听前进回退事件
this.mindMap.on('back_forward', (index, len) => {
_this.isStart = index <= 0
_this.isEnd = index >= len - 1
})
// 节点单击事件
this.mindMap.on('node_click', (itemNode, e) => {
console.log(itemNode, e, '节点单击事件')
})
// 点击节点内的图标时触发
this.mindMap.on('node_icon_click', (node, item, e) => {
console.log(node, item, '点击节点内的图标时触发')
_this.hideletCustomNoteContent()
_this.iconPosotionShow = true
_this.nodeActiveIcon = cloneDeep(item)
this.dealNodeIcon()
let positionXY = wnMindMap.getNodePositionXY(node)
_this.iconPosotion.left = positionXY.left
_this.iconPosotion.top = positionXY.top + positionXY.height + 6
})
// 监听画布缩放事件
this.mindMap.on('scale', (val) => {
// console.log(val, '监听画布缩放事件')
_this.scaleVal = val * 100
_this.activeNodes.forEach(node => {
let positionXY = wnMindMap.getNodePositionXY(node)
_this.iconPosotion.left = positionXY.left
_this.iconPosotion.top = positionXY.top + positionXY.height + 6
console.log(positionXY, '=====111111111111=======')
_this.nodeSelectPosotion.top = positionXY.top - 2
_this.nodeSelectPosotion.left = positionXY.left + positionXY.width + 4
})
})
// svg画布的鼠标按下事件监听
this.mindMap.on('svg_mousedown', (e) => {
_this.hideletCustomNoteContent()
})
// 浏览器窗口变化监听
window.addEventListener("resize", () => {
if (_this.mindMap) {
wnMindMap.mindMapResize()
wnMindMap.mindMapFit()
}
})
},
// 处理点击的图标数据
dealNodeIcon () {
let type = this.nodeActiveIcon.split('_')[0]
this.clickIconList = this.NodeIconList.filter(fItem => fItem && fItem.type === type)
},
// 添加子节点
addChildNode () {
this.hideletCustomNoteContent()
if (this.activeNodes.length > 0) {
if (this.hasGeneralization) {
this.$Message.warning('概要节点节点不能添加子节点！')
return
}
wnMindMap.addInsertChildNode()
} else {
this.$Message.warning('请选择节点')
}
},
// 添加兄弟节点
addPeerNode () {
this.hideletCustomNoteContent()
if (this.activeNodes.length > 0) {
if (this.hasRoot || this.hasGeneralization) {
this.$Message.warning(this.hasRoot ? '根节点不能添加兄弟节点！' : '概要节点节点不能添加兄弟节点！')
return
}
wnMindMap.addPeerNode()
} else {
this.$Message.warning('请选择节点')
}
},
// 后退
backNode () {
this.hideletCustomNoteContent()
wnMindMap.backNode()
},
// 前进
forwardNode () {
this.hideletCustomNoteContent()
wnMindMap.forwardNode()
},
// 删除节点
removeNode () {
this.hideletCustomNoteContent()
wnMindMap.removeNode()
},
// 添加图标
addIconNode (type, name) {
this.hideletCustomNoteContent()
let NodeIconListNew = cloneDeep(this.NodeIconList)
let param = {
activeNodes: this.activeNodes,
type: type,
name: name,
NodeIconList: NodeIconListNew,
currentIconList: this.currentIconList
}
let list = wnMindMap.addIconNode(param)
this.NodeIconList = list.NodeIconListNew // 更新当前节点图标列表状态
this.currentIconList = list.currentIconList // 更新当前节点的图标列表
this.dealNodeIcon()
},
// 缩放
setScale (val) {
this.hideletCustomNoteContent()
wnMindMap.setScale(val / 100)
},
// 节点添加超链接
addNodeLink () {
this.hideletCustomNoteContent()
this.nodeLinkDialog = true
const url = this.activeNodes[0].getData('hyperlink') || ''
const name = this.activeNodes[0].getData('hyperlinkTitle') || ''
// console.log(url, name)
this.infromData = {
url: url,
name: name
}
},
// 节点添加超链接-确定
nodeLinkData (data) {
// console.log(data, '节点添加超链接-确定')
this.activeNodes.forEach(node => {
wnMindMap.setHyperlink(node, data.url, data.name)
})
},
// 插入概要
addGeneralization () {
this.hideletCustomNoteContent()
wnMindMap.addGeneralization()
},
// 添加备注
nodeSetNote () {
this.hideletCustomNoteContent()
this.nodeNoteDialog = true
this.activeNodes.forEach(node => {
const note = node.getData('note') || ''
this.nodeNoteContent = note
// console.log(note)
})
},
// 添加备注-确定
updateNodeNote (data) {
this.activeNodes.forEach(node => {
wnMindMap.setNote(node, data)
})
},
// 隐藏自定义备注弹窗
hideletCustomNoteContent () {
let isCustomNoteContent = document.getElementById('isCustomNoteContent')
isCustomNoteContent.style.display = 'none'
},
// 导出图片 -- 导出其他格式文件，可根据 utils/simpleMindMap/index.js 自行调用
mindExport () {
let mindData = wnMindMap.mindMapGetData()
wnMindMap.mindMapExportPng(mindData.data.text)
},
// 添加标签
nodeSetTag () {
// 获取当前节点的标签列表
this.activeNodes.forEach(node => {
let tagArr = node.getData('tag') || []
this.nodeTagArr = tagArr
})
this.nodeTagDialog = true
},
// 添加标签确定
nodeTagData (data) {
this.activeNodes.forEach(node => {
wnMindMap.setTag(node, data)
})
},
// 保存
submitMind () {
this.$Message.warning('该功能正在开发中')
wnMindMap.mindMapGetData()
}
},
}
</script>
<style lang='scss' scoped>
.simpleMindMap {
width: 100%;
height: 100%;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
background-color: #fff;
position: relative;
.toolbarContainer {
.toolbar {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 20px;
width: max-content;
display: flex;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(26, 26, 26, 0.8);
z-index: 2;
.toolbarBlock {
display: flex;
background-color: #fff;
padding: 10px 20px;
border-radius: 6px;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.06);
margin-right: 20px;
flex-shrink: 0;
position: relative;
&:last-child {
margin-right: 0px;
}
.toolbarNodeBtnList {
display: flex;
.toolbarBtn {
display: flex;
justify-content: center;
flex-direction: column;
// cursor: pointer;
margin-right: 20px;
align-items: center;
&:last-child {
margin-right: 0px;
}
.text {
margin-top: 3px;
}
}
}
}
}
}
#mindMapContainer {
width: 100%;
height: 100%;
}
.icon-posotion {
position: absolute;
left: 0;
top: 0;
}
.nodeSelectModal {
position: absolute;
left: 0;
top: 0;
border-radius: 6px;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.06);
background-color: #fff;
}
#isCustomNoteContent {
display: none;
background-color: #fff;
padding: 10px 20px;
border-radius: 6px;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.06);
max-width: 300px;
height: auto;
max-height: 350px;
overflow: hidden;
overflow-y: auto;
p {
font-size: 12px;
}
}
}
</style>
<style lang="scss">
#isCustomNoteContent {
p {
font-size: 14px;
}
}
</style>
3.2、simpleMindMap/modal/nodeLinkModal.vue 【添加节点超链接弹窗】：
<template>
<w-modal :visible.sync="openDialog" title="超链接" draggable width="40%" class="nodeLinkModal" :before-close="handleCloseDialog" append-to-body :close-on-click-modal="false">
<div style="padding-bottom: 0px;box-sizing: border-box;">
<w-form :model="form" label-width="50px" label-align="right" ref="form">
<w-form-item label="链接">
<w-input v-model="form.url" clearable placeholder="请输入链接，例如：https://xxx.xxx、http://xxx.xxx"></w-input>
</w-form-item>
<w-form-item label="名称">
<w-input v-model="form.name" clearable placeholder="请输入链接名称"></w-input>
</w-form-item>
</w-form>
</div>
<span slot="footer" class="dialog-footer">
<w-button @click="handleCloseDialog()" size="mini">取 消</w-button>
<w-button style="margin-left: 16px" type="primary" @click="submitBtn()" size="mini">
确 定
</w-button>
</span>
</w-modal>
</template>
<script>
export default {
name: 'nodeLinkModal',
props: {
visible: {
type: Boolean,
default: false,
},
infromData: {
type: Object,
default: () => { },
}
},
data () {
return {
openDialog: false,
form: {
url: '',
name: ''
},
}
},
watch: {
'visible' (v) {
this.openDialog = v
if (v) {
this.form.url = this.infromData.url
this.form.name = this.infromData.name
}
}
},
mounted () { },
methods: {
handleCloseDialog (done) {
this.openDialog = false
this.$emit('update:visible', false)
},
// 确定
submitBtn () {
this.$emit('nodeLinkData', this.form)
this.handleCloseDialog()
}
},
}
</script>
<style lang='scss' scoped>
.nodeLinkModal {
}
</style>
3.3、simpleMindMap/modal/nodeNoteModal.vue 【添加节点备注弹窗】：
<template>
<w-modal :visible.sync="openDialog" title="备注" width="60%" style="margin-top: -10vh;" class="nodeNoteModal" :before-close="handleCloseDialog" append-to-body :close-on-click-modal="false">
<div style="padding-bottom: 0px;box-sizing: border-box;display: flex;align-item: center;">
<div class="editor-left">
<quill-editor class="quill-editor-body" ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
</quill-editor>
</div>
<div class="editor-right">
<div class="right-head">
<w-title>备注预览</w-title>
</div>
<div class="right-content">
<div class="ql-editor" v-html="content"></div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<w-button @click="handleCloseDialog()" size="mini">取 消</w-button>
<w-button style="margin-left: 16px" type="primary" @click="submitBtn()" size="mini">
确 定
</w-button>
</span>
</w-modal>
</template>
<script>
import { quillEditor } from 'vue-quill-editor' // 引入插件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import titleConfig from '@/utils/vue-quill-editor-titleConfig.js'
export default {
name: "nodeNoteModal",
components: {
quillEditor
},
props: {
visible: {
type: Boolean,
default: false,
},
nodeNoteContent: {
type: String,
default: '',
}
},
data () {
return {
openDialog: false,
content: "",
// 富文本功能配置
editorOption: {
placeholder: '请输入',
theme: "snow",
modules: {
toolbar: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
// ['blockquote', 'code-block'], //引用，代码块
// [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
[{ 'list': 'ordered' }, { 'list': 'bullet' }], //列表
// [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
[{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
// [{ 'direction': 'rtl' }], // 文本方向
// [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
[{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
[{ 'color': [] }], // 字体颜色，字体背景颜色
// [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
// [{ 'font': [] }], // 字体
[{ 'align': [] }], // 对齐方式
['clean'], // 清除字体样式
// ['image', 'video'] //上传图片、上传视频
]
}
},
}
},
watch: {
'visible' (v) {
this.openDialog = v
if (v) {
this.content = this.nodeNoteContent
this.$nextTick(() => {
for (let item of titleConfig) {
let tip = document.querySelector('.quill-editor ' + item.Choice)
if (!tip) continue
tip.setAttribute('title', item.title)
}
})
}
}
},
mounted () { },
methods: {
handleCloseDialog (done) {
this.openDialog = false
this.$emit('update:visible', false)
this.content = ''
},
// 确定
submitBtn () {
this.$emit('updateNodeNote', this.content)
this.handleCloseDialog()
},
onEditorBlur (e) {
// console.log(e, '失去焦点事件');
},
onEditorFocus (e) {
// console.log(e, '获得焦点事件');
},
onEditorChange (e) {
console.log(e, '内容改变事件');
},
},
}
</script>
<style lang='scss' scoped>
.nodeNoteModal {
.editor-left {
width: 65%;
}
.editor-right {
width: 35%;
border: 1px solid #ccc;
box-sizing: border-box;
border-left: 0;
.right-head {
width: 100%;
height: 42px;
display: flex;
align-items: center;
padding: 8px;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
.right-content {
width: 100%;
height: calc(100% - 42px);
padding: 10px;
box-sizing: border-box;
}
}
}
</style>
<style lang="scss">
.quill-editor-body {
padding: 0px;
.ql-container {
height: 480px !important;
}
}
</style>
3.4、simpleMindMap/modal/nodeTagModal.vue 【添加节点标签弹窗】：
<template>
<w-modal :visible.sync="openDialog" title="标签" draggable width="40%" class="nodeTagModal" :before-close="handleCloseDialog" append-to-body :close-on-click-modal="false">
<div style="padding-bottom: 0px;box-sizing: border-box;">
<w-input v-model="tagName" placeholder="请按回车键添加" size="large" @keyup.native="tagKeyupFn($event)"></w-input>
<div class="tagList">
<w-tag v-for="(tag, index) in tagList" :key="index" :closable="true" @close="handleCloseTag(index)" size="large">
{{ tag }}
</w-tag>
</div>
</div>
<span slot="footer" class="dialog-footer">
<w-button @click="handleCloseDialog()" size="mini">取 消</w-button>
<w-button style="margin-left: 16px" type="primary" @click="submitBtn()" size="mini">
确 定
</w-button>
</span>
</w-modal>
</template>
<script>
export default {
name: 'nodeTagModal',
props: {
visible: {
type: Boolean,
default: false,
},
infromData: {
type: Object,
default: () => { },
}
},
data () {
return {
openDialog: false,
tagList: [],
tagName: ''
}
},
watch: {
'visible' (v) {
this.openDialog = v
if (v) {
this.tagList = this.infromData || []
}
}
},
mounted () { },
methods: {
handleCloseDialog (done) {
this.openDialog = false
this.$emit('update:visible', false)
},
// 添加
tagKeyupFn (event) {
if (event.key === "Enter" && this.tagName) {
this.tagList.push(this.tagName)
this.tagName = ''
}
},
// 删除当前tag标签
handleCloseTag (index) {
this.tagList.splice(index, 1)
},
// 确定
submitBtn () {
this.$emit('nodeTagData', this.tagList)
this.handleCloseDialog()
}
},
}
</script>
<style lang='scss' scoped>
.nodeTagModal {
.tagList {
margin-top: 15px;
span.w-tag {
margin-right: 10px;
margin-bottom: 10px;
}
}
}
</style>
