feat: 菜单节点显示当前文本内容

src/views/editor/components/Tree.vue

@@ -11,6 +11,7 @@
                 :node-props="nodeProps"
                 v-model:selected-keys="treeSelectedKeys"
                 :pattern="searchKey"
+                :render-label="renderLabel"
                 block-line
                 block-node
             />
@@ -20,7 +21,7 @@
 
 <script lang="ts" setup>
 import { treeSelectedKeys, treeRef, searchKey, expandedKeys, treeData } from '../constants/tree'
-import { buildFilteredTree, getAllKeys, nodeProps } from '../functions/tree'
+import { buildFilteredTree, getAllKeys, nodeProps, renderLabel } from '../functions/tree'
 
 const realComposableData = computed(function () {
     if (!searchKey.value) {
@@ -44,6 +45,6 @@ watch(
 <style lang="less" scoped>
 :deep(.n-tree .n-tree-node-content .n-tree-node-content__text) {
     white-space: nowrap;
-    display: flex;
+    display: inline-flex;
 }
 </style>

src/views/editor/functions/index.ts

@@ -46,6 +46,16 @@ export const getKey = (elem: any): string => {
 }
 // 右键
 export const handleContextMenu = (event: MouseEvent) => {
+    const dom = event.target as HTMLElement
+    //递归获取父节点,直到父节点是nodeSet中的数据
+    let parent = dom.parentElement
+    while (parent) {
+        if (nodeSet.includes(parent.tagName as string)) {
+            break
+        }
+        parent = parent.parentElement
+    }
+    console.log(parent)
     dropdownConfig.show = false
     nextTick(() => {
         dropdownConfig.show = true

src/views/editor/functions/tree.ts

@@ -2,7 +2,25 @@ import { TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
 import { setEditorActive } from '.'
 import { editorRef } from '../constants'
 import { TreeOption } from 'naive-ui'
+import { contentHoldNode } from '@/configs/node.config'
 
+export const renderLabel = ({ option }: { option: TreeOption }) => {
+    const container = editorRef.value?.getEditableContainer()
+    const dom = container!.querySelector(`[data-key="${option.key}"]`) as HTMLElement
+    if (contentHoldNode.includes(dom.tagName as string)) {
+        return {
+            default: () => {
+                return [h('span', {}, option.label), h('span', { class: 'text-textColorDisabled ml-[5px]' }, dom.innerText)]
+            }
+        }
+    } else {
+        return {
+            default: () => {
+                return option.label
+            }
+        }
+    }
+}
 //点击节点
 export const nodeProps = ({ option }: { option: TreeOption }) => {
     return {

src/views/editor/index.vue

@@ -65,5 +65,47 @@ onBeforeUnmount(() => {
     // 销毁，并移除 editor
     editor?.destroy()
 })
+
+/*
+ * PRETOPIC
+ * 序号1,2
+ */
+
+/*
+ * LIST1->L1ITEM
+ * 序号A,B
+ */
+
+/*
+ * LIST2->L2ITEM
+ * 序号(1),(2)
+ */
+
+/*
+ * LIST3->L3ITEM
+ * 序号(a),(b)
+ */
+
+/*
+ * TABLE
+ * TGROUP
+ * THEAD->ROW->ENTRY
+ * TBODY->ROW->ENTRY
+ */
+
+/*
+ * UNLIST->UNLITEM
+ * 无序列表
+ */
+
+/*
+ * TOPIC
+ * 序号1,2
+ */
+
+/*
+ * SUBTASK
+ * 序号A,B
+ */
 </script>
 <style src="@wangeditor/editor/dist/css/style.css"></style>