优化侧边栏显示和隐藏方式

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')
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
-      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.woff?t=1545807318834')
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
-      format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
-    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>p,
-.markdown > blockquote,
+.markdown>blockquote,
-.markdown > .highlight,
+.markdown>.highlight,
-.markdown > ol,
+.markdown>ol,
-.markdown > ul {
+.markdown>ul {
   width: 80%;
 }
 
-.markdown ul > li {
+.markdown ul>li {
   list-style: circle;
 }
 
-.markdown > ul li,
+.markdown>ul li,
-.markdown blockquote ul > li {
+.markdown blockquote ul>li {
   margin-left: 20px;
   padding-left: 4px;
 }
 
-.markdown > ul li p,
+.markdown>ul li p,
-.markdown > ol li p {
+.markdown>ol li p {
   margin: 0.6em 0;
 }
 
-.markdown ol > li {
+.markdown ol>li {
   list-style: decimal;
 }
 
-.markdown > ol li,
+.markdown>ol li,
-.markdown blockquote 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 th,
-.markdown > table td {
+.markdown>table td {
   border: 1px solid #e9e9e9;
   padding: 8px 16px;
   text-align: left;
 }
 
-.markdown > table th {
+.markdown>table th {
-  background: #f7f7f7;
+  background: #F7F7F7;
 }
 
 .markdown blockquote {
@@ -321,11 +318,12 @@
   display: inline-block;
 }
 
-.markdown > br,
+.markdown>br,
-.markdown > p > 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-'],
+code[class*="language-"],
-pre[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,
-pre[class*='language-'] ::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
-code[class*='language-']::-moz-selection,
+code[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,
-pre[class*='language-'] ::selection,
+pre[class*="language-"] ::selection,
-code[class*='language-']::selection,
+code[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-'],
+:not(pre)>code[class*="language-"],
-pre[class*='language-'] {
+pre[class*="language-"] {
   background: #f5f2f0;
 }
 
 /* Inline code */
-:not(pre) > code[class*='language-'] {
+:not(pre)>code[class*="language-"] {
-  padding: 0.1em;
+  padding: .1em;
-  border-radius: 0.3em;
+  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,

web/src/assets/icon-font/iconfont.css

@@ -1,186 +1,195 @@
 @font-face {
-  font-family: 'iconfont'; /* Project id 2479351 */
+  font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1664005697217') format('woff2'),
+  src: url('iconfont.woff2?t=1668512547595') format('woff2'),
-    url('iconfont.woff?t=1664005697217') format('woff'),
+       url('iconfont.woff?t=1668512547595') format('woff'),
-    url('iconfont.ttf?t=1664005697217') format('truetype');
+       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";
 }
+

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": "导出",

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'
+  }
+]

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
 }

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'
+  }
+]

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() {
+  watch: {
-    this.$bus.$on('showBaseStyle', () => {
+    activeSidebar(val) {
-      this.$refs.sidebar.show = false
+      if (val === 'baseStyle') {
-      this.$nextTick(() => {
         this.$refs.sidebar.show = true
         this.initStyle()
-      })
+      } else {
-    })
+        this.$refs.sidebar.show = false
+      }
+    }
   },
   methods: {
     /**

web/src/pages/Edit/components/Edit.vue

@@ -16,6 +16,7 @@
       :mindMap="mindMap"
     ></NodeNoteContentShow>
     <NodeImgPreview v-if="mindMap" :mindMap="mindMap"></NodeImgPreview>
+    <SidebarTrigger v-if="!isZenMode"></SidebarTrigger>
   </div>
 </template>
 
@@ -34,6 +35,7 @@ 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'
 
 /**
@@ -55,7 +57,8 @@ export default {
     Contextmenu,
     NodeNoteContentShow,
     Navigator,
-    NodeImgPreview
+    NodeImgPreview,
+    SidebarTrigger
   },
   data() {
     return {

web/src/pages/Edit/components/Outline.vue

@@ -6,6 +6,7 @@
 
 <script>
 import Sidebar from './Sidebar'
+import { mapState } from 'vuex'
 
 /**
  * @Author: 王林
@@ -27,16 +28,22 @@ export default {
       }
     }
   },
+  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
-      })
-    })
   }
 }
 </script>

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() {
+  watch: {
-    this.$bus.$on('showShortcutKey', () => {
+    activeSidebar(val) {
-      this.$refs.sidebar.show = false
+      if (val === 'shortcutKey') {
-      this.$nextTick(() => {
         this.$refs.sidebar.show = true
-      })
+      } else {
-    })
+        this.$refs.sidebar.show = false
+      }
+    }
   }
 }
 </script>

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>

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>

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() {
+  computed: {
-    this.$bus.$on('showStructure', () => {
+    ...mapState(['activeSidebar'])
-      this.$refs.sidebar.show = false
+  },
-      this.$nextTick(() => {
+  watch: {
+    activeSidebar(val) {
+      if (val === 'structure') {
         this.layout = this.mindMap.getLayout()
         this.$refs.sidebar.show = true
-      })
+      } else {
-    })
+        this.$refs.sidebar.show = false
+      }
+    }
   },
   methods: {
     /**

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,6 +446,15 @@ 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', this.onNodeActive)
   },
@@ -452,12 +468,9 @@ export default {
      * @Desc: 监听节点激活事件
      */
     onNodeActive(...args) {
-      if (this.$refs.sidebar) this.$refs.sidebar.show = false
       this.$nextTick(() => {
         this.activeTab = 'normal'
         this.activeNodes = args[1]
-        if (this.$refs.sidebar)
-          this.$refs.sidebar.show = this.activeNodes.length > 0
         this.initNodeStyle()
       })
     },
@@ -616,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;

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() {
+  computed: {
-    this.$bus.$on('showTheme', () => {
+    ...mapState(['activeSidebar'])
-      this.$refs.sidebar.show = false
+  },
-      this.$nextTick(() => {
+  watch: {
+    activeSidebar(val) {
+      if (val === 'theme') {
         this.theme = this.mindMap.getTheme()
         this.$refs.sidebar.show = true
-      })
+      } else {
-    })
+        this.$refs.sidebar.show = false
+      }
+    }
   },
   methods: {
     /**

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>

web/src/store.js

@@ -12,7 +12,8 @@ const store = new Vuex.Store({
     localConfig: {
       // 本地配置
       isZenMode: false // 是否是禅模式
-    }
+    },
+    activeSidebar: '' // 当前显示的侧边栏
   },
   mutations: {
     /**
@@ -46,6 +47,16 @@ const store = new Vuex.Store({
         ...data
       }
       storeLocalConfig(state.localConfig)
+    },
+
+    /**
+     * javascript comment
+     * @Author: 王林25
+     * @Date: 2022-11-15 19:25:26
+     * @Desc: 设置当前显示的侧边栏
+     */
+    setActiveSidebar(state, data) {
+      state.activeSidebar = data
     }
   },
   actions: {