From 3a723a15bfbb6f38669515902ccd90e8832b5fde Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Mon, 14 Nov 2022 19:59:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A4=87=E6=B3=A8=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/Edit/components/Edit.vue        |  7 ++-
 .../Edit/components/NodeNoteContentShow.vue   | 60 ++++++++++++++++---
 2 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index 2db78d76..faf3b1ae 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -11,7 +11,10 @@
     <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>
   </div>
 </template>
@@ -231,7 +234,7 @@ export default {
             this.$bus.$emit('showNoteContent', content, left, top)
           },
           hide: () => {
-            this.$bus.$emit('hideNoteContent')
+            // this.$bus.$emit('hideNoteContent')
           }
         }
       })
diff --git a/web/src/pages/Edit/components/NodeNoteContentShow.vue b/web/src/pages/Edit/components/NodeNoteContentShow.vue
index c8528e34..45067e11 100644
--- 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>