Doc: update

2026-02-28 22:07:57 +08:00 · 2023-07-24 11:21:09 +08:00 · 2023-07-24 11:21:09 +08:00 · 8871d8727b
commit 8871d8727b
parent 55945a1a2c
22 changed files with 327 additions and 7 deletions
--- 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(20).fill(0).map((_, index) => {
+let CourseList = new Array(21).fill(0).map((_, index) => {
  return 'course' + (index + 1)
 })
 let APIList = [
@ -36,7 +36,7 @@ let APIList = [
  'markdown',
  'utils'
 ]
-let helpList = new Array(1).fill(0).map((_, index) => {
+let helpList = new Array(2).fill(0).map((_, index) => {
  return 'help' + (index + 1)
 })

--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@ -1,5 +1,13 @@
 # Changelog

+## 0.6.8
+
+Fix: 1.Change the shortcut key for inserting a summary to Ctrl+G to avoid conflicts with the save shortcut key. 2.Fix the issue of abnormal switching between rich text editing configuration input boxes while nodes are being edited.
+
+New: 1.Modify the copy, cut, and paste logic, and support pasting data from the clipboard.
+
+Demo: 1.Fix the issue of not saving the outer margin of the basic style setting node. 2.Supports automatic switching to dark mode based on the theme.
+
 ## 0.6.7

 Fix: 1.Fixed the issue of missing placeholder elements for the expand and collapse button after node collapse and expansion. 2.Fixed the issue of being able to scale images in read-only mode.
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@ -1,6 +1,10 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.6.8</h2>
+<p>Fix: 1.Change the shortcut key for inserting a summary to Ctrl+G to avoid conflicts with the save shortcut key. 2.Fix the issue of abnormal switching between rich text editing configuration input boxes while nodes are being edited.</p>
+<p>New: 1.Modify the copy, cut, and paste logic, and support pasting data from the clipboard.</p>
+<p>Demo: 1.Fix the issue of not saving the outer margin of the basic style setting node. 2.Supports automatic switching to dark mode based on the theme.</p>
 <h2>0.6.7</h2>
 <p>Fix: 1.Fixed the issue of missing placeholder elements for the expand and collapse button after node collapse and expansion. 2.Fixed the issue of being able to scale images in read-only mode.</p>
 <p>New: 1.Support locating to a node based on node instance or node uid. 2.Modify the creation method of node uids and export data to add node uids.</p>
--- a/web/src/pages/Doc/en/render/index.md
+++ b/web/src/pages/Doc/en/render/index.md
@ -109,4 +109,22 @@ Expand to the node of the specified uid.

 - `uid`: uid of node

-Find the corresponding node instance based on the uid.
+Find the corresponding node instance based on the uid.
+
+### copy()
+
+> v0.6.8+
+
+Copy nodes. After calling this method, the current activated node data will be stored. Multiple activated nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.
+
+### cut()
+
+> v0.6.8+
+
+Cut a node. After calling this method, the currently active node will be cut and the node data will be stored. Multiple nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.
+
+### paste()
+
+> v0.6.8+
+
+Pasting nodes can be done by calling the 'copy()' or 'cut()' method after calling it. This method does not support pasting data from the user's clipboard. Please use the built-in 'Ctrl+v' shortcut key.
--- a/web/src/pages/Doc/en/render/index.vue
+++ b/web/src/pages/Doc/en/render/index.vue
@ -83,6 +83,21 @@ is an object, e.g. <code>{text: 'I am new text'}</code></p>
 <li><code>uid</code>: uid of node</li>
 </ul>
 <p>Find the corresponding node instance based on the uid.</p>
+<h3>copy()</h3>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<p>Copy nodes. After calling this method, the current activated node data will be stored. Multiple activated nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.</p>
+<h3>cut()</h3>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<p>Cut a node. After calling this method, the currently active node will be cut and the node data will be stored. Multiple nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.</p>
+<h3>paste()</h3>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<p>Pasting nodes can be done by calling the 'copy()' or 'cut()' method after calling it. This method does not support pasting data from the user's clipboard. Please use the built-in 'Ctrl+v' shortcut key.</p>

  </div>
 </template>
--- a/web/src/pages/Doc/en/utils/index.md
+++ b/web/src/pages/Doc/en/utils/index.md
@ -181,6 +181,21 @@ Get the size of image, return:
 }
 ```

+#### loadImage(imgFile)
+
+> v0.6.8+
+
+- `imgFile`: File object of image type
+
+Load image, return:
+
+```js
+{
+  url,// DataUrl
+  size// { width, height } width and height of image
+}
+```
+
 ## Simulate CSS background in Canvas

 Import:
--- a/web/src/pages/Doc/en/utils/index.vue
+++ b/web/src/pages/Doc/en/utils/index.vue
@ -121,6 +121,19 @@ and copying the <code>data</code> of the data object, example:</p>
  height
 }
 </code></pre>
+<h4>loadImage(imgFile)</h4>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<ul>
+<li><code>imgFile</code>: File object of image type</li>
+</ul>
+<p>Load image, return:</p>
+<pre class="hljs"><code>{
+  url,<span class="hljs-comment">// DataUrl</span>
+  size<span class="hljs-comment">// { width, height } width and height of image</span>
+}
+</code></pre>
 <h2>Simulate CSS background in Canvas</h2>
 <p>Import:</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@ -27,6 +27,7 @@ export default [
      { path: 'course18', title: '如何持久化数据' },
      { path: 'course19', title: '插入和扩展节点图标' },
      { path: 'course20', title: '如何自定义节点内容' },
+      { path: 'course21', title: '如何复制、剪切、粘贴' },
      { path: 'doExport', title: 'Export 插件' },
      { path: 'drag', title: 'Drag插件' },
      { path: 'introduction', title: '简介' },
@ -48,7 +49,8 @@ export default [
      { path: 'client', title: '客户端' },
      { path: 'touchEvent', title: 'TouchEvent插件' },
      { path: 'nodeImgAdjust', title: 'NodeImgAdjust插件' },
-      { path: 'help1', title: '概要/关联线' }
+      { path: 'help1', title: '概要/关联线' },
+      { path: 'help2', title: '客户端' }
    ]
  },
  {
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@ -1,5 +1,13 @@
 # Changelog

+## 0.6.8
+
+修复：1.修改插入概要的快捷键为Ctrl+G，避免和保存快捷键冲突。 2.修复节点正在编辑时切换富文本编辑配置输入框出现异常的问题。
+
+新增：1.修改复制、剪切、粘贴逻辑，支持粘贴剪切板中的数据。
+
+Demo：1.修复基础样式-设置节点外边距未保存的问题。 2.支持根据主题自动切换为暗黑模式。
+
 ## 0.6.7

 修复：1.修复节点收起再展开后展开收起按钮占位元素丢失的问题。 2.修复只读模式下可以缩放图片的问题。
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@ -1,6 +1,10 @@
 <template>
  <div>
    <h1>Changelog</h1>
+<h2>0.6.8</h2>
+<p>修复：1.修改插入概要的快捷键为Ctrl+G，避免和保存快捷键冲突。 2.修复节点正在编辑时切换富文本编辑配置输入框出现异常的问题。</p>
+<p>新增：1.修改复制、剪切、粘贴逻辑，支持粘贴剪切板中的数据。</p>
+<p>Demo：1.修复基础样式-设置节点外边距未保存的问题。 2.支持根据主题自动切换为暗黑模式。</p>
 <h2>0.6.7</h2>
 <p>修复：1.修复节点收起再展开后展开收起按钮占位元素丢失的问题。 2.修复只读模式下可以缩放图片的问题。</p>
 <p>新增：1.支持根据节点实例或节点uid定位到某个节点。 2.修改节点uid的创建方式，导出数据添加节点的uid。</p>
--- a/web/src/pages/Doc/zh/course10/index.md
+++ b/web/src/pages/Doc/zh/course10/index.md
@ -9,6 +9,8 @@ import { themeList } from 'simple-mind-map/src/constants/constant'
 // import { themeList } from 'simple-mind-map/src/utils/constant' v0.6.0以下版本使用该路径
 ```

+> v0.6.8+，主题列表增加了代表是否是暗黑主题的字段dark，你可以根据这个字段来将界面切换为暗黑模式。
+
 可以在实例化`simple-mind-map`时指定使用的主题：

 ```js
--- a/web/src/pages/Doc/zh/course10/index.vue
+++ b/web/src/pages/Doc/zh/course10/index.vue
@ -6,6 +6,9 @@
 <pre class="hljs"><code><span class="hljs-keyword">import</span> { themeList } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/constants/constant&#x27;</span>
 <span class="hljs-comment">// import { themeList } from &#x27;simple-mind-map/src/utils/constant&#x27; v0.6.0以下版本使用该路径</span>
 </code></pre>
+<blockquote>
+<p>v0.6.8+，主题列表增加了代表是否是暗黑主题的字段dark，你可以根据这个字段来将界面切换为暗黑模式。</p>
+</blockquote>
 <p>可以在实例化<code>simple-mind-map</code>时指定使用的主题：</p>
 <pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
    <span class="hljs-attr">theme</span>: <span class="hljs-string">&#x27;minions&#x27;</span>
--- a/web/src/pages/Doc/zh/course20/index.md
+++ b/web/src/pages/Doc/zh/course20/index.md
@ -116,4 +116,20 @@ import CustomNodeContent from './CustomNodeContent.vue'

 ## 示例4：渲染react组件

-如果你成功渲染了`react`组件，欢迎[提交](https://github.com/wanglin2/mind-map/issues/new)示例代码给我~
+```js
+import { createRoot } from 'react-dom/client'
+
+{
+    customCreateNodeContent: (node) => {
+        const el = document.createElement('div')
+        el.style.width = '227px'
+        el.style.height = '60px'
+        const currentNode = node.nodeData.data
+        const root = createRoot(el)
+        root.render({currentNode.text})
+        return el
+    }
+}
+```
+
+> 感谢[h5chenhang](https://github.com/h5chenhang)贡献的[示例代码](https://github.com/wanglin2/mind-map/issues/192)。
--- a/web/src/pages/Doc/zh/course20/index.vue
+++ b/web/src/pages/Doc/zh/course20/index.vue
@ -94,7 +94,23 @@
 }
 </code></pre>
 <h2>示例4：渲染react组件</h2>
-<p>如果你成功渲染了<code>react</code>组件，欢迎<a href="https://github.com/wanglin2/mind-map/issues/new">提交</a>示例代码给我~</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> { createRoot } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;react-dom/client&#x27;</span>
+
+{
+    <span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
+        <span class="hljs-keyword">const</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
+        el.style.width = <span class="hljs-string">&#x27;227px&#x27;</span>
+        el.style.height = <span class="hljs-string">&#x27;60px&#x27;</span>
+        <span class="hljs-keyword">const</span> currentNode = node.nodeData.data
+        <span class="hljs-keyword">const</span> root = createRoot(el)
+        root.render({currentNode.text})
+        <span class="hljs-keyword">return</span> el
+    }
+}
+</code></pre>
+<blockquote>
+<p>感谢<a href="https://github.com/h5chenhang">h5chenhang</a>贡献的<a href="https://github.com/wanglin2/mind-map/issues/192">示例代码</a>。</p>
+</blockquote>

  </div>
 </template>
--- a/web/src/pages/Doc/zh/course21/index.md
+++ b/web/src/pages/Doc/zh/course21/index.md
@ -0,0 +1,40 @@
+# 如何复制、剪切、粘贴
+
+## 使用快捷键
+
+核心库内部默认支持`Ctrl+c`、`Ctrl+x`、`Ctrl+v`三个快捷键来执行复制、剪切、粘贴操作。
+
+当激活了某个节点，按`Ctrl+c`会复制当前激活节点的数据，按`Ctrl+x`会删除当前激活节点，同时保存该节点的数据，这两个操作当同时存在多个激活节点，只会对第一个生效。
+
+当按了`Ctrl+c`或`Ctrl+x`后，按`Ctrl+v`会在当前激活的节点粘贴复制或剪切的数据，也就是被复制或剪切的节点会作为该节点的子节点。
+
+除了支持粘贴在画布中复制或剪切的节点数据外，如果你再其他地方复制了文本或图片，也支持进行粘贴，也就是会粘贴你当前剪贴板中的数据，如果你的剪切板中存在文本数据，那么会粘贴作为当前激活节点的子节点，如果存在图片数据，那么会直接给当前激活节点添加或替换图片。
+
+如果复制或剪切了画布数据，同时剪切板中也存在数据，那么默认会以最新的`Ctrl+c`或`Ctrl+x`操作为准，比如你先复制了节点，然后又复制了其他地方的文本，那么会粘贴最后一次的操作，也就是其他地方复制的文本数据。
+
+## 使用按钮触发
+
+一般会在右键菜单上下文中显然复制、剪切、粘贴三个按钮，当点击了这三个按钮也需要能执行复制、剪切、粘贴操作，这需要调用内部的一些方法来完成：
+
+```js
+// 点击了复制按钮
+const onCopyBtnClick = () => {
+    mindMap.renderer.copy()
+}
+
+// 点击了剪切按钮
+const onCutBtnClick = () => {
+    mindMap.renderer.cut()
+}
+
+// 点击了粘贴按钮
+const onPasteBtnClick = () => {
+    mindMap.renderer.paste()
+}
+```
+
+需要注意的是，这三个方法只能复制、剪切、粘贴画布中的节点数据，不支持操作用户的剪切板数据。
+
+### 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVc1OGzEQfpWRqypJFXaD1FMaEIX20AMV4lpz2Ow6ianXXq29BIRy4VCgopeeeuyhUqUeeqhQJejrEKBv0fH+k0RVbkSKtJ75vm/Gnhn7mLyMIucgYaRLetqPeWRAM5NE61TyMFKxgWOI2aANSm6rRBoWtEGPPCHUeJcNYAKDWIXQQIVGydjmMtj2osxFiUazYCshWldCL6KESgAqBTNgbRa5BjIRgkoqXRfuTq6mp39urj9Mv32anv2+vTj/+/knlb6S2mAaWyo62jRyS3D/PRKbLVhbh2OrCYWeEzMZsJjFjo/gZovKyZz2+Y/p2emcdmKWl07MQuW7X1/uLy9nlXc8bdjS2pFFl+rl0TdrrNrRsXFx5M1ckIkuBMpPQiaNM2TmtWD2c/PoTdBs5MwtJY3HJYsbrXbGCjzjdYucsETEGiipmTKzYYfGmim5/Xp1//EEt54V1f4muZgF+iMuAtyUBb+rNGbkFkaZjXRzfXF3/X022MOAC4LuVb467pEyKD5zW8HjkptdpcxbFbAdpbnhSiKzIdjANNrQ8LF0WKa9FD5pvcC2wNboudm84qTiwjAcMs8wXAH0An4AvvC0XqMkL/crFipKUncO4EHlLZsBIT0XvXVgoWSUEn3PQoqN9PqJMUrChm/bGiEPxxOR2Qz33Az4X2I1e5aXzucyvAeThcxs/maY1Z6Kr55bOzJcanMkstPbyK8xShw3u7vy6XKYDh1fa0qwBPYKA3Bqp1u0z5gHZtSF1U7naYoDiMqixgwj8gOWOtJ+sP8ns1UopCqi19dKJCYjAtjW6EInXxkVVYv58CPGhyOEP+90osMi8uK4z8oryYuHHOMWqpEXBFwOC0OZupM3xZIZrxYZ5EmXaxTEhk5rQNokq4B9LZx9rSQ+Tqk8zR1YgXJYKcG3J5tQx8VPJ8arkofMFmulH6uxxvt0Hxn5sC14jzLufKktK89tQib/AMXMadM=" />
--- a/web/src/pages/Doc/zh/course21/index.vue
+++ b/web/src/pages/Doc/zh/course21/index.vue
@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h1>如何复制、剪切、粘贴</h1>
+<h2>使用快捷键</h2>
+<p>核心库内部默认支持<code>Ctrl+c</code>、<code>Ctrl+x</code>、<code>Ctrl+v</code>三个快捷键来执行复制、剪切、粘贴操作。</p>
+<p>当激活了某个节点，按<code>Ctrl+c</code>会复制当前激活节点的数据，按<code>Ctrl+x</code>会删除当前激活节点，同时保存该节点的数据，这两个操作当同时存在多个激活节点，只会对第一个生效。</p>
+<p>当按了<code>Ctrl+c</code>或<code>Ctrl+x</code>后，按<code>Ctrl+v</code>会在当前激活的节点粘贴复制或剪切的数据，也就是被复制或剪切的节点会作为该节点的子节点。</p>
+<p>除了支持粘贴在画布中复制或剪切的节点数据外，如果你再其他地方复制了文本或图片，也支持进行粘贴，也就是会粘贴你当前剪贴板中的数据，如果你的剪切板中存在文本数据，那么会粘贴作为当前激活节点的子节点，如果存在图片数据，那么会直接给当前激活节点添加或替换图片。</p>
+<p>如果复制或剪切了画布数据，同时剪切板中也存在数据，那么默认会以最新的<code>Ctrl+c</code>或<code>Ctrl+x</code>操作为准，比如你先复制了节点，然后又复制了其他地方的文本，那么会粘贴最后一次的操作，也就是其他地方复制的文本数据。</p>
+<h2>使用按钮触发</h2>
+<p>一般会在右键菜单上下文中显然复制、剪切、粘贴三个按钮，当点击了这三个按钮也需要能执行复制、剪切、粘贴操作，这需要调用内部的一些方法来完成：</p>
+<pre class="hljs"><code><span class="hljs-comment">// 点击了复制按钮</span>
+<span class="hljs-keyword">const</span> onCopyBtnClick = <span class="hljs-function">() =&gt;</span> {
+    mindMap.renderer.copy()
+}
+
+<span class="hljs-comment">// 点击了剪切按钮</span>
+<span class="hljs-keyword">const</span> onCutBtnClick = <span class="hljs-function">() =&gt;</span> {
+    mindMap.renderer.cut()
+}
+
+<span class="hljs-comment">// 点击了粘贴按钮</span>
+<span class="hljs-keyword">const</span> onPasteBtnClick = <span class="hljs-function">() =&gt;</span> {
+    mindMap.renderer.paste()
+}
+</code></pre>
+<p>需要注意的是，这三个方法只能复制、剪切、粘贴画布中的节点数据，不支持操作用户的剪切板数据。</p>
+<h3>完整示例</h3>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrFVc1OGzEQfpWRqypJFXaD1FMaEIX20AMV4lpz2Ow6ianXXq29BIRy4VCgopeeeuyhUqUeeqhQJejrEKBv0fH+k0RVbkSKtJ75vm/Gnhn7mLyMIucgYaRLetqPeWRAM5NE61TyMFKxgWOI2aANSm6rRBoWtEGPPCHUeJcNYAKDWIXQQIVGydjmMtj2osxFiUazYCshWldCL6KESgAqBTNgbRa5BjIRgkoqXRfuTq6mp39urj9Mv32anv2+vTj/+/knlb6S2mAaWyo62jRyS3D/PRKbLVhbh2OrCYWeEzMZsJjFjo/gZovKyZz2+Y/p2emcdmKWl07MQuW7X1/uLy9nlXc8bdjS2pFFl+rl0TdrrNrRsXFx5M1ckIkuBMpPQiaNM2TmtWD2c/PoTdBs5MwtJY3HJYsbrXbGCjzjdYucsETEGiipmTKzYYfGmim5/Xp1//EEt54V1f4muZgF+iMuAtyUBb+rNGbkFkaZjXRzfXF3/X022MOAC4LuVb467pEyKD5zW8HjkptdpcxbFbAdpbnhSiKzIdjANNrQ8LF0WKa9FD5pvcC2wNboudm84qTiwjAcMs8wXAH0An4AvvC0XqMkL/crFipKUncO4EHlLZsBIT0XvXVgoWSUEn3PQoqN9PqJMUrChm/bGiEPxxOR2Qz33Az4X2I1e5aXzucyvAeThcxs/maY1Z6Kr55bOzJcanMkstPbyK8xShw3u7vy6XKYDh1fa0qwBPYKA3Bqp1u0z5gHZtSF1U7naYoDiMqixgwj8gOWOtJ+sP8ns1UopCqi19dKJCYjAtjW6EInXxkVVYv58CPGhyOEP+90osMi8uK4z8oryYuHHOMWqpEXBFwOC0OZupM3xZIZrxYZ5EmXaxTEhk5rQNokq4B9LZx9rSQ+Tqk8zR1YgXJYKcG3J5tQx8VPJ8arkofMFmulH6uxxvt0Hxn5sC14jzLufKktK89tQib/AMXMadM=" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/help2/index.md
+++ b/web/src/pages/Doc/zh/help2/index.md
@ -0,0 +1,26 @@
+# 客户端
+
+## 安装
+
+目前提供了两个客户端下载方式：
+
+1.百度云：[https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)
+
+2.Github：[https://github.com/wanglin2/mind-map/releases](https://github.com/wanglin2/mind-map/releases)
+
+Windows用户请下载`Setup.[版本].exe`或`[版本].exe`文件。
+
+Mac用户请下载`.dmg`文件。
+
+Linux用户请下载`.AppImage`文件。
+
+如果Mac安装出现`已损坏`问题，可以参考这篇文章：[苹果M1芯片安装xxx.app 显示已损坏，无法打开，你应该将它移到废纸篓/打不开 xxx，因为它来自身份不明的开发者 如何解决？](https://www.jianshu.com/p/031efc52ccea)。
+
+## 使用
+
+客户端名称为`思绪`，对应的思维导图文件后缀名为`.smm`。
+
+客户端相比在线版，多了一个显示最近文件列表的页面，你打开过的文件都会显示在最近列表里。
+
+除了点击打开文件按钮打开文件外，你也可以直接将文件拖入到列表页面，如果拖入一个文件，那么会直接打开进行编辑，如果同时拖入了多个文件，那么会直接添加到列表里，不会打开编辑。
+
--- a/web/src/pages/Doc/zh/help2/index.vue
+++ b/web/src/pages/Doc/zh/help2/index.vue
@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h1>客户端</h1>
+<h2>安装</h2>
+<p>目前提供了两个客户端下载方式：</p>
+<p>1.百度云：<a href="https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3">https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3</a></p>
+<p>2.Github：<a href="https://github.com/wanglin2/mind-map/releases">https://github.com/wanglin2/mind-map/releases</a></p>
+<p>Windows用户请下载<code>Setup.[版本].exe</code>或<code>[版本].exe</code>文件。</p>
+<p>Mac用户请下载<code>.dmg</code>文件。</p>
+<p>Linux用户请下载<code>.AppImage</code>文件。</p>
+<p>如果Mac安装出现<code>已损坏</code>问题，可以参考这篇文章：<a href="https://www.jianshu.com/p/031efc52ccea">苹果M1芯片安装xxx.app 显示已损坏，无法打开，你应该将它移到废纸篓/打不开 xxx，因为它来自身份不明的开发者 如何解决？</a>。</p>
+<h2>使用</h2>
+<p>客户端名称为<code>思绪</code>，对应的思维导图文件后缀名为<code>.smm</code>。</p>
+<p>客户端相比在线版，多了一个显示最近文件列表的页面，你打开过的文件都会显示在最近列表里。</p>
+<p>除了点击打开文件按钮打开文件外，你也可以直接将文件拖入到列表页面，如果拖入一个文件，那么会直接打开进行编辑，如果同时拖入了多个文件，那么会直接添加到列表里，不会打开编辑。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/zh/render/index.md
+++ b/web/src/pages/Doc/zh/render/index.md
@ -100,4 +100,22 @@

 - `uid`：节点uid

-根据uid找到对应的节点实例。
+根据uid找到对应的节点实例。
+
+### copy()
+
+> v0.6.8+
+
+复制节点，调用该方法后会存储当前激活的节点数据，多个激活节点只会操作第一个节点，后续调用`paste()`方法时可以进行粘贴。
+
+### cut()
+
+> v0.6.8+
+
+剪切节点，调用该方法后会剪切当前激活的节点，并且存储该节点数据，多个节点只会操作第一个节点，后续调用`paste()`方法时可以进行粘贴。
+
+### paste()
+
+> v0.6.8+
+
+粘贴节点，在调用了`copy()`或`cut()`方法后可以调用该方法进行粘贴节点。该方法不支持粘贴用户剪贴板中的数据，请使用内置的`Ctrl+v`快捷键。
--- a/web/src/pages/Doc/zh/render/index.vue
+++ b/web/src/pages/Doc/zh/render/index.vue
@ -72,6 +72,21 @@
 <li><code>uid</code>：节点uid</li>
 </ul>
 <p>根据uid找到对应的节点实例。</p>
+<h3>copy()</h3>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<p>复制节点，调用该方法后会存储当前激活的节点数据，多个激活节点只会操作第一个节点，后续调用<code>paste()</code>方法时可以进行粘贴。</p>
+<h3>cut()</h3>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<p>剪切节点，调用该方法后会剪切当前激活的节点，并且存储该节点数据，多个节点只会操作第一个节点，后续调用<code>paste()</code>方法时可以进行粘贴。</p>
+<h3>paste()</h3>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<p>粘贴节点，在调用了<code>copy()</code>或<code>cut()</code>方法后可以调用该方法进行粘贴节点。该方法不支持粘贴用户剪贴板中的数据，请使用内置的<code>Ctrl+v</code>快捷键。</p>

  </div>
 </template>
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@ -176,6 +176,21 @@ copyNodeTree({}, node)
 }
 ```

+#### loadImage(imgFile)
+
+> v0.6.8+
+
+- `imgFile`：图片类型的File对象
+
+加载图片，返回：
+
+```js
+{
+  url,// DataUrl
+  size// { width, height } 图片宽高
+}
+```
+
 ## 在canvas中模拟css的背景属性

 引入：
--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@ -116,6 +116,19 @@
  height
 }
 </code></pre>
+<h4>loadImage(imgFile)</h4>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<ul>
+<li><code>imgFile</code>：图片类型的File对象</li>
+</ul>
+<p>加载图片，返回：</p>
+<pre class="hljs"><code>{
+  url,<span class="hljs-comment">// DataUrl</span>
+  size<span class="hljs-comment">// { width, height } 图片宽高</span>
+}
+</code></pre>
 <h2>在canvas中模拟css的背景属性</h2>
 <p>引入：</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>