Demo：优化大纲编辑

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

@@ -20,7 +20,7 @@
       class="customNode"
       slot-scope="{ node, data }"
       :data-id="data.uid"
-      @click="onClick($event, data)"
+      @click="onClick(data)"
     >
       <span
         class="nodeEdit"
@@ -63,7 +63,9 @@ export default {
       notHandleDataChange: false,
       handleNodeTreeRenderEnd: false,
       beInsertNodeUid: '',
-      isInTreArea: false
+      insertType: '',
+      isInTreArea: false,
+      isAfterCreateNewNode: false
     }
   },
   computed: {
@@ -72,18 +74,27 @@ export default {
   created() {
     window.addEventListener('keydown', this.onKeyDown)
     this.$bus.$on('data_change', () => {
-      // 激活节点会让当前大纲失去焦点
+      // 在大纲里操作节点时不要响应该事件，否则会重新刷新树
       if (this.notHandleDataChange) {
         this.notHandleDataChange = false
         return
       }
+      if (this.isAfterCreateNewNode) {
+        this.isAfterCreateNewNode = false
+        return
+      }
       this.refresh()
     })
     this.$bus.$on('node_tree_render_end', () => {
-      // 激活节点会让当前大纲失去焦点
+      // 当前存在未完成的节点插入操作
+      if (this.insertType) {
+        this[this.insertType]()
+        this.insertType = ''
+        return
+      }
+      // 插入了新节点后需要做一些操作
       if (this.handleNodeTreeRenderEnd) {
         this.handleNodeTreeRenderEnd = false
-        this.notHandleDataChange = false
         this.refresh()
         this.$nextTick(() => {
           this.afterCreateNewNode()
@@ -125,12 +136,14 @@ export default {
       // 如果是新插入节点，那么需要手动高亮该节点、定位该节点及聚焦
       let id = this.beInsertNodeUid
       if (id && this.$refs.tree) {
+        try {
+          this.isAfterCreateNewNode = true
           // 高亮树节点
           this.$refs.tree.setCurrentKey(id)
           let node = this.$refs.tree.getNode(id)
           this.onCurrentChange(node.data)
           // 定位该节点
-        this.onClick(null, node.data)
+          this.onClick(node.data)
           // 聚焦该树节点的编辑框
           const el = document.querySelector(
             `.customNode[data-id="${id}"] .nodeEdit`
@@ -144,7 +157,11 @@ export default {
             let offsetTop = el.offsetTop
             this.$emit('scrollTo', offsetTop)
           }
+        } catch (error) {
+          console.log(error)
         }
+      }
+      this.beInsertNodeUid = ''
     },
 
     // 根节点不允许拖拽
@@ -154,9 +171,16 @@ export default {
 
     // 失去焦点更新节点文本
     onBlur(e, node) {
+      // 节点数据没有修改
       if (node.data.textCache === e.target.innerHTML) {
+        // 如果存在未执行的插入新节点操作，那么直接执行
+        if (this.insertType) {
+          this[this.insertType]()
+          this.insertType = ''
+        }
         return
       }
+      // 否则插入新节点操作需要等待当前修改事件渲染完成后再执行
       const richText = node.data.data.richText
       const text = richText ? e.target.innerHTML : e.target.innerText
       const targetNode = this.mindMap.renderer.findNodeByUid(node.data.uid)
@@ -193,11 +217,13 @@ export default {
     onNodeInputKeydown(e) {
       if (e.keyCode === 13 && !e.shiftKey) {
         e.preventDefault()
-        this.insertNode()
+        this.insertType = 'insertNode'
+        e.target.blur()
       }
       if (e.keyCode === 9) {
         e.preventDefault()
-        this.insertChildNode()
+        this.insertType = 'insertChildNode'
+        e.target.blur()
       }
     },
 
@@ -222,13 +248,14 @@ export default {
     },
 
     // 激活当前节点且移动当前节点到画布中间
-    onClick(e, data) {
+    onClick(data) {
       this.notHandleDataChange = true
       const targetNode = this.mindMap.renderer.findNodeByUid(data.uid)
       if (targetNode && targetNode.nodeData.data.isActive) return
       this.mindMap.renderer.textEdit.stopFocusOnNodeActive()
       this.mindMap.execCommand('GO_TARGET_NODE', data.uid, () => {
         this.mindMap.renderer.textEdit.openFocusOnNodeActive()
+        this.notHandleDataChange = false
       })
     },
 

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

@@ -7,10 +7,12 @@
     <div class="closeBtn" @click="onClose">
       <span class="icon iconfont iconguanbi"></span>
     </div>
+    <div class="outlineEditBox" ref="outlineEditBox">
       <div class="outlineEdit">
         <Outline :mindMap="mindMap" @scrollTo="onScrollTo"></Outline>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -48,7 +50,7 @@ export default {
     },
 
     onScrollTo(y) {
-      let container = this.$refs.outlineEditContainer
+      let container = this.$refs.outlineEditBox
       let height = container.offsetHeight
       let top = container.scrollTop
       y += 50
@@ -68,14 +70,12 @@ export default {
   width: 100%;
   height: 100%;
   z-index: 9999;
-  display: flex;
-  justify-content: center;
   background-color: #fff;
-  overflow-y: auto;
+  overflow: hidden;
 
   .closeBtn {
     position: absolute;
-    right: 20px;
+    right: 40px;
     top: 20px;
     cursor: pointer;
 
@@ -84,11 +84,17 @@ export default {
     }
   }
 
+  .outlineEditBox {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    padding: 50px 0;
+
     .outlineEdit {
       width: 1000px;
+      height: 100%;
       height: max-content;
-    overflow: hidden;
+      margin: 0 auto;
-    padding: 50px 0;
 
       /deep/ .customNode {
         .nodeEdit {
@@ -97,4 +103,5 @@ export default {
       }
     }
   }
+}
 </style>