From bdb6078df63914ac01ed4cff397f6453b77d7b2b Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Wed, 21 Jun 2023 15:33:51 +0800
Subject: [PATCH] =?UTF-8?q?'=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/package.json                  |  2 +-
 web/src/pages/Doc/catalogList.js              |  2 +-
 web/src/pages/Doc/en/changelog/index.md       |  6 ++
 web/src/pages/Doc/en/changelog/index.vue      |  3 +
 web/src/pages/Doc/en/constructor/index.md     |  2 +
 web/src/pages/Doc/en/constructor/index.vue    | 14 +++
 web/src/pages/Doc/routerList.js               |  1 +
 web/src/pages/Doc/zh/changelog/index.md       |  6 ++
 web/src/pages/Doc/zh/changelog/index.vue      |  3 +
 web/src/pages/Doc/zh/constructor/index.md     |  2 +
 web/src/pages/Doc/zh/constructor/index.vue    | 14 +++
 web/src/pages/Doc/zh/course20/index.md        | 98 +++++++++++++++++++
 web/src/pages/Doc/zh/course20/index.vue       | 93 ++++++++++++++++++
 .../Edit/components/CustomNodeContent.vue     | 36 +++++++
 web/src/pages/Edit/components/Edit.vue        | 35 ++++++-
 15 files changed, 313 insertions(+), 4 deletions(-)
 create mode 100644 web/src/pages/Doc/zh/course20/index.md
 create mode 100644 web/src/pages/Doc/zh/course20/index.vue
 create mode 100644 web/src/pages/Edit/components/CustomNodeContent.vue

diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json
index 9c15737f..f575f5fe 100644
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {
diff --git a/web/src/pages/Doc/catalogList.js b/web/src/pages/Doc/catalogList.js
index cdc0ec6f..f17a2f61 100644
--- 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(19).fill(0).map((_, index) => {
+let CourseList = new Array(20).fill(0).map((_, index) => {
   return 'course' + (index + 1)
 })
 let APIList = [
diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md
index b2ec82a8..4e9f98b7 100644
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.6.3
+
+Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.
+
+New: 1.Support custom node content.
+
 ## 0.6.2
 
 Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.
diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue
index f75ec873..b03cad68 100644
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.6.3</h2>
+<p>Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.</p>
+<p>New: 1.Support custom node content.</p>
 <h2>0.6.2</h2>
 <p>Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.</p>
 <h2>0.6.1</h2>
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md
index b2298eca..17eec8ba 100644
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -67,6 +67,8 @@ const mindMap = new MindMap({
 | enableCtrlKeyNodeSelection（v0.6.0+）     | Boolean  | true |  Whether to enable the function of holding down the Ctrl key to select multiple nodes |          |
 | useLeftKeySelectionRightKeyDrag（v0.6.0+）     | Boolean  | false | Setting to left click to select multiple nodes and right click to drag the canvas.  |          |
 | beforeTextEdit（v0.6.0+）     |  Function/null | null | The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance  |          |
+| isUseCustomNodeContent（v0.6.3+）     |  Boolean | false |  Whether to customize node content |          |
+| customCreateNodeContent（v0.6.3+）     |  Function/null | null | If `isUseCustomNodeContent` is set to `true`, then this option needs to be used to pass in a method that receives the node instance `node` as a parameter (if you want to obtain data for that node, you can use `node.nodeData.data`). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return `null` |          |
 
 ### Watermark config
 
diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue
index 487b7608..2c41555d 100644
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -329,6 +329,20 @@
 <td>The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance</td>
 <td></td>
 </tr>
+<tr>
+<td>isUseCustomNodeContent（v0.6.3+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>Whether to customize node content</td>
+<td></td>
+</tr>
+<tr>
+<td>customCreateNodeContent（v0.6.3+）</td>
+<td>Function/null</td>
+<td>null</td>
+<td>If <code>isUseCustomNodeContent</code> is set to <code>true</code>, then this option needs to be used to pass in a method that receives the node instance <code>node</code> as a parameter (if you want to obtain data for that node, you can use <code>node.nodeData.data</code>). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return <code>null</code></td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js
index d024d5e5..2ee74312 100644
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -26,6 +26,7 @@ export default [
       { path: 'course17', title: '导入和导出' },
       { path: 'course18', title: '如何持久化数据' },
       { path: 'course19', title: '插入和扩展节点图标' },
+      { path: 'course20', title: '如何自定义节点内容' },
       { path: 'doExport', title: 'Export 插件' },
       { path: 'drag', title: 'Drag插件' },
       { path: 'introduction', title: '简介' },
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index 40ce409c..d4a8c535 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.6.3
+
+修复：1.修复概要节点会响应插入节点快捷键的问题。
+
+新增：1.支持自定义节点内容。
+
 ## 0.6.2
 
 修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index 8ae12e9c..b47cd835 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.6.3</h2>
+<p>修复：1.修复概要节点会响应插入节点快捷键的问题。</p>
+<p>新增：1.支持自定义节点内容。</p>
 <h2>0.6.2</h2>
 <p>修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。</p>
 <h2>0.6.1</h2>
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index b84b65b9..b3946483 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -67,6 +67,8 @@ const mindMap = new MindMap({
 | enableCtrlKeyNodeSelection（v0.6.0+）     | Boolean  | true | 是否开启按住ctrl键多选节点的功能  |          |
 | useLeftKeySelectionRightKeyDrag（v0.6.0+）     | Boolean  | false | 设置为左键多选节点，右键拖动画布  |          |
 | beforeTextEdit（v0.6.0+）     |  Function/null | null | 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例  |          |
+| isUseCustomNodeContent（v0.6.3+）     |  Boolean | false | 是否自定义节点内容  |          |
+| customCreateNodeContent（v0.6.3+）     |  Function/null | null | 如果`isUseCustomNodeContent`设为`true`，那么需要使用该选项传入一个方法，接收节点实例`node`为参数（如果要获取该节点的数据，可以通过`node.nodeData.data`），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回`null`即可 |          |
 
 ### 水印配置
 
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 21986e0e..eedc0dfe 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -329,6 +329,20 @@
 <td>节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例</td>
 <td></td>
 </tr>
+<tr>
+<td>isUseCustomNodeContent（v0.6.3+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>是否自定义节点内容</td>
+<td></td>
+</tr>
+<tr>
+<td>customCreateNodeContent（v0.6.3+）</td>
+<td>Function/null</td>
+<td>null</td>
+<td>如果<code>isUseCustomNodeContent</code>设为<code>true</code>，那么需要使用该选项传入一个方法，接收节点实例<code>node</code>为参数（如果要获取该节点的数据，可以通过<code>node.nodeData.data</code>），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回<code>null</code>即可</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>
diff --git a/web/src/pages/Doc/zh/course20/index.md b/web/src/pages/Doc/zh/course20/index.md
new file mode 100644
index 00000000..09a30210
--- /dev/null
+++ b/web/src/pages/Doc/zh/course20/index.md
@@ -0,0 +1,98 @@
+# 如何自定义节点内容
+
+> 该特性v0.6.3+版本支持
+
+如果你想自定义节点的内容，那么可以在实例化`simple-mind-map`时传入一下选项：
+
+```js
+new MindMap({
+    isUseCustomNodeContent: true,
+    customCreateNodeContent: (node) => {
+        // return你的自定义DOM节点
+    }
+})
+```
+
+`customCreateNodeContent`方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：
+
+```js
+node.nodeData.data
+```
+
+其他节点实例属性你可以自行打印出来看看。
+
+`customCreateNodeContent`方法需要返回`DOM`节点，如果某个节点你不想自定义，那么可以返回`null`，那么还是会走内置的节点渲染逻辑。
+
+如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。
+
+## 示例1：渲染自定义DOM节点
+
+```js
+{
+    customCreateNodeContent: (node) => {
+        let div = document.createElement('div')
+        div.className = 'xxx'
+        div.style.cssText = `xxx`
+        div.innerHTML = `
+            <h1>我是自定义节点</h1>
+            ${ node.nodeData.text }
+        `
+        return dev
+    }
+}
+```
+
+## 示例2：渲染Vue2组件
+
+如果想要使用一个相对简单的`Vue`组件，那么可以通过如下方式：
+
+```js
+import CustomNodeContent from 'CustomNodeContent.vue'
+import Vue from 'vue'
+
+{
+    customCreateNodeContent: (node) => {
+        let el = document.createElement('div')
+        let Comp = Vue.extend(CustomNodeContent)
+        let comp = new Comp({
+            // props
+            propsData: {
+                html: node.nodeData.data.text
+            }
+        })
+        comp.$mount(el)
+        return comp.$el
+    }
+}
+```
+
+如果你的`Vue`组件比较复杂，里面用到了`vueRouter`、`vuex`、`i18n`等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。
+
+```js
+import CustomNodeContent from 'CustomNodeContent.vue'
+import Vue from 'vue'
+import router from './router'
+import store from './store'
+import i18n from './i18n'
+
+{
+    customCreateNodeContent: (node) => {
+        let el = document.createElement('div')
+        let Comp = Vue.extend(CustomNodeContent)
+        let comp = new Comp({
+            // props
+            propsData: {
+                html: node.nodeData.data.text
+            },
+            router,
+            store,
+            i18n
+        })
+        comp.$mount(el)
+        return comp.$el
+    }
+}
+```
+
+## 示例3：渲染Vue3组件
+
diff --git a/web/src/pages/Doc/zh/course20/index.vue b/web/src/pages/Doc/zh/course20/index.vue
new file mode 100644
index 00000000..8b0f6592
--- /dev/null
+++ b/web/src/pages/Doc/zh/course20/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <h1>如何自定义节点内容</h1>
+<blockquote>
+<p>该特性v0.6.3+版本支持</p>
+</blockquote>
+<p>如果你想自定义节点的内容，那么可以在实例化<code>simple-mind-map</code>时传入一下选项：</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+    <span class="hljs-attr">isUseCustomNodeContent</span>: <span class="hljs-literal">true</span>,
+    <span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+        <span class="hljs-comment">// return你的自定义DOM节点</span>
+    }
+})
+</code></pre>
+<p><code>customCreateNodeContent</code>方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：</p>
+<pre class="hljs"><code>node.nodeData.data
+</code></pre>
+<p>其他节点实例属性你可以自行打印出来看看。</p>
+<p><code>customCreateNodeContent</code>方法需要返回<code>DOM</code>节点，如果某个节点你不想自定义，那么可以返回<code>null</code>，那么还是会走内置的节点渲染逻辑。</p>
+<p>如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。</p>
+<h2>示例1：渲染自定义DOM节点</h2>
+<pre class="hljs"><code>{
+    <span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+        <span class="hljs-keyword">let</span> div = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
+        div.className = <span class="hljs-string">&#x27;xxx&#x27;</span>
+        div.style.cssText = <span class="hljs-string">`xxx`</span>
+        div.innerHTML = <span class="hljs-string">`
+            &lt;h1&gt;我是自定义节点&lt;/h1&gt;
+            <span class="hljs-subst">${ node.nodeData.text }</span>
+        `</span>
+        <span class="hljs-keyword">return</span> dev
+    }
+}
+</code></pre>
+<h2>示例2：渲染Vue2组件</h2>
+<p>如果想要使用一个相对简单的<code>Vue</code>组件，那么可以通过如下方式：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> CustomNodeContent <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;CustomNodeContent.vue&#x27;</span>
+<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
+
+{
+    <span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+        <span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
+        <span class="hljs-keyword">let</span> Comp = Vue.extend(CustomNodeContent)
+        <span class="hljs-keyword">let</span> comp = <span class="hljs-keyword">new</span> Comp({
+            <span class="hljs-comment">// props</span>
+            <span class="hljs-attr">propsData</span>: {
+                <span class="hljs-attr">html</span>: node.nodeData.data.text
+            }
+        })
+        comp.$mount(el)
+        <span class="hljs-keyword">return</span> comp.$el
+    }
+}
+</code></pre>
+<p>如果你的<code>Vue</code>组件比较复杂，里面用到了<code>vueRouter</code>、<code>vuex</code>、<code>i18n</code>等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> CustomNodeContent <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;CustomNodeContent.vue&#x27;</span>
+<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
+<span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./router&#x27;</span>
+<span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./store&#x27;</span>
+<span class="hljs-keyword">import</span> i18n <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./i18n&#x27;</span>
+
+{
+    <span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+        <span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
+        <span class="hljs-keyword">let</span> Comp = Vue.extend(CustomNodeContent)
+        <span class="hljs-keyword">let</span> comp = <span class="hljs-keyword">new</span> Comp({
+            <span class="hljs-comment">// props</span>
+            <span class="hljs-attr">propsData</span>: {
+                <span class="hljs-attr">html</span>: node.nodeData.data.text
+            },
+            router,
+            store,
+            i18n
+        })
+        comp.$mount(el)
+        <span class="hljs-keyword">return</span> comp.$el
+    }
+}
+</code></pre>
+<h2>示例3：渲染Vue3组件</h2>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/web/src/pages/Edit/components/CustomNodeContent.vue b/web/src/pages/Edit/components/CustomNodeContent.vue
new file mode 100644
index 00000000..7da83ab9
--- /dev/null
+++ b/web/src/pages/Edit/components/CustomNodeContent.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="customNodeContent">
+    <p>{{ title }}</p>
+    <p v-html="html"></p>
+    <p :style="{ backgroundColor: color }" @click="onClick">点击我会变色</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    html: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      title: '我是自定义节点',
+      color: ''
+    }
+  },
+  methods: {
+    onClick() {
+      this.color = 'red'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.customNodeContent {
+  padding: 10px;
+  cursor: pointer;
+}
+</style>
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index 2c5e8f67..52a80066 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -48,8 +48,14 @@ import Navigator from './Navigator.vue'
 import NodeImgPreview from './NodeImgPreview.vue'
 import SidebarTrigger from './SidebarTrigger.vue'
 import { mapState } from 'vuex'
-import customThemeList from '@/customThemes'
 import icon from '@/config/icon'
+import customThemeList from '@/customThemes'
+import CustomNodeContent from './CustomNodeContent.vue'
+import Color from './Color.vue'
+import Vue from 'vue'
+import router from '../../../router'
+import store from '../../../store'
+import i18n from '../../../i18n'
 
 // 注册插件
 MindMap
@@ -293,7 +299,32 @@ export default {
         },
         ...(config || {}),
         iconList: icon,
-        useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag
+        useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag,
+        isUseCustomNodeContent: false,
+        // 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西
+        // customCreateNodeContent: (node) => {
+        //   let el = document.createElement('div')
+        //   let Comp = Vue.extend(Color)
+        //   let comp = new Comp({
+        //     router,
+        //     store,
+        //     i18n
+        //   })
+        //   comp.$mount(el)
+        //   return comp.$el
+        // },
+        // 示例2：组件里没有用到示例1的东西
+        // customCreateNodeContent: (node) => {
+        //   let el = document.createElement('div')
+        //   let Comp = Vue.extend(CustomNodeContent)
+        //   let comp = new Comp({
+        //     propsData: {
+        //       html: node.nodeData.data.text
+        //     }
+        //   })
+        //   comp.$mount(el)
+        //   return comp.$el
+        // }
       })
       if (this.openNodeRichText) this.addRichTextPlugin()
       this.mindMap.keyCommand.addShortcut('Control+s', () => {