feat: add Select type node rendering based on AWEL2.0 protocol to workflow (#1797)

web/components/flow/node-param-handler.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import RequiredIcon from './required-icon';
 import NodeHandler from './node-handler';
 import { InfoCircleOutlined } from '@ant-design/icons';
+import { RenderSelect, RenderCascader } from './node-renderer';
 
 interface NodeParamHandlerProps {
   node: IFlowNode;
@@ -14,14 +15,14 @@ interface NodeParamHandlerProps {
 
 // render node parameters item
 const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label, index }) => {
-  function handleChange(value: any) {
+  function onChange(value: any) {
     data.value = value;
   }
 
-  if (data.category === 'resource') {
-    return <NodeHandler node={node} data={data} type="target" label={label} index={index} />;
-  } else if (data.category === 'common') {
+  // render node parameters based on AWEL1.0
+  function renderNodeWithoutUiParam(data: IFlowNodeParameter) {
     let defaultValue = data.value !== null && data.value !== undefined ? data.value : data.default;
+
     switch (data.type_name) {
       case 'int':
       case 'float':
@@ -39,7 +40,7 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
               className="w-full"
               defaultValue={defaultValue}
               onChange={(value: number | null) => {
-                handleChange(value);
+                onChange(value);
               }}
             />
           </div>
@@ -60,20 +61,20 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
                 className="w-full nodrag"
                 defaultValue={defaultValue}
                 options={data.options.map((item: any) => ({ label: item.label, value: item.value }))}
-                onChange={handleChange}
+                onChange={onChange}
               />
             ) : (
               <Input
                 className="w-full"
                 defaultValue={defaultValue}
                 onChange={(e) => {
-                  handleChange(e.target.value);
+                  onChange(e.target.value);
                 }}
               />
             )}
           </div>
         );
-      case 'bool':
+      case 'checkbox':
         defaultValue = defaultValue === 'False' ? false : defaultValue;
         defaultValue = defaultValue === 'True' ? true : defaultValue;
         return (
@@ -89,7 +90,7 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
                 className="ml-2"
                 defaultChecked={defaultValue}
                 onChange={(e) => {
-                  handleChange(e.target.checked);
+                  onChange(e.target.checked);
                 }}
               />
             </p>
@@ -97,6 +98,23 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
         );
     }
   }
+
+  // render node parameters based on AWEL2.0
+  function renderNodeWithUiParam(data: IFlowNodeParameter) {
+    let defaultValue = data.value !== null && data.value !== undefined ? data.value : data.default;
+
+    // TODO: 根据ui_type渲染不同的组件
+    switch (data?.ui?.ui_type) {
+      case 'select':
+        return <RenderSelect  data={data} defaultValue={defaultValue} onChange={onChange} />;
+    }
+  }
+
+  if (data.category === 'resource') {
+    return <NodeHandler node={node} data={data} type="target" label={label} index={index} />;
+  } else if (data.category === 'common') {
+    return data?.ui ? renderNodeWithUiParam(data) : renderNodeWithoutUiParam(data);
+  }
 };
 
 export default NodeParamHandler;

web/components/flow/node-renderer/cascader.tsx

@@ -0,0 +1,3 @@
+import { IFlowNodeParameter } from '@/types/flow';
+
+export const RenderCascader = (props: IFlowNodeParameter) => {};

web/components/flow/node-renderer/index.ts

@@ -0,0 +1,2 @@
+export * from "./select";
+export * from "./cascader";

web/components/flow/node-renderer/select.tsx

@@ -0,0 +1,21 @@
+import { IFlowNodeParameter } from "@/types/flow";
+import { Select } from "antd";
+
+type SelectProps = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+}
+
+export const RenderSelect = (params: SelectProps) => {
+  const { data, defaultValue, onChange } = params;
+
+  return data.options?.length > 0 && (
+    <Select
+      className="w-full nodrag"
+      defaultValue={defaultValue}
+      options={data.options.map((item: any) => ({ label: item.label, value: item.value }))}
+      onChange={onChange}
+    />
+  ) 
+}

web/types/flow.ts

@@ -49,6 +49,15 @@ export type IFlowNodeParameter = {
   options?: any;
   value: any;
   is_list?: boolean;
+  ui: IFlowNodeParameterUI;
+};
+
+export type IFlowNodeParameterUI = {
+  ui_type: string;
+  attr: {
+    disabled: boolean;
+    [key: string]: any;
+  };
 };
 
 export type IFlowNodeInput = {