github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-09-12 12:37:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: optimize code of flow (#1817)

Browse Source
This commit is contained in:
Dreammy23
2024-08-13 11:19:35 +08:00
committed by GitHub
parent be7efede11 baa169176f
commit 3225a97f12
9 changed files with 173 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/flow/node-param-handler.tsx
View File

@@ -5,7 +5,7 @@ import RequiredIcon from './required-icon';
import NodeHandler from './node-handler';
import { InfoCircleOutlined } from '@ant-design/icons';
import { RenderSelect, RenderSlider, RenderTreeSelect, RenderTimePicker, RenderTextArea, RenderCascader } from './node-renderer';
import { uiAtrrtUnderlineToHump } from '@/utils/flow'
import { uiAtrrtUnderlineToHump } from '@/utils/flow';
interface NodeParamHandlerProps {
node: IFlowNode;
data: IFlowNodeParameter;
@@ -104,25 +104,20 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
function renderNodeWithUiParam(data: IFlowNodeParameter) {
let defaultValue = data.value !== null && data.value !== undefined ? data.value : data.default;
if (data?.ui?.attr) {
uiAtrrtUnderlineToHump(data.ui.attr)
uiAtrrtUnderlineToHump(data.ui.attr);
}
// TODO: 根据ui_type渲染不同的组件
switch (data?.ui?.ui_type) {
case 'select':
return <RenderSelect data={data} defaultValue={defaultValue} onChange={onChange} />;
break
case 'text_area':
return <RenderTextArea data={data} defaultValue={defaultValue} onChange={onChange} />;
break
case 'slider':
return <RenderSlider data={data} defaultValue={defaultValue} onChange={onChange} />;
break
case 'time_picker':
return <RenderTimePicker data={data} defaultValue={defaultValue} onChange={onChange} />;
break
case 'tree_select':
return <RenderTreeSelect data={data} defaultValue={defaultValue} onChange={onChange} />;
break
}
}
@@ -134,4 +129,3 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
};
export default NodeParamHandler;

12
web/components/flow/node-renderer/index.ts
View File

@@ -1,6 +1,6 @@
export * from "./select";
export * from "./cascader";
export * from "./textarea";
export * from "./slider";
export * from "./timePicker";
export * from "./treeSelect";
export * from './select';
export * from './cascader';
export * from './textarea';
export * from './slider';
export * from './timePicker';
export * from './treeSelect';

26
web/components/flow/node-renderer/select.tsx
View File

@@ -1,21 +1,23 @@
import { IFlowNodeParameter } from "@/types/flow";
import { Select } from "antd";
import { IFlowNodeParameter } from '@/types/flow';
import { Select } from 'antd';
type SelectProps = {
data: IFlowNodeParameter;
defaultValue: any;
onChange: (value: any) => void;
}
};
export const RenderSelect = (params: SelectProps) => {
const { data, defaultValue, onChange } = params;
return data.options?.length > 0 && (
<Select
className="w-full nodrag"
defaultValue={defaultValue}
options={data.options.map((item: any) => ({ label: item.label, value: item.value }))}
onChange={onChange}
/>
)
}
return (
data.options?.length > 0 && (
<Select
className="w-full nodrag"
defaultValue={defaultValue}
options={data.options.map((item: any) => ({ label: item.label, value: item.value }))}
onChange={onChange}
/>
)
);
};

61
web/components/flow/node-renderer/slider.tsx
View File

@@ -1,53 +1,38 @@
import { IFlowNodeParameter } from "@/types/flow";
import { IFlowNodeParameter } from '@/types/flow';
import { Col, InputNumber, Row, Slider, Space } from 'antd';
import { uiAtrrtUnderlineToHump } from '@/utils/flow'
import type { InputNumberProps } from 'antd';
import React, { useState } from 'react';
type TextAreaProps = {
data: IFlowNodeParameter;
defaultValue: any;
onChange: (value: any) => void;
}
};
export const RenderSlider = (params: TextAreaProps) => {
const { data, defaultValue, onChange } = params;
const { data, defaultValue, onChange } = params;
const [inputValue, setInputValue] = useState(defaultValue);
const [inputValue, setInputValue] = useState(defaultValue);
const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
setInputValue(newValue as number);
onChange(newValue as number);
};
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}
/>
</Col>
<Col span={4}>
<InputNumber
{...data.ui.attr}
style={{ margin: '0 16px' }}
value={inputValue}
onChange={onChangeSlider}
/>
</Col>
</Row>:
<Slider
{...data.ui.attr}
onChange={onChangeSlider}
value={typeof inputValue === 'number' ? inputValue : 0}
/>
}
{data?.ui?.show_input ? (
<Row>
<Col span={12}>
<Slider {...data.ui.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} />
</Col>
</Row>
) : (
<Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
)}
</>
)
}
);
};

61
web/components/flow/node-renderer/sliderList.tsx
View File

@@ -1,53 +1,36 @@
import { IFlowNodeParameter } from "@/types/flow";
import { IFlowNodeParameter } from '@/types/flow';
import { Col, InputNumber, Row, Slider, Space } from 'antd';
import { uiAtrrtUnderlineToHump } from '@/utils/flow'
import type { InputNumberProps } from 'antd';
import React, { useState } from 'react';
type TextAreaProps = {
data: IFlowNodeParameter;
defaultValue: any;
onChange: (value: any) => void;
}
};
export const RenderSlider = (params: TextAreaProps) => {
const { data, defaultValue, onChange } = params;
const { data, defaultValue, onChange } = params;
const [inputValue, setInputValue] = useState(defaultValue);
const [inputValue, setInputValue] = useState(defaultValue);
const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
setInputValue(newValue as number);
onChange(newValue as number)
};
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}
/>
</Col>
<Col span={4}>
<InputNumber
{...data.ui.attr}
style={{ margin: '0 16px' }}
value={inputValue}
onChange={onChangeSlider}
/>
</Col>
</Row>:
<Slider
{...data.ui.attr}
onChange={onChangeSlider}
value={typeof inputValue === 'number' ? inputValue : 0}
/>
}
{data?.ui?.show_input ? (
<Row>
<Col span={12}>
<Slider {...data.ui.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} />
</Col>
</Row>
) : (
<Slider {...data.ui.attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
)}
</>
)
}
);
};

18
web/components/flow/node-renderer/textarea.tsx
View File

@@ -1,6 +1,6 @@
import { IFlowNodeParameter } from "@/types/flow";
import { IFlowNodeParameter } from '@/types/flow';
import { Input } from 'antd';
import { uiAtrrtUnderlineToHump } from '@/utils/flow'
import { uiAtrrtUnderlineToHump } from '@/utils/flow';
const { TextArea } = Input;
@@ -8,15 +8,11 @@ type TextAreaProps = {
data: IFlowNodeParameter;
defaultValue: any;
onChange: (value: any) => void;
}
};
export const RenderTextArea = (params: TextAreaProps) => {
const { data, defaultValue, onChange } = params;
if(data?.ui?.autosize){
uiAtrrtUnderlineToHump(data.ui.autosize)
}
return (
<TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.autosize} rows={4} />
)
}
uiAtrrtUnderlineToHump(data?.ui?.attr?.autosize || {});
return <TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.autosize} rows={4} />;
};

39
web/components/flow/node-renderer/timePicker.tsx
View File

@@ -1,34 +1,23 @@
import React, { useState } from 'react';
import type { TimePickerProps } from 'antd';
import { TimePicker } from 'antd';
import { IFlowNodeParameter } from "@/types/flow";
import { IFlowNodeParameter } from '@/types/flow';
type TextAreaProps = {
data: IFlowNodeParameter;
defaultValue: any;
onChange: (value: any) => void;
}
data: IFlowNodeParameter;
defaultValue: any;
onChange: (value: any) => void;
};
export const RenderTimePicker = (params: TextAreaProps) => {
const { data, defaultValue, onChange } = params;
const [value, setValue] = useState(defaultValue);
const { data, defaultValue, onChange } = params;
const [value, setValue] = useState(defaultValue);
// dayjs.extend(customParseFormat);
// dayjs.extend(customParseFormat);
const onChangeTime: TimePickerProps['onChange'] = (time, timeString) => {
// console.log(timeString);
onChange(timeString)
setValue(time)
};
return (
<TimePicker
style={{ width: '100%' }}
{...data.ui.attr} value={value}
onChange={onChangeTime} />
)
}
const onChangeTime: TimePickerProps['onChange'] = (time, timeString) => {
onChange(timeString);
setValue(time);
};
return <TimePicker style={{ width: '100%' }} {...data.ui.attr} value={value} onChange={onChangeTime} />;
};

163
web/components/flow/node-renderer/treeSelect.tsx
View File

@@ -1,94 +1,97 @@
import React, { useState } from 'react';
import { TreeSelect } from 'antd';
import type { TreeSelectProps } from 'antd';
import { IFlowNodeParameter } from "@/types/flow";
import { IFlowNodeParameter } from '@/types/flow';
import { Label } from '@mui/icons-material';
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',
},
],
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: '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>();
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 onChange = (newValue: string) => {
// setValue(newValue);
// };
const [dropdownVisible, setDropdownVisible] = useState(false);
// const onChange = (newValue: string) => {
// setValue(newValue);
// };
const [dropdownVisible, setDropdownVisible] = useState(false);
const handleDropdownVisibleChange = (visible) => {
setDropdownVisible(visible);
// 你可以在这里执行更多的逻辑，比如发送请求、更新状态等
console.log('Dropdown is now:', visible ? 'visible' : 'hidden');
};
const focuss = ()=>{
console.log('focus==========');
const handleDropdownVisibleChange = (visible: boolean | ((prevState: boolean) => boolean)) => {
setDropdownVisible(visible);
}
return (
<TreeSelect
fieldNames={{ label: 'label', value: 'value', children: 'children' }}
{...data.ui.attr}
style={{ width: '100%' }}
value={defaultValue}
treeDefaultExpandAll
onChange={onChange}
treeData={data.options}
onDropdownVisibleChange={handleDropdownVisibleChange}
// 你可以在这里执行更多的逻辑，比如发送请求、更新状态等
console.log('Dropdown is now:', visible ? 'visible' : 'hidden');
};
/>
const focus = () => {
// console.log('focus==========');
};
// <TreeSelect
return (
<TreeSelect
fieldNames={{ label: 'label', value: 'value', children: 'children' }}
{...data.ui.attr}
style={{ width: '100%' }}
value={defaultValue}
treeDefaultExpandAll
onChange={onChange}
treeData={data.options}
onDropdownVisibleChange={handleDropdownVisibleChange}
/>
// TODO: Implement the TreeSelect component
// <TreeSelect
// showSearch
// style={{ width: '100%' }}
// value={value}
@@ -100,5 +103,5 @@ type TextAreaProps = {
// treeData={treeData}
// getPopupContainer={() => document.body}
// />
);
}
);
};

6
web/types/flow.ts
View File

@@ -58,12 +58,6 @@ export type IFlowNodeParameterUI = {
disabled: boolean;
[key: string]: any;
};
autosize: {
minRows: number;
maxRows: number;
min_rows: number;
max_rows: number;
};
show_input: boolean;
};