From 16b6a78c1ec061f69d34462d38c8323ee07b1f99 Mon Sep 17 00:00:00 2001 From: balibabu Date: Mon, 4 Nov 2024 15:36:57 +0800 Subject: [PATCH] feat: Add tooltip to clean_html item #2908 (#3183) ### 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 | 2 +- web/src/locales/en.ts | 5 +- web/src/locales/zh-traditional.ts | 4 +- web/src/locales/zh.ts | 4 +- .../form/invoke-form/dynamic-variables.tsx | 51 +++++++++++-------- web/src/pages/flow/form/invoke-form/hooks.ts | 38 +++++++++----- .../pages/flow/form/invoke-form/index.less | 29 +++++++++-- web/src/pages/flow/form/invoke-form/index.tsx | 10 ++-- 8 files changed, 99 insertions(+), 44 deletions(-) diff --git a/web/.umirc.ts b/web/.umirc.ts index b5d4b3163..816725720 100644 --- a/web/.umirc.ts +++ b/web/.umirc.ts @@ -31,7 +31,7 @@ export default defineConfig({ proxy: [ { context: ['/api', '/v1'], - target: 'http://127.0.0.1:9380/', + target: 'http://127.0.0.1:9456/', changeOrigin: true, ws: true, logger: console, diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index 70e242d2d..56309b1ec 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -1025,9 +1025,12 @@ The above is the content you need to summarize.`, method: 'Method', timeout: 'Timeout', headers: 'Headers', - cleanHtml: 'Clean html', + cleanHtml: 'Clean HTML', + cleanHtmlTip: + 'If the response is HTML formatted and only the primary content wanted, please toggle it on.', reference: 'Reference', input: 'Input', + parameter: 'Parameter', }, footer: { profile: 'All rights reserved @ React', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index c274fefd4..6c3f9f252 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -974,9 +974,11 @@ export default { method: '方法', timeout: '超時', headers: '請求頭', - cleanHtml: '清除 html', + cleanHtml: '清除 HTML', + cleanHtmlTip: '如果回應是 HTML 格式並且只需要主要內容，請將其開啟。', reference: '引用', input: '輸入', + parameter: '參數', }, footer: { profile: '“保留所有權利 @ react”', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index d7d543dd6..51db5ed4d 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -994,9 +994,11 @@ export default { method: '方法', timeout: '超时', headers: '请求头', - cleanHtml: '清除 html', + cleanHtml: '清除 HTML', + cleanHtmlTip: '如果响应是 HTML 格式且只需要主要内容，请将其打开。', reference: '引用', input: '输入', + parameter: '参数', }, footer: { profile: 'All rights reserved @ React', diff --git a/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx b/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx index beb09662f..dff214386 100644 --- a/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx +++ b/web/src/pages/flow/form/invoke-form/dynamic-variables.tsx @@ -1,7 +1,7 @@ import { EditableCell, EditableRow } from '@/components/editable-cell'; import { useTranslate } from '@/hooks/common-hooks'; import { DeleteOutlined } from '@ant-design/icons'; -import { Button, Flex, Input, Select, Table, TableProps } from 'antd'; +import { Button, Collapse, Flex, Input, Select, Table, TableProps } from 'antd'; import { useBuildComponentIdSelectOptions } from '../../hooks'; import { IInvokeVariable } from '../../interface'; import { useHandleOperateParameters } from './hooks'; @@ -20,7 +20,7 @@ const components = { }, }; -const DynamicVariables = ({ nodeId }: IProps) => { +const DynamicVariablesForm = ({ nodeId }: IProps) => { const { t } = useTranslate('flow'); const options = useBuildComponentIdSelectOptions(nodeId); @@ -95,24 +95,35 @@ const DynamicVariables = ({ nodeId }: IProps) => { ]; return ( -
- - - - styles.editableRow} - scroll={{ x: true }} - bordered - /> - + + {t('parameter')} + + + ), + children: ( +
styles.editableRow} + scroll={{ x: true }} + bordered + /> + ), + }, + ]} + /> ); }; -export default DynamicVariables; +export default DynamicVariablesForm; diff --git a/web/src/pages/flow/form/invoke-form/hooks.ts b/web/src/pages/flow/form/invoke-form/hooks.ts index 3dfd383a9..951cd42ae 100644 --- a/web/src/pages/flow/form/invoke-form/hooks.ts +++ b/web/src/pages/flow/form/invoke-form/hooks.ts @@ -1,5 +1,10 @@ import get from 'lodash/get'; -import { ChangeEventHandler, useCallback, useMemo } from 'react'; +import { + ChangeEventHandler, + MouseEventHandler, + useCallback, + useMemo, +} from 'react'; import { v4 as uuid } from 'uuid'; import { IGenerateParameter, IInvokeVariable } from '../../interface'; import useGraphStore from '../../store'; @@ -50,19 +55,24 @@ export const useHandleOperateParameters = (nodeId: string) => { [updateNodeForm, nodeId, dataSource], ); - const handleAdd = useCallback(() => { - updateNodeForm(nodeId, { - variables: [ - ...dataSource, - { - id: uuid(), - key: '', - component_id: undefined, - value: '', - }, - ], - }); - }, [dataSource, nodeId, updateNodeForm]); + const handleAdd: MouseEventHandler = useCallback( + (e) => { + e.preventDefault(); + e.stopPropagation(); + updateNodeForm(nodeId, { + variables: [ + ...dataSource, + { + id: uuid(), + key: '', + component_id: undefined, + value: '', + }, + ], + }); + }, + [dataSource, nodeId, updateNodeForm], + ); const handleSave = (row: IGenerateParameter) => { const newData = [...dataSource]; diff --git a/web/src/pages/flow/form/invoke-form/index.less b/web/src/pages/flow/form/invoke-form/index.less index 8de5a4f53..919c82297 100644 --- a/web/src/pages/flow/form/invoke-form/index.less +++ b/web/src/pages/flow/form/invoke-form/index.less @@ -1,6 +1,3 @@ -.variableTable { - margin-top: 14px; -} .editableRow { :global(.editable-cell) { position: relative; @@ -19,3 +16,29 @@ } } } + +.dynamicParameterVariable { + background-color: #ebe9e9; + :global(.ant-collapse-content) { + background-color: #f6f6f6; + } + :global(.ant-collapse-content-box) { + padding: 0 !important; + } + margin-bottom: 20px; + .title { + font-weight: 600; + font-size: 16px; + } + .variableType { + width: 30%; + } + .variableValue { + flex: 1; + } + + .addButton { + color: rgb(22, 119, 255); + font-weight: 600; + } +} diff --git a/web/src/pages/flow/form/invoke-form/index.tsx b/web/src/pages/flow/form/invoke-form/index.tsx index a3ea7205e..147499333 100644 --- a/web/src/pages/flow/form/invoke-form/index.tsx +++ b/web/src/pages/flow/form/invoke-form/index.tsx @@ -3,7 +3,7 @@ import { Form, Input, InputNumber, Select, Space, Switch } from 'antd'; import { useTranslation } from 'react-i18next'; import { useSetLlmSetting } from '../../hooks'; import { IOperatorForm } from '../../interface'; -import DynamicVariables from './dynamic-variables'; +import DynamicVariablesForm from './dynamic-variables'; enum Method { GET = 'GET', @@ -63,10 +63,14 @@ const InvokeForm = ({ onValuesChange, form, node }: IOperatorForm) => { - + - + );