centaline-data-driven-v3 0.1.44 → 0.1.46

package/src/components/web/Tree/Tree.vue

@@ -1,24 +1,31 @@
 <template>
   <div id="ct-tree" class="ct-tree" oncontextmenu="event.preventDefault()" style="overflow:auto;" v-loading="loading"
     :style="{ height: props.treeHeight - 10 + 'px' }">
-    <el-tree class="tree-line" :props="defaultProps" :expand-on-click-node="false" @node-click="handleNodeClick"
-      :filter-node-method="filterNode" lazy :load="loadNode" ref="refTree" @node-contextmenu="rightClick"
+    <el-tree class="tree-line" :props="defaultProps" :expand-on-click-node="false" 
+      @node-click="handleNodeClick"
+      :filter-node-method="filterNode" lazy :load="loadNode" ref="refTree" @node-contextmenu="handleContextMenu"
       node-key="code" current-node-key="currentNodeKey" :default-expanded-keys="defaultExpandedKeys">
       <template #default="{ node, data }">
-        <span class="node_content">
+        <span class="node_content" @mouseenter="handleMouseEnter(data, node)" @mousemove="handleMouseMove">
           <el-icon class="node-icon" :class="{ 'is-leaf': node.isLeaf }">
             <Document v-if="node.isLeaf" :size="14" />
             <Folder v-else-if="!node.expanded" :size="14" />
             <FolderOpened v-else :size="14" />
           </el-icon>
-          <span style="" :ref="(el: refItem) => handleSetInputMap(el, data)">{{
-            data.name }}</span>
+          <span style="" :ref="(el: refItem) => handleSetInputMap(el, data)">
+            {{ data.name }}
+          </span>
           <span @click.stop>
-            <el-popover placement="right" :virtual-ref="nodeRef" virtual-triggering
-              :visible="((data.code == currentData.code && menuVisible && allowedRoutes?.length > 0))">
-              <div class="box-menu">
+            <el-popover placement="right" :show-arrow="false" :virtual-ref="nodeRef" virtual-triggering :visible="showPopover(data)" v-if="showPopover(data)" :show-after="0"
+              :hide-after="0" :popper-class="allIconsMode ? 'popper-transparent' : 'popper-menu'"
+              :popper-style="popoverStyle">
+              <div class="box-menu" :class="{ 'box-menu-icons': allIconsMode }">
                 <template v-for="(item, index) in allowedRoutes">
-                  <div class="opertion" @click="routerClickHandler(item)">
+                  <template v-if="allIconsMode">
+                    <img class="opertion" v-if="item.imgUrl" :src="item.imgUrl" :alt="item.controlLabel || ''"
+                      :title="item.controlLabel" @click="routerClickHandler(item)" />
+                  </template>
+                  <div class="opertion" @click="routerClickHandler(item)" v-else>
                     <div>
                       <img v-if="item.imgUrl" :src="item.imgUrl" alt="" />
                       {{ item.controlLabel }}
@@ -90,6 +97,18 @@ const retryCount = ref(0);
 const treeNodeRefMap = ref({});
 const allowedRoutes = ref([]);
 
+// 新增：鼠标悬停相关状态
+const hoverTimer = ref(null)
+const hoverNodeCode = ref('')
+const isHoverMode = ref(false) // 是否是悬停模式
+const isManualClose = ref(false) // 是否是手动关闭
+const allIconsMode = ref(false) // 是否全是图标模式
+// 新增：弹出框位置控制
+const popoverStyle = ref({})
+const currentMousePosition = ref({ x: 0, y: 0 }) // 当前鼠标位置
+const lastNodeCode = ref('') // 上次显示菜单的节点code
+const isPositionLockedForCurrentNode = ref(false) // 当前节点的位置是否已锁定
+
 // 默认展开的节点key数组
 const defaultExpandedKeys = ref([])
 // 是否已设置默认展开
@@ -104,6 +123,11 @@ const fullTreeData = ref([])
 const nodeCodeMap = ref(new Map())
 
 const isExpandAll = ref(false);
+const isLazyInitialized = ref(false) // 标记是否已经初始化过lazy值
+
+// 新增：记录节点加载状态的Map
+const nodeLoadedStatus = ref(new Map())
+
 /** 动态设置Input Ref */
 const handleSetInputMap = (el: refItem, item) => {
   if (el) {
@@ -117,129 +141,292 @@ onBeforeUnmount(() => {
     clearTimeout(qrtimer.value);
     qrtimer.value = null;
   }
+  if (hoverTimer.value) {
+    clearTimeout(hoverTimer.value);
+    hoverTimer.value = null;
+  }
 })
 
-function getFirstNLevelKeys(nodes, targetLevel = 1) {
-  const result = [];
+// 检查allowedRoutes是否全是图标
+function checkIfAllIcons(routes) {
+  if (!routes || routes.length === 0) return false;
+  return routes.every(item => item.imgUrl && item.imgUrl.trim() !== '');
+}
 
-  if (!nodes || nodes.length === 0 || targetLevel < 0) {
-    return result;
+// 显示弹出框的条件
+function showPopover(data) {
+  if (isManualClose.value) {
+    return false;
   }
 
-  const traverse = (nodes, currentLevel) => {
-    if (currentLevel > targetLevel || !nodes) return;
+  const isCurrentNode = data.code === currentData.value.code;
+  const hasRoutes = allowedRoutes.value.length > 0;
+  if (isHoverMode.value) {
+    // 悬停模式：当前节点且有路由就显示
+    return isCurrentNode && hasRoutes && menuVisible.value;
+  } else {
+    // 右键模式：右键触发才显示
+    return isCurrentNode && hasRoutes && menuVisible.value;
+  }
+}
 
-    nodes.forEach(node => {
-      if (node.code) {
-        result.push(node.code);
+// 鼠标进入节点
+function handleMouseEnter(data, node) {
+  // if (isManualClose.value) {
+  //   isManualClose.value = false;
+  //   return;
+  // }
+  // 检查当前节点的allowedRoutes是否全是图标
+  const routes = getAllowedRoutesForNode(data);
+  const allIcons = checkIfAllIcons(routes);
+  allIconsMode.value = allIcons;
+  if (allIcons) {
+    isHoverMode.value = true;
+    hoverNodeCode.value = data.code;
+    isManualClose.value = false;
+
+    if (hoverNodeCode.value === data.code) {
+      showNodeMenu(data, node, true);
+    }
+  }
+}
+
+// 鼠标移动事件
+function handleMouseMove(event) {
+  // 更新鼠标位置
+  currentMousePosition.value = {
+    x: event.clientX,
+    y: event.clientY
+  };
+
+  // 如果是悬停模式且全是图标，并且当前节点的位置尚未锁定，则更新位置
+  if (menuVisible.value && isHoverMode.value && allIconsMode.value && !isPositionLockedForCurrentNode.value) {
+    updatePopoverPosition();
+  }
+}
+
+// 更新弹出框位置（只对当前节点第一次调用时生效）
+function updatePopoverPosition() {
+  // 如果当前节点的位置已锁定，不再更新
+  if (isPositionLockedForCurrentNode.value) {
+    return;
+  }
+
+  // 计算菜单位置，确保不会超出屏幕
+  const screenWidth = window.innerWidth;
+  const menuWidth = allIconsMode.value ? 150 : 200; // 预估菜单宽度
+
+  let left = currentMousePosition.value.x + 15;
+
+  // 检查是否超出右边界
+  if (left + menuWidth > screenWidth) {
+    left = currentMousePosition.value.x - menuWidth - 10;
+  }
+
+  // 只设置水平位置，垂直位置使用 Element UI 默认的
+  popoverStyle.value = {
+    left: `${left}px`
+  };
+
+  // 设置当前节点的位置为已锁定
+  if (currentData.value.code) {
+    isPositionLockedForCurrentNode.value = true;
+  }
+}
+
+// 右键菜单事件
+function handleContextMenu(event, object, node) {
+  event.preventDefault();
+
+  // 记录鼠标位置
+  currentMousePosition.value = {
+    x: event.clientX,
+    y: event.clientY
+  };
+  // 检查当前节点的allowedRoutes是否全是图标
+  const routes = getAllowedRoutesForNode(object);
+  const allIcons = checkIfAllIcons(routes);
+
+  // 如果全是图标，右键时不执行后面代码（不显示菜单）
+  if (allIcons) {
+    return;
+  }
+  isManualClose.value = false;
+  showNodeMenu(object, node, false);
+}
+
+// 共用方法：显示节点菜单
+function showNodeMenu(object, node, isHoverTrigger = false) {
+  // 检查是否是新的节点
+  const isNewNode = object.code !== lastNodeCode.value;
+
+  if (isNewNode) {
+    // 如果是新节点，重置位置锁定状态
+    isPositionLockedForCurrentNode.value = false;
+    lastNodeCode.value = object.code;
+  }
+
+  nodeRef.value = treeNodeRefMap.value[`node_Ref_${object.code}`]
+
+  currentData.value = object
+  currentNode.value = node
+
+  allowedRoutes.value = getAllowedRoutesForNode(object);
+
+  if (allowedRoutes.value.length > 0) {
+    menuVisible.value = true;
+
+    // 使用nextTick确保DOM已更新，然后设置位置
+    nextTick(() => {
+      // 如果是右键触发，设置弹出框位置
+      if (!isHoverTrigger && !allIconsMode.value) {
+        updatePopoverPosition();
       }
 
-      // 如果还有下一层且没超过目标层级，继续遍历
-      if (currentLevel < targetLevel && node.children && node.children.length > 0) {
-        traverse(node.children, currentLevel + 1);
+      // 如果是悬停模式且全是图标，设置跟随鼠标
+      if (isHoverTrigger && allIconsMode.value) {
+        updatePopoverPosition();
       }
     });
-  };
 
-  traverse(nodes, 0);
-  return result;
+    // 添加点击事件监听
+    document.addEventListener('click', closeMenuOnClick);
+  }
 }
 
-// 递归获取所有节点的key（用于搜索时全展开）
-function getAllNodeKeys(nodes, result = []) {
-  if (!nodes || nodes.length === 0) {
-    return result;
+// 点击关闭菜单
+function closeMenuOnClick(e) {
+  // 检查点击是否在菜单内部
+  const menu = document.querySelector('.box-menu');
+  if (menu && !menu.contains(e.target)) {
+    closeMenu();
   }
+}
 
-  nodes.forEach(node => {
-    if (node.code) {
-      result.push(node.code);
-    }
+//关闭菜单
+function closeMenu() {
+  isManualClose.value = true;
+  menuVisible.value = false;
+  isHoverMode.value = false;
+  lastNodeCode.value = '';
+  isPositionLockedForCurrentNode.value = false;
 
-    if (node.children && node.children.length > 0) {
-      getAllNodeKeys(node.children, result);
-    }
-  });
+  hoverNodeCode.value = '';
+  nodeRef.value = null;
+  // 重置弹出框样式
+  popoverStyle.value = {};
 
-  return result;
+  // 移除事件监听
+  document.removeEventListener('click', closeMenuOnClick);
+
+  if (hoverTimer.value) {
+    clearTimeout(hoverTimer.value);
+    hoverTimer.value = null;
+  }
 }
 
 // 设置默认展开节点
 function setDefaultExpandedNodes() {
-  if (!props.expandTwoLevels || !fullTreeData.value.length) {
+  if (!props.expandTwoLevels) {
     return;
   }
 
+  // 如果是懒加载模式，使用特定的展开逻辑
+  if (lazy.value) {
+    setLazyModeExpandedNodes();
+    return;
+  }
+
+  // 全量数据模式
   if (isSearching.value) {
     isExpandAll.value = true;
-    const allKeys = getAllNodeKeys(fullTreeData.value);
+    const allKeys = Tree.getAllNodeKeys(fullTreeData.value);
     defaultExpandedKeys.value = allKeys;
   } else {
     isExpandAll.value = false;
     // 检查是否有全展开搜索条件
     const expandValue = findSearchFieldValue(screenPara.value, 'expanded', {
-      caseInsensitive: true, // 添加不区分大小写的选项
-      keyFields: ['fieldName1', 'groupName', 'fieldLabel'] // 扩展可能的key字段
+      caseInsensitive: true,
+      keyFields: ['fieldName1', 'groupName', 'fieldLabel']
     });
 
-    // 如果找到expanded=all的搜索条件，设置全展开
     if (expandValue && expandValue.toString().toLowerCase() === 'all') {
       isExpandAll.value = true;
-      const allKeys = getAllNodeKeys(fullTreeData.value);
+      const allKeys = Tree.getAllNodeKeys(fullTreeData.value);
       defaultExpandedKeys.value = allKeys;
     } else {
-      // 处理非'all'的情况
-      let expandLevel = 1; // 默认展开级别为1
+      let expandLevel = 1;
 
       if (expandValue) {
         const numericValue = Number(expandValue);
         if (!isNaN(numericValue) && numericValue > 0) {
-          expandLevel = Math.max(0, numericValue - 1); // 减1但最小为1
-
+          expandLevel = Math.max(0, numericValue - 1);
         }
       }
 
-      defaultExpandedKeys.value = getFirstNLevelKeys(fullTreeData.value, expandLevel);
+      defaultExpandedKeys.value = Tree.getFirstNLevelKeys(fullTreeData.value, expandLevel);
     }
   }
 
   hasSetDefaultExpand.value = true;
 }
 
-// 新增：构建节点Map，便于快速查找
-function buildNodeCodeMap(nodes) {
-  const map = new Map();
+// 修改：懒加载模式下的展开逻辑
+function setLazyModeExpandedNodes() {
+  if (!fullTreeData.value || fullTreeData.value.length === 0) {
+    return;
+  }
 
-  function traverse(nodeList) {
-    nodeList.forEach(node => {
-      if (node.code) {
-        map.set(node.code, node);
-      }
+  // 获取所有非叶子节点（最后一层不展开）
+  const nonLeafKeys = [];
 
-      if (node.children && node.children.length > 0) {
-        traverse(node.children);
+  function traverse(nodes) {
+    nodes.forEach(node => {
+      // 关键判断：如果是叶子节点，就不展开
+      const isLeafNode = node.isLeaf === true ||
+        (!node.children || node.children.length === 0);
+
+      if (!isLeafNode) {
+        // 非叶子节点，可以展开
+        nonLeafKeys.push(node.code);
+
+        // 递归处理子节点
+        if (node.children && node.children.length > 0) {
+          traverse(node.children);
+        }
       }
     });
   }
 
-  traverse(nodes);
-  return map;
-}
+  traverse(fullTreeData.value);
+
+  defaultExpandedKeys.value = nonLeafKeys;
+  hasSetDefaultExpand.value = true;
 
-// 新增：复制节点（深拷贝）
-function cloneNode(node) {
-  const cloned = { ...node };
-  cloned.children = [];
-  return cloned;
+  // 延迟设置，确保树已渲染
+  nextTick(() => {
+    if (refTree.value && refTree.value.store) {
+      // 只展开已有的非叶子节点，不触发懒加载
+      nonLeafKeys.forEach(key => {
+        const node = refTree.value.getNode(key);
+        if (node && !node.expanded) {
+          // 安全地设置展开状态
+          node.expanded = true;
+        }
+      });
+    }
+  });
 }
 
 // 搜索（查询条件调用）
 function search(m) {
-  const hasValidSearchConditions = checkHasValidSearchConditions(m);
+  const hasValidSearchConditions = Tree.checkHasValidSearchConditions(m);
 
   isSearching.value = hasValidSearchConditions;
   screenPara.value = m;
 
+
+
   if (!lazy.value) {
     filterFullTreeData(screenPara.value);
     return;
@@ -264,111 +451,19 @@ function search(m) {
     }, 200);
   }
 }
-
-// 检查是否有有效的搜索条件
-function checkHasValidSearchConditions(filter) {
-  if (!filter) return false;
-
-  let searchConditions = [];
-
-  if (filter?.searchData?.fields) {
-    searchConditions = filter.searchData.fields;
-  } else if (filter?.fields) {
-    searchConditions = filter.fields;
-  }
-
-  const validConditions = filterValidConditions(searchConditions);
-  return validConditions && validConditions.length > 0;
-}
-
-
-
-// 过滤掉 operation 为 1 的条件
-function filterValidConditions(conditions) {
-  if (!conditions || !Array.isArray(conditions)) return [];
-
-  return conditions.filter(condition => {
-    return condition.operation !== 1;
-  });
-}
-
-// 判断节点是否匹配所有搜索条件
-function nodeMatchesAllConditions(node, conditions) {
-  const validConditions = filterValidConditions(conditions);
-
-  if (!validConditions || validConditions.length === 0) return true;
-
-  return validConditions.every(condition => {
-    const { fieldName1, operation, searchValue1, searchValue2, searchDataType } = condition;
-    let nodeValue = node[fieldName1];
-
-    if (nodeValue === undefined) {
-      const mappedField = Object.keys(node).find(key =>
-        key.toLowerCase() === fieldName1.toLowerCase()
-      );
-      if (mappedField) {
-        nodeValue = node[mappedField];
-      } else {
-        return false;
+function collapseAllNodes() {
+  if (refTree.value && refTree.value.store) {
+    Object.values(refTree.value.store.nodesMap).forEach((node: any) => {
+      if (node) {
+        node.expanded = false;
       }
-    }
+    });
 
-    const strNodeValue = String(nodeValue || '').toLowerCase();
-    const strSearchValue = String(searchValue1 || '').toLowerCase();
-
-    switch (operation) {
-      case 2:
-        return strNodeValue === strSearchValue;
-      case 3:
-        return strNodeValue !== strSearchValue;
-      case 4:
-        return Number(nodeValue) > Number(searchValue1);
-      case 5:
-        return Number(nodeValue) >= Number(searchValue1);
-      case 6:
-        return Number(nodeValue) < Number(searchValue1);
-      case 7:
-        return Number(nodeValue) <= Number(searchValue1);
-      case 8:
-        return strNodeValue.includes(strSearchValue);
-      case 9:
-        return strNodeValue.startsWith(strSearchValue);
-      case 10:
-        return strNodeValue.endsWith(strSearchValue);
-      case 11:
-        return !strNodeValue.includes(strSearchValue);
-      case 12:
-        try {
-          const regex = new RegExp(searchValue1, 'i');
-          return regex.test(nodeValue);
-        } catch (e) {
-          console.warn('正则表达式错误:', e);
-          return false;
-        }
-      case 13:
-        if (!searchValue1) return false;
-        try {
-          const values = searchValue1.split(',').map(v => v.trim().toLowerCase());
-          return values.includes(strNodeValue);
-        } catch (e) {
-          console.warn('解析IN条件错误:', e);
-          return false;
-        }
-      case 14:
-        if (!searchValue1) return true;
-        try {
-          const values = searchValue1.split(',').map(v => v.trim().toLowerCase());
-          return !values.includes(strNodeValue);
-        } catch (e) {
-          console.warn('解析NotIN条件错误:', e);
-          return false;
-        }
-      default:
-        return false;
-    }
-  });
+    // 清空默认展开的key
+    defaultExpandedKeys.value = [];
+    hasSetDefaultExpand.value = false;
+  }
 }
-
 // 修改：构建完整的过滤树，保持原始层级结构
 function buildFilteredTreeWithOriginalHierarchy(matchedNodes) {
   if (!matchedNodes || matchedNodes.length === 0) {
@@ -381,7 +476,7 @@ function buildFilteredTreeWithOriginalHierarchy(matchedNodes) {
   // 第一步：创建所有匹配节点的副本
   matchedNodes.forEach(node => {
     if (!resultMap.has(node.code)) {
-      const clonedNode = cloneNode(node);
+      const clonedNode = Tree.cloneNode(node);
       resultMap.set(node.code, clonedNode);
     }
   });
@@ -424,12 +519,11 @@ function buildFilteredTreeWithOriginalHierarchy(matchedNodes) {
       if (!originalNode) continue;
 
       // 创建节点副本
-      const clonedNode = cloneNode(originalNode);
+      const clonedNode = Tree.cloneNode(originalNode);
       resultMap.set(currentCode, clonedNode);
 
       // 如果是根节点，添加到根节点数组
       if (i === 0) {
-        // 检查是否已经存在于根节点中
         const existingRoot = rootNodes.find(n => n.code === currentCode);
         if (!existingRoot) {
           rootNodes.push(clonedNode);
@@ -442,7 +536,6 @@ function buildFilteredTreeWithOriginalHierarchy(matchedNodes) {
         const parentNode = resultMap.get(parentCode);
 
         if (parentNode) {
-          // 检查是否已经包含该子节点
           const existingChild = parentNode.children.find(child => child.code === currentCode);
           if (!existingChild) {
             parentNode.children.push(clonedNode);
@@ -458,7 +551,6 @@ function buildFilteredTreeWithOriginalHierarchy(matchedNodes) {
       const currentNode = resultMap.get(matchedNode.code);
 
       if (parentNode && currentNode) {
-        // 检查是否已经包含该子节点
         const existingChild = parentNode.children.find(child => child.code === matchedNode.code);
         if (!existingChild) {
           parentNode.children.push(currentNode);
@@ -469,11 +561,10 @@ function buildFilteredTreeWithOriginalHierarchy(matchedNodes) {
 
   // 第三步：清理根节点，确保它们没有重复的父节点
   const finalRootNodes = [];
-  const usedNodes = new Set();
 
   function isNodeUsedInTree(node) {
     for (const root of rootNodes) {
-      if (isNodeInChildren(root, node.code)) {
+      if (Tree.isNodeInChildren(root, node.code)) {
         return true;
       }
     }
@@ -481,7 +572,6 @@ function buildFilteredTreeWithOriginalHierarchy(matchedNodes) {
   }
 
   rootNodes.forEach(rootNode => {
-    // 如果这个节点已经是其他节点的子节点，则不作为根节点
     if (!isNodeUsedInTree(rootNode)) {
       finalRootNodes.push(rootNode);
     }
@@ -511,29 +601,6 @@ function findParentCodeInFullTree(nodeCode) {
   return findParent(fullTreeData.value, nodeCode);
 }
 
-// 新增：检查节点是否在子树中
-function isNodeInChildren(parentNode, targetCode) {
-  if (parentNode.code === targetCode) {
-    return false; // 不检查自身
-  }
-
-  if (!parentNode.children || parentNode.children.length === 0) {
-    return false;
-  }
-
-  for (const child of parentNode.children) {
-    if (child.code === targetCode) {
-      return true;
-    }
-
-    if (isNodeInChildren(child, targetCode)) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
 // 修改：过滤全量树数据，保持原始层级
 function filterFullTreeData(filter) {
   if (!fullTreeData.value.length) {
@@ -550,7 +617,7 @@ function filterFullTreeData(filter) {
       searchConditions = filter.fields;
     }
 
-    const validConditions = filterValidConditions(searchConditions);
+    const validConditions = Tree.filterValidConditions(searchConditions);
 
     if (!validConditions || validConditions.length === 0) {
       refTree.value.store.setData(fullTreeData.value);
@@ -559,7 +626,6 @@ function filterFullTreeData(filter) {
       hasSetDefaultExpand.value = false;
       defaultExpandedKeys.value = [];
 
-      // 先收起所有节点
       if (refTree.value && refTree.value.store) {
         Object.values(refTree.value.store.nodesMap).forEach((node: any) => {
           if (node) {
@@ -575,7 +641,7 @@ function filterFullTreeData(filter) {
     // 递归查找所有匹配的节点
     const findMatchedNodes = (nodes, result = []) => {
       nodes.forEach(node => {
-        const nodeMatches = nodeMatchesAllConditions(node, validConditions);
+        const nodeMatches = Tree.nodeMatchesAllConditions(node, validConditions);
 
         if (nodeMatches) {
           result.push(node);
@@ -590,18 +656,15 @@ function filterFullTreeData(filter) {
 
     const matchedNodes = findMatchedNodes(fullTreeData.value);
 
-    // 构建保持原始层级的过滤树
     let filteredData = [];
     if (matchedNodes.length > 0) {
       filteredData = buildFilteredTreeWithOriginalHierarchy(matchedNodes);
     }
 
-    // 设置过滤后的数据
     refTree.value.store.setData(filteredData);
 
-    // 搜索状态时展开所有节点
     if (filteredData.length > 0 && isSearching.value) {
-      const allKeys = getAllNodeKeys(filteredData);
+      const allKeys = Tree.getAllNodeKeys(filteredData);
       defaultExpandedKeys.value = allKeys;
 
       nextTick(() => {
@@ -614,7 +677,6 @@ function filterFullTreeData(filter) {
         }
       });
 
-      // 默认选中第一个可选节点
       const findFirstSelectableNode = (nodes) => {
         for (const node of nodes) {
           if (!node.children || node.children.length === 0) {
@@ -630,9 +692,10 @@ function filterFullTreeData(filter) {
       if (firstNode && firstNode.code) {
         nextTick(() => {
           refTree.value.setCurrentKey(firstNode.code);
-          handleNodeClick(firstNode, true);
+          handleNodeClick(firstNode);
         });
       }
+
     }
 
   } catch (error) {
@@ -642,74 +705,168 @@ function filterFullTreeData(filter) {
   }
 }
 
-// 修改：加载节点，保存节点Map
-function loadNode(node, resolve) {
+// 获取节点的allowedRoutes
+function getAllowedRoutesForNode(data) {
+  if (!model.value || !model.value.actionRouter) return [];
 
-  if (!lazy.value) {
-    const nodeData = node.data;
-    resolve(nodeData.children)
+  return model.value.actionRouter.filter(v => {
+    const val = data[v.rightField];
+    const hit = val == '1' || val === undefined || val === null;
+    return hit;
+  });
+}
+
+// 修改：加载节点，保存节点Map
+function loadNode(node, resolve) { 
+  // 如果是根节点（level === 0），清空节点加载状态
+  if (node.level === 0) {
+    nodeLoadedStatus.value.clear();
+  }
+  // 如果节点已经加载过，直接返回子节点
+  if (nodeLoadedStatus.value.has(node.key) && nodeLoadedStatus.value.get(node.key) === 'loaded') {
+    if (node.data && node.data.children) {
+      resolve(node.data.children);
+    } else {
+      resolve([]);
+    }
+    return;
+  }
+  
+  // 如果节点已经有数据且不是懒加载模式，直接返回子节点
+  if (node.data && node.data.children && node.data.children.length > 0 && !lazy.value) {
+    resolve(node.data.children);
     return;
   }
 
-  if (node.level === 0) {
+  // 懒加载模式：第一次加载或需要加载子节点
+  if (lazy.value && node.level === 0) {
     loading.value = true;
-    rootNode.value = node
+    rootNode.value = node;
     rootResolve.value = resolve;
-
+     
     return SearchTree(screenPara.value || undefined).then(data => {
       loading.value = false;
+      // 重置前折叠所有节点
+      collapseAllNodes();
 
+      let lazyMode = lazy.value;
+      if (!isLazyInitialized.value) {
+        lazyMode = false;
+      }
 
-      const { tree, hasAnyLeaf } = buildDeptTreeByField(data.rows, {
+      const { tree, hasAnyLeaf } = Tree.buildDeptTreeByField(data.rows, {
         pathKey: 'path',
-        separator: '.'
+        separator: '.',
+        lazyMode: lazyMode,
       });
 
-      // 缓存全量数据并构建节点Map
-      if (hasAnyLeaf) {
-        fullTreeData.value = tree;
-        nodeCodeMap.value = buildNodeCodeMap(tree);
-        resolve(tree);
-        if (props.expandTwoLevels) {
-          nextTick(() => {
-            hasSetDefaultExpand.value = false;
-            setDefaultExpandedNodes();
-          });
+      // 只在第一次加载时初始化
+      if (!isLazyInitialized.value) {
+        isLazyInitialized.value = true;
+
+        if (hasAnyLeaf) {
+          lazy.value = !hasAnyLeaf;
+          fullTreeData.value = tree;
+          nodeCodeMap.value = Tree.buildNodeCodeMap(tree);
         }
       }
-      else {
-        resolve(data.rows);
-      }
-      lazy.value = !hasAnyLeaf;
 
+      // 无论是否第一次加载，都解析树数据
+      const resultData = hasAnyLeaf ? tree : data.rows;
+      resolve(resultData);
+      
+      
+
+      if (props.expandTwoLevels && hasAnyLeaf) {
+        fullTreeData.value = tree;
+        nextTick(() => {
+          hasSetDefaultExpand.value = false;
+          setDefaultExpandedNodes();
+        });
+      }
       load(data, true);
+
     }).catch(error => {
       loading.value = false;
       console.error('加载树数据失败:', error);
     });
   }
 
-  if (node.level >= 1 && lazy.value) {
-    let fields = model.value.searchData("code", node.data.code, 9, 3);
-    let filter = {
-      "searchData": {
-        ...(screenPara.value?.searchData || {}),
-        fields: [
-          ...fields.fields,
-          ...(screenPara.value?.searchData?.fields || [])
-        ]
-      }
-    };
+  // 非懒加载模式或懒加载但已有数据
+  if (!lazy.value && node.data && node.data.children) {
+    resolve(node.data.children);
+    return;
+  }
 
-    return SearchTree(filter).then(data => {
-      loading.value = false;
-      resolve(data.rows);
-      load(data, false);
-    }).catch(error => {
-      loading.value = false;
-      console.error('加载子节点失败:', error);
-    });
+  // 懒加载模式加载子节点
+ // 懒加载模式加载子节点
+  if (node.level >= 1 && lazy.value) {
+   
+  // 设置节点为加载中状态
+  if (node && node.key) {
+    nodeLoadedStatus.value.set(node.key, 'loading');
+  }
+  
+  // 检查是否已经有子节点数据
+  if (node.data.children && node.data.children.length > 0) {
+    if (node && node.key) {
+      nodeLoadedStatus.value.set(node.key, 'loaded');
+    }
+    resolve(node.data.children);
+    return;
   }
+
+  let fields = model.value.searchData("code", node.data.code, 9, 3);
+  let filter = {
+    "searchData": {
+      ...(screenPara.value?.searchData || {}),
+      fields: [
+        ...fields.fields,
+        ...(screenPara.value?.searchData?.fields || [])
+      ]
+    }
+  };
+
+  return SearchTree(filter).then(data => {
+    // 标记节点为已加载
+    if (node && node.key) {
+      nodeLoadedStatus.value.set(node.key, 'loaded');
+    }
+    
+    // 关键：更新节点的数据，添加children属性
+    if (node.data) {
+      node.data.children = data.rows;
+      
+      // 判断是否没有子节点
+      if (!data.rows || data.rows.length === 0) {
+        // 没有子节点，设置节点为叶子节点
+        node.data.isLeaf = true;
+        node.isLeaf = true;
+      } else {
+        // 有子节点，设置节点为非叶子节点
+        node.data.isLeaf = false;
+        node.isLeaf = false;
+      }
+    }
+    
+    resolve(data.rows || []);
+    load(data, false);
+  }).catch(error => {
+    loading.value = false;
+    if (node && node.key) {
+      nodeLoadedStatus.value.delete(node.key);
+    }
+    console.error('加载子节点失败:', error);
+    
+    // 加载失败时，如果没有子节点数据，也标记为叶子节点
+    if (node && node.data) {
+      node.data.isLeaf = true;
+      node.isLeaf = true;
+    }
+    
+    resolve([]);
+  });
+}
 }
 
 // 加载数据
@@ -724,13 +881,26 @@ async function load(data, flagRootNode) {
 
   if (flagRootNode) {
     if (model.value.rows && model.value.rows[0]) {
-      handleNodeClick(model.value.rows[0], true);
+      handleNodeClick(model.value.rows[0]);
     }
     nextTick(() => {
       if (model.value.rows && model.value.rows[0] && model.value.rows[0].code) {
         refTree.value.setCurrentKey(model.value.rows[0].code)
       }
     });
+  } else {
+    // 对于子节点加载，检查是否有数据返回
+    const currentNodeCode = currentData.value?.code;
+    if (currentNodeCode) {
+      const treeNode = refTree.value.getNode(currentNodeCode);
+      if (treeNode && (!data.rows || data.rows.length === 0)) {
+        // 没有子节点数据，标记为叶子节点
+        treeNode.isLeaf = true;
+        if (treeNode.data) {
+          treeNode.data.isLeaf = true;
+        }
+      }
+    }
   }
 }
 
@@ -750,6 +920,10 @@ function SearchTree(m) {
 // 重置树到全量数据
 function resetTree() {
   isSearching.value = false;
+
+  // 重置前折叠所有节点
+  collapseAllNodes();
+
   if (fullTreeData.value.length > 0) {
     refTree.value.store.setData(fullTreeData.value);
     hasSetDefaultExpand.value = false;
@@ -757,16 +931,8 @@ function resetTree() {
 
     if (fullTreeData.value[0] && fullTreeData.value[0].code) {
       nextTick(() => {
-        if (refTree.value && refTree.value.store) {
-          Object.values(refTree.value.store.nodesMap).forEach((node: any) => {
-            if (node) {
-              node.expanded = false;
-            }
-          });
-        }
-
         refTree.value.setCurrentKey(fullTreeData.value[0].code);
-        handleNodeClick(fullTreeData.value[0], true);
+        handleNodeClick(fullTreeData.value[0]);
         setDefaultExpandedNodes();
       });
     }
@@ -778,38 +944,78 @@ function clearSearch() {
   screenPara.value = {};
   isSearching.value = false;
 
-  defaultExpandedKeys.value = [];
-  hasSetDefaultExpand.value = false;
+  // 清除前折叠所有节点
+  collapseAllNodes();
 
   if (fullTreeData.value.length > 0) {
     refTree.value.store.setData(fullTreeData.value);
 
     nextTick(() => {
-      if (refTree.value && refTree.value.store) {
-        Object.values(refTree.value.store.nodesMap).forEach((node: any) => {
-          if (node) {
-            node.expanded = false;
-          }
-        });
-      }
-
       setDefaultExpandedNodes();
 
       if (fullTreeData.value[0] && fullTreeData.value[0].code) {
         refTree.value.setCurrentKey(fullTreeData.value[0].code);
-        handleNodeClick(fullTreeData.value[0], true);
+        handleNodeClick(fullTreeData.value[0]);
       }
     });
   }
 }
 
-//节点点击事件
-function handleNodeClick(data, formType) {
-
+// 修改：节点点击事件，支持自动展开和懒加载
+function handleNodeClick(data) { 
+  
   closeMenu();
-  if (data && formType) {
-    refTree.value.setCurrentKey(data.code)
+  
+  // 设置当前选中节点
+  if (data && data.code) {
+    refTree.value?.setCurrentKey(data.code);
+    
+    // 如果是懒加载模式，检查节点是否需要加载子节点
+    if (lazy.value) {
+      const treeNode = refTree.value.getNode(data.code);
+      if (treeNode) {
+        // 如果节点不是叶子节点但尚未加载，触发加载
+        if (!treeNode.isLeaf && !treeNode.loaded && !treeNode.loading) {
+          loadNode(treeNode, (children) => {
+            if (children && children.length > 0) {
+              // 有子节点，展开节点
+              if (!treeNode.expanded) {
+                treeNode.expanded = true;
+              }
+            } else {
+              // 没有子节点，标记为叶子节点
+              treeNode.isLeaf = true;
+              treeNode.loaded = true;
+              
+              // 更新原始数据中的 isLeaf 属性
+              if (treeNode.data) {
+                treeNode.data.isLeaf = true;
+              }
+              
+              // 如果有父节点，更新父节点的children数组
+              if (treeNode.parent && treeNode.parent.data) {
+                const parentData = treeNode.parent.data;
+                if (parentData.children) {
+                  // 找到当前节点在父节点children中的索引
+                  const index = parentData.children.findIndex(child => child.code === data.code);
+                  if (index !== -1) {
+                    parentData.children[index].isLeaf = true;
+                  }
+                }
+              }
+            }
+          });
+        } else if (treeNode.children && treeNode.children.length > 0 && !treeNode.expanded) {
+          // 如果节点已经有子节点但未展开，展开节点
+          treeNode.expanded = true;
+        } else if (treeNode.loaded && treeNode.children && treeNode.children.length === 0) {
+          // 节点已加载但没有子节点，确保标记为叶子节点
+          treeNode.isLeaf = true;
+        }
+      }
+    }
   }
+  
   if (LastClickNode.value != data) {
     LastClickNode.value = data;
     let rowRouter = model.value.rowSelectRouter;
@@ -833,40 +1039,10 @@ function handleNodeClick(data, formType) {
   }
 }
 
-//右键菜单
-function rightClick(event, object, Node) {
-  nodeRef.value = treeNodeRefMap.value[`node_Ref_${object.code}`]
-
-  currentData.value = object
-  currentNode.value = Node
-  let actionIndex = 0;
-
-  allowedRoutes.value = (model.value.actionRouter || []).filter(v => {
-    const val = currentData.value[v.rightField]
-    const hit = val == '1' || val === undefined || val === null;
-    return hit;
-  })
-
-  allowedRoutes.value?.forEach(() => {
-    menuVisible.value = true
-    actionIndex += 1
-  })
-
-  if (menuVisible.value) {
-    document.addEventListener('click', closeMenu)
-  }
-}
-
-//关闭菜单
-function closeMenu() {
-  menuVisible.value = false;
-  nodeRef.value = null
-  currentData.value = { ...currentData.value, code: "" }
-  document.removeEventListener('click', closeMenu)
-}
 
 // 菜单路由
 function routerClickHandler(field) {
+  isManualClose.value = true;
   var submitData = {};
   field.submitFormField.forEach(v => {
     submitData[v] = currentData.value[v];
@@ -893,29 +1069,232 @@ function routerClickHandler(field) {
   })
 }
 
-//删除树节点
-function removeNode(newData) {
-  getNextClickNode(currentNode.value)
-  refTree.value.remove(currentNode.value);
-
-}
-
 //新增树节点
 function addNode(newData) {
-  refTree.value.append(newData, currentNode.value)
-  handleNodeClick(newData, true)
+  if (!lazy.value) {
+    // 全量数据模式：手动更新全量数据和树显示
+    const parentCode = currentData.value.code;
+    const parentPath = currentData.value.path || '';
+
+    // 设置新节点的属性
+    const newNode = {
+      ...newData,
+      // 如果后端没有返回path，需要构建
+      path: parentPath ? `${parentPath}.${newData.code}` : newData.code,
+      // 确保children存在
+      children: newData.children || [],
+      // 标识是否为叶子节点
+      isLeaf: true
+    };
+
+    // 在全量数据中找到父节点并添加
+    const findAndAdd = (nodes, parentCode) => {
+      for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].code === parentCode) {
+          if (!nodes[i].children) {
+            nodes[i].children = [];
+          }
+          nodes[i].children.push(newNode);
+          nodes[i].isLeaf = false; // 父节点不再是叶子节点
+          return true;
+        }
+
+        if (nodes[i].children && nodes[i].children.length > 0) {
+          if (findAndAdd(nodes[i].children, parentCode)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+
+    // 更新全量数据
+    findAndAdd(fullTreeData.value, parentCode);
+
+    // 更新nodeCodeMap
+    nodeCodeMap.value.set(newNode.code, newNode);
+
+    // 如果是搜索状态，需要同时更新当前显示的数据
+    if (isSearching.value && screenPara.value) {
+      filterFullTreeData(screenPara.value);
+    } else {
+      // 非搜索状态，直接重新设置数据
+      refTree.value.store.setData([...fullTreeData.value]);
+    }
+
+    // 刷新树显示
+    nextTick(() => {
+      // 展开父节点
+      const parentNode = refTree.value.getNode(parentCode);
+      if (parentNode && !parentNode.expanded) {
+        refTree.value.store.setCurrentNode(parentNode);
+        parentNode.expanded = true;
+      }
+
+      // 设置新节点为当前选中
+      handleNodeClick(newNode);
+    });
+  } else {
+    // 懒加载模式：使用原有方法
+    refTree.value.append(newData, currentNode.value);
+    handleNodeClick(newData);
+  }
 }
 
 //修改树节点
 function updateNode(newData) {
-  for (let key in newData) {
-    if (typeof newData[key] === 'object') {
-      currentData.value[key] = { ...currentData.value[key], ...newData[key] }
+  if (!lazy.value) {
+    // 全量数据模式：更新全量数据
+    const updateInTree = (nodes, nodeCode) => {
+      for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].code === nodeCode) {
+          // 合并数据
+          nodes[i] = { ...nodes[i], ...newData };
+          return true;
+        }
+
+        if (nodes[i].children && nodes[i].children.length > 0) {
+          if (updateInTree(nodes[i].children, nodeCode)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+
+    // 更新全量数据
+    updateInTree(fullTreeData.value, currentData.value.code);
+
+    // 更新nodeCodeMap
+    nodeCodeMap.value.set(currentData.value.code, {
+      ...nodeCodeMap.value.get(currentData.value.code),
+      ...newData
+    });
+
+    // 如果是搜索状态，重新过滤显示
+    if (isSearching.value && screenPara.value) {
+      filterFullTreeData(screenPara.value);
     } else {
-      currentData.value[key] = newData[key];
+      // 非搜索状态，直接重新设置数据
+      refTree.value.store.setData([...fullTreeData.value]);
     }
+
+    // 刷新显示并保持选中状态
+    nextTick(() => {
+      refTree.value.setCurrentKey(currentData.value.code);
+      handleNodeClick({ ...currentData.value, ...newData });
+    });
+  } else {
+    // 懒加载模式：使用原有方法
+    for (let key in newData) {
+      if (typeof newData[key] === 'object') {
+        currentData.value[key] = { ...currentData.value[key], ...newData[key] }
+      } else {
+        currentData.value[key] = newData[key];
+      }
+    }
+    handleNodeClick(newData);
   }
-  handleNodeClick(newData, true)
+}
+
+//删除树节点
+function removeNode(newData) {
+  if (!lazy.value) {
+    // 全量数据模式：从全量数据中删除
+    let parentNode = null;
+    let parentCode = null;
+
+    const removeFromTree = (nodes, nodeCode) => {
+      for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].code === nodeCode) {
+          // 记录父节点信息（如果是当前循环的节点）
+          parentCode = findParentCodeInFullTree(nodeCode);
+          if (parentCode) {
+            const parent = findNodeByCode(fullTreeData.value, parentCode);
+            if (parent) {
+              parentNode = parent;
+            }
+          }
+
+          // 删除节点
+          nodes.splice(i, 1);
+          nodeCodeMap.value.delete(nodeCode);
+          return true;
+        }
+
+        if (nodes[i].children && nodes[i].children.length > 0) {
+          if (removeFromTree(nodes[i].children, nodeCode)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+
+    // 从全量数据中删除
+    removeFromTree(fullTreeData.value, currentData.value.code);
+
+    // 更新父节点的 isLeaf 状态
+    if (parentCode && parentNode) {
+      // 重新检查父节点是否还有子节点
+      const hasChildren = parentNode.children && parentNode.children.length > 0;
+      parentNode.isLeaf = !hasChildren;
+
+      // 同步更新 nodeCodeMap
+      if (nodeCodeMap.value.has(parentCode)) {
+        const updatedParent = nodeCodeMap.value.get(parentCode);
+        updatedParent.isLeaf = !hasChildren;
+        nodeCodeMap.value.set(parentCode, updatedParent);
+      }
+    } else {
+      // 如果是根节点被删除，不需要更新 isLeaf
+    }
+
+    // 如果是搜索状态，重新过滤显示
+    if (isSearching.value && screenPara.value) {
+      filterFullTreeData(screenPara.value);
+    } else {
+      // 非搜索状态，直接重新设置数据
+      refTree.value.store.setData([...fullTreeData.value]);
+    }
+
+    // 查找下一个可点击的节点
+    getNextClickNode();
+  } else {
+    // 懒加载模式：使用原有方法
+    getNextClickNode();
+    refTree.value.remove(currentNode.value);
+  }
+}
+
+// 根据 code 查找节点
+function findNodeByCode(nodes, targetCode) {
+  for (const node of nodes) {
+    if (node.code === targetCode) {
+      return node;
+    }
+
+    if (node.children && node.children.length > 0) {
+      const found = findNodeByCode(node.children, targetCode);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+// 查找节点的父节点（返回父节点本身，不只是code）
+function findParentNodeInFullTree(nodes, targetCode, parent = null) {
+  for (const node of nodes) {
+    if (node.code === targetCode) {
+      return parent;
+    }
+
+    if (node.children && node.children.length > 0) {
+      const found = findParentNodeInFullTree(node.children, targetCode, node);
+      if (found) return found;
+    }
+  }
+  return null;
 }
 
 function getNextClickNode() {
@@ -928,7 +1307,7 @@ function getNextClickNode() {
   } else if (node?.parent) {
     data = node.parent.data;
   }
-  handleNodeClick(data, true)
+  handleNodeClick(data)
 }
 
 /** 过滤节点（全量数据模式下使用） */
@@ -937,98 +1316,21 @@ function filterNode(value, data) {
   return data.name.toLowerCase().includes(value.toLowerCase())
 }
 
-function buildDeptTreeByField(flatList, opt = {}) {
-  const {
-    pathKey = 'path',
-    separator = '.',
-    sortKey = 'sort'
-  } = opt;
-
-  // 检查第一行是否有 sort 字段
-  const firstItem = flatList.length > 0 ? flatList[0] : null;
-  const actualSortKey = firstItem && firstItem.hasOwnProperty(sortKey) ? sortKey : pathKey;
-
-  // 按路径排序，确保父节点在前
-  const sortedList = [...flatList].sort((a, b) => {
-    const aPath = a[pathKey] || '';
-    const bPath = b[pathKey] || '';
-    return aPath.length - bPath.length || aPath.localeCompare(bPath);
-  });
-
-  const pathMap = new Map(); // path -> node
-  const root = [];
-
-  for (const item of sortedList) {
-    const path = item[pathKey];
-    if (!path) continue;
-
-    const node = {
-      ...item,
-      children: [],
-      isLeaf: true // 默认为叶子节点，后续会更新
-    };
-
-    // 添加到路径映射
-    pathMap.set(path, node);
-
-    // 查找父节点
-    const lastDotIndex = path.lastIndexOf(separator);
-    if (lastDotIndex > -1) {
-      const parentPath = path.substring(0, lastDotIndex);
-      const parentNode = pathMap.get(parentPath);
-      
-      if (parentNode) {
-        parentNode.children.push(node);
-        parentNode.isLeaf = false; // 有子节点，所以不是叶子
-        continue;
-      }
-    }
-
-    // 没有找到父节点，或者没有父路径，则作为根节点
-    root.push(node);
-  }
-
-  // 排序：按 sortKey 或 path 排序
-  const sortTree = (nodes) => {
-    nodes.sort((a, b) => {
-      const aVal = a[actualSortKey] || a[pathKey] || '';
-      const bVal = b[actualSortKey] || b[pathKey] || '';
-      return String(aVal).localeCompare(String(bVal));
-    });
-
-    nodes.forEach(node => {
-      if (node.children && node.children.length > 0) {
-        sortTree(node.children);
-      }
-    });
-  };
-
-  sortTree(root);
-
-  const hasAnyLeaf = root.some(n => !n.isLeaf);
-  return { tree: root, hasAnyLeaf };
-}
-
 function findSearchFieldValue(searchFields, targetKey, options = {}) {
   const {
-    keyFields = ['fieldName1', 'groupName'], // 要查找的key字段列表
-    valueField = 'searchValue1', // 要返回值的字段
+    keyFields = ['fieldName1', 'groupName'],
+    valueField = 'searchValue1',
     defaultValue = 2
   } = options;
 
-  // 检查数据结构
   if (!searchFields?.searchData?.fields?.length) {
     return defaultValue;
   }
 
-  // 遍历fields数组
   for (const field of searchFields.searchData.fields) {
-    // 检查所有可能的key字段
     for (const keyField of keyFields) {
       if (field[keyField] === targetKey) {
-        // 找到了匹配的key，返回对应的值
         const value = field[valueField];
-        // 如果值为undefined、null或空字符串，返回默认值
         return value !== undefined && value !== null && value !== ''
           ? value
           : defaultValue;
@@ -1039,8 +1341,6 @@ function findSearchFieldValue(searchFields, targetKey, options = {}) {
   return defaultValue;
 }
 
-
-
 // 暴露方法
 defineExpose({
   search,
@@ -1099,6 +1399,8 @@ defineExpose({
 .node_content {
   display: flex;
   align-items: center;
+  position: relative;
+  width: 100%;
 }
 
 .node-icon {
@@ -1109,20 +1411,140 @@ defineExpose({
 .box-menu {
   z-index: 1000;
   background-color: #fff;
-  padding: 10px;
+  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 4px 0;
 
   div {
     cursor: pointer;
+
   }
 }
 
+.box-menu.box-menu-icons {
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 8px 0px;
+  gap: 0px;
+  line-height: 15px;
+  background: transparent !important;
+
+}
+
+.box-menu-icons .opertion {
+  width: 16px;
+  height: 16px;
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  margin: 0 2px !important;
+}
+
+.box-menu-icons .opertion:hover {
+  background-color: #f5f7fa;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.box-menu-icons .opertion img {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+}
+
+.box-menu-icons .opertion div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
 .box-menu .opertion {
+  display: flex;
+  align-items: center;
+  padding: 4px;
   cursor: pointer;
-  line-height: 30px;
+  font-size: 14px;
+  color: #606266;
+  transition: all 0.2s ease;
+  line-height: 20px;
+  margin: 0 4px;
+  border-radius: 6px;
+  position: relative;
+  overflow: hidden;
+
+
 }
 
 .box-menu .opertion:hover {
   color: var(--btnHoverRed);
-  background-color: var(--el-fill-color-light);
+  background-color: #f5f7fa;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.box-menu .opertion:active {
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.box-menu .opertion:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 16px;
+  right: 16px;
+  height: 1px;
+  background-color: #f0f0f0;
+}
+
+.box-menu .opertion:last-child {
+  margin-bottom: 0;
+}
+
+.box-menu .opertion img {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.box-menu .opertion div {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: center; // 垂直居中
+  text-align: center;
+}
+
+/* 菜单激活状态 */
+.box-menu .opertion.active {
+  background-color: #ecf5ff;
+  color: var(--centalineBlue);
+}
+
+/* 悬停模式下的节点样式 */
+.node_content:hover {
+  background-color: #f5f7fa;
+}
+
+.popper-transparent {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+
+}
+
+// .popper-transparent .el-popper__arrow::before,
+// .popper-menu .el-popper__arrow::before {
+//   background: transparent !important;
+// }
+
+.popper-menu {
+  padding: 0 !important;
 }
 </style>