feat(tree): 点击显示当前行路径

src/components/tree/CustomTree.vue

@@ -9,11 +9,23 @@ defineProps({
     default: () => {}
   }
 })
+
+const emit = defineEmits(['nodeClick'])
+
+function nodeClick(node) {
+  emit('nodeClick', node)
+}
 </script>
 
 <template>
   <el-scrollbar>
-    <vue-json-pretty class="custom-tree" :data="data" :showIcon="true" :showLineNumber="true" />
+    <vue-json-pretty
+      class="custom-tree"
+      :data="data"
+      :showIcon="true"
+      :showLineNumber="true"
+      @nodeClick="nodeClick"
+    />
   </el-scrollbar>
 </template>
 

src/views/editor/EditorView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, toRaw } from 'vue'
 import TopTool from './top-tool'
 import BottomTool from './bottom-tool'
 import LiveEditor from './live-editor'
@@ -9,23 +9,30 @@ const viewType = ref(1)
 // 是否展开左侧输入框
 const isExpand = ref(true)
 
+const path = ref('')
+
 function selectView(val) {
   viewType.value = val
 }
 
 function toogle(val) {
   isExpand.value = val
 }
+
+function nodeClick(node) {
+  const rawNode = toRaw(node)
+  path.value = rawNode.path
+}
 </script>
 
 <template>
   <div class="flex flex-col h-screen">
     <!-- 工具栏 -->
     <TopTool @selectView="selectView" :viewType="viewType" />
     <!-- 视图 -->
-    <LiveEditor :viewType="viewType" :isExpand="isExpand" />
+    <LiveEditor :viewType="viewType" :isExpand="isExpand" @nodeClick="nodeClick" />
     <!-- 底部工具栏 -->
-    <BottomTool @toogle="toogle" />
+    <BottomTool @toogle="toogle" :path="path" />
   </div>
 </template>
 

src/views/editor/bottom-tool/BottomTool.vue

@@ -2,13 +2,22 @@
   <div class="bottom-tool">
     <div class="flex flex-wrap gap-4 items-center cursor-pointer">
       <IconExpand @click="toogle" />
+      <NodePath :path="path" v-if="path" />
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { IconExpand } from '@/components/icons'
+import NodePath from './NodePath.vue'
+
+defineProps({
+  path: {
+    type: String,
+    default: ''
+  }
+})
 
 const emit = defineEmits(['toogle'])
 

src/views/editor/bottom-tool/NodePath.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="node-path">
+    路径: <span>{{ path }}</span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  path: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style scoped>
+.node-path {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: #4f5660;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>

src/views/editor/live-editor/LiveEditor.vue

@@ -20,7 +20,7 @@
     </template>
     <template v-slot:second>
       <CustomFlow v-if="isGraph" ref="RefCustomFlow" :nodes="nodesList" :edges="edgesList" />
-      <CustomTree v-else :data="treeData" />
+      <CustomTree v-else :data="treeData" @nodeClick="nodeClick" />
     </template>
   </PageSplit>
 </template>
@@ -33,6 +33,8 @@ import PageSplit from 'vue3-page-split'
 import { parser, elkLayout } from '@/utils'
 import 'vue3-page-split/dist/style.css'
 
+const emit = defineEmits(['nodeClick'])
+
 const props = defineProps({
   viewType: {
     type: Number,
@@ -120,6 +122,11 @@ async function init() {
 function changeContent() {
   init()
 }
+
+function nodeClick(node) {
+  emit('nodeClick', node)
+}
+
 init()
 </script>