feat: 增加 schema 配置

Author: zhanbo.lh

docs/xflow/index.md

@@ -46,11 +46,11 @@ import schema from './schema/basic';
 import data from './data/basic';
 
 
-
-const nodeMenus = [
+const settings = [
   {
     title: 'Input',
     type: 'Start',
+    hidden: true,
     icon: {
       type: 'icon-start',
       bgColor: '#17B26A',
@@ -59,6 +59,7 @@ const nodeMenus = [
   {
     title: 'Output',
     type: 'End',
+    hidden: true,
     icon: {
       type: 'icon-end',
       bgColor: '#F79009',
@@ -135,6 +136,30 @@ const nodeMenus = [
       type: 'icon-gongju',
       bgColor: '#2E90FA'
     }
+  },
+  {
+    title: '工具',
+    type: '_group',
+    items: [
+      {
+    title: '代码执行',
+    type: 'Code',
+    description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',
+    icon: {
+      type: 'icon-code',
+      bgColor: '#2E90FA'
+    }
+  },
+  {
+    title: '工具',
+    type: 'tool',
+    description: '允许使用工具能力',
+    icon: {
+      type: 'icon-gongju',
+      bgColor: '#2E90FA'
+    }
+  },
+    ]
   }
 ];
 
@@ -166,10 +191,12 @@ export default () => {
 
   return (
     <div style={{ height: '600px' }}>
-      <XFlow 
-        nodes={nodes}
-        edges={edges}
-        nodeMenus={nodeMenus}
+      <XFlow
+        initialValues={{ nodes, edges }}
+        settings={settings}
+        nodeSelector={{
+          showSearch: true,
+        }}
       />
     </div>
   );

packages/x-flow/src/components/CustomEdge/index.tsx

@@ -5,7 +5,7 @@ import { useShallow } from 'zustand/react/shallow';
 import produce from 'immer';
 import { uuid } from '../../utils';
 import useStore from '../../models/store';
-import NodeSelectPopover from '../NodeSelectPopover';
+import NodeSelectPopover from '../NodesPopover';
 import './index.less';
 
 export default memo((edge: any) => {

packages/x-flow/src/components/CustomNode/index.tsx

@@ -8,13 +8,13 @@ import { Handle, Position, useReactFlow } from '@xyflow/react';
 import useStore from '../../models/store';
 import { capitalize, uuid } from '../../utils';
 import { ConfigContext } from '../../models/context';
-import NodeSelectPopover from '../NodeSelectPopover';
+import NodeSelectPopover from '../NodesPopover';
 import './index.less';
 
 export default memo((props: any) => {
   const { id, type, data, layout, isConnectable, selected, onClick } = props;
   const configCtx: any = useContext(ConfigContext);
-  const NodeWidget = configCtx?.nodeWidgets[`${capitalize(type)}Node`];
+  const NodeWidget = configCtx?.widgets[`${capitalize(type)}Node`];
 
   const [isHovered, setIsHovered] = useState(false);
   const reactflow = useReactFlow();

packages/x-flow/src/components/NodeSelectPopover/index.tsx

@@ -1,6 +1,16 @@
-.fai-reactflow-addblock {
-  min-height: 400px;
-  .node-item {
+.xflow-node-menu{
+  min-height: 340px;
+  min-width: 150px;
+
+  .menu-group-title {
+    padding: 0 10px;
+    color: #667085;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+
+  .menu-item {
     height: 32px;
     color: #101828;
     padding: 0 10px;
@@ -9,7 +19,7 @@
     cursor: pointer;
   }
 
-  .node-item:hover {
+  .menu-item:hover {
     background-color: #f9fafb;
     border-radius: 8px;
   }
@@ -24,7 +34,7 @@
   }
 }
 
-.node-info-tooltip {
+.xflow-node-menu-tooltip {
   width: 200px;
 
   .title {