shalu-system-designer/apps/designer/src/pages/mindmap/components/Config/index.tsx

import React, { useEffect, useState, useMemo, useRef } from "react";
import { useModel } from "umi";
import { Tabs } from "antd";
import InsertCss from "insert-css";
import { useDragResize } from "@/hooks/useDragResize";

import PageStyle from "./PageStyle";
import NodeStyle from "./NodeStyle";
import Structure from "./Structure";
import Theme from "./Theme";
import TagConfig from "./TagConfig";
import IconConfig from "./IconConfig";
import Remark from "./Remark";
import NodeAttrs from "@/components/NodeAttrs";
import AICreator from "./AiCreator";
import AIChat from "@/components/ai/AIChat";

import { buildTopic } from "../../mindMap";
import { TopicType } from "@/enum";
import { Node } from "@antv/x6";
import { TopicItem } from "@/types";
import { traverseNode } from "@/utils/mindmapHander";

InsertCss(`
  .shalu-tabs-nav {
    padding: 0 16px
  }
`);
export default function index() {
  const {
    rightToobarActive,
    selectedCell,
    rightToolbarActive,
    graph,
    mindProjectInfo,
    setMindProjectInfo,
  } = useModel("mindMapModel");
  const { setMindMapRightPanelWidth } = useModel("appModel");
  const [activeKey, setActiveKey] = useState("1");
  const { dragging, handleMouseDown } = useDragResize(
    setMindMapRightPanelWidth
  );

  useEffect(() => {
    if (selectedCell.find((cell) => cell.isNode())) {
      setActiveKey("2");
    } else {
      setActiveKey("1");
    }
  }, [selectedCell]);

  const firstNode = useMemo(() => {
    return selectedCell.find((cell) => cell.isNode());
  }, [selectedCell]);

  // 设置节点属性
  const handleSetNodeAttr = (attrs: any) => {
    firstNode?.setData({
      attrs,
    });
  };

  const handleCloseAI = () => {
    rightToolbarActive("");
  };

  // 记录ai新增的节点id
  const aiAddNodeIds = useRef<string[]>([]);
  // 获取转换数据
  const getConvertData = (data: any[], parentId: string, type: TopicType, parentTopic: TopicItem) => {
    return data.map((item) => {
      const topic = buildTopic(
        type,
        { id: item.id, label: item.label },
        graph,
        { id: parentId, data: parentTopic } as Node
      );
      topic.parentId = parentId;
      aiAddNodeIds.current.push(topic.id);
      if (item.children) {
        topic.children = getConvertData(item.children, topic.id, TopicType.sub, topic);
      }

      return topic;
    });
  };

  // 渲染AI创作
  const handleAiCreated = (data: any) => {
    aiAddNodeIds.current = [];
    if (Array.isArray(data)) {
      let currentTopic = graph?.getSelectedCells()?.[0]?.data;
      if(!currentTopic){
        currentTopic = mindProjectInfo?.topics?.find(
          (topic) => topic.type === TopicType.main
        );
      }

      const type = currentTopic?.type === TopicType.main ? TopicType.branch : TopicType.sub;
      // 获取AI转换数据
      const result = getConvertData(data, currentTopic?.id, type, currentTopic);

      // 往节点下添加
      mindProjectInfo && setMindProjectInfo({
        ...mindProjectInfo,
        topics: traverseNode(mindProjectInfo.topics, (topic) => {
          if (topic.id === currentTopic?.id) {
            topic.children = [
              ...(topic.children || []),
              ...result
            ];
          }
          return topic
        })
      });

      setTimeout(() => {
        graph &&
          aiAddNodeIds.current.forEach((id) => {
            graph.select(graph.getCellById(id));
          });
      }, 200);
    }
  };

  return (
    <div className="w-full h-full flex">
      <div
        className="h-full w-4px cursor-e-resize hover:bg-blue flex-shrink-0"
        style={{ backgroundColor: dragging ? "#60a5fa" : "" }}
        onMouseDown={handleMouseDown}
      ></div>
      <div
        className="relative h-full w-full"
        style={{ display: rightToobarActive ? "block" : "none" }}
      >
        {rightToobarActive &&
          !["ai-chat", "ai-creator"].includes(rightToobarActive) && (
            <div
              className="absolute w-16px h-16px right-10px top-10px cursor-pointer z-99"
              onClick={() => rightToolbarActive("")}
            >
              <i className="iconfont icon-cuowu-1 color-#666 hover:color-#333" />
            </div>
          )}
        {/* 样式 */}
        {rightToobarActive === "style" && (
          <>
            <Tabs
              activeKey={activeKey}
              onChange={(key) => setActiveKey(key)}
              items={[
                {
                  key: "1",
                  label: "页面样式",
                  children: <PageStyle />,
                },
                {
                  key: "2",
                  label: "主题样式",
                  children: <NodeStyle />,
                },
              ]}
            />
          </>
        )}
        {/* 节点属性 */}
        {rightToobarActive === "attrs" && (
          <>
            <Tabs
              items={[
                {
                  key: "1",
                  label: "节点属性",
                  children: (
                    <NodeAttrs cell={firstNode} onChange={handleSetNodeAttr} />
                  ),
                },
              ]}
            />
          </>
        )}
        {/* 结构 */}
        {rightToobarActive === "structure" && <Structure />}
        {/* 风格 */}
        {rightToobarActive === "theme" && <Theme />}
        {/* 图标 */}
        {rightToobarActive === "icon" && <IconConfig />}
        {/* 标签 */}
        {rightToobarActive === "tag" && <TagConfig />}
        {/* 备注 */}
        {rightToobarActive === "remark" && <Remark />}
        {/* AI对话 */}
        {rightToobarActive === "ai-chat" && <AIChat onClose={handleCloseAI}/>}
        {/* AI创作 */}
        {rightToobarActive === "ai-creator" && (
          <AICreator
            type="mindmap"
            onClose={handleCloseAI}
            onChange={handleAiCreated}
          />
        )}
      </div>
    </div>
  );
}