diff --git a/README.md b/README.md
index dd269b3a..04935180 100644
--- a/README.md
+++ b/README.md
@@ -169,4 +169,8 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/布林.jpg" style="width: 50px;height: 50px;" />
         <span>布林</span>
     </span>
+    <span>
+        <img src="./web/src/assets/avatar/南风.jpg" style="width: 50px;height: 50px;" />
+        <span>南风</span>
+    </span>
 </p>
\ No newline at end of file
diff --git a/web/src/assets/avatar/南风.jpg b/web/src/assets/avatar/南风.jpg
new file mode 100644
index 00000000..562987e9
Binary files /dev/null and b/web/src/assets/avatar/南风.jpg differ
diff --git a/web/src/pages/Doc/catalogList.js b/web/src/pages/Doc/catalogList.js
index b14774f4..f98610d9 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(22).fill(0).map((_, index) => {
+let CourseList = new Array(24).fill(0).map((_, index) => {
   return 'course' + (index + 1)
 })
 let APIList = [
@@ -34,6 +34,7 @@ let APIList = [
   'nodeImgAdjust',
   'search',
   'painter',
+  'scrollbar',
   'xmind',
   'markdown',
   'utils'
diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md
index 2122c69f..19a4a42d 100644
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,55 @@
 # Changelog
 
+## 0.7.0
+
+Breaking change: Removed the section of node activation style in the theme file, Setting the activation style of nodes is no longer supported, and the activation effect has been changed to a unified node outer border style, while also supporting the mouse hover effect.
+
+Fix:
+
+> 1.Fix rendering anomalies when the node border size is relatively large.
+>
+> 2.Fixed an issue where the node style of the associated line will not be updated when switching themes.
+>
+> 3.Fix that selecting all did not trigger node_ The issue with active events.
+
+新增：
+
+> 1.When folding nodes, displays the number of collapsed nodes.
+>
+> 2.Support the position of the endpoint of the associated line to follow mouse drag changes.
+>
+> 3.Add a scrollbar plugin.
+>
+> 4.Support opening specified online files through fileURL query parameters in URLs.
+>
+> 5.The fishbone diagram supports setting node margins.
+>
+> 6.By default, double-click to reset the canvas.
+>
+> 7.Modify the parameters of the export image method, and when exporting PDF, if the size of the mind map is smaller than A4 paper, do not rotate the direction.
+>
+> 8.Improve the clarity of exported images and PDFs on high-definition screens.
+> 
+> 9.Add a pre destruction lifecycle function to the plugin to address the issue of some side effects that were not cleared during the destruction of the mind map.
+>
+> 10.Optimize the settings of the basic style and do not trigger full rendering when modifying theme attributes that do not affect size.
+>
+> 11.Prohibit triggering node right-click menu events when multiple node selections are completed, to avoid triggering the right-click menu display.
+>
+> 12.Optimize the Select plugin so that if multiple selected nodes do not change, the activation event is not triggered.
+>
+> 13.The activation node list thrown by event node_active no longer directly references the internal activation list.
+>
+> 14.Optimize the logic of mouse button down node events, and support dragging the canvas by holding down the root node with the right mouse button in the right-click drag and drop canvas mode.
+
+Demo：
+
+> 1.Do not directly reference the internal activation node list to optimize performance.
+> 
+> 2.Support configuring whether to display scrollbars.
+>
+> 3.Delete the active node configuration in the sidebar node style configuration section.
+
 ## 0.6.17
 
 Fix:
diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue
index e0c5e977..cdcf02fe 100644
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,37 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.7.0</h2>
+<p>Breaking change: Removed the section of node activation style in the theme file, Setting the activation style of nodes is no longer supported, and the activation effect has been changed to a unified node outer border style, while also supporting the mouse hover effect.</p>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix rendering anomalies when the node border size is relatively large.</p>
+<p>2.Fixed an issue where the node style of the associated line will not be updated when switching themes.</p>
+<p>3.Fix that selecting all did not trigger node_ The issue with active events.</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.When folding nodes, displays the number of collapsed nodes.</p>
+<p>2.Support the position of the endpoint of the associated line to follow mouse drag changes.</p>
+<p>3.Add a scrollbar plugin.</p>
+<p>4.Support opening specified online files through fileURL query parameters in URLs.</p>
+<p>5.The fishbone diagram supports setting node margins.</p>
+<p>6.By default, double-click to reset the canvas.</p>
+<p>7.Modify the parameters of the export image method, and when exporting PDF, if the size of the mind map is smaller than A4 paper, do not rotate the direction.</p>
+<p>8.Improve the clarity of exported images and PDFs on high-definition screens.</p>
+<p>9.Add a pre destruction lifecycle function to the plugin to address the issue of some side effects that were not cleared during the destruction of the mind map.</p>
+<p>10.Optimize the settings of the basic style and do not trigger full rendering when modifying theme attributes that do not affect size.</p>
+<p>11.Prohibit triggering node right-click menu events when multiple node selections are completed, to avoid triggering the right-click menu display.</p>
+<p>12.Optimize the Select plugin so that if multiple selected nodes do not change, the activation event is not triggered.</p>
+<p>13.The activation node list thrown by event node_active no longer directly references the internal activation list.</p>
+<p>14.Optimize the logic of mouse button down node events, and support dragging the canvas by holding down the root node with the right mouse button in the right-click drag and drop canvas mode.</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.Do not directly reference the internal activation node list to optimize performance.</p>
+<p>2.Support configuring whether to display scrollbars.</p>
+<p>3.Delete the active node configuration in the sidebar node style configuration section.</p>
+</blockquote>
 <h2>0.6.17</h2>
 <p>Fix:</p>
 <blockquote>
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md
index 837f3268..4bf81074 100644
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -48,8 +48,10 @@ const mindMap = new MindMap({
 | mousewheelZoomActionReverse（v0.6.5+）     | Boolean  | false | When `mousewheelAction` is set to `zoom`, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed   |          |
 | defaultInsertSecondLevelNodeText（v0.4.7+）     | String  | 二级节点 | Text of the default inserted secondary node               |          |
 | defaultInsertBelowSecondLevelNodeText（v0.4.7+）     | String  | 分支主题 | Text for nodes below the second level inserted by default               |          |
-| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff' } | Expand the color of the stow button  |          |
+| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' } | Expand the color of the stow button, (The fontSize and strokeColor fields were added in version 0.7.0+to set the text style for displaying the number of nodes when folded) |          |
 | expandBtnIcon（v0.5.0+）     | Object  | { open: '', close: '' } | Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon  |          |
+| expandBtnNumHandler（v0.7.0+）     | Function  |  | Used to customize the content of displaying the number of nodes when folding, receiving a parameter that represents the instance of the folding node, and returning a number or string that represents the final displayed content. For example, when the number is greater than 99, 99 can be displayed+  |          |
+| isShowExpandNum（v0.7.0+）     | Boolean  | true | Display the number of folded nodes when they are folded up  |          |
 | enableShortcutOnlyWhenMouseInSvg（v0.5.1+）     | Boolean  | true | Only respond to shortcut key events when the mouse is inside the canvas  |          |
 | enableNodeTransitionMove（v0.5.1+）（v0.6.7+ is remove this feature）     | Boolean  | true | Whether to enable node animation transition  |          |
 | nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature）     | Number  | 300 | If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds  |          |
@@ -80,7 +82,11 @@ const mindMap = new MindMap({
 | errorHandler（v0.6.15+）     | Function  |  | Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function that takes two parameters, the first being the wrong type and the second being the wrong object |          |
 | disableMouseWheelZoom（v0.6.15+）     | Boolean  | false | Prohibit mouse wheel scaling, you can still use the API for scaling |          |
 | resetCss（v0.6.16+）     | String  |  * { margin: 0; padding: 0; box-sizing: border-box; } | When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset |          |
-| enableDblclickReset（v0.6.17+）     | Boolean  | true  | Turn on the mouse and double-click to reset the position and zoom of the mind map |          |
+| enableDblclickReset（v0.6.17+）     | Boolean  | true(v0.7.0+changed to false)  | Turn on the mouse and double-click to reset the position and zoom of the mind map |          |
+| minExportImgCanvasScale（v0.7.0+）     | Number  | 2  | The scaling factor of canvas when exporting images and PDFs, which is set to the maximum value of window.devicePixelRatio to improve image clarity |          |
+| hoverRectColor（v0.7.0+）     | String  | rgb(94, 200, 248)  | The node mouse hover and the rectangular border color displayed when activated will add a transparency of 0.6 when hovering |          |
+| hoverRectPadding（v0.7.0+）     | Number  | 2  | The distance between the node mouse hover and the displayed rectangular border when activated and the node content |          |
+| selectTextOnEnterEditText（v0.7.0+）     | Boolean  | true  | Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node |          |
 
 ### Watermark config
 
@@ -337,8 +343,8 @@ redo. All commands are as follows:
 | DOWN_NODE                          | Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid |                                                              |
 | REMOVE_NODE                        | Remove node, the active node or appoint node will be the operation node      |  appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）                                                            |
 | PASTE_NODE                         | Paste node to a node, the active node will be the operation node | data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods) |
-| SET_NODE_STYLE                     | Modify node single style                                            | node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state) |
-| SET_NODE_STYLEs（v0.6.12+）       |  Modify multiple styles of nodes   | node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（boolean, whether the style being set is for the active state） |
+| SET_NODE_STYLE                     | Modify node single style                                            | node (the node to set the style of), prop (style property), value (style property value), isActive (v0.7.0+has been abandoned, boolean, whether the style being set is for the active state) |
+| SET_NODE_STYLEs（v0.6.12+）       |  Modify multiple styles of nodes   | node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（v0.7.0+has been abandoned, boolean, whether the style being set is for the active state） |
 | SET_NODE_ACTIVE                    | Set whether the node is active                               | node (the node to set), active (boolean, whether to activate) |
 | CLEAR_ACTIVE_NODE                  | Clear the active state of the currently active node(s), the active node will be the operation node |                                                              |
 | SET_NODE_EXPAND                    | Set whether the node is expanded                             | node (the node to set), expand (boolean, whether to expand)  |
diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue
index 3df147c2..85fadc3a 100644
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -1,1069 +1,6 @@
 <template>
   <div>
-    <h1>Constructor</h1>
-<h2>Basic use</h2>
-<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mindMapContainer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-</code></pre>
-<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;simple-mind-map&quot;</span>;
-
-<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
-  <span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;mindMapContainer&quot;</span>),
-  <span class="hljs-attr">data</span>: {
-    <span class="hljs-string">&quot;data&quot;</span>: {
-        <span class="hljs-string">&quot;text&quot;</span>: <span class="hljs-string">&quot;Root Node&quot;</span>
-    },
-    <span class="hljs-string">&quot;children&quot;</span>: []
-  }
-});
-</code></pre>
-<h2>Instantiation options</h2>
-<table>
-<thead>
-<tr>
-<th>Field Name</th>
-<th>Type</th>
-<th>Default Value</th>
-<th>Description</th>
-<th>Required</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>el</td>
-<td>Element</td>
-<td></td>
-<td>Container element, must be a DOM element</td>
-<td>Yes</td>
-</tr>
-<tr>
-<td>data</td>
-<td>Object</td>
-<td>{}</td>
-<td>Mind map data, refer to: <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a></td>
-<td></td>
-</tr>
-<tr>
-<td>layout</td>
-<td>String</td>
-<td>logicalStructure</td>
-<td>Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram）</td>
-<td></td>
-</tr>
-<tr>
-<td>fishboneDeg（v0.5.4+）</td>
-<td>Number</td>
-<td>45</td>
-<td>Set the diagonal angle of the fishbone structure diagram</td>
-<td></td>
-</tr>
-<tr>
-<td>theme</td>
-<td>String</td>
-<td>default</td>
-<td>Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+)、、avocado(v.5.10-fix.2+)、autumn(v.5.10-fix.2+)、orangeJuice(v.5.10-fix.2+)</td>
-<td></td>
-</tr>
-<tr>
-<td>themeConfig</td>
-<td>Object</td>
-<td>{}</td>
-<td>Theme configuration, will be merged with the selected theme, available fields refer to: <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a></td>
-<td></td>
-</tr>
-<tr>
-<td>scaleRatio</td>
-<td>Number</td>
-<td>0.1</td>
-<td>The incremental scaling ratio</td>
-<td></td>
-</tr>
-<tr>
-<td>maxTag</td>
-<td>Number</td>
-<td>5</td>
-<td>The maximum number of tags displayed in the node, any additional tags will be discarded</td>
-<td></td>
-</tr>
-<tr>
-<td>exportPadding</td>
-<td>Number</td>
-<td>20</td>
-<td>The padding for exporting images</td>
-<td></td>
-</tr>
-<tr>
-<td>imgTextMargin</td>
-<td>Number</td>
-<td>5</td>
-<td>The spacing between the image and text in the node</td>
-<td></td>
-</tr>
-<tr>
-<td>textContentMargin</td>
-<td>Number</td>
-<td>2</td>
-<td>The spacing between various text information in the node, such as the spacing between the icon and text</td>
-<td></td>
-</tr>
-<tr>
-<td>selectTranslateStep</td>
-<td>Number</td>
-<td>3</td>
-<td>The canvas offset when mouse moves to the edge during multi-select node</td>
-<td></td>
-</tr>
-<tr>
-<td>selectTranslateLimit</td>
-<td>Number</td>
-<td>20</td>
-<td>The distance from the edge when the canvas begins to offset during multi-select node</td>
-<td></td>
-</tr>
-<tr>
-<td>customNoteContentShow（v0.1.6+）</td>
-<td>Object</td>
-<td>null</td>
-<td>Custom node note content display, object type, structure: {show: (noteContent, left, top) =&gt; {// your display node note logic }, hide: () =&gt; {// your hide node note logic }}</td>
-<td></td>
-</tr>
-<tr>
-<td>readonly（v0.1.7+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Whether it is read-only mode</td>
-<td></td>
-</tr>
-<tr>
-<td>enableFreeDrag（v0.2.4+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Enable node free drag</td>
-<td></td>
-</tr>
-<tr>
-<td>watermarkConfig（v0.2.4+）</td>
-<td>Object</td>
-<td></td>
-<td>Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration</td>
-<td></td>
-</tr>
-<tr>
-<td>textAutoWrapWidth（v0.3.4+）</td>
-<td>Number</td>
-<td>500</td>
-<td>Each line of text in the node will wrap automatically when it reaches the width</td>
-<td></td>
-</tr>
-<tr>
-<td>customHandleMousewheel（v0.4.3+）</td>
-<td>Function</td>
-<td>null</td>
-<td>User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object</td>
-<td></td>
-</tr>
-<tr>
-<td>mousewheelAction（v0.4.3+）</td>
-<td>String</td>
-<td>zoom</td>
-<td>The behavior of the mouse wheel, <code>zoom</code>(Zoom in and out)、<code>move</code>(Move up and down). If <code>customHandleMousewheel</code> passes a custom function, this property will not take effect</td>
-<td></td>
-</tr>
-<tr>
-<td>mousewheelMoveStep（v0.4.3+）</td>
-<td>Number</td>
-<td>100</td>
-<td>When the <code>mousewheelAction</code> is set to <code>move</code>, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is <code>px</code></td>
-<td></td>
-</tr>
-<tr>
-<td>mousewheelZoomActionReverse（v0.6.5+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>When <code>mousewheelAction</code> is set to <code>zoom</code>, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed</td>
-<td></td>
-</tr>
-<tr>
-<td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
-<td>String</td>
-<td>二级节点</td>
-<td>Text of the default inserted secondary node</td>
-<td></td>
-</tr>
-<tr>
-<td>defaultInsertBelowSecondLevelNodeText（v0.4.7+）</td>
-<td>String</td>
-<td>分支主题</td>
-<td>Text for nodes below the second level inserted by default</td>
-<td></td>
-</tr>
-<tr>
-<td>expandBtnStyle（v0.5.0+）</td>
-<td>Object</td>
-<td>{ color: '#808080', fill: '#fff' }</td>
-<td>Expand the color of the stow button</td>
-<td></td>
-</tr>
-<tr>
-<td>expandBtnIcon（v0.5.0+）</td>
-<td>Object</td>
-<td>{ open: '', close: '' }</td>
-<td>Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon</td>
-<td></td>
-</tr>
-<tr>
-<td>enableShortcutOnlyWhenMouseInSvg（v0.5.1+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Only respond to shortcut key events when the mouse is inside the canvas</td>
-<td></td>
-</tr>
-<tr>
-<td>enableNodeTransitionMove（v0.5.1+）（v0.6.7+ is remove this feature）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Whether to enable node animation transition</td>
-<td></td>
-</tr>
-<tr>
-<td>nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature）</td>
-<td>Number</td>
-<td>300</td>
-<td>If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds</td>
-<td></td>
-</tr>
-<tr>
-<td>initRootNodePosition（v0.5.3+）</td>
-<td>Array</td>
-<td>null</td>
-<td>The position of the initial root node can be passed as an array, default is <code>['center', 'center']</code>, Represents the root node at the center of the canvas, In addition to <code>center</code>, keywords can also be set to <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as <code>['40%', '60%']</code>, Represents a horizontal position at <code>40%</code> of the canvas width, and a vertical position at <code>60%</code> of the canvas height</td>
-<td></td>
-</tr>
-<tr>
-<td>exportPaddingX（v0.5.5+）</td>
-<td>Number</td>
-<td>10</td>
-<td>Horizontal padding of graphics when exporting PNG, SVG, and PDF</td>
-<td></td>
-</tr>
-<tr>
-<td>exportPaddingY（v0.5.5+）</td>
-<td>Number</td>
-<td>10</td>
-<td>Vertical padding of graphics when exporting PNG, SVG, and PDF</td>
-<td></td>
-</tr>
-<tr>
-<td>nodeTextEditZIndex（v0.5.5+）</td>
-<td>Number</td>
-<td>3000</td>
-<td></td>
-<td>z-index of node text edit box elements</td>
-</tr>
-<tr>
-<td>nodeNoteTooltipZIndex（v0.5.5+）</td>
-<td>Number</td>
-<td>3000</td>
-<td>z-index of floating layer elements in node comments</td>
-<td></td>
-</tr>
-<tr>
-<td>isEndNodeTextEditOnClickOuter（v0.5.5+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Whether to end the editing status of node text when clicking on an area outside the canvas</td>
-<td></td>
-</tr>
-<tr>
-<td>maxHistoryCount（v0.5.6+）</td>
-<td>Number</td>
-<td>1000</td>
-<td></td>
-<td>Maximum number of history records</td>
-</tr>
-<tr>
-<td>alwaysShowExpandBtn（v0.5.8+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Whether to always display the expand and collapse buttons of nodes, which are only displayed when the mouse is moved up and activated by default</td>
-<td></td>
-</tr>
-<tr>
-<td>iconList（v0.5.8+）</td>
-<td>Array</td>
-<td>[]</td>
-<td>The icons that can be inserted into the extension node, and each item in the array is an object. Please refer to the &quot;Icon Configuration&quot; table below for the detailed structure of the object</td>
-<td></td>
-</tr>
-<tr>
-<td>maxNodeCacheCount（v0.5.10+）</td>
-<td>Number</td>
-<td>1000</td>
-<td>The maximum number of cached nodes. To optimize performance, an internal node cache pool is maintained to reuse nodes. This attribute allows you to specify the maximum number of caches in the pool</td>
-<td></td>
-</tr>
-<tr>
-<td>defaultAssociativeLineText（v0.5.11+）</td>
-<td>String</td>
-<td>关联</td>
-<td>Association Line Default Text</td>
-<td></td>
-</tr>
-<tr>
-<td>fitPadding（v0.6.0+）</td>
-<td>Number</td>
-<td>50</td>
-<td>The padding of mind mapping when adapting to canvas size, Unit: px</td>
-<td></td>
-</tr>
-<tr>
-<td>enableCtrlKeyNodeSelection（v0.6.0+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Whether to enable the function of holding down the Ctrl key to select multiple nodes</td>
-<td></td>
-</tr>
-<tr>
-<td>useLeftKeySelectionRightKeyDrag（v0.6.0+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Setting to left click to select multiple nodes and right click to drag the canvas.</td>
-<td></td>
-</tr>
-<tr>
-<td>beforeTextEdit（v0.6.0+）</td>
-<td>Function/null</td>
-<td>null</td>
-<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>
-<tr>
-<td>mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas</td>
-<td></td>
-</tr>
-<tr>
-<td>customInnerElsAppendTo（v0.6.12+）</td>
-<td>null/HTMLElement</td>
-<td>null</td>
-<td>Specify the location where some internal elements (node text editing element, node note display element, associated line text editing element, node image adjustment button element) are added, and default to document.body</td>
-<td></td>
-</tr>
-<tr>
-<td>nodeDragPlaceholderMaxSize（v0.6.12+）</td>
-<td>Number</td>
-<td>20</td>
-<td>When dragging an element, the maximum height of the block indicating the new position of the element</td>
-<td></td>
-</tr>
-<tr>
-<td>enableCreateHiddenInput（v0.6.13+）（v0.6.14+ remove this feature）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Is it allowed to create a hidden input box that will be focused when the node is activated for pasting data and automatically entering the text editing state</td>
-<td></td>
-</tr>
-<tr>
-<td>enableAutoEnterTextEditWhenKeydown（v0.6.13+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Does it automatically enter text editing mode when pressing the Chinese, English, or numeric buttons when there is an activation node?</td>
-<td></td>
-</tr>
-<tr>
-<td>richTextEditFakeInPlace（v0.6.13+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It should be noted that only when there is only text within the node and the shape is rectangular, can the effect be better</td>
-<td></td>
-</tr>
-<tr>
-<td>customHandleClipboardText（v0.6.14+）</td>
-<td>Function</td>
-<td>null</td>
-<td>Customize the processing of clipboard text. When pressing ctrl+v to paste, it will read the text and images from the user's clipboard. By default, it will only determine whether the text is regular text and node data in simple mind map format. If you want to process data from other mind maps, such as process, zhixi, etc., you can pass a function that takes the text from the current clipboard as a parameter and returns the processed data, which can be of two types: 1.If a pure text is returned, a child node will be directly created with that text; 2.Returns a node object in the following format: { simpleMindMap: true, data: { data: { text: '' }, children: [] } }, The representative is data in simple bind map format, and the node data is in the same format as the simple bind map node data. If your processing logic has asynchronous logic, you can also return a promise</td>
-<td></td>
-</tr>
-<tr>
-<td>errorHandler（v0.6.15+）</td>
-<td>Function</td>
-<td></td>
-<td>Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function that takes two parameters, the first being the wrong type and the second being the wrong object</td>
-<td></td>
-</tr>
-<tr>
-<td>disableMouseWheelZoom（v0.6.15+）</td>
-<td>Boolean</td>
-<td>false</td>
-<td>Prohibit mouse wheel scaling, you can still use the API for scaling</td>
-<td></td>
-</tr>
-<tr>
-<td>resetCss（v0.6.16+）</td>
-<td>String</td>
-<td>* { margin: 0; padding: 0; box-sizing: border-box; }</td>
-<td>When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset</td>
-<td></td>
-</tr>
-<tr>
-<td>enableDblclickReset（v0.6.17+）</td>
-<td>Boolean</td>
-<td>true</td>
-<td>Turn on the mouse and double-click to reset the position and zoom of the mind map</td>
-<td></td>
-</tr>
-</tbody>
-</table>
-<h3>Watermark config</h3>
-<table>
-<thead>
-<tr>
-<th>Field Name</th>
-<th>Type</th>
-<th>Default Value</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>text</td>
-<td>String</td>
-<td>''</td>
-<td>Watermark text. If it is an empty string, the watermark will not be displayed</td>
-</tr>
-<tr>
-<td>lineSpacing</td>
-<td>Number</td>
-<td>100</td>
-<td>Spacing between watermark lines</td>
-</tr>
-<tr>
-<td>textSpacing</td>
-<td>Number</td>
-<td>100</td>
-<td>Spacing between watermarks in the same row</td>
-</tr>
-<tr>
-<td>angle</td>
-<td>Number</td>
-<td>30</td>
-<td>Tilt angle of watermark, range: [0, 90]</td>
-</tr>
-<tr>
-<td>textStyle</td>
-<td>Object</td>
-<td>{color: '#999', opacity: 0.5, fontSize: 14}</td>
-<td>Watermark text style</td>
-</tr>
-</tbody>
-</table>
-<h3>Icon Configuration</h3>
-<table>
-<thead>
-<tr>
-<th>Field Name</th>
-<th>Type</th>
-<th>Default Value</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>name</td>
-<td>String</td>
-<td></td>
-<td>The name of the icon group</td>
-</tr>
-<tr>
-<td>type</td>
-<td>String</td>
-<td></td>
-<td>Values for icon grouping</td>
-</tr>
-<tr>
-<td>list</td>
-<td>Array</td>
-<td></td>
-<td>A list of icons under grouping, with each item in the array being an object, <code>{ name: '', icon: '' }</code>，<code>name</code>represents the name of the icon, <code>icon</code>represents the icon, Can be an <code>svg</code> icon, such as <code>&lt;svg ...&gt;&lt;path&gt;&lt;/path&gt;&lt;/svg&gt;</code>, also can be a image <code>url</code>, or <code>base64</code> icon, such as <code>data:image/png;base64,...</code></td>
-</tr>
-</tbody>
-</table>
-<h2>Static methods</h2>
-<h3>defineTheme(name, config)</h3>
-<blockquote>
-<p>v0.2.23+</p>
-</blockquote>
-<p>Define new theme.</p>
-<p><code>name</code>：New theme name</p>
-<p><code>config</code>：New theme config</p>
-<p><code>Simple-mind-map </code> Built-in many themes. In addition, you can register new theme. It is recommended to register before instantiation, so that you can directly use the newly registered theme during instantiation. Use example:</p>
-<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
-<span class="hljs-comment">// 注册新主题</span>
-MindMap.defineTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>, {})
-
-<span class="hljs-comment">// 1.实例化时使用新注册的主题</span>
-<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
-    <span class="hljs-attr">theme</span>: <span class="hljs-string">&#x27;Theme name&#x27;</span>
-})
-
-<span class="hljs-comment">// 2.动态切换新主题</span>
-mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
-</code></pre>
-<p>For all configurations of theme, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">Default Topic</a>. The <code>defineTheme</code>method will merge the configuration you passed in with the default configuration. Most of the themes  do not need custom many parts. For a typical customized theme configuration, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>.</p>
-<h3>usePlugin(plugin, opt = {})</h3>
-<blockquote>
-<p>v0.3.0+</p>
-</blockquote>
-<ul>
-<li><code>opt</code>：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.</li>
-</ul>
-<p>If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.</p>
-<p>Note: The plugin needs to be registered before instantiating <code>MindMap</code>.</p>
-<h3>hasPlugin(plugin)</h3>
-<blockquote>
-<p>v0.4.0+</p>
-</blockquote>
-<p>Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is <code>-1</code>, it means that the plugin is not registered.</p>
-<h2>Static props</h2>
-<h3>pluginList</h3>
-<blockquote>
-<p>v0.3.0+</p>
-</blockquote>
-<p>List of all currently registered plugins.</p>
-<h2>Instance methods</h2>
-<h3>destroy()</h3>
-<blockquote>
-<p>v0.6.0+</p>
-</blockquote>
-<p>Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.</p>
-<h3>getSvgData({ paddingX = 0, paddingY = 0 })</h3>
-<blockquote>
-<p>v0.3.0+</p>
-</blockquote>
-<p><code>paddingX</code>: Padding x</p>
-<p><code>paddingY</code>: Padding y</p>
-<p>Get the <code>svg</code> data and return an object. The detailed structure is as follows:</p>
-<pre class="hljs"><code>{
-  svg, <span class="hljs-comment">// Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)</span>
-  svgHTML, <span class="hljs-comment">// String, svg string, i.e. html string, can be directly rendered to the small map container you prepared</span>
-  <span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object, position, size, etc. of mind map graphics before zoom</span>
-  origWidth, <span class="hljs-comment">// Number, canvas width</span>
-  origHeight, <span class="hljs-comment">// Number, canvas height</span>
-  scaleX, <span class="hljs-comment">// Number, horizontal zoom value of mind map graphics</span>
-  scaleY, <span class="hljs-comment">// Number, vertical zoom value of mind map graphics</span>
-}
-</code></pre>
-<h3>render(callback)</h3>
-<ul>
-<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
-</ul>
-<p>Triggers a full rendering, which will reuse nodes for better performance. If
-only the node positions have changed, this method can be called to <code>reRender</code>.</p>
-<h3>reRender(callback)</h3>
-<ul>
-<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
-</ul>
-<p>Performs a full re-render, clearing the canvas and creating new nodes. This has
-poor performance and should be used sparingly.</p>
-<h3>resize()</h3>
-<p>After the container size has changed, this method should be called to adjust.</p>
-<h3>setMode(mode)</h3>
-<blockquote>
-<p>v0.1.7+</p>
-</blockquote>
-<p>Switches between readonly and edit mode.</p>
-<p><code>mode</code>：readonly、edit</p>
-<h3>on(event, fn)</h3>
-<p>Listen to an event. Event list:</p>
-<table>
-<thead>
-<tr>
-<th>Event Name</th>
-<th>Description</th>
-<th>Callback Parameters</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>data_change</td>
-<td>Tree rendering data change, listen to this method to get the latest data</td>
-<td>data (current tree rendering data)</td>
-</tr>
-<tr>
-<td>view_data_change（v0.1.1+）</td>
-<td>View change data, such as when dragging or zooming</td>
-<td>data (current view state data)</td>
-</tr>
-<tr>
-<td>back_forward</td>
-<td>Forward or backward</td>
-<td>activeHistoryIndex (current index in the history data array), length (current length of the history data array)</td>
-</tr>
-<tr>
-<td>draw_click</td>
-<td>Canvas click event</td>
-<td>e (event object)</td>
-</tr>
-<tr>
-<td>svg_mousedown</td>
-<td>svg canvas mouse down event</td>
-<td>e (event object)</td>
-</tr>
-<tr>
-<td>mousedown</td>
-<td>el element mouse down event</td>
-<td>e (event object), this (Event event class instance)</td>
-</tr>
-<tr>
-<td>mousemove</td>
-<td>el element mouse move event</td>
-<td>e (event object), this (Event event class instance)</td>
-</tr>
-<tr>
-<td>drag</td>
-<td>If it is a drag event while holding down the left button</td>
-<td>e (event object), this (Event event class instance)</td>
-</tr>
-<tr>
-<td>mouseup</td>
-<td>el element mouse up event</td>
-<td>e (event object), this (Event event class instance)</td>
-</tr>
-<tr>
-<td>mousewheel</td>
-<td>Mouse scroll event</td>
-<td>e (event object), dir (up or down scroll), this (Event event class instance) 、isTouchPad（v0.6.1+, Is it an event triggered by the touchpad）</td>
-</tr>
-<tr>
-<td>contextmenu</td>
-<td>svg canvas right mouse button menu event</td>
-<td>e (event object)</td>
-</tr>
-<tr>
-<td>node_click</td>
-<td>Node click event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_mousedown</td>
-<td>Node mouse down event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_mouseup</td>
-<td>node mouseup event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_mouseup</td>
-<td>Node mouseup event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_dblclick</td>
-<td>Node double-click event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_contextmenu</td>
-<td>Node right-click menu event</td>
-<td>e (event object), this (node instance)</td>
-</tr>
-<tr>
-<td>node_mouseenter（v0.4.1+）</td>
-<td>Node mouseenter event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>node_mouseleave（v0.4.1+）</td>
-<td>Node mouseleave event</td>
-<td>this (node instance), e (event object)</td>
-</tr>
-<tr>
-<td>before_node_active</td>
-<td>Event before node activation</td>
-<td>this (node instance), activeNodeList (current list of active nodes)</td>
-</tr>
-<tr>
-<td>node_active</td>
-<td>Node activation event</td>
-<td>this (node instance), activeNodeList (current list of active nodes)</td>
-</tr>
-<tr>
-<td>expand_btn_click</td>
-<td>Node expand or collapse event</td>
-<td>this (node instance)</td>
-</tr>
-<tr>
-<td>before_show_text_edit</td>
-<td>Event before node text edit box opens</td>
-<td></td>
-</tr>
-<tr>
-<td>hide_text_edit</td>
-<td>Node text edit box close event</td>
-<td>textEditNode (text edit box DOM node), activeNodeList (current list of active nodes)</td>
-</tr>
-<tr>
-<td>scale</td>
-<td>Zoom event</td>
-<td>scale (zoom ratio)</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>
-</tr>
-<tr>
-<td>node_img_mouseenter（v0.6.5+）</td>
-<td>Node image mouseenter event</td>
-<td>this（node instance）、imgNode（img node）、e（event object）</td>
-</tr>
-<tr>
-<td>node_img_mouseleave（v0.6.5+）</td>
-<td>Node image mouseleave event</td>
-<td>this（node instance）、imgNode（img node）、e（event object）</td>
-</tr>
-<tr>
-<td>node_img_mousemove（v0.6.5+）</td>
-<td>Node image mousemove event</td>
-<td>this（node instance）、imgNode（img node）、e（event object）</td>
-</tr>
-<tr>
-<td>node_tree_render_end（v0.2.16+）</td>
-<td>Node tree render end event</td>
-<td></td>
-</tr>
-<tr>
-<td>rich_text_selection_change（v0.4.0+）</td>
-<td>Available when the <code>RichText</code> plugin is registered. Triggered when the text selection area changes when the node is edited</td>
-<td>hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area）</td>
-</tr>
-<tr>
-<td>transforming-dom-to-images（v0.4.0+）</td>
-<td>Available when the <code>RichText</code> plugin is registered. When there is a <code>DOM</code> node in <code>svg</code>, the <code>DOM</code> node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting</td>
-<td>index（Index of the node currently converted to）、len（Total number of nodes to be converted）</td>
-</tr>
-<tr>
-<td>node_dragging（v0.4.5+）</td>
-<td>Triggered when a node is dragged</td>
-<td>node(The currently dragged node)</td>
-</tr>
-<tr>
-<td>node_dragend（v0.4.5+）</td>
-<td>Triggered when the node is dragged and ends</td>
-<td>{ overlapNodeUid, prevNodeUid, nextNodeUid }（v0.6.12+，The node uid to which the node is moved this time, for example, if it is moved to node A, then the overlayNodeUid is the uid of node A. If it is moved to the front of node B, then the nextNodeUid is the uid of node B. You can obtain the node instance through the mindMap. extender.findNodeByUid(uid) method）</td>
-</tr>
-<tr>
-<td>associative_line_click（v0.4.5+）</td>
-<td>Triggered when an associated line is clicked</td>
-<td>path(Connector node)、clickPath(Invisible click line node)、node(Start node)、toNode(Target node)</td>
-</tr>
-<tr>
-<td>svg_mouseenter（v0.5.1+）</td>
-<td>Triggered when the mouse moves into the SVG canvas</td>
-<td>e（event object）</td>
-</tr>
-<tr>
-<td>svg_mouseleave（v0.5.1+）</td>
-<td>Triggered when the mouse moves out of the SVG canvas</td>
-<td>e（event object）</td>
-</tr>
-<tr>
-<td>node_icon_click（v0.6.10+）</td>
-<td>Triggered when clicking on an icon within a node</td>
-<td>this（node instance）、item（Click on the icon name）、e（event object）</td>
-</tr>
-<tr>
-<td>view_theme_change（v0.6.12+）</td>
-<td>Triggered after calling the setTheme method to set the theme</td>
-<td>theme（theme name）</td>
-</tr>
-</tbody>
-</table>
-<h3>emit(event, ...args)</h3>
-<p>Trigger an event, which can be one of the events listed above or a custom event.</p>
-<h3>off(event, fn)</h3>
-<p>Unbind an event.</p>
-<h3>setTheme(theme)</h3>
-<p>Switches the theme. Available themes can be found in the options table above.</p>
-<h3>getTheme()</h3>
-<p>Gets the current theme.</p>
-<h3>setThemeConfig(config)</h3>
-<p>Sets the theme configuration. <code>config</code> is the same as the <code>themeConfig</code> option
-in the options table above.</p>
-<h3>getCustomThemeConfig()</h3>
-<p>Gets the custom theme configuration.</p>
-<h3>getThemeConfig(prop)</h3>
-<p>Gets the value of a specific theme configuration property.</p>
-<h3>getConfig(<em>prop</em>)</h3>
-<blockquote>
-<p>0.2.24+</p>
-</blockquote>
-<p><code>prop</code>：Get the value of the specified configuration, and return the entire configuration if not passed</p>
-<p>Get config, That is,  <code>opt</code> of <code>new MindMap (opt)</code></p>
-<h3>updateConfig(<em>opt</em> = {})</h3>
-<blockquote>
-<p>0.2.24+</p>
-</blockquote>
-<p><code>opt</code>：Configuration to update</p>
-<p>Update config，That is update <code>opt</code> of <code>new MindMap(opt)</code>，You can only update some data, such as:</p>
-<pre class="hljs"><code>mindMap.updateConfig({
-    <span class="hljs-attr">enableFreeDrag</span>: <span class="hljs-literal">true</span><span class="hljs-comment">// 开启节点自由拖拽</span>
-})
-</code></pre>
-<p>This method only updates the configuration and has no other side effects, such as triggering canvas re-rendering</p>
-<h3>getLayout()</h3>
-<p>Gets the current layout structure.</p>
-<h3>setLayout(layout)</h3>
-<p>Sets the layout structure. Available values can be found in the <code>layout</code> field
-in the options table above.</p>
-<h3>execCommand(name, ...args)</h3>
-<p>Executes a command, which will add a record to the history stack for undo or
-redo. All commands are as follows:</p>
-<table>
-<thead>
-<tr>
-<th>Command name</th>
-<th>Description</th>
-<th>Parameters</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>SELECT_ALL</td>
-<td>Select all</td>
-<td></td>
-</tr>
-<tr>
-<td>BACK</td>
-<td>Go back a specified number of steps</td>
-<td>step (the number of steps to go back, default is 1)</td>
-</tr>
-<tr>
-<td>FORWARD</td>
-<td>Go forward a specified number of steps</td>
-<td>step (the number of steps to go forward, default is 1)</td>
-</tr>
-<tr>
-<td>INSERT_NODE</td>
-<td>Insert a sibling node, the active node or appoint node will be the operation node. If there are multiple active nodes, only the first one will be effective</td>
-<td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is <code>true</code>） 、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a> ）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type）</td>
-</tr>
-<tr>
-<td>INSERT_CHILD_NODE</td>
-<td>Insert a child node, the active node or appoint node will be the operation node</td>
-<td>openEdit（v0.4.6+, Whether to activate the newly inserted node and enter editing mode, default is <code>true</code>）、 appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）、 appointData（Optional, Specify the data for the newly created node, Such as {text: 'xxx', ...}, Detailed structure can be referred to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">exampleData.js</a> ）、 appointChildren（v0.6.14+, Optional, Specify the child nodes of the newly created node, array type）</td>
-</tr>
-<tr>
-<td>UP_NODE</td>
-<td>Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid</td>
-<td></td>
-</tr>
-<tr>
-<td>DOWN_NODE</td>
-<td>Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid</td>
-<td></td>
-</tr>
-<tr>
-<td>REMOVE_NODE</td>
-<td>Remove node, the active node or appoint node will be the operation node</td>
-<td>appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array）</td>
-</tr>
-<tr>
-<td>PASTE_NODE</td>
-<td>Paste node to a node, the active node will be the operation node</td>
-<td>data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods)</td>
-</tr>
-<tr>
-<td>SET_NODE_STYLE</td>
-<td>Modify node single style</td>
-<td>node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state)</td>
-</tr>
-<tr>
-<td>SET_NODE_STYLEs（v0.6.12+）</td>
-<td>Modify multiple styles of nodes</td>
-<td>node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（boolean, whether the style being set is for the active state）</td>
-</tr>
-<tr>
-<td>SET_NODE_ACTIVE</td>
-<td>Set whether the node is active</td>
-<td>node (the node to set), active (boolean, whether to activate)</td>
-</tr>
-<tr>
-<td>CLEAR_ACTIVE_NODE</td>
-<td>Clear the active state of the currently active node(s), the active node will be the operation node</td>
-<td></td>
-</tr>
-<tr>
-<td>SET_NODE_EXPAND</td>
-<td>Set whether the node is expanded</td>
-<td>node (the node to set), expand (boolean, whether to expand)</td>
-</tr>
-<tr>
-<td>EXPAND_ALL</td>
-<td>Expand all nodes</td>
-<td></td>
-</tr>
-<tr>
-<td>UNEXPAND_ALL</td>
-<td>Collapse all nodes</td>
-<td></td>
-</tr>
-<tr>
-<td>UNEXPAND_TO_LEVEL (v0.2.8+)</td>
-<td>Expand to a specified level</td>
-<td>level (the level to expand to, 1, 2, 3...)</td>
-</tr>
-<tr>
-<td>SET_NODE_DATA</td>
-<td>Update node data, that is, update the data in the data object of the node data object</td>
-<td>node (the node to set), data (object, the data to update, e.g. <code>{expand: true}</code>)</td>
-</tr>
-<tr>
-<td>SET_NODE_TEXT</td>
-<td>Set node text</td>
-<td>node (the node to set), text (the new text for the node), richText（v0.4.0+, If you want to set a rich text character, you need to set it to <code>true</code>）、resetRichText（v0.6.10+Do you want to reset rich text? The default is false. If true is passed, the style of the rich text node will be reset）</td>
-</tr>
-<tr>
-<td>SET_NODE_IMAGE</td>
-<td>Set Node Image</td>
-<td>node (node to set), imgData (object, image information, structured as: <code>{url, title, width, height}</code>, the width and height of the image must be passed)</td>
-</tr>
-<tr>
-<td>SET_NODE_ICON</td>
-<td>Set Node Icon</td>
-<td>node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a> file, icon name is type_name, such as ['priority_1'])</td>
-</tr>
-<tr>
-<td>SET_NODE_HYPERLINK</td>
-<td>Set Node Hyperlink</td>
-<td>node (node to set), link (hyperlink address), title (hyperlink name, optional)</td>
-</tr>
-<tr>
-<td>SET_NODE_NOTE</td>
-<td>Set Node Note</td>
-<td>node (node to set), note (note text)</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>
-</tr>
-<tr>
-<td>INSERT_AFTER (v0.1.5+)</td>
-<td>Move Node to After Another Node</td>
-<td>node (node to move), exist (target node)</td>
-</tr>
-<tr>
-<td>INSERT_BEFORE (v0.1.5+)</td>
-<td>Move Node to Before Another Node</td>
-<td>node (node to move), exist (target node)</td>
-</tr>
-<tr>
-<td>MOVE_NODE_TO (v0.1.5+)</td>
-<td>Move a node as a child of another node</td>
-<td>node (the node to move), toNode (the target node)</td>
-</tr>
-<tr>
-<td>ADD_GENERALIZATION (v0.2.0+)</td>
-<td>Add a node summary</td>
-<td>data (the data for the summary, in object format, all numerical fields of the node are supported, default is <code>{text: 'summary'}</code>)</td>
-</tr>
-<tr>
-<td>REMOVE_GENERALIZATION (v0.2.0+)</td>
-<td>Remove a node summary</td>
-<td></td>
-</tr>
-<tr>
-<td>SET_NODE_CUSTOM_POSITION (v0.2.0+)</td>
-<td>Set a custom position for a node</td>
-<td>node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined)</td>
-</tr>
-<tr>
-<td>RESET_LAYOUT (v0.2.0+)</td>
-<td>Arrange layout with one click</td>
-<td></td>
-</tr>
-<tr>
-<td>SET_NODE_SHAPE (v0.2.4+)</td>
-<td>Set the shape of a node</td>
-<td>node (the node to set), shape (the shape, all shapes: <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js">Shape.js</a>)</td>
-</tr>
-<tr>
-<td>GO_TARGET_NODE（v0.6.7+）</td>
-<td>Navigate to a node, and if the node is collapsed, it will automatically expand to that node</td>
-<td>node（Node instance or node uid to locate）、callback（v0.6.9+, Callback function after positioning completion）</td>
-</tr>
-</tbody>
-</table>
-<h3>setData(data)</h3>
-<p>Dynamic setting of mind map data, pure node data</p>
-<p><code>data</code>: mind map structure data</p>
-<h3>setFullData(<em>data</em>)</h3>
-<blockquote>
-<p>v0.2.7+</p>
-</blockquote>
-<p>Dynamic setting of mind map data, including node data, layout, theme, view</p>
-<p><code>data</code>: complete data, structure can refer to
-<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a></p>
-<h3>getData(withConfig)</h3>
-<blockquote>
-<p>v0.2.9+</p>
-</blockquote>
-<p>Gets mind map data</p>
-<p><code>withConfig</code>: <code>Boolean</code>, default is <code>false</code>, that is, the obtained data only
-includes the node tree, if <code>true</code> is passed, it will also include theme, layout,
-view, etc. data</p>
-<h3>export(type, isDownload, fileName)</h3>
-<blockquote>
-<p>You need to register the <code>Export</code> plugin first</p>
-</blockquote>
-<p>Export</p>
-<p><code>type</code>: the type to be exported, optional values: png, svg, json, pdf (v0.2.1+),
-smm (essentially also json)</p>
-<p><code>isDownload</code>: whether to directly trigger download, Boolean value, default is
-<code>false</code></p>
-<p><code>fileName</code>: (v0.1.6+) the name of the exported file, default is <code>思维导图</code> (mind
-map).</p>
-<p>If it is exported as <code>png</code>, the fourth parameter can be passed:</p>
-<p><code>transparent</code>: v0.5.7+, <code>Boolean</code>, default is <code>false</code>, Specify whether the background of the exported image is transparent</p>
-<p>If it is exported as <code>svg</code>, the fourth parameter can be passed:</p>
-<p><code>plusCssText</code>: Additional <code>CSS</code> style. If there is a <code>dom</code> node in <code>svg</code>, you can pass in some styles specific to the node through this parameter</p>
-<p>If it is exported as <code>json</code> or <code>smm</code>, the fourth parameter can be passed:</p>
-<p><code>withConfig</code>: <code>Boolean</code>, default is <code>true</code>, Specify whether the exported data includes configuration data, otherwise only pure node tree data will be exported</p>
-<h3>toPos(x, y)</h3>
-<blockquote>
-<p>v0.1.5+</p>
-</blockquote>
-<p>Convert the coordinates of the browser's visible window to coordinates relative
-to the canvas.</p>
-<h3>addPlugin(plugin, opt)</h3>
-<blockquote>
-<p>v0.4.0+</p>
-</blockquote>
-<p>Register plugin, Use <code>MindMap.usePlugin</code> to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the <code>addPlugin</code> method of the instance.</p>
-<h3>removePlugin(plugin)</h3>
-<blockquote>
-<p>v0.4.0+</p>
-</blockquote>
-<p>Remove registered plugin, Plugins registered through the <code>usePlugin</code> or <code>addPlugin</code> methods can be removed.</p>
-
+    
   </div>
 </template>
 
diff --git a/web/src/pages/Doc/en/doExport/index.md b/web/src/pages/Doc/en/doExport/index.md
index 4a2f2c21..a3e37e12 100644
--- a/web/src/pages/Doc/en/doExport/index.md
+++ b/web/src/pages/Doc/en/doExport/index.md
@@ -38,13 +38,17 @@ a.download = 'xxx'
 a.click()
 ```
 
-### png(name, transparent = false, rotateWhenWidthLongerThenHeight)
+### png(name, transparent = false, checkRotate)
+
+> Versions below v0.7.0 are: png(name, transparent = false, rotateWhenWidthLongerThenHeight)
 
 - `name`: Name, optional
 
 - `transparent`: v0.5.7+, Specify whether the background of the exported image is transparent
 
-- `rotateWhenWidthLongerThenHeight`: v0.6.15+，Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio
+- `rotateWhenWidthLongerThenHeight`: v0.6.15+, V0.7.0+abandoned, Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio
+
+- `checkRotate`: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees.
 
 Exports as `png`.
 
diff --git a/web/src/pages/Doc/en/doExport/index.vue b/web/src/pages/Doc/en/doExport/index.vue
index ee0db902..b087ccf8 100644
--- a/web/src/pages/Doc/en/doExport/index.vue
+++ b/web/src/pages/Doc/en/doExport/index.vue
@@ -27,7 +27,10 @@ a.href = <span class="hljs-string">&#x27;xxx.png&#x27;</span><span class="hljs-c
 a.download = <span class="hljs-string">&#x27;xxx&#x27;</span>
 a.click()
 </code></pre>
-<h3>png(name, transparent = false, rotateWhenWidthLongerThenHeight)</h3>
+<h3>png(name, transparent = false, checkRotate)</h3>
+<blockquote>
+<p>Versions below v0.7.0 are: png(name, transparent = false, rotateWhenWidthLongerThenHeight)</p>
+</blockquote>
 <ul>
 <li>
 <p><code>name</code>: Name, optional</p>
@@ -36,7 +39,10 @@ a.click()
 <p><code>transparent</code>: v0.5.7+, Specify whether the background of the exported image is transparent</p>
 </li>
 <li>
-<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+，Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio</p>
+<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+, V0.7.0+abandoned, Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio</p>
+</li>
+<li>
+<p><code>checkRotate</code>: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees.</p>
 </li>
 </ul>
 <p>Exports as <code>png</code>.</p>
diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md
index 47970b2b..1f856d9e 100644
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -188,4 +188,8 @@ Open source is not easy. If this project is helpful to you, you can invite the a
         <img src="../../../../assets/avatar/布林.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
         <p>布林</p>
     </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/南风.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>南风</p>
+    </div>
 </div>
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/introduction/index.vue b/web/src/pages/Doc/en/introduction/index.vue
index 5e6e21e2..dc31cb3f 100644
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -147,6 +147,10 @@ full screen, support mini map</li>
         <img src="../../../../assets/avatar/布林.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
         <p>布林</p>
     </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/南风.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>南风</p>
+    </div>
 </div>
   </div>
 </template>
diff --git a/web/src/pages/Doc/en/node/index.md b/web/src/pages/Doc/en/node/index.md
index 74d54d3a..60bd459e 100644
--- a/web/src/pages/Doc/en/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@@ -110,17 +110,21 @@ Get the final style value applied to this node
 
 `root`: whether it is the root node, default `false`
 
-`isActive`: whether the value being fetched is the active state style value,
+`isActive`: v0.7.0+has been abandoned, whether the value being fetched is the active state style value,
 default `false`
 
 ### setStyle(prop, value, isActive)
 
+- `isActive`: v0.7.0+has been abandoned
+
 Modify a style of the node, a shortcut method for the `SET_NODE_STYLE` command
 
 ### setStyles(style, isActive)
 
 > v0.6.12+
 
+- `isActive`: v0.7.0+has been abandoned
+
 Modify multiple styles of nodes, a shortcut method for the `SET_NODE_STYLES` command
 
 ### getData(key)
diff --git a/web/src/pages/Doc/en/node/index.vue b/web/src/pages/Doc/en/node/index.vue
index eb479570..fc5f1ed9 100644
--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@@ -64,14 +64,20 @@
 <p>Get the final style value applied to this node</p>
 <p><code>prop</code>: the style property to get</p>
 <p><code>root</code>: whether it is the root node, default <code>false</code></p>
-<p><code>isActive</code>: whether the value being fetched is the active state style value,
+<p><code>isActive</code>: v0.7.0+has been abandoned, whether the value being fetched is the active state style value,
 default <code>false</code></p>
 <h3>setStyle(prop, value, isActive)</h3>
+<ul>
+<li><code>isActive</code>: v0.7.0+has been abandoned</li>
+</ul>
 <p>Modify a style of the node, a shortcut method for the <code>SET_NODE_STYLE</code> command</p>
 <h3>setStyles(style, isActive)</h3>
 <blockquote>
 <p>v0.6.12+</p>
 </blockquote>
+<ul>
+<li><code>isActive</code>: v0.7.0+has been abandoned</li>
+</ul>
 <p>Modify multiple styles of nodes, a shortcut method for the <code>SET_NODE_STYLES</code> command</p>
 <h3>getData(key)</h3>
 <p>Get the specified value in the <code>data</code> object of the node's real data <code>nodeData</code>,
diff --git a/web/src/pages/Doc/en/scrollbar/index.md b/web/src/pages/Doc/en/scrollbar/index.md
new file mode 100644
index 00000000..10974f51
--- /dev/null
+++ b/web/src/pages/Doc/en/scrollbar/index.md
@@ -0,0 +1,64 @@
+# Scrollbar plugin
+
+> v0.7.0+
+
+This plugin is used to help develop the functionality of horizontal and vertical scrollbar.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import Scrollbar from 'simple-mind-map/src/plugins/Scrollbar.js'
+MindMap.usePlugin(Scrollbar)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.scrollbar`.
+
+## Event
+
+#### scrollbar_change
+
+Triggered when the scrollbar data changes, you can listen to this event to update the position and size of the scrollbar.
+
+## Method
+
+### setScrollBarWrapSize(width, height)
+
+- `width`: Number, The width of your scrollbar container element.
+
+- `height`: Number, The height of your scrollbar container element.
+
+Set the size of the scroll bar container, which is the width of the container for horizontal scrollbars and the height of the container for vertical scrollbars. When your scrollbar container size changes, you need to call this method again.
+
+### calculationScrollbar()
+
+> You need to first call the setScrollBarWrapSize method to set the width and height of the scroll bar container element.
+>
+> Generally, it is necessary to monitor scrollbar_change event, and then call it to update the scroll bar.
+
+Return value: 
+
+```js
+{
+    // Vertical scrollbar
+    vertical: {
+        top,
+        height
+    },
+    // Horizontal scrollbar
+    horizontal: {
+        left,
+        width
+    }
+}
+```
+
+Obtain the size and position of the scroll bar, and you can set it to the scroll bar element based on the return value to achieve the effect of rendering and caring about the scroll bar.
+
+### onMousedown(e, type)
+
+- `e`: The event object for the mouse down event.
+
+- `type`: The type of scroll bar pressed, vertical(Vertical scrollbar)、horizontal(Horizontal scrollbar)。
+
+This method needs to be called when the mouse press event of the scrollbar element occurs.
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/scrollbar/index.vue b/web/src/pages/Doc/en/scrollbar/index.vue
new file mode 100644
index 00000000..d5851f33
--- /dev/null
+++ b/web/src/pages/Doc/en/scrollbar/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <h1>Scrollbar plugin</h1>
+<blockquote>
+<p>v0.7.0+</p>
+</blockquote>
+<p>This plugin is used to help develop the functionality of horizontal and vertical scrollbar.</p>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Scrollbar <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Scrollbar.js&#x27;</span>
+MindMap.usePlugin(Scrollbar)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.scrollbar</code>.</p>
+<h2>Event</h2>
+<h4>scrollbar_change</h4>
+<p>Triggered when the scrollbar data changes, you can listen to this event to update the position and size of the scrollbar.</p>
+<h2>Method</h2>
+<h3>setScrollBarWrapSize(width, height)</h3>
+<ul>
+<li>
+<p><code>width</code>: Number, The width of your scrollbar container element.</p>
+</li>
+<li>
+<p><code>height</code>: Number, The height of your scrollbar container element.</p>
+</li>
+</ul>
+<p>Set the size of the scroll bar container, which is the width of the container for horizontal scrollbars and the height of the container for vertical scrollbars. When your scrollbar container size changes, you need to call this method again.</p>
+<h3>calculationScrollbar()</h3>
+<blockquote>
+<p>You need to first call the setScrollBarWrapSize method to set the width and height of the scroll bar container element.</p>
+<p>Generally, it is necessary to monitor scrollbar_change event, and then call it to update the scroll bar.</p>
+</blockquote>
+<p>Return value:</p>
+<pre class="hljs"><code>{
+    <span class="hljs-comment">// Vertical scrollbar</span>
+    <span class="hljs-attr">vertical</span>: {
+        top,
+        height
+    },
+    <span class="hljs-comment">// Horizontal scrollbar</span>
+    <span class="hljs-attr">horizontal</span>: {
+        left,
+        width
+    }
+}
+</code></pre>
+<p>Obtain the size and position of the scroll bar, and you can set it to the scroll bar element based on the return value to achieve the effect of rendering and caring about the scroll bar.</p>
+<h3>onMousedown(e, type)</h3>
+<ul>
+<li>
+<p><code>e</code>: The event object for the mouse down event.</p>
+</li>
+<li>
+<p><code>type</code>: The type of scroll bar pressed, vertical(Vertical scrollbar)、horizontal(Horizontal scrollbar)。</p>
+</li>
+</ul>
+<p>This method needs to be called when the mouse press event of the scrollbar element occurs.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/search/index.md b/web/src/pages/Doc/en/search/index.md
index 215917f6..8ba3235b 100644
--- a/web/src/pages/Doc/en/search/index.md
+++ b/web/src/pages/Doc/en/search/index.md
@@ -12,7 +12,7 @@ import Search from 'simple-mind-map/src/plugins/Search.js'
 MindMap.usePlugin(Search)
 ```
 
-After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.Search`.
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.search`.
 
 ## Event
 
diff --git a/web/src/pages/Doc/en/search/index.vue b/web/src/pages/Doc/en/search/index.vue
index c47b9d40..26f7d4e9 100644
--- a/web/src/pages/Doc/en/search/index.vue
+++ b/web/src/pages/Doc/en/search/index.vue
@@ -10,7 +10,7 @@
 <span class="hljs-keyword">import</span> Search <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Search.js&#x27;</span>
 MindMap.usePlugin(Search)
 </code></pre>
-<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.Search</code>.</p>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.search</code>.</p>
 <h2>Event</h2>
 <h3>search_info_change</h3>
 <p>You can listen to 'search_info_change' event to get the number of current search results and the index currently located.</p>
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js
index 578b9aa2..88f8964b 100644
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -29,6 +29,8 @@ export default [
       { path: 'course20', title: '如何自定义节点内容' },
       { path: 'course21', title: '如何复制、剪切、粘贴' },
       { path: 'course22', title: '如何实现搜索、替换' },
+      { path: 'course23', title: '如何渲染滚动条' },
+      { path: 'course24', title: '如何开发一个插件' },
       { path: 'doExport', title: 'Export 插件' },
       { path: 'drag', title: 'Drag插件' },
       { path: 'introduction', title: '简介' },
@@ -52,7 +54,8 @@ export default [
       { path: 'nodeImgAdjust', title: 'NodeImgAdjust插件' },
       { path: 'search', title: 'Search插件' },
       { path: 'painter', title: 'Painter插件' },
-      { path: 'help1', title: '概要/关联线' },
+      { path: 'painter', title: 'Painter插件' },
+      { path: 'scrollbar', title: 'Scrollbar插件' },
       { path: 'help2', title: '客户端' }
     ]
   },
@@ -85,7 +88,8 @@ export default [
       { path: 'touchEvent', title: 'TouchEvent plugin' },
       { path: 'nodeImgAdjust', title: 'NodeImgAdjust plugin' },
       { path: 'search', title: 'Search plugin' },
-      { path: 'painter', title: 'Painter plugin' }
+      { path: 'painter', title: 'Painter plugin' },
+      { path: 'scrollbar', title: 'Scrollbar plugin' }
     ]
   }
 ]
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index 213a6609..32722852 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,55 @@
 # Changelog
 
+## 0.7.0
+
+破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标hover效果。
+
+修复：
+
+> 1.修复节点边框尺寸比较大的情况下的的渲染异常问题。
+>
+> 2.修复切换主题时存在关联线的节点样式不会更新的问题。
+>
+> 3.修复全选没有触发node_active事件的问题。
+
+新增：
+
+> 1.收起节点时，显示折叠的节点数量。
+>
+> 2.支持关联线端点的位置跟随鼠标拖拽变化。
+>
+> 3.新增滚动条插件。
+>
+> 4.支持在url中通过fileURL查询参数打开指定的在线文件。
+>
+> 5.鱼骨图支持设置节点margin。
+>
+> 6.默认关闭双击复位画布。
+>
+> 7.修改导出图片方法的参数,导出pdf时如果思维导图尺寸小于a4纸那么不旋转方向。
+>
+> 8.提升导出的图片和pdf在高清屏的清晰度。
+> 
+> 9.插件新增销毁前生命周期函数，解决销毁思维导图时插件的一些副作用没有清除的问题。
+>
+> 10.优化基础样式的设置，修改不影响大小的主题属性时不触发全量渲染。
+>
+> 11.右键多选节点结束时禁止触发节点右键菜单事件，避免触发右键菜单显示。
+>
+> 12.优化Select插件，如果多选节点没有变化，那么不触发激活激活事件。
+>
+> 13.node_active事件抛出的激活节点列表不再直接引用内部激活列表。
+>
+> 14.优化鼠标按下节点事件逻辑，在右键拖拽画布模式下支持右键按住根节点拖拽画布。
+
+Demo：
+
+> 1.不直接引用内部激活节点列表，优化性能。
+> 
+> 2.支持配置是否显示滚动条。
+>
+> 3.删除侧边栏节点样式配置部分的激活节点配置。
+
 ## 0.6.17
 
 修复：
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index a98e89cd..73cfeb0f 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,37 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.7.0</h2>
+<p>破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标hover效果。</p>
+<p>修复：</p>
+<blockquote>
+<p>1.修复节点边框尺寸比较大的情况下的的渲染异常问题。</p>
+<p>2.修复切换主题时存在关联线的节点样式不会更新的问题。</p>
+<p>3.修复全选没有触发node_active事件的问题。</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.收起节点时，显示折叠的节点数量。</p>
+<p>2.支持关联线端点的位置跟随鼠标拖拽变化。</p>
+<p>3.新增滚动条插件。</p>
+<p>4.支持在url中通过fileURL查询参数打开指定的在线文件。</p>
+<p>5.鱼骨图支持设置节点margin。</p>
+<p>6.默认关闭双击复位画布。</p>
+<p>7.修改导出图片方法的参数,导出pdf时如果思维导图尺寸小于a4纸那么不旋转方向。</p>
+<p>8.提升导出的图片和pdf在高清屏的清晰度。</p>
+<p>9.插件新增销毁前生命周期函数，解决销毁思维导图时插件的一些副作用没有清除的问题。</p>
+<p>10.优化基础样式的设置，修改不影响大小的主题属性时不触发全量渲染。</p>
+<p>11.右键多选节点结束时禁止触发节点右键菜单事件，避免触发右键菜单显示。</p>
+<p>12.优化Select插件，如果多选节点没有变化，那么不触发激活激活事件。</p>
+<p>13.node_active事件抛出的激活节点列表不再直接引用内部激活列表。</p>
+<p>14.优化鼠标按下节点事件逻辑，在右键拖拽画布模式下支持右键按住根节点拖拽画布。</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.不直接引用内部激活节点列表，优化性能。</p>
+<p>2.支持配置是否显示滚动条。</p>
+<p>3.删除侧边栏节点样式配置部分的激活节点配置。</p>
+</blockquote>
 <h2>0.6.17</h2>
 <p>修复：</p>
 <blockquote>
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index 177545f9..25bf7083 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -48,8 +48,10 @@ const mindMap = new MindMap({
 | mousewheelZoomActionReverse（v0.6.5+）     | Boolean  | false |  当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来  |          |
 | defaultInsertSecondLevelNodeText（v0.4.7+）     | String  | 二级节点 | 默认插入的二级节点的文字               |          |
 | defaultInsertBelowSecondLevelNodeText（v0.4.7+）     | String  | 分支主题 | 默认插入的二级以下节点的文字               |          |
-| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff' } | 展开收起按钮的颜色  |          |
+| expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' } | 展开收起按钮的颜色，（fontSize及strokeColor字段为0.7.0+版本新增的，用于设置收起时显示节点数量的文字样式）  |          |
 | expandBtnIcon（v0.5.0+）     | Object  | { open: '', close: '' } | 自定义展开收起按钮的图标，可以传图标的svg字符串  |          |
+| expandBtnNumHandler（v0.7.0+）     | Function  |  | 用于自定义收起时显示节点数量的内容，接收一个参数，代表收起的节点实例，需要返回一个数字或字符串，代表最终显示的内容，比如你可以当数量大于99时，显示99+  |          |
+| isShowExpandNum（v0.7.0+）     | Boolean  | true | 节点收起时是否显示收起的数量  |          |
 | enableShortcutOnlyWhenMouseInSvg（v0.5.1+）     | Boolean  | true | 是否只有当鼠标在画布内才响应快捷键事件  |          |
 | enableNodeTransitionMove（v0.5.1+）（v0.6.7+已去除该特性）     | Boolean  | true | 是否开启节点动画过渡  |          |
 | nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+已去除该特性）     | Number  | 300 | 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms  |          |
@@ -80,7 +82,11 @@ const mindMap = new MindMap({
 | errorHandler（v0.6.15+）     | Function  |  | 自定义错误处理函数，目前只会抛出一些异步逻辑出错的情况。可以传递一个函数，会接收两个参数，第一个为错误的类型，第二个为错误对象 |          |
 | disableMouseWheelZoom（v0.6.15+）     | Boolean  | false | 禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放 |          |
 | resetCss（v0.6.16+）     | String  |  * { margin: 0; padding: 0; box-sizing: border-box; } | 设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖，如果不覆盖，节点内容会发生偏移 |          |
-| enableDblclickReset（v0.6.17+）     | Boolean  | true  | 开启鼠标双击复位思维导图位置及缩放 |          |
+| enableDblclickReset（v0.6.17+）     | Boolean  | true（v0.7.0+改为false）  | 开启鼠标双击复位思维导图位置及缩放 |          |
+| minExportImgCanvasScale（v0.7.0+）     | Number  | 2  | 导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度 |          |
+| hoverRectColor（v0.7.0+）     | String  | rgb(94, 200, 248)  | 节点鼠标hover和激活时显示的矩形边框颜色，hover时会添加0.6的透明度 |          |
+| hoverRectPadding（v0.7.0+）     | Number  | 2  | 节点鼠标hover和激活时显示的矩形边框距节点内容的距离 |          |
+| selectTextOnEnterEditText（v0.7.0+）     | Boolean  | true  | 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中 |          |
 
 ### 水印配置
 
@@ -330,8 +336,8 @@ mindMap.updateConfig({
 | REMOVE_NODE                         | 删除节点，操作节点为当前激活的节点或指定节点                         |   appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组）                                                           |
 | PASTE_NODE                          | 粘贴节点到节点，操作节点为当前激活的节点                     | data（要粘贴的节点数据，一般通过`renderer.copyNode()`方法和`renderer.cutNode()`方法获取） |
 | CUT_NODE                            | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) |
-| SET_NODE_STYLE                      | 修改节点单个样式                                                 | node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式） |
-| SET_NODE_STYLEs（v0.6.12+）                      | 修改节点多个样式                                                 | node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（布尔值，是否设置的是激活状态的样式） |
+| SET_NODE_STYLE                      | 修改节点单个样式                                                 | node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式） |
+| SET_NODE_STYLEs（v0.6.12+）                      | 修改节点多个样式                                                 | node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式） |
 | SET_NODE_ACTIVE                     | 设置节点是否激活                                             | node（要设置的节点）、active（布尔值，是否激活）             |
 | CLEAR_ACTIVE_NODE                   | 清除当前已激活节点的激活状态，操作节点为当前激活的节点       |                                                              |
 | SET_NODE_EXPAND                     | 设置节点是否展开                                             | node（要设置的节点）、expand（布尔值，是否展开）             |
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 675b575e..6e34e391 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -199,8 +199,8 @@
 <tr>
 <td>expandBtnStyle（v0.5.0+）</td>
 <td>Object</td>
-<td>{ color: '#808080', fill: '#fff' }</td>
-<td>展开收起按钮的颜色</td>
+<td>{ color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' }</td>
+<td>展开收起按钮的颜色，（fontSize及strokeColor字段为0.7.0+版本新增的，用于设置收起时显示节点数量的文字样式）</td>
 <td></td>
 </tr>
 <tr>
@@ -211,6 +211,20 @@
 <td></td>
 </tr>
 <tr>
+<td>expandBtnNumHandler（v0.7.0+）</td>
+<td>Function</td>
+<td></td>
+<td>用于自定义收起时显示节点数量的内容，接收一个参数，代表收起的节点实例，需要返回一个数字或字符串，代表最终显示的内容，比如你可以当数量大于99时，显示99+</td>
+<td></td>
+</tr>
+<tr>
+<td>isShowExpandNum（v0.7.0+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>节点收起时是否显示收起的数量</td>
+<td></td>
+</tr>
+<tr>
 <td>enableShortcutOnlyWhenMouseInSvg（v0.5.1+）</td>
 <td>Boolean</td>
 <td>true</td>
@@ -423,10 +437,38 @@
 <tr>
 <td>enableDblclickReset（v0.6.17+）</td>
 <td>Boolean</td>
-<td>true</td>
+<td>true（v0.7.0+改为false）</td>
 <td>开启鼠标双击复位思维导图位置及缩放</td>
 <td></td>
 </tr>
+<tr>
+<td>minExportImgCanvasScale（v0.7.0+）</td>
+<td>Number</td>
+<td>2</td>
+<td>导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度</td>
+<td></td>
+</tr>
+<tr>
+<td>hoverRectColor（v0.7.0+）</td>
+<td>String</td>
+<td>rgb(94, 200, 248)</td>
+<td>节点鼠标hover和激活时显示的矩形边框颜色，hover时会添加0.6的透明度</td>
+<td></td>
+</tr>
+<tr>
+<td>hoverRectPadding（v0.7.0+）</td>
+<td>Number</td>
+<td>2</td>
+<td>节点鼠标hover和激活时显示的矩形边框距节点内容的距离</td>
+<td></td>
+</tr>
+<tr>
+<td>selectTextOnEnterEditText（v0.7.0+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>
@@ -888,12 +930,12 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <tr>
 <td>SET_NODE_STYLE</td>
 <td>修改节点单个样式</td>
-<td>node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
+<td>node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式）</td>
 </tr>
 <tr>
 <td>SET_NODE_STYLEs（v0.6.12+）</td>
 <td>修改节点多个样式</td>
-<td>node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
+<td>node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式）</td>
 </tr>
 <tr>
 <td>SET_NODE_ACTIVE</td>
diff --git a/web/src/pages/Doc/zh/course23/index.md b/web/src/pages/Doc/zh/course23/index.md
new file mode 100644
index 00000000..ca16355c
--- /dev/null
+++ b/web/src/pages/Doc/zh/course23/index.md
@@ -0,0 +1,116 @@
+# 如何渲染滚动条
+
+> 需要先注册 Scrollbar 插件
+
+滚动条分为水平和垂直滚动条，所以你需要创建如下模板：
+
+```html
+<!-- 垂直 -->
+<div class="scrollbar verticalScrollbar" ref="verticalScrollbarRef">
+    <div
+        class="scrollbarInner"
+        :style="verticalScrollbarStyle"
+        @mousedown="onVerticalScrollbarMousedown"
+    ></div>
+</div>
+
+<!-- 水平 -->
+<div class="scrollbar horizontalScrollbar" ref="horizontalScrollbarRef">
+    <div
+        class="scrollbarInner"
+        :style="horizontalScrollbarStyle"
+        @mousedown="onHorizontalScrollbarMousedown"
+    ></div>
+</div>
+```
+
+外层元素为滚动条容器元素，内层为滚动条元素。
+
+内层滚动条元素一般需要设置成绝对定位，样式示例如下：
+
+```css
+.scrollbar {
+    position: relative;
+    background-color: #f5f5f5;
+    border-radius: 10px;
+    overflow: hidden;
+
+    &.verticalScrollbar {
+        width: 10px;
+        height: 500px;
+
+        .scrollbarInner {
+            width: 10px;
+            left: 0;
+        }
+    }
+
+    &.horizontalScrollbar {
+        width: 500px;
+        height: 10px;
+
+        .scrollbarInner {
+            height: 10px;
+            top: 0;
+        }
+    }
+
+    .scrollbarInner {
+        position: absolute;
+        background-color: #ccc;
+        border-radius: 10px;
+    }
+}
+```
+
+垂直滚动条的`top`和`height`、水平滚动条的`left`和`width`值需要调用插件的方法获取。
+
+首先你需要调用`setScrollBarWrapSize`方法传递你的滚动条容器的宽和高：
+
+```js
+// 水平滚动条容器的宽度
+const { width } = this.$refs.horizontalScrollbarRef.getBoundingClientRect()
+// 垂直滚动条容器的高度
+const { height } = this.$refs.verticalScrollbarRef.getBoundingClientRect()
+mindMap.scrollbar.setScrollBarWrapSize(width, height)
+```
+
+如果容器大小发生了改变需要再次调用该方法传递改变后的大小。
+
+然后你需要监听`scrollbar_change`方法来获取滚动条大小和位置数据：
+
+```js
+mindMap.('scrollbar_change', this.updateScrollbar)
+
+// 调用插件方法更新滚动条位置和大小
+{
+    updateScrollbar() {
+        const {
+            vertical,
+            horizontal
+        } = mindMap.scrollbar.calculationScrollbar()
+        this.verticalScrollbarStyle = {
+            top: vertical.top + '%',
+            height: vertical.height + '%'
+        }
+        this.horizontalScrollbarStyle = {
+            left: horizontal.left + '%',
+            width: horizontal.width + '%'
+        }
+    }
+}
+```
+
+调用插件的`calculationScrollbar`方法来获取滚动条元素的位置和大小，返回的是百分比数值，所以需要添加`%`。
+
+最后，需要给滚动条元素绑定`mousedown`事件，并且调用插件的`onMousedown`方法：
+
+```js
+// 垂直滚动条元素
+mindMap.scrollbar.onMousedown(e, 'vertical')
+
+// 水平滚动条元素
+mindMap.scrollbar.onMousedown(e, 'horizontal')
+```
+
+以上就是实现滚动条渲染的全部步骤。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course23/index.vue b/web/src/pages/Doc/zh/course23/index.vue
new file mode 100644
index 00000000..f2839237
--- /dev/null
+++ b/web/src/pages/Doc/zh/course23/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <h1>如何渲染滚动条</h1>
+<blockquote>
+<p>需要先注册 Scrollbar 插件</p>
+</blockquote>
+<p>滚动条分为水平和垂直滚动条，所以你需要创建如下模板：</p>
+<pre class="hljs"><code><span class="hljs-comment">&lt;!-- 垂直 --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbar verticalScrollbar&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;verticalScrollbarRef&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>
+        <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbarInner&quot;</span>
+        <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;verticalScrollbarStyle&quot;</span>
+        @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;onVerticalScrollbarMousedown&quot;</span>
+    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- 水平 --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbar horizontalScrollbar&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;horizontalScrollbarRef&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>
+        <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbarInner&quot;</span>
+        <span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;horizontalScrollbarStyle&quot;</span>
+        @<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;onHorizontalScrollbarMousedown&quot;</span>
+    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+<p>外层元素为滚动条容器元素，内层为滚动条元素。</p>
+<p>内层滚动条元素一般需要设置成绝对定位，样式示例如下：</p>
+<pre class="hljs"><code><span class="hljs-selector-class">.scrollbar</span> {
+    <span class="hljs-attribute">position</span>: relative;
+    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f5f5f5</span>;
+    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
+    <span class="hljs-attribute">overflow</span>: hidden;
+
+    &amp;<span class="hljs-selector-class">.verticalScrollbar</span> {
+        <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;
+        <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;
+
+        <span class="hljs-selector-class">.scrollbarInner</span> {
+            <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;
+            <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
+        }
+    }
+
+    &amp;<span class="hljs-selector-class">.horizontalScrollbar</span> {
+        <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;
+        <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;
+
+        <span class="hljs-selector-class">.scrollbarInner</span> {
+            <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;
+            <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
+        }
+    }
+
+    <span class="hljs-selector-class">.scrollbarInner</span> {
+        <span class="hljs-attribute">position</span>: absolute;
+        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ccc</span>;
+        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
+    }
+}
+</code></pre>
+<p>垂直滚动条的<code>top</code>和<code>height</code>、水平滚动条的<code>left</code>和<code>width</code>值需要调用插件的方法获取。</p>
+<p>首先你需要调用<code>setScrollBarWrapSize</code>方法传递你的滚动条容器的宽和高：</p>
+<pre class="hljs"><code><span class="hljs-comment">// 水平滚动条容器的宽度</span>
+<span class="hljs-keyword">const</span> { width } = <span class="hljs-built_in">this</span>.$refs.horizontalScrollbarRef.getBoundingClientRect()
+<span class="hljs-comment">// 垂直滚动条容器的高度</span>
+<span class="hljs-keyword">const</span> { height } = <span class="hljs-built_in">this</span>.$refs.verticalScrollbarRef.getBoundingClientRect()
+mindMap.scrollbar.setScrollBarWrapSize(width, height)
+</code></pre>
+<p>如果容器大小发生了改变需要再次调用该方法传递改变后的大小。</p>
+<p>然后你需要监听<code>scrollbar_change</code>方法来获取滚动条大小和位置数据：</p>
+<pre class="hljs"><code>mindMap.(<span class="hljs-string">&#x27;scrollbar_change&#x27;</span>, <span class="hljs-built_in">this</span>.updateScrollbar)
+
+<span class="hljs-comment">// 调用插件方法更新滚动条位置和大小</span>
+{
+    <span class="hljs-function"><span class="hljs-title">updateScrollbar</span>(<span class="hljs-params"></span>)</span> {
+        <span class="hljs-keyword">const</span> {
+            vertical,
+            horizontal
+        } = mindMap.scrollbar.calculationScrollbar()
+        <span class="hljs-built_in">this</span>.verticalScrollbarStyle = {
+            <span class="hljs-attr">top</span>: vertical.top + <span class="hljs-string">&#x27;%&#x27;</span>,
+            <span class="hljs-attr">height</span>: vertical.height + <span class="hljs-string">&#x27;%&#x27;</span>
+        }
+        <span class="hljs-built_in">this</span>.horizontalScrollbarStyle = {
+            <span class="hljs-attr">left</span>: horizontal.left + <span class="hljs-string">&#x27;%&#x27;</span>,
+            <span class="hljs-attr">width</span>: horizontal.width + <span class="hljs-string">&#x27;%&#x27;</span>
+        }
+    }
+}
+</code></pre>
+<p>调用插件的<code>calculationScrollbar</code>方法来获取滚动条元素的位置和大小，返回的是百分比数值，所以需要添加<code>%</code>。</p>
+<p>最后，需要给滚动条元素绑定<code>mousedown</code>事件，并且调用插件的<code>onMousedown</code>方法：</p>
+<pre class="hljs"><code><span class="hljs-comment">// 垂直滚动条元素</span>
+mindMap.scrollbar.onMousedown(e, <span class="hljs-string">&#x27;vertical&#x27;</span>)
+
+<span class="hljs-comment">// 水平滚动条元素</span>
+mindMap.scrollbar.onMousedown(e, <span class="hljs-string">&#x27;horizontal&#x27;</span>)
+</code></pre>
+<p>以上就是实现滚动条渲染的全部步骤。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course24/index.md b/web/src/pages/Doc/zh/course24/index.md
new file mode 100644
index 00000000..414b6465
--- /dev/null
+++ b/web/src/pages/Doc/zh/course24/index.md
@@ -0,0 +1,65 @@
+# 如何开发一个插件
+
+库本身提供了一些插件，如果满足不了你的需求，你也可以自己开发一个新插件。
+
+想要开发一个插件，你肯定需要对库的实现原理、模块划分、目录结构等等有一定了解，简而言之，需要你对库的源码有一定程度的熟悉，所以如果还没看过，现在就可以先去阅读一下，好消息是，本库的源码并不复杂，相信你一定能看懂。
+
+在你决定动手之前，最好先看一下内部插件是如何实现的。
+
+一个插件就是一个类：
+
+```js
+class YourPlugin {
+    constructor({ mindMap }) {
+        this.mindMap = mindMap
+    }
+
+    // 插件被移除前做的事情
+    beforePluginRemove() {
+        
+    }
+
+    // 插件被卸载前做的事情
+    beforePluginDestroy() {
+        
+    }
+}
+
+Scrollbar.instanceName = 'yourPlugin'
+```
+
+实例化插件时会传入思维导图实例，你可以保存起来，后续可以通过它来监听方法或调用实例的方法，甚至是其他插件的方法。
+
+需要给插件类添加一个静态属性`instanceName`，会将你的插件实例通过该属性保存到思维导图实例上，外部或其他插件想要获取你的插件实例时都需要通过该属性：
+
+```js
+mindMap.yourPlugin.xxx
+```
+
+插件存在两个生命周期函数：
+
+`beforePluginRemove`生命周期会在思维导图实例调用`removePlugin`方法时调用，代表思维导图实例并没有销毁，只是移除该插件。
+
+`beforePluginDestroy`生命周期会在销毁思维导图时调用，此时思维导图实例也会被销毁。
+
+```js
+mindMap.removePlugin(YourPlugin)
+```
+
+你也可以继承内部的一些插件：
+
+```js
+import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js'
+
+class YourPlugin extends ScrollbarPlugin {
+    constructor(opt) {
+        super(opt)
+    }
+}
+
+Scrollbar.instanceName = 'yourPlugin'
+```
+
+插件的原理无非是监听一些你需要的事件，然后调用一些你需要的方法来完成一些功能，其实没啥好多说的，建议看一下内部插件的实现。
+
+当你完成了一个插件后，你可以考虑发布到`npm`，提供给其他开发者使用。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course24/index.vue b/web/src/pages/Doc/zh/course24/index.vue
new file mode 100644
index 00000000..fc72aea2
--- /dev/null
+++ b/web/src/pages/Doc/zh/course24/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <h1>如何开发一个插件</h1>
+<p>库本身提供了一些插件，如果满足不了你的需求，你也可以自己开发一个新插件。</p>
+<p>想要开发一个插件，你肯定需要对库的实现原理、模块划分、目录结构等等有一定了解，简而言之，需要你对库的源码有一定程度的熟悉，所以如果还没看过，现在就可以先去阅读一下，好消息是，本库的源码并不复杂，相信你一定能看懂。</p>
+<p>在你决定动手之前，最好先看一下内部插件是如何实现的。</p>
+<p>一个插件就是一个类：</p>
+<pre class="hljs"><code><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">YourPlugin</span> </span>{
+    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">{ mindMap }</span>)</span> {
+        <span class="hljs-built_in">this</span>.mindMap = mindMap
+    }
+
+    <span class="hljs-comment">// 插件被移除前做的事情</span>
+    <span class="hljs-function"><span class="hljs-title">beforePluginRemove</span>(<span class="hljs-params"></span>)</span> {
+        
+    }
+
+    <span class="hljs-comment">// 插件被卸载前做的事情</span>
+    <span class="hljs-function"><span class="hljs-title">beforePluginDestroy</span>(<span class="hljs-params"></span>)</span> {
+        
+    }
+}
+
+Scrollbar.instanceName = <span class="hljs-string">&#x27;yourPlugin&#x27;</span>
+</code></pre>
+<p>实例化插件时会传入思维导图实例，你可以保存起来，后续可以通过它来监听方法或调用实例的方法，甚至是其他插件的方法。</p>
+<p>需要给插件类添加一个静态属性<code>instanceName</code>，会将你的插件实例通过该属性保存到思维导图实例上，外部或其他插件想要获取你的插件实例时都需要通过该属性：</p>
+<pre class="hljs"><code>mindMap.yourPlugin.xxx
+</code></pre>
+<p>插件存在两个生命周期函数：</p>
+<p><code>beforePluginRemove</code>生命周期会在思维导图实例调用<code>removePlugin</code>方法时调用，代表思维导图实例并没有销毁，只是移除该插件。</p>
+<p><code>beforePluginDestroy</code>生命周期会在销毁思维导图时调用，此时思维导图实例也会被销毁。</p>
+<pre class="hljs"><code>mindMap.removePlugin(YourPlugin)
+</code></pre>
+<p>你也可以继承内部的一些插件：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> ScrollbarPlugin <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Scrollbar.js&#x27;</span>
+
+<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">YourPlugin</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ScrollbarPlugin</span> </span>{
+    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">opt</span>)</span> {
+        <span class="hljs-built_in">super</span>(opt)
+    }
+}
+
+Scrollbar.instanceName = <span class="hljs-string">&#x27;yourPlugin&#x27;</span>
+</code></pre>
+<p>插件的原理无非是监听一些你需要的事件，然后调用一些你需要的方法来完成一些功能，其实没啥好多说的，建议看一下内部插件的实现。</p>
+<p>当你完成了一个插件后，你可以考虑发布到<code>npm</code>，提供给其他开发者使用。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course3/index.md b/web/src/pages/Doc/zh/course3/index.md
index 60b214d2..2a662381 100644
--- a/web/src/pages/Doc/zh/course3/index.md
+++ b/web/src/pages/Doc/zh/course3/index.md
@@ -14,6 +14,28 @@ mindMap.execCommand('INSERT_CHILD_NODE')
 
 `INSERT_CHILD_NODE`命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。
 
+如果你想获取插入节点的实例，可以这样操作：
+
+1.需要指定新插入节点的`id`，比如：
+
+```js
+import { createUid } from 'simple-mind-map/src/utils'
+
+let uid = createUid()
+mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
+    uid
+})
+```
+
+2.然后在`node_tree_render_end`事件里通过该`id`来获取实例：
+
+```js
+mindMap.on('node_tree_render_end', () => {
+    // 调用renderer实例的findNodeByUid方法获取到节点的实例对象
+    const node = mindMap.renderer.findNodeByUid(uid)
+})
+```
+
 ## 插入兄弟节点
 
 插入兄弟节点和插入子节点方式完全一致：
diff --git a/web/src/pages/Doc/zh/course3/index.vue b/web/src/pages/Doc/zh/course3/index.vue
index b502c9cf..d2e3d874 100644
--- a/web/src/pages/Doc/zh/course3/index.vue
+++ b/web/src/pages/Doc/zh/course3/index.vue
@@ -8,6 +8,21 @@
 </code></pre>
 <p>这样就会在当前激活节点（如果存在多个激活节点，默认会操作第一个激活节点）下添加一个子节点。</p>
 <p><code>INSERT_CHILD_NODE</code>命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。</p>
+<p>如果你想获取插入节点的实例，可以这样操作：</p>
+<p>1.需要指定新插入节点的<code>id</code>，比如：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> { createUid } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils&#x27;</span>
+
+<span class="hljs-keyword">let</span> uid = createUid()
+mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">false</span>, [], {
+    uid
+})
+</code></pre>
+<p>2.然后在<code>node_tree_render_end</code>事件里通过该<code>id</code>来获取实例：</p>
+<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;node_tree_render_end&#x27;</span>, <span class="hljs-function">() =&gt;</span> {
+    <span class="hljs-comment">// 调用renderer实例的findNodeByUid方法获取到节点的实例对象</span>
+    <span class="hljs-keyword">const</span> node = mindMap.renderer.findNodeByUid(uid)
+})
+</code></pre>
 <h2>插入兄弟节点</h2>
 <p>插入兄弟节点和插入子节点方式完全一致：</p>
 <pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_NODE&#x27;</span>)
diff --git a/web/src/pages/Doc/zh/doExport/index.md b/web/src/pages/Doc/zh/doExport/index.md
index aa8904e9..3ff4f23e 100644
--- a/web/src/pages/Doc/zh/doExport/index.md
+++ b/web/src/pages/Doc/zh/doExport/index.md
@@ -38,13 +38,17 @@ a.download = 'xxx'
 a.click()
 ```
 
-### png(name, transparent = false, rotateWhenWidthLongerThenHeight)
+### png(name, transparent = false, checkRotate)
+
+> v0.7.0以下版本为： png(name, transparent = false, rotateWhenWidthLongerThenHeight)
 
 - `name`：名称，可不传
 
 - `transparent`：v0.5.7+，指定导出图片的背景是否是透明的
 
-- `rotateWhenWidthLongerThenHeight`: v0.6.15+，Boolean, false, 是否在图片宽比高长时自动旋转90度
+- `rotateWhenWidthLongerThenHeight`: v0.6.15+，v0.7.0+已废弃，Boolean, false, 是否在图片宽比高长时自动旋转90度
+
+- `checkRotate`：v0.7.0+，Function，可以传递一个函数，接收图片的宽度和高度两个参数，返回true或false，true代表图片需要旋转90度。
 
 导出为`png`。
 
diff --git a/web/src/pages/Doc/zh/doExport/index.vue b/web/src/pages/Doc/zh/doExport/index.vue
index ecc32688..58f05daf 100644
--- a/web/src/pages/Doc/zh/doExport/index.vue
+++ b/web/src/pages/Doc/zh/doExport/index.vue
@@ -27,7 +27,10 @@ a.href = <span class="hljs-string">&#x27;xxx.png&#x27;</span><span class="hljs-c
 a.download = <span class="hljs-string">&#x27;xxx&#x27;</span>
 a.click()
 </code></pre>
-<h3>png(name, transparent = false, rotateWhenWidthLongerThenHeight)</h3>
+<h3>png(name, transparent = false, checkRotate)</h3>
+<blockquote>
+<p>v0.7.0以下版本为： png(name, transparent = false, rotateWhenWidthLongerThenHeight)</p>
+</blockquote>
 <ul>
 <li>
 <p><code>name</code>：名称，可不传</p>
@@ -36,7 +39,10 @@ a.click()
 <p><code>transparent</code>：v0.5.7+，指定导出图片的背景是否是透明的</p>
 </li>
 <li>
-<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+，Boolean, false, 是否在图片宽比高长时自动旋转90度</p>
+<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+，v0.7.0+已废弃，Boolean, false, 是否在图片宽比高长时自动旋转90度</p>
+</li>
+<li>
+<p><code>checkRotate</code>：v0.7.0+，Function，可以传递一个函数，接收图片的宽度和高度两个参数，返回true或false，true代表图片需要旋转90度。</p>
 </li>
 </ul>
 <p>导出为<code>png</code>。</p>
diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md
index 17bf4a93..f901afa0 100644
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -181,4 +181,8 @@
         <img src="../../../../assets/avatar/布林.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
         <p>布林</p>
     </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/南风.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>南风</p>
+    </div>
 </div>
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue
index 24a656ec..9420382d 100644
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -141,6 +141,10 @@
         <img src="../../../../assets/avatar/布林.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
         <p>布林</p>
     </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/南风.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>南风</p>
+    </div>
 </div>
   </div>
 </template>
diff --git a/web/src/pages/Doc/zh/node/index.md b/web/src/pages/Doc/zh/node/index.md
index dd7ea6a9..67706eb7 100644
--- a/web/src/pages/Doc/zh/node/index.md
+++ b/web/src/pages/Doc/zh/node/index.md
@@ -110,16 +110,20 @@
 
 `root`：是否是根节点，默认`false`
 
-`isActive`：获取的是否是激活状态的样式值，默认`false`
+`isActive`：v0.7.0+已废弃，获取的是否是激活状态的样式值，默认`false`
 
 ### setStyle(prop, value, isActive)
 
+`isActive`：v0.7.0+已废弃
+
 修改节点的某个样式，`SET_NODE_STYLE`命令的快捷方法
 
 ### setStyles(style, isActive)
 
 > v0.6.12+
 
+`isActive`：v0.7.0+已废弃
+
 修改节点多个样式，`SET_NODE_STYLES`命令的快捷方法
 
 ### getData(key)
diff --git a/web/src/pages/Doc/zh/node/index.vue b/web/src/pages/Doc/zh/node/index.vue
index ffc2a5cc..8642a410 100644
--- a/web/src/pages/Doc/zh/node/index.vue
+++ b/web/src/pages/Doc/zh/node/index.vue
@@ -64,13 +64,15 @@
 <p>获取某个最终应用到该节点的样式值</p>
 <p><code>prop</code>：要获取的样式属性</p>
 <p><code>root</code>：是否是根节点，默认<code>false</code></p>
-<p><code>isActive</code>：获取的是否是激活状态的样式值，默认<code>false</code></p>
+<p><code>isActive</code>：v0.7.0+已废弃，获取的是否是激活状态的样式值，默认<code>false</code></p>
 <h3>setStyle(prop, value, isActive)</h3>
+<p><code>isActive</code>：v0.7.0+已废弃</p>
 <p>修改节点的某个样式，<code>SET_NODE_STYLE</code>命令的快捷方法</p>
 <h3>setStyles(style, isActive)</h3>
 <blockquote>
 <p>v0.6.12+</p>
 </blockquote>
+<p><code>isActive</code>：v0.7.0+已废弃</p>
 <p>修改节点多个样式，<code>SET_NODE_STYLES</code>命令的快捷方法</p>
 <h3>getData(key)</h3>
 <p>获取该节点真实数据<code>nodeData</code>的<code>data</code>对象里的指定值，<code>key</code>不传返回这个<code>data</code>对象</p>
diff --git a/web/src/pages/Doc/zh/scrollbar/index.md b/web/src/pages/Doc/zh/scrollbar/index.md
new file mode 100644
index 00000000..49a20d1e
--- /dev/null
+++ b/web/src/pages/Doc/zh/scrollbar/index.md
@@ -0,0 +1,64 @@
+# Scrollbar 插件
+
+> v0.7.0+
+
+该插件用于帮助开发水平和垂直滚动条的功能。
+
+## 注册
+
+```js
+import MindMap from 'simple-mind-map'
+import Scrollbar from 'simple-mind-map/src/plugins/Scrollbar.js'
+MindMap.usePlugin(Scrollbar)
+```
+
+注册完且实例化`MindMap`后可通过`mindMap.scrollbar`获取到该实例。
+
+## 事件
+
+#### scrollbar_change
+
+当滚动条数据发生改变时触发，你可以监听该事件来更新滚动条位置和大小。
+
+## 方法
+
+### setScrollBarWrapSize(width, height)
+
+- `width`：Number，你的滚动条容器元素的宽度。
+
+- `height`： Number，你的滚动条容器元素的高度。
+
+设置滚动条容器的大小，对于水平滚动条，即容器的宽度，对于垂直滚动条，即容器的高度。当你的滚动条容器尺寸改变时需要再次调用该方法。
+
+### calculationScrollbar()
+
+> 需要先调用setScrollBarWrapSize方法设置滚动条容器元素的宽高。
+>
+> 一般需要监听scrollbar_change事件，然后调用该方法更新滚动条。
+
+返回值：
+
+```js
+{
+    // 垂直滚动条
+    vertical: {
+        top,
+        height
+    },
+    // 水平滚动条
+    horizontal: {
+        left,
+        width
+    }
+}
+```
+
+获取滚动条大小和位置，你可以根据返回值来设置到滚动条元素上，达到渲染和关心滚动条的效果。
+
+### onMousedown(e, type)
+
+- `e`：鼠标按下事件的事件对象。
+
+- `type`：按下的滚动条类型，vertical（垂直滚动条）、horizontal（水平滚动条）。
+
+滚动条元素的鼠标按下事件时需要调用该方法。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/scrollbar/index.vue b/web/src/pages/Doc/zh/scrollbar/index.vue
new file mode 100644
index 00000000..fc06ba0f
--- /dev/null
+++ b/web/src/pages/Doc/zh/scrollbar/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <h1>Scrollbar 插件</h1>
+<blockquote>
+<p>v0.7.0+</p>
+</blockquote>
+<p>该插件用于帮助开发水平和垂直滚动条的功能。</p>
+<h2>注册</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Scrollbar <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Scrollbar.js&#x27;</span>
+MindMap.usePlugin(Scrollbar)
+</code></pre>
+<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.scrollbar</code>获取到该实例。</p>
+<h2>事件</h2>
+<h4>scrollbar_change</h4>
+<p>当滚动条数据发生改变时触发，你可以监听该事件来更新滚动条位置和大小。</p>
+<h2>方法</h2>
+<h3>setScrollBarWrapSize(width, height)</h3>
+<ul>
+<li>
+<p><code>width</code>：Number，你的滚动条容器元素的宽度。</p>
+</li>
+<li>
+<p><code>height</code>： Number，你的滚动条容器元素的高度。</p>
+</li>
+</ul>
+<p>设置滚动条容器的大小，对于水平滚动条，即容器的宽度，对于垂直滚动条，即容器的高度。当你的滚动条容器尺寸改变时需要再次调用该方法。</p>
+<h3>calculationScrollbar()</h3>
+<blockquote>
+<p>需要先调用setScrollBarWrapSize方法设置滚动条容器元素的宽高。</p>
+<p>一般需要监听scrollbar_change事件，然后调用该方法更新滚动条。</p>
+</blockquote>
+<p>返回值：</p>
+<pre class="hljs"><code>{
+    <span class="hljs-comment">// 垂直滚动条</span>
+    <span class="hljs-attr">vertical</span>: {
+        top,
+        height
+    },
+    <span class="hljs-comment">// 水平滚动条</span>
+    <span class="hljs-attr">horizontal</span>: {
+        left,
+        width
+    }
+}
+</code></pre>
+<p>获取滚动条大小和位置，你可以根据返回值来设置到滚动条元素上，达到渲染和关心滚动条的效果。</p>
+<h3>onMousedown(e, type)</h3>
+<ul>
+<li>
+<p><code>e</code>：鼠标按下事件的事件对象。</p>
+</li>
+<li>
+<p><code>type</code>：按下的滚动条类型，vertical（垂直滚动条）、horizontal（水平滚动条）。</p>
+</li>
+</ul>
+<p>滚动条元素的鼠标按下事件时需要调用该方法。</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file