From 5193c3e606e6c30f47836ecbd97a9461334b9fd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Mon, 12 Aug 2024 22:35:33 +0800
Subject: [PATCH 1/2] feat: add some atomic components to flow

---
 web/components/flow/node-param-handler.tsx    | 20 +++++++++++---
 .../flow/node-renderer/cascader.tsx           | 24 ++++++++++++++++-
 .../flow/node-renderer/checkbox.tsx           | 26 +++++++++++++++++++
 .../flow/node-renderer/data-picker.tsx        | 17 ++++++++++++
 web/components/flow/node-renderer/index.ts    |  8 ++++--
 web/components/flow/node-renderer/input.tsx   | 25 ++++++++++++++++++
 web/components/flow/node-renderer/radio.tsx   | 25 ++++++++++++++++++
 web/components/flow/node-renderer/select.tsx  | 22 +++++++++-------
 web/package.json                              |  1 +
 web/utils/flow.ts                             | 16 ++++++++++++
 web/yarn.lock                                 |  5 ++++
 11 files changed, 173 insertions(+), 16 deletions(-)
 create mode 100644 web/components/flow/node-renderer/checkbox.tsx
 create mode 100644 web/components/flow/node-renderer/data-picker.tsx
 create mode 100644 web/components/flow/node-renderer/input.tsx
 create mode 100644 web/components/flow/node-renderer/radio.tsx

diff --git a/web/components/flow/node-param-handler.tsx b/web/components/flow/node-param-handler.tsx
index efa3cc67a..ab16ecc07 100644
--- a/web/components/flow/node-param-handler.tsx
+++ b/web/components/flow/node-param-handler.tsx
@@ -4,7 +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';
+import { RenderSelect, RenderCheckbox, RenderRadio, RenderCascader, RenderDataPicker, RenderInput } from './node-renderer';
 
 interface NodeParamHandlerProps {
   node: IFlowNode;
@@ -101,12 +101,24 @@ 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;
+    let defaultValue = data.value ?? data.default;
+    const props = { data, defaultValue, onChange };
 
-    // TODO: 根据ui_type渲染不同的组件
     switch (data?.ui?.ui_type) {
       case 'select':
-        return <RenderSelect  data={data} defaultValue={defaultValue} onChange={onChange} />;
+        return <RenderSelect {...props} />;
+      case 'cascader':
+        return <RenderCascader {...props} />;
+      case 'checkbox':
+        return <RenderCheckbox {...props} />;
+      case 'radio':
+        return <RenderRadio {...props} />;
+      case 'data_picker':
+        return <RenderDataPicker {...props} />;
+      case 'input':
+        return <RenderInput {...props} />;
+      default:
+        return null;
     }
   }
 
diff --git a/web/components/flow/node-renderer/cascader.tsx b/web/components/flow/node-renderer/cascader.tsx
index 605105a93..b7b9c4a9f 100644
--- a/web/components/flow/node-renderer/cascader.tsx
+++ b/web/components/flow/node-renderer/cascader.tsx
@@ -1,3 +1,25 @@
 import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
+import { Cascader } from 'antd';
 
-export const RenderCascader = (props: IFlowNodeParameter) => {};
+type Props = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+
+export const RenderCascader = (params: Props) => {
+  const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  return (
+    <Cascader 
+      {...attr}
+      options={data.options} 
+      defaultValue={defaultValue}
+      placeholder="Please select" 
+      className="w-full nodrag"
+      onChange={onChange} 
+    />
+  );
+};
diff --git a/web/components/flow/node-renderer/checkbox.tsx b/web/components/flow/node-renderer/checkbox.tsx
new file mode 100644
index 000000000..194005982
--- /dev/null
+++ b/web/components/flow/node-renderer/checkbox.tsx
@@ -0,0 +1,26 @@
+import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
+import { Checkbox } from 'antd';
+
+type Props = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+
+export const RenderCheckbox = (params: Props) => {
+  const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  return (
+    data.options?.length > 0 && (
+      <Checkbox.Group
+        {...attr}
+        options={data.options}
+        disabled
+        defaultValue={defaultValue}
+        onChange={onChange}
+      />
+    )
+  );
+};
diff --git a/web/components/flow/node-renderer/data-picker.tsx b/web/components/flow/node-renderer/data-picker.tsx
new file mode 100644
index 000000000..69f18d78f
--- /dev/null
+++ b/web/components/flow/node-renderer/data-picker.tsx
@@ -0,0 +1,17 @@
+import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+
+type Props = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+
+export const RenderDataPicker = (params: Props) => {
+  const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  return <DatePicker {...attr} defaultValue={dayjs(defaultValue)} onChange={onChange} />;
+};
diff --git a/web/components/flow/node-renderer/index.ts b/web/components/flow/node-renderer/index.ts
index d9d116497..b3d2a6b7e 100644
--- a/web/components/flow/node-renderer/index.ts
+++ b/web/components/flow/node-renderer/index.ts
@@ -1,2 +1,6 @@
-export * from "./select";
-export * from "./cascader";
\ No newline at end of file
+export * from './select';
+export * from './cascader';
+export * from './data-picker';
+export * from './input';
+export * from './checkbox';
+export * from './radio';
diff --git a/web/components/flow/node-renderer/input.tsx b/web/components/flow/node-renderer/input.tsx
new file mode 100644
index 000000000..b6f1f5052
--- /dev/null
+++ b/web/components/flow/node-renderer/input.tsx
@@ -0,0 +1,25 @@
+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 RenderInput = (params: Props) => {
+  const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  return (
+    <Input
+      {...attr}
+      className="w-full"
+      defaultValue={defaultValue}
+      onChange={(e) => {
+        onChange(e.target.value);
+      }}
+    />
+  );
+};
diff --git a/web/components/flow/node-renderer/radio.tsx b/web/components/flow/node-renderer/radio.tsx
new file mode 100644
index 000000000..4b5a1a194
--- /dev/null
+++ b/web/components/flow/node-renderer/radio.tsx
@@ -0,0 +1,25 @@
+import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
+import { Radio } from 'antd';
+
+type Props = {
+  data: IFlowNodeParameter;
+  defaultValue: any;
+  onChange: (value: any) => void;
+};
+
+export const RenderRadio = (params: Props) => {
+  const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
+
+  return (
+    <Radio.Group
+      {...attr}
+      options={data.options}
+      onChange={(e) => {
+        onChange(e.target.checked);
+      }}
+      defaultValue={defaultValue}
+    />
+  );
+};
diff --git a/web/components/flow/node-renderer/select.tsx b/web/components/flow/node-renderer/select.tsx
index 897d18522..0752d6959 100644
--- a/web/components/flow/node-renderer/select.tsx
+++ b/web/components/flow/node-renderer/select.tsx
@@ -1,21 +1,25 @@
-import { IFlowNodeParameter } from "@/types/flow";
-import { Select } from "antd";
+import { IFlowNodeParameter } from '@/types/flow';
+import { Select } from 'antd';
+import { convertKeysToCamelCase } from '@/utils/flow';
 
-type SelectProps = {
+type Props = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
-}
+};
 
-export const RenderSelect = (params: SelectProps) => {
+export const RenderSelect = (params: Props) => {
   const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
-  return data.options?.length > 0 && (
+  return (
     <Select
+      {...attr}
       className="w-full nodrag"
+      placeholder="Please select" 
       defaultValue={defaultValue}
-      options={data.options.map((item: any) => ({ label: item.label, value: item.value }))}
+      options={data.options}
       onChange={onChange}
     />
-  ) 
-}
+  );
+};
diff --git a/web/package.json b/web/package.json
index 560a806f9..a354faf83 100644
--- a/web/package.json
+++ b/web/package.json
@@ -32,6 +32,7 @@
     "copy-to-clipboard": "^3.3.3",
     "cytoscape": "^3.29.2",
     "cytoscape-euler": "^1.2.2",
+    "dayjs": "^1.11.12",
     "i18next": "^23.4.5",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
diff --git a/web/utils/flow.ts b/web/utils/flow.ts
index 90e9d9ec1..a269d074d 100644
--- a/web/utils/flow.ts
+++ b/web/utils/flow.ts
@@ -98,3 +98,19 @@ export const checkFlowDataRequied = (flowData: IFlowData) => {
   }
   return result;
 };
+
+export const convertKeysToCamelCase = (obj: Record<string, any>): Record<string, any> => {
+  function toCamelCase(str: string): string {
+    return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+  }
+  const newObj: Record<string, any> = {};
+
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const newKey = toCamelCase(key);
+      newObj[newKey] = obj[key];
+    }
+  }
+
+  return newObj;
+};
diff --git a/web/yarn.lock b/web/yarn.lock
index 621f7a495..979775159 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2518,6 +2518,11 @@ dayjs@^1.11.11, dayjs@^1.9.1:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
   integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==
 
+dayjs@^1.11.12:
+  version "1.11.12"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.12.tgz#5245226cc7f40a15bf52e0b99fd2a04669ccac1d"
+  integrity sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"

From 9808af3fa24f8d0cadc67246788c275ddafff683 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Tue, 13 Aug 2024 14:55:44 +0800
Subject: [PATCH 2/2] feat: optimize code

---
 web/components/flow/node-renderer/index.ts    |  4 +-
 .../{sliderList.tsx => slider-list.tsx}       |  9 ++--
 web/components/flow/node-renderer/slider.tsx  |  9 ++--
 .../flow/node-renderer/textarea.tsx           | 14 ++++--
 .../{timePicker.tsx => time-picker.tsx}       |  4 +-
 .../{treeSelect.tsx => tree-select.tsx}       |  0
 web/utils/flow.ts                             | 47 ++++++++-----------
 7 files changed, 47 insertions(+), 40 deletions(-)
 rename web/components/flow/node-renderer/{sliderList.tsx => slider-list.tsx} (64%)
 rename web/components/flow/node-renderer/{timePicker.tsx => time-picker.tsx} (74%)
 rename web/components/flow/node-renderer/{treeSelect.tsx => tree-select.tsx} (100%)

diff --git a/web/components/flow/node-renderer/index.ts b/web/components/flow/node-renderer/index.ts
index 378145fac..277c03411 100644
--- a/web/components/flow/node-renderer/index.ts
+++ b/web/components/flow/node-renderer/index.ts
@@ -6,5 +6,5 @@ export * from './checkbox';
 export * from './radio';
 export * from './textarea';
 export * from './slider';
-export * from './timePicker';
-export * from './treeSelect';
+export * from './time-picker';
+export * from './tree-select';
diff --git a/web/components/flow/node-renderer/sliderList.tsx b/web/components/flow/node-renderer/slider-list.tsx
similarity index 64%
rename from web/components/flow/node-renderer/sliderList.tsx
rename to web/components/flow/node-renderer/slider-list.tsx
index 6a7f72610..330926040 100644
--- a/web/components/flow/node-renderer/sliderList.tsx
+++ b/web/components/flow/node-renderer/slider-list.tsx
@@ -1,4 +1,5 @@
 import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
 import { Col, InputNumber, Row, Slider, Space } from 'antd';
 import type { InputNumberProps } from 'antd';
 import React, { useState } from 'react';
@@ -11,25 +12,27 @@ type TextAreaProps = {
 
 export const RenderSlider = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
   const [inputValue, setInputValue] = useState(defaultValue);
 
   const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
     setInputValue(newValue as number);
     onChange(newValue as number);
   };
+  
   return (
     <>
       {data?.ui?.show_input ? (
         <Row>
           <Col span={12}>
-            <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
+            <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
           </Col>
           <Col span={4}>
-            <InputNumber {...data.ui.attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
+            <InputNumber {...attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
           </Col>
         </Row>
       ) : (
-        <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
+        <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
       )}
     </>
   );
diff --git a/web/components/flow/node-renderer/slider.tsx b/web/components/flow/node-renderer/slider.tsx
index 8a60715bb..1017e20bb 100644
--- a/web/components/flow/node-renderer/slider.tsx
+++ b/web/components/flow/node-renderer/slider.tsx
@@ -1,4 +1,5 @@
 import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
 import { Col, InputNumber, Row, Slider, Space } from 'antd';
 import type { InputNumberProps } from 'antd';
 import React, { useState } from 'react';
@@ -11,7 +12,7 @@ type TextAreaProps = {
 
 export const RenderSlider = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
-
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
   const [inputValue, setInputValue] = useState(defaultValue);
 
   const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
@@ -24,14 +25,14 @@ export const RenderSlider = (params: TextAreaProps) => {
       {data?.ui?.show_input ? (
         <Row>
           <Col span={12}>
-            <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
+            <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
           </Col>
           <Col span={4}>
-            <InputNumber {...data.ui.attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
+            <InputNumber {...attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
           </Col>
         </Row>
       ) : (
-        <Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
+        <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
       )}
     </>
   );
diff --git a/web/components/flow/node-renderer/textarea.tsx b/web/components/flow/node-renderer/textarea.tsx
index 3ba9e082d..a22caed10 100644
--- a/web/components/flow/node-renderer/textarea.tsx
+++ b/web/components/flow/node-renderer/textarea.tsx
@@ -1,6 +1,6 @@
 import { IFlowNodeParameter } from '@/types/flow';
 import { Input } from 'antd';
-import { uiAtrrtUnderlineToHump } from '@/utils/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
 
 const { TextArea } = Input;
 
@@ -12,7 +12,15 @@ type TextAreaProps = {
 
 export const RenderTextArea = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
-  uiAtrrtUnderlineToHump(data?.ui?.attr?.autosize || {});
+  convertKeysToCamelCase(data?.ui?.attr?.autosize || {});
 
-  return <TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.autosize} rows={4} />;
+  return (
+    <TextArea 
+      {...data.ui.attr} 
+      defaultValue={defaultValue} 
+      onChange={(e) => onChange(e.target.value)} 
+      {...data.ui.attr.autosize} 
+      rows={4} 
+    />
+  )
 };
diff --git a/web/components/flow/node-renderer/timePicker.tsx b/web/components/flow/node-renderer/time-picker.tsx
similarity index 74%
rename from web/components/flow/node-renderer/timePicker.tsx
rename to web/components/flow/node-renderer/time-picker.tsx
index f86088508..841a4131d 100644
--- a/web/components/flow/node-renderer/timePicker.tsx
+++ b/web/components/flow/node-renderer/time-picker.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import type { TimePickerProps } from 'antd';
 import { TimePicker } from 'antd';
 import { IFlowNodeParameter } from '@/types/flow';
+import { convertKeysToCamelCase } from '@/utils/flow';
 
 type TextAreaProps = {
   data: IFlowNodeParameter;
@@ -11,6 +12,7 @@ type TextAreaProps = {
 export const RenderTimePicker = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
   const [value, setValue] = useState(defaultValue);
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   // dayjs.extend(customParseFormat);
 
@@ -19,5 +21,5 @@ export const RenderTimePicker = (params: TextAreaProps) => {
     setValue(time);
   };
 
-  return <TimePicker style={{ width: '100%' }} {...data.ui.attr} value={value} onChange={onChangeTime} />;
+  return <TimePicker {...attr} style={{ width: '100%' }} value={value} onChange={onChangeTime} />;
 };
diff --git a/web/components/flow/node-renderer/treeSelect.tsx b/web/components/flow/node-renderer/tree-select.tsx
similarity index 100%
rename from web/components/flow/node-renderer/treeSelect.tsx
rename to web/components/flow/node-renderer/tree-select.tsx
diff --git a/web/utils/flow.ts b/web/utils/flow.ts
index 26b1efec5..f7ba7d3b7 100644
--- a/web/utils/flow.ts
+++ b/web/utils/flow.ts
@@ -10,26 +10,7 @@ export const getUniqueNodeId = (nodeData: IFlowNode, nodes: Node[]) => {
   });
   return `${nodeData.id}_${count}`;
 };
-/**
- * 
- * 下划线转驼峰 
- */
-export const uiAtrrtUnderlineToHump = (obj: any) => {
-  for(let key in obj){
-    if(key.indexOf('_') !== -1){
-      let newKey = key.replace(/_(\w)/g, (all, letter) => {
-        return letter.toUpperCase();
-      });
 
-      obj[newKey] = obj[key];
-      delete obj[key];
-      // 判断是否为对象
-      if(typeof obj[newKey] === 'object'){
-        uiAtrrtUnderlineToHump(obj[newKey]);
-      }
-    }
-  }
-};
 
 // 驼峰转下划线，接口协议字段命名规范
 export const mapHumpToUnderline = (flowData: IFlowData) => {
@@ -123,14 +104,26 @@ export const convertKeysToCamelCase = (obj: Record<string, any>): Record<string,
   function toCamelCase(str: string): string {
     return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
   }
-  const newObj: Record<string, any> = {};
 
-  for (const key in obj) {
-    if (obj.hasOwnProperty(key)) {
-      const newKey = toCamelCase(key);
-      newObj[newKey] = obj[key];
-    }
+  function isObject(value: any): boolean {
+    return value && typeof value === 'object' && !Array.isArray(value);
   }
 
-  return newObj;
-};
+  function convert(obj: any): any {
+    if (Array.isArray(obj)) {
+      return obj.map(item => convert(item));
+    } else if (isObject(obj)) {
+      const newObj: Record<string, any> = {};
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          const newKey = toCamelCase(key);
+          newObj[newKey] = convert(obj[key]);
+        }
+      }
+      return newObj;
+    }
+    return obj;
+  }
+
+  return convert(obj);
+};
\ No newline at end of file