feat: add Variables component to flow

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

@@ -16,6 +16,7 @@ import {
   RenderTimePicker,
   RenderTextArea,
   RenderPassword,
+  RenderVariables,
 } from './node-renderer';
 import { convertKeysToCamelCase } from '@/utils/flow';
 
@@ -116,7 +117,7 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
   function renderNodeWithUiParam(data: IFlowNodeParameter) {
     let defaultValue = data.value ?? data.default;
     const props = { data, defaultValue, onChange };
-    
+
     switch (data?.ui?.ui_type) {
       case 'select':
         return <RenderSelect {...props} />;
@@ -142,6 +143,8 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
         return <RenderPassword {...props} />;
       case 'password':
         return <RenderTreeSelect {...props} />;
+      case 'variables':
+        return <RenderVariables {...props} />;
       default:
         return null;
     }

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

@@ -9,3 +9,4 @@ export * from './slider';
 export * from './time-picker';
 export * from './tree-select';
 export * from './password';
+export * from './variables';

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

@@ -0,0 +1,27 @@
+import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
+import { Input } from 'antd';
+
+type Props = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+
+export const RenderVariables = (params: Props) => {
+  const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  return (
+    <Input
+      {...attr}
+      className="w-full"
+      placeholder="please input"
+      defaultValue={defaultValue}
+      allowClear
+      onChange={(e) => {
+        onChange(e.target.value);
+      }}
+    />
+  );
+};