diff --git a/web/src/pages/Edit/components/AssociativeLineStyle.vue b/web/src/pages/Edit/components/AssociativeLineStyle.vue
index f67c5cce..8c177cbb 100644
--- a/web/src/pages/Edit/components/AssociativeLineStyle.vue
+++ b/web/src/pages/Edit/components/AssociativeLineStyle.vue
@@ -298,7 +298,9 @@ export default {
     },
 
     associativeLineDeactivate() {
-      this.setActiveSidebar('')
+      if (this.activeSidebar === 'associativeLineStyle') {
+        this.setActiveSidebar(null)
+      }
       this.activeLineNode = null
       this.activeLineToNode = null
       this.style = {
diff --git a/web/src/pages/Edit/components/LinkNodeSelect.vue b/web/src/pages/Edit/components/LinkNodeSelect.vue
index e35a5693..f8e1e5f7 100644
--- a/web/src/pages/Edit/components/LinkNodeSelect.vue
+++ b/web/src/pages/Edit/components/LinkNodeSelect.vue
@@ -172,3 +172,6 @@ export default {
   overflow: auto;
 }
 </style>
+<style lang="less" scoped>
+@import url('../../../style/outlineTree.less');
+</style>
diff --git a/web/src/pages/Edit/components/NodeIconToolbar.vue b/web/src/pages/Edit/components/NodeIconToolbar.vue
index 6a2c993a..b4c10e79 100644
--- a/web/src/pages/Edit/components/NodeIconToolbar.vue
+++ b/web/src/pages/Edit/components/NodeIconToolbar.vue
@@ -76,7 +76,7 @@ export default {
             this.updatePos()
             this.showNodeIconToolbar = true
             if (this.activeSidebar === 'nodeIconSidebar') {
-                this.setActiveSidebar('')
+                this.setActiveSidebar(null)
             }
         },
 
diff --git a/web/src/pages/Edit/components/NodeNoteSidebar.vue b/web/src/pages/Edit/components/NodeNoteSidebar.vue
index eaca4a7e..1b391916 100644
--- a/web/src/pages/Edit/components/NodeNoteSidebar.vue
+++ b/web/src/pages/Edit/components/NodeNoteSidebar.vue
@@ -55,6 +55,9 @@ export default {
     ...mapMutations(['setActiveSidebar']),
 
     onNodeActive(...args) {
+      if (this.activeSidebar !== 'noteSidebar') {
+        return
+      }
       const nodes = [...args[1]]
       if (nodes.length > 0) {
         if (nodes[0] !== this.node) {
diff --git a/web/src/pages/Edit/components/NodeOuterFrame.vue b/web/src/pages/Edit/components/NodeOuterFrame.vue
index 51f15284..8e3f9813 100644
--- a/web/src/pages/Edit/components/NodeOuterFrame.vue
+++ b/web/src/pages/Edit/components/NodeOuterFrame.vue
@@ -435,19 +435,11 @@ export default {
   },
   created() {
     this.mindMap.on('outer_frame_active', this.onOuterFrameActive)
-    this.mindMap.on('scale', this.hide)
-    this.mindMap.on('translate', this.hide)
-    this.mindMap.on('svg_mousedown', this.hide)
-    this.mindMap.on('expand_btn_click', this.hide)
     this.mindMap.on('outer_frame_delete', this.hide)
     this.mindMap.on('outer_frame_deactivate', this.hide)
   },
   beforeDestroy() {
     this.mindMap.off('outer_frame_active', this.onOuterFrameActive)
-    this.mindMap.off('scale', this.hide)
-    this.mindMap.off('translate', this.hide)
-    this.mindMap.off('svg_mousedown', this.hide)
-    this.mindMap.off('expand_btn_click', this.hide)
     this.mindMap.off('outer_frame_delete', this.hide)
     this.mindMap.off('outer_frame_deactivate', this.hide)
   },
@@ -510,6 +502,9 @@ export default {
     },
 
     hide() {
+      if (this.activeSidebar !== 'nodeOuterFrameStyle') {
+        return
+      }
       this.setActiveSidebar(null)
     }
   }
diff --git a/web/src/pages/Edit/components/Outline.vue b/web/src/pages/Edit/components/Outline.vue
index 4a91d913..93bc1cce 100644
--- a/web/src/pages/Edit/components/Outline.vue
+++ b/web/src/pages/Edit/components/Outline.vue
@@ -351,67 +351,6 @@ export default {
   }
 }
 </style>
-<style lang="less">
-.outlineTree {
-  &.isDark {
-    background-color: #262a2e;
-
-    .customNode {
-      color: #fff;
-    }
-
-    &.el-tree--highlight-current {
-      /deep/ .el-tree-node.is-current > .el-tree-node__content {
-        background-color: hsla(0, 0%, 100%, 0.05) !important;
-      }
-    }
-
-    /deep/ .el-tree-node__content:hover,
-    .el-upload-list__item:hover {
-      background-color: hsla(0, 0%, 100%, 0.02) !important;
-    }
-
-    /deep/ .el-tree-node__content {
-      .el-tree-node__expand-icon {
-        color: #fff;
-
-        &.is-leaf {
-          &::after {
-            background-color: #fff;
-          }
-        }
-      }
-    }
-  }
-
-  /deep/ .el-tree-node > .el-tree-node__children {
-    overflow: inherit;
-  }
-
-  /deep/ .el-tree-node__content {
-    height: auto;
-    margin: 5px 0;
-
-    .el-tree-node__expand-icon {
-      color: #262a2e;
-
-      &.is-leaf {
-        color: transparent;
-        position: relative;
-
-        &::after {
-          background-color: #262a2e;
-          position: absolute;
-          content: '';
-          width: 5px;
-          height: 5px;
-          border-radius: 50%;
-          left: 10px;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-    }
-  }
-}
+<style lang="less" scoped>
+@import url('../../../style/outlineTree.less');
 </style>
diff --git a/web/src/pages/Edit/components/OutlineEdit.vue b/web/src/pages/Edit/components/OutlineEdit.vue
index 093aff8b..488d810e 100644
--- a/web/src/pages/Edit/components/OutlineEdit.vue
+++ b/web/src/pages/Edit/components/OutlineEdit.vue
@@ -363,3 +363,6 @@ export default {
   }
 }
 </style>
+<style lang="less" scoped>
+@import url('../../../style/outlineTree.less');
+</style>
diff --git a/web/src/pages/Edit/components/OutlineSidebar.vue b/web/src/pages/Edit/components/OutlineSidebar.vue
index 92776093..7415eeb8 100644
--- a/web/src/pages/Edit/components/OutlineSidebar.vue
+++ b/web/src/pages/Edit/components/OutlineSidebar.vue
@@ -71,7 +71,7 @@ export default {
     ...mapMutations(['setIsOutlineEdit', 'setActiveSidebar']),
 
     onChangeToOutlineEdit() {
-      this.setActiveSidebar('')
+      this.setActiveSidebar(null)
       this.setIsOutlineEdit(true)
     },
 
diff --git a/web/src/pages/Edit/components/Sidebar.vue b/web/src/pages/Edit/components/Sidebar.vue
index d760d35a..1ca3ba3d 100644
--- a/web/src/pages/Edit/components/Sidebar.vue
+++ b/web/src/pages/Edit/components/Sidebar.vue
@@ -60,7 +60,7 @@ export default {
 
     close() {
       this.show = false
-      this.setActiveSidebar('')
+      this.setActiveSidebar(null)
     },
 
     getEl() {
diff --git a/web/src/style/outlineTree.less b/web/src/style/outlineTree.less
new file mode 100644
index 00000000..0e761a88
--- /dev/null
+++ b/web/src/style/outlineTree.less
@@ -0,0 +1,62 @@
+.outlineTree {
+  &.isDark {
+    background-color: #262a2e;
+
+    .customNode {
+      color: #fff;
+    }
+
+    &.el-tree--highlight-current {
+      /deep/ .el-tree-node.is-current > .el-tree-node__content {
+        background-color: hsla(0, 0%, 100%, 0.05) !important;
+      }
+    }
+
+    /deep/ .el-tree-node__content:hover,
+    .el-upload-list__item:hover {
+      background-color: hsla(0, 0%, 100%, 0.02) !important;
+    }
+
+    /deep/ .el-tree-node__content {
+      .el-tree-node__expand-icon {
+        color: #fff;
+
+        &.is-leaf {
+          &::after {
+            background-color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  /deep/ .el-tree-node > .el-tree-node__children {
+    overflow: inherit;
+  }
+
+  /deep/ .el-tree-node__content {
+    height: auto;
+    margin: 5px 0;
+
+    .el-tree-node__expand-icon {
+      color: #262a2e;
+
+      &.is-leaf {
+        color: transparent;
+        position: relative;
+
+        &::after {
+          background-color: #262a2e;
+          position: absolute;
+          content: '';
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          left: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+  }
+}