feat: optimize code

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';

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} />
       )}
     </>
   );

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} />
       )}
     </>
   );

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} 
+    />
+  )
 };

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} />;
 };

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);
+};