From 8ced94066c7ee155e235a2cf76c8196f554d0eea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Mon, 19 Aug 2024 10:36:27 +0800
Subject: [PATCH] feat: add Variables component to flow

---
 web/components/flow/node-param-handler.tsx    |  5 +++-
 web/components/flow/node-renderer/index.ts    |  1 +
 .../flow/node-renderer/variables.tsx          | 27 +++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 web/components/flow/node-renderer/variables.tsx

diff --git a/web/components/flow/node-param-handler.tsx b/web/components/flow/node-param-handler.tsx
index 165eb59bb..d10bfd1d2 100644
--- a/web/components/flow/node-param-handler.tsx
+++ b/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;
     }
diff --git a/web/components/flow/node-renderer/index.ts b/web/components/flow/node-renderer/index.ts
index 59f1e44ef..f95706572 100644
--- a/web/components/flow/node-renderer/index.ts
+++ b/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';
diff --git a/web/components/flow/node-renderer/variables.tsx b/web/components/flow/node-renderer/variables.tsx
new file mode 100644
index 000000000..b3fb37af4
--- /dev/null
+++ b/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);
+      }}
+    />
+  );
+};