打包0.9.10

Doc: update
2026-02-25 19:38:40 +08:00 · 2024-04-02 18:14:01 +08:00 · 2024-04-02 13:57:57 +08:00 · 2024-04-02 11:53:30 +08:00 · 2024-04-02 11:51:32 +08:00 · 2024-04-02 09:01:45 +08:00
73 changed files with 972 additions and 231 deletions
--- a/README.md
+++ b/README.md
@@ -316,4 +316,8 @@ const mindMap = new MindMap({
        <img src="./web/src/assets/avatar/L.jpg" style="width: 50px;height: 50px;" />
        <span>L</span>
    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>sunniberg</span>
+    </span>
 </p>
--- a/dist/css/app.css
+++ b/dist/css/app.css
--- a/dist/css/chunk-276b078e.css
+++ b/dist/css/chunk-276b078e.css
--- a/dist/fonts/iconfont.ttf
+++ b/dist/fonts/iconfont.ttf
--- a/dist/fonts/iconfont.woff
+++ b/dist/fonts/iconfont.woff
--- a/dist/fonts/iconfont.woff2
+++ b/dist/fonts/iconfont.woff2
--- a/dist/js/app.js
+++ b/dist/js/app.js
--- a/dist/js/chunk-276b078e.js
+++ b/dist/js/chunk-276b078e.js
--- a/dist/js/chunk-2d0a4b03.js
+++ b/dist/js/chunk-2d0a4b03.js
@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0a4b03"],{"0805":function(t,s,_){"use strict";_.r(s);var a=function(){var t=this;t._self._c;return t._m(0)},v=[function(){var t=this,s=t._self._c;return s("div",[s("h1",[t._v("快捷键操作如何传递自定义参数")]),s("p",[t._v("库提供了很多命令，比如插入子节点的"),s("code",[t._v("INSERT_CHILD_NODE")]),t._v("等，这些命令大多可以接收一定参数，比如在插入节点时我想指定初始文本和节点uid，那么可以这样调用：")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("mindMap.execCommand("),s("span",{staticClass:"hljs-string"},[t._v("'INSERT_CHILD_NODE'")]),t._v(", "),s("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(", [], {\n    "),s("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'初始文本'")]),t._v(",\n    "),s("span",{staticClass:"hljs-attr"},[t._v("uid")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'xxx'")]),t._v("\n})\n")])]),s("p",[t._v("但是同时库内部也默认注册了很多快捷键，比如插入下级节点的"),s("code",[t._v("Tab")]),t._v("快捷键，很遗憾，目前快捷键操作无法让你传入自定义的参数，那么该怎么办呢，可以这样处理，首先确定你要给什么快捷键传入参数，比如"),s("code",[t._v("Tab")]),t._v("，那么首先可以调用如下方法删除库默认注册的快捷键：")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" keyName = "),s("span",{staticClass:"hljs-string"},[t._v("'Tab'")]),t._v("\nmindMap.keyCommand.removeShortcut(keyName)\n")])]),s("p",[t._v("然后再重新注册即可：")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("mindMap.keyCommand.addShortcut(keyName, "),s("span",{staticClass:"hljs-function"},[t._v("() =>")]),t._v(" {\n    mindMap.execCommand("),s("span",{staticClass:"hljs-string"},[t._v("'INSERT_CHILD_NODE'")]),t._v(", "),s("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(", [], {\n        "),s("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'初始文本'")]),t._v(",\n        "),s("span",{staticClass:"hljs-attr"},[t._v("uid")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'xxx'")]),t._v("\n    })\n})\n")])]),s("p",[t._v("库内部默认注册的快捷键对应的命令一览：")]),s("table",[s("thead",[s("tr",[s("th",[t._v("快捷键")]),s("th",[t._v("命令")])])]),s("tbody",[s("tr",[s("td",[t._v("Control+z")]),s("td",[t._v("BACK")])]),s("tr",[s("td",[t._v("Control+y")]),s("td",[t._v("FORWARD")])]),s("tr",[s("td",[t._v("Tab")]),s("td",[t._v("INSERT_CHILD_NODE")])]),s("tr",[s("td",[t._v("Insert")]),s("td",[t._v("INSERT_CHILD_NODE")])]),s("tr",[s("td",[t._v("Enter")]),s("td",[t._v("INSERT_NODE")])]),s("tr",[s("td",[t._v("Shift+Tab")]),s("td",[t._v("INSERT_PARENT_NODE")])]),s("tr",[s("td",[t._v("Control+g")]),s("td",[t._v("ADD_GENERALIZATION")])]),s("tr",[s("td",[t._v("Del或Backspace")]),s("td",[t._v("REMOVE_NODE")])]),s("tr",[s("td",[t._v("Shift+Backspace")]),s("td",[t._v("REMOVE_CURRENT_NODE")])]),s("tr",[s("td",[t._v("Control+a")]),s("td",[t._v("SELECT_ALL")])]),s("tr",[s("td",[t._v("Control+l")]),s("td",[t._v("RESET_LAYOUT")])]),s("tr",[s("td",[t._v("Control+Up")]),s("td",[t._v("UP_NODE")])]),s("tr",[s("td",[t._v("Control+Down")]),s("td",[t._v("DOWN_NODE")])])])])])}],n={},l=n,r=_("2877"),d=Object(r["a"])(l,a,v,!1,null,null,null);s["default"]=d.exports}}]);
--- a/dist/js/chunk-2d0c0a44.js
+++ b/dist/js/chunk-2d0c0a44.js
--- a/dist/js/chunk-2d0d9fbc.js
+++ b/dist/js/chunk-2d0d9fbc.js
--- a/dist/js/chunk-2d0dad5f.js
+++ b/dist/js/chunk-2d0dad5f.js
--- a/dist/js/chunk-2d0e9802.js
+++ b/dist/js/chunk-2d0e9802.js
--- a/dist/js/chunk-2d0f026c.js
+++ b/dist/js/chunk-2d0f026c.js
--- a/dist/js/chunk-2d208ffa.js
+++ b/dist/js/chunk-2d208ffa.js
--- a/dist/js/chunk-2d216004.js
+++ b/dist/js/chunk-2d216004.js
--- a/dist/js/chunk-2d216037.js
+++ b/dist/js/chunk-2d216037.js
@@ -1 +1 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d216037"],{c13f:function(s,t,n){"use strict";n.r(t);var a=function(){var s=this;s._self._c;return s._m(0)},e=[function(){var s=this,t=s._self._c;return t("div",[t("h1",[s._v("开启节点自由拖拽")]),t("blockquote",[t("p",[s._v("节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。")])]),t("p",[s._v("节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化"),t("code",[s._v("simple-mind-map")]),s._v("时传入开启的选项：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n    "),t("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("enableFreeDrag")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n})\n")])]),t("p",[s._v("也可以动态切换是否开启：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("mindMap.updateConfig({\n    "),t("span",{staticClass:"hljs-attr"},[s._v("enableFreeDrag")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),t("span",{staticClass:"hljs-comment"},[s._v("// false")]),s._v("\n})\n")])]),t("p",[s._v("自由拖拽很容器将节点拖的乱七八糟，所以也可以通过命令回到默认的位置：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("mindMap.execCommand("),t("span",{staticClass:"hljs-string"},[s._v("'RESET_LAYOUT'")]),s._v(")\n")])]),t("p",[s._v("也可以使用快捷键"),t("code",[s._v("Ctrl + L")]),s._v("来恢复。")]),t("h2",[s._v("完整示例")]),t("iframe",{staticStyle:{width:"100%",height:"455px",border:"none"},attrs:{src:"https://wanglin2.github.io/playground/#eNrFVd1uG0UUfpVhEVoH2buuxJVxSksbJKSEolAuUDeqxrtje8rszLIzm8SyVgoF1EKIFASiFdxAVQFCQFWBEE2oeJmsnb4FZ3b2L44veldLa82c853znZnzM1PrchQ52wmxelZf+jGNFJJEJdFFj9MwErFCUxSTYRsJviESrkjQRnKMGRM7m2SIUjSMRYhs8GBXFhuUBxs4MirPkiBmpBOCtBPiyLM8jpDHGVFIyzRyFfGEMSN3XZQ9/Tr7/GD2397sr+P5d5+efnF7fvtJdvfe6Y+/eNwXXCqEfUW3yTsiIBKs64haN7ZWPF6iqLwWEf5WTMjVGI8ACEdpDTGTJAdpqrt3ZgcPZvcfZYc/Zf/uZYePTu/8Ov/m8Wz/29n+09KPEqMRIw0/rRW0ehFNdcRnOZxtzBICiJeWyTW+OLOTRAFW5IrgQzpq5Z4QIhwPap7eUt8QuEoh/LQ4wezjB9nDg2fH90//eJj980n2eK+MOiaQynU8EYk6G3IZAtkl/hURhpgHLXtz7b216zfXL39w7f3rdum/ynrrvLnOGtkps10dgfVQIPwkJFw5I6LWGNHLNydvA0dhCYdWmHIS2yttYwVXgXvGu/55lhZ4VkNkxIrsKi32rNkPT0xdmHrSv7RwpoH+mLIgJlyDb9Q+FtwtZVlkOjn6cn708yLZWcIlpFu1rol7QRGUy0JW2lFO1aYQSjfSu0JSRQUHS5uRobLbyPYhdZCmrQK+WJ95K2lVuvK66V6EoCTn33+VHf5m4jVdfHK0f3L8d7P2BG/ZHFhvmk4GspbetpH+X6dS1fWGmt1eNViJM/RQr/D1XTPDYHrBRhEYPNBjsEOoH9Bt5DMs5apnFUFcJaHwrFxdAGhQa6sqBUjfBW0TWHpSQrAB1hCj9FR/kCglOLrkM+p/mEOawwOQ0+niYHoD2dlnfz6793tz+NioB+JzM8lGadp3DUlBCjEtkjZ6HxjPz4gFD/X5ylXfbVwfbKWaMHOTl4ox71mOa2Z7MQIcIkPHl9KzqmJwGjddJnOHBmrcQxe63VdyHEJRVXkxAUZIda7Ii1Z/Ly9mpHRVG+KBFCxRxhAhXb891C12SkT15jz9mNDRGOCvdbvRbsm8nPfVkjnE8YgCb+k1wkFAObSEEVShO0WBPGfEF8oIiqCrPTiE4s5zYLUtkwH9mjq3pODweOfuvUIBGagmimfB22zGiOPC0olhntOQ6GR1BrHYkSQGJ55VtPiS91rbjpWKZM912e5HXE6kI6Ts+LwzIPQWHNvBjE4S7kvHF6ELnUGUXFIbmqY4TGql/wPpBfrv"}})])}],l={},r=l,i=n("2877"),p=Object(i["a"])(r,a,e,!1,null,null,null);t["default"]=p.exports}}]);
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d216037"],{c13f:function(s,t,a){"use strict";a.r(t);var n=function(){var s=this;s._self._c;return s._m(0)},e=[function(){var s=this,t=s._self._c;return t("div",[t("h1",[s._v("开启节点自由拖拽")]),t("blockquote",[t("p",[s._v("节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。")])]),t("blockquote",[t("p",[s._v("另外不要把节点拖拽和自由拖拽搞混，节点拖拽指拖动节点到其他节点上成为其子节点或兄弟节点，自由拖拽只是可以把节点放置在你拖动到的画布位置，并不能改变节点的层级。")])]),t("blockquote",[t("p",[s._v("最后要注意这两个功能都需要先注册Drag插件。")])]),t("p",[s._v("节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化"),t("code",[s._v("simple-mind-map")]),s._v("时传入开启的选项：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n    "),t("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("enableFreeDrag")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n})\n")])]),t("p",[s._v("也可以动态切换是否开启：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("mindMap.updateConfig({\n    "),t("span",{staticClass:"hljs-attr"},[s._v("enableFreeDrag")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),t("span",{staticClass:"hljs-comment"},[s._v("// false")]),s._v("\n})\n")])]),t("p",[s._v("自由拖拽很容器将节点拖的乱七八糟，所以也可以通过命令回到默认的位置：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("mindMap.execCommand("),t("span",{staticClass:"hljs-string"},[s._v("'RESET_LAYOUT'")]),s._v(")\n")])]),t("p",[s._v("也可以使用快捷键"),t("code",[s._v("Ctrl + L")]),s._v("来恢复。")]),t("h2",[s._v("完整示例")]),t("iframe",{staticStyle:{width:"100%",height:"455px",border:"none"},attrs:{src:"https://wanglin2.github.io/playground/#eNrFVd1uG0UUfpVhEVoH2buuxJVxSksbJKSEolAuUDeqxrtje8rszLIzm8SyVgoF1EKIFASiFdxAVQFCQFWBEE2oeJmsnb4FZ3b2L44veldLa82c853znZnzM1PrchQ52wmxelZf+jGNFJJEJdFFj9MwErFCUxSTYRsJviESrkjQRnKMGRM7m2SIUjSMRYhs8GBXFhuUBxs4MirPkiBmpBOCtBPiyLM8jpDHGVFIyzRyFfGEMSN3XZQ9/Tr7/GD2397sr+P5d5+efnF7fvtJdvfe6Y+/eNwXXCqEfUW3yTsiIBKs64haN7ZWPF6iqLwWEf5WTMjVGI8ACEdpDTGTJAdpqrt3ZgcPZvcfZYc/Zf/uZYePTu/8Ov/m8Wz/29n+09KPEqMRIw0/rRW0ehFNdcRnOZxtzBICiJeWyTW+OLOTRAFW5IrgQzpq5Z4QIhwPap7eUt8QuEoh/LQ4wezjB9nDg2fH90//eJj980n2eK+MOiaQynU8EYk6G3IZAtkl/hURhpgHLXtz7b216zfXL39w7f3rdum/ynrrvLnOGtkps10dgfVQIPwkJFw5I6LWGNHLNydvA0dhCYdWmHIS2yttYwVXgXvGu/55lhZ4VkNkxIrsKi32rNkPT0xdmHrSv7RwpoH+mLIgJlyDb9Q+FtwtZVlkOjn6cn708yLZWcIlpFu1rol7QRGUy0JW2lFO1aYQSjfSu0JSRQUHS5uRobLbyPYhdZCmrQK+WJ95K2lVuvK66V6EoCTn33+VHf5m4jVdfHK0f3L8d7P2BG/ZHFhvmk4GspbetpH+X6dS1fWGmt1eNViJM/RQr/D1XTPDYHrBRhEYPNBjsEOoH9Bt5DMs5apnFUFcJaHwrFxdAGhQa6sqBUjfBW0TWHpSQrAB1hCj9FR/kCglOLrkM+p/mEOawwOQ0+niYHoD2dlnfz6793tz+NioB+JzM8lGadp3DUlBCjEtkjZ6HxjPz4gFD/X5ylXfbVwfbKWaMHOTl4ox71mOa2Z7MQIcIkPHl9KzqmJwGjddJnOHBmrcQxe63VdyHEJRVXkxAUZIda7Ii1Z/Ly9mpHRVG+KBFCxRxhAhXb891C12SkT15jz9mNDRGOCvdbvRbsm8nPfVkjnE8YgCb+k1wkFAObSEEVShO0WBPGfEF8oIiqCrPTiE4s5zYLUtkwH9mjq3pODweOfuvUIBGagmimfB22zGiOPC0olhntOQ6GR1BrHYkSQGJ55VtPiS91rbjpWKZM912e5HXE6kI6Ts+LwzIPQWHNvBjE4S7kvHF6ELnUGUXFIbmqY4TGql/wPpBfrv"}})])}],l={},r=l,i=a("2877"),p=Object(i["a"])(r,n,e,!1,null,null,null);t["default"]=p.exports}}]);
--- a/dist/js/chunk-4c82605f.js
+++ b/dist/js/chunk-4c82605f.js
--- a/dist/js/chunk-5ecd9693.js
+++ b/dist/js/chunk-5ecd9693.js
--- a/dist/js/chunk-cae1ba8a.js
+++ b/dist/js/chunk-cae1ba8a.js
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
      window.externalPublicPath = './dist/'
      // 接管应用
-      window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?beeb148b8a9b236eb3f3" rel="stylesheet"><link href="dist/css/app.css?beeb148b8a9b236eb3f3" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
+      window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?ac10265d54028b4359f6" rel="stylesheet"><link href="dist/css/app.css?ac10265d54028b4359f6" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
@@ -66,4 +66,4 @@
        // 可以通过window.$bus.$on()来监听应用的一些事件
        // 实例化页面
        window.initApp()
-      }</script><script src="dist/js/chunk-vendors.js?beeb148b8a9b236eb3f3"></script><script src="dist/js/app.js?beeb148b8a9b236eb3f3"></script></body></html>
+      }</script><script src="dist/js/chunk-vendors.js?ac10265d54028b4359f6"></script><script src="dist/js/app.js?ac10265d54028b4359f6"></script></body></html>
--- a/simple-mind-map/full.js
+++ b/simple-mind-map/full.js
@@ -29,7 +29,7 @@ MindMap.iconList = icons.nodeIconList
 MindMap.constants = constants
 MindMap.themes = themes
 MindMap.defaultTheme = defaultTheme
-MindMap.version = '0.9.9-fix.1'
+MindMap.version = '0.9.10'

 MindMap.usePlugin(MiniMap)
  .usePlugin(Watermark)
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.9.9-fix.1",
+  "version": "0.9.10",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/simple-mind-map/src/constants/constant.js
+++ b/simple-mind-map/src/constants/constant.js
@@ -312,7 +312,9 @@ export const nodeDataNoStylePropList = [
  'associativeLineTargets',
  'associativeLineTargetControlOffsets',
  'associativeLinePoint',
-  'associativeLineText'
+  'associativeLineText',
+  'attachmentUrl',
+  'attachmentName'
 ]

 // 数据缓存
--- a/simple-mind-map/src/core/render/Render.js
+++ b/simple-mind-map/src/core/render/Render.js
@@ -65,7 +65,9 @@ class Render {
    this.mindMap = opt.mindMap
    this.themeConfig = this.mindMap.themeConfig
    // 渲染树，操作过程中修改的都是这里的数据
-    this.renderTree = this.mindMap.opt.data ? merge({}, this.mindMap.opt.data) : null
+    this.renderTree = this.mindMap.opt.data
+      ? merge({}, this.mindMap.opt.data)
+      : null
    // 是否重新渲染
    this.reRender = false
    // 是否正在渲染中
@@ -246,6 +248,9 @@ class Render {
    // 设置节点备注
    this.setNodeNote = this.setNodeNote.bind(this)
    this.mindMap.command.add('SET_NODE_NOTE', this.setNodeNote)
+    // 设置节点附件
+    this.setNodeAttachment = this.setNodeAttachment.bind(this)
+    this.mindMap.command.add('SET_NODE_ATTACHMENT', this.setNodeAttachment)
    // 设置节点标签
    this.setNodeTag = this.setNodeTag.bind(this)
    this.mindMap.command.add('SET_NODE_TAG', this.setNodeTag)
@@ -330,7 +335,7 @@ class Render {
    })
    // 一键整理布局
    this.mindMap.keyCommand.addShortcut('Control+l', () => {
-      this.mindMap.execCommand('RESET_LAYOUT', this.resetLayout)
+      this.mindMap.execCommand('RESET_LAYOUT')
    })
    // 上移节点
    this.mindMap.keyCommand.addShortcut('Control+Up', () => {
@@ -856,6 +861,9 @@ class Render {
        },
        children: [node.nodeData]
      }
+      node.setData({
+        resetRichText: true
+      })
      const parent = node.parent
      // 获取当前节点所在位置
      const index = getNodeDataIndex(node)
@@ -1597,6 +1605,14 @@ class Render {
    })
  }

+  //  设置节点附件
+  setNodeAttachment(node, url, name = '') {
+    this.setNodeDataRender(node, {
+      attachmentUrl: url,
+      attachmentName: name
+    })
+  }
+
  //  设置节点标签
  setNodeTag(node, tag) {
    this.setNodeDataRender(node, {
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/simple-mind-map/src/core/render/node/Node.js
@@ -75,6 +75,7 @@ class Node {
    this._noteData = null
    this.noteEl = null
    this.noteContentIsShow = false
+    this._attachmentData = null
    this._expandBtn = null
    this._lastExpandBtnType = null
    this._showExpandBtn = false
@@ -199,6 +200,7 @@ class Node {
    this._hyperlinkData = this.createHyperlinkNode()
    this._tagData = this.createTagNode()
    this._noteData = this.createNoteNode()
+    this._attachmentData = this.createAttachmentNode()
  }

  //  计算节点的宽高
@@ -267,6 +269,11 @@ class Node {
      textContentWidth += this._noteData.width
      textContentHeight = Math.max(textContentHeight, this._noteData.height)
    }
+    // 附件
+    if (this._attachmentData) {
+      textContentWidth += this._attachmentData.width
+      textContentHeight = Math.max(textContentHeight, this._attachmentData.height)
+    }
    // 文字内容部分的尺寸
    this._rectInfo.textContentWidth = textContentWidth
    this._rectInfo.textContentHeight = textContentHeight
@@ -399,6 +406,14 @@ class Node {
      textContentNested.add(this._noteData.node)
      textContentOffsetX += this._noteData.width
    }
+    // 附件
+    if (this._attachmentData) {
+      this._attachmentData.node
+        .x(textContentOffsetX)
+        .y((this._rectInfo.textContentHeight - this._attachmentData.height) / 2)
+      textContentNested.add(this._attachmentData.node)
+      textContentOffsetX += this._attachmentData.width
+    }
    // 文字内容整体
    textContentNested.translate(
      width / 2 - textContentNested.bbox().width / 2,
--- a/simple-mind-map/src/core/render/node/nodeCommandWraps.js
+++ b/simple-mind-map/src/core/render/node/nodeCommandWraps.js
@@ -28,6 +28,11 @@ function setNote(note) {
  this.mindMap.execCommand('SET_NODE_NOTE', this, note)
 }

+//  设置附件
+function setAttachment(url, name) {
+  this.mindMap.execCommand('SET_NODE_ATTACHMENT', this, url, name)
+}
+
 //  设置标签
 function setTag(tag) {
  this.mindMap.execCommand('SET_NODE_TAG', this, tag)
@@ -55,6 +60,7 @@ export default {
  setIcon,
  setHyperlink,
  setNote,
+  setAttachment,
  setTag,
  setShape,
  setStyle,
--- a/simple-mind-map/src/core/render/node/nodeCreateContents.js
+++ b/simple-mind-map/src/core/render/node/nodeCreateContents.js
@@ -262,7 +262,7 @@ function createHyperlinkNode() {
    e.stopPropagation()
  })
  if (hyperlinkTitle) {
-    a.attr('title', hyperlinkTitle)
+    node.add(SVG(`<title>${hyperlinkTitle}</title>`))
  }
  // 添加一个透明的层，作为鼠标区域
  a.rect(iconSize, iconSize).fill({ color: 'transparent' })
@@ -368,6 +368,36 @@ function createNoteNode() {
  }
 }

+//  创建附件节点
+function createAttachmentNode() {
+  const { attachmentUrl, attachmentName } = this.getData()
+  if (!attachmentUrl) {
+    return
+  }
+  const iconSize = this.mindMap.themeConfig.iconSize
+  const node = new SVG().attr('cursor', 'pointer').size(iconSize, iconSize)
+  if (attachmentName) {
+    node.add(SVG(`<title>${attachmentName}</title>`))
+  }
+  // 透明的层，用来作为鼠标区域
+  node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
+  // 备注图标
+  const iconNode = SVG(iconsSvg.attachment).size(iconSize, iconSize)
+  this.style.iconNode(iconNode)
+  node.add(iconNode)
+  node.on('click', e => {
+    this.mindMap.emit('node_attachmentClick', this, e, node)
+  })
+  node.on('contextmenu', e => {
+    this.mindMap.emit('node_attachmentContextmenu', this, e, node)
+  })
+  return {
+    node,
+    width: iconSize,
+    height: iconSize
+  }
+}
+
 // 获取节点备注显示位置
 function getNoteContentPosition() {
  const iconSize = this.mindMap.themeConfig.iconSize
@@ -415,6 +445,7 @@ export default {
  createHyperlinkNode,
  createTagNode,
  createNoteNode,
+  createAttachmentNode,
  getNoteContentPosition,
  measureCustomNodeContentSize,
  isUseCustomNodeContent
--- a/simple-mind-map/src/core/view/View.js
+++ b/simple-mind-map/src/core/view/View.js
@@ -158,7 +158,8 @@ class View {
        ...viewData.transform
      })
      this.mindMap.emit('view_data_change', this.getTransformData())
-      this.mindMap.emit('scale', this.scale)
+      this.emitEvent('scale')
+      this.emitEvent('translate')
    }
  }

@@ -168,6 +169,7 @@ class View {
    this.x += x
    this.y += y
    this.transform()
+    this.emitEvent('translate')
  }

  //  平移x方向
@@ -175,12 +177,14 @@ class View {
    if (step === 0) return
    this.x += step
    this.transform()
+    this.emitEvent('translate')
  }

  //  平移x方式到
  translateXTo(x) {
    this.x = x
    this.transform()
+    this.emitEvent('translate')
  }

  //  平移y方向
@@ -188,12 +192,14 @@ class View {
    if (step === 0) return
    this.y += step
    this.transform()
+    this.emitEvent('translate')
  }

  //  平移y方向到
  translateYTo(y) {
    this.y = y
    this.transform()
+    this.emitEvent('translate')
  }

  //   应用变换
@@ -211,13 +217,17 @@ class View {

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

@@ -227,7 +237,7 @@ class View {
    const scale = Math.max(this.scale - scaleRatio, 0.1)
    this.scaleInCenter(scale, cx, cy)
    this.transform()
-    this.mindMap.emit('scale', this.scale)
+    this.emitEvent('scale')
  }

  //  放大
@@ -236,7 +246,7 @@ class View {
    const scale = this.scale + scaleRatio
    this.scaleInCenter(scale, cx, cy)
    this.transform()
-    this.mindMap.emit('scale', this.scale)
+    this.emitEvent('scale')
  }

  // 基于指定中心进行缩放，cx，cy 可不指定，此时会使用画布中心点
@@ -262,7 +272,7 @@ class View {
      this.scale = scale
    }
    this.transform()
-    this.mindMap.emit('scale', this.scale)
+    this.emitEvent('scale')
  }

  // 适应画布大小
@@ -394,6 +404,16 @@ class View {
      bottom
    }
  }
+
+  // 派发事件
+  emitEvent(type) {
+    switch (type) {
+      case 'scale':
+        this.mindMap.emit('scale', this.scale)
+      case 'translate':
+        this.mindMap.emit('translate', this.x, this.y)
+    }
+  }
 }

 export default View
--- a/simple-mind-map/src/plugins/MiniMap.js
+++ b/simple-mind-map/src/plugins/MiniMap.js
@@ -93,10 +93,7 @@ class MiniMap {

    return {
      getImgUrl: async callback => {
-        const blob = new Blob([svgStr], {
-          type: 'image/svg+xml'
-        })
-        const res = await readBlob(blob)
+        const res = await this.mindMap.doExport.fixSvgStrAndToBlob(svgStr)
        callback(res)
      },
      svgHTML: svgStr, // 小地图html
--- a/simple-mind-map/src/plugins/RainbowLines.js
+++ b/simple-mind-map/src/plugins/RainbowLines.js
@@ -48,7 +48,9 @@ class RainbowLines {

  // 获取一个节点的第二层级的祖先节点
  getSecondLayerAncestor(node) {
-    if (node.layerIndex === 1) {
+    if (node.layerIndex === 0) {
+      return null
+    } else if (node.layerIndex === 1) {
      return node
    } else {
      let res = null
@@ -78,6 +80,7 @@ class RainbowLines {
    const { rainbowLinesConfig } = this.mindMap.opt
    if (!rainbowLinesConfig || !rainbowLinesConfig.open) return ''
    const ancestor = this.getSecondLayerAncestor(node)
+    if (!ancestor) return
    const index = getNodeDataIndex(ancestor)
    const colorsList = this.getColorsList()
    return colorsList[index % colorsList.length]
--- a/simple-mind-map/src/plugins/Search.js
+++ b/simple-mind-map/src/plugins/Search.js
@@ -86,6 +86,7 @@ class Search {
    this.matchNodeList = []
    this.currentIndex = -1
    const { isOnlySearchCurrentRenderNodes } = this.mindMap.opt
+    // 如果要搜索收起来的节点，那么要遍历渲染树而不是节点树
    const tree = isOnlySearchCurrentRenderNodes
      ? this.mindMap.renderer.root
      : this.mindMap.renderer.renderTree
@@ -103,6 +104,11 @@ class Search {
    })
  }

+  // 判断对象是否是节点实例
+  isNodeInstance(node) {
+    return node instanceof Node
+  }
+
  // 搜索下一个，定位到下一个匹配节点
  searchNext(callback) {
    if (!this.isSearching || this.matchNodeList.length <= 0) return
@@ -113,13 +119,12 @@ class Search {
    }
    const currentNode = this.matchNodeList[this.currentIndex]
    this.notResetSearchText = true
-    const uid =
-      currentNode instanceof Node
-        ? currentNode.getData('uid')
-        : currentNode.data.uid
+    const uid = this.isNodeInstance(currentNode)
+      ? currentNode.getData('uid')
+      : currentNode.data.uid
    const targetNode = this.mindMap.renderer.findNodeByUid(uid)
    this.mindMap.execCommand('GO_TARGET_NODE', uid, node => {
-      if (!(currentNode instanceof Node)) {
+      if (!this.isNodeInstance(currentNode)) {
        this.matchNodeList[this.currentIndex] = node
      }
      callback()
@@ -173,15 +178,20 @@ class Search {
      return
    replaceText = String(replaceText)
    this.matchNodeList.forEach(node => {
-      let text = this.getReplacedText(node, this.searchText, replaceText)
-      this.mindMap.renderer.setNodeDataRender(
-        node,
-        {
-          text,
-          resetRichText: !!node.getData('richText')
-        },
-        true
-      )
+      const text = this.getReplacedText(node, this.searchText, replaceText)
+      if (this.isNodeInstance(node)) {
+        this.mindMap.renderer.setNodeDataRender(
+          node,
+          {
+            text,
+            resetRichText: !!node.getData('richText')
+          },
+          true
+        )
+      } else {
+        node.data.text = text
+        node.data.resetRichText = !!node.data.richText
+      }
    })
    this.mindMap.render()
    this.mindMap.command.addHistory()
@@ -190,7 +200,9 @@ class Search {

  // 获取某个节点替换后的文本
  getReplacedText(node, searchText, replaceText) {
-    let { richText, text } = node.getData()
+    let { richText, text } = this.isNodeInstance(node)
+      ? node.getData()
+      : node.data
    if (richText) {
      return replaceHtmlText(text, searchText, replaceText)
    } else {
--- a/simple-mind-map/src/svg/icons.js
+++ b/simple-mind-map/src/svg/icons.js
@@ -8,6 +8,10 @@ const hyperlink =
 const note =
  '<svg t="1624195132675" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8792" ><path d="M152.768 985.984 152.768 49.856l434.56 0 66.816 0 234.048 267.392 0 66.816 0 601.92L152.768 985.984 152.768 985.984zM654.144 193.088l0 124.16 108.736 0L654.144 193.088 654.144 193.088zM821.312 384.064l-167.168 0L587.328 384.064 587.328 317.312 587.328 116.736 219.584 116.736 219.584 919.04l601.728 0L821.312 384.064 821.312 384.064zM386.688 517.888 319.808 517.888 319.808 450.944l66.816 0L386.624 517.888 386.688 517.888zM386.688 651.584 319.808 651.584 319.808 584.704l66.816 0L386.624 651.584 386.688 651.584zM386.688 785.344 319.808 785.344l0-66.88 66.816 0L386.624 785.344 386.688 785.344zM721.024 517.888 453.632 517.888 453.632 450.944l267.392 0L721.024 517.888 721.024 517.888zM654.144 651.584 453.632 651.584 453.632 584.704l200.512 0L654.144 651.584 654.144 651.584zM620.672 785.344l-167.04 0 0-66.88 167.04 0L620.672 785.344 620.672 785.344z" p-id="8793"></path></svg>'

+// 附件图标
+const attachment =
+  '<svg t="1711935375590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3864" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M516.373333 375.978667l136.576-136.576a147.797333 147.797333 0 0 1 208.853334-0.021334 147.690667 147.690667 0 0 1-0.042667 208.832l-204.8 204.778667v0.021333l-153.621333 153.6c-85.973333 85.973333-225.28 85.973333-311.253334 0.021334-85.994667-85.973333-85.973333-225.216 0.149334-311.36L431.146667 256.362667a21.333333 21.333333 0 0 0-30.165334-30.165334L162.069333 465.066667c-102.805333 102.826667-102.826667 269.056-0.149333 371.733333 102.613333 102.613333 268.970667 102.613333 371.584 0l153.6-153.642667h0.021333l0.021334-0.021333 204.778666-204.778667c74.325333-74.325333 74.346667-194.858667 0.021334-269.184-74.24-74.24-194.88-74.24-269.162667 0.042667l-136.576 136.554667-187.626667 187.626666a117.845333 117.845333 0 0 0-0.106666 166.826667 118.037333 118.037333 0 0 0 166.826666-0.106667l255.850667-255.829333a21.333333 21.333333 0 0 0-30.165333-30.165333L435.136 669.973333a75.370667 75.370667 0 0 1-106.496 0.106667 75.178667 75.178667 0 0 1 0.128-106.496l187.605333-187.605333z" p-id="3865"></path></svg>'
+
 // 节点icon
 export const nodeIconList = [
  {
@@ -303,6 +307,7 @@ const getNodeIconListIcon = (name, extendIconList = []) => {
 export default {
  hyperlink,
  note,
+  attachment,
  nodeIconList,
  getNodeIconListIcon
 }
--- a/web/src/assets/icon-font/iconfont.css
+++ b/web/src/assets/icon-font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1711536835850') format('woff2'),
-       url('iconfont.woff?t=1711536835850') format('woff'),
-       url('iconfont.ttf?t=1711536835850') format('truetype');
+  src: url('iconfont.woff2?t=1711935414521') format('woff2'),
+       url('iconfont.woff?t=1711935414521') format('woff'),
+       url('iconfont.ttf?t=1711935414521') format('truetype');
 }

 .iconfont {
@@ -13,6 +13,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.iconfujian:before {
+  content: "\e88a";
+}
+
 .icongeshihua:before {
  content: "\e7a3";
 }
--- a/web/src/assets/icon-font/iconfont.ttf
+++ b/web/src/assets/icon-font/iconfont.ttf
--- a/web/src/assets/icon-font/iconfont.woff
+++ b/web/src/assets/icon-font/iconfont.woff
--- a/web/src/assets/icon-font/iconfont.woff2
+++ b/web/src/assets/icon-font/iconfont.woff2
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -259,6 +259,7 @@ export default {
    associativeLine: 'Associative line',
    painter: 'Painter',
    formula: 'Formula',
+    attachment: 'Attachment',
    more: 'More',
    selectFileTip: 'Please select a file',
    notSupportTip:
@@ -281,7 +282,8 @@ export default {
    tip: 'Tip',
    yes: 'Yes',
    no: 'No',
-    exportError: 'Export failed'
+    exportError: 'Export failed',
+    dragTip: 'Release here to import the file'
  },
  mouseAction: {
    tip1:
@@ -331,5 +333,9 @@ export default {
    formatErrorTip: 'The JSON format is incorrect. Please check and try again',
    copyTip: 'Copied to clipboard',
    formatTip: 'Format complete'
+  },
+  attachment: {
+    deleteAttachment: 'Delete attachment',
+    tip: 'The attachment function is only available on the client side'
  }
 }
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -256,6 +256,7 @@ export default {
    associativeLine: '关联线',
    painter: '格式刷',
    formula: '公式',
+    attachment: '附件',
    more: '更多',
    selectFileTip: '请选择文件',
    notSupportTip: '你的浏览器不支持该功能，或者当前页面非https协议',
@@ -277,7 +278,8 @@ export default {
    tip: '提示',
    yes: '是',
    no: '否',
-    exportError: '导出失败'
+    exportError: '导出失败',
+    dragTip: '在此释放以导入该文件'
  },
  mouseAction: {
    tip1: '当前：左键拖动画布，右键框选节点',
@@ -325,5 +327,9 @@ export default {
    formatErrorTip: 'JSON格式有误，请检查后再试',
    copyTip: '已复制到剪贴板',
    formatTip: '格式化完成'
+  },
+  attachment: {
+    deleteAttachment: '删除附件',
+    tip: '附件功能仅在客户端可用'
  }
 }
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -11,7 +11,7 @@ let langList = [
  }
 ]
 let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
-let CourseList = new Array(26).fill(0).map((_, index) => {
+let CourseList = new Array(27).fill(0).map((_, index) => {
  return 'course' + (index + 1)
 })
 let APIList = [
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,39 @@
 # Changelog

+## 0.9.10
+
+Fix:
+
+> 1.Fix the issue of all replace operation error during search;
+>
+> 2.Fix the issue of rendering the mini map with entity characters that are not supported by SVG in node text;
+
+New:
+
+> 1.Add an event translate when moving the canvas;
+>
+> 2.Node content supports setting attachments;
+
+Demo：
+
+> 1.Support dragging and dropping files onto the page for import;
+
+Client:
+
+> 1.Nodes support adding attachments;
+
+## 0.9.9-fix.2
+
+Fix:
+
+> 1.Fix the issue of the original node style not being updated during the insertion of the parent node operation;
+>
+> 2.Fix the issue of errors when switching structures when opening rainbow lines;
+
+Demo:
+
+> 1.Fix the issue where the side bar outline opens in source code editing mode when clicking full screen editing;
+
 ## 0.9.9-fix.1

 Fix the issue where the search plugin was unable to search due to changes in the previous version.
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,35 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.9.10</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue of all replace operation error during search;</p>
+<p>2.Fix the issue of rendering the mini map with entity characters that are not supported by SVG in node text;</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Add an event translate when moving the canvas;</p>
+<p>2.Node content supports setting attachments;</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.Support dragging and dropping files onto the page for import;</p>
+</blockquote>
+<p>Client:</p>
+<blockquote>
+<p>1.Nodes support adding attachments;</p>
+</blockquote>
+<h2>0.9.9-fix.2</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue of the original node style not being updated during the insertion of the parent node operation;</p>
+<p>2.Fix the issue of errors when switching structures when opening rainbow lines;</p>
+</blockquote>
+<p>Demo:</p>
+<blockquote>
+<p>1.Fix the issue where the side bar outline opens in source code editing mode when clicking full screen editing;</p>
+</blockquote>
 <h2>0.9.9-fix.1</h2>
 <p>Fix the issue where the search plugin was unable to search due to changes in the previous version.</p>
 <h2>0.9.9</h2>
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -455,7 +455,8 @@ Listen to an event. Event list:
 | expand_btn_click                 | Node expand or collapse event                                            | this (node instance)                                                                                            |
 | before_show_text_edit            | Event before node text edit box opens                                    |                                                                                                                 |
 | hide_text_edit                   | Node text edit box close event                                           | textEditNode (text edit box DOM node), activeNodeList (current list of active nodes)                            |
-| scale                            | Zoom event                                                               | scale (zoom ratio)                                                                                              |
+| scale                            | Canvas zoom event                                                               | scale (zoom ratio)                                            |
+| translate（v0.9.10+）         |   Canvas movement event           | x（translate x）、y（translate y）                     |
 | node_img_dblclick（v0.2.15+）    | Node image double-click event                                            | this (node instance), e (event object)                                                                          |
 | node_img_mouseenter（v0.6.5+）    |  Node image mouseenter event                    | this（node instance）、imgNode（img node）、e（event object）                              |
 | node_img_mouseleave（v0.6.5+）    |  Node image mouseleave event                    | this（node instance）、imgNode（img node）、e（event object）                              |
@@ -581,6 +582,7 @@ redo. All commands are as follows:
 | SET_NODE_ICON                      | Set Node Icon                                                | node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the [icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js) file, icon name is type_name, such as ['priority_1']) |
 | SET_NODE_HYPERLINK                 | Set Node Hyperlink                                           | node (node to set), link (hyperlink address), title (hyperlink name, optional) |
 | SET_NODE_NOTE                      | Set Node Note                                                | node (node to set), note (note text)                         |
+| SET_NODE_ATTACHMENT（v0.9.10+）                       |   Set node attachment               | node（node to set）、url（attachment url）、name（attachment name, optional）                       |
 | SET_NODE_TAG                       | Set Node Tag                                                 | node (node to set), tag (string array, built-in color information can be obtained in [constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js)) |
 | INSERT_AFTER (v0.1.5+)             | Move Node to After Another Node | node (node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), exist (target node)                     |
 | INSERT_BEFORE (v0.1.5+)            | Move Node to Before Another Node | node (node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), exist (target node)                     |
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -1116,10 +1116,15 @@ poor performance and should be used sparingly.</p>
 </tr>
 <tr>
 <td>scale</td>
-<td>Zoom event</td>
+<td>Canvas zoom event</td>
 <td>scale (zoom ratio)</td>
 </tr>
 <tr>
+<td>translate（v0.9.10+）</td>
+<td>Canvas movement event</td>
+<td>x（translate x）、y（translate y）</td>
+</tr>
+<tr>
 <td>node_img_dblclick（v0.2.15+）</td>
 <td>Node image double-click event</td>
 <td>this (node instance), e (event object)</td>
@@ -1425,6 +1430,11 @@ redo. All commands are as follows:</p>
 <td>node (node to set), note (note text)</td>
 </tr>
 <tr>
+<td>SET_NODE_ATTACHMENT（v0.9.10+）</td>
+<td>Set node attachment</td>
+<td>node（node to set）、url（attachment url）、name（attachment name, optional）</td>
+</tr>
+<tr>
 <td>SET_NODE_TAG</td>
 <td>Set Node Tag</td>
 <td>node (node to set), tag (string array, built-in color information can be obtained in <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>)</td>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -351,4 +351,10 @@ Open source is not easy. If this project is helpful to you, you can invite the a
        <img src="../../../../assets/avatar/L.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>L</p>
    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>sunniberg</p>
+    </div>
 </div>
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -8,17 +8,17 @@
 </blockquote>
 <h2>Features</h2>
 <ul>
-<li><input type="checkbox" id="checkbox48" checked="true" /><label for="checkbox48">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
-<li><input type="checkbox" id="checkbox49" checked="true" /><label for="checkbox49">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
-<li><input type="checkbox" id="checkbox50" checked="true" /><label for="checkbox50">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
-<li><input type="checkbox" id="checkbox51" checked="true" /><label for="checkbox51">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
-<li><input type="checkbox" id="checkbox52" checked="true" /><label for="checkbox52">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
-<li><input type="checkbox" id="checkbox53" checked="true" /><label for="checkbox53">Support canvas dragging and scaling</label></li>
-<li><input type="checkbox" id="checkbox54" checked="true" /><label for="checkbox54">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
-<li><input type="checkbox" id="checkbox55" checked="true" /><label for="checkbox55">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
-<li><input type="checkbox" id="checkbox56" checked="true" /><label for="checkbox56">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
-<li><input type="checkbox" id="checkbox57" checked="true" /><label for="checkbox57">Provide rich configurations to meet various scenarios and usage habits</label></li>
-<li><input type="checkbox" id="checkbox58" checked="true" /><label for="checkbox58">Support collaborative editing</label></li>
+<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
+<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
+<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
+<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
+<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
+<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">Support canvas dragging and scaling</label></li>
+<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
+<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
+<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
+<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">Provide rich configurations to meet various scenarios and usage habits</label></li>
+<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">Support collaborative editing</label></li>
 </ul>
 <blockquote>
 <p>Features that will not be implemented:</p>
@@ -34,16 +34,16 @@ frameworks such as Vue and React, or without a framework.</p>
 <p>This is an online mind map built using the <code>simple-mind-map</code> library and based
 on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
 <ul>
-<li><input type="checkbox" id="checkbox59" checked="true" /><label for="checkbox59">Toolbar, which supports inserting and deleting nodes, and editing node</label>
+<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">Toolbar, which supports inserting and deleting nodes, and editing node</label>
 images, icons, hyperlinks, notes, tags, and summaries</li>
-<li><input type="checkbox" id="checkbox60" checked="true" /><label for="checkbox60">Sidebar, with panels for basic style settings, node style settings,</label>
+<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">Sidebar, with panels for basic style settings, node style settings,</label>
 outline, theme selection, and structure selection</li>
-<li><input type="checkbox" id="checkbox61" checked="true" /><label for="checkbox61">Import and export functionality; data is saved in the browser's local</label>
+<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">Import and export functionality; data is saved in the browser's local</label>
 storage by default, but it also supports creating, opening, and editing
 local files on the computer directly</li>
-<li><input type="checkbox" id="checkbox62" checked="true" /><label for="checkbox62">Right-click menu, which supports operations such as expanding, collapsing,</label>
+<li><input type="checkbox" id="checkbox46" checked="true" /><label for="checkbox46">Right-click menu, which supports operations such as expanding, collapsing,</label>
 and organizing layout</li>
-<li><input type="checkbox" id="checkbox63" checked="true" /><label for="checkbox63">Bottom bar, which supports node and word count statistics, switching</label>
+<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">Bottom bar, which supports node and word count statistics, switching</label>
 between edit and read-only modes, zooming in and out, and switching to
 full screen, support mini map</li>
 </ul>
@@ -305,6 +305,12 @@ full screen, support mini map</li>
        <img src="../../../../assets/avatar/L.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>L</p>
    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>sunniberg</p>
+    </div>
 </div>
  </div>
 </template>
--- a/web/src/pages/Doc/en/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@@ -261,9 +261,19 @@ Setting the node hyperlink, a shortcut for the `SET_NODE_HYPERLINK` command

 Setting the node note, a shortcut for the `SET_NODE_NOTE` command

+### setAttachment(url, name)
+
+> v0.9.10+
+
+- `url`：Attachment url；
+
+- `name`：Attachment name, optional
+
+Set node attachments, a shortcut for the `SET_NODE_ATTACHMENT` command
+
 ### setTag(tag)

-Setting the node tag, a shortcut for the `SET_NODE_TAG` command"
+Setting the node tag, a shortcut for the `SET_NODE_TAG` command

 ### hide()

--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@@ -195,8 +195,21 @@ nodeData, <code>SET_NODE_DATA</code> command's shortcut method. This method and
 <p>Setting the node hyperlink, a shortcut for the <code>SET_NODE_HYPERLINK</code> command</p>
 <h3>setNote(note)</h3>
 <p>Setting the node note, a shortcut for the <code>SET_NODE_NOTE</code> command</p>
+<h3>setAttachment(url, name)</h3>
+<blockquote>
+<p>v0.9.10+</p>
+</blockquote>
+<ul>
+<li>
+<p><code>url</code>：Attachment url；</p>
+</li>
+<li>
+<p><code>name</code>：Attachment name, optional</p>
+</li>
+</ul>
+<p>Set node attachments, a shortcut for the <code>SET_NODE_ATTACHMENT</code> command</p>
 <h3>setTag(tag)</h3>
-<p>Setting the node tag, a shortcut for the <code>SET_NODE_TAG</code> command&quot;</p>
+<p>Setting the node tag, a shortcut for the <code>SET_NODE_TAG</code> command</p>
 <h3>hide()</h3>
 <blockquote>
 <p>v0.1.5+</p>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -33,6 +33,7 @@ export default [
      { path: 'course24', title: '如何开发一个插件' },
      { path: 'course25', title: '关于概要' },
      { path: 'course26', title: '如何实现AI生成节点内容' },
+      { path: 'course27', title: '快捷键操作如何传递自定义参数' },
      { path: 'doExport', title: 'Export 插件' },
      { path: 'drag', title: 'Drag插件' },
      { path: 'introduction', title: '简介' },
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,39 @@
 # Changelog

+## 0.9.10
+
+修复：
+
+> 1.修复搜索时全部替换操作报错的问题；
+>
+> 2.修复节点文本存在svg不支持的实体字符时小地图无法渲染的问题；
+
+新增：
+
+> 1.新增画布移动时的事件translate；
+>
+> 2.节点内容支持设置附件；
+
+Demo：
+
+> 1.支持拖拽文件到页面进行导入；
+
+客户端：
+
+> 1.节点支持添加附件；
+
+## 0.9.9-fix.2
+
+修复：
+
+> 1.修复插入父节点操作时原节点样式未更新的问题；
+>
+> 2.修复开启彩虹线条时切换结构会报错的问题；
+
+Demo：
+
+> 1.修复侧边栏大纲点击全屏编辑时打开的是源码编辑模式的问题；
+
 ## 0.9.9-fix.1

 修复上个版本的改动造成搜索插件无法搜索的问题。
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,35 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.9.10</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复搜索时全部替换操作报错的问题；</p>
+<p>2.修复节点文本存在svg不支持的实体字符时小地图无法渲染的问题；</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.新增画布移动时的事件translate；</p>
+<p>2.节点内容支持设置附件；</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.支持拖拽文件到页面进行导入；</p>
+</blockquote>
+<p>客户端：</p>
+<blockquote>
+<p>1.节点支持添加附件；</p>
+</blockquote>
+<h2>0.9.9-fix.2</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复插入父节点操作时原节点样式未更新的问题；</p>
+<p>2.修复开启彩虹线条时切换结构会报错的问题；</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.修复侧边栏大纲点击全屏编辑时打开的是源码编辑模式的问题；</p>
+</blockquote>
 <h2>0.9.9-fix.1</h2>
 <p>修复上个版本的改动造成搜索插件无法搜索的问题。</p>
 <h2>0.9.9</h2>
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -141,6 +141,8 @@ const mindMap = new MindMap({
    hyperlink: '', // 超链接地址
    hyperlinkTitle: '', // 超链接的标题
    note: '', // 备注的内容
+    attachmentUrl: '',// v0.9.10+，附件url
+    attachmentName: '',// v0.9.10+，附件名称
    tag: [], // 标签列表
    generalization: {// 节点的概要，如果没有概要generalization设为null即可
      text: ''// 概要的文本
@@ -452,7 +454,8 @@ mindMap.setTheme('主题名称')
 | expand_btn_click                 | 节点展开或收缩事件                         | this（节点实例）                                             |
 | before_show_text_edit            | 节点文本编辑框即将打开事件                 |                                                              |
 | hide_text_edit                   | 节点文本编辑框关闭事件                     | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
-| scale                            | 放大缩小事件                               | scale（缩放比例）                                            |
+| scale                            | 画布放大缩小事件                               | scale（缩放比例）                                            |
+| translate（v0.9.10+）               | 画布移动事件              | x（水平位移）、y（垂直位移）                     |
 | node_img_dblclick（v0.2.15+）    | 节点内图片的双击事件                       | this（节点实例）、e（事件对象）                              |
 | node_img_mouseenter（v0.6.5+）    |  节点内图片的鼠标移入事件                      | this（节点实例）、imgNode（图片节点）、e（事件对象）                              |
 | node_img_mouseleave（v0.6.5+）    |  节点内图片的鼠标移出事件                      | this（节点实例）、imgNode（图片节点）、e（事件对象）                              |
@@ -576,6 +579,7 @@ mindMap.updateConfig({
 | SET_NODE_ICON                       | 设置节点图标                                                 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
 | SET_NODE_HYPERLINK                  | 设置节点超链接                                               | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选） |
 | SET_NODE_NOTE                       | 设置节点备注                                                 | node（要设置的节点）、note（备注文字）                       |
+| SET_NODE_ATTACHMENT（v0.9.10+）                       | 设置节点附件                                                 | node（要设置的节点）、url（附件url）、name（附件名称，可选）                       |
 | SET_NODE_TAG                        | 设置节点标签                                                 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js)里获取到） |
 | INSERT_AFTER（v0.1.5+）             | 将节点移动到另一个节点的后面    | node（要移动的节点，（v0.7.2+支持传递节点数组实现同时移动多个节点））、 exist（目标节点）                     |
 | INSERT_BEFORE（v0.1.5+）            | 将节点移动到另一个节点的前面，（v0.7.2+支持传递节点数组实现同时移动多个节点）   | node（要移动的节点）、 exist（目标节点）                     |
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -606,6 +606,8 @@
    <span class="hljs-attr">hyperlink</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 超链接地址</span>
    <span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 超链接的标题</span>
    <span class="hljs-attr">note</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 备注的内容</span>
+    <span class="hljs-attr">attachmentUrl</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件url</span>
+    <span class="hljs-attr">attachmentName</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件名称</span>
    <span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// 标签列表</span>
    <span class="hljs-attr">generalization</span>: {<span class="hljs-comment">// 节点的概要，如果没有概要generalization设为null即可</span>
      <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span><span class="hljs-comment">// 概要的文本</span>
@@ -1008,10 +1010,15 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 </tr>
 <tr>
 <td>scale</td>
-<td>放大缩小事件</td>
+<td>画布放大缩小事件</td>
 <td>scale（缩放比例）</td>
 </tr>
 <tr>
+<td>translate（v0.9.10+）</td>
+<td>画布移动事件</td>
+<td>x（水平位移）、y（垂直位移）</td>
+</tr>
+<tr>
 <td>node_img_dblclick（v0.2.15+）</td>
 <td>节点内图片的双击事件</td>
 <td>this（节点实例）、e（事件对象）</td>
@@ -1319,6 +1326,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <td>node（要设置的节点）、note（备注文字）</td>
 </tr>
 <tr>
+<td>SET_NODE_ATTACHMENT（v0.9.10+）</td>
+<td>设置节点附件</td>
+<td>node（要设置的节点）、url（附件url）、name（附件名称，可选）</td>
+</tr>
+<tr>
 <td>SET_NODE_TAG</td>
 <td>设置节点标签</td>
 <td>node（要设置的节点）、tag（字符串数组，内置颜色信息可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>里获取到）</td>
--- a/web/src/pages/Doc/zh/course1/index.md
+++ b/web/src/pages/Doc/zh/course1/index.md
@@ -25,33 +25,38 @@

 ```js
 {
-    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,
+  data: {
+    text: '', // 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true
+    richText: false, // 节点的文本是否是富文本模式
+    expand: true, // 节点是否展开
+    uid: '',// 节点唯一的id，可不传，内部会生成
+    icon: [], // 图标，格式可参考教程里的【插入和扩展节点图标】章节
+    image: '', // 图片的url
+    imageTitle: '', // 图片的标题，可为空
+    imageSize: { // 图片的尺寸
+      width: 100, // 图片的宽度，必传
+      height: 100, // 图片的高度，必传
+      custom: false // 如果设为true，图片的显示大小不受主题控制，以imageSize.width和imageSize.height为准
    },
-    children: []// 子节点
+    hyperlink: '', // 超链接地址
+    hyperlinkTitle: '', // 超链接的标题
+    note: '', // 备注的内容
+    attachmentUrl: '',// v0.9.10+，附件url
+    attachmentName: '',// v0.9.10+，附件名称
+    tag: [], // 标签列表
+    generalization: {// 节点的概要，如果没有概要generalization设为null即可
+      text: ''// 概要的文本
+    },
+    associativeLineTargets: [''],// 如果存在关联线，那么为目标节点的uid列表
+    associativeLineText: '',// 关联线文本
+    // ...其他样式字段，可以参考主题
+  },
+  children [// 子节点，结构和根节点一致
+    {
+      data: {},
+      children: []
+    }
+  ]
 }
 ```

--- a/web/src/pages/Doc/zh/course1/index.vue
+++ b/web/src/pages/Doc/zh/course1/index.vue
@@ -17,33 +17,38 @@
 <p>这是为了避免节点内的文字因为默认样式而出现偏移。</p>
 <p>一个节点的基本数据结构如下所示：</p>
 <pre class="hljs"><code>{
-    <span class="hljs-attr">data</span>: {
-        <span class="hljs-comment">// 节点文本</span>
-        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;根节点&#x27;</span>,
-        <span class="hljs-comment">// 图片</span>
-        <span class="hljs-attr">image</span>: <span class="hljs-string">&#x27;xxx.jpg&#x27;</span>,
-        <span class="hljs-attr">imageTitle</span>: <span class="hljs-string">&#x27;图片名称&#x27;</span>,
-        <span class="hljs-attr">imageSize</span>: {
-            <span class="hljs-attr">width</span>: <span class="hljs-number">1152</span>,
-            <span class="hljs-attr">height</span>: <span class="hljs-number">1152</span>
-        },
-        <span class="hljs-comment">// 图标</span>
-        <span class="hljs-attr">icon</span>: [<span class="hljs-string">&#x27;priority_1&#x27;</span>],
-        <span class="hljs-comment">// 标签</span>
-        <span class="hljs-attr">tag</span>: [<span class="hljs-string">&#x27;标签1&#x27;</span>, <span class="hljs-string">&#x27;标签2&#x27;</span>],
-        <span class="hljs-comment">// 链接</span>
-        <span class="hljs-attr">hyperlink</span>: <span class="hljs-string">&#x27;http://lxqnsys.com/&#x27;</span>,
-        <span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">&#x27;理想青年实验室&#x27;</span>,
-        <span class="hljs-comment">// 备注内容</span>
-        <span class="hljs-attr">note</span>: <span class="hljs-string">&#x27;理想青年实验室\n一个有意思的角落&#x27;</span>,
-        <span class="hljs-comment">// 概要</span>
-        <span class="hljs-attr">generalization</span>: {
-            <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;概要的内容&#x27;</span>
-        },
-        <span class="hljs-comment">// 节点是否展开</span>
-        <span class="hljs-attr">expand</span>: <span class="hljs-literal">true</span>,
+  <span class="hljs-attr">data</span>: {
+    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true</span>
+    <span class="hljs-attr">richText</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 节点的文本是否是富文本模式</span>
+    <span class="hljs-attr">expand</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 节点是否展开</span>
+    <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// 节点唯一的id，可不传，内部会生成</span>
+    <span class="hljs-attr">icon</span>: [], <span class="hljs-comment">// 图标，格式可参考教程里的【插入和扩展节点图标】章节</span>
+    <span class="hljs-attr">image</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 图片的url</span>
+    <span class="hljs-attr">imageTitle</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 图片的标题，可为空</span>
+    <span class="hljs-attr">imageSize</span>: { <span class="hljs-comment">// 图片的尺寸</span>
+      <span class="hljs-attr">width</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// 图片的宽度，必传</span>
+      <span class="hljs-attr">height</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// 图片的高度，必传</span>
+      <span class="hljs-attr">custom</span>: <span class="hljs-literal">false</span> <span class="hljs-comment">// 如果设为true，图片的显示大小不受主题控制，以imageSize.width和imageSize.height为准</span>
    },
-    <span class="hljs-attr">children</span>: []<span class="hljs-comment">// 子节点</span>
+    <span class="hljs-attr">hyperlink</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 超链接地址</span>
+    <span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 超链接的标题</span>
+    <span class="hljs-attr">note</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 备注的内容</span>
+    <span class="hljs-attr">attachmentUrl</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件url</span>
+    <span class="hljs-attr">attachmentName</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件名称</span>
+    <span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// 标签列表</span>
+    <span class="hljs-attr">generalization</span>: {<span class="hljs-comment">// 节点的概要，如果没有概要generalization设为null即可</span>
+      <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span><span class="hljs-comment">// 概要的文本</span>
+    },
+    <span class="hljs-attr">associativeLineTargets</span>: [<span class="hljs-string">&#x27;&#x27;</span>],<span class="hljs-comment">// 如果存在关联线，那么为目标节点的uid列表</span>
+    <span class="hljs-attr">associativeLineText</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// 关联线文本</span>
+    <span class="hljs-comment">// ...其他样式字段，可以参考主题</span>
+  },
+  children [<span class="hljs-comment">// 子节点，结构和根节点一致</span>
+    {
+      <span class="hljs-attr">data</span>: {},
+      <span class="hljs-attr">children</span>: []
+    }
+  ]
 }
 </code></pre>
 <p><code>icon</code>可以使用内置的图标，完整图标可以在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a>文件中查看。也可以扩展图标，参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/course19/%E6%89%A9%E5%B1%95%E5%9B%BE%E6%A0%87">扩展图标</a>。</p>
--- a/web/src/pages/Doc/zh/course27/index.md
+++ b/web/src/pages/Doc/zh/course27/index.md
@@ -0,0 +1,49 @@
+# 快捷键操作如何传递自定义参数
+
+库提供了很多命令，比如插入子节点的`INSERT_CHILD_NODE`等，这些命令大多可以接收一定参数，比如在插入节点时我想指定初始文本和节点uid，那么可以这样调用：
+
+```js
+mindMap.execCommand('INSERT_CHILD_NODE', true, [], {
+    text: '初始文本',
+    uid: 'xxx'
+})
+```
+
+但是同时库内部也默认注册了很多快捷键，比如插入下级节点的`Tab`快捷键，很遗憾，目前快捷键操作无法让你传入自定义的参数，那么该怎么办呢，可以这样处理，首先确定你要给什么快捷键传入参数，比如`Tab`，那么首先可以调用如下方法删除库默认注册的快捷键：
+
+```js
+const keyName = 'Tab'
+mindMap.keyCommand.removeShortcut(keyName)
+```
+
+然后再重新注册即可：
+
+```js
+mindMap.keyCommand.addShortcut(keyName, () => {
+    mindMap.execCommand('INSERT_CHILD_NODE', true, [], {
+        text: '初始文本',
+        uid: 'xxx'
+    })
+})
+```
+
+库内部默认注册的快捷键对应的命令一览：
+
+| 快捷键          | 命令                |
+| --------------- | ------------------- |
+| Control+z       | BACK                |
+| Control+y       | FORWARD             |
+| Tab             | INSERT_CHILD_NODE   |
+| Insert          | INSERT_CHILD_NODE   |
+| Enter           | INSERT_NODE         |
+| Shift+Tab       | INSERT_PARENT_NODE  |
+| Control+g       | ADD_GENERALIZATION  |
+| Del或Backspace  | REMOVE_NODE         |
+| Shift+Backspace | REMOVE_CURRENT_NODE |
+| Control+a       | SELECT_ALL          |
+| Control+l       | RESET_LAYOUT        |
+| Control+Up      | UP_NODE             |
+| Control+Down    | DOWN_NODE           |
+
+
+
--- a/web/src/pages/Doc/zh/course27/index.vue
+++ b/web/src/pages/Doc/zh/course27/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <h1>快捷键操作如何传递自定义参数</h1>
+<p>库提供了很多命令，比如插入子节点的<code>INSERT_CHILD_NODE</code>等，这些命令大多可以接收一定参数，比如在插入节点时我想指定初始文本和节点uid，那么可以这样调用：</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">true</span>, [], {
+    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;初始文本&#x27;</span>,
+    <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
+})
+</code></pre>
+<p>但是同时库内部也默认注册了很多快捷键，比如插入下级节点的<code>Tab</code>快捷键，很遗憾，目前快捷键操作无法让你传入自定义的参数，那么该怎么办呢，可以这样处理，首先确定你要给什么快捷键传入参数，比如<code>Tab</code>，那么首先可以调用如下方法删除库默认注册的快捷键：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> keyName = <span class="hljs-string">&#x27;Tab&#x27;</span>
+mindMap.keyCommand.removeShortcut(keyName)
+</code></pre>
+<p>然后再重新注册即可：</p>
+<pre class="hljs"><code>mindMap.keyCommand.addShortcut(keyName, <span class="hljs-function">() =&gt;</span> {
+    mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">true</span>, [], {
+        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;初始文本&#x27;</span>,
+        <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
+    })
+})
+</code></pre>
+<p>库内部默认注册的快捷键对应的命令一览：</p>
+<table>
+<thead>
+<tr>
+<th>快捷键</th>
+<th>命令</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Control+z</td>
+<td>BACK</td>
+</tr>
+<tr>
+<td>Control+y</td>
+<td>FORWARD</td>
+</tr>
+<tr>
+<td>Tab</td>
+<td>INSERT_CHILD_NODE</td>
+</tr>
+<tr>
+<td>Insert</td>
+<td>INSERT_CHILD_NODE</td>
+</tr>
+<tr>
+<td>Enter</td>
+<td>INSERT_NODE</td>
+</tr>
+<tr>
+<td>Shift+Tab</td>
+<td>INSERT_PARENT_NODE</td>
+</tr>
+<tr>
+<td>Control+g</td>
+<td>ADD_GENERALIZATION</td>
+</tr>
+<tr>
+<td>Del或Backspace</td>
+<td>REMOVE_NODE</td>
+</tr>
+<tr>
+<td>Shift+Backspace</td>
+<td>REMOVE_CURRENT_NODE</td>
+</tr>
+<tr>
+<td>Control+a</td>
+<td>SELECT_ALL</td>
+</tr>
+<tr>
+<td>Control+l</td>
+<td>RESET_LAYOUT</td>
+</tr>
+<tr>
+<td>Control+Up</td>
+<td>UP_NODE</td>
+</tr>
+<tr>
+<td>Control+Down</td>
+<td>DOWN_NODE</td>
+</tr>
+</tbody>
+</table>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/course7/index.md
+++ b/web/src/pages/Doc/zh/course7/index.md
@@ -2,6 +2,10 @@

 > 节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。

+> 另外不要把节点拖拽和自由拖拽搞混，节点拖拽指拖动节点到其他节点上成为其子节点或兄弟节点，自由拖拽只是可以把节点放置在你拖动到的画布位置，并不能改变节点的层级。
+
+> 最后要注意这两个功能都需要先注册Drag插件。
+
 节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化`simple-mind-map`时传入开启的选项：

 ```js
--- a/web/src/pages/Doc/zh/course7/index.vue
+++ b/web/src/pages/Doc/zh/course7/index.vue
@@ -4,6 +4,12 @@
 <blockquote>
 <p>节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。</p>
 </blockquote>
+<blockquote>
+<p>另外不要把节点拖拽和自由拖拽搞混，节点拖拽指拖动节点到其他节点上成为其子节点或兄弟节点，自由拖拽只是可以把节点放置在你拖动到的画布位置，并不能改变节点的层级。</p>
+</blockquote>
+<blockquote>
+<p>最后要注意这两个功能都需要先注册Drag插件。</p>
+</blockquote>
 <p>节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化<code>simple-mind-map</code>时传入开启的选项：</p>
 <pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
    <span class="hljs-comment">// ...</span>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -344,4 +344,10 @@
        <img src="../../../../assets/avatar/L.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>L</p>
    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>sunniberg</p>
+    </div>
 </div>
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -8,17 +8,17 @@
 </blockquote>
 <h2>特性</h2>
 <ul>
-<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
-<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
-<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
-<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
-<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容</label></li>
-<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">支持画布拖动、缩放</label></li>
-<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
-<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
-<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条</label></li>
-<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">提供丰富的配置，满足各种场景各种使用习惯</label></li>
-<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">支持协同编辑</label></li>
+<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
+<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
+<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
+<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容</label></li>
+<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">支持画布拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
+<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
+<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条</label></li>
+<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">提供丰富的配置，满足各种场景各种使用习惯</label></li>
+<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">支持协同编辑</label></li>
 </ul>
 <blockquote>
 <p>不会实现的特性：</p>
@@ -32,11 +32,11 @@
 <p>2.<code>web</code></p>
 <p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
 <ul>
-<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
-<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
-<li><input type="checkbox" id="checkbox46" checked="true" /><label for="checkbox46">右键菜单，支持展开、收起、整理布局等操作</label></li>
-<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
+<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
 <p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
@@ -299,6 +299,12 @@
        <img src="../../../../assets/avatar/L.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>L</p>
    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>sunniberg</p>
+    </div>
 </div>
  </div>
 </template>
--- a/web/src/pages/Doc/zh/node/index.md
+++ b/web/src/pages/Doc/zh/node/index.md
@@ -258,6 +258,16 @@

 设置节点备注，`SET_NODE_NOTE`命令的快捷方法

+### setAttachment(url, name)
+
+> v0.9.10+
+
+- `url`：附件的url；
+
+- `name`：附件的名称，可选
+
+设置节点附件，`SET_NODE_ATTACHMENT`命令的快捷方法
+
 ### setTag(tag)

 设置节点标签，`SET_NODE_TAG`的快捷方法
--- a/web/src/pages/Doc/zh/node/index.vue
+++ b/web/src/pages/Doc/zh/node/index.vue
@@ -188,6 +188,19 @@
 <p>设置节点超链接，<code>SET_NODE_HYPERLINK</code>命令的快捷方法</p>
 <h3>setNote(note)</h3>
 <p>设置节点备注，<code>SET_NODE_NOTE</code>命令的快捷方法</p>
+<h3>setAttachment(url, name)</h3>
+<blockquote>
+<p>v0.9.10+</p>
+</blockquote>
+<ul>
+<li>
+<p><code>url</code>：附件的url；</p>
+</li>
+<li>
+<p><code>name</code>：附件的名称，可选</p>
+</li>
+</ul>
+<p>设置节点附件，<code>SET_NODE_ATTACHMENT</code>命令的快捷方法</p>
 <h3>setTag(tag)</h3>
 <p>设置节点标签，<code>SET_NODE_TAG</code>的快捷方法</p>
 <h3>hide()</h3>
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@@ -221,6 +221,7 @@ export default {
    this.$bus.$on('expand_btn_click', this.hide)
    this.$bus.$on('svg_mousedown', this.onMousedown)
    this.$bus.$on('mouseup', this.onMouseup)
+    this.$bus.$on('translate', this.hide)
  },
  beforeDestroy() {
    this.$bus.$off('node_contextmenu', this.show)
@@ -229,6 +230,7 @@ export default {
    this.$bus.$off('expand_btn_click', this.hide)
    this.$bus.$off('svg_mousedown', this.onMousedown)
    this.$bus.$off('mouseup', this.onMouseup)
+    this.$bus.$off('translate', this.hide)
  },
  methods: {
    ...mapMutations(['setLocalConfig']),
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="editContainer">
+  <div
+    class="editContainer"
+    @dragenter.stop.prevent="onDragenter"
+    @dragleave.stop.prevent
+    @dragover.stop.prevent
+    @drop.stop.prevent
+  >
    <div class="mindMapContainer" ref="mindMapContainer"></div>
    <Count :mindMap="mindMap" v-if="!isZenMode"></Count>
    <Navigator :mindMap="mindMap"></Navigator>
@@ -16,6 +22,7 @@
      v-if="mindMap"
      :mindMap="mindMap"
    ></NodeNoteContentShow>
+    <NodeAttachment v-if="mindMap" :mindMap="mindMap"></NodeAttachment>
    <NodeImgPreview v-if="mindMap" :mindMap="mindMap"></NodeImgPreview>
    <SidebarTrigger v-if="!isZenMode"></SidebarTrigger>
    <Search v-if="mindMap" :mindMap="mindMap"></Search>
@@ -25,6 +32,15 @@
    <Scrollbar v-if="isShowScrollbar && mindMap" :mindMap="mindMap"></Scrollbar>
    <FormulaSidebar v-if="mindMap" :mindMap="mindMap"></FormulaSidebar>
    <SourceCodeEdit v-if="mindMap" :mindMap="mindMap"></SourceCodeEdit>
+    <div
+      class="dragMask"
+      v-if="showDragMask"
+      @dragleave.stop.prevent="onDragleave"
+      @dragover.stop.prevent
+      @drop.stop.prevent="onDrop"
+    >
+      <div class="dragTip">{{ $t('edit.dragTip') }}</div>
+    </div>
  </div>
 </template>

@@ -85,6 +101,7 @@ import Scrollbar from './Scrollbar.vue'
 import exampleData from 'simple-mind-map/example/exampleData'
 import FormulaSidebar from './FormulaSidebar.vue'
 import SourceCodeEdit from './SourceCodeEdit.vue'
+import NodeAttachment from './NodeAttachment.vue'

 // 注册插件
 MindMap.usePlugin(MiniMap)
@@ -137,7 +154,8 @@ export default {
    OutlineEdit,
    Scrollbar,
    FormulaSidebar,
-    SourceCodeEdit
+    SourceCodeEdit,
+    NodeAttachment
  },
  data() {
    return {
@@ -145,7 +163,8 @@ export default {
      mindMap: null,
      mindMapData: null,
      prevImg: '',
-      storeConfigTimer: null
+      storeConfigTimer: null,
+      showDragMask: false
    }
  },
  computed: {
@@ -491,7 +510,10 @@ export default {
        'painter_start',
        'painter_end',
        'scrollbar_change',
-        'scale'
+        'scale',
+        'translate',
+        'node_attachmentClick',
+        'node_attachmentContextmenu'
      ].forEach(event => {
        this.mindMap.on(event, (...args) => {
          this.$bus.$emit(event, ...args)
@@ -773,6 +795,20 @@ export default {
              : ''
        })
      }
+    },
+
+    // 拖拽文件到页面导入
+    onDragenter() {
+      this.showDragMask = true
+    },
+    onDragleave() {
+      this.showDragMask = false
+    },
+    onDrop(e) {
+      this.showDragMask = false
+      const dt = e.dataTransfer
+      const file = dt.files && dt.files[0]
+      this.$bus.$emit('importFile', file)
    }
  }
 }
@@ -786,6 +822,24 @@ export default {
  top: 0;
  bottom: 0;

+  .dragMask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3999;
+
+    .dragTip {
+      pointer-events: none;
+      font-weight: bold;
+    }
+  }
+
  .mindMapContainer {
    position: absolute;
    left: 0px;
--- a/web/src/pages/Edit/components/Import.vue
+++ b/web/src/pages/Edit/components/Import.vue
@@ -63,10 +63,12 @@ export default {
  created() {
    this.$bus.$on('showImport', this.handleShowImport)
    this.$bus.$on('handle_file_url', this.handleFileURL)
+    this.$bus.$on('importFile', this.handleImportFile)
  },
  beforeDestroy() {
    this.$bus.$off('showImport', this.handleShowImport)
    this.$bus.$off('handle_file_url', this.handleFileURL)
+    this.$bus.$off('importFile', this.handleImportFile)
  },
  methods: {
    ...mapMutations(['setActiveSidebar']),
@@ -286,6 +288,16 @@ export default {
          this.$message.error(this.$t('import.fileParsingFailed'))
        }
      }
+    },
+
+    // 导入指定文件
+    handleImportFile(file) {
+      this.onChange({
+        raw: file,
+        name: file.name
+      })
+      if (this.fileList.length <= 0) return
+      this.confirm()
    }
  }
 }
--- a/web/src/pages/Edit/components/NavigatorToolbar.vue
+++ b/web/src/pages/Edit/components/NavigatorToolbar.vue
@@ -150,7 +150,7 @@ export default {
    this.lang = getLang()
  },
  methods: {
-    ...mapMutations(['setLocalConfig', 'setIsReadonly', 'setIsOutlineEdit']),
+    ...mapMutations(['setLocalConfig', 'setIsReadonly', 'setIsSourceCodeEdit']),

    readonlyChange() {
      this.setIsReadonly(!this.isReadonly)
@@ -210,7 +210,7 @@ export default {
    },

    openSourceCodeEdit() {
-      this.setIsOutlineEdit(true)
+      this.setIsSourceCodeEdit(true)
    }
  }
 }
--- a/web/src/pages/Edit/components/NodeAttachment.vue
+++ b/web/src/pages/Edit/components/NodeAttachment.vue
@@ -0,0 +1,133 @@
+<template>
+  <div
+    class="nodeAttachmentContextMenu"
+    :style="{
+      left: this.left + 'px',
+      top: this.top + 'px',
+      visibility: show ? 'visible' : 'hidden'
+    }"
+    @click.stop="deleteAttachment"
+  >
+    <div class="menuItem">{{ $t('attachment.deleteAttachment') }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    mindMap: {
+      type: Object,
+      default() {
+        return null
+      }
+    }
+  },
+  data() {
+    return {
+      show: false,
+      left: 0,
+      top: 0,
+      node: null,
+      icon: null
+    }
+  },
+  created() {
+    this.$bus.$on('node_attachmentClick', this.onNodeAttachmentClick)
+    this.$bus.$on('selectAttachment', this.onSelectAttachment)
+    this.$bus.$on(
+      'node_attachmentContextmenu',
+      this.onNodeAttachmentContextmenu
+    )
+    this.$bus.$on('hide', this.hide)
+    document.body.addEventListener('click', this.hide)
+    this.$bus.$on('node_active', this.hide)
+    this.$bus.$on('scale', this.onScale)
+    this.$bus.$on('translate', this.onScale)
+    this.$bus.$on('svg_mousedown', this.hide)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_attachmentClick', this.onNodeAttachmentClick)
+    this.$bus.$off('selectAttachment', this.onSelectAttachment)
+    this.$bus.$off(
+      'node_attachmentContextmenu',
+      this.onNodeAttachmentContextmenu
+    )
+    this.$bus.$off('hide', this.hide)
+    document.body.removeEventListener('click', this.hide)
+    this.$bus.$off('node_active', this.hide)
+    this.$bus.$off('scale', this.onScale)
+    this.$bus.$off('translate', this.onScale)
+    this.$bus.$off('svg_mousedown', this.hide)
+  },
+  methods: {
+    // 选择附件
+    onSelectAttachment(activeNodes) {
+      // activeNodes.forEach(node => {
+      //   node.setAttachment('/test.md', '我去')
+      // })
+    },
+
+    // 点击附件图标，一般用来打开或下载附件
+    onNodeAttachmentClick(node, e, icon) {
+      // console.log(node.getData('attachmentUrl'))
+      this.$message.info(this.$t('attachment.tip'))
+    },
+
+    // 显示删除浮层
+    onNodeAttachmentContextmenu(node, e, icon) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.node = node
+      this.icon = icon
+      this.updatePosition()
+      this.show = true
+    },
+
+    // 更新位置
+    updatePosition() {
+      const iconSize = this.mindMap.themeConfig.iconSize
+      const { x, y } = this.icon.rbox()
+      this.left = x + iconSize
+      this.top = y
+    },
+
+    // 画布缩放事件
+    onScale() {
+      if (!this.node || !this.show) return
+      this.updatePosition()
+    },
+
+    // 删除附件
+    deleteAttachment() {
+      if (!this.node || !this.show) return
+      this.node.setAttachment('', '')
+      this.hide()
+    },
+
+    // 隐藏浮层
+    hide() {
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.nodeAttachmentContextMenu {
+  position: fixed;
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+
+  .menuItem {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #1a1a1a;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+</style>
--- a/web/src/pages/Edit/components/NodeNoteContentShow.vue
+++ b/web/src/pages/Edit/components/NodeNoteContentShow.vue
@@ -37,6 +37,7 @@ export default {
    document.body.addEventListener('click', this.hideNoteContent)
    this.$bus.$on('node_active', this.hideNoteContent)
    this.$bus.$on('scale', this.onScale)
+    this.$bus.$on('translate', this.onScale)
    this.$bus.$on('svg_mousedown', this.hideNoteContent)
  },
  mounted() {
@@ -48,6 +49,7 @@ export default {
    document.body.removeEventListener('click', this.hideNoteContent)
    this.$bus.$off('node_active', this.hideNoteContent)
    this.$bus.$off('scale', this.onScale)
+    this.$bus.$off('translate', this.onScale)
    this.$bus.$off('svg_mousedown', this.hideNoteContent)
  },
  methods: {
@@ -97,6 +99,8 @@ export default {
  border-radius: 5px;
  max-height: 300px;
  overflow-y: auto;
+  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.06);

  &::-webkit-scrollbar {
    width: 7px;
--- a/web/src/pages/Edit/components/SourceCodeEdit.vue
+++ b/web/src/pages/Edit/components/SourceCodeEdit.vue
@@ -96,7 +96,7 @@ export default {
    }
  },
  methods: {
-    ...mapMutations(['setIsOutlineEdit']),
+    ...mapMutations(['setIsSourceCodeEdit']),

    // 初始化编辑器
    initEditor() {
@@ -117,7 +117,7 @@ export default {
      try {
        const content = editor.getValue()
        const data = JSON.parse(content)
-        this.setIsOutlineEdit(false)
+        this.setIsSourceCodeEdit(false)
        this.$bus.$emit('setData', data)
      } catch (error) {
        console.log(error)
@@ -127,7 +127,7 @@ export default {

    // 关闭
    onClose() {
-      this.setIsOutlineEdit(false)
+      this.setIsSourceCodeEdit(false)
    },

    // 复制
--- a/web/src/pages/Edit/components/Toolbar.vue
+++ b/web/src/pages/Edit/components/Toolbar.vue
@@ -178,6 +178,7 @@ export default {
        'summary',
        'associativeLine',
        'formula'
+        // 'attachment'
      ],
      horizontalList: [],
      verticalList: [],
--- a/web/src/pages/Edit/components/ToolbarNodeBtnList.vue
+++ b/web/src/pages/Edit/components/ToolbarNodeBtnList.vue
@@ -156,6 +156,17 @@
        <span class="icon iconfont icongongshi"></span>
        <span class="text">{{ $t('toolbar.formula') }}</span>
      </div>
+      <div
+        v-if="item === 'attachment'"
+        class="toolbarBtn"
+        :class="{
+          disabled: activeNodes.length <= 0 || hasGeneralization
+        }"
+        @click="selectAttachmentFile"
+      >
+        <span class="icon iconfont iconfujian"></span>
+        <span class="text">{{ $t('toolbar.attachment') }}</span>
+      </div>
    </template>
  </div>
 </template>
@@ -258,6 +269,11 @@ export default {
    // 打开公式侧边栏
    showFormula() {
      this.setActiveSidebar('formulaSidebar')
+    },
+
+    // 选择附件
+    selectAttachmentFile() {
+      this.$bus.$emit('selectAttachment', this.activeNodes)
    }
  }
 }
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -65,7 +65,7 @@ const store = new Vuex.Store({
    },

    // 设置源码编辑模式
-    setIsOutlineEdit(state, data) {
+    setIsSourceCodeEdit(state, data) {
      state.isSourceCodeEdit = data
    },
Author	SHA1	Message	Date
街角小林	a36b9085bf	打包0.9.10	2024-04-02 18:14:01 +08:00
街角小林	42c934cb6d	Doc: update	2024-04-02 13:57:57 +08:00
街角小林	728b1e1503	Doc: update	2024-04-02 11:53:30 +08:00
街角小林	1949d86abb	Demo：支持拖拽文件到页面进行导入	2024-04-02 11:51:32 +08:00
街角小林	a7c68816f9	Doc: update	2024-04-02 09:01:45 +08:00
街角小林	ac3ad1681f	Fix：修复节点文本存在svg不支持的实体字符时小地图无法渲染的问题	2024-04-02 09:00:09 +08:00
街角小林	92894d0341	Demo: update	2024-04-01 20:08:15 +08:00
街角小林	58dc232ebf	Doc: update	2024-04-01 20:04:06 +08:00
街角小林	5abf09b560	Doc: update	2024-04-01 17:49:57 +08:00
街角小林	6694dffa06	update	2024-04-01 14:51:49 +08:00
街角小林	3673c6aafe	Demo：支持添加附件内容（在线Demo不开放）	2024-04-01 13:53:09 +08:00
街角小林	979299f2e2	Feat：节点内容支持设置附件	2024-04-01 13:51:05 +08:00
街角小林	c0f69e038a	Feat：节点内容支持设置附件	2024-04-01 13:50:20 +08:00
街角小林	80727b759d	Fix：修复搜索时全部替换操作报错的问题	2024-03-29 18:02:02 +08:00
街角小林	57fe315345	打包0.9.9-fix.2	2024-03-29 16:16:08 +08:00
街角小林	231dbc00bc	Demo：修复侧边栏大纲点击全屏编辑时打开的是源码编辑模式的问题	2024-03-29 16:02:09 +08:00
街角小林	02957e1fcf	Fix:修复开启彩虹线条时切换结构会报错的问题	2024-03-29 15:51:32 +08:00
街角小林	38576a4860	Fix：修复插入父节点操作时原节点样式为更新的问题	2024-03-29 15:44:02 +08:00
				`@@ -0,0 +1 @@`
				(window["webpackJsonp"]=window["webpackJsonp"]\|\|[]).push([["chunk-2d0a4b03"],{"0805":function(t,s,_){"use strict";_.r(s);var a=function(){var t=this;t._self._c;return t._m(0)},v=[function(){var t=this,s=t._self._c;return s("div",[s("h1",[t._v("快捷键操作如何传递自定义参数")]),s("p",[t._v("库提供了很多命令，比如插入子节点的"),s("code",[t._v("INSERT_CHILD_NODE")]),t._v("等，这些命令大多可以接收一定参数，比如在插入节点时我想指定初始文本和节点uid，那么可以这样调用：")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("mindMap.execCommand("),s("span",{staticClass:"hljs-string"},[t._v("'INSERT_CHILD_NODE'")]),t._v(", "),s("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(", [], {\n "),s("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'初始文本'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("uid")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'xxx'")]),t._v("\n})\n")])]),s("p",[t._v("但是同时库内部也默认注册了很多快捷键，比如插入下级节点的"),s("code",[t._v("Tab")]),t._v("快捷键，很遗憾，目前快捷键操作无法让你传入自定义的参数，那么该怎么办呢，可以这样处理，首先确定你要给什么快捷键传入参数，比如"),s("code",[t._v("Tab")]),t._v("，那么首先可以调用如下方法删除库默认注册的快捷键：")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" keyName = "),s("span",{staticClass:"hljs-string"},[t._v("'Tab'")]),t._v("\nmindMap.keyCommand.removeShortcut(keyName)\n")])]),s("p",[t._v("然后再重新注册即可：")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("mindMap.keyCommand.addShortcut(keyName, "),s("span",{staticClass:"hljs-function"},[t._v("() =>")]),t._v(" {\n mindMap.execCommand("),s("span",{staticClass:"hljs-string"},[t._v("'INSERT_CHILD_NODE'")]),t._v(", "),s("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(", [], {\n "),s("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'初始文本'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("uid")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'xxx'")]),t._v("\n })\n})\n")])]),s("p",[t._v("库内部默认注册的快捷键对应的命令一览：")]),s("table",[s("thead",[s("tr",[s("th",[t._v("快捷键")]),s("th",[t._v("命令")])])]),s("tbody",[s("tr",[s("td",[t._v("Control+z")]),s("td",[t._v("BACK")])]),s("tr",[s("td",[t._v("Control+y")]),s("td",[t._v("FORWARD")])]),s("tr",[s("td",[t._v("Tab")]),s("td",[t._v("INSERT_CHILD_NODE")])]),s("tr",[s("td",[t._v("Insert")]),s("td",[t._v("INSERT_CHILD_NODE")])]),s("tr",[s("td",[t._v("Enter")]),s("td",[t._v("INSERT_NODE")])]),s("tr",[s("td",[t._v("Shift+Tab")]),s("td",[t._v("INSERT_PARENT_NODE")])]),s("tr",[s("td",[t._v("Control+g")]),s("td",[t._v("ADD_GENERALIZATION")])]),s("tr",[s("td",[t._v("Del或Backspace")]),s("td",[t._v("REMOVE_NODE")])]),s("tr",[s("td",[t._v("Shift+Backspace")]),s("td",[t._v("REMOVE_CURRENT_NODE")])]),s("tr",[s("td",[t._v("Control+a")]),s("td",[t._v("SELECT_ALL")])]),s("tr",[s("td",[t._v("Control+l")]),s("td",[t._v("RESET_LAYOUT")])]),s("tr",[s("td",[t._v("Control+Up")]),s("td",[t._v("UP_NODE")])]),s("tr",[s("td",[t._v("Control+Down")]),s("td",[t._v("DOWN_NODE")])])])])])}],n={},l=n,r=_("2877"),d=Object(r["a"])(l,a,v,!1,null,null,null);s["default"]=d.exports}}]);