fix: 修改flowchart组件包路径

apps/ai-easy-builder/src/components/CustomInput.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Input, InputRef } from "antd";
 import { Node } from "@antv/x6";
 import { useSafeState } from "ahooks";
-import FlowExtra from "./FlowExtra";
 export default function CustomInput(props: {
   value: string;
   styles: React.CSSProperties & {
@@ -144,7 +143,6 @@ export default function CustomInput(props: {
 
   return (
     <div className="absolute w-full h-full w-full" style={txtStyle}>
-      <FlowExtra node={node} />
       {isEditing ? (
         <Input.TextArea
           ref={inputRef}

apps/ai-easy-builder/src/pages/home/components/Flowchart.tsx

@@ -1,9 +1,36 @@
-import React from 'react'
+import { useEffect, useRef } from "react";
+import { getFlowchartNodesByAi } from "@repo/flowchart-render";
+import { Graph } from "@antv/x6";
+
+export default function Flowchart(props: { data: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const graph = new Graph({
+      container: container,
+      width: container.clientWidth,
+      height: container.clientHeight,
+      grid: true,
+      background: {
+        color: "#f5f5f5",
+      },
+    });
+
+    const nodes = getFlowchartNodesByAi(props.data);
+    graph.fromJSON(nodes);
+    graph.centerContent();
+
+    return () => {
+      graph.dispose();
+    };
+  }, []);
 
-export default function Flowchart() {
   return (
-    <div>
-      
+    <div className="w-full h-full relative">
+      <div className="w-full h-full" ref={containerRef} />
     </div>
-  )
+  );
 }

apps/ai-easy-builder/src/pages/home/components/GenerateBubble.tsx

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { Steps } from "antd";
 import type { StepsProps } from "antd/es/steps";
 import { LoadingOutlined } from "@ant-design/icons";
+import Flowchart from "./Flowchart";
 
 export default function GenerateBubble() {
   const stepItems: StepsProps["items"] = useMemo(() => {
@@ -35,7 +36,7 @@ export default function GenerateBubble() {
         <Steps className="h-full" items={stepItems} direction="vertical" />
       </div>
       <div className="flex-1 bg-#fff p-12px rounded-12px">
-        
+        <Flowchart data={''}/>
       </div>
     </div>
   );

packages/flowchart-render/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "private": true,
   "module": "./src/index.ts",
+  "types": "./src/index.ts",
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "generate:component": "turbo gen react-component"

packages/flowchart-render/src/components/ImageNode.tsx

@@ -1,7 +1,7 @@
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
 import { ports, defaultData } from "../config/data";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import { useSizeHook, useShapeProps } from "../hooks";
 const component = ({ node }: { node: Node }) => {
   const { fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/base.tsx

@@ -1,6 +1,6 @@
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import { useSizeHook, useShapeProps } from "../hooks";
 const component = ({ node }: { node: Node }) => {
   const { fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/mindMap/Border.tsx

@@ -1,263 +0,0 @@
-import { register } from "@antv/x6-react-shape";
-import { Graph, Node, EventArgs } from "@antv/x6";
-import { useEffect, useMemo, useState } from "react";
-import { TopicBorderType } from "@/enum";
-import { Button, InputNumber, Popover } from "antd";
-import { Icon } from "umi";
-
-const component = ({ node, graph }: { node: Node; graph: Graph }) => {
-  const { label, line, fill, type, origin } = node.getData();
-  const { width, height } = node.size();
-  const [showSetting, setShowSetting] = useState(false);
-
-  useEffect(() => {
-    const handleSelect = (args: EventArgs["node:selected"]) => {
-      setShowSetting(args.node.id === node.id);
-    };
-    graph.on("node:selected", handleSelect);
-    graph.on("blank:click", () => setShowSetting(false));
-    return () => {
-      graph.off("node:selected", handleSelect);
-      graph.off("blank:click", () => setShowSetting(false));
-    };
-  }, []);
-
-  // 删除边框
-  const handleRemove = () => {
-    const parentNode = graph.getCellById(origin);
-    parentNode?.setData(
-      {
-        border: undefined,
-      },
-      {
-        deep: false,
-      }
-    );
-  };
-
-  const handleChange = (key: string, value: any) => {
-    node.setData({
-      [key]: value,
-    });
-  };
-
-  function generateWavePath() {
-    return '';
-  }
-
-  const colors = [
-    "#bf1e1b",
-    "#63abf7",
-    "#71cb2d",
-    "#ff9f1a",
-    "#30bfbf",
-    "#000",
-    "",
-  ];
-
-  const ColorBtn = ({
-    color,
-    value,
-    onClick,
-  }: {
-    color: string;
-    value: string;
-    onClick: () => void;
-  }) => {
-    return (
-      <div
-        className={`relative w-18px h-18px cursor-pointer rounded-4px flex items-center justify-center hover:opacity-80`}
-        style={{
-          background: color,
-          border: !color ? "1px solid #000" : "",
-        }}
-        onClick={onClick}
-      >
-        {color === value && (
-          <i className="iconfont icon-zhengque-1 color-#fff" />
-        )}
-        {!color && (
-          <i className="absolute left-0 top-0 block w-1px h-24px bg-#de0f18 origin-top-left rotate--45" />
-        )}
-      </div>
-    );
-  };
-
-  return (
-    <>
-      <div className="relative text-0 w-full h-full">
-        {showSetting && (
-          <Popover
-            // trigger={["click"]}
-            content={
-              <div className="w-240px">
-                <div className="flex justify-between items-center m-b-20px">
-                  <span className="text-14px font-bold">外框设置</span>
-                  <span
-                    className="text-12px cursor-pointer color-#666 hover:color-red"
-                    onClick={handleRemove}
-                  >
-                    删除外框
-                    <i className="iconfont icon-shanchu m-l-4px" />
-                  </span>
-                </div>
-                <div className="flex items-center gap-8px m-b-8px">
-                  <span className="text-12px color-#333">线条样式</span>
-                  <InputNumber
-                    className="w-100px"
-                    size="small"
-                    min={1}
-                    max={5}
-                    precision={0}
-                    value={line.width}
-                    onChange={(val) =>
-                      handleChange("line", { ...line, width: val })
-                    }
-                  />
-                  <Button
-                    type="text"
-                    size="small"
-                    className={line.style === "solid" ? "active" : ""}
-                    icon={<i className="iconfont icon-h-line" />}
-                    onClick={() =>
-                      handleChange("line", { ...line, style: "solid" })
-                    }
-                  ></Button>
-                  <Button
-                    type="text"
-                    size="small"
-                    className={line.style === "dashed" ? "active" : ""}
-                    icon={<i className="iconfont icon-xuxian" />}
-                    onClick={() =>
-                      handleChange("line", { ...line, style: "dashed" })
-                    }
-                  ></Button>
-                </div>
-                <div className="flex items-center gap-8px m-b-8px">
-                  <span className="text-12px color-#333">填充颜色</span>
-                  {colors.map((color) => (
-                    <ColorBtn
-                      key={color}
-                      color={color}
-                      value={fill}
-                      onClick={() => handleChange("fill", color)}
-                    />
-                  ))}
-                </div>
-                <div className="flex items-center gap-8px m-b-8px">
-                  <span className="text-12px color-#333">线条颜色</span>
-                  {colors.map((color) => (
-                    <ColorBtn
-                      key={color}
-                      color={color}
-                      value={line.color}
-                      onClick={() => handleChange("line", { ...line, color })}
-                    />
-                  ))}
-                </div>
-                <div className="flex items-center gap-8px m-b-8px">
-                  <span className="text-12px color-#333">外框样式</span>
-                  <Button
-                    type="text"
-                    size="small"
-                    icon={<Icon icon="local:rect" width="16px" />}
-                    className={type === TopicBorderType.normal ? "active" : ""}
-                    onClick={() => handleChange("type", TopicBorderType.normal)}
-                  ></Button>
-                  <Button
-                    type="text"
-                    size="small"
-                    icon={<Icon icon="local:rounded" width="16px" />}
-                    className={type === TopicBorderType.rounded ? "active" : ""}
-                    onClick={() => handleChange("type", TopicBorderType.rounded)}
-                  ></Button>
-                  <Button
-                    type="text"
-                    size="small"
-                    icon={<Icon icon="local:wavy" width="16px" />}
-                    className={type === TopicBorderType.wavy ? "active" : ""}
-                    onClick={() => handleChange("type", TopicBorderType.wavy)}
-                  ></Button>
-                  <Button
-                    type="text"
-                    size="small"
-                    icon={<Icon icon="local:trapezoid" width="16px" />}
-                    className={type === TopicBorderType.trapezoid ? "active" : ""}
-                    onClick={() => handleChange("type", TopicBorderType.trapezoid)}
-                  ></Button>
-                </div>
-              </div>
-            }
-          >
-            <i
-              className="iconfont icon-more text-12px absolute right--5px top--5px cursor-pointer"
-              style={{ color: line.color || "#000" }}
-            />
-          </Popover>
-        )}
-
-        <svg
-          className="w-full h-full"
-          viewBox={`0 0 ${width} ${height}`}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          { type === TopicBorderType.normal && (
-            <rect
-              width={width}
-              height={height}
-              fill={fill}
-              fillOpacity={0.1}
-              stroke={line.color}
-              strokeDasharray={line.style === "dashed" ? "5,5" : ""}
-              strokeWidth={line.width}
-            />
-          )}
-          { type === TopicBorderType.rounded && (
-            <rect
-              rx={10}
-              ry={10}
-              width={width}
-              height={height}
-              fill={fill}
-              fillOpacity={0.1}
-              stroke={line.color}
-              strokeDasharray={line.style === "dashed" ? "5,5" : ""}
-              strokeWidth={line.width}
-            />
-          )}
-          { type === TopicBorderType.wavy && (
-            <path
-              d={generateWavePath()}
-              fill={fill}
-              fillOpacity={0.1}
-              stroke={line.color}
-              strokeDasharray={line.style === "dashed" ? "5,5" : ""}
-              strokeWidth={line.width}
-            />
-          )}
-        </svg>
-      </div>
-    </>
-  );
-};
-
-// 主题节点
-register({
-  shape: "mind-map-border",
-  effect: ["data"],
-  component: component,
-});
-
-export default {
-  shape: "mind-map-border",
-  data: {
-    line: {
-      width: 2,
-      color: "#939aa8",
-      style: "dashed",
-    },
-    fill: "#f4f4f6",
-    label: "",
-    type: TopicBorderType.normal,
-  },
-};

packages/flowchart-render/src/components/mindMap/CustomTag.tsx

@@ -1,152 +0,0 @@
-import { Tag, TagProps, Popover, Input, Button, ColorPicker } from "antd";
-import React, { useState } from "react";
-
-export default function CustomTag(
-  props: TagProps & {
-    hideAdd?: boolean;
-    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",
-    "#e78f49",
-    "#5ab7af",
-    "#52aaee",
-    "#6e4dbe",
-    "#d6f0f8",
-  ];
-
-  const ColorBtn = ({
-    color,
-    value,
-    onClick,
-  }: {
-    color?: string;
-    value: string;
-    onClick: () => void;
-  }) => {
-    return (
-      <div
-        className={`relative w-24px h-24px cursor-pointer rounded-4px flex items-center justify-center hover:opacity-80`}
-        style={{
-          background: color,
-          border: !color ? "1px solid #000" : "",
-        }}
-        onClick={onClick}
-      >
-        {color === value && (
-          <i className="iconfont icon-zhengque-1 color-#fff" />
-        )}
-        {!color && (
-          <i className="absolute left-0 top-0 block w-1px h-24px bg-#de0f18 origin-top-left rotate--45" />
-        )}
-      </div>
-    );
-  };
-
-  const handleChange = (key: string, value: string) => {
-    props?.onChangeTag?.({
-      name: props.title || "",
-      color: props.color || "",
-      [key]: value,
-    });
-  };
-
-  return (
-    <div className="inline">
-      <Popover
-        trigger={"click"}
-        open={open}
-        placement="bottom"
-        onOpenChange={(visible) => !visible && setOpen(visible)}
-        content={
-          <div>
-            <Input
-              placeholder="标签名"
-              value={title}
-              onChange={(e) => {
-                setTitle(e.target.value);
-              }}
-              onBlur={() => {
-                handleChange("name", title || props.title || "空标签");
-              }}
-              onPressEnter={() => {
-                handleChange("name", title || props.title || "空标签");
-              }}
-            />
-
-            <div className="flex gap-8px my-16px">
-              {colors.map((color) => (
-                <ColorBtn
-                  key={color}
-                  color={color}
-                  value={props.color as string}
-                  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>
-            </div>
-            <div className="flex justify-between">
-              {!props.hideAdd && (
-                <span
-                  className="text-12px cursor-pointer color-#067bef"
-                  onClick={props?.onAdd}
-                >
-                  添加到我的标签
-                </span>
-              )}
-              <span
-                className="text-12px cursor-pointer color-#9aa5b8 hover:color-#eb5555"
-                onClick={() => {
-                  props?.onDelete?.();
-                  setOpen(false);
-                }}
-              >
-                删除此标签
-              </span>
-            </div>
-          </div>
-        }
-      >
-        <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>
-  );
-}

packages/flowchart-render/src/components/mindMap/ExtraModule.tsx

@@ -1,99 +0,0 @@
-import Editor from "@/components/Editor";
-import { Node } from "@antv/x6";
-import { InputNumber, Popover, Tooltip, Button } from "antd";
-export default function ExtraModule({
-  node,
-  extraModules,
-}: {
-  node: Node;
-  extraModules: { type: "image" | "code"; data: Record<string, any> };
-}) {
-  const handleChange = (key: string, value: number) => {
-    node.setData({
-      extraModules: {
-        ...extraModules,
-        data: {
-          ...extraModules.data,
-          [key]: value,
-        },
-      },
-    });
-  };
-  const handleDelete = () => {
-    node.setData({
-      extraModules: undefined,
-    }, {
-      deep: false
-    });
-  };
-  return extraModules.type === "code" ? (
-    <div className="text-14px m-b-8px">
-      <Editor
-        width={200}
-        height={300}
-        code={extraModules.data.code}
-        language={extraModules.data.language}
-        onChange={(code: string) => {
-          node.setData({
-            extraModules: {
-              type: "code",
-              data: {
-                code,
-                language: extraModules.data.language,
-              },
-            },
-          });
-        }}
-        onLanguageChange={(language: string) => {
-          node.setData({
-            extraModules: {
-              type: "code",
-              data: {
-                code: extraModules.data.code,
-                language,
-              },
-            },
-          });
-        }}
-        onDelete={handleDelete}
-      />
-    </div>
-  ) : (
-    <div className="m-b-8px">
-      <Popover
-        content={
-          <div className="bg-#fff rounded-4px flex items-center py-2px px-4px">
-            <span className="text-14px m-r-4px">W</span>
-            <InputNumber
-              className="w-80px m-r-8px"
-              suffix="px"
-              min={100}
-              value={extraModules.data.width}
-              onChange={(val) => handleChange("width", val)}
-            />
-            <span className="text-14px m-r-4px">H</span>
-            <InputNumber
-              className="w-80px"
-              suffix="px"
-              min={100}
-              value={extraModules.data.height}
-              onChange={(val) => handleChange("height", val)}
-            />
-            <Tooltip title="删除代码">
-              <Button
-                icon={<i className="iconfont icon-shanchu" />}
-                onClick={handleDelete}
-              ></Button>
-            </Tooltip>
-          </div>
-        }
-      >
-        <img
-          src={extraModules.data.imageUrl}
-          width={extraModules.data.width}
-          height={extraModules.data.height}
-        />
-      </Popover>
-    </div>
-  );
-}

packages/flowchart-render/src/components/mindMap/Link.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-import { Button, Divider, Popover, Tooltip } from "antd";
-export default function Link({
-  link,
-  onDelete,
-  onEdit
-}: {
-  link: { title: string; value: string };
-  onEdit: () => void;
-  onDelete: () => void;
-}) {
-  const [copyed, setCopyed] = React.useState(false);
-  const handleOpenUrl = () => {
-    window.open(link.value, "_blank");
-  };
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(link.value);
-    setCopyed(true);
-    setTimeout(() => {
-      setCopyed(false);
-    }, 1000);
-  };
-  return (
-    <Popover
-      content={
-        <div>
-          {link.title || link.value} <Divider type="vertical" />
-          <Button type="text" onClick={handleOpenUrl}>
-            打开链接
-          </Button>
-          <Tooltip title={copyed ? "复制成功" : "复制"}>
-            <Button
-              type="text"
-              icon={<i className="iconfont icon-fuzhi" />}
-              onClick={handleCopy}
-            />
-          </Tooltip>
-          <Tooltip title="编辑">
-            <Button
-              type="text"
-              icon={<i className="iconfont icon-bianji-" />}
-              onClick={onEdit}
-            />
-          </Tooltip>
-          <Tooltip title="删除">
-            <Button
-              type="text"
-              icon={<i className="iconfont icon-shanchu" />}
-              onClick={onDelete}
-            />
-          </Tooltip>
-        </div>
-      }
-    >
-      <i className="iconfont icon-link" />
-    </Popover>
-  );
-}

packages/flowchart-render/src/components/mindMap/LinkForm.tsx

@@ -1,72 +0,0 @@
-import { Button, Form, Input } from "antd";
-import { FormInstance } from "antd/lib";
-import React, { useRef, useState } from "react";
-
-export default function LinkForm({
-  title,
-  value,
-  onCancel,
-  onConfirm,
-}: {
-  title?: string;
-  value?: string;
-  onCancel: () => void;
-  onConfirm: (data: { title?: string; value?: string }) => void;
-}) {
-  const formRef = useRef<FormInstance>(null);
-  const [formModel, setFormModel] = useState({
-    title,
-    value,
-  });
-
-  const handleSetValue = (val: string) => {
-    if(!val.includes('http://') || !val.includes('http://')) {
-      // 自动补齐http://
-      val = 'http://' + val;
-    }
-    setFormModel((state) => ({ ...state, value: val }));
-  }
-
-  const handleSubmit = async () => {
-    await formRef.current?.validateFields();
-    onConfirm(formModel);
-  };
-
-  return (
-    <Form size="small" ref={formRef} colon={false} requiredMark={false}>
-      <Form.Item
-        name="value"
-        label="链接"
-        rules={[
-          { required: true, message: "请输入链接" },
-          { type: "url", message: "请输入正确的链接地址" },
-        ]}
-      >
-        <Input
-          placeholder="输入链接地址"
-          value={formModel.value}
-          onChange={(e) =>
-            handleSetValue(e.target.value)
-          }
-        />
-      </Form.Item>
-      <Form.Item name="title" label="标题">
-        <Input
-          placeholder="输入文本(非必填)"
-          value={formModel.title}
-          onChange={(e) =>
-            setFormModel((state) => ({ ...state, title: e.target.value }))
-          }
-        />
-      </Form.Item>
-      <Form.Item>
-        <div className="flex justify-end">
-          <Button onClick={onCancel}>取消</Button>
-          <Button type="primary" className="ml-8px" onClick={handleSubmit}>
-            确定
-          </Button>
-        </div>
-      </Form.Item>
-    </Form>
-  );
-}

packages/flowchart-render/src/components/mindMap/SummaryBorder.tsx

@@ -1,401 +0,0 @@
-import { register } from "@antv/x6-react-shape";
-import { Graph, Node, EventArgs } from "@antv/x6";
-import { useEffect, useMemo, useState } from "react";
-import { Button, InputNumber, Popover } from "antd";
-import { Icon } from "umi";
-
-const component = ({ node, graph }: { node: Node; graph: Graph }) => {
-  const { line, origin, summarySource, type } = node.getData();
-  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);
-    };
-  }, []);
-
-  const linePosition = useMemo((): "left" | "right" | "top" | "bottom" => {
-    const originNode = graph.getCellById(origin);
-    if (originNode && originNode.isNode()) {
-      const x = originNode.position().x + originNode.size().width / 2;
-      const y = originNode.position().y + originNode.size().height / 2;
-      if (
-        x < node.position().x 
-        && y > node.position().y
-        && y < node.position().y + height
-      ) {
-        return "left";
-      }
-      if (
-        y > node.position().y
-        && x > node.position().x
-        && x < node.position().x + width
-      ) {
-        return "bottom";
-      }
-      if (
-        y < node.position().y
-        && x > node.position().x
-        && x < node.position().x + width
-      ) {
-        return "top";
-      }
-    }
-    return "right";
-  }, [origin, width, height]);
-
-  const lineStyle = useMemo(() => {
-    switch (linePosition) {
-      case "right":
-        return {
-          right: "-40px",
-        };
-      case "left":
-        return {
-          left: "-40px",
-        };
-      case "top":
-        return {
-          top: "-40px",
-        };
-      default:
-        return {
-          bottom: "-40px",
-        };
-    }
-  }, [linePosition]);
-
-  const rightLine = useMemo(() => {
-    if (type === 2) {
-      return `
-        M 20 ${line.width}
-        L 36 ${height / 2}
-        L 20 ${height - line.width}
-      `;
-    }
-    if (type === 3) {
-      return `
-        M 20 ${line.width}
-        A 10 ${height / 2} 0 0 1 20 ${height - line.width}
-        M 30 ${height / 2}
-        L 40 ${height / 2}
-        `;
-    }
-    if (type === 4) {
-      return `
-        M 20 ${line.width}
-        Q 30 ${line.width} 30 10
-        L 30 ${height / 2 - 10}
-        Q 30 ${height / 2} 40 ${height / 2}
-        Q 30 ${height / 2} 30 ${height / 2 + 10}
-        L 30 ${height - 10}
-        Q 30 ${height - line.width} 20 ${height - line.width}
-        `;
-    }
-    return `
-      M 20 ${line.width}
-      L 30 ${line.width}
-      L 30 ${height / 2}
-      L 40 ${height / 2}
-      L 30 ${height / 2}
-      L 30 ${height - line.width}
-      L 20 ${height - line.width}
-      `;
-  }, [type, width, height]);
-
-  const leftLine = useMemo(() => {
-    if (type === 2) {
-      return `
-        M 20 ${line.width}
-        L 4 ${height / 2}
-        L 20 ${height - line.width}
-      `;
-    }
-    if (type === 3) {
-      return `
-        M 20 ${line.width}
-        A 10 ${height / 2} 0 0 0 20 ${height - line.width}
-        M 10 ${height / 2}
-        L 0 ${height / 2}
-        `;
-    }
-    if (type === 4) {
-      return `
-        M 20 ${line.width}
-        Q 10 ${line.width} 10 10
-        L 10 ${height / 2 - 10}
-        Q 10 ${height / 2} 0 ${height / 2}
-        Q 10 ${height / 2} 10 ${height / 2 + 10}
-        L 10 ${height - 10}
-        Q 10 ${height - line.width} 20 ${height - line.width}
-        `;
-    }
-    return `
-      M 20 ${line.width}
-      L 10 ${line.width}
-      L 10 ${height / 2}
-      L 00 ${height / 2}
-      L 10 ${height / 2}
-      L 10 ${height - line.width}
-      L 20 ${height - line.width}
-      `;
-  }, [type, width, height]);
-
-  const topLine = useMemo(() => {
-    return `
-              M 20 ${line.width}
-              L 30 ${line.width}
-              L 30 ${height / 2}
-              L 40 ${height / 2}
-              L 30 ${height / 2}
-              L 30 ${height - line.width}
-              L 20 ${height - line.width}
-              `;
-  }, [type, width, height]);
-
-  const bottomLine = useMemo(() => {
-    return `
-              M 20 ${line.width}
-              L 30 ${line.width}
-              L 30 ${height / 2}
-              L 40 ${height / 2}
-              L 30 ${height / 2}
-              L 30 ${height - line.width}
-              L 20 ${height - line.width}
-              `;
-  }, [type, width, height]);
-
-  const path = useMemo(() => {
-    switch(linePosition) {
-      case 'bottom': return bottomLine;
-      case 'top': return topLine;
-      case 'left': return leftLine;
-      case 'right': return rightLine;
-    }
-  }, [type, width, height]);
-
-  // 删除概要
-  const handleRemove = () => {
-    const parentNode = graph.getCellById(summarySource);
-    parentNode?.setData(
-      {
-        summary: undefined,
-      },
-      {
-        deep: false,
-      }
-    );
-  };
-
-  const handleChange = (key: string, value: any) => {
-    node.setData({
-      [key]: value,
-    });
-    const parentNode = graph.getCellById(summarySource);
-    if (parentNode) {
-      parentNode.setData({
-        summary: {
-          ...parentNode.data.summary,
-          border: {
-            ...parentNode.data.summary.border,
-            [key]: value,
-          },
-        },
-      });
-    }
-  };
-
-  const colors = [
-    "#bf1e1b",
-    "#63abf7",
-    "#71cb2d",
-    "#ff9f1a",
-    "#30bfbf",
-    "#000",
-  ];
-
-  const ColorBtn = ({
-    color,
-    value,
-    onClick,
-  }: {
-    color: string;
-    value: string;
-    onClick: () => void;
-  }) => {
-    return (
-      <div
-        className={`relative w-18px h-18px cursor-pointer rounded-4px flex items-center justify-center hover:opacity-80`}
-        style={{
-          background: color,
-          border: !color ? "1px solid #000" : "",
-        }}
-        onClick={onClick}
-      >
-        {color === value && (
-          <i className="iconfont icon-zhengque-1 color-#fff" />
-        )}
-        {!color && (
-          <i className="absolute left-0 top-0 block w-1px h-24px bg-#de0f18 origin-top-left rotate--45" />
-        )}
-      </div>
-    );
-  };
-
-  return (
-    <>
-      <div className="relative text-0 w-full h-full">
-        {showSetting && (
-          <svg
-            className="w-full h-full"
-            viewBox={`0 0 ${width} ${height}`}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill="none"
-              d={`
-              M ${0},${0}
-              L ${width},${0}
-              L ${width},${height}
-              L ${0},${height} Z
-            `}
-              stroke={line.color}
-              strokeWidth={2}
-            />
-          </svg>
-        )}
-
-        <svg
-          className="absolute w-40px h-full"
-          style={lineStyle}
-          viewBox={`0 0 ${40} ${height}`}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d={path}
-            fill="none"
-            stroke={line.color}
-            strokeWidth={line.width}
-          />
-        </svg>
-
-        {showSetting && (
-          <Popover
-            trigger={["hover"]}
-            content={
-              <div className="w-240px">
-                <div className="flex justify-between items-center m-b-20px">
-                  <span className="text-14px font-bold">概要设置</span>
-                  <span
-                    className="text-12px cursor-pointer color-#666 hover:color-red"
-                    onClick={handleRemove}
-                  >
-                    删除概要
-                    <i className="iconfont icon-shanchu m-l-4px" />
-                  </span>
-                </div>
-                <div className="flex items-center gap-8px m-b-8px">
-                  <span className="text-12px color-#333">概要宽度</span>
-                  <InputNumber
-                    className="w-100px"
-                    size="small"
-                    min={1}
-                    max={4}
-                    precision={0}
-                    value={line.width}
-                    onChange={(val) =>
-                      handleChange("line", { ...line, width: val })
-                    }
-                  />
-                </div>
-                <div className="flex items-center gap-8px m-b-8px">
-                  <span className="text-12px color-#333">概要颜色</span>
-                  {colors.map((color) => (
-                    <ColorBtn
-                      key={color}
-                      color={color}
-                      value={line.color}
-                      onClick={() => handleChange("line", { ...line, color })}
-                    />
-                  ))}
-                </div>
-                <div className="flex items-center gap-8px m-b-8px">
-                  <span className="text-12px color-#333">概要样式</span>
-                  <Button
-                    type="text"
-                    size="small"
-                    icon={<Icon icon="local:1" height="16px" />}
-                    className={type === 1 ? "active" : ""}
-                    onClick={() => handleChange("type", 1)}
-                  ></Button>
-                  <Button
-                    type="text"
-                    size="small"
-                    icon={<Icon icon="local:2" height="16px" />}
-                    className={type === 1 ? "active" : ""}
-                    onClick={() => handleChange("type", 2)}
-                  ></Button>
-                  <Button
-                    type="text"
-                    size="small"
-                    icon={<Icon icon="local:3" height="16px" />}
-                    className={type === 1 ? "active" : ""}
-                    onClick={() => handleChange("type", 3)}
-                  ></Button>
-                  <Button
-                    type="text"
-                    size="small"
-                    icon={<Icon icon="local:4" height="16px" />}
-                    className={type === 1 ? "active" : ""}
-                    onClick={() => handleChange("type", 4)}
-                  ></Button>
-                </div>
-              </div>
-            }
-          >
-            <i
-              className="z-9 iconfont icon-more text-12px absolute top-25% cursor-pointer"
-              style={{ 
-                color: line.color || "#000",
-                [linePosition]: '-36px'
-              }}
-            />
-          </Popover>
-        )}
-      </div>
-    </>
-  );
-};
-
-// 主题节点
-register({
-  shape: "mind-map-summary-border",
-  effect: ["data"],
-  component: component,
-});
-
-export default {
-  shape: "mind-map-summary-border",
-  data: {
-    line: {
-      width: 2,
-      color: "#63abf7",
-    },
-    type: 1,
-  },
-};

packages/flowchart-render/src/components/mindMap/Text.tsx

@@ -1,166 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Input, InputRef } from "antd";
-import { Node } from "@antv/x6";
-import { useSafeState } from "ahooks";
-export default function Text(props: {
-  value: string;
-  styles: React.CSSProperties & {
-    bold: boolean;
-    italic: boolean;
-  };
-  node: Node;
-  fixedWidth: boolean;
-  placeholder?: string;
-  txtStyle?: React.CSSProperties;
-  onChange?: (value: string) => void;
-}) {
-  const { value, styles, node, placeholder, txtStyle } = props;
-  const [isEditing, setIsEditing] = useSafeState(false);
-  const inputRef = useRef<InputRef>(null);
-
-  const style = useMemo((): React.CSSProperties => {
-    return {
-      ...styles,
-      fontWeight: styles.bold ? "bold" : undefined,
-      fontStyle: styles.italic ? "italic" : undefined,
-      minHeight: "12px",
-      padding: 0,
-      wordBreak: "break-all",
-    };
-  }, [styles]);
-
-  const handleChange = (val: string) => {
-    node.setData({ label: val });
-    props.onChange?.(val);
-  };
-
-  const handleSetEditing = (edit: boolean) => {
-    if (node.data?.lock) {
-      return;
-    }
-    node.setData({
-      ignoreDrag: edit,
-    });
-    if (edit) {
-      setTimeout(() => {
-        inputRef.current?.focus({ cursor: "all" });
-      }, 100);
-    }
-    setIsEditing(edit);
-  };
-
-  const [findObj, setFindObj] = useState<{
-    findStr: string;
-    currentCellId?: string;
-    currentIndex: number;
-  }>();
-  // 查找
-  const handleFind = (args: any) => {
-    setFindObj(args?.current || {});
-  };
-
-  const label = useMemo(() => {
-    if (!findObj) return value;
-    const list = (value || "").split(findObj.findStr || "");
-    return list.map((str: string, index) => {
-      // 当前的节点展示
-      const style =
-        findObj.currentCellId === node.id
-          ? {
-              background:
-                index + 1 === findObj.currentIndex
-                  ? "#FF9933"
-                  : "rgba(255, 153, 51, 0.25)",
-            }
-          : {
-              background: "#ffff00",
-            };
-      return (
-        <span key={index}>
-          {str}
-          {index < list.length - 1 && (
-            <span style={{
-              ...style,
-              color: '#333'
-            }}>{findObj.findStr}</span>
-          )}
-        </span>
-      );
-    });
-  }, [value, findObj]);
-
-  const handleReplace = (args: any) => {
-    const { type, searchText, replaceText, currentIndex, currentCellId } = args?.current || {};
-    if(args.current?.type === 'replaceAll') {
-      handleChange(value.replaceAll(searchText, replaceText));
-    }
-    if(type === 'replace' && currentCellId === node.id) {
-      const list = value.split(searchText);
-      const text = list.map((str, index) => {
-        const result = index + 1 === currentIndex ? replaceText : searchText;
-        return str + (index < list.length - 1 ? result : '');
-      }).join("");
-      handleChange(text);
-    }
-  };
-
-  const handleClear = () => {
-    setFindObj(undefined);
-  };
-
-  useEffect(() => {
-    node.off("change:find", handleFind);
-    node.off("change:replace", handleReplace);
-    node.off("change:clearFind", handleClear);
-
-    node.on("change:find", handleFind);
-    node.on("change:replace", handleReplace);
-    node.on("change:clearFind", handleClear);
-    return () => {
-      node.off("change:find", handleFind);
-      node.off("change:replace", handleReplace);
-      node.off("change:clearFind", handleClear);
-    };
-  }, [value]);
-
-  // useEffect(() => {
-  //   // 处理字体加载
-  //   // @ts-ignore
-  //   // WebFont.load({
-  //   //   google: {
-  //   //     families: [styles.fontFamily]
-  //   //   }
-  //   // })
-  // }, [styles.fontFamily]);
-
-  return (
-    <div style={txtStyle}>
-      <div
-        style={{
-          ...style,
-          opacity: isEditing ? 0 : 1,
-        }}
-        onDoubleClick={() => handleSetEditing(true)}
-      >
-        {label}
-      </div>
-      {isEditing && (
-        <Input.TextArea
-          ref={inputRef}
-          placeholder={placeholder}
-          value={value}
-          variant="borderless"
-          style={{
-            ...style,
-            position: "absolute",
-            left: 0,
-            top: 0
-          }}
-          onChange={(e) => handleChange(e.target.value)}
-          onBlur={() => handleSetEditing(false)}
-          autoSize
-        />
-      )}
-    </div>
-  );
-}

packages/flowchart-render/src/components/mindMap/Topic.tsx

@@ -1,394 +0,0 @@
-import { register } from "@antv/x6-react-shape";
-import { EventArgs, Graph, Node } from "@antv/x6";
-import { topicData } from "@/config/data";
-import { useSizeHook, useShapeProps } from "../../hooks";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { PlusOutlined } from "@ant-design/icons";
-import { TopicType } from "@/enum";
-import { addTopic } from "@/pages/mindmap/mindMap";
-
-import Link from "./Link";
-import ExtraModule from "./ExtraModule";
-import CustomTag from "@/components/mindMap/CustomTag";
-import { TopicItem } from "@/types";
-import { selectTopic } from "@/utils/mindmapHander";
-import { Tooltip, Popover } from "antd";
-import LinkForm from "./LinkForm";
-import Text from "./Text";
-import FlowExtra from "../FlowExtra";
-const component = ({ node, graph }: { node: Node; graph: Graph }) => {
-  const {
-    fill,
-    stroke,
-    opacity,
-    label,
-    text,
-    borderSize,
-    setMindProjectInfo,
-    icons,
-    tags,
-    extraModules,
-    remark,
-    href,
-    children,
-    type,
-    collapsed,
-    fixedWidth,
-    linkTopicId,
-  } = node.getData();
-  const { size, ref } = useSizeHook();
-  const { fillContent, strokeColor, strokeWidth } = useShapeProps(
-    fill,
-    size,
-    stroke
-  );
-  const [selected, setSelected] = useState(false);
-  const [showPopover, setShowPopover] = useState(false);
-  const [popoverContent, setPopoverContent] = useState<React.ReactNode>();
-  const handleSelect = (_args: EventArgs["node:selected"]) => {
-    const cells = graph.getSelectedCells();
-    setSelected(!!cells.find((item) => item.id === node.id));
-  };
-  const [showCollapsePoint, setShowCollapsePoint] = useState(collapsed);
-  const extraModuleRef = useRef<HTMLDivElement>(null);
-  const titleRef = useRef<HTMLDivElement>(null);
-  const tagRef = useRef<HTMLDivElement>(null);
-  const remarkRef = useRef<HTMLDivElement>(null);
-
-  const padding = useMemo(() => {
-    switch (type) {
-      case TopicType.main:
-        return {
-          y: 14,
-          x: 28,
-        };
-      case TopicType.branch:
-        return {
-          y: 8,
-          x: 16,
-        };
-      default:
-        return {
-          y: 4,
-          x: 6,
-        };
-    }
-  }, [type]);
-
-  const showHrefConfig = () => {
-    setShowPopover(true);
-    setPopoverContent(
-      <LinkForm
-        title={href?.title}
-        value={href?.value}
-        onCancel={() => setShowPopover(false)}
-        onConfirm={(data) => {
-          setShowPopover(false);
-          node.setData({ href: data });
-        }}
-      />
-    );
-  };
-
-  // @ts-ignore 绑定一个外部调用方法
-  node.extendAttr = {
-    showHrefConfig,
-  };
-
-  useEffect(() => {
-    // graph.createTransformWidget(node);
-    // graph.select(node);
-    graph.on("node:selected", handleSelect);
-    graph.on("node:unselected", handleSelect);
-    return () => {
-      graph.off("node:selected", handleSelect);
-      graph.off("node:unselected", handleSelect);
-    };
-  }, []);
-
-  const changeSize = () => {
-    const { clientHeight = 0, clientWidth = 0 } = ref.current || {};
-    const size = node.size();
-    if (
-      clientHeight &&
-      (size.width !== clientWidth || size.height !== clientHeight)
-    ) {
-      node.size(clientWidth, clientHeight);
-      node.setData({
-        width: clientWidth,
-        height: clientHeight,
-      });
-    }
-  };
-
-  useEffect(() => {
-    changeSize();
-  }, [node.data]);
-
-  const childrenCount = useMemo(() => {
-    let count = 0;
-    const traverse = (topics: TopicItem[]) => {
-      topics.forEach((item) => {
-        count++;
-        if (item.children) {
-          traverse(item.children);
-        }
-      });
-    };
-
-    traverse(children);
-    return count;
-  }, [children]);
-
-  const handleShowRemark = () => {
-    selectTopic(graph, node.data);
-    // @ts-ignore
-    graph.extendAttr.setRightToolbarActive("remark");
-  };
-
-  const handleAddBranch = () => {
-    const data = node.getData();
-    let topic;
-    if (data.type === TopicType.main) {
-      topic = addTopic(TopicType.branch, setMindProjectInfo, graph, node);
-    } else {
-      topic = addTopic(TopicType.sub, setMindProjectInfo, graph, node);
-    }
-
-    selectTopic(graph, topic);
-  };
-
-  const handleToggleCollapse = () => {
-    node.setData({
-      collapsed: !collapsed,
-    });
-  };
-
-  const handleDeleteHeft = () => {
-    node.setData(
-      {
-        href: undefined,
-      },
-      {
-        deep: false,
-      }
-    );
-  };
-
-  const handleChangeTag = (tagInfo: { color?: string; title?: string }, index: number) => {
-    node.setData({
-      tags: tags.map((item: { color?: string; title?: string }, i: number) => {
-        if (index === i) {
-          return {
-            ...item,
-            ...tagInfo
-          }
-        }
-        return item;
-      }, {
-        deep: false
-      })
-    })
-  }
-
-  const handleDeleteTag = (index: number) => {
-    tags.splice(index, 1);
-    node.setData({
-      tags
-    }, {
-      deep: false
-    });
-  }
-
-  return (
-    <div>
-      {selected && (
-        <div
-          style={{
-            width: `calc(100% + 4px)`,
-            height: `calc(100% + 4px)`,
-            border: "1.5px solid #239edd",
-            position: "absolute",
-            top: -2,
-            left: -2,
-          }}
-        />
-      )}
-      <Popover open={showPopover} content={popoverContent}>
-        <div
-          className="content relative text-0"
-          ref={ref}
-          style={{
-            width: fixedWidth ? "100%" : "fit-content",
-            opacity: opacity / 100,
-            border: `${stroke.type} ${strokeWidth}px ${strokeColor}`,
-            background: fillContent,
-            borderRadius: borderSize,
-            padding: `${padding.y}px ${padding.x}px`,
-          }}
-          onMouseOver={() => !collapsed && setShowCollapsePoint(true)}
-          onMouseLeave={() => !collapsed && setShowCollapsePoint(false)}
-        >
-          <FlowExtra node={node}/>
-          {/* 扩展模块 */}
-          {extraModules && (
-            <div className="extra" ref={extraModuleRef}>
-              <ExtraModule node={node} extraModules={extraModules} />
-            </div>
-          )}
-
-          {/* 图标、标题、链接等 */}
-          <div className="tit flex items-center justify-center" ref={titleRef}>
-            <div className="flex items-center text-20px">
-              {icons?.map((icon: string) => {
-                return (
-                  <svg key={icon} className="icon mr-6px" aria-hidden="true">
-                    <use xlinkHref={`#${icon}`}></use>
-                  </svg>
-                );
-              })}
-            </div>
-            <Text
-              value={label}
-              node={node}
-              fixedWidth={fixedWidth}
-              styles={{
-                ...text,
-              }}
-              txtStyle={{
-                position: "relative",
-                ...(fixedWidth
-                  ? { maxWidth: `calc(100% - ${2 * padding.x}px)` }
-                  : { width: "max-content" }),
-              }}
-            />
-            <div
-              className="flex items-center color-#fff m-l-8px"
-              ref={remarkRef}
-            >
-              {href && (
-                <Link
-                  link={href}
-                  onEdit={showHrefConfig}
-                  onDelete={handleDeleteHeft}
-                />
-              )}
-              {remark && (
-                <Tooltip color="#ffffdd" title={<span className="color-#333">{remark}</span>} autoAdjustOverflow trigger={['hover', 'click']}>
-                  <i
-                    className="iconfont icon-pinglun1 cursor-pointer ml-4px"
-                    onClick={handleShowRemark}
-                  />
-                </Tooltip>
-              )}
-              {linkTopicId && (
-                <Tooltip color="yellow" title={remark}>
-                  <i
-                    className="iconfont icon-liangdianlianjie-01 cursor-pointer ml-4px"
-                    onClick={handleShowRemark}
-                  />
-                </Tooltip>
-              )}
-            </div>
-          </div>
-          {/* 标签 */}
-          <div className="" ref={tagRef}>
-            {tags?.map((item: { name: string; color: string }, index: number) => {
-              return (
-                <CustomTag
-                  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>
-              );
-            })}
-          </div>
-
-          {/* 添加主题按钮 */}
-          {selected && !children?.length && (
-            <div
-              className={`
-              absolute 
-              w-20px 
-              h-20px 
-              rounded-full 
-              right--25px 
-              top-50% 
-              translate-y-[-50%] 
-              flex 
-              justify-center 
-              items-center 
-              text-12px 
-              cursor-pointer 
-              bg-#eef0f3 
-              color-#9aa5b8 
-              hover:bg-#067bef 
-              hover:color-white`}
-              onClick={handleAddBranch}
-            >
-              <PlusOutlined />
-            </div>
-          )}
-          {type !== TopicType.main && children.length && (
-            <div
-              className="absolute right--30px top-0 w-30px h-full"
-              onMouseOver={() => !collapsed && setShowCollapsePoint(true)}
-              onMouseOut={() => !collapsed && setShowCollapsePoint(false)}
-            />
-          )}
-          {/* 折叠按钮 */}
-          {type !== TopicType.main && children?.length && showCollapsePoint && (
-            <div
-              className={`
-              absolute
-              rounded-full
-              bg-white
-              top-50%
-              translate-y-[-50%]
-              cursor-pointer
-              hover:bg-#e6e6e6
-              text-12px
-              flex
-              items-center
-              justify-center
-              ${collapsed ? "w-16px h-16px right--20px" : "w-10px h-10px right--15px"}
-             `}
-              onClick={handleToggleCollapse}
-              style={{
-                border: `1px solid ${fill.color1}`,
-                color: fill.color1,
-              }}
-            >
-              {collapsed && childrenCount}
-            </div>
-          )}
-        </div>
-      </Popover>
-    </div>
-  );
-};
-
-// 主题节点
-register({
-  shape: "mind-map-topic",
-  width: 206,
-  height: 70,
-  effect: ["data"],
-  component: component,
-});
-
-const baseNode = {
-  shape: "mind-map-topic",
-  data: {
-    label: "",
-    ...topicData,
-  },
-};
-
-export default baseNode;

packages/flowchart-render/src/components/uml/class/activeClass.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/class/class1.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text1, text2, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/class/class2.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text1, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/class/classRelationship.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/class/constraint.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/class/enumeration.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, text1, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/class/interface.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, text1, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/class/multiplictyClass.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/class/port.tsx

@@ -1,7 +1,7 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/class/simpleClass.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/class/simpleInterface.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/common/combinedFragment.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity, name } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/common/package.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Graph, Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity, name } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/common/umlNote.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/common/umlText.tsx

@@ -1,7 +1,7 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
+import CustomInput from "../../CustomInput";
 
 const component = ({ node }: { node: Node }) => {
   const { label, text} = node.getData();

packages/flowchart-render/src/components/uml/sequence/sequenceActivation.tsx

@@ -1,7 +1,7 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/sequence/sequenceBoundary.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/sequence/sequenceConstraint.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/sequence/sequenceControl.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/sequence/sequenceDeletion.tsx

@@ -1,7 +1,7 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/sequence/sequenceEntity.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/sequence/sequenceLifeLine.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/sequence/sequenceObject.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/sequence/sequenceTimerSignal.tsx

@@ -1,7 +1,7 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/usecase/actor.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/usecase/ovalContainer.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();

packages/flowchart-render/src/components/uml/usecase/rectangleContainer.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();
   const { size, ref } = useSizeHook();

packages/flowchart-render/src/components/uml/usecase/useCase.tsx

@@ -1,8 +1,8 @@
 
 import { register } from "@antv/x6-react-shape";
 import { Node } from "@antv/x6";
-import CustomInput from "@/components/CustomInput";
-import { useSizeHook, useShapeProps } from "../../hooks";
+import CustomInput from "../../CustomInput";
+import { useSizeHook, useShapeProps } from "../../../hooks";
 
 const component = ({ node }: { node: Node }) => {
   const { label, text, fill, stroke, opacity } = node.getData();

packages/flowchart-render/src/index.ts

@@ -50,18 +50,20 @@ export const getFlowNodeMetaByAi = (
  * 根据AI生成的数据获取节点元数据
  * @param data AI生成的数据
  */
-export const getFlowchartNodesByAi: (data: any) => void = (data) => {
+export const getFlowchartNodesByAi: (data: any) =>  Cell.Metadata[] = (data) => {
   // 数组
   if (Array.isArray(data)) {
     const list = (data || []).map((item) =>
       getFlowNodeMetaByAi(item, defaultData)
     );
     console.log("=====ai creator cells:=======\n", list);
-    return list;
+    return list as Cell.Metadata[];
   }
   // 对象
   if (data instanceof Object) {
     const cell = getFlowNodeMetaByAi(data, defaultData);
-    return [cell];
+    return [cell] as Cell.Metadata[];
   }
+
+  return [];
 };