feat: 思维导图添加折叠、优化粘贴功能

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

@@ -125,6 +125,10 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
     changeSize();
   }, [node.data]);
 
+  useEffect(() => {
+    setShowCollapsePoint(collapsed);
+  }, [collapsed]);
+
   const childrenCount = useMemo(() => {
     let count = 0;
     const traverse = (topics: TopicItem[]) => {

apps/designer/src/pages/mindmap/components/HeaderToolbar/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Button, Input, Dropdown, Tooltip, MenuProps, Divider, message } from "antd";
-import { LeftOutlined, MenuOutlined } from "@ant-design/icons";
+import { LeftOutlined, MenuOutlined, MinusCircleOutlined, PlusCircleOutlined, RightCircleOutlined } from "@ant-design/icons";
 import logo from "@/assets/logo.png";
 import { useModel, Icon } from "umi";
 import { addTopic } from "@/utils/mindmap";
@@ -12,6 +12,7 @@ import { useFindReplace } from "@/hooks/useFindReplace";
 import { Copy, SaveAll } from "@/api/systemDesigner";
 import { UploadFile } from "@/api";
 import { base64ToFile, getClassRules } from "@repo/utils";
+import { traverseNode } from "@/utils/mindmapHander";
 
 export default function index() {
   const {
@@ -176,6 +177,34 @@ export default function index() {
     });
   };
 
+  // 处理折叠节点
+  const handleCollapse = (level: number | boolean) => {
+    // 布尔值时展开或折叠全部
+    if(typeof level === 'boolean') {
+      const topics = traverseNode(mindProjectInfo?.topics || [], (topic, index) => {
+        if(topic.type !== TopicType.main) {
+          topic.collapsed = level;
+        }
+      });
+      mindProjectInfo && setMindProjectInfo({
+        ...mindProjectInfo,
+        topics,
+      });
+    } else {
+      // 数字时折叠到指定层级
+      const topics = traverseNode(mindProjectInfo?.topics || [], (topic, index, currentLevel = 0) => {
+        if(topic.type !== TopicType.main) {
+          topic.collapsed = currentLevel >= level;
+        }
+      });
+      mindProjectInfo && setMindProjectInfo({
+        ...mindProjectInfo,
+        topics,
+      });
+    }
+    graph?.centerContent();
+  };
+
   const menuData: MenuProps["items"] = [
     {
       key: "1",
@@ -281,6 +310,59 @@ export default function index() {
     // },
   ];
 
+  // 折叠菜单
+  const topicCollapseMenu: MenuProps["items"] = [
+    {
+      key: "1",
+      label: "关闭全部主题",
+      icon: <MinusCircleOutlined/>,
+      onClick: () => handleCollapse(true)
+    },
+    {
+      key: "2",
+      label: "展开全部主题",
+      icon: <PlusCircleOutlined/>,
+      onClick: () => handleCollapse(false)
+    },
+    {
+      key: "3",
+      label: "展开到",
+      icon: <RightCircleOutlined/>,
+      children: [
+        {
+          key: "3-1",
+          label: "一级主题",
+          onClick: () => handleCollapse(1)
+        },
+        {
+          key: "3-2",
+          label: "二级主题",
+          onClick: () => handleCollapse(2)
+        },
+        {
+          key: "3-3",
+          label: "三级主题",
+          onClick: () => handleCollapse(3)
+        },
+        {
+          key: "3-4",
+          label: "四级主题",
+          onClick: () => handleCollapse(4)
+        },
+        {
+          key: "3-5",
+          label: "五级主题",
+          onClick: () => handleCollapse(5)
+        },
+        {
+          key: "3-6",
+          label: "六级主题",
+          onClick: () => handleCollapse(6)
+        }
+      ]
+    }
+  ]
+
   const noParent = useMemo(() => {
     const nodes = selectedCell?.filter((cell) => cell.isNode());
     return !!(nodes.length && !nodes.find((node) => !node.data?.parentId));
@@ -382,6 +464,15 @@ export default function index() {
         />
       </Tooltip>
 
+      <Dropdown menu={{ items: topicCollapseMenu}} placement="bottomLeft" trigger={['click']}>
+        <Tooltip placement="bottom" title="主题折叠">
+          <Button
+            type="text"
+            icon={<RightCircleOutlined/>}
+          />
+        </Tooltip>
+      </Dropdown>
+
       <FindReplaceModal
         ref={findModalRef}
         current={currentIndex}

apps/designer/src/utils/mindmapHander.tsx

@@ -271,16 +271,23 @@ export const handleMindmapPaste = (
                 });
               }
             } else {
-              const topic = addTopic(
-                currentNode.data?.type === TopicType.main
-                  ? TopicType.branch
-                  : TopicType.sub,
-                setMindProjectInfo,
-                graph,
-                currentNode,
-                { label: text }
-              );
-              selectTopic(graph, topic);
+              // 根据空格或者换行切分
+              const labels = text.split("\n").map(txt => txt.trim().split(" ")).flat();
+              console.log(labels);
+              labels.forEach(label => {
+                if(label.trim()) {
+                  const topic = addTopic(
+                    currentNode.data?.type === TopicType.main
+                      ? TopicType.branch
+                      : TopicType.sub,
+                    setMindProjectInfo,
+                    graph,
+                    currentNode,
+                    { label: label.trim() }
+                  );
+                  selectTopic(graph, topic);
+                }
+              });
             }
           };
         });
@@ -308,12 +315,13 @@ const traverseCopyData = (list: TopicItem[], parentId: string): TopicItem[] => {
  */
 export const traverseNode = (
   topics: TopicItem[],
-  callback: (topic: TopicItem, index: number) => void
+  callback: (topic: TopicItem, index: number, level?: number) => void,
+  level = 0
 ): TopicItem[] => {
   return topics.map((topic, index) => {
-    callback && callback(topic, index);
+    callback && callback(topic, index, level);
     if (topic.children?.length) {
-      topic.children = traverseNode(topic.children, callback);
+      topic.children = traverseNode(topic.children, callback, level + 1);
     }
     // 遍历概要
     if (topic?.summary?.topic) {

apps/flowchart-designer/src/components/nodes/And.tsx

@@ -46,7 +46,7 @@ export default ({ node, graph }: { node: Node; graph: Graph }) => {
         }}
       />
 
-      <Port hovered={hovered} style={{ right: -7, cursor: "crosshair" }} />
+      <Port hovered={hovered} style={{ right: -7, cursor: "crosshair" }}  />
     </div>
   );
 };