fix(web): workflow bug

web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next'
 import { Button, Select, Table } from 'antd';
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
@@ -33,104 +33,90 @@ const EditableTable: React.FC<EditableTableProps> = ({
   const [rows, setRows] = useState<TableRow[]>([]);
 
   useEffect(() => {
-    console.log('EditableTable value', value)
     if (Array.isArray(value)) {
       setRows([...value])
     } else if (value && Object.keys(value).length > 0) {
-      // Only update if rows are empty or significantly different
-      const valueEntries = Object.entries(value)
-      if (rows.length === 0 || rows.length !== valueEntries.length) {
-        setRows(valueEntries.map(([key, val], index) => {
-          console.log('val', val)
-          return {
-            key: index.toString(),
-            name: key || '',
-            value: val || '',
-            type: typeOptions.length > 0 ? typeOptions[0].value : undefined
-          }
-        }))
-      }
+      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([])
     }
-  }, [JSON.stringify(value), typeOptions.length])
+  }, [value, typeOptions])
 
   const handleChange = (key: string, field: 'name' | 'value' | 'type', val: string) => {
-    const newRows = [...rows.map(row => 
+    const newRows = rows.map(row => 
       row.key === key ? { ...row, [field]: val } : row
-    )];
-
+    );
     setRows(newRows);
     onChange?.(newRows);
   };
 
   const handleAdd = () => {
-    const newKey = Date.now().toString();
-    if (typeOptions.length) {
-      setRows([...rows, { key: newKey, name: '', value: '', type: typeOptions[0].value }]);
-    } else {
-      setRows([...rows, { key: newKey, name: '', value: '' }]);
-    }
+    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 = (key: string, index: number) => {
-    console.log('index', index)
-
-    if (rows.length === 1) {
-      setRows([]);
-      onChange?.([]);
-    } else {
-      const newRows = rows.filter(row => row.key !== key);
-      setRows(newRows);
-      onChange?.(newRows);
-    }
+  const handleDelete = (key: string) => {
+    const newRows = rows.filter(row => row.key !== key);
+    setRows(newRows);
+    onChange?.(newRows);
   };
 
-  const columns = typeOptions?.length > 0 ? [
-    {
-      title: t('workflow.config.name'),
-      dataIndex: 'name',
-      width: '45%',
-      render: (text: string, record: TableRow) => (
-        <Editor
-          options={options}
-          value={text}
-          height={32}
-          variant="outlined"
-          onChange={(value) => handleChange(record.key, 'name', value)}
-        />
-      ),
-    },
-    {
-      title: t('workflow.config.type'),
-      dataIndex: 'type',
-      width: '20%',
-      render: (text: string, record: TableRow) => (
-        <Select
-          value={text}
-          options={typeOptions}
-          onChange={(value) => {
-            console.log('value record', value)
-            handleChange(record.key, 'type', value)
-          }}
-        />
-      ),
-    },
-    {
-      title: t('workflow.config.value'),
+  const columns = useMemo(() => {
+    const baseColumns = [
+      {
+        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 || '')}
+          />
+        ),
+      }
+    ];
+
+    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: '45%',
+      width: typeOptions.length > 0 ? '35%' : '45%',
       render: (text: string, record: TableRow) => {
         if (record.type === 'file') {
-          
           return (
             <VariableSelect
               options={options}
               value={text}
-              onChange={(value) => {
-                console.log('value record', value)
-                handleChange(record.key, 'value', value)
-              }}
+              onChange={(value) => handleChange(record.key, 'value', value || '')}
             />
           )
         }
@@ -140,78 +126,41 @@ const EditableTable: React.FC<EditableTableProps> = ({
             value={text}
             height={32}
             variant="outlined"
-            onChange={(value) => {
-              console.log('value record', value)
-              handleChange(record.key, 'value', value)
-            }}
+            onChange={(value) => handleChange(record.key, 'value', value || '')}
           />
         )
       },
-    },
-    {
+    });
+
+    baseColumns.push({
       title: '',
+      dataIndex: 'actions',
       width: '10%',
-      render: (_: any, record: TableRow, index: number) => (
+      render: (_: any, record: TableRow) => (
         <Button
           type="text"
           icon={<DeleteOutlined />}
-          onClick={() => handleDelete(record.key, index)}
+          onClick={() => handleDelete(record.key)}
         />
       ),
-    },
-  ] : [
-    {
-      title: '键',
-      dataIndex: 'name',
-      width: '45%',
-      render: (text: string, record: TableRow) => (
-        <Editor
-          options={options}
-          value={text}
-          height={32}
-          variant="outlined"
-          onChange={(value) => handleChange(record.key, 'name', value)}
-        />
-      ),
-    },
-    {
-      title: '值',
-      dataIndex: 'value',
-      width: '45%',
-      render: (text: string, record: TableRow) => (
-        <Editor
-          options={options}
-          value={text}
-          height={32}
-          variant="outlined"
-          onChange={(value) => handleChange(record.key, 'value', value)}
-        />
-      ),
-    },
-    {
-      title: '',
-      width: '10%',
-      render: (_: any, record: TableRow, index: number) => (
-        <Button
-          type="text"
-          icon={<DeleteOutlined />}
-          onClick={() => handleDelete(record.key, index)}
-        />
-      ),
-    },
-  ];
+    });
+
+    return baseColumns;
+  }, [typeOptions, options, t]);
 
   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"
-        />
-      </div>}
+      {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"
+          />
+        </div>
+      )}
       <Table
         columns={columns}
         dataSource={rows}
@@ -220,11 +169,11 @@ const EditableTable: React.FC<EditableTableProps> = ({
         locale={{ emptyText: <Empty size={88} /> }}
         scroll={{ x: 'max-content' }}
       />
-      {!title &&
+      {!title && (
         <Button type="dashed" onClick={handleAdd} block className='rb:mt-1'>
           +{t('common.add')}
         </Button>
-      }
+      )}
     </div>
   );
 };

web/src/views/Workflow/components/Properties/HttpRequest/index.tsx

@@ -1,6 +1,6 @@
-import { type FC, useEffect, useRef } from "react";
+import { type FC, useRef } from "react";
 import { useTranslation } from 'react-i18next'
-import { Form, Row, Col, Select, Button, Divider, InputNumber, Switch, Input, Slider } from 'antd'
+import { Form, Row, Col, Select, Button, Divider, InputNumber, Switch, Input } from 'antd'
 import Editor from '../../Editor'
 import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin'
 import AuthConfigModal from './AuthConfigModal'