'打包'

'新增键盘导航，即通过方向键来切换激活的节点'
支持在大纲直接编辑节点文本内容
2026-02-17 22:08:25 +08:00 · 2022-12-09 16:56:28 +08:00 · 2022-12-09 16:53:42 +08:00 · 2022-12-08 09:19:47 +08:00 · 2022-11-16 08:59:13 +08:00 · 2022-11-15 20:00:03 +08:00
41 changed files with 1945 additions and 1238 deletions
--- a/README.md
+++ b/README.md
@@ -423,6 +423,14 @@ v0.1.5+

 将节点移动到另一个节点的后面

+#### moveNodeToCenter(node)
+
+v0.2.17+
+
+移动节点到画布中心。
+
+目前如果是存在缩放的情况下回到中心会重置缩放。
+
 ## keyCommand实例

 `keyCommand`实例负责快捷键的添加及触发，内置了一些快捷键，也可以自行添加。可通过`mindMap.keyCommand`获取到该实例。
@@ -550,6 +558,12 @@ v0.1.1+

 动态设置变换数据，可以通过getTransformData方法获取变换数据

+#### setScale(scale)
+
+v0.2.17+
+
+设置缩放
+
 ## MiniMap实例

 v0.2.11+
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.10aa67e3.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-5397ae43.e756f28b.js" rel="prefetch"><link href="dist/css/app.6976ad01.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.f631d5ff.css" rel="preload" as="style"><link href="dist/js/app.ba6b7428.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.8be44735.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.f631d5ff.css" rel="stylesheet"><link href="dist/css/app.6976ad01.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.8be44735.js"></script><script src="dist/js/app.ba6b7428.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.2784db23.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.faba1249.css" rel="preload" as="style"><link href="dist/js/app.77dbe506.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.013a6cea.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.faba1249.css" rel="stylesheet"><link href="dist/css/app.2784db23.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.013a6cea.js"></script><script src="dist/js/app.77dbe506.js"></script></body></html>
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -15,6 +15,7 @@ import { layoutValueList } from './src/utils/constant'
 import { SVG } from '@svgdotjs/svg.js'
 import xmind from './src/parse/xmind'
 import { simpleDeepClone } from './src/utils'
+import KeyboardNavigation from './src/KeyboardNavigation'

 // 默认选项配置
 const defaultOpt = {
@@ -133,6 +134,11 @@ class MindMap {
      mindMap: this
    })

+    // 键盘导航类
+    this.keyboardNavigation = new KeyboardNavigation({
+      mindMap: this
+    })
+
    // 批量执行类
    this.batchExecution = new BatchExecution()

--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.16",
+  "version": "0.2.17",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/simple-mind-map/src/Event.js
+++ b/simple-mind-map/src/Event.js
@@ -48,6 +48,7 @@ class Event extends EventEmitter {
    this.onMousewheel = this.onMousewheel.bind(this)
    this.onContextmenu = this.onContextmenu.bind(this)
    this.onSvgMousedown = this.onSvgMousedown.bind(this)
+    this.onKeyup = this.onKeyup.bind(this)
  }

  /**
@@ -69,6 +70,7 @@ class Event extends EventEmitter {
      this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
    }
    this.mindMap.svg.on('contextmenu', this.onContextmenu)
+    window.addEventListener('keyup', this.onKeyup)
  }

  /**
@@ -84,6 +86,7 @@ class Event extends EventEmitter {
    window.removeEventListener('mouseup', this.onMouseup)
    this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
    this.mindMap.svg.off('contextmenu', this.onContextmenu)
+    window.removeEventListener('keyup', this.onKeyup)
  }

  /**
@@ -177,6 +180,16 @@ class Event extends EventEmitter {
    e.preventDefault()
    this.emit('contextmenu', e)
  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 11:12:11
+   * @Desc: 按键松开事件
+   */
+  onKeyup(e) {
+    this.emit('keyup', e)
+  }
 }

 export default Event
--- a/simple-mind-map/src/KeyboardNavigation.js
+++ b/simple-mind-map/src/KeyboardNavigation.js
@@ -0,0 +1,133 @@
+import { isKey } from './utils/keyMap'
+import { bfsWalk } from './utils'
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-12-09 11:06:50
+ * @Desc: 键盘导航类
+ */
+export default class KeyboardNavigation {
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 11:07:24
+   * @Desc: 构造函数
+   */
+  constructor(opt) {
+    this.opt = opt
+    this.mindMap = opt.mindMap
+    this.onKeyup = this.onKeyup.bind(this)
+    this.mindMap.on('keyup', this.onKeyup)
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 14:12:27
+   * @Desc: 处理按键事件
+   */
+  onKeyup(e) {
+    if (this.mindMap.renderer.activeNodeList.length > 0) {
+      ;['Left', 'Up', 'Right', 'Down'].forEach(dir => {
+        if (isKey(e, dir)) {
+          this.focus(dir)
+        }
+      })
+    } else {
+      let root = this.mindMap.renderer.root
+      this.mindMap.renderer.moveNodeToCenter(root)
+      root.active()
+    }
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 14:12:39
+   * @Desc: 聚焦到下一个节点
+   */
+  focus(dir) {
+    let currentActiveNode = this.mindMap.renderer.activeNodeList[0]
+    let currentActiveNodeRect = this.getNodeRect(currentActiveNode)
+    let targetNode = null
+    let targetDis = Infinity
+    let checkNodeDis = (rect, node) => {
+      let dis = this.getDistance(currentActiveNodeRect, rect)
+      if (dis < targetDis) {
+        targetNode = node
+        targetDis = dis
+      }
+    }
+    bfsWalk(this.mindMap.renderer.root, node => {
+      let rect = this.getNodeRect(node)
+      let { left, top, right, bottom } = rect
+      if (dir === 'Right') {
+        if (left >= currentActiveNodeRect.right) {
+          checkNodeDis(rect, node)
+        }
+      } else if (dir === 'Left') {
+        if (right <= currentActiveNodeRect.left) {
+          checkNodeDis(rect, node)
+        }
+      } else if (dir === 'Up') {
+        if (bottom <= currentActiveNodeRect.top) {
+          checkNodeDis(rect, node)
+        }
+      } else if (dir === 'Down') {
+        if (top >= currentActiveNodeRect.bottom) {
+          checkNodeDis(rect, node)
+        }
+      }
+    })
+    if (targetNode) {
+      this.mindMap.renderer.moveNodeToCenter(targetNode)
+      targetNode.active()
+    }
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 14:12:50
+   * @Desc: 获取节点的位置信息
+   */
+  getNodeRect(node) {
+    let { scaleX, scaleY, translateX, translateY } =
+      this.mindMap.draw.transform()
+    let { left, top, width, height } = node
+    return {
+      right: (left + width) * scaleX + translateX,
+      bottom: (top + height) * scaleY + translateY,
+      left: left * scaleX + translateX,
+      top: top * scaleY + translateY
+    }
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 14:13:04
+   * @Desc: 获取两个节点的距离
+   */
+  getDistance(node1Rect, node2Rect) {
+    let center1 = this.getCenter(node1Rect)
+    let center2 = this.getCenter(node2Rect)
+    return Math.sqrt(
+      Math.pow(center1.x - center2.x, 2) + Math.pow(center1.y - center2.y, 2)
+    )
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 14:13:11
+   * @Desc: 获取节点的中心点
+   */
+  getCenter({ left, right, top, bottom }) {
+    return {
+      x: (left + right) / 2,
+      y: (top + bottom) / 2
+    }
+  }
+}
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -1097,6 +1097,28 @@ class Render {
      this.mindMap.render()
    }
  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 11:46:57
+   * @Desc: 移动节点到画布中心
+   */
+  moveNodeToCenter(node) {
+    let halfWidth = this.mindMap.width / 2
+    let halfHeight = this.mindMap.height / 2
+    let { left, top, width, height } = node
+    let nodeCenterX = left + width / 2
+    let nodeCenterY = top + height / 2
+    let { state } = this.mindMap.view.getTransformData()
+    let targetX = halfWidth - state.x
+    let targetY = halfHeight - state.y
+    let offsetX = targetX - nodeCenterX
+    let offsetY = targetY - nodeCenterY
+    this.mindMap.view.translateX(offsetX)
+    this.mindMap.view.translateY(offsetY)
+    this.mindMap.view.setScale(1)
+  }
 }

 export default Render
--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -88,6 +88,9 @@ export default class TextEdit {
      this.textEditNode = document.createElement('div')
      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`
      this.textEditNode.setAttribute('contenteditable', true)
+      this.textEditNode.addEventListener('keyup', e => {
+        e.stopPropagation()
+      })
      document.body.appendChild(this.textEditNode)
    }
    node.style.domText(this.textEditNode, this.mindMap.view.scale)
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -213,6 +213,18 @@ class View {
    this.transform()
    this.mindMap.emit('scale', this.scale)
  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 16:31:59
+   * @Desc: 设置缩放
+   */
+  setScale(scale) {
+    this.scale = scale
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
 }

 export default View
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -4,6 +4,7 @@ import Vue from 'vue'

 const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'
 const SIMPLE_MIND_MAP_LANG = 'SIMPLE_MIND_MAP_LANG'
+const SIMPLE_MIND_MAP_LOCAL_CONFIG = 'SIMPLE_MIND_MAP_LOCAL_CONFIG'

 /**
 * @Author: 王林
@@ -101,3 +102,27 @@ export const getLang = () => {
  storeLang('zh')
  return 'zh'
 }
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-11-14 18:57:31
+ * @Desc: 存储本地配置
+ */
+export const storeLocalConfig = config => {
+  localStorage.setItem(SIMPLE_MIND_MAP_LOCAL_CONFIG, JSON.stringify(config))
+}
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-11-14 18:57:37
+ * @Desc: 获取本地配置
+ */
+export const getLocalConfig = () => {
+  let config = localStorage.getItem(SIMPLE_MIND_MAP_LOCAL_CONFIG)
+  if (config) {
+    return JSON.parse(config)
+  }
+  return null
+}
--- a/web/src/assets/icon-font/demo.css
+++ b/web/src/assets/icon-font/demo.css
@@ -1,19 +1,15 @@
 /* Logo 字体 */
@font-face {
-  font-family: 'iconfont logo';
+  font-family: "iconfont logo";
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix')
-      format('embedded-opentype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834')
-      format('woff'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834')
-      format('truetype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
-      format('svg');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
 }

 .logo {
-  font-family: 'iconfont logo';
+  font-family: "iconfont logo";
  font-size: 160px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
@@ -52,6 +48,7 @@
  color: #666;
 }

+
 #tabs .active {
  border-bottom-color: #f00;
  color: #222;
@@ -218,35 +215,35 @@
  margin: 1em 0;
 }

-.markdown > p,
-.markdown > blockquote,
-.markdown > .highlight,
-.markdown > ol,
-.markdown > ul {
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
  width: 80%;
 }

-.markdown ul > li {
+.markdown ul>li {
  list-style: circle;
 }

-.markdown > ul li,
-.markdown blockquote ul > li {
+.markdown>ul li,
+.markdown blockquote ul>li {
  margin-left: 20px;
  padding-left: 4px;
 }

-.markdown > ul li p,
-.markdown > ol li p {
+.markdown>ul li p,
+.markdown>ol li p {
  margin: 0.6em 0;
 }

-.markdown ol > li {
+.markdown ol>li {
  list-style: decimal;
 }

-.markdown > ol li,
-.markdown blockquote ol > li {
+.markdown>ol li,
+.markdown blockquote ol>li {
  margin-left: 20px;
  padding-left: 4px;
 }
@@ -263,7 +260,7 @@
  font-weight: 600;
 }

-.markdown > table {
+.markdown>table {
  border-collapse: collapse;
  border-spacing: 0px;
  empty-cells: show;
@@ -272,21 +269,21 @@
  margin-bottom: 24px;
 }

-.markdown > table th {
+.markdown>table th {
  white-space: nowrap;
  color: #333;
  font-weight: 600;
 }

-.markdown > table th,
-.markdown > table td {
+.markdown>table th,
+.markdown>table td {
  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left;
 }

-.markdown > table th {
-  background: #f7f7f7;
+.markdown>table th {
+  background: #F7F7F7;
 }

 .markdown blockquote {
@@ -321,11 +318,12 @@
  display: inline-block;
 }

-.markdown > br,
-.markdown > p > br {
+.markdown>br,
+.markdown>p>br {
  clear: both;
 }

+
 .hljs {
  display: block;
  background: white;
@@ -401,8 +399,8 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
-code[class*='language-'],
-pre[class*='language-'] {
+code[class*="language-"],
+pre[class*="language-"] {
  color: black;
  background: none;
  text-shadow: 0 1px white;
@@ -424,45 +422,46 @@ pre[class*='language-'] {
  hyphens: none;
 }

-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection {
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
 }

-pre[class*='language-']::selection,
-pre[class*='language-'] ::selection,
-code[class*='language-']::selection,
-code[class*='language-'] ::selection {
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc;
 }

@media print {
-  code[class*='language-'],
-  pre[class*='language-'] {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
    text-shadow: none;
  }
 }

 /* Code blocks */
-pre[class*='language-'] {
+pre[class*="language-"] {
  padding: 1em;
-  margin: 0.5em 0;
+  margin: .5em 0;
  overflow: auto;
 }

-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
  background: #f5f2f0;
 }

 /* Inline code */
-:not(pre) > code[class*='language-'] {
-  padding: 0.1em;
-  border-radius: 0.3em;
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
  white-space: normal;
 }

@@ -478,7 +477,7 @@ pre[class*='language-'] {
 }

 .namespace {
-  opacity: 0.7;
+  opacity: .7;
 }

 .token.property,
@@ -506,7 +505,7 @@ pre[class*='language-'] {
 .language-css .token.string,
 .style .token.string {
  color: #9a6e3a;
-  background: hsla(0, 0%, 100%, 0.5);
+  background: hsla(0, 0%, 100%, .5);
 }

 .token.atrule,
@@ -517,7 +516,7 @@ pre[class*='language-'] {

 .token.function,
 .token.class-name {
-  color: #dd4a68;
+  color: #DD4A68;
 }

 .token.regex,
--- a/web/src/assets/icon-font/demo_index.html
+++ b/web/src/assets/icon-font/demo_index.html
--- a/web/src/assets/icon-font/iconfont.css
+++ b/web/src/assets/icon-font/iconfont.css
@@ -1,186 +1,195 @@
@font-face {
-  font-family: 'iconfont'; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1664005697217') format('woff2'),
-    url('iconfont.woff?t=1664005697217') format('woff'),
-    url('iconfont.ttf?t=1664005697217') format('truetype');
+  font-family: "iconfont"; /* Project id 2479351 */
+  src: url('iconfont.woff2?t=1668512547595') format('woff2'),
+       url('iconfont.woff?t=1668512547595') format('woff'),
+       url('iconfont.ttf?t=1668512547595') format('truetype');
 }

 .iconfont {
-  font-family: 'iconfont' !important;
+  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

+.iconchoose1:before {
+  content: "\e6c5";
+}
+
+.iconzhuti:before {
+  content: "\e7aa";
+}
+
 .icondaochu1:before {
-  content: '\e63e';
+  content: "\e63e";
 }

 .iconlingcunwei:before {
-  content: '\e657';
+  content: "\e657";
 }

 .iconexport:before {
-  content: '\e642';
+  content: "\e642";
 }

 .icondakai:before {
-  content: '\ebdf';
+  content: "\ebdf";
 }

 .iconxinjian:before {
-  content: '\e64e';
+  content: "\e64e";
 }

 .iconjianqie:before {
-  content: '\e601';
+  content: "\e601";
 }

 .iconzhengli:before {
-  content: '\e83b';
+  content: "\e83b";
 }

 .iconfuzhi:before {
-  content: '\e604';
+  content: "\e604";
 }

 .iconniantie:before {
-  content: '\e63f';
+  content: "\e63f";
 }

 .iconshangyi:before {
-  content: '\e6be';
+  content: "\e6be";
 }

 .iconxiayi:before {
-  content: '\e6bf';
+  content: "\e6bf";
 }

 .icongaikuozonglan:before {
-  content: '\e609';
+  content: "\e609";
 }

 .iconquanxuan:before {
-  content: '\f199';
+  content: "\f199";
 }

 .icondaoru:before {
-  content: '\e6a3';
+  content: "\e6a3";
 }

 .iconhoutui-shi:before {
-  content: '\e656';
+  content: "\e656";
 }

 .iconqianjin1:before {
-  content: '\e654';
+  content: "\e654";
 }

 .iconwithdraw:before {
-  content: '\e603';
+  content: "\e603";
 }

 .iconqianjin:before {
-  content: '\e600';
+  content: "\e600";
 }

 .iconhuifumoren:before {
-  content: '\e60e';
+  content: "\e60e";
 }

 .iconhuanhang:before {
-  content: '\e61e';
+  content: "\e61e";
 }

 .iconsuoxiao:before {
-  content: '\ec13';
+  content: "\ec13";
 }

 .iconbianji:before {
-  content: '\e626';
+  content: "\e626";
 }

 .iconfangda:before {
-  content: '\e663';
+  content: "\e663";
 }

 .iconquanping1:before {
-  content: '\e664';
+  content: "\e664";
 }

 .icondingwei:before {
-  content: '\e616';
+  content: "\e616";
 }

 .icondaohang:before {
-  content: '\e611';
+  content: "\e611";
 }

 .iconjianpan:before {
-  content: '\e64d';
+  content: "\e64d";
 }

 .iconquanping:before {
-  content: '\e602';
+  content: "\e602";
 }

 .icondaochu:before {
-  content: '\e63d';
+  content: "\e63d";
 }

 .iconbiaoqian:before {
-  content: '\e63c';
+  content: "\e63c";
 }

 .iconflow-Mark:before {
-  content: '\e65b';
+  content: "\e65b";
 }

 .iconchaolianjie:before {
-  content: '\e6f4';
+  content: "\e6f4";
 }

 .iconjingzi:before {
-  content: '\e610';
+  content: "\e610";
 }

 .iconxiaolian:before {
-  content: '\e60f';
+  content: "\e60f";
 }

 .iconimage:before {
-  content: '\e629';
+  content: "\e629";
 }

 .iconjiegou:before {
-  content: '\e61d';
+  content: "\e61d";
 }

 .iconyangshi:before {
-  content: '\e631';
+  content: "\e631";
 }

 .iconfuhao-dagangshu:before {
-  content: '\e71f';
+  content: "\e71f";
 }

 .icontianjiazijiedian:before {
-  content: '\e622';
+  content: "\e622";
 }

 .iconjiedian:before {
-  content: '\e655';
+  content: "\e655";
 }

 .iconshanchu:before {
-  content: '\e696';
+  content: "\e696";
 }

 .iconzhankai:before {
-  content: '\e64c';
+  content: "\e64c";
 }

 .iconzhankai1:before {
-  content: '\e673';
+  content: "\e673";
 }
+
--- a/web/src/assets/icon-font/iconfont.js
+++ b/web/src/assets/icon-font/iconfont.js
--- a/web/src/assets/icon-font/iconfont.json
+++ b/web/src/assets/icon-font/iconfont.json
@@ -5,6 +5,20 @@
  "css_prefix_text": "icon",
  "description": "思维导图",
  "glyphs": [
+    {
+      "icon_id": "1009019",
+      "name": "选择",
+      "font_class": "choose1",
+      "unicode": "e6c5",
+      "unicode_decimal": 59077
+    },
+    {
+      "icon_id": "493507",
+      "name": "主题",
+      "font_class": "zhuti",
+      "unicode": "e7aa",
+      "unicode_decimal": 59306
+    },
    {
      "icon_id": "1305460",
      "name": "导出",
--- a/web/src/assets/icon-font/iconfont.ttf
+++ b/web/src/assets/icon-font/iconfont.ttf
--- a/web/src/assets/icon-font/iconfont.woff
+++ b/web/src/assets/icon-font/iconfont.woff
--- a/web/src/assets/icon-font/iconfont.woff2
+++ b/web/src/assets/icon-font/iconfont.woff2
--- a/web/src/config/en.js
+++ b/web/src/config/en.js
@@ -319,3 +319,37 @@ export const shapeList = [
    value: 'circle'
  }
 ]
+
+// 侧边栏列表
+export const sidebarTriggerList = [
+  {
+    name: 'Node style',
+    value: 'nodeStyle',
+    icon: 'iconzhuti'
+  },
+  {
+    name: 'Base style',
+    value: 'baseStyle',
+    icon: 'iconyangshi'
+  },
+  {
+    name: 'Theme',
+    value: 'theme',
+    icon: 'iconjingzi'
+  },
+  {
+    name: 'Structure',
+    value: 'structure',
+    icon: 'iconjiegou'
+  },
+  {
+    name: 'Outline',
+    value: 'outline',
+    icon: 'iconfuhao-dagangshu'
+  },
+  {
+    name: 'ShortcutKey',
+    value: 'shortcutKey',
+    icon: 'iconjianpan'
+  }
+]
--- a/web/src/config/index.js
+++ b/web/src/config/index.js
@@ -13,7 +13,8 @@ import {
  backgroundRepeatList as backgroundRepeatListZh,
  backgroundPositionList as backgroundPositionListZh,
  shortcutKeyList as shortcutKeyListZh,
-  shapeList as shapeListZh
+  shapeList as shapeListZh,
+  sidebarTriggerList as sidebarTriggerListZh
 } from './zh'
 import {
  fontFamilyList as fontFamilyListEn,
@@ -22,7 +23,8 @@ import {
  backgroundRepeatList as backgroundRepeatListEn,
  backgroundPositionList as backgroundPositionListEn,
  shortcutKeyList as shortcutKeyListEn,
-  shapeList as shapeListEn
+  shapeList as shapeListEn,
+  sidebarTriggerList as sidebarTriggerListEn
 } from './en'

 const fontFamilyList = {
@@ -60,6 +62,11 @@ const shapeList = {
  en: shapeListEn
 }

+const sidebarTriggerList = {
+  zh: sidebarTriggerListZh,
+  en: sidebarTriggerListEn
+}
+
 export {
  fontSizeList,
  lineHeightList,
@@ -75,5 +82,6 @@ export {
  backgroundRepeatList,
  backgroundPositionList,
  shortcutKeyList,
-  shapeList
+  shapeList,
+  sidebarTriggerList
 }
--- a/web/src/config/zh.js
+++ b/web/src/config/zh.js
@@ -391,3 +391,37 @@ export const langList = [
    name: 'English'
  }
 ]
+
+// 侧边栏列表
+export const sidebarTriggerList = [
+  {
+    name: '节点样式',
+    value: 'nodeStyle',
+    icon: 'iconzhuti'
+  },
+  {
+    name: '基础样式',
+    value: 'baseStyle',
+    icon: 'iconyangshi'
+  },
+  {
+    name: '主题',
+    value: 'theme',
+    icon: 'iconjingzi'
+  },
+  {
+    name: '结构',
+    value: 'structure',
+    icon: 'iconjiegou'
+  },
+  {
+    name: '大纲',
+    value: 'outline',
+    icon: 'iconfuhao-dagangshu'
+  },
+  {
+    name: '快捷键',
+    value: 'shortcutKey',
+    icon: 'iconjianpan'
+  }
+]
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -43,7 +43,8 @@ export default {
    level3: 'Level3',
    level4: 'Level4',
    level5: 'Level5',
-    level6: 'Level6'
+    level6: 'Level6',
+    zenMode: 'Zen mode'
  },
  count: {
    words: 'Words',
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -43,7 +43,8 @@ export default {
    level3: '三级主题',
    level4: '四级主题',
    level5: '五级主题',
-    level6: '六级主题'
+    level6: '六级主题',
+    zenMode: '禅模式'
  },
  count: {
    words: '字数',
--- a/web/src/pages/Edit/Index.vue
+++ b/web/src/pages/Edit/Index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="container">
    <template v-if="show">
-      <Toolbar></Toolbar>
+      <Toolbar v-if="!isZenMode"></Toolbar>
      <Edit></Edit>
    </template>
  </div>
@@ -10,7 +10,8 @@
 <script>
 import Toolbar from './components/Toolbar'
 import Edit from './components/Edit'
-import { mapActions } from 'vuex'
+import { mapState, mapActions, mapMutations } from 'vuex'
+import { getLocalConfig } from '@/api'

 export default {
  name: 'Index',
@@ -23,7 +24,13 @@ export default {
      show: false
    }
  },
+  computed: {
+    ...mapState({
+      isZenMode: state => state.localConfig.isZenMode
+    })
+  },
  async created() {
+    this.initLocalConfig()
    const loading = this.$loading({
      lock: true,
      text: '正在加载，请稍后...'
@@ -33,7 +40,23 @@ export default {
    loading.close()
  },
  methods: {
-    ...mapActions(['getUserMindMapData'])
+    ...mapActions(['getUserMindMapData']),
+    ...mapMutations(['setLocalConfig']),
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:07:03
+     * @Desc: 初始化本地配置
+     */
+    initLocalConfig() {
+      let config = getLocalConfig()
+      if (config) {
+        this.setLocalConfig({
+          ...this.$store.state.localConfig,
+          ...config
+        })
+      }
+    }
  }
 }
 </script>
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -298,6 +298,7 @@ import Color from './Color'
 import { lineWidthList, lineStyleList, backgroundRepeatList } from '@/config'
 import ImgUpload from '@/components/ImgUpload'
 import { storeConfig } from '@/api'
+import { mapState } from 'vuex'

 /**
 * @Author: 王林
@@ -345,6 +346,8 @@ export default {
    }
  },
  computed: {
+    ...mapState(['activeSidebar']),
+
    lineStyleList() {
      return lineStyleList[this.$i18n.locale] || lineStyleList.zh
    },
@@ -352,14 +355,15 @@ export default {
      return backgroundRepeatList[this.$i18n.locale] || backgroundRepeatList.zh
    }
  },
-  created() {
-    this.$bus.$on('showBaseStyle', () => {
-      this.$refs.sidebar.show = false
-      this.$nextTick(() => {
+  watch: {
+    activeSidebar(val) {
+      if (val === 'baseStyle') {
        this.$refs.sidebar.show = true
        this.initStyle()
-      })
-    })
+      } else {
+        this.$refs.sidebar.show = false
+      }
+    }
  },
  methods: {
    /**
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@@ -89,11 +89,17 @@
        {{ $t('contextmenu.arrangeLayout') }}
        <span class="desc">Ctrl + L</span>
      </div>
+      <div class="item" @click="exec('TOGGLE_ZEN_MODE')">
+        {{ $t('contextmenu.zenMode') }}
+        {{ isZenMode ? '√' : '' }}
+      </div>
    </template>
  </div>
 </template>

 <script>
+import { mapState, mapMutations } from 'vuex'
+
 /**
 * @Author: 王林
 * @Date: 2021-06-24 22:53:10
@@ -120,6 +126,9 @@ export default {
    }
  },
  computed: {
+    ...mapState({
+      isZenMode: state => state.localConfig.isZenMode
+    }),
    expandList() {
      return [
        this.$t('contextmenu.level1'),
@@ -181,6 +190,8 @@ export default {
    this.mindMap.keyCommand.removeShortcut('Control+x', this.cut)
  },
  methods: {
+    ...mapMutations(['setLocalConfig']),
+
    /**
     * @Author: 王林
     * @Date: 2021-07-14 21:38:50
@@ -276,6 +287,11 @@ export default {
        case 'RETURN_CENTER':
          this.mindMap.view.reset()
          break
+        case 'TOGGLE_ZEN_MODE':
+          this.setLocalConfig({
+            isZenMode: !this.isZenMode
+          })
+          break
        default:
          this.$bus.$emit('execCommand', key, ...args)
          break
--- a/web/src/pages/Edit/components/Count.vue
+++ b/web/src/pages/Edit/components/Count.vue
@@ -27,13 +27,23 @@ export default {
    }
  },
  created() {
-    this.$bus.$on('data_change', data => {
+    this.$bus.$on('data_change', this.onDataChange)
+  },
+  beforeDestroy() {
+    this.$bus.$off('data_change', this.onDataChange)
+  },
+  methods: {
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:20:20
+     * @Desc: 监听数据变化
+     */
+    onDataChange(data) {
      this.words = 0
      this.num = 0
      this.walk(data)
-    })
-  },
-  methods: {
+    },
+
    /**
     * @Author: 王林
     * @Date: 2021-06-30 22:13:07
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -1,18 +1,22 @@
 <template>
  <div class="editContainer">
    <div class="mindMapContainer" ref="mindMapContainer"></div>
-    <Count></Count>
+    <Count v-if="!isZenMode"></Count>
    <Navigator :mindMap="mindMap"></Navigator>
-    <NavigatorToolbar :mindMap="mindMap"></NavigatorToolbar>
-    <Outline></Outline>
-    <Style></Style>
+    <NavigatorToolbar :mindMap="mindMap" v-if="!isZenMode"></NavigatorToolbar>
+    <Outline :mindMap="mindMap"></Outline>
+    <Style v-if="!isZenMode"></Style>
    <BaseStyle :data="mindMapData" :mindMap="mindMap"></BaseStyle>
    <Theme :mindMap="mindMap"></Theme>
    <Structure :mindMap="mindMap"></Structure>
    <ShortcutKey></ShortcutKey>
    <Contextmenu v-if="mindMap" :mindMap="mindMap"></Contextmenu>
-    <NodeNoteContentShow></NodeNoteContentShow>
+    <NodeNoteContentShow
+      v-if="mindMap"
+      :mindMap="mindMap"
+    ></NodeNoteContentShow>
    <NodeImgPreview v-if="mindMap" :mindMap="mindMap"></NodeImgPreview>
+    <SidebarTrigger v-if="!isZenMode"></SidebarTrigger>
  </div>
 </template>

@@ -31,6 +35,8 @@ import NodeNoteContentShow from './NodeNoteContentShow.vue'
 import { getData, storeData, storeConfig } from '@/api'
 import Navigator from './Navigator.vue'
 import NodeImgPreview from './NodeImgPreview.vue'
+import SidebarTrigger from './SidebarTrigger.vue'
+import { mapState } from 'vuex'

 /**
 * @Author: 王林
@@ -51,7 +57,8 @@ export default {
    Contextmenu,
    NodeNoteContentShow,
    Navigator,
-    NodeImgPreview
+    NodeImgPreview,
+    SidebarTrigger
  },
  data() {
    return {
@@ -61,6 +68,11 @@ export default {
      openTest: false
    }
  },
+  computed: {
+    ...mapState({
+      isZenMode: state => state.localConfig.isZenMode
+    })
+  },
  mounted() {
    this.getData()
    this.init()
@@ -225,7 +237,7 @@ export default {
            this.$bus.$emit('showNoteContent', content, left, top)
          },
          hide: () => {
-            this.$bus.$emit('hideNoteContent')
+            // this.$bus.$emit('hideNoteContent')
          }
        }
      })
--- a/web/src/pages/Edit/components/NodeHyperlink.vue
+++ b/web/src/pages/Edit/components/NodeHyperlink.vue
@@ -11,11 +11,12 @@
        v-model="link"
        size="mini"
        placeholder="http://xxxx.com/"
+        @keyup.native.stop
      ></el-input>
    </div>
    <div class="item">
      <span class="name">{{ $t('nodeHyperlink.name') }}</span>
-      <el-input v-model="linkTitle" size="mini"></el-input>
+      <el-input v-model="linkTitle" size="mini" @keyup.native.stop></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
--- a/web/src/pages/Edit/components/NodeNote.vue
+++ b/web/src/pages/Edit/components/NodeNote.vue
@@ -12,7 +12,7 @@
      v-model="note"
    >
    </el-input> -->
-    <div class="noteEditor" ref="noteEditor"></div>
+    <div class="noteEditor" ref="noteEditor" @keyup.stop></div>
    <!-- <div class="tip">换行请使用：Enter+Shift</div> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
--- a/web/src/pages/Edit/components/NodeNoteContentShow.vue
+++ b/web/src/pages/Edit/components/NodeNoteContentShow.vue
@@ -7,6 +7,7 @@
      top: this.top + 'px',
      visibility: show ? 'visible' : 'hidden'
    }"
+    @click.stop
  ></div>
 </template>

@@ -30,20 +31,42 @@ export default {
    }
  },
  created() {
-    this.$bus.$on('showNoteContent', (content, left, top) => {
-      this.editor.setMarkdown(content)
-      this.left = left
-      this.top = top
-      this.show = true
-    })
-    this.$bus.$on('hideNoteContent', () => {
-      this.show = false
-    })
+    this.$bus.$on('showNoteContent', this.onShowNoteContent)
+    this.$bus.$on('hideNoteContent', this.hideNoteContent)
+    document.body.addEventListener('click', this.hideNoteContent)
+    this.$bus.$on('node_active', this.hideNoteContent)
  },
  mounted() {
    this.initEditor()
  },
+  beforeDestroy() {
+    this.$bus.$off('showNoteContent', this.onShowNoteContent)
+    this.$bus.$off('hideNoteContent', this.hideNoteContent)
+    document.body.removeEventListener('click', this.hideNoteContent)
+    this.$bus.$off('node_active', this.hideNoteContent)
+  },
  methods: {
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:56:08
+     * @Desc: 显示备注浮层
+     */
+    onShowNoteContent(content, left, top) {
+      this.editor.setMarkdown(content)
+      this.left = left
+      this.top = top
+      this.show = true
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:56:20
+     * @Desc: 隐藏备注浮层
+     */
+    hideNoteContent() {
+      this.show = false
+    },
+
    /**
     * @Author: 王林25
     * @Date: 2022-05-09 11:37:05
@@ -66,5 +89,24 @@ export default {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
+  max-height: 300px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 7px;
+    background-color: rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: none;
+    background: transparent;
+    display: none;
+  }
 }
 </style>
--- a/web/src/pages/Edit/components/NodeTag.vue
+++ b/web/src/pages/Edit/components/NodeTag.vue
@@ -8,6 +8,7 @@
    <el-input
      v-model="tag"
      @keyup.native.enter="add"
+      @keyup.native.stop
      :disabled="tagArr.length >= max"
      :placeholder="$t('nodeTag.addTip')"
    >
--- a/web/src/pages/Edit/components/Outline.vue
+++ b/web/src/pages/Edit/components/Outline.vue
@@ -1,11 +1,30 @@
 <template>
  <Sidebar ref="sidebar" :title="$t('outline.title')">
-    <el-tree :data="data" :props="defaultProps" default-expand-all></el-tree>
+    <el-tree
+      class="outlineTree"
+      :data="data"
+      :props="defaultProps"
+      :expand-on-click-node="false"
+      default-expand-all
+    >
+      <span class="customNode" slot-scope="{ node, data }">
+        <span
+          class="nodeEdit"
+          :key="getKey()"
+          contenteditable="true"
+          @keydown.stop
+          @keyup.stop
+          @blur="onBlur($event, node)"
+          v-html="node.label"
+        ></span>
+      </span>
+    </el-tree>
  </Sidebar>
 </template>

 <script>
 import Sidebar from './Sidebar'
+import { mapState } from 'vuex'

 /**
 * @Author: 王林
@@ -17,28 +36,97 @@ export default {
  components: {
    Sidebar
  },
+  props: {
+    mindMap: {
+      type: Object
+    }
+  },
  data() {
    return {
      data: [],
      defaultProps: {
        label(data) {
-          return data.data.text
+          return data.data.text.replaceAll(/\n/g, '</br>')
        }
      }
    }
  },
+  computed: {
+    ...mapState(['activeSidebar'])
+  },
+  watch: {
+    activeSidebar(val) {
+      if (val === 'outline') {
+        this.$refs.sidebar.show = true
+      } else {
+        this.$refs.sidebar.show = false
+      }
+    }
+  },
  created() {
    this.$bus.$on('data_change', data => {
-      this.data = [data]
-    })
-    this.$bus.$on('showOutline', () => {
-      this.$refs.sidebar.show = false
-      this.$nextTick(() => {
-        this.$refs.sidebar.show = true
-      })
+      this.data = [this.mindMap.renderer.renderTree]
    })
+  },
+  methods: {
+    onBlur(e, node) {
+      node.data._node.setText(e.target.innerText)
+    },
+
+    getKey() {
+      return Math.random()
+    }
  }
 }
 </script>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.customNode {
+  width: 100%;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 7px;
+    background-color: rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: none;
+    background: transparent;
+    display: none;
+  }
+
+  .nodeEdit {
+    outline: none;
+  }
+}
+
+.outlineTree {
+  /deep/ .el-tree-node__content {
+    height: auto;
+    margin: 5px 0;
+
+    .el-tree-node__expand-icon.is-leaf {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        content: '';
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background-color: #c0c4cc;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}
+</style>
--- a/web/src/pages/Edit/components/ShortcutKey.vue
+++ b/web/src/pages/Edit/components/ShortcutKey.vue
@@ -22,6 +22,7 @@
 <script>
 import Sidebar from './Sidebar'
 import { shortcutKeyList } from '@/config'
+import { mapState } from 'vuex'

 /**
 * @Author: 王林
@@ -37,17 +38,20 @@ export default {
    return {}
  },
  computed: {
+    ...mapState(['activeSidebar']),
+
    shortcutKeyList() {
      return shortcutKeyList[this.$i18n.locale] || shortcutKeyList.zh
    }
  },
-  created() {
-    this.$bus.$on('showShortcutKey', () => {
-      this.$refs.sidebar.show = false
-      this.$nextTick(() => {
+  watch: {
+    activeSidebar(val) {
+      if (val === 'shortcutKey') {
        this.$refs.sidebar.show = true
-      })
-    })
+      } else {
+        this.$refs.sidebar.show = false
+      }
+    }
  }
 }
 </script>
--- a/web/src/pages/Edit/components/Sidebar.vue
+++ b/web/src/pages/Edit/components/Sidebar.vue
@@ -5,7 +5,7 @@
    :class="{ show: show }"
    :style="{ zIndex: zIndex }"
  >
-    <span class="closeBtn el-icon-close" @click="show = false"></span>
+    <span class="closeBtn el-icon-close" @click="close"></span>
    <div class="sidebarHeader" v-if="title">
      {{ title }}
    </div>
@@ -17,6 +17,7 @@

 <script>
 import { store } from '@/config'
+import { mapState, mapMutations } from 'vuex'

 /**
 * @Author: 王林
@@ -43,6 +44,14 @@ export default {
        this.zIndex = store.sidebarZIndex++
      }
    }
+  },
+  methods: {
+    ...mapMutations(['setActiveSidebar']),
+
+    close() {
+      this.show = false
+      this.setActiveSidebar('')
+    }
  }
 }
 </script>
--- a/web/src/pages/Edit/components/SidebarTrigger.vue
+++ b/web/src/pages/Edit/components/SidebarTrigger.vue
@@ -0,0 +1,107 @@
+<template>
+  <div
+    class="sidebarTriggerContainer"
+    @click.stop
+    :class="{ show: activeSidebar }"
+  >
+    <div class="trigger">
+      <div
+        class="triggerItem"
+        v-for="item in triggerList"
+        :key="item.value"
+        :class="{ active: activeSidebar === item.value }"
+        @click="trigger(item)"
+      >
+        <div class="triggerIcon iconfont" :class="[item.icon]"></div>
+        <div class="triggerName">{{ item.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import { sidebarTriggerList } from '@/config'
+
+/**
+ * @Author: 王林
+ * @Date: 2021-06-24 22:54:25
+ * @Desc: 侧边栏触发器
+ */
+export default {
+  name: 'SidebarTrigger',
+  data() {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    ...mapState(['activeSidebar']),
+
+    triggerList() {
+      return sidebarTriggerList[this.$i18n.locale] || sidebarTriggerList.zh
+    }
+  },
+  methods: {
+    ...mapMutations(['setActiveSidebar']),
+
+    trigger(item) {
+      this.setActiveSidebar(item.value)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.sidebarTriggerContainer {
+  position: fixed;
+  right: 0px;
+  margin-top: 110px;
+  transition: all 0.3s;
+  top: 50%;
+  transform: translateY(-50%);
+
+  &.show {
+    right: 305px;
+  }
+
+  .trigger {
+    width: 60px;
+    border-color: #eee;
+    background-color: #fff;
+    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
+    border-radius: 6px;
+    overflow: hidden;
+
+    .triggerItem {
+      height: 60px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      color: #464646;
+      user-select: none;
+      white-space: nowrap;
+
+      &:hover {
+        background-color: #ededed;
+      }
+
+      &.active {
+        color: #409eff;
+        font-weight: bold;
+      }
+
+      .triggerIcon {
+        font-size: 18px;
+        margin-bottom: 5px;
+      }
+
+      .triggerName {
+        font-size: 13px;
+      }
+    }
+  }
+}
+</style>
--- a/web/src/pages/Edit/components/Structure.vue
+++ b/web/src/pages/Edit/components/Structure.vue
@@ -21,6 +21,7 @@
 import Sidebar from './Sidebar'
 import { layoutList } from 'simple-mind-map/src/utils/constant'
 import { storeConfig } from '@/api'
+import { mapState } from 'vuex'

 /**
 * @Author: 王林
@@ -43,14 +44,18 @@ export default {
      layout: ''
    }
  },
-  created() {
-    this.$bus.$on('showStructure', () => {
-      this.$refs.sidebar.show = false
-      this.$nextTick(() => {
+  computed: {
+    ...mapState(['activeSidebar'])
+  },
+  watch: {
+    activeSidebar(val) {
+      if (val === 'structure') {
        this.layout = this.mindMap.getLayout()
        this.$refs.sidebar.show = true
-      })
-    })
+      } else {
+        this.$refs.sidebar.show = false
+      }
+    }
  },
  methods: {
    /**
--- a/web/src/pages/Edit/components/Style.vue
+++ b/web/src/pages/Edit/components/Style.vue
@@ -1,6 +1,6 @@
 <template>
  <Sidebar ref="sidebar" :title="$t('style.title')">
-    <div class="styleBox">
+    <div class="styleBox" v-if="activeNodes.length > 0">
      <el-tabs class="tab" v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane :label="$t('style.normal')" name="normal"></el-tab-pane>
        <el-tab-pane :label="$t('style.active')" name="active"></el-tab-pane>
@@ -367,6 +367,10 @@
        </div>
      </div>
    </div>
+    <div class="tipBox" v-else>
+      <div class="tipIcon iconfont icontianjiazijiedian"></div>
+      <div class="tipText">请选择一个节点</div>
+    </div>
  </Sidebar>
 </template>

@@ -383,6 +387,7 @@ import {
  shapeList
 } from '@/config'
 import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
+import { mapState } from 'vuex'

 /**
 * @Author: 王林
@@ -429,6 +434,8 @@ export default {
    }
  },
  computed: {
+    ...mapState(['activeSidebar']),
+
    fontFamilyList() {
      return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
    },
@@ -439,19 +446,35 @@ export default {
      return shapeList[this.$i18n.locale] || shapeList.zh
    }
  },
+  watch: {
+    activeSidebar(val) {
+      if (val === 'nodeStyle') {
+        this.$refs.sidebar.show = true
+      } else {
+        this.$refs.sidebar.show = false
+      }
+    }
+  },
  created() {
-    this.$bus.$on('node_active', (...args) => {
-      if (this.$refs.sidebar) this.$refs.sidebar.show = false
+    this.$bus.$on('node_active', this.onNodeActive)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_active', this.onNodeActive)
+  },
+  methods: {
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:16:21
+     * @Desc: 监听节点激活事件
+     */
+    onNodeActive(...args) {
      this.$nextTick(() => {
        this.activeTab = 'normal'
        this.activeNodes = args[1]
-        if (this.$refs.sidebar)
-          this.$refs.sidebar.show = this.activeNodes.length > 0
        this.initNodeStyle()
      })
-    })
-  },
-  methods: {
+    },
+
    /**
     * @Author: 王林
     * @Date: 2021-05-05 11:42:32
@@ -606,6 +629,20 @@ export default {
  }
 }

+.tipBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+
+  .tipIcon {
+    font-size: 100px;
+  }
+}
+
 .sidebarContent {
  padding: 20px;
  padding-top: 10px;
--- a/web/src/pages/Edit/components/Theme.vue
+++ b/web/src/pages/Edit/components/Theme.vue
@@ -21,6 +21,7 @@
 import Sidebar from './Sidebar'
 import { themeList } from 'simple-mind-map/src/utils/constant'
 import { storeConfig } from '@/api'
+import { mapState } from 'vuex'

 /**
 * @Author: 王林
@@ -43,14 +44,18 @@ export default {
      theme: ''
    }
  },
-  created() {
-    this.$bus.$on('showTheme', () => {
-      this.$refs.sidebar.show = false
-      this.$nextTick(() => {
+  computed: {
+    ...mapState(['activeSidebar'])
+  },
+  watch: {
+    activeSidebar(val) {
+      if (val === 'theme') {
        this.theme = this.mindMap.getTheme()
        this.$refs.sidebar.show = true
-      })
-    })
+      } else {
+        this.$refs.sidebar.show = false
+      }
+    }
  },
  methods: {
    /**
--- a/web/src/pages/Edit/components/Toolbar.vue
+++ b/web/src/pages/Edit/components/Toolbar.vue
@@ -114,25 +114,6 @@
          <span class="text">{{ $t('toolbar.summary') }}</span>
        </div>
      </div>
-      <!-- 通用操作 -->
-      <div class="toolbarBlock">
-        <div class="toolbarBtn" @click="$bus.$emit('showOutline')">
-          <span class="icon iconfont iconfuhao-dagangshu"></span>
-          <span class="text">{{ $t('toolbar.displayOutline') }}</span>
-        </div>
-        <div class="toolbarBtn" @click="$bus.$emit('showBaseStyle')">
-          <span class="icon iconfont iconyangshi"></span>
-          <span class="text">{{ $t('toolbar.baseStyle') }}</span>
-        </div>
-        <div class="toolbarBtn" @click="$bus.$emit('showTheme')">
-          <span class="icon iconfont iconjingzi"></span>
-          <span class="text">{{ $t('toolbar.theme') }}</span>
-        </div>
-        <div class="toolbarBtn" @click="$bus.$emit('showStructure')">
-          <span class="icon iconfont iconjiegou"></span>
-          <span class="text">{{ $t('toolbar.strusture') }}</span>
-        </div>
-      </div>
      <!-- 导出 -->
      <div class="toolbarBlock">
        <div class="toolbarBtn" @click="createNewLocalFile">
@@ -155,10 +136,6 @@
          <span class="icon iconfont iconexport"></span>
          <span class="text">{{ $t('toolbar.export') }}</span>
        </div>
-        <div class="toolbarBtn" @click="$bus.$emit('showShortcutKey')">
-          <span class="icon iconfont iconjianpan"></span>
-          <span class="text">{{ $t('toolbar.shortcutKey') }}</span>
-        </div>
      </div>
    </div>
    <NodeImage></NodeImage>
@@ -236,24 +213,58 @@ export default {
    }
  },
  created() {
-    this.$bus.$on('mode_change', mode => {
+    this.$bus.$on('mode_change', this.onModeChange)
+    this.$bus.$on('node_active', this.onNodeActive)
+    this.$bus.$on('back_forward', this.onBackForward)
+    this.$bus.$on('write_local_file', this.onWriteLocalFile)
+  },
+  beforeDestroy() {
+    this.$bus.$off('mode_change', this.onModeChange)
+    this.$bus.$off('node_active', this.onNodeActive)
+    this.$bus.$off('back_forward', this.onBackForward)
+    this.$bus.$off('write_local_file', this.onWriteLocalFile)
+  },
+  methods: {
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:17:40
+     * @Desc: 监听模式切换
+     */
+    onModeChange(mode) {
      this.readonly = mode === 'readonly'
-    })
-    this.$bus.$on('node_active', (...args) => {
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:18:06
+     * @Desc: 监听节点激活
+     */
+    onNodeActive(...args) {
      this.activeNodes = args[1]
-    })
-    this.$bus.$on('back_forward', (index, len) => {
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:18:31
+     * @Desc: 监听前进后退
+     */
+    onBackForward(index, len) {
      this.backEnd = index <= 0
      this.forwardEnd = index >= len - 1
-    })
-    this.$bus.$on('write_local_file', content => {
+    },
+
+    /**
+     * @Author: 王林25
+     * @Date: 2022-11-14 19:19:14
+     * @Desc: 监听本地文件读写
+     */
+    onWriteLocalFile(content) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.writeLocalFile(content)
      }, 1000)
-    })
-  },
-  methods: {
+    },
+
    /**
     * @Author: 王林
     * @Date: 2022-09-24 15:40:09
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -1,13 +1,19 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import exampleData from 'simple-mind-map/example/exampleData'
+import { storeLocalConfig } from '@/api'

 Vue.use(Vuex)

 const store = new Vuex.Store({
  state: {
    mindMapData: null, // 思维导图数据
-    isHandleLocalFile: false // 是否操作的是本地文件
+    isHandleLocalFile: false, // 是否操作的是本地文件
+    localConfig: {
+      // 本地配置
+      isZenMode: false // 是否是禅模式
+    },
+    activeSidebar: '' // 当前显示的侧边栏
  },
  mutations: {
    /**
@@ -27,6 +33,30 @@ const store = new Vuex.Store({
     */
    setIsHandleLocalFile(state, data) {
      state.isHandleLocalFile = data
+    },
+
+    /**
+     * javascript comment
+     * @Author: 王林25
+     * @Date: 2022-11-14 18:42:47
+     * @Desc: 设置本地配置
+     */
+    setLocalConfig(state, data) {
+      state.localConfig = {
+        ...state.localConfig,
+        ...data
+      }
+      storeLocalConfig(state.localConfig)
+    },
+
+    /**
+     * javascript comment
+     * @Author: 王林25
+     * @Date: 2022-11-15 19:25:26
+     * @Desc: 设置当前显示的侧边栏
+     */
+    setActiveSidebar(state, data) {
+      state.activeSidebar = data
    }
  },
  actions: {
Author	SHA1	Message	Date
wanglin25	04001fd181	'打包'	2022-12-09 16:56:28 +08:00
wanglin25	7fc42879c7	'新增键盘导航，即通过方向键来切换激活的节点'	2022-12-09 16:53:42 +08:00
wanglin25	c4c9f9421c	支持在大纲直接编辑节点文本内容	2022-12-08 09:19:47 +08:00
wanglin25	4b246f7106	打包	2022-11-16 08:59:13 +08:00
wanglin25	621e62af4c	优化侧边栏显示和隐藏方式	2022-11-15 20:00:03 +08:00
wanglin25	3df6538c86	优化备注显示	2022-11-14 19:59:21 +08:00
wanglin25	fea7d32c97	新增禅模式	2022-11-14 19:25:25 +08:00