From 39b55b0cd7d14ab3c0a6cbeca74743c1af44aaaf Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Thu, 8 Dec 2022 09:19:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=9C=A8=E5=A4=A7=E7=BA=B2?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E7=BC=96=E8=BE=91=E8=8A=82=E7=82=B9=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/Edit/components/Edit.vue    |  2 +-
 web/src/pages/Edit/components/Outline.vue | 81 +++++++++++++++++++++--
 2 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index 8abb204c..b7f81bd0 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/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>
diff --git a/web/src/pages/Edit/components/Outline.vue b/web/src/pages/Edit/components/Outline.vue
index 14d26731..c7d99372 100644
--- a/web/src/pages/Edit/components/Outline.vue
+++ b/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>