From 7a1131d8afce0006b2542eb56e199ae2d08b3f10 Mon Sep 17 00:00:00 2001
From: zhaoying <yzhao96@best-inc.com>
Date: Tue, 6 Jan 2026 20:35:01 +0800
Subject: [PATCH] fix(web): workflow bug

---
 .../Properties/AssignmentList/index.tsx       |  25 +-
 .../components/Properties/CaseList/index.tsx  |  14 +-
 .../Properties/ConditionList/index.tsx        |  12 +-
 .../Properties/HttpRequest/EditableTable.tsx  | 252 ++++++++----------
 .../Properties/HttpRequest/index.tsx          |  33 +--
 .../Properties/ParamsList/ParamEditModal.tsx  |   1 +
 .../Workflow/components/Properties/index.tsx  |   4 +-
 web/src/views/Workflow/constant.ts            |   6 +-
 .../views/Workflow/hooks/useWorkflowGraph.ts  |  26 +-
 web/src/views/Workflow/types.ts               |   2 +-
 10 files changed, 177 insertions(+), 198 deletions(-)

diff --git a/web/src/views/Workflow/components/Properties/AssignmentList/index.tsx b/web/src/views/Workflow/components/Properties/AssignmentList/index.tsx
index eac3775f..2ac8397b 100644
--- a/web/src/views/Workflow/components/Properties/AssignmentList/index.tsx
+++ b/web/src/views/Workflow/components/Properties/AssignmentList/index.tsx
@@ -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>
diff --git a/web/src/views/Workflow/components/Properties/CaseList/index.tsx b/web/src/views/Workflow/components/Properties/CaseList/index.tsx
index 7f5ff5df..22ac7490 100644
--- a/web/src/views/Workflow/components/Properties/CaseList/index.tsx
+++ b/web/src/views/Workflow/components/Properties/CaseList/index.tsx
@@ -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,
diff --git a/web/src/views/Workflow/components/Properties/ConditionList/index.tsx b/web/src/views/Workflow/components/Properties/ConditionList/index.tsx
index 2f544281..6d955647 100644
--- a/web/src/views/Workflow/components/Properties/ConditionList/index.tsx
+++ b/web/src/views/Workflow/components/Properties/ConditionList/index.tsx
@@ -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>}
             >
diff --git a/web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx b/web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx
index c6f6d32e..3f0f47fe 100644
--- a/web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx
+++ b/web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx
@@ -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>
   );
 };
diff --git a/web/src/views/Workflow/components/Properties/HttpRequest/index.tsx b/web/src/views/Workflow/components/Properties/HttpRequest/index.tsx
index a007d75e..23d21ea4 100644
--- a/web/src/views/Workflow/components/Properties/HttpRequest/index.tsx
+++ b/web/src/views/Workflow/components/Properties/HttpRequest/index.tsx
@@ -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>
         }
diff --git a/web/src/views/Workflow/components/Properties/ParamsList/ParamEditModal.tsx b/web/src/views/Workflow/components/Properties/ParamsList/ParamEditModal.tsx
index 0e920f9c..308cdbfc 100644
--- a/web/src/views/Workflow/components/Properties/ParamsList/ParamEditModal.tsx
+++ b/web/src/views/Workflow/components/Properties/ParamsList/ParamEditModal.tsx
@@ -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>
diff --git a/web/src/views/Workflow/components/Properties/index.tsx b/web/src/views/Workflow/components/Properties/index.tsx
index d179483a..67c2d689 100644
--- a/web/src/views/Workflow/components/Properties/index.tsx
+++ b/web/src/views/Workflow/components/Properties/index.tsx
@@ -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'
diff --git a/web/src/views/Workflow/constant.ts b/web/src/views/Workflow/constant.ts
index babc8614..98f6d865 100644
--- a/web/src/views/Workflow/constant.ts
+++ b/web/src/views/Workflow/constant.ts
@@ -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',
diff --git a/web/src/views/Workflow/hooks/useWorkflowGraph.ts b/web/src/views/Workflow/hooks/useWorkflowGraph.ts
index 98f37f12..04e6a63a 100644
--- a/web/src/views/Workflow/hooks/useWorkflowGraph.ts
+++ b/web/src/views/Workflow/hooks/useWorkflowGraph.ts
@@ -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]) {
diff --git a/web/src/views/Workflow/types.ts b/web/src/views/Workflow/types.ts
index 4c267ae9..c3e883b1 100644
--- a/web/src/views/Workflow/types.ts
+++ b/web/src/views/Workflow/types.ts
@@ -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;
 }