📝 feat: radius edge memo update

src/BloodGroupNode/index.tsx

@@ -1,6 +1,7 @@
 import { getClsFromSelectType } from '@/BloodNode';
 import { NodeMapItem, NodeSelect, ProFlowNode, ProFlowNodeData } from '@/ProFlow/constants';
 import { cx } from 'antd-style';
+import React from 'react';
 import { useStyles } from './styles';
 
 const convertMappingNode = (nodeList: ProFlowNode[]): NodeMapItem[] => {

src/ProFlow/index.tsx

@@ -1,7 +1,6 @@
-import RadiusEdge from '@/BasicEdge';
-import ProFlowController from '@/ProFlowController';
 import React, { useMemo, type CSSProperties, type MouseEvent as ReactMouseEvent } from 'react';
 import ReactFlow, { Background, BackgroundVariant, Edge, Node, useEdgesState } from 'reactflow';
+import { ProFlowController, RadiusEdge } from '../index';
 import { ProFLowEdge, ProFlowNode } from './constants';
 import { convertMappingFrom, getRenderData } from './helper';
 import { useStyles } from './styles';

src/RadiusEdge/demos/index.tsx

@@ -0,0 +1,141 @@
+import { ProFlow, ProFlowNode } from '@ant-design/pro-flow';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    height: 600px;
+  `,
+}));
+
+const nodes: ProFlowNode[] = [
+  {
+    id: 'a1',
+    data: {
+      title: 'XXX数据源',
+      describe: 'cksadjfnf',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
+    },
+  },
+  {
+    id: 'a2',
+    data: {
+      title: 'XXX_API',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'b1',
+    data: {
+      title: 'XXX_API',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      describe: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'a3',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+      describe: '2031030213014',
+    },
+  },
+  {
+    id: 'a4',
+    group: true,
+    data: [
+      {
+        id: 'a5',
+        data: {
+          title: 'XXX数据源',
+          describe: 'cksadjfnf',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
+        },
+      },
+      {
+        id: 'a6',
+        data: {
+          title: 'XXX_API',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+          describe: 'XXX_XXX_XXX_API',
+        },
+      },
+      {
+        id: 'a7',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+          describe: '2031030213014',
+        },
+      },
+      {
+        id: 'a8',
+        data: {
+          title: 'XXX数据源',
+          describe: 'cksadjfnf',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
+        },
+      },
+      {
+        id: 'a9',
+        data: {
+          title: 'XXX_API',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+          describe: 'XXX_XXX_XXX_API',
+        },
+      },
+      {
+        id: 'a10',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+          describe: '2031030213014',
+        },
+      },
+      {
+        id: 'a11',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+          describe: '2031030213014',
+        },
+      },
+    ],
+  },
+];
+
+const edges = [
+  {
+    id: 'a1-a2',
+    source: 'a1',
+    target: 'a2',
+  },
+  {
+    id: 'a1-b1',
+    source: 'a1',
+    target: 'b1',
+  },
+  {
+    id: 'a2-a3',
+    source: 'a2',
+    target: 'a3',
+  },
+  {
+    id: 'a3-a4',
+    source: 'a3',
+    target: 'a4',
+  },
+];
+
+const Demos = memo(() => {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.container}>
+      <ProFlow nodes={nodes} edges={edges} />
+    </div>
+  );
+});
+
+export default Demos;

src/RadiusEdge/index.md

@@ -0,0 +1,9 @@
+---
+group: 线段组件
+title: RadiusEdge 圆角线段
+description:
+---
+
+## 圆角线段
+
+<code src="./demos/index.tsx"></code>

src/constants.tsx

@@ -0,0 +1,18 @@
+export enum NodeSelect {
+  SELECT = 'SELECT',
+  DANGER = 'DANGER',
+  WARNING = 'WARNING',
+  DEFAULT = 'DEFAULT',
+}
+export interface ProFlowNode {
+  id: string;
+  group?: boolean;
+  select?: NodeSelect;
+  data: ProFlowNodeData | ProFlowNode[];
+}
+
+export interface ProFlowNodeData {
+  title: string;
+  describe: string;
+  logo: string;
+}

src/index.ts

@@ -7,3 +7,7 @@ export { FlowStoreProvider, type FlowEditorStoreProviderProps } from './FlowStor
 export * from './Input';
 export { NodeField, useNodeFieldStyles } from './NodeField';
 export type { ExtraAction } from './NodeField';
+export { default as ProFlow } from './ProFlow';
+export { default as ProFlowController } from './ProFlowController';
+export { default as RadiusEdge } from './RadiusEdge';
+export * from './constants';