no message

web3/packages/mind-map/src/store/helpers/addCustomContentToNode.ts

@@ -12,9 +12,16 @@ const ICON_DELETE =
 
 /**
  * 为节点添加自定义内容 - 添加按钮工具栏
+ * @param allowRemoveWithChildren 是否允许删除有子节点的节点，默认为false
  * @returns 自定义节点内容配置对象
  */
-export function getCustomNodeContent() {
+export function getCustomNodeContent(
+  params: {
+    allowRemoveWithChildren?: boolean;
+  } = {
+    allowRemoveWithChildren: false,
+  }
+) {
   // 按钮配置
   const buttonConfig = {
     gap: 4, // 按钮间距
@@ -24,7 +31,7 @@ export function getCustomNodeContent() {
   };
 
   // 所有按钮配置
-  const buttons = [
+  const baseButtons = [
     {
       icon: ICON_PLUS,
       color: "#4CAF50",
@@ -35,11 +42,6 @@ export function getCustomNodeContent() {
     { icon: ICON_DELETE, color: "#F44336", title: "删除", action: "delete" },
   ];
 
-  // 预计算总宽度
-  const totalWidth =
-    buttons.length * buttonConfig.width +
-    (buttons.length - 1) * buttonConfig.gap;
-
   // 跟踪激活状态和元素，用于更新显示/隐藏
   const nodeActiveState: Record<string, boolean> = {};
   const nodeElements: Record<string, HTMLElement> = {};
@@ -47,11 +49,27 @@ export function getCustomNodeContent() {
   return {
     // 创建自定义DOM元素
     create: (node: MindMapNode) => {
+      const { getMindMapInstance } = useMindMapStore();
+
       const container = document.createElement("div");
       container.style.gap = `${buttonConfig.gap}px`;
 
       container.style.display = "none";
 
+      // 根据节点是否有子节点以及 allowRemoveWithChildren 参数确定显示的按钮
+
+      const buttons = baseButtons.filter((btn) => {
+        if (btn.action === "delete" && !params.allowRemoveWithChildren) {
+          return node.getChildrenLength() === 0;
+        }
+        return true;
+      });
+
+      // 重新计算总宽度
+      const totalWidth =
+        buttons.length * buttonConfig.width +
+        (buttons.length - 1) * buttonConfig.gap;
+
       nodeElements[node.uid] = container;
 
       // 存储节点的激活状态
@@ -88,8 +106,6 @@ export function getCustomNodeContent() {
         btn.onclick = (e) => {
           e.stopPropagation();
 
-          const { getMindMapInstance } = useMindMapStore();
-
           // 根据按钮类型执行不同操作
           switch (action) {
             case "addChild":
@@ -131,9 +147,6 @@ export function getCustomNodeContent() {
         container.appendChild(btn);
       });
 
-      // 监听节点激活状态变化
-      const { getMindMapInstance } = useMindMapStore();
-
       getMindMapInstance()?.on(
         "node_active",
         (_: MindMapNode, activeNodeList: MindMapNode[]) => {
@@ -193,7 +206,6 @@ export function getCustomNodeContent() {
       if (elementWidth > nodeWidth) {
         //
       }
-    
     },
   };
 }

web3/packages/mind-map/src/store/modules/mindMap.ts

@@ -49,7 +49,9 @@ export const useMindMapStore = defineStore(
 
         isUseCustomNodeContent : true, // 是否使用自定义节点内容
         // 添加自定义节点内容
-        addCustomContentToNode: getCustomNodeContent(),
+        addCustomContentToNode: getCustomNodeContent({
+          allowRemoveWithChildren: false, 
+        }),
 
         demonstrateConfig: {
           openBlankMode: true,