From a3c7bcdc4ac1f5e51225b87fe90cc76ba4286b6c Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Fri, 23 Jan 2026 19:02:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/boardGenerate/index.vue             | 173 +++++++++++-------
 .../nodes/advancedComponents/menuItem.vue     |  60 ++++++
 .../nodes/advancedComponents/menuNode.vue     |  34 +++-
 .../nodes/advancedComponents/tree/index.vue   |  72 ++++++++
 .../advancedComponents/tree/nodes/item.vue    |  76 ++++++++
 .../nodes/advancedComponents/tree/option.vue  | 168 +++++++++++++++++
 .../nodes/advancedComponents/tree/tool.js     |  69 +++++++
 src/views/boardGenerate/tool.js               |  12 +-
 src/views/boardGenerate/view.vue              |   5 +
 src/views/print/index.vue                     |   1 -
 10 files changed, 591 insertions(+), 79 deletions(-)
 create mode 100644 src/views/boardGenerate/nodes/advancedComponents/menuItem.vue
 create mode 100644 src/views/boardGenerate/nodes/advancedComponents/tree/index.vue
 create mode 100644 src/views/boardGenerate/nodes/advancedComponents/tree/nodes/item.vue
 create mode 100644 src/views/boardGenerate/nodes/advancedComponents/tree/option.vue
 create mode 100644 src/views/boardGenerate/nodes/advancedComponents/tree/tool.js

diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue
index 84f3606..bfce25d 100644
--- a/src/views/boardGenerate/index.vue
+++ b/src/views/boardGenerate/index.vue
@@ -408,6 +408,21 @@
               </template>
               <div class="moduleText">菜单</div>
             </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'tree')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <div style="width: 100%;height: 100%;text-align: center">
+                  <svg t="1768964556223" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                       xmlns="http://www.w3.org/2000/svg" p-id="4878" width="30" height="30">
+                    <path
+                      d="M554.666667 682.666667h85.333333v128h-213.333333v-128h85.333333v-128H256v128h85.333333v128H128v-128h85.333333v-170.666667h298.666667V384h-85.333333V256h213.333333v128h-85.333333v128h298.666666v170.666667h85.333334v128h-213.333334v-128h85.333334v-128h-256v128z m42.666666-384h-128v42.666666h128V298.666667zM298.666667 725.333333H170.666667v42.666667h128v-42.666667z m597.333333 0h-128v42.666667h128v-42.666667z m-298.666667 0h-128v42.666667h128v-42.666667z"
+                      fill="#444444" p-id="4879"></path>
+                  </svg>
+                </div>
+              </template>
+              <div class="moduleText">树状图</div>
+            </el-card>
           </div>
         </el-popover>
       </div>
@@ -492,99 +507,99 @@
         >
           <Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" />
 
-          <template #node-area="areaNodeProps">
-            <AreaNode v-bind="areaNodeProps" :pageData="pageData" @resize="(e) => handleResizeStop(e, areaNodeProps)" />
+          <template #node-area="props">
+            <AreaNode v-bind="props" :pageData="pageData" @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-customBoard="customBoardNodeProps">
-            <CustomBoardNode v-bind="customBoardNodeProps" :inputData="getInputData(customBoardNodeProps.id)"
-                             @resize="(e) => handleResizeStop(e, customBoardNodeProps)" />
+          <template #node-customBoard="props">
+            <CustomBoardNode v-bind="props" :inputData="getInputData(props.id)"
+                             @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-customData="customDataNodeProps">
-            <CustomDataNode v-bind="customDataNodeProps" :inputData="getInputData(customDataNodeProps.id)"
-                            @resize="(e) => handleResizeStop(e, customDataNodeProps)" />
+          <template #node-customData="props">
+            <CustomDataNode v-bind="props" :inputData="getInputData(props.id)"
+                            @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-line="lineNodeProps">
-            <LineNode v-bind="lineNodeProps" :inputData="getInputData(lineNodeProps.id)"
-                      @resize="(e) => handleResizeStop(e, lineNodeProps)" />
+          <template #node-line="props">
+            <LineNode v-bind="props" :inputData="getInputData(props.id)"
+                      @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-multiLines="multiLinesNodeProps">
-            <MultiLinesNode v-bind="multiLinesNodeProps" :inputData="getInputData(multiLinesNodeProps.id)"
-                            @resize="(e) => handleResizeStop(e, multiLinesNodeProps)" />
+          <template #node-multiLines="props">
+            <MultiLinesNode v-bind="props" :inputData="getInputData(props.id)"
+                            @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-curve="curveNodeProps">
-            <CurveNode v-bind="curveNodeProps" :inputData="getInputData(curveNodeProps.id)"
-                       @resize="(e) => handleResizeStop(e, curveNodeProps)" />
+          <template #node-curve="props">
+            <CurveNode v-bind="props" :inputData="getInputData(props.id)"
+                       @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-multiCurves="multiCurvesNodeProps">
-            <MultiCurvesNode v-bind="multiCurvesNodeProps" :inputData="getInputData(multiCurvesNodeProps.id)"
-                             @resize="(e) => handleResizeStop(e, multiCurvesNodeProps)" />
+          <template #node-multiCurves="props">
+            <MultiCurvesNode v-bind="props" :inputData="getInputData(props.id)"
+                             @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-lineBar="lineBarNodeProps">
-            <LineBarNode v-bind="lineBarNodeProps" :inputData="getInputData(lineBarNodeProps.id)"
-                         @resize="(e) => handleResizeStop(e, lineBarNodeProps)" />
+          <template #node-lineBar="props">
+            <LineBarNode v-bind="props" :inputData="getInputData(props.id)"
+                         @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-bar="barNodeProps">
-            <BarNode v-bind="barNodeProps" :inputData="getInputData(barNodeProps.id)"
-                     @resize="(e) => handleResizeStop(e, barNodeProps)" />
+          <template #node-bar="props">
+            <BarNode v-bind="props" :inputData="getInputData(props.id)"
+                     @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-backgroundBar="backgroundBarNodeProps">
-            <BackgroundBarNode v-bind="backgroundBarNodeProps" :inputData="getInputData(backgroundBarNodeProps.id)"
-                               @resize="(e) => handleResizeStop(e, backgroundBarNodeProps)" />
+          <template #node-backgroundBar="props">
+            <BackgroundBarNode v-bind="props" :inputData="getInputData(props.id)"
+                               @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-multiBars="multiBarsNodeProps">
-            <MultiBarsNode v-bind="multiBarsNodeProps" :inputData="getInputData(multiBarsNodeProps.id)"
-                           @resize="(e) => handleResizeStop(e, multiBarsNodeProps)" />
+          <template #node-multiBars="props">
+            <MultiBarsNode v-bind="props" :inputData="getInputData(props.id)"
+                           @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-pie="pieNodeProps">
-            <PieNode v-bind="pieNodeProps" :inputData="getInputData(pieNodeProps.id)"
-                     @resize="(e) => handleResizeStop(e, pieNodeProps)" />
+          <template #node-pie="props">
+            <PieNode v-bind="props" :inputData="getInputData(props.id)"
+                     @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-annular="annularNodeProps">
-            <AnnularNode v-bind="annularNodeProps" :inputData="getInputData(annularNodeProps.id)"
-                         @resize="(e) => handleResizeStop(e, annularNodeProps)" />
+          <template #node-annular="props">
+            <AnnularNode v-bind="props" :inputData="getInputData(props.id)"
+                         @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-radar="radarNodeProps">
-            <RadarNode v-bind="radarNodeProps" :inputData="getInputData(radarNodeProps.id)"
-                       @resize="(e) => handleResizeStop(e, radarNodeProps)" />
+          <template #node-radar="props">
+            <RadarNode v-bind="props" :inputData="getInputData(props.id)"
+                       @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-dashboard="dashboardNodeProps">
-            <DashboardNode v-bind="dashboardNodeProps" :inputData="getInputData(dashboardNodeProps.id)"
-                           @resize="(e) => handleResizeStop(e, dashboardNodeProps)" />
+          <template #node-dashboard="props">
+            <DashboardNode v-bind="props" :inputData="getInputData(props.id)"
+                           @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-nightingaleRoseDiagram="nightingaleRoseDiagramNodeProps">
-            <NightingaleRoseDiagramNode v-bind="nightingaleRoseDiagramNodeProps"
-                                        :inputData="getInputData(nightingaleRoseDiagramNodeProps.id)"
-                                        @resize="(e) => handleResizeStop(e, nightingaleRoseDiagramNodeProps)" />
+          <template #node-props="props">
+            <NightingaleRoseDiagramNode v-bind="props"
+                                        :inputData="getInputData(props.id)"
+                                        @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-carousel="carouselNodeProps">
-            <CarouselNode v-bind="carouselNodeProps" :inputData="getInputData(carouselNodeProps.id)"
-                          @resize="(e) => handleResizeStop(e, carouselNodeProps)" />
+          <template #node-carousel="props">
+            <CarouselNode v-bind="props" :inputData="getInputData(props.id)"
+                          @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-data="dataNodeProps">
-            <DataNode v-bind="dataNodeProps" :inputData="getInputData(dataNodeProps.id)"
-                      @resize="(e) => handleResizeStop(e, dataNodeProps)" />
+          <template #node-data="props">
+            <DataNode v-bind="props" :inputData="getInputData(props.id)"
+                      @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
-          <template #node-text="textNodeProps">
-            <TextNode v-bind="textNodeProps" :inputData="getInputData(textNodeProps.id)"
-                      @resize="(e) => handleResizeStop(e, textNodeProps)" />
+          <template #node-text="props">
+            <TextNode v-bind="props" :inputData="getInputData(props.id)"
+                      @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-img="imgNodeProps">
@@ -627,9 +642,9 @@
                         @resize="(e) => handleResizeStop(e, selectNodeProps)" />
           </template>
 
-          <template #node-time="timeNodeProps">
-            <TimeNode v-bind="timeNodeProps" :inputData="getInputData(timeNodeProps.id)"
-                      @resize="(e) => handleResizeStop(e, timeNodeProps)" />
+          <template #node-time="props">
+            <TimeNode v-bind="props" :inputData="getInputData(props.id)"
+                      @resize="(e) => handleResizeStop(e, props)" />
           </template>
 
           <template #node-map="mapNodeProps">
@@ -662,9 +677,13 @@
                             @resize="(e) => handleResizeStop(e, paginationNodeProps)" />
           </template>
 
-          <template #node-menu="menuNodeProps">
-            <MenuNode v-bind="menuNodeProps" :inputData="getInputData(menuNodeProps.id)"
-                            @resize="(e) => handleResizeStop(e, menuNodeProps)" />
+          <template #node-menu="props">
+            <MenuNode v-bind="props" :inputData="getInputData(props.id)"
+                      @resize="(e) => handleResizeStop(e, props)" />
+          </template>
+          <template #node-tree="props">
+            <TreeNode v-bind="props" :inputData="getInputData(props.id)"
+                      @resize="(e) => handleResizeStop(e, props)" />
           </template>
         </VueFlow>
       </FlowRuler>
@@ -988,6 +1007,12 @@
                 <el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
                   <el-input v-model="nodeAttrForm.field" />
                 </el-form-item>
+                <el-form-item label="菜单显示字段名" v-if="Object.keys(nodeAttrForm).includes('menuField')">
+                  <el-input v-model="nodeAttrForm.menuField" />
+                </el-form-item>
+                <el-form-item label="菜单唯一字段名" v-if="Object.keys(nodeAttrForm).includes('activeField')">
+                  <el-input v-model="nodeAttrForm.activeField" />
+                </el-form-item>
                 <el-form-item label="每页个数字段" v-if="Object.keys(nodeAttrForm).includes('pageSizeField')">
                   <el-input v-model="nodeAttrForm.pageSizeField" />
                 </el-form-item>
@@ -1037,6 +1062,9 @@
                 <el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')">
                   <el-color-picker v-model="nodeAttrForm.color" show-alpha />
                 </el-form-item>
+                <el-form-item label="选中文字颜色" v-if="Object.keys(nodeAttrForm).includes('activeColor')">
+                  <el-color-picker v-model="nodeAttrForm.activeColor" show-alpha />
+                </el-form-item>
                 <el-form-item label="背景颜色" v-if="Object.keys(nodeAttrForm).includes('backgroundColor')">
                   <el-color-picker v-model="nodeAttrForm.backgroundColor" show-alpha />
                 </el-form-item>
@@ -1282,6 +1310,14 @@
                 <el-form-item label="数字数量" v-if="Object.keys(nodeAttrForm).includes('numQuantity')">
                   <el-input-number :min="1" :controls="false" v-model="nodeAttrForm.numQuantity" autocomplete="off" />
                 </el-form-item>
+                <el-form-item label="树设置" v-if="Object.keys(nodeAttrForm).includes('treeOptions')">
+                  <el-button class="optionsBtn" plain @click="treeOptionsVisible = true">
+                    配置树
+                  </el-button>
+                </el-form-item>
+                <el-form-item label="层级数量" v-if="Object.keys(nodeAttrForm).includes('level')">
+                  <el-input-number :min="1" :controls="false" v-model="nodeAttrForm.level" autocomplete="off" />
+                </el-form-item>
                 <el-form-item label="js脚本设置">
                   <el-input type="textarea" v-model="nodeAttrForm.JScript" style="width: 100%" />
                 </el-form-item>
@@ -1581,6 +1617,9 @@
         </div>
       </template>
     </el-dialog>
+    <el-dialog v-model="treeOptionsVisible" title="树设置" fullscreen>
+      <TreeOption :data="nodeAttrForm.treeOptions" :level="nodeAttrForm.level"/>
+    </el-dialog>
   </div>
 </template>
 <script setup>
@@ -1659,6 +1698,8 @@ import ButtonNode from '@/views/boardGenerate/nodes/form/buttonNode.vue';
 import SelectNode from '@/views/boardGenerate/nodes/form/selectNode.vue';
 
 import MenuNode from './nodes/advancedComponents/menuNode.vue'
+import TreeNode from './nodes/advancedComponents/tree/index.vue';
+import TreeOption from './nodes/advancedComponents/tree/option.vue';
 
 import TimeNode from '@/views/boardGenerate/nodes/form/timeNode.vue';
 import TableNode from '@/views/boardGenerate/nodes/form/tableNode.vue';
@@ -1811,6 +1852,7 @@ const pageSettingVisible = ref(false);
 const tableCellOptionsVisible = ref(false);
 const cellOptionsVisible = ref(false);
 const tableOptionsVisible = ref(false);
+const treeOptionsVisible = ref(false);
 const tableClassOptionsVisible = ref(false);
 const swiperOptionsVisible = ref(false);
 const mapOptionsVisible = ref(false);
@@ -2480,7 +2522,10 @@ const setText = (value, row, formula) => {
 }
 </style>
 <style>
-
+.vue-flow__handle {
+  width: 1vw;
+  height: 1vw;
+}
 
 </style>
 
diff --git a/src/views/boardGenerate/nodes/advancedComponents/menuItem.vue b/src/views/boardGenerate/nodes/advancedComponents/menuItem.vue
new file mode 100644
index 0000000..6adabd2
--- /dev/null
+++ b/src/views/boardGenerate/nodes/advancedComponents/menuItem.vue
@@ -0,0 +1,60 @@
+<template>
+  <!-- 有子菜单 -->
+  <el-sub-menu
+    v-if="hasChildren"
+    :index="`${item.id}`"
+  >
+    <template #title>
+      <div :style="{color:props.active === item.id ? (props.data?.options?.activeColor || '#ffd04b') :(props.data?.options?.color || '#fff')}" style="width: 100%" @click.stop="activeItem(item.id)">{{ item[props.data?.options?.menuField || 'locationAlias'] }}</div>
+    </template>
+
+    <MenuItem
+      v-for="(child,index) in item.children"
+      :key="index"
+      :item="child"
+      :data="props.data"
+      :active="props.active"
+    />
+  </el-sub-menu>
+
+  <!-- 普通菜单 -->
+  <el-menu-item
+    v-else
+    :index="`${item.id}`"
+  >
+    <div :style="{color:props.active === item.id ? (props.data?.options?.activeColor || '#ffd04b') :(props.data?.options?.color || '#fff')}" style="width: 100%" @click.stop="activeItem(item.id)">{{ item[props.data?.options?.menuField || 'locationAlias'] }}</div>
+  </el-menu-item>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { inject } from 'vue'
+defineOptions({
+  name: 'MenuItem'
+});
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  data: {
+    type: Object,
+    required: true
+  },
+  active:{
+    type: Number  ,
+    required: true
+  }
+});
+
+const hasChildren = computed(() => {
+  return props.item.children && props.item.children.length > 0;
+});
+
+const onSelect = inject('onSelect')
+
+const activeItem = (id) =>{
+  onSelect(id)
+}
+</script>
diff --git a/src/views/boardGenerate/nodes/advancedComponents/menuNode.vue b/src/views/boardGenerate/nodes/advancedComponents/menuNode.vue
index 5d9c620..79015e9 100644
--- a/src/views/boardGenerate/nodes/advancedComponents/menuNode.vue
+++ b/src/views/boardGenerate/nodes/advancedComponents/menuNode.vue
@@ -7,25 +7,28 @@
     <div class="custom-node"
          :style="{textAlign:props.data.options.align,width:props.dimensions.width*props.ratioWidth+'px',lineHeight:props.dimensions.height*props.ratioHeight+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
 
-      <el-menu active-text-color="#ffd04b" background-color="#062852" class="el-menu-vertical-demo" default-active="2" text-color="#fff">
-        <template v-for="(i, index) in props.inputData?.data" :key="i.id">
-          <el-sub-menu :index="index">
-            <template #title>
-              <span>{{ i.locationAlias }}</span>
-            </template>
-            <el-menu-item @click="scrollToId(ii.id)" v-for="ii in i.children">{{ ii.locationAlias }}</el-menu-item>
-          </el-sub-menu>
-        </template>
+      <el-menu ref="menuRef"   background-color="#062852" class="el-menu-vertical-demo"   :text-color="props.data.options.color || '#fff'">
+        <MenuItem
+          v-for="(item) in props.inputData?.data"
+          :data="props.data"
+          :index="`${item.id}`"
+          :key="item.id"
+          :item="item"
+          :active="active"
+        />
       </el-menu>
 
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
+    <Handle v-if="!props.isView" :id="`${props.id}.-s`" type="source" :position="Position.Right" />
   </div>
 </template>
 <script setup>
 import { defineEmits, defineProps, ref } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
+import MenuItem from './menuItem.vue'
+import { provide } from 'vue'
 
 const props = defineProps({
   ratioWidth: {
@@ -67,15 +70,26 @@ const props = defineProps({
     required: true
   }
 });
-
 const emit = defineEmits(['resize']);
+const menuRef = ref()
+const active  =ref(0)
 const resize = (e) => {
   emit('resize', e, props.id);
 };
+const onSelect = (item) => {
+  active.value = item
+  props.data.outputData[props.data.options.field] = item;
+}
+
+provide('onSelect', onSelect)
 </script>
 <style scoped>
 .custom-node {
   position: absolute;
+  overflow-y: auto;
+}
+:deep(.el-menu){
+  border: none;
 }
 </style>
 
diff --git a/src/views/boardGenerate/nodes/advancedComponents/tree/index.vue b/src/views/boardGenerate/nodes/advancedComponents/tree/index.vue
new file mode 100644
index 0000000..423e746
--- /dev/null
+++ b/src/views/boardGenerate/nodes/advancedComponents/tree/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <div
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
+                 @resize="resize" />
+
+    <div class="custom-node"
+         :style="{textAlign:props.data.options.align,width:props.dimensions.width*props.ratioWidth+'px',lineHeight:props.dimensions.height*props.ratioHeight+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
+      <span
+        :style="{color:props.data.options.color,fontSize:props.dimensions.height*props.ratioHeight+'px'}">{{ props.inputData?.text || props.data.options.text
+        }}</span>
+    </div>
+    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
+  </div>
+</template>
+<script setup>
+import { defineEmits, defineProps, ref } from 'vue';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import { Handle, Position } from '@vue-flow/core';
+
+const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  isView: {
+    type: Boolean,
+    required: false
+  },
+  inputData: {
+    type: Object,
+    required: false
+  },
+  id: {
+    type: String,
+    required: true
+  },
+  isHideHandle: {
+    type: Boolean,
+    required: false
+  },
+  selected: {
+    type: Boolean,
+    required: false
+  },
+  data: {
+    type: Object,
+    required: true
+  },
+  dimensions: {
+    type: Object,
+    required: true
+  }
+});
+
+const emit = defineEmits(['resize']);
+const resize = (e) => {
+  emit('resize', e, props.id);
+};
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+</style>
+
diff --git a/src/views/boardGenerate/nodes/advancedComponents/tree/nodes/item.vue b/src/views/boardGenerate/nodes/advancedComponents/tree/nodes/item.vue
new file mode 100644
index 0000000..604caaa
--- /dev/null
+++ b/src/views/boardGenerate/nodes/advancedComponents/tree/nodes/item.vue
@@ -0,0 +1,76 @@
+<template>
+  <div
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
+    <NodeResizer handleStyle="width:10px;height:10px;border-radius:50%" @resizeEnd="(e) => $emit('resize', e)" color="#000" v-if="!props.isView && !props.isHideHandle && props.selected"
+                 @resize="resize" />
+
+    <div class="custom-node"
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
+      <div style="width: 100%; height: 100%;border: 1px solid #ccc">
+        {{ !props.isView && !props.isHideHandle && props.selected}}
+        {{props.dimensions}}
+      </div>
+    </div>
+    <Handle v-show="false" :id="`${props.id}.-t`" type="target" :position="Position.Right" />
+  </div>
+</template>
+<script setup>
+import { defineEmits, defineProps, ref } from 'vue';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import { Handle, Position } from '@vue-flow/core';
+
+const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  isView: {
+    type: Boolean,
+    required: false
+  },
+  inputData: {
+    type: Object,
+    required: false
+  },
+  id: {
+    type: String,
+    required: true
+  },
+  isHideHandle: {
+    type: Boolean,
+    required: false
+  },
+  selected: {
+    type: Boolean,
+    required: false
+  },
+  data: {
+    type: Object,
+    required: true
+  },
+  dimensions: {
+    type: Object,
+    required: true
+  }
+});
+
+const emit = defineEmits(['resize']);
+const resize = (e) => {
+  emit('resize', e, props.id);
+};
+watch(()=>props.dimensions,() => {
+  console.log(JSON.stringify(props.dimensions));
+})
+</script>
+<style scoped>
+.custom-node {
+  //position: absolute;
+}
+</style>
+
diff --git a/src/views/boardGenerate/nodes/advancedComponents/tree/option.vue b/src/views/boardGenerate/nodes/advancedComponents/tree/option.vue
new file mode 100644
index 0000000..53d4977
--- /dev/null
+++ b/src/views/boardGenerate/nodes/advancedComponents/tree/option.vue
@@ -0,0 +1,168 @@
+<template>
+  <div style="height: calc(90vh - 111px - 30px);position: relative;">
+    <el-card class="moduleCard" shadow="never" :draggable="true"
+             @dragstart="onDragStart($event, 'itemNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+             :body-style="{padding:'4px 0'}">
+      <template #header>
+        <div style="width: 100%;height: 100%;text-align: center">
+          <svg t="1768964556223" class="icon" viewBox="0 0 1024 1024" version="1.1"
+               xmlns="http://www.w3.org/2000/svg" p-id="4878" width="30" height="30">
+            <path
+              d="M554.666667 682.666667h85.333333v128h-213.333333v-128h85.333333v-128H256v128h85.333333v128H128v-128h85.333333v-170.666667h298.666667V384h-85.333333V256h213.333333v128h-85.333333v128h298.666666v170.666667h85.333334v128h-213.333334v-128h85.333334v-128h-256v128z m42.666666-384h-128v42.666666h128V298.666667zM298.666667 725.333333H170.666667v42.666667h128v-42.666667z m597.333333 0h-128v42.666667h128v-42.666667z m-298.666667 0h-128v42.666667h128v-42.666667z"
+              fill="#444444" p-id="4879"></path>
+          </svg>
+        </div>
+      </template>
+      <div class="moduleText">文字</div>
+    </el-card>
+    <div class="content" @drop="onDrop">
+      <VueFlow
+        :min-zoom="0.01"
+        :zoomOnScroll="false"
+        :panOnDrag="false"
+        ref="flowRef"
+        v-model:nodes="nodes"
+        v-model:edges="edges"
+        fit-view-on-init
+        @dragover="onDragOver"
+        default-marker-color="#409EFF"
+        @connect="logEvent('connect', $event)"
+        @node-click="logEvent('click', $event)"
+        @pane-click="logEvent('paneClick', $event)"
+        @node-drag-start="logEvent('nodeDrag', $event)"
+        @node-contextMenu="logEvent('contextmenu', $event)"
+      >
+        <Background :size="1" :gap="20" pattern-color="#000" style="background-color: #fff" />
+
+        <template #node-itemNode="props">
+          <Item v-bind="props" @resize="(e) => handleResizeStop(e, props)"/>
+        </template>
+      </VueFlow>
+    </div>
+  </div>
+</template>
+<script setup>
+import { defineEmits, defineProps, ref } from 'vue';
+import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
+import tool from './tool.js';
+import { Background } from '@vue-flow/background';
+
+import Item from './nodes/item.vue';
+import AreaNode from '@/views/print/nodes/areaNode.vue';
+
+
+const { onDragStart, onDrop, onDragOver } = tool();
+const {
+  addEdges,
+  updateNode,
+  removeNodes,
+  addNodes
+} = useVueFlow();
+const flowRef = ref();
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  level: {
+    type: Number,
+    required: true
+  }
+});
+const nodes = ref([]);
+const edges = ref([]);
+
+const logEvent = async (eventname, event) => {
+  switch (eventname) {
+    case 'connect':
+      if (!edges.value.some(r => r.id === `${event.source}---${event.target}`)) {
+        addEdges({
+          id: `${event.source}---${event.target}`,
+          source: event.source,
+          target: event.target,
+          type: 'bezier',
+          animated: true,
+          markerEnd: MarkerType.ArrowClosed,
+          sourceHandle: event.sourceHandle,
+          style: { stroke: '#409EFF' }
+        });
+      }
+      break;
+    case 'paneClick':
+      break;
+    case 'click':
+      break;
+    case 'nodeDrag':
+      break;
+    case 'contextmenu':
+  }
+};
+const gridSize = 200;
+const handleResizeStop = (event, node) => {
+  if (event.altKey) return;
+
+  const snappedWidth = Math.round(node.width / gridSize) * gridSize;
+  const snappedHeight = Math.round(node.height / gridSize) * gridSize;
+
+  updateNode(node.id, {
+    style: {
+      width: `${snappedWidth}px`,
+      height: `${snappedHeight}px`
+    }
+  });
+};
+onMounted(async () => {
+  flowRef.value.setTransform({
+    x: 0,
+    y: 0,
+    zoom: 1
+  });
+  await nextTick();
+  nodes.value = [];
+  await nextTick();
+  addNodes({
+    id: `item1`,
+    type: 'itemNode',
+    draggable:false,
+    position: {
+      x: 0,
+      y: 200
+    },
+    dimensions: { 'width': 300, 'height': 200 },
+    data: {}
+  });
+  setTimeout(() => {
+    console.log(JSON.stringify(nodes.value));
+  }, 1000);
+});
+watch(() => nodes.value, () => {
+  console.log(JSON.stringify(nodes.value));
+}, { deep: true });
+</script>
+<style lang="less" scoped>
+.levelItem {
+  display: inline-block;
+  border: 1px solid #ccc;
+}
+
+.line {
+  display: inline-block;
+  width: 30px;
+  height: 1px;
+  background-color: #409eff;
+  vertical-align: top;
+}
+
+.content {
+  width: calc(100% - 100px);
+  height: 100%;
+  position: absolute;
+  //top: 50%;
+  left: 100px;
+  top: 0;
+  //transform: translateY(-50%);
+  vertical-align: top;
+}
+</style>
+
diff --git a/src/views/boardGenerate/nodes/advancedComponents/tree/tool.js b/src/views/boardGenerate/nodes/advancedComponents/tree/tool.js
new file mode 100644
index 0000000..0c1a73a
--- /dev/null
+++ b/src/views/boardGenerate/nodes/advancedComponents/tree/tool.js
@@ -0,0 +1,69 @@
+import { useVueFlow } from '@vue-flow/core';
+import { v4 as uuidv4 } from 'uuid';
+
+
+const getId = ( ) => {
+  return `${uuidv4().replaceAll('-', '_')}`;
+};
+
+
+const getNodeSize = (e) => {
+  return { width: 100, height: 100 };
+};
+const tool = () => {
+  const nodeType = ref('');
+  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();
+  const onDragStart = (event, type, data) => {
+    if (event.dataTransfer) {
+      event.dataTransfer.setData('application/vueflow', type);
+      event.dataTransfer.effectAllowed = 'move';
+    }
+
+    nodeType.value = type;
+    document.addEventListener('drop', onDragEnd);
+  };
+  const onDragEnd = () => {
+    nodeType.value = null;
+    document.removeEventListener('drop', onDragEnd);
+  };
+  const onDrop = (event) => {
+    const dimensions = getNodeSize();
+
+    const position = screenToFlowCoordinate({
+      x: event.clientX, y: event.clientY
+    });
+
+    const nodeId = getId( );
+    const newNode = {
+      id: nodeId,
+      draggable: true,
+      type: nodeType.value,
+      dimensions,
+      position,
+      data: { options: {} }
+    };
+
+
+    const { off } = onNodesInitialized(() => {
+      updateNode(nodeId, (node) => ({
+        position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
+      }));
+
+      off();
+    });
+    addNodes(newNode);
+
+  };
+  const onDragOver = (event) => {
+    event.preventDefault();
+
+
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+  };
+  return {
+    onDragStart, onDragEnd, onDrop, onDragOver
+  };
+};
+export default tool;
diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js
index de80dc1..c23cd05 100644
--- a/src/views/boardGenerate/tool.js
+++ b/src/views/boardGenerate/tool.js
@@ -359,7 +359,9 @@ const getOption = (e) => {
       field: '', color: '#fff',fontSize: 22,number: 123,numQuantity:3, backgroundColor: 'rgba(180, 180, 180, 0.2)', isBorder: true, borderColor: '#fff'
     };
   } else if (e === 'menu') {
-    return { text: '文字', align: '', color: '#fff' };
+    return { menuField: '', activeField: '', field: '', color: '#fff', activeColor: '#ffd04b' };
+  } else if (e === 'tree') {
+    return { level: 2,treeOptions:[] };
   } else {
     return {};
   }
@@ -383,8 +385,12 @@ const getNodeSize = (e) => {
     return { width: 300, height: 300 };
   } else if (e === 'map') {
     return { width: 100, height: 30 };
+  } else if (e === 'menu') {
+    return { width: 200, height: 800 };
   } else if (e === 'scrollTable' || e === 'table') {
     return { width: 500, height: 300 };
+  } else if (e === 'tree') {
+    return { width: 800, height: 800 };
   } else {
     return { width: 100, height: 100 };
   }
@@ -414,9 +420,7 @@ const nameEnum = {
   icon: '图标',
   video: '视频',
   timeline: '时间线',
-  digitalFlop: '数字翻牌器',
-  scrollTable: '滚动表格',
-  background: '背景'
+  digitalFlop: '数字翻牌器', scrollTable: '滚动表格', background: '背景', tree: '树状图'
 };
 const tool = () => {
   const nodeType = ref('');
diff --git a/src/views/boardGenerate/view.vue b/src/views/boardGenerate/view.vue
index 500dbfc..199d9c9 100644
--- a/src/views/boardGenerate/view.vue
+++ b/src/views/boardGenerate/view.vue
@@ -138,6 +138,10 @@
         <DigitalFlopNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
                          :inputData=getInputData(i.id) v-bind="i"></DigitalFlopNode>
       </template>
+      <template v-if="i.type === 'menu'">
+        <MenuNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
+                         :inputData=getInputData(i.id) v-bind="i"></MenuNode>
+      </template>
 
     </div>
   </div>
@@ -183,6 +187,7 @@ import CarouselNode from './nodes/board/carouselNode.vue';
 import StaticDataNode from './nodes/data/staticDataNode.vue';
 import TableNode from './nodes/form/tableNode.vue';
 import ScrollTableNode from './nodes/form/scrollTableNode.vue';
+import MenuNode from './nodes/advancedComponents/menuNode.vue'
 import { getBoardApi } from '@/views/boardGenerate/api/boardList';
 
 const router = useRouter();
diff --git a/src/views/print/index.vue b/src/views/print/index.vue
index 0e17fdc..5a45a95 100644
--- a/src/views/print/index.vue
+++ b/src/views/print/index.vue
@@ -615,7 +615,6 @@ const setPage = (type, width, height) => {
 };
 
 const zoomChange = (e) => {
-  console.log(flowRef.value.autoPanSpeed);
   flowRef.value.viewport.x = 0;
   flowRef.value.viewport.y = 0;
   let num = zoom.value;