fix: 修改泳道图宽度设置 优化tag标签设置

apps/designer/.umirc.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "umi";
 
 export default defineConfig({
   base: '/',
+  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
   favicons: [
     '/favicon.ico'
   ],

apps/designer/src/components/lane/Pool.tsx

@@ -2,17 +2,18 @@ import { Node } from "@antv/x6";
 import CustomInput from "../CustomInput";
 import { LaneItem, StageItem } from "@/types";
 import { useEffect, useRef, useState } from "react";
+import { Input, InputNumber, Popover } from "antd";
 
-export default function Pool({ 
+export default function Pool({
   node,
   fillContent,
   strokeWidth,
   strokeColor,
- }: { 
-  node: Node,
-  fillContent: string,
-  strokeWidth: number,
-  strokeColor: string,
+}: {
+  node: Node;
+  fillContent: string;
+  strokeWidth: number;
+  strokeColor: string;
 }) {
   const {
     poolName,
@@ -39,50 +40,52 @@ export default function Pool({
     });
   };
 
-  const handleSetControl = (type: "stage" | "lane", index: number) => {
+  const handleSetControl = (type: "stage" | "lane", index: number) => {};
 
-  };
-
-  const dragStart = useRef<{x: number, y: number}>();
-  const dragRef = useRef<{ 
-    originPosition: {x: number, y: number}, 
-    target: string, 
-    type: 'x' | 'y',
-    el: HTMLDivElement
+  const dragStart = useRef<{ x: number; y: number }>();
+  const dragRef = useRef<{
+    originPosition: { x: number; y: number };
+    target: string;
+    type: "x" | "y";
+    el: HTMLDivElement;
   }>();
 
   // TODO 拖拽边框
   // 1.拖拽开始，记录开始位置
   // 记录拖对象、方向、位置
-  const handleDragStart = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, target: string, type: 'x' | 'y') => {
-    console.log('mouse down', e)
+  const handleDragStart = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    target: string,
+    type: "x" | "y"
+  ) => {
+    console.log("mouse down", e);
     dragRef.current = {
-      originPosition: {x: e.clientX, y: e.clientY},
+      originPosition: { x: e.clientX, y: e.clientY },
       el: e.currentTarget,
       target,
       type,
     };
-  }
+  };
 
   // 2.拖拽中
   // 更新拖拽对象位置
   const handleDragMove = (e: MouseEvent) => {
-    if(dragRef.current) {
-      const { originPosition, type, el} = dragRef.current;
-      const {clientX, clientY} = e;
+    if (dragRef.current) {
+      const { originPosition, type, el } = dragRef.current;
+      const { clientX, clientY } = e;
       const diffX = clientX - originPosition.x;
       const diffY = clientY - originPosition.y;
     }
-  }
+  };
 
   // 3.拖拽结束
   // 更新设置对象
   const handleDragEnd = () => {
-    console.log('mouse up', dragStart.current)
+    console.log("mouse up", dragStart.current);
     dragRef.current = undefined;
     document.removeEventListener("mouseup", handleDragEnd);
     document.removeEventListener("mousemove", handleDragMove);
-  }
+  };
 
   useEffect(() => {
     document.addEventListener("mouseup", handleDragEnd);
@@ -94,6 +97,28 @@ export default function Pool({
     };
   }, []);
 
+  // 设置阶段宽度
+  const handleChangeStageWidth = (val: number) => {
+    node.setData({
+      stageWidth: val,
+    });
+  };
+
+  // 设置泳道宽度
+  const handleChangeLaneWidth = (index: number, val: number | null) => {
+    node.setData({
+      lane: lane.map((item: LaneItem, i: number) => {
+        if (index === i) {
+          return {
+            ...item,
+            width: val,
+          };
+        }
+        return item;
+      }),
+    });
+  };
+
   return direction === "vertical" ? (
     // 垂直泳池
     <>
@@ -129,54 +154,85 @@ export default function Pool({
           <div className="stage h-full w-full absolute left-0 top-0">
             {stage.map((stageItem: StageItem, index: number) => {
               return (
-                <div
-                  key={index}
-                  style={{
-                    width: "100%",
-                    height: stageItem.height - strokeWidth,
-                    borderBottom:
-                      index < stage.length - 1
-                        ? `solid ${strokeWidth}px ${strokeColor}`
-                        : "node",
-                  }}
-                >
+                <>
                   <div
-                    className="relative stage-item cursor-move"
+                    key={index}
                     style={{
-                      width: stageWidth,
-                      background: fillContent,
-                      height: stageItem.height - 2 * strokeWidth,
-                      borderRight: `solid ${strokeWidth}px ${strokeColor}`,
+                      width: "100%",
+                      height: stageItem.height - strokeWidth,
+                      borderBottom:
+                        index < stage.length - 1
+                          ? `solid ${strokeWidth}px ${strokeColor}`
+                          : "node",
                     }}
-                    onMouseEnter={handleStartMove}
-                    onMouseLeave={handleEndMove}
-                    onClick={() => handleSetControl("stage", index)}
                   >
-                    <CustomInput
-                      value={stageItem.name}
-                      styles={text}
-                      node={node}
-                      txtStyle={{
-                        transform: `rotate(-90deg) translateX(-${stageItem.height}px)`,
-                        transformOrigin: "0 0",
-                        height: stageWidth,
-                        width: stageItem.height,
-                      }}
-                      onChange={(val) => {
-                        node.setData({
-                          stage: stage.map((item: StageItem, i: number) => {
-                            if (index === i) {
-                              return {
-                                ...item,
-                                name: val,
-                              };
-                            }
-                          }),
-                        });
-                      }}
-                    />
+                    <Popover
+                      placement="right"
+                      content={
+                        <div className="flex items-center gap-8px">
+                          <span>宽度:</span>
+                          <InputNumber
+                            min={10}
+                            max={300}
+                            value={stageWidth}
+                            onChange={(val) => handleChangeStageWidth(val)}
+                          />
+                        </div>
+                      }
+                    >
+                      <div
+                        className="relative stage-item cursor-move"
+                        style={{
+                          width: stageWidth,
+                          background: fillContent,
+                          height: stageItem.height - 2 * strokeWidth,
+                          borderRight: `solid ${strokeWidth}px ${strokeColor}`,
+                        }}
+                        onMouseEnter={handleStartMove}
+                        onMouseLeave={handleEndMove}
+                        onClick={() => handleSetControl("stage", index)}
+                      >
+                        <CustomInput
+                          value={stageItem.name}
+                          styles={text}
+                          node={node}
+                          txtStyle={{
+                            transform: `rotate(-90deg) translateX(-${stageItem.height}px)`,
+                            transformOrigin: "0 0",
+                            height: stageWidth,
+                            width: stageItem.height,
+                          }}
+                          onChange={(val) => {
+                            node.setData({
+                              stage: stage.map((item: StageItem, i: number) => {
+                                if (index === i) {
+                                  return {
+                                    ...item,
+                                    name: val,
+                                  };
+                                }
+                              }),
+                            });
+                          }}
+                        />
+                        {/* {
+                        <div
+                          className="contor absolte"
+                          style={{
+                            width: "100%",
+                            left: 0,
+                            top: 0,
+                            height: stageItem.height - strokeWidth,
+                            border: "solid 1px #3dafe4",
+                          }}
+                        >
+                          <div className="right-point w-8px h-8px border-solid bg-#fff border-color-#3dafe4 border-width-1px absolute right--4px top-50%"></div>
+                        </div>
+                      } */}
+                      </div>
+                    </Popover>
                   </div>
-                </div>
+                </>
               );
             })}
           </div>
@@ -199,36 +255,49 @@ export default function Pool({
                     : `solid ${strokeWidth}px ${strokeColor}`,
               }}
             >
-              <div
-                className="flex-1 w-full relative cursor-move"
-                style={{
-                  height: laneHeadHeight,
-                  background: fillContent,
-                  borderBottom: `solid ${strokeWidth}px ${strokeColor}`,
-                }}
-                onMouseEnter={handleStartMove}
-                onMouseLeave={handleEndMove}
-                onClick={() => handleSetControl("lane", index)}
+              <Popover
+                content={
+                  <div className="flex items-center gap-8px">
+                    <span>宽度:</span>
+                    <InputNumber
+                      min={20}
+                      value={item.width}
+                      onChange={(val) => handleChangeLaneWidth(index, val)}
+                    />
+                  </div>
+                }
               >
-                <CustomInput
-                  value={item.name}
-                  styles={text}
-                  node={node}
-                  onChange={(val) => {
-                    node.setData({
-                      lane: lane.map((item: LaneItem, i: number) => {
-                        if (index === i) {
-                          return {
-                            ...item,
-                            name: val,
-                          };
-                        }
-                        return item;
-                      }),
-                    });
+                <div
+                  className="flex-1 w-full relative cursor-move"
+                  style={{
+                    height: laneHeadHeight,
+                    background: fillContent,
+                    borderBottom: `solid ${strokeWidth}px ${strokeColor}`,
                   }}
-                />
-              </div>
+                  onMouseEnter={handleStartMove}
+                  onMouseLeave={handleEndMove}
+                  onClick={() => handleSetControl("lane", index)}
+                >
+                  <CustomInput
+                    value={item.name}
+                    styles={text}
+                    node={node}
+                    onChange={(val) => {
+                      node.setData({
+                        lane: lane.map((item: LaneItem, i: number) => {
+                          if (index === i) {
+                            return {
+                              ...item,
+                              name: val,
+                            };
+                          }
+                          return item;
+                        }),
+                      });
+                    }}
+                  />
+                </div>
+              </Popover>
             </div>
           ))}
         </div>
@@ -280,35 +349,49 @@ export default function Pool({
                         : "node",
                   }}
                 >
-                  <div
-                    className="relative stage-item cursor-move"
-                    style={{
-                      width: stageItem.height - 2 * strokeWidth,
-                      background: fillContent,
-                      height: stageWidth,
-                      borderBottom: `solid ${strokeWidth}px ${strokeColor}`,
-                    }}
-                    onMouseEnter={handleStartMove}
-                    onMouseLeave={handleEndMove}
+                  <Popover
+                    content={
+                      <div className="flex items-center gap-8px">
+                        <span>高度:</span>
+                        <InputNumber
+                          min={10}
+                          max={300}
+                          value={stageWidth}
+                          onChange={(val) => handleChangeStageWidth(val)}
+                        />
+                      </div>
+                    }
                   >
-                    <CustomInput
-                      value={stageItem.name}
-                      styles={text}
-                      node={node}
-                      onChange={(val) => {
-                        node.setData({
-                          stage: stage.map((item: StageItem, i: number) => {
-                            if (index === i) {
-                              return {
-                                ...item,
-                                name: val,
-                              };
-                            }
-                          }),
-                        });
+                    <div
+                      className="relative stage-item cursor-move"
+                      style={{
+                        width: stageItem.height - 2 * strokeWidth,
+                        background: fillContent,
+                        height: stageWidth,
+                        borderBottom: `solid ${strokeWidth}px ${strokeColor}`,
                       }}
-                    />
-                  </div>
+                      onMouseEnter={handleStartMove}
+                      onMouseLeave={handleEndMove}
+                    >
+                      <CustomInput
+                        value={stageItem.name}
+                        styles={text}
+                        node={node}
+                        onChange={(val) => {
+                          node.setData({
+                            stage: stage.map((item: StageItem, i: number) => {
+                              if (index === i) {
+                                return {
+                                  ...item,
+                                  name: val,
+                                };
+                              }
+                            }),
+                          });
+                        }}
+                      />
+                    </div>
+                  </Popover>
                 </div>
               );
             })}
@@ -337,42 +420,56 @@ export default function Pool({
                     : `solid ${strokeWidth}px ${strokeColor}`,
               }}
             >
-              <div
-                className="flex-1 w-full relative cursor-move"
-                style={{
-                  width: laneHeadHeight,
-                  height: "100%",
-                  background: fillContent,
-                  borderRight: `solid ${strokeWidth}px ${strokeColor}`,
-                }}
-                onMouseEnter={handleStartMove}
-                onMouseLeave={handleEndMove}
+              <Popover
+                placement="right"
+                content={
+                  <div className="flex items-center gap-8px">
+                    <span>高度:</span>
+                    <InputNumber
+                      min={20}
+                      value={item.width}
+                      onChange={(val) => handleChangeLaneWidth(index, val)}
+                    />
+                  </div>
+                }
               >
-                <CustomInput
-                  value={item.name}
-                  styles={text}
-                  node={node}
-                  txtStyle={{
-                    transform: `rotate(-90deg) translateX(-${item.width}px)`,
-                    transformOrigin: "0 0",
-                    width: item.width - strokeWidth,
-                    height: laneHeadHeight,
-                  }}
-                  onChange={(val) => {
-                    node.setData({
-                      lane: lane.map((item: LaneItem, i: number) => {
-                        if (index === i) {
-                          return {
-                            ...item,
-                            name: val,
-                          };
-                        }
-                        return item;
-                      }),
-                    });
+                <div
+                  className="flex-1 w-full relative cursor-move"
+                  style={{
+                    width: laneHeadHeight,
+                    height: "100%",
+                    background: fillContent,
+                    borderRight: `solid ${strokeWidth}px ${strokeColor}`,
                   }}
-                />
-              </div>
+                  onMouseEnter={handleStartMove}
+                  onMouseLeave={handleEndMove}
+                >
+                  <CustomInput
+                    value={item.name}
+                    styles={text}
+                    node={node}
+                    txtStyle={{
+                      transform: `rotate(-90deg) translateX(-${item.width}px)`,
+                      transformOrigin: "0 0",
+                      width: item.width - strokeWidth,
+                      height: laneHeadHeight,
+                    }}
+                    onChange={(val) => {
+                      node.setData({
+                        lane: lane.map((item: LaneItem, i: number) => {
+                          if (index === i) {
+                            return {
+                              ...item,
+                              name: val,
+                            };
+                          }
+                          return item;
+                        }),
+                      });
+                    }}
+                  />
+                </div>
+              </Popover>
             </div>
           ))}
         </div>

apps/designer/src/components/lane/hooks/useLane.ts

@@ -41,7 +41,7 @@ export const useLane = (node: Node, graph: Graph) => {
     }
 
     node.setSize({ width, height });
-  }, [lane.length]);
+  }, [ lane, stage]);
 
   // 监听宽高变化
   if (!lister.current) {
@@ -59,7 +59,7 @@ export const useLane = (node: Node, graph: Graph) => {
             : args?.current?.height || 0) -
           originWidth -
           (stage.length ? stageWidth : 0);
-        console.log(offset )
+
         if (offset) {
           node.setData({
             lane: lane.map((item: LaneItem) => {

apps/designer/src/components/lane/horizontalLane.tsx

@@ -63,7 +63,7 @@ register({
 });
 
 const horizontalLane: CompoundedComponent = {
-  name: "泳道(垂直)",
+  name: "泳道(水平)",
   icon: require("./image/horizontalLane.png"),
   node: {
     shape: "custom-react-horizontalLane",

apps/designer/src/components/lane/horizontalPool.tsx

@@ -64,7 +64,7 @@ register({
 });
 
 const horizontalPool: CompoundedComponent = {
-  name: "泳池(垂直)",
+  name: "泳池(水平)",
   icon: require("./image/horizontalPool.png"),
   node: {
     shape: "custom-react-horizontalPool",

apps/designer/src/components/mindMap/CustomTag.tsx

@@ -7,10 +7,12 @@ export default function CustomTag(
     onAdd?: () => void;
     onDelete?: () => void;
     onChangeTag: (tagInfo: { color: string; name: string }) => void;
+    hideEditBtn?: boolean;
   }
 ) {
   const [title, setTitle] = useState(props.title);
   const [open, setOpen] = useState(false);
+  const [showIcon, setShowIcon] = useState(false);
 
   const colors = [
     "#e75e5b",
@@ -51,8 +53,8 @@ export default function CustomTag(
 
   const handleChange = (key: string, value: string) => {
     props?.onChangeTag?.({
-      name: props.title || '',
-      color: props.color || '',
+      name: props.title || "",
+      color: props.color || "",
       [key]: value,
     });
   };
@@ -63,7 +65,7 @@ export default function CustomTag(
         trigger={"click"}
         open={open}
         placement="bottom"
-        onOpenChange={() => setOpen(!open)}
+        onOpenChange={(visible) => !visible && setOpen(visible)}
         content={
           <div>
             <Input
@@ -73,10 +75,10 @@ export default function CustomTag(
                 setTitle(e.target.value);
               }}
               onBlur={() => {
-                handleChange("name", title || props.title || '空标签');
+                handleChange("name", title || props.title || "空标签");
               }}
               onPressEnter={() => {
-                handleChange("name", title || props.title || '空标签');
+                handleChange("name", title || props.title || "空标签");
               }}
             />
 
@@ -89,8 +91,20 @@ export default function CustomTag(
                   onClick={() => handleChange("color", color)}
                 />
               ))}
-              <ColorPicker format="hex" onChange={(value) => handleChange("color", value.toHexString())}>
-                <Button type="text" icon={<i className="iconfont icon-bi" style={{color: props.color}}/>} size="small"></Button>
+              <ColorPicker
+                format="hex"
+                onChange={(value) => handleChange("color", value.toHexString())}
+              >
+                <Button
+                  type="text"
+                  icon={
+                    <i
+                      className="iconfont icon-bi"
+                      style={{ color: props.color }}
+                    />
+                  }
+                  size="small"
+                ></Button>
               </ColorPicker>
             </div>
             <div className="flex justify-between">
@@ -115,7 +129,23 @@ export default function CustomTag(
           </div>
         }
       >
-        <Tag {...props} onClick={() => setOpen(true)} />
+        <Tag
+          {...props}
+          onMouseEnter={() => setShowIcon(true)}
+          onMouseLeave={() => setShowIcon(false)}
+          icon={
+            !props.hideEditBtn && showIcon && (
+              <i
+                className="iconfont icon-bianji- text-12px mr-4px cursor-pointer"
+                onClick={() => setOpen(true)}
+              />
+            )
+          }
+          onClick={(e) => {
+            props?.onClick?.(e);
+            props.hideEditBtn && setOpen(true);
+          }}
+        />
       </Popover>
     </div>
   );

apps/designer/src/components/mindMap/SummaryBorder.tsx

@@ -6,18 +6,26 @@ import { Icon } from "umi";
 
 const component = ({ node, graph }: { node: Node; graph: Graph }) => {
   const { line, origin, summarySource, type } = node.getData();
-  const { width, height } = node.size();
+  const [width, setWidth] = useState(node.size().width);
+  const [height, setHeight] = useState(node.size().height);
   const [showSetting, setShowSetting] = useState(false);
 
+  const handleResizeChange = () => {
+    setWidth(node.size().width);
+    setHeight(node.size().height);
+  }
+
   useEffect(() => {
     const handleSelect = (args: EventArgs["node:selected"]) => {
       setShowSetting(args.node.id === origin);
     };
     graph.on("node:selected", handleSelect);
     graph.on("blank:click", () => setShowSetting(false));
+    node.on("change:size", handleResizeChange);
     return () => {
       graph.off("node:selected", handleSelect);
       graph.off("blank:click", () => setShowSetting(false));
+      node.off("change:size", handleResizeChange);
     };
   }, []);
 
@@ -26,7 +34,6 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
     if (originNode && originNode.isNode()) {
       const x = originNode.position().x + originNode.size().width / 2;
       const y = originNode.position().y + originNode.size().height / 2;
-      const { width, height } = node.size();
       if (
         x < node.position().x 
         && y > node.position().y
@@ -50,10 +57,9 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
       }
     }
     return "right";
-  }, [origin]);
+  }, [origin, width, height]);
 
   const lineStyle = useMemo(() => {
-    console.log(linePosition)
     switch (linePosition) {
       case "right":
         return {
@@ -110,7 +116,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
       L 30 ${height - line.width}
       L 20 ${height - line.width}
       `;
-  }, [type]);
+  }, [type, width, height]);
 
   const leftLine = useMemo(() => {
     if (type === 2) {
@@ -148,7 +154,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
       L 10 ${height - line.width}
       L 20 ${height - line.width}
       `;
-  }, [type]);
+  }, [type, width, height]);
 
   const topLine = useMemo(() => {
     return `
@@ -160,7 +166,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
               L 30 ${height - line.width}
               L 20 ${height - line.width}
               `;
-  }, [type]);
+  }, [type, width, height]);
 
   const bottomLine = useMemo(() => {
     return `
@@ -172,7 +178,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
               L 30 ${height - line.width}
               L 20 ${height - line.width}
               `;
-  }, [type]);
+  }, [type, width, height]);
 
   const path = useMemo(() => {
     switch(linePosition) {
@@ -181,7 +187,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
       case 'left': return leftLine;
       case 'right': return rightLine;
     }
-  }, [type]);
+  }, [type, width, height]);
 
   // 删除概要
   const handleRemove = () => {

apps/designer/src/components/mindMap/Topic.tsx

@@ -235,7 +235,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
 
           {/* 图标、标题、链接等 */}
           <div className="tit flex items-center justify-center" ref={titleRef}>
-            <div className="flex items-center text-20px flex-1">
+            <div className="flex items-center text-20px">
               {icons?.map((icon: string) => {
                 return (
                   <svg key={icon} className="icon mr-6px" aria-hidden="true">
@@ -288,16 +288,17 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
             </div>
           </div>
           {/* 标签 */}
-          <div className="flex items-center justify-center" ref={tagRef}>
+          <div className="" ref={tagRef}>
             {tags?.map((item: { name: string; color: string }, index: number) => {
               return (
                 <CustomTag
-                  className="text-14px"
+                  className="text-14px inline-block mr-8px"
                   key={item.name}
                   title={item.name}
                   color={item.color}
                   onChangeTag={(tag) => handleChangeTag(tag, index)}
                   onDelete={() => handleDeleteTag(index)}
+                  hideEditBtn
                 >
                   {item.name}
                 </CustomTag>

apps/designer/src/models/mindMapModel.ts

@@ -33,17 +33,22 @@ export default function mindMapModel() {
   const [selectedCell, setSelectedCell] = useState<Cell[]>([]);
   const correlationEdgeRef = useRef<Edge>();
 
-  const [mindProjectInfo, setMindProjectInfo] = 
-    useLocalStorageState<MindMapProjectInfo>("minMapProjectInfo", {
-      listenStorageChange: true,
-      // defaultValue: defaultProject,
-      serializer: (val) => {
-        return JSON.stringify(val);
-      },
-      deserializer: (val) => {
-        return JSON.parse(val);
-      }
-    });
+  const [mindProjectInfo, setMindProjectInfo] = useState<MindMapProjectInfo>();
+    // useLocalStorageState<MindMapProjectInfo>("minMapProjectInfo", {
+    //   listenStorageChange: true,
+    //   // defaultValue: defaultProject,
+    //   serializer: (val) => {
+    //     return JSON.stringify(val);
+    //   },
+    //   deserializer: (val) => {
+    //     return JSON.parse(val);
+    //   }
+    // });
+
+  useEffect(() => {
+    localStorage.setItem('minMapProjectInfo', JSON.stringify(mindProjectInfo));
+  }, [mindProjectInfo])
+
 
   if (!mindProjectInfo) {
     setMindProjectInfo(defaultProject);
@@ -107,6 +112,10 @@ export default function mindMapModel() {
     }
   }, [graph, mindProjectInfo?.pageSetting]);
 
+  const getMindProject = () => {
+    return mindProjectInfo;
+  }
+
   // 初始化脑图
   const initMindMap = (container: HTMLElement) => {
     const instance = new Graph({
@@ -199,6 +208,7 @@ export default function mindMapModel() {
       setRightToolbarActive,
       correlationEdgeRef,
       setMindProjectInfo,
+      getMindProject
     }
 
     setGraph(instance);

apps/designer/src/pages/mindmap/mindMap.tsx

@@ -1,7 +1,7 @@
 import { StructureType, TopicType } from "@/enum";
 import { MindMapProjectInfo, TopicItem, HierarchyResult } from "@/types";
 import { Graph, Cell, Node } from "@antv/x6";
-import TopicComponent from "@/components/mindMap/Topic";
+import Topic from "@/components/mindMap/Topic";
 import TopicBorder from "@/components/mindMap/Border";
 import SummaryBorder from "@/components/mindMap/SummaryBorder";
 import { topicData } from "@/config/data";
@@ -45,7 +45,7 @@ export const renderMindMap = ({
     );
 
     let originPosition = { x: topic?.x ?? -10, y: topic?.y ?? -10 };
-    if (graph.hasCell(topic.id)) {
+    if (graph.hasCell(topic.id) && !topic.isSummary) {
       const node = graph.getCellById(topic.id);
       if (node.isNode()) {
         originPosition = node.position();
@@ -60,7 +60,7 @@ export const renderMindMap = ({
         const id = data?.id || uuid();
         // 创建主题
         const node = graph.createNode({
-          ...TopicComponent,
+          ...Topic,
           width: data.width,
           height: data.height,
           data: {
@@ -132,7 +132,10 @@ export const renderMindMap = ({
 
     traverse(result);
   });
-  if(returnCells) return cells;
+  // 概要节点 返回节点数据
+  if(returnCells) {
+    return cells;
+  }
   const oldCells = graph.getCells();
   // 移除不要的节点及对应的边
   oldCells.forEach((cell) => {
@@ -211,9 +214,7 @@ const createSummaryCells = (
         y: offsetY + hierarchyItem.y
       }
     }
-
-    // 概要节点
-    cells.push(...renderMindMap({
+    const list = renderMindMap({
       topics: [{
         ...summary.topic,
         ...position
@@ -224,7 +225,10 @@ const createSummaryCells = (
       graph,
       setMindProjectInfo,
       returnCells: true
-    }) || []);
+    }) || [];
+
+    // 概要节点
+    cells.push(...list);
   }
   return cells;
 }
@@ -322,8 +326,8 @@ export const addTopic = (
 const topicMap = {
   [TopicType.main]: {
     label: "中心主题",
-    width: 206,
-    height: 70,
+    width: 176,
+    height: 65,
   },
   [TopicType.branch]: {
     label: "分支主题",
@@ -332,8 +336,8 @@ const topicMap = {
   },
   [TopicType.sub]: {
     label: "子主题",
-    width: 76,
-    height: 27,
+    width: 54,
+    height: 26,
   },
 };
 
@@ -352,7 +356,7 @@ export const buildTopic = (
 
   const theme = getTheme(
     projectInfo?.theme,
-    type === TopicType.sub ? parentNode : undefined
+    type === TopicType.sub ? parentNode?.data : undefined
   );
   const id = uuid();
   return {

apps/designer/src/utils/mindmapHander.tsx

@@ -170,7 +170,7 @@ export const handleDeleteCurrentTopic = (graph: Graph, nodes: Node[]) => {
         }
       });
     }
-    console.log(mindProjectInfo);
+
     // @ts-ignore
     graph?.extendAttr?.setMindProjectInfo?.(mindProjectInfo);
     localStorage.setItem("minMapProjectInfo", JSON.stringify(mindProjectInfo));