feat: add Variables component to flow (#1839)

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

@@ -18,6 +18,7 @@ import {
   RenderUpload,
   RenderCodeEditor,
   RenderPassword,
+  RenderVariables,
 } from './node-renderer';
 
 interface NodeParamHandlerProps {
@@ -117,7 +118,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} />;

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

@@ -11,3 +11,4 @@ export * from './tree-select';
 export * from './codeEditor';
 export * from './upload';
 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);
+      }}
+    />
+  );
+};