adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): workflow bug

Browse Source
This commit is contained in:
zhaoying
2026-01-06 20:35:01 +08:00
parent 020d7445ec
commit 7a1131d8af
10 changed files with 177 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/views/Workflow/components/Properties/AssignmentList/index.tsx
View File

@@ -62,6 +62,10 @@ const AssignmentList: FC<AssignmentListProps> = ({
placeholder={t('common.pleaseSelect')}
options={options}
popupMatchSelectWidth={false}
onChange={() => {
form.setFieldValue([parentName, name, 'operation'], undefined);
form.setFieldValue([parentName, name, 'value'], undefined);
}}
/>
</Form.Item>
</Col>
@@ -72,6 +76,7 @@ const AssignmentList: FC<AssignmentListProps> = ({
noStyle
>
<Select
placeholder={t('common.pleaseSelect')}
options={operationOptions.map(op => ({
...op,
label: t(op.label)
@@ -99,14 +104,20 @@ const AssignmentList: FC<AssignmentListProps> = ({
name={[name, 'value']}
noStyle
>
{operation === 'assign'
{dataType === 'number' && operation === 'cover'
? <VariableSelect
placeholder={t('common.pleaseSelect')}
options={dataType ? options.filter(vo => vo.dataType === dataType) : options}
popupMatchSelectWidth={false}
/>
: dataType === 'number'
? <InputNumber
placeholder={t('common.pleaseEnter')}
className="rb:w-full!"
/>
: operation === 'assign'
? <>
{dataType === 'number'
? <InputNumber
placeholder={t('common.pleaseEnter')}
className="rb:w-full!"
/>
: dataType === 'boolean'
{dataType === 'boolean'
? <Radio.Group block>
<Radio.Button value={true}>True</Radio.Button>
<Radio.Button value={false}>False</Radio.Button>

14
web/src/views/Workflow/components/Properties/CaseList/index.tsx
View File

@@ -9,8 +9,8 @@ import VariableSelect from '../VariableSelect'
import Editor from '../../Editor'
interface CaseListProps {
value?: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; comparison_operator: string; right: string; input_type?: string; }[] }>;
onChange?: (value: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; comparison_operator: string; right: string; }[] }>) => void;
value?: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; operator: string; right: string; input_type?: string; }[] }>;
onChange?: (value: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; operator: string; right: string; }[] }>) => void;
options: Suggestion[];
name: string;
selectedNode?: any;
@@ -40,6 +40,8 @@ const operatorsObj: { [key: string]: SelectProps['options'] } = {
boolean: [
{ value: 'eq', label: 'workflow.config.if-else.boolean.eq' },
{ value: 'ne', label: 'workflow.config.if-else.boolean.ne' },
{ value: 'empty', label: 'workflow.config.if-else.empty' },
{ value: 'not_empty', label: 'workflow.config.if-else.not_empty' },
]
}
@@ -199,7 +201,7 @@ const CaseList: FC<CaseListProps> = ({
expressions: {
[conditionIndex]: {
left: newValue,
comparison_operator: undefined,
operator: undefined,
right: undefined,
input_type: undefined
}
@@ -238,6 +240,7 @@ const CaseList: FC<CaseListProps> = ({
<div key={caseField.key}>
<Form.List name={[caseField.name, 'expressions']}>
{(conditionFields, { add: addCondition, remove: removeCondition }) => {
const logicalOperator = form.getFieldValue(name)?.[caseIndex]?.logical_operator || 'and'
return (
<div className={clsx("rb:relative rb:mb-4 rb:border rb:border-gray-200 rb:rounded rb:p-3 rb:pl-5")}>
<div className="rb:flex rb:items-center rb:justify-between rb:mb-3">
@@ -274,14 +277,13 @@ const CaseList: FC<CaseListProps> = ({
const cases = form.getFieldValue(name) || [];
const currentCase = cases[caseIndex] || {};
const currentExpression = currentCase.expressions?.[conditionIndex] || {};
const currentOperator = currentExpression.comparison_operator;
const currentOperator = currentExpression.operator;
const hideRightField = currentOperator === 'empty' || currentOperator === 'not_empty';
const leftFieldValue = currentExpression.left;
const leftFieldOption = options.find(option => `{{${option.value}}}` === leftFieldValue);
const leftFieldType = leftFieldOption?.dataType;
const operatorList = operatorsObj[leftFieldType || 'default'] || operatorsObj.default || [];
const inputType = leftFieldType === 'number' ? currentExpression.input_type : undefined;
const logicalOperator = currentCase.logical_operator;
return (
<div key={conditionField.key} className={clsx({
"rb:mb-3": conditionIndex !== conditionFields.length - 1
@@ -301,7 +303,7 @@ const CaseList: FC<CaseListProps> = ({
</Form.Item>
</Col>
<Col span={8}>
<Form.Item name={[conditionField.name, 'comparison_operator']} noStyle>
<Form.Item name={[conditionField.name, 'operator']} noStyle>
<Select
options={operatorList.map(vo => ({
...vo,

12
web/src/views/Workflow/components/Properties/ConditionList/index.tsx
View File

@@ -9,7 +9,7 @@ import Editor from '../../Editor'
interface Case {
logical_operator: 'and' | 'or';
expressions: Array<{ left: string; comparison_operator: string; right: string; input_type: string; }>
expressions: Array<{ left: string; operator: string; right: string; input_type: string; }>
}
interface CaseListProps {
@@ -45,6 +45,8 @@ const operatorsObj: { [key: string]: SelectProps['options'] } = {
boolean: [
{ value: 'eq', label: 'workflow.config.if-else.boolean.eq' },
{ value: 'ne', label: 'workflow.config.if-else.boolean.ne' },
{ value: 'empty', label: 'workflow.config.if-else.empty' },
{ value: 'not_empty', label: 'workflow.config.if-else.not_empty' },
]
}
@@ -61,7 +63,7 @@ const ConditionList: FC<CaseListProps> = ({
expressions: {
[index]: {
left: newValue,
comparison_operator: undefined,
operator: undefined,
right: undefined,
input_type: undefined
}
@@ -87,7 +89,7 @@ const ConditionList: FC<CaseListProps> = ({
{fields.map((field, index) => {
const expressions = form.getFieldValue([parentName, 'expressions']) || [];
const currentExpression = expressions[index] || {};
const currentOperator = currentExpression.comparison_operator;
const currentOperator = currentExpression.operator;
const hideRightField = currentOperator === 'empty' || currentOperator === 'not_empty';
const leftFieldValue = currentExpression.left;
const leftFieldOption = options.find(option => `{{${option.value}}}` === leftFieldValue);
@@ -122,7 +124,7 @@ const ConditionList: FC<CaseListProps> = ({
</Col>
<Col span={8}>
<Form.Item name={[field.name, 'comparison_operator']} noStyle>
<Form.Item name={[field.name, 'operator']} noStyle>
<Select
options={operatorList.map(vo => ({
...vo,
@@ -196,7 +198,7 @@ const ConditionList: FC<CaseListProps> = ({
<Button
type="dashed"
onClick={() => add({ left: '', comparison_operator: '', right: '' })}
onClick={() => add({ left: '', operator: '', right: '' })}
className="rb:w-full rb:ml-6 rb:mt-2"
icon={<span>+</span>}
>

252
web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx
View File

@@ -1,179 +1,155 @@
import { useState, useEffect, useMemo } from 'react';
import { useMemo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'
import { Button, Select, Table } from 'antd';
import { Button, Select, Table, Form, type TableProps } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import Editor from '../../Editor';
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin';
import Empty from '@/components/Empty';
import VariableSelect from '../VariableSelect';
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
name?: string | string[];
inputType?: 'select' | 'variableSelect';
options?: { value: string, label: string }[] | Suggestion[];
}
const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
name,
inputType,
options,
children,
...restProps
}) => {
const { t } = useTranslation();
if (!inputType) return <td {...restProps}>{children}</td>;
return (
<td {...restProps}>
<Form.Item name={name} style={{ margin: 0 }}>
{inputType === 'select' ? (
<Select
placeholder={t('common.pleaseSelect')}
size="small"
options={options as { value: string, label: string }[]}
/>
) : (
<VariableSelect
placeholder={t('common.pleaseSelect')}
size="small"
options={(options as Suggestion[]) || []}
/>
)}
</Form.Item>
</td>
);
};
export interface TableRow {
key: string;
name: string;
value: string;
name?: string;
value?: string;
type?: string;
}
interface EditableTableProps {
parentName: string | string[];
title?: string;
value?: Record<string, string> | TableRow[];
onChange?: (value: TableRow[]) => void;
options?: Suggestion[];
typeOptions?: {value: string, label: string}[]
typeOptions?: { value: string, label: string }[]
}
const EditableTable: React.FC<EditableTableProps> = ({
parentName,
title,
value,
onChange,
options = [],
typeOptions = []
}) => {
const { t } = useTranslation()
const [rows, setRows] = useState<TableRow[]>([]);
const { t } = useTranslation();
const form = Form.useFormInstance();
const values = Form.useWatch(typeof parentName === 'string' ? [parentName] : parentName, form);
useEffect(() => {
if (Array.isArray(value)) {
setRows([...value])
} else if (value && Object.keys(value).length > 0) {
setRows(Object.entries(value).map(([key, val], index) => ({
key: index.toString(),
name: key || '',
value: val || '',
type: typeOptions.length > 0 ? typeOptions[0].value : undefined
})))
} else {
setRows([])
}
}, [value, typeOptions])
const createNewRow = (): TableRow => ({
key: Date.now().toString(),
name: undefined,
value: undefined,
...(typeOptions.length > 0 && { type: typeOptions[0].value })
});
const handleChange = (key: string, field: 'name' | 'value' | 'type', val: string) => {
const newRows = rows.map(row =>
row.key === key ? { ...row, [field]: val } : row
);
setRows(newRows);
onChange?.(newRows);
};
const handleAdd = useCallback(() => {
form.setFieldValue(parentName, [...(values ?? []), createNewRow()]);
}, [form, parentName, values, typeOptions]);
const handleAdd = () => {
const newRow: TableRow = {
key: Date.now().toString(),
name: '',
value: '',
...(typeOptions.length > 0 && { type: typeOptions[0].value })
};
const newRows = [...rows, newRow];
setRows(newRows);
onChange?.(newRows);
};
const handleDelete = useCallback((index: number) => {
const currentValues = form.getFieldValue(parentName) || [];
form.setFieldValue(parentName, currentValues.filter((_: TableRow, i: number) => i !== index));
}, [form, parentName]);
const handleDelete = (key: string) => {
const newRows = rows.filter(row => row.key !== key);
setRows(newRows);
onChange?.(newRows);
};
const createColumn = (dataIndex: string, inputType: 'select' | 'variableSelect', width: string, columnOptions: any[]) => ({
title: t(`workflow.config.${dataIndex}`),
dataIndex,
width,
onCell: (_: TableRow, index?: number) => ({
name: typeof parentName === 'string' ? [parentName, index ?? 0, dataIndex] : [...parentName, index ?? 0, dataIndex],
inputType,
options: columnOptions
} as any)
});
const columns = useMemo(() => {
const baseColumns = [
const columns: TableProps<TableRow>['columns'] = useMemo(() => {
const hasType = typeOptions.length > 0;
const baseWidth = hasType ? '35%' : '45%';
return [
createColumn('name', 'variableSelect', baseWidth, options),
...(hasType ? [createColumn('type', 'select', '20%', typeOptions)] : []),
createColumn('value', 'variableSelect', baseWidth, options),
{
title: typeOptions.length > 0 ? t('workflow.config.name') : '键',
dataIndex: 'name',
width: typeOptions.length > 0 ? '35%' : '45%',
render: (text: string, record: TableRow) => (
<Editor
options={options}
value={text}
height={32}
variant="outlined"
onChange={(value) => handleChange(record.key, 'name', value || '')}
/>
),
title: '',
dataIndex: 'actions',
width: '10%',
render: (_: any, __: TableRow, index: number) => (
<Button type="text" icon={<DeleteOutlined />} onClick={() => handleDelete(index)} />
)
}
];
}, [typeOptions, options, t, parentName, handleDelete]);
if (typeOptions.length > 0) {
baseColumns.push({
title: t('workflow.config.type'),
dataIndex: 'type',
width: '20%',
render: (text: string, record: TableRow) => (
<Select
value={text}
options={typeOptions}
onChange={(value) => handleChange(record.key, 'type', value)}
/>
),
});
}
baseColumns.push({
title: typeOptions.length > 0 ? t('workflow.config.value') : '值',
dataIndex: 'value',
width: typeOptions.length > 0 ? '35%' : '45%',
render: (text: string, record: TableRow) => {
if (record.type === 'file') {
return (
<VariableSelect
options={options}
value={text}
onChange={(value) => handleChange(record.key, 'value', value || '')}
/>
)
}
return (
<Editor
options={options}
value={text}
height={32}
variant="outlined"
onChange={(value) => handleChange(record.key, 'value', value || '')}
/>
)
},
});
baseColumns.push({
title: '',
dataIndex: 'actions',
width: '10%',
render: (_: any, record: TableRow) => (
<Button
type="text"
icon={<DeleteOutlined />}
onClick={() => handleDelete(record.key)}
/>
),
});
return baseColumns;
}, [typeOptions, options, t]);
const AddButton = ({ block = false }: { block?: boolean }) => (
<Button
type={block ? "dashed" : "text"}
icon={<PlusOutlined />}
onClick={handleAdd}
size="small"
block={block}
className={block ? "rb:mt-1" : ""}
>
{block && `+${t('common.add')}`}
</Button>
);
return (
<div className="rb:mb-4">
{title && (
<div className="rb:flex rb:items-center rb:mb-2 rb:justify-between">
<div className="rb:font-medium">{title}</div>
<Button
type="text"
icon={<PlusOutlined />}
onClick={handleAdd}
size="small"
/>
<AddButton />
</div>
)}
<Table
columns={columns}
dataSource={rows}
pagination={false}
size="small"
locale={{ emptyText: <Empty size={88} /> }}
scroll={{ x: 'max-content' }}
/>
{!title && (
<Button type="dashed" onClick={handleAdd} block className='rb:mt-1'>
+{t('common.add')}
</Button>
)}
<Form.Item name={parentName}>
<Table<TableRow>
components={{ body: { cell: EditableCell } }}
bordered
dataSource={values}
columns={columns}
pagination={false}
size="small"
locale={{ emptyText: <Empty size={88} /> }}
scroll={{ x: 'max-content' }}
/>
</Form.Item>
{!title && <AddButton block />}
</div>
);
};

33
web/src/views/Workflow/components/Properties/HttpRequest/index.tsx
View File

@@ -7,7 +7,7 @@ import AuthConfigModal from './AuthConfigModal'
import type { AuthConfigModalRef, HttpRequestConfigForm } from './types'
import VariableSelect from "../VariableSelect";
import MessageEditor from '../MessageEditor'
import EditableTable, { type TableRow } from './EditableTable'
import EditableTable from './EditableTable'
const HttpRequest: FC<{ options: Suggestion[]; }> = ({
options,
@@ -36,17 +36,6 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
})
}
const updateObjectList = (data: TableRow[], key: string) => {
let obj: Record<string, string> = {}
if (data.length) {
data.forEach(vo => {
obj[vo.name] = vo.value
})
}
form.setFieldValue(key, obj)
}
console.log('HttpRequest', values)
return (
@@ -81,17 +70,17 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
<Form.Item name="headers">
<EditableTable
parentName="headers"
title="HEADERS"
options={options}
onChange={(headers) => updateObjectList(headers, 'headers')}
/>
</Form.Item>
<Form.Item name="params">
<EditableTable
parentName="params"
title="PARAMS"
options={options}
onChange={(params) => updateObjectList(params, 'params')}
/>
</Form.Item>
@@ -113,15 +102,8 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
{values?.body?.content_type === 'form-data' &&
<Form.Item name={['body', 'data']} noStyle>
<EditableTable
parentName={['body', 'data']}
options={options}
onChange={(data) => {
form.setFieldsValue({
body: {
...form.getFieldValue('body'),
data
}
})
}}
typeOptions={[
{ label: 'text', value: 'text' },
{ label: 'file', value: 'file' }
@@ -132,13 +114,8 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
{values?.body?.content_type === 'x-www-form-urlencoded' &&
<Form.Item name={['body', 'data']} noStyle>
<EditableTable
parentName={['body', 'data']}
options={options}
onChange={(data) => {
const currentBody = form.getFieldValue('body') || {}
form.setFieldsValue({
body: { ...currentBody, data }
})
}}
/>
</Form.Item>
}

1
web/src/views/Workflow/components/Properties/ParamsList/ParamEditModal.tsx
View File

@@ -103,6 +103,7 @@ const ParamEditModal = forwardRef<ParamEditModalRef, ParamEditModalProps>(({
<FormItem
name="desc"
label={t('workflow.config.parameter-extractor.desc')}
rules={[{ required: true, message: t('common.pleaseEnter') }]}
>
<Input.TextArea placeholder={t('common.enter')} />
</FormItem>

4
web/src/views/Workflow/components/Properties/index.tsx
View File

@@ -82,7 +82,7 @@ const Properties: FC<PropertiesProps> = ({
useEffect(() => {
if (values && selectedNode) {
const { id, knowledge_retrieval, group, group_names, ...rest } = values
const { id, knowledge_retrieval, group, group_variables, ...rest } = values
const { knowledge_bases = [], ...restKnowledgeConfig } = (knowledge_retrieval as any) || {}
let allRest = {
@@ -730,7 +730,7 @@ const Properties: FC<PropertiesProps> = ({
}
/>
: config.type === 'switch'
? <Switch onChange={key === 'group' ? () => { form.setFieldValue('group_names', []) } : undefined} />
? <Switch onChange={key === 'group' ? () => { form.setFieldValue('group_variables', []) } : undefined} />
: config.type === 'categoryList'
? <CategoryList parentName={key} selectedNode={selectedNode} graphRef={graphRef} />
: config.type === 'conditionList'

6
web/src/views/Workflow/constant.ts
View File

@@ -327,7 +327,7 @@ export const nodeLibrary: NodeLibrary[] = [
type: 'switch',
defaultValue: false
},
group_names: {
group_variables: {
type: 'groupVariableList',
defaultValue: [],
}
@@ -373,11 +373,11 @@ export const nodeLibrary: NodeLibrary[] = [
},
headers: {
type: 'define',
defaultValue: {}
defaultValue: []
},
params: {
type: 'define',
defaultValue: {}
defaultValue: []
},
body: {
type: 'define',

26
web/src/views/Workflow/hooks/useWorkflowGraph.ts
View File

@@ -90,11 +90,13 @@ export const useWorkflowGraph = ({
nodeLibraryConfig.config[key].defaultValue = {
...rest
}
} else if (key === 'group_names' && nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
const { group_names, group } = config
} else if (key === 'group_variables' && nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
const { group_variables, group } = config
nodeLibraryConfig.config[key].defaultValue = group
? Object.entries(group_names as Record<string, any>).map(([key, value]) => ({ key, value }))
: group_names
? Object.entries(group_variables as Record<string, any>).map(([key, value]) => ({ key, value }))
: group_variables
} else if (type === 'http-request' && (key === 'headers' || key === 'params') && config[key] && typeof config[key] === 'object' && !Array.isArray(config[key]) && nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
nodeLibraryConfig.config[key].defaultValue = Object.entries(config[key]).map(([name, value]) => ({ name, value }))
} else if (nodeLibraryConfig.config && nodeLibraryConfig.config[key] && config[key]) {
nodeLibraryConfig.config[key].defaultValue = config[key]
}
@@ -882,14 +884,22 @@ export const useWorkflowGraph = ({
if (data.config) {
Object.keys(data.config).forEach(key => {
if (data.config[key] && 'defaultValue' in data.config[key] && key === 'group_names') {
let group_names = data.config.group.defaultValue ? {} : data.config[key].defaultValue
if (data.config[key] && 'defaultValue' in data.config[key] && key === 'group_variables') {
let group_variables = data.config.group.defaultValue ? {} : data.config[key].defaultValue
if (data.config.group.defaultValue) {
data.config[key].defaultValue.map((vo: any) => {
group_names[vo.key] = vo.value
group_variables[vo.key] = vo.value
})
}
itemConfig[key] = group_variables
} else if (data.type === 'http-request' && (key === 'headers' || key === 'params') && data.config[key] && 'defaultValue' in data.config[key]) {
const value = data.config[key].defaultValue
itemConfig[key] = {}
if (value.length > 0) {
value.forEach((vo: any) => {
itemConfig[key][vo.name] = vo.value
})
}
itemConfig[key] = group_names
} else if (data.config[key] && 'defaultValue' in data.config[key] && key !== 'knowledge_retrieval') {
itemConfig[key] = data.config[key].defaultValue
} else if (key === 'knowledge_retrieval' && data.config[key] && 'defaultValue' in data.config[key]) {

2
web/src/views/Workflow/types.ts
View File

@@ -24,7 +24,7 @@ export interface NodeConfig {
knowledge_retrieval?: KnowledgeConfig;
group_names?: Array<{ key: string, value: string[] }>
group_variables?: Array<{ key: string, value: string[] }>
cycle?: string;
[key: string]: unknown;
}