支持在大纲直接编辑节点文本内容

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

@@ -4,7 +4,7 @@
     <Count v-if="!isZenMode"></Count>
     <Navigator :mindMap="mindMap"></Navigator>
     <NavigatorToolbar :mindMap="mindMap" v-if="!isZenMode"></NavigatorToolbar>
-    <Outline></Outline>
+    <Outline :mindMap="mindMap"></Outline>
     <Style v-if="!isZenMode"></Style>
     <BaseStyle :data="mindMapData" :mindMap="mindMap"></BaseStyle>
     <Theme :mindMap="mindMap"></Theme>

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

@@ -1,6 +1,16 @@
 <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>
 
@@ -18,12 +28,17 @@ 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>')
         }
       }
     }
@@ -42,10 +57,68 @@ export default {
   },
   created() {
     this.$bus.$on('data_change', data => {
-      this.data = [data]
+      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>