feat(web): http node config support editor

This commit is contained in:
zhaoying
2026-03-02 17:26:24 +08:00
parent 5abfcdfbe8
commit 81353538e5
3 changed files with 37 additions and 30 deletions

View File

@@ -1,9 +1,11 @@
import { type FC, useMemo } from 'react';
import { useTranslation } from 'react-i18next'
import { Button, Select, Table, Form, type TableProps } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin';
import Empty from '@/components/Empty';
import VariableSelect from '../VariableSelect';
import Editor from '../../Editor'
export interface TableRow {
key?: string;
@@ -21,7 +23,7 @@ interface EditableTableProps {
size?: "small"
}
const EditableTable: React.FC<EditableTableProps> = ({
const EditableTable: FC<EditableTableProps> = ({
parentName,
title,
options = [],
@@ -37,6 +39,13 @@ const EditableTable: React.FC<EditableTableProps> = ({
...(typeOptions.length > 0 && { type: typeOptions[0].value })
});
// Filter options based on boolean type if needed
const booleanFilterOptions = useMemo(() => {
return filterBooleanType
? options.filter(option => option.dataType !== 'boolean')
: options
}, [options, filterBooleanType])
const getColumns = (remove: (index: number) => void): TableProps<TableRow>['columns'] => {
const hasType = typeOptions.length > 0;
const cellClassName="rb:p-1!"
@@ -49,14 +58,12 @@ const EditableTable: React.FC<EditableTableProps> = ({
className: cellClassName,
render: (_: any, __: TableRow, index: number) => (
<Form.Item name={[index, 'name']} noStyle>
<VariableSelect
placeholder={t('common.pleaseSelect')}
// size="small"
options={options}
filterBooleanType={filterBooleanType}
popupMatchSelectWidth={false}
<Editor
options={booleanFilterOptions}
type="input"
className={contentClassName}
size={size}
height={16}
/>
</Form.Item>
)
@@ -101,19 +108,17 @@ const EditableTable: React.FC<EditableTableProps> = ({
{(form) => {
const currentType = form.getFieldValue([...Array.isArray(parentName) ? parentName : [parentName], index, 'type']);
const filteredOptions = currentType === 'file'
? options.filter(option => option.dataType === 'file')
: options;
? booleanFilterOptions.filter(option => option.dataType.includes('file'))
: booleanFilterOptions;
return (
<Form.Item name={[index, 'value']} noStyle>
<VariableSelect
placeholder={t('common.pleaseSelect')}
// size="small"
<Editor
options={filteredOptions}
filterBooleanType={filterBooleanType}
popupMatchSelectWidth={false}
type="input"
className={contentClassName}
size={size}
height={16}
/>
</Form.Item>
);

View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-09 18:35:43
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-09 18:35:43
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-02 17:24:51
*/
import { type FC, useRef, useState } from "react";
import { useTranslation } from 'react-i18next'
@@ -13,7 +13,6 @@ import Editor from '../../Editor'
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin'
import AuthConfigModal from './AuthConfigModal'
import type { AuthConfigModalRef, HttpRequestConfigForm } from './types'
import VariableSelect from "../VariableSelect";
import MessageEditor from '../MessageEditor'
import EditableTable from './EditableTable'
import { portTextAttrs } from '../../../constant'
@@ -159,7 +158,7 @@ const HttpRequest: FC<{ options: Suggestion[]; selectedNode?: any; graphRef?: an
<EditableTable
size="small"
parentName={['body', 'data']}
options={options.filter(vo => vo.dataType === 'string' || vo.dataType === 'number')}
options={options.filter(vo => vo.dataType === 'string' || vo.dataType === 'number' || vo.dataType.includes('file'))}
typeOptions={[
{ label: 'text', value: 'text' },
{ label: 'file', value: 'file' }
@@ -201,10 +200,10 @@ const HttpRequest: FC<{ options: Suggestion[]; selectedNode?: any; graphRef?: an
}
{values?.body?.content_type === 'binary' &&
<Form.Item name={['body', 'data']} noStyle>
<VariableSelect
<Editor
placeholder={t('common.pleaseSelect')}
options={options.filter(vo => vo.dataType.includes('file'))}
filterBooleanType={true}
type="input"
size="small"
/>
</Form.Item>