balibabu
commited on
Commit
·
eadfd19
1
Parent(s):
19e6d59
feat: Add tooltip to clean_html item #2908 (#3183)
Browse files### What problem does this PR solve?
feat: Add tooltip to clean_html item #2908
### Type of change
- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):
- web/.umirc.ts +1 -1
- web/src/locales/en.ts +4 -1
- web/src/locales/zh-traditional.ts +3 -1
- web/src/locales/zh.ts +3 -1
- web/src/pages/flow/form/invoke-form/dynamic-variables.tsx +31 -20
- web/src/pages/flow/form/invoke-form/hooks.ts +24 -14
- web/src/pages/flow/form/invoke-form/index.less +26 -3
- web/src/pages/flow/form/invoke-form/index.tsx +7 -3
web/.umirc.ts
CHANGED
@@ -31,7 +31,7 @@ export default defineConfig({
|
|
31 |
proxy: [
|
32 |
{
|
33 |
context: ['/api', '/v1'],
|
34 |
-
target: 'http://127.0.0.1:
|
35 |
changeOrigin: true,
|
36 |
ws: true,
|
37 |
logger: console,
|
|
|
31 |
proxy: [
|
32 |
{
|
33 |
context: ['/api', '/v1'],
|
34 |
+
target: 'http://127.0.0.1:9456/',
|
35 |
changeOrigin: true,
|
36 |
ws: true,
|
37 |
logger: console,
|
web/src/locales/en.ts
CHANGED
@@ -1025,9 +1025,12 @@ The above is the content you need to summarize.`,
|
|
1025 |
method: 'Method',
|
1026 |
timeout: 'Timeout',
|
1027 |
headers: 'Headers',
|
1028 |
-
cleanHtml: 'Clean
|
|
|
|
|
1029 |
reference: 'Reference',
|
1030 |
input: 'Input',
|
|
|
1031 |
},
|
1032 |
footer: {
|
1033 |
profile: 'All rights reserved @ React',
|
|
|
1025 |
method: 'Method',
|
1026 |
timeout: 'Timeout',
|
1027 |
headers: 'Headers',
|
1028 |
+
cleanHtml: 'Clean HTML',
|
1029 |
+
cleanHtmlTip:
|
1030 |
+
'If the response is HTML formatted and only the primary content wanted, please toggle it on.',
|
1031 |
reference: 'Reference',
|
1032 |
input: 'Input',
|
1033 |
+
parameter: 'Parameter',
|
1034 |
},
|
1035 |
footer: {
|
1036 |
profile: 'All rights reserved @ React',
|
web/src/locales/zh-traditional.ts
CHANGED
@@ -974,9 +974,11 @@ export default {
|
|
974 |
method: '方法',
|
975 |
timeout: '超時',
|
976 |
headers: '請求頭',
|
977 |
-
cleanHtml: '清除
|
|
|
978 |
reference: '引用',
|
979 |
input: '輸入',
|
|
|
980 |
},
|
981 |
footer: {
|
982 |
profile: '“保留所有權利 @ react”',
|
|
|
974 |
method: '方法',
|
975 |
timeout: '超時',
|
976 |
headers: '請求頭',
|
977 |
+
cleanHtml: '清除 HTML',
|
978 |
+
cleanHtmlTip: '如果回應是 HTML 格式並且只需要主要內容,請將其開啟。',
|
979 |
reference: '引用',
|
980 |
input: '輸入',
|
981 |
+
parameter: '參數',
|
982 |
},
|
983 |
footer: {
|
984 |
profile: '“保留所有權利 @ react”',
|
web/src/locales/zh.ts
CHANGED
@@ -994,9 +994,11 @@ export default {
|
|
994 |
method: '方法',
|
995 |
timeout: '超时',
|
996 |
headers: '请求头',
|
997 |
-
cleanHtml: '清除
|
|
|
998 |
reference: '引用',
|
999 |
input: '输入',
|
|
|
1000 |
},
|
1001 |
footer: {
|
1002 |
profile: 'All rights reserved @ React',
|
|
|
994 |
method: '方法',
|
995 |
timeout: '超时',
|
996 |
headers: '请求头',
|
997 |
+
cleanHtml: '清除 HTML',
|
998 |
+
cleanHtmlTip: '如果响应是 HTML 格式且只需要主要内容,请将其打开。',
|
999 |
reference: '引用',
|
1000 |
input: '输入',
|
1001 |
+
parameter: '参数',
|
1002 |
},
|
1003 |
footer: {
|
1004 |
profile: 'All rights reserved @ React',
|
web/src/pages/flow/form/invoke-form/dynamic-variables.tsx
CHANGED
@@ -1,7 +1,7 @@
|
|
1 |
import { EditableCell, EditableRow } from '@/components/editable-cell';
|
2 |
import { useTranslate } from '@/hooks/common-hooks';
|
3 |
import { DeleteOutlined } from '@ant-design/icons';
|
4 |
-
import { Button, Flex, Input, Select, Table, TableProps } from 'antd';
|
5 |
import { useBuildComponentIdSelectOptions } from '../../hooks';
|
6 |
import { IInvokeVariable } from '../../interface';
|
7 |
import { useHandleOperateParameters } from './hooks';
|
@@ -20,7 +20,7 @@ const components = {
|
|
20 |
},
|
21 |
};
|
22 |
|
23 |
-
const
|
24 |
const { t } = useTranslate('flow');
|
25 |
|
26 |
const options = useBuildComponentIdSelectOptions(nodeId);
|
@@ -95,24 +95,35 @@ const DynamicVariables = ({ nodeId }: IProps) => {
|
|
95 |
];
|
96 |
|
97 |
return (
|
98 |
-
<
|
99 |
-
|
100 |
-
|
101 |
-
|
102 |
-
|
103 |
-
|
104 |
-
|
105 |
-
|
106 |
-
|
107 |
-
|
108 |
-
|
109 |
-
|
110 |
-
|
111 |
-
|
112 |
-
|
113 |
-
|
114 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
115 |
);
|
116 |
};
|
117 |
|
118 |
-
export default
|
|
|
1 |
import { EditableCell, EditableRow } from '@/components/editable-cell';
|
2 |
import { useTranslate } from '@/hooks/common-hooks';
|
3 |
import { DeleteOutlined } from '@ant-design/icons';
|
4 |
+
import { Button, Collapse, Flex, Input, Select, Table, TableProps } from 'antd';
|
5 |
import { useBuildComponentIdSelectOptions } from '../../hooks';
|
6 |
import { IInvokeVariable } from '../../interface';
|
7 |
import { useHandleOperateParameters } from './hooks';
|
|
|
20 |
},
|
21 |
};
|
22 |
|
23 |
+
const DynamicVariablesForm = ({ nodeId }: IProps) => {
|
24 |
const { t } = useTranslate('flow');
|
25 |
|
26 |
const options = useBuildComponentIdSelectOptions(nodeId);
|
|
|
95 |
];
|
96 |
|
97 |
return (
|
98 |
+
<Collapse
|
99 |
+
className={styles.dynamicParameterVariable}
|
100 |
+
defaultActiveKey={['1']}
|
101 |
+
items={[
|
102 |
+
{
|
103 |
+
key: '1',
|
104 |
+
label: (
|
105 |
+
<Flex justify={'space-between'}>
|
106 |
+
<span className={styles.title}>{t('parameter')}</span>
|
107 |
+
<Button size="small" onClick={handleAdd}>
|
108 |
+
{t('add')}
|
109 |
+
</Button>
|
110 |
+
</Flex>
|
111 |
+
),
|
112 |
+
children: (
|
113 |
+
<Table
|
114 |
+
dataSource={dataSource}
|
115 |
+
columns={columns}
|
116 |
+
rowKey={'id'}
|
117 |
+
components={components}
|
118 |
+
rowClassName={() => styles.editableRow}
|
119 |
+
scroll={{ x: true }}
|
120 |
+
bordered
|
121 |
+
/>
|
122 |
+
),
|
123 |
+
},
|
124 |
+
]}
|
125 |
+
/>
|
126 |
);
|
127 |
};
|
128 |
|
129 |
+
export default DynamicVariablesForm;
|
web/src/pages/flow/form/invoke-form/hooks.ts
CHANGED
@@ -1,5 +1,10 @@
|
|
1 |
import get from 'lodash/get';
|
2 |
-
import {
|
|
|
|
|
|
|
|
|
|
|
3 |
import { v4 as uuid } from 'uuid';
|
4 |
import { IGenerateParameter, IInvokeVariable } from '../../interface';
|
5 |
import useGraphStore from '../../store';
|
@@ -50,19 +55,24 @@ export const useHandleOperateParameters = (nodeId: string) => {
|
|
50 |
[updateNodeForm, nodeId, dataSource],
|
51 |
);
|
52 |
|
53 |
-
const handleAdd = useCallback(
|
54 |
-
|
55 |
-
|
56 |
-
|
57 |
-
|
58 |
-
|
59 |
-
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
|
65 |
-
|
|
|
|
|
|
|
|
|
|
|
66 |
|
67 |
const handleSave = (row: IGenerateParameter) => {
|
68 |
const newData = [...dataSource];
|
|
|
1 |
import get from 'lodash/get';
|
2 |
+
import {
|
3 |
+
ChangeEventHandler,
|
4 |
+
MouseEventHandler,
|
5 |
+
useCallback,
|
6 |
+
useMemo,
|
7 |
+
} from 'react';
|
8 |
import { v4 as uuid } from 'uuid';
|
9 |
import { IGenerateParameter, IInvokeVariable } from '../../interface';
|
10 |
import useGraphStore from '../../store';
|
|
|
55 |
[updateNodeForm, nodeId, dataSource],
|
56 |
);
|
57 |
|
58 |
+
const handleAdd: MouseEventHandler = useCallback(
|
59 |
+
(e) => {
|
60 |
+
e.preventDefault();
|
61 |
+
e.stopPropagation();
|
62 |
+
updateNodeForm(nodeId, {
|
63 |
+
variables: [
|
64 |
+
...dataSource,
|
65 |
+
{
|
66 |
+
id: uuid(),
|
67 |
+
key: '',
|
68 |
+
component_id: undefined,
|
69 |
+
value: '',
|
70 |
+
},
|
71 |
+
],
|
72 |
+
});
|
73 |
+
},
|
74 |
+
[dataSource, nodeId, updateNodeForm],
|
75 |
+
);
|
76 |
|
77 |
const handleSave = (row: IGenerateParameter) => {
|
78 |
const newData = [...dataSource];
|
web/src/pages/flow/form/invoke-form/index.less
CHANGED
@@ -1,6 +1,3 @@
|
|
1 |
-
.variableTable {
|
2 |
-
margin-top: 14px;
|
3 |
-
}
|
4 |
.editableRow {
|
5 |
:global(.editable-cell) {
|
6 |
position: relative;
|
@@ -19,3 +16,29 @@
|
|
19 |
}
|
20 |
}
|
21 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
.editableRow {
|
2 |
:global(.editable-cell) {
|
3 |
position: relative;
|
|
|
16 |
}
|
17 |
}
|
18 |
}
|
19 |
+
|
20 |
+
.dynamicParameterVariable {
|
21 |
+
background-color: #ebe9e9;
|
22 |
+
:global(.ant-collapse-content) {
|
23 |
+
background-color: #f6f6f6;
|
24 |
+
}
|
25 |
+
:global(.ant-collapse-content-box) {
|
26 |
+
padding: 0 !important;
|
27 |
+
}
|
28 |
+
margin-bottom: 20px;
|
29 |
+
.title {
|
30 |
+
font-weight: 600;
|
31 |
+
font-size: 16px;
|
32 |
+
}
|
33 |
+
.variableType {
|
34 |
+
width: 30%;
|
35 |
+
}
|
36 |
+
.variableValue {
|
37 |
+
flex: 1;
|
38 |
+
}
|
39 |
+
|
40 |
+
.addButton {
|
41 |
+
color: rgb(22, 119, 255);
|
42 |
+
font-weight: 600;
|
43 |
+
}
|
44 |
+
}
|
web/src/pages/flow/form/invoke-form/index.tsx
CHANGED
@@ -3,7 +3,7 @@ import { Form, Input, InputNumber, Select, Space, Switch } from 'antd';
|
|
3 |
import { useTranslation } from 'react-i18next';
|
4 |
import { useSetLlmSetting } from '../../hooks';
|
5 |
import { IOperatorForm } from '../../interface';
|
6 |
-
import
|
7 |
|
8 |
enum Method {
|
9 |
GET = 'GET',
|
@@ -63,10 +63,14 @@ const InvokeForm = ({ onValuesChange, form, node }: IOperatorForm) => {
|
|
63 |
<Form.Item name={'proxy'} label={t('flow.proxy')}>
|
64 |
<Input />
|
65 |
</Form.Item>
|
66 |
-
<Form.Item
|
|
|
|
|
|
|
|
|
67 |
<Switch />
|
68 |
</Form.Item>
|
69 |
-
<
|
70 |
</Form>
|
71 |
</>
|
72 |
);
|
|
|
3 |
import { useTranslation } from 'react-i18next';
|
4 |
import { useSetLlmSetting } from '../../hooks';
|
5 |
import { IOperatorForm } from '../../interface';
|
6 |
+
import DynamicVariablesForm from './dynamic-variables';
|
7 |
|
8 |
enum Method {
|
9 |
GET = 'GET',
|
|
|
63 |
<Form.Item name={'proxy'} label={t('flow.proxy')}>
|
64 |
<Input />
|
65 |
</Form.Item>
|
66 |
+
<Form.Item
|
67 |
+
name={'clean_html'}
|
68 |
+
label={t('flow.cleanHtml')}
|
69 |
+
tooltip={t('flow.cleanHtmlTip')}
|
70 |
+
>
|
71 |
<Switch />
|
72 |
</Form.Item>
|
73 |
+
<DynamicVariablesForm nodeId={node?.id}></DynamicVariablesForm>
|
74 |
</Form>
|
75 |
</>
|
76 |
);
|