From b301860d0f3e85ce4f8dab2794b39d2a10fdac3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E5=BF=97=E5=8B=87?=
 <yanzhiyong@tiansuixiansheng.com>
Date: Thu, 15 Aug 2024 19:41:07 +0800
Subject: [PATCH] fix:Attribute error

---
 .../flow/node-renderer/codeEditor.tsx         | 42 ++----------
 .../flow/node-renderer/textarea.tsx           |  3 +-
 .../flow/node-renderer/tree-select.tsx        | 66 ++-----------------
 3 files changed, 12 insertions(+), 99 deletions(-)

diff --git a/web/components/flow/node-renderer/codeEditor.tsx b/web/components/flow/node-renderer/codeEditor.tsx
index eed5ec256..3aeeb9b6b 100644
--- a/web/components/flow/node-renderer/codeEditor.tsx
+++ b/web/components/flow/node-renderer/codeEditor.tsx
@@ -2,9 +2,6 @@ import React, { useState, useMemo } from 'react';
 import { Button, Modal } from 'antd';
 import Editor from '@monaco-editor/react';
 import { IFlowNodeParameter } from '@/types/flow';
-// import { MonacoEditor } from '../../chat/monaco-editor';
-// import { github, githubDark } from './ob-editor/theme';
-import { github, githubDark } from '../../chat/ob-editor/theme';
 
 type Props = {
   data: IFlowNodeParameter;
@@ -14,6 +11,7 @@ type Props = {
 
 export const RenderCodeEditor = (params: Props) => {
   const { data, defaultValue, onChange } = params;
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const showModal = () => {
@@ -37,8 +35,10 @@ export const RenderCodeEditor = (params: Props) => {
     return '80%';
   }, [data?.ui?.editor?.width]);
 
+
+
   return (
-    <div style={{textAlign:'center'}} className="p-2 text-sm">
+    <div style={{ textAlign: 'center' }} className="p-2 text-sm">
       <Button type="primary" onClick={showModal}>
         打开代码编辑器
       </Button>
@@ -47,7 +47,7 @@ export const RenderCodeEditor = (params: Props) => {
           {...data?.ui?.attr}
           width={data?.ui?.editor?.width || '100%'}
           value={defaultValue}
-          style={{padding:'10px'}}
+          style={{ padding: '10px' }}
           height={data?.ui?.editor?.height || 200}
           defaultLanguage={data?.ui?.language}
           onChange={onChange}
@@ -59,39 +59,7 @@ export const RenderCodeEditor = (params: Props) => {
             wordWrap: 'on',
           }}
         />
-
-        {/* <Editor
-          {...data?.ui?.attr}
-          language={data?.ui?.language}
-          width={data?.ui?.editor?.width || '100%'}
-          value={defaultValue}
-          height={data?.ui?.editor?.height || 200}
-          defaultValue={defaultValue}
-          onChange={(value: string | undefined) => {
-            console.log(value);
-            onChange(value)
-          }}
-          options={{
-            theme: {github}, // 编辑器主题颜色
-            folding: true, // 是否折叠
-            foldingHighlight: true, // 折叠等高线
-            foldingStrategy: 'indentation', // 折叠方式  auto | indentation
-            showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
-            disableLayerHinting: true, // 等宽优化
-            emptySelectionClipboard: false, // 空选择剪切板
-            selectionClipboard: false, // 选择剪切板
-            automaticLayout: true, // 自动布局
-            codeLens: false, // 代码镜头
-            scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
-            colorDecorators: true, // 颜色装饰器
-            accessibilitySupport: 'auto', // 辅助功能支持  "auto" | "off" | "on"
-            lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
-            lineNumbersMinChars: 5, // 行号最小字符   number
-            readOnly: false, //是否只读  取值 true | false
-          }}
-        /> */}
       </Modal>
-
     </div>
   );
 };
diff --git a/web/components/flow/node-renderer/textarea.tsx b/web/components/flow/node-renderer/textarea.tsx
index 5f8c55ac0..a2f0df4aa 100644
--- a/web/components/flow/node-renderer/textarea.tsx
+++ b/web/components/flow/node-renderer/textarea.tsx
@@ -13,10 +13,11 @@ type TextAreaProps = {
 export const RenderTextArea = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
   convertKeysToCamelCase(data?.ui?.attr?.autosize || {});
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
     <div className="p-2 text-sm">
-      <TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.attr.autosize} rows={4} />
+      <TextArea {...attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.attr.autosize} rows={4} />
     </div>
   );
 };
diff --git a/web/components/flow/node-renderer/tree-select.tsx b/web/components/flow/node-renderer/tree-select.tsx
index 7acc3d73a..d2a4400d6 100644
--- a/web/components/flow/node-renderer/tree-select.tsx
+++ b/web/components/flow/node-renderer/tree-select.tsx
@@ -3,86 +3,30 @@ import { TreeSelect } from 'antd';
 import type { TreeSelectProps } from 'antd';
 import { IFlowNodeParameter } from '@/types/flow';
 import { Label } from '@mui/icons-material';
+import { convertKeysToCamelCase } from '@/utils/flow';
 
 type TextAreaProps = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
 };
-const treeData = [
-  {
-    value: 'parent 1',
-    title: 'parent 1',
-    children: [
-      {
-        value: 'parent 1-0',
-        title: 'parent 1-0',
-        children: [
-          {
-            value: 'leaf1',
-            title: 'leaf1',
-          },
-          {
-            value: 'leaf2',
-            title: 'leaf2',
-          },
-          {
-            value: 'leaf3',
-            title: 'leaf3',
-          },
-          {
-            value: 'leaf4',
-            title: 'leaf4',
-          },
-          {
-            value: 'leaf5',
-            title: 'leaf5',
-          },
-          {
-            value: 'leaf6',
-            title: 'leaf6',
-          },
-        ],
-      },
-      {
-        value: 'parent 1-1',
-        title: 'parent 1-1',
-        children: [
-          {
-            value: 'leaf11',
-            title: <b style={{ color: '#08c' }}>leaf11</b>,
-          },
-        ],
-      },
-    ],
-  },
-];
 export const RenderTreeSelect = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
-  // console.log(data.options);
-  // const [value, setValue] = useState<string>();
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
-  // const onChange = (newValue: string) => {
-  //   setValue(newValue);
-  // };
   const [dropdownVisible, setDropdownVisible] = useState(false);
 
   const handleDropdownVisibleChange = (visible: boolean | ((prevState: boolean) => boolean)) => {
     setDropdownVisible(visible);
-
-    // 你可以在这里执行更多的逻辑，比如发送请求、更新状态等
-    console.log('Dropdown is now:', visible ? 'visible' : 'hidden');
-  };
-
-  const focus = () => {
-    // console.log('focus==========');
   };
+  console.log(data);
+  
 
   return (
     <div className="p-2 text-sm">
       <TreeSelect
         fieldNames={{ label: 'label', value: 'value', children: 'children' }}
-        {...data.ui.attr}
+        {...attr}
         style={{ width: '100%' }}
         value={defaultValue}
         treeDefaultExpandAll