fix(web): workflow bugfix

2026-01-07 17:35:23 +08:00
parent 72c27273e4
commit 030a141c64
14 changed files with 833 additions and 186 deletions
--- a/web/src/views/Workflow/components/Properties/HttpRequest/AuthConfigModal.tsx
+++ b/web/src/views/Workflow/components/Properties/HttpRequest/AuthConfigModal.tsx
@@ -28,12 +28,18 @@ const AuthConfigModal = forwardRef<AuthConfigModalRef, AuthConfigModalProps>(({

  const handleOpen = (data?: HttpRequestConfigForm['auth']) => {
    if (data) {
-      form.setFieldsValue({
+      const initialValues = {
        auth: !data.auth_type || data.auth_type === 'none' ? 'none' : 'api_key',
        auth_type: !data.auth_type || data.auth_type === 'none' ? undefined : data.auth_type,
        header: data.header,
        api_key: data.api_key
-      })
+      }
+      form.setFieldValue('auth', initialValues.auth)
+      if (initialValues.auth !== 'none') {
+        setTimeout(() => {
+          form.setFieldsValue(initialValues)
+        }, 1)
+      }
    }
    setVisible(true);
  };
@@ -91,6 +97,9 @@ const AuthConfigModal = forwardRef<AuthConfigModalRef, AuthConfigModalProps>(({
        <FormItem
          name="auth"
          label={t('workflow.config.http-request.authType')}
+          rules={[
+            { required: true, message: t('common.pleaseSelect') }
+          ]}
        >
          <Select
            options={[
@@ -103,6 +112,9 @@ const AuthConfigModal = forwardRef<AuthConfigModalRef, AuthConfigModalProps>(({
          <FormItem
            name="auth_type"
            label={t('workflow.config.http-request.authType')}
+            rules={[
+              { required: true, message: t('common.pleaseSelect') }
+            ]}
          >
            <Select
              options={[
--- a/web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx
+++ b/web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next'
 import { Button, Select, Table, Form, type TableProps } from 'antd';
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
@@ -6,46 +6,8 @@ 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;
+  key?: string;
  name?: string;
  value?: string;
  type?: string;
@@ -56,100 +18,158 @@ interface EditableTableProps {
  title?: string;
  options?: Suggestion[];
  typeOptions?: { value: string, label: string }[]
+  filterBooleanType?: boolean;
 }

 const EditableTable: React.FC<EditableTableProps> = ({
  parentName,
  title,
  options = [],
-  typeOptions = []
+  typeOptions = [],
+  filterBooleanType = false
 }) => {
  const { t } = useTranslation();
-  const form = Form.useFormInstance();
-  const values = Form.useWatch(typeof parentName === 'string' ? [parentName] : parentName, form);

  const createNewRow = (): TableRow => ({
-    key: Date.now().toString(),
    name: undefined,
    value: undefined,
    ...(typeOptions.length > 0 && { type: typeOptions[0].value })
  });

-  const handleAdd = useCallback(() => {
-    form.setFieldValue(parentName, [...(values ?? []), createNewRow()]);
-  }, [form, parentName, values, typeOptions]);
-
-  const handleDelete = useCallback((index: number) => {
-    const currentValues = form.getFieldValue(parentName) || [];
-    form.setFieldValue(parentName, currentValues.filter((_: TableRow, i: number) => i !== index));
-  }, [form, parentName]);
-
-  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: TableProps<TableRow>['columns'] = useMemo(() => {
+  const getColumns = (remove: (index: number) => void): TableProps<TableRow>['columns'] => {
    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: t('workflow.config.name'),
+        dataIndex: 'name',
+        width: baseWidth,
+        render: (_: any, __: TableRow, index: number) => (
+          <Form.Item name={[index, 'name']} noStyle>
+            <VariableSelect 
+              placeholder={t('common.pleaseSelect')} 
+              size="small" 
+              options={options}
+              filterBooleanType={filterBooleanType}
+              popupMatchSelectWidth={false}
+            />
+          </Form.Item>
+        )
+      },
+      ...(hasType ? [{
+        title: t('workflow.config.type'),
+        dataIndex: 'type',
+        width: '20%',
+        render: (_: any, __: TableRow, index: number) => (
+          <Form.Item shouldUpdate noStyle>
+            {(form) => (
+              <Form.Item name={[index, 'type']} noStyle>
+                <Select 
+                  placeholder={t('common.pleaseSelect')} 
+                  size="small" 
+                  options={typeOptions}
+                  popupMatchSelectWidth={false}
+                  onChange={() => {
+                    form.setFieldValue([...Array.isArray(parentName) ? parentName : [parentName], index, 'value'], undefined);
+                  }}
+                />
+              </Form.Item>
+            )}
+          </Form.Item>
+        )
+      }] : []),
+      {
+        title: t('workflow.config.value'),
+        dataIndex: 'value',
+        width: baseWidth,
+        render: (_: any, __: TableRow, index: number) => (
+          <Form.Item 
+            shouldUpdate={(prevValues, currentValues) => {
+              const prevType = prevValues?.[Array.isArray(parentName) ? parentName.join('.') : parentName]?.[index]?.type;
+              const currentType = currentValues?.[Array.isArray(parentName) ? parentName.join('.') : parentName]?.[index]?.type;
+              return prevType !== currentType;
+            }}
+            noStyle
+          >
+            {(form) => {
+              const currentType = form.getFieldValue([...Array.isArray(parentName) ? parentName : [parentName], index, 'type']);
+              const filteredOptions = currentType === 'file' 
+                ? options.filter(option => option.dataType === 'file')
+                : options;
+              
+              return (
+                <Form.Item name={[index, 'value']} noStyle>
+                  <VariableSelect 
+                    placeholder={t('common.pleaseSelect')} 
+                    size="small" 
+                    options={filteredOptions}
+                    filterBooleanType={filterBooleanType}
+                    popupMatchSelectWidth={false}
+                  />
+                </Form.Item>
+              );
+            }}
+          </Form.Item>
+        )
+      },
      {
        title: '',
        dataIndex: 'actions',
        width: '10%',
        render: (_: any, __: TableRow, index: number) => (
-          <Button type="text" icon={<DeleteOutlined />} onClick={() => handleDelete(index)} />
+          <Button type="text" icon={<DeleteOutlined />} onClick={() => remove(index)} />
        )
      }
    ];
-  }, [typeOptions, options, t, parentName, handleDelete]);
-
-  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>
-          <AddButton />
-        </div>
-      )}
-      
-      <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 />}
+      <Form.List name={parentName}>
+        {(fields, { add, remove }) => {
+          const AddButton = ({ block = false }: { block?: boolean }) => (
+            <Button 
+              type={block ? "dashed" : "text"} 
+              icon={<PlusOutlined />} 
+              onClick={() => add(createNewRow())} 
+              size="small"
+              block={block}
+              className={block ? "rb:mt-1" : ""}
+            >
+              {block && `+${t('common.add')}`}
+            </Button>
+          );
+
+          return (
+            <>
+              {title && (
+                <div className="rb:flex rb:items-center rb:mb-2 rb:justify-between">
+                  <div className="rb:font-medium">{title}</div>
+                  <AddButton />
+                </div>
+              )}
+              
+              <Table<TableRow>
+                bordered
+                dataSource={fields.map((field) => ({ 
+                  key: String(field.key),
+                  name: undefined,
+                  value: undefined,
+                  type: undefined
+                }))}
+                columns={getColumns(remove)}
+                pagination={false}
+                size="small"
+                locale={{ emptyText: <Empty size={88} /> }}
+                scroll={{ x: 'max-content' }}
+              />
+              
+              {!title && <AddButton block />}
+            </>
+          );
+        }}
+      </Form.List>
    </div>
  );
 };
--- a/web/src/views/Workflow/components/Properties/HttpRequest/index.tsx
+++ b/web/src/views/Workflow/components/Properties/HttpRequest/index.tsx
@@ -9,8 +9,10 @@ import VariableSelect from "../VariableSelect";
 import MessageEditor from '../MessageEditor'
 import EditableTable from './EditableTable'

-const HttpRequest: FC<{ options: Suggestion[]; }> = ({
+const HttpRequest: FC<{ options: Suggestion[]; selectedNode?: any; graphRef?: any; }> = ({
  options,
+  selectedNode,
+  graphRef
 }) => {
  const { t } = useTranslation()
  const form = Form.useFormInstance();
@@ -22,18 +24,45 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
  }
  const handleRefresh = (auth: HttpRequestConfigForm['auth']) => {
    console.log('handleRefresh', auth)
-    form.setFieldsValue({ auth: {...auth} })
+    form.setFieldsValue({ auth })
  }

-  const handleChangeBodyContentType = (contentType: string) => {
-    const currentValues = form.getFieldsValue()
+  const handleChangeBodyContentType = () => {
+    form.setFieldValue(['body', 'data'], undefined)
+  }
+
+  const handleChangeErrorHandleMethod = (method: string) => {
    form.setFieldsValue({
-      body: {
-        ...currentValues?.body,
-        content_type: contentType,
-        data: undefined
+      error_handle: {
+        method,
+        body: undefined,
+        status_code: undefined,
+        headers: undefined
      }
    })
+    
+    // 更新节点连接桩
+    console.log('handleChangeErrorHandleMethod', selectedNode, graphRef?.current)
+    if (selectedNode && graphRef?.current) {
+      const existingPorts = selectedNode.getPorts();
+      const errorPort = existingPorts.find((port: any) => port.id === 'ERROR');
+      
+      if (method === 'branch' && !errorPort) {
+        // 添加异常节点连接桩
+        selectedNode.addPort({
+          id: 'ERROR',
+          group: 'right',
+          attrs: { text: { text: t('workflow.config.http-request.errorBranch'), fontSize: 12, fill: '#5B6167' }}
+        });
+      } else if (method !== 'branch' && errorPort) {
+        // 移除异常节点连接桩和相关连线
+        const edges = graphRef.current.getEdges().filter((edge: any) => 
+          edge.getSourceCellId() === selectedNode.id && edge.getSourcePortId() === 'ERROR'
+        );
+        edges.forEach((edge: any) => graphRef.current.removeCell(edge));
+        selectedNode.removePort('ERROR');
+      }
+    }
  }

  console.log('HttpRequest', values)
@@ -73,6 +102,7 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
          parentName="headers"
          title="HEADERS"
          options={options}
+          filterBooleanType={true}
        />
      </Form.Item>

@@ -81,6 +111,7 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
          parentName="params"
          title="PARAMS"
          options={options}
+          filterBooleanType={true}
        />
      </Form.Item>

@@ -104,6 +135,7 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
            <EditableTable
              parentName={['body', 'data']}
              options={options}
+              filterBooleanType={true}
              typeOptions={[
                { label: 'text', value: 'text' },
                { label: 'file', value: 'file' }
@@ -116,12 +148,15 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
            <EditableTable
              parentName={['body', 'data']}
              options={options}
+              filterBooleanType={true}
            />
          </Form.Item>
        }
        {values?.body?.content_type === 'json' &&
          <Form.Item name={['body', 'data']}>
            <MessageEditor
+              key="json"
+              parentName={['body', 'data']}
              options={options}
              isArray={false}
              title="JSON"
@@ -131,6 +166,8 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
        {values?.body?.content_type === 'raw' &&
          <Form.Item name={['body', 'data']}>
            <MessageEditor
+              key="raw"
+              parentName={['body', 'data']}
              options={options}
              isArray={false}
              title="RAW TEXT"
@@ -141,6 +178,7 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
          <Form.Item name={['body', 'data']}>
            <VariableSelect
              options={options}
+              filterBooleanType={true}
            />
          </Form.Item>
        }
@@ -185,7 +223,7 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
          </Form.Item>
          <Form.Item
            name={['retry', 'retry_interval']}
-            label={t('workflow.config.http-request.retry_interval')}
+            label={<>{t('workflow.config.http-request.retry_interval')} <span className="rb:text-[#5B6167]">(ms)</span></>}
          >
            <InputNumber placeholder={t('common.pleaseEnter')} className="rb:w-full!" />
          </Form.Item>
@@ -196,6 +234,7 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
      <Form.Item layout="horizontal" name={['error_handle', 'method']} label={t('workflow.config.http-request.error_handle')}>
        <Select
          placeholder={t('common.pleaseSelect')}
+          onChange={handleChangeErrorHandleMethod}
          options={[
            { value: 'none', label: t('workflow.config.http-request.none') },
            { value: 'default', label: t('workflow.config.http-request.default') },
@@ -207,32 +246,19 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
        <>
          <Form.Item
            name={['error_handle', 'body']}
-            label="body"
+            label={<>body <span className="rb:text-[#5B6167] rb:ml-1">string</span></>}
          >
            <Input placeholder={t('common.pleaseEnter')} />
          </Form.Item>
          <Form.Item
            name={['error_handle', 'status_code']}
-            label="status_code"
+            label={<>status_code <span className="rb:text-[#5B6167] rb:ml-1">number</span></>}
          >
            <InputNumber placeholder={t('common.pleaseEnter')} className="rb:w-full!" />
          </Form.Item>
          <Form.Item
            name={['error_handle', 'headers']}
-            label="headers"
-            rules={[
-              {
-                validator: (_, value) => {
-                  if (!value) return Promise.resolve();
-                  try {
-                    JSON.parse(value);
-                    return Promise.resolve();
-                  } catch {
-                    return Promise.reject(new Error('Please enter valid JSON format'));
-                  }
-                }
-              }
-            ]}
+            label={<>headers <span className="rb:text-[#5B6167] rb:ml-1">object</span></>}
          >
            <Input.TextArea placeholder={t('common.pleaseEnter')} />
          </Form.Item>