@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

package/src/components/output-config-editor.tsx

@@ -1,478 +1,478 @@
-import { useState, useCallback } from 'react';
-import type { FieldType, IAgentHelperOutputConfig, OutputParam, IField, ISubformField } from '@baishuyun/types';
-import { cn } from '../lib/utils';
-import { transCls } from '../const/ui';
-import { TrashIcon, SearchIcon } from '../components/bs-icons';
-import { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
-import { usePortalContainer } from '../hooks/use-portal-container';
-
-const PlusIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8 3.5v9M3.5 8h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-  </svg>
-);
-
-const CaretIcon = ({ className }: { className?: string }) => (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <path d="M3 4.5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-const ExpandArrowIcon = ({ className }: { className?: string }) => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-interface OutputFieldOption {
-  fieldName: string;
-  fieldDesc: string;
-  type: FieldType | '';
-  children?: OutputFieldOption[];
-}
-
-type DropdownTarget = { index: number; field: 'source' | 'target' } | null;
-
-export interface OutputConfigEditorProps {
-  value: Array<IAgentHelperOutputConfig>;
-  onChange?: (value: Array<IAgentHelperOutputConfig>) => void;
-
-  sourceFields?: OutputParam[];
-  targetFields?: IField[];
-  className?: string;
-}
-
-function outputParamsToOptions(params: OutputParam[]): OutputFieldOption[] {
-  return params.map(p => ({
-    fieldName: p.name,
-    fieldDesc: p.description || p.name,
-    type: p.type,
-    children: p.subformParams?.map(s => ({
-      fieldName: s.name,
-      fieldDesc: s.name,
-      type: s.type,
-    })),
-  }));
-}
-
-function fieldsToOptions(fields: IField[]): OutputFieldOption[] {
-  return fields.map(f => {
-    const subformItems = f.widget.items?.filter(
-      (item): item is ISubformField => 'widget' in item
-    );
-    return {
-      fieldName: f.widget.widgetName,
-      fieldDesc: f.label,
-      type: f.widget.type,
-      children: subformItems?.length ? subformItems.map(s => ({
-        fieldName: `${f.widget.widgetName}.${s.widget.widgetName}`,
-        fieldDesc: `${s.label}`,
-        type: s.widget.type,
-      })) : undefined,
-    };
-  });
-}
-
-function flattenSourceFields(fields: OutputFieldOption[]): OutputFieldOption[] {
-  const result: OutputFieldOption[] = [];
-  for (const field of fields) {
-    result.push(field);
-    if (field.children) {
-      for (const child of field.children) {
-        result.push({
-          ...child,
-          fieldName: `${field.fieldName}.${child.fieldName}`,
-          fieldDesc: `${field.fieldDesc}.${child.fieldDesc}`,
-        });
-      }
-    }
-  }
-  return result;
-}
-
-function findFieldByName(fields: OutputFieldOption[], fieldName: string): OutputFieldOption | undefined {
-  for (const f of fields) {
-    if (f.fieldName === fieldName) return f;
-    if (f.children) {
-      const found = findFieldByName(f.children, fieldName);
-      if (found) return found;
-    }
-  }
-  return undefined;
-}
-
-
-const VALID_TYPE_MAP: Partial<Record<FieldType, Set<FieldType>>> = {
-  'text': new Set(['text', 'textarea']),
-  'number': new Set(['text', 'textarea']),
-  'radio': new Set(['radio', 'radiogroup']),
-  'signature': new Set(['signature', 'image', 'upload']),
-  'image': new Set(['signature', 'image', 'upload']),
-}
-
-const EMPTY_SET = new Set();
-
-function filterFieldsByType(fields: OutputFieldOption[], targetType: FieldType | ''): OutputFieldOption[] {
-  return fields.reduce<OutputFieldOption[]>((acc, f) => {
-    const selfMatches = f.type === targetType;
-    const validTypeSet = VALID_TYPE_MAP[targetType as FieldType] ?? EMPTY_SET;
-    const generalMatches = validTypeSet.has(f.type);
-
-    const filteredChildren = f.children ? filterFieldsByType(f.children, targetType) : [];
-    if (selfMatches || generalMatches || filteredChildren.length > 0) {
-      acc.push({ ...f, children: filteredChildren.length > 0 ? filteredChildren : f.children });
-    }
-    return acc;
-  }, []);
-}
-
-export function OutputConfigEditor({ value, onChange, sourceFields, targetFields, className }: OutputConfigEditorProps) {
-  const [dropdownTarget, setDropdownTarget] = useState<DropdownTarget>(null);
-  const [searchText, setSearchText] = useState('');
-  const [collapsedParents, setCollapsedParents] = useState<Set<string>>(new Set());
-
-  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-output-config-portal');
-
-  const sourceOptions = sourceFields ? outputParamsToOptions(sourceFields) : [];
-  const targetOptions = targetFields ? fieldsToOptions(targetFields) : [];
-
-  const handleDropdownOpenChange = useCallback((index: number, field: 'source' | 'target', open: boolean) => {
-    if (open) {
-      setDropdownTarget({ index, field });
-      setSearchText('');
-      setCollapsedParents(new Set());
-    } else {
-      setDropdownTarget(null);
-      setSearchText('');
-      setCollapsedParents(new Set());
-    }
-  }, []);
-
-  const handleAdd = useCallback(() => {
-    onChange?.([...value, { sourceField: { fieldName: '', fieldDesc: '' }, targetField: { fieldName: '', fieldDesc: '' } }]);
-  }, [value, onChange]);
-
-  const handleDelete = useCallback((index: number) => {
-    onChange?.(value.filter((_, i) => i !== index));
-  }, [value, onChange]);
-
-  const handleSelectSourceField = useCallback((index: number, field: OutputFieldOption) => {
-    const newValue = [...value];
-    const newItem = { ...newValue[index], sourceField: { fieldName: field.fieldName, fieldDesc: field.fieldDesc } };
-    if (newItem.targetField.fieldName) {
-      const targetOption = findFieldByName(targetOptions, newItem.targetField.fieldName);
-      if (targetOption && targetOption.type !== field.type) {
-        newItem.targetField = { fieldName: '', fieldDesc: '' };
-      }
-    }
-    newValue[index] = newItem;
-    onChange?.(newValue);
-    setDropdownTarget(null);
-    setSearchText('');
-  }, [value, onChange, targetOptions]);
-
-  const handleSelectTargetField = useCallback((index: number, field: OutputFieldOption) => {
-    const newValue = [...value];
-    newValue[index] = { ...newValue[index], targetField: { fieldName: field.fieldName, fieldDesc: field.fieldDesc } };
-    onChange?.(newValue);
-    setDropdownTarget(null);
-    setSearchText('');
-  }, [value, onChange]);
-
-  const toggleParent = useCallback((fieldName: string) => {
-    setCollapsedParents(prev => {
-      const next = new Set(prev);
-      if (next.has(fieldName)) {
-        next.delete(fieldName);
-      } else {
-        next.add(fieldName);
-      }
-      return next;
-    });
-  }, []);
-
-  const matchSearch = (text: string) =>
-    !searchText || text?.toLowerCase().includes(searchText.toLowerCase());
-
-  const filterFields = (fields: OutputFieldOption[]): OutputFieldOption[] =>
-    fields.reduce<OutputFieldOption[]>((acc, f) => {
-      const selfMatches = matchSearch(f.fieldDesc) || matchSearch(f.fieldName);
-      const filteredChildren = f.children ? filterFields(f.children) : [];
-      if (selfMatches || filteredChildren.length > 0) {
-        acc.push({ ...f, children: filteredChildren.length > 0 ? filteredChildren : f.children });
-      }
-      return acc;
-    }, []);
-
-  const flatSourceFields = flattenSourceFields(sourceOptions);
-  const filteredSourceFields = flatSourceFields.filter(
-    (f) => (matchSearch(f.fieldDesc) || matchSearch(f.fieldName)) && f.type !== 'subform'
-  );
-
-  const searchedTargetFields = filterFields(targetOptions);
-
-  const fieldRowCls = cn(
-    'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px]',
-    'flex items-center min-w-0',
-    'text-[14px] text-[#030303] leading-normal',
-    'hover:border-[#0265ff]',
-    transCls,
-  );
-
-  const isDropdownOpen = (index: number, field: 'source' | 'target') =>
-    dropdownTarget?.index === index && dropdownTarget?.field === field;
-
-  if (value.length === 0) {
-    return (
-      <div className={className}>
-        <button
-          type="button"
-          onClick={handleAdd}
-          className={cn(
-            'inline-flex items-center gap-[6px]',
-            'bg-transparent border-0 cursor-pointer p-0',
-            'text-[#0265ff] text-[14px] leading-normal',
-            'hover:opacity-80',
-            transCls,
-          )}
-        >
-          <PlusIcon />
-          <span>添加出参名称</span>
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div ref={setTriggerRef} className={cn(
-      'bg-[#f5f5f5] border border-[#e0e0e0] border-dashed rounded-[4px] p-[10px]',
-      'flex flex-col gap-[10px]',
-      className,
-    )}>
-      {value.map((item, index) => {
-        const selectedSourceType = item.sourceField.fieldName
-          ? flatSourceFields.find(f => f.fieldName === item.sourceField.fieldName)?.type
-          : undefined;
-        const rowTargetFields = selectedSourceType
-          ? filterFieldsByType(searchedTargetFields, selectedSourceType)
-          : searchedTargetFields;
-        return (
-        <div key={index} className="flex gap-[10px] items-center">
-          {/* Source field selector (JSON output field) */}
-          <Popover open={isDropdownOpen(index, 'source')} onOpenChange={(open) => handleDropdownOpenChange(index, 'source', open)}>
-            <PopoverTrigger asChild>
-              <button
-                type="button"
-                className={cn(
-                  fieldRowCls,
-                  'w-full justify-between cursor-pointer',
-                  isDropdownOpen(index, 'source') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
-                )}
-              >
-                <span className="text-[14px] text-[#030303] leading-normal truncate">
-                  {item.sourceField.fieldDesc || <span className="text-[#999]">请选择字段</span>}
-                </span>
-                <CaretIcon className={cn(
-                  'shrink-0 text-[#666]',
-                  isDropdownOpen(index, 'source') && 'rotate-180',
-                  transCls,
-                )} />
-              </button>
-            </PopoverTrigger>
-            <PopoverContent
-              align="start"
-              sideOffset={4}
-              portalContainer={portalContainer}
-              className="w-[216px] rounded-[4px] p-[4px] shadow-[0px_0px_16px_0px_rgba(0,0,0,0.1)]"
-            >
-              <div className="relative flex items-center border border-[#e0e0e0] rounded-[4px] mb-[4px]">
-                <span className="absolute left-[10px] top-1/2 -translate-y-1/2">
-                  <SearchIcon />
-                </span>
-                <input
-                  type="text"
-                  value={searchText}
-                  onChange={e => setSearchText(e.target.value)}
-                  placeholder="搜索"
-                  className={cn(
-                    'w-full h-[34px] pl-[32px] pr-[10px]',
-                    'text-[14px] text-[#030303] leading-normal outline-none',
-                    'bg-transparent border-0 rounded-[4px]',
-                    'placeholder:text-[#999]',
-                  )}
-                />
-              </div>
-              <div className="max-h-[210px] overflow-auto">
-                {filteredSourceFields.map((field) => (
-                  <button
-                    key={field.fieldName}
-                    type="button"
-                    onClick={() => handleSelectSourceField(index, field)}
-                    className={cn(
-                      'flex items-center w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
-                      'text-[14px] text-[#030303] leading-normal',
-                      'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
-                      item.sourceField.fieldDesc === field.fieldDesc && 'bg-[#EFF0F6] text-[#0265ff]',
-                      transCls,
-                    )}
-                  >
-                    <span className="truncate">{field.fieldDesc}</span>
-                  </button>
-                ))}
-                {filteredSourceFields.length === 0 && (
-                  <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
-                    无匹配结果
-                  </div>
-                )}
-              </div>
-            </PopoverContent>
-          </Popover>
-
-          {/* "设置为" label */}
-          <div className="bg-[#d9d9d9] rounded-[4px] h-[34px] w-[98px] shrink-0 flex items-center justify-center">
-            <span className="text-[14px] text-[#030303] leading-normal whitespace-nowrap">设置为</span>
-          </div>
-
-          {/* Target field selector (Form field) */}
-          <Popover open={isDropdownOpen(index, 'target')} onOpenChange={(open) => handleDropdownOpenChange(index, 'target', open)}>
-            <PopoverTrigger asChild>
-              <button
-                type="button"
-                className={cn(
-                  fieldRowCls,
-                  'w-full justify-between cursor-pointer',
-                  isDropdownOpen(index, 'target') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
-                )}
-              >
-                <span className="text-[14px] text-[#030303] leading-normal truncate">
-                  {item.targetField.fieldDesc || <span className="text-[#999]">请选择表单字段</span>}
-                </span>
-                <CaretIcon className={cn(
-                  'shrink-0 text-[#666]',
-                  isDropdownOpen(index, 'target') && 'rotate-180',
-                  transCls,
-                )} />
-              </button>
-            </PopoverTrigger>
-            <PopoverContent
-              align="start"
-              sideOffset={4}
-              portalContainer={portalContainer}
-              className="w-[216px] rounded-[4px] p-[4px] shadow-[0px_0px_16px_0px_rgba(0,0,0,0.1)]"
-            >
-              <div className="relative flex items-center border border-[#e0e0e0] rounded-[4px] mb-[4px]">
-                <span className="absolute left-[10px] top-1/2 -translate-y-1/2">
-                  <SearchIcon />
-                </span>
-                <input
-                  type="text"
-                  value={searchText}
-                  onChange={e => setSearchText(e.target.value)}
-                  placeholder="搜索"
-                  className={cn(
-                    'w-full h-[34px] pl-[32px] pr-[10px]',
-                    'text-[14px] text-[#030303] leading-normal outline-none',
-                    'bg-transparent border-0 rounded-[4px]',
-                    'placeholder:text-[#999]',
-                  )}
-                />
-              </div>
-              <div className="max-h-[210px] overflow-auto">
-                {rowTargetFields.map((field) => {
-                  const isParent = field.children && field.children.length > 0;
-                  const isCollapsed = collapsedParents.has(field.fieldName);
-
-                  return (
-                    <div key={field.fieldName}>
-                      {isParent ? (
-                        <button
-                          type="button"
-                          onClick={() => toggleParent(field.fieldName)}
-                          className={cn(
-                            'flex items-center gap-[6px] w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
-                            'text-[14px] text-[#030303] leading-normal',
-                            'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
-                            transCls,
-                          )}
-                        >
-                          <ExpandArrowIcon className={cn(
-                            'shrink-0 text-[#999]',
-                            !isCollapsed && 'rotate-90',
-                            transCls,
-                          )} />
-                          <span className="truncate">{field.fieldDesc}</span>
-                        </button>
-                      ) : (
-                        <button
-                          type="button"
-                          onClick={() => handleSelectTargetField(index, field)}
-                          className={cn(
-                            'flex items-center w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
-                            'text-[14px] text-[#030303] leading-normal',
-                            'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
-                            item.targetField.fieldName === field.fieldName && 'bg-[#EFF0F6] text-[#0265ff]',
-                            transCls,
-                          )}
-                        >
-                          <span className="truncate">{field.fieldDesc}</span>
-                        </button>
-                      )}
-                      {isParent && !isCollapsed && field.children!.map((child) => (
-                        <button
-                          key={child.fieldName}
-                          type="button"
-                          onClick={() => handleSelectTargetField(index, child)}
-                          className={cn(
-                            'flex items-center w-full pl-[34px] pr-[10px] py-[7px] h-[34px] rounded-[4px]',
-                            'text-[14px] text-[#030303] leading-normal',
-                            'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
-                            item.targetField.fieldName === child.fieldName && 'bg-[#EFF0F6] text-[#0265ff]',
-                            transCls,
-                          )}
-                        >
-                          <span className="truncate">{child.fieldDesc}</span>
-                        </button>
-                      ))}
-                    </div>
-                  );
-                })}
-                {rowTargetFields.length === 0 && (
-                  <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
-                    无匹配结果
-                  </div>
-                )}
-              </div>
-            </PopoverContent>
-          </Popover>
-
-          {/* Delete button */}
-          <button
-            type="button"
-            onClick={() => handleDelete(index)}
-            className="shrink-0 cursor-pointer bg-transparent border-0 p-0"
-          >
-            <span className="inline-flex items-center justify-center size-[16px] text-[#666] hover:text-[#FF4D4F] [&_svg_path]:fill-[#666] [&_svg_path]:hover:fill-[#FF4D4F]">
-              <TrashIcon />
-            </span>
-          </button>
-        </div>
-        );
-      })}
-
-      <button
-        type="button"
-        onClick={handleAdd}
-        className={cn(
-          'inline-flex items-center gap-[6px] w-fit',
-          'bg-transparent border-0 cursor-pointer p-0',
-          'text-[#0265ff] text-[14px] leading-normal',
-          'hover:opacity-80',
-          transCls,
-        )}
-      >
-        <PlusIcon />
-        <span>添加出参名称</span>
-      </button>
-    </div>
-  );
-}
+import { useState, useCallback } from 'react';
+import type { FieldType, IAgentHelperOutputConfig, OutputParam, IField, ISubformField } from '@baishuyun/types';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { TrashIcon, SearchIcon } from '../components/bs-icons';
+import { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
+import { usePortalContainer } from '../hooks/use-portal-container';
+
+const PlusIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 3.5v9M3.5 8h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+);
+
+const CaretIcon = ({ className }: { className?: string }) => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M3 4.5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const ExpandArrowIcon = ({ className }: { className?: string }) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+interface OutputFieldOption {
+  fieldName: string;
+  fieldDesc: string;
+  type: FieldType | '';
+  children?: OutputFieldOption[];
+}
+
+type DropdownTarget = { index: number; field: 'source' | 'target' } | null;
+
+export interface OutputConfigEditorProps {
+  value: Array<IAgentHelperOutputConfig>;
+  onChange?: (value: Array<IAgentHelperOutputConfig>) => void;
+
+  sourceFields?: OutputParam[];
+  targetFields?: IField[];
+  className?: string;
+}
+
+function outputParamsToOptions(params: OutputParam[]): OutputFieldOption[] {
+  return params.map(p => ({
+    fieldName: p.name,
+    fieldDesc: p.description || p.name,
+    type: p.type,
+    children: p.subformParams?.map(s => ({
+      fieldName: s.name,
+      fieldDesc: s.name,
+      type: s.type,
+    })),
+  }));
+}
+
+function fieldsToOptions(fields: IField[]): OutputFieldOption[] {
+  return fields.map(f => {
+    const subformItems = f.widget.items?.filter(
+      (item): item is ISubformField => 'widget' in item
+    );
+    return {
+      fieldName: f.widget.widgetName,
+      fieldDesc: f.label,
+      type: f.widget.type,
+      children: subformItems?.length ? subformItems.map(s => ({
+        fieldName: `${f.widget.widgetName}.${s.widget.widgetName}`,
+        fieldDesc: `${s.label}`,
+        type: s.widget.type,
+      })) : undefined,
+    };
+  });
+}
+
+function flattenSourceFields(fields: OutputFieldOption[]): OutputFieldOption[] {
+  const result: OutputFieldOption[] = [];
+  for (const field of fields) {
+    result.push(field);
+    if (field.children) {
+      for (const child of field.children) {
+        result.push({
+          ...child,
+          fieldName: `${field.fieldName}.${child.fieldName}`,
+          fieldDesc: `${field.fieldDesc}.${child.fieldDesc}`,
+        });
+      }
+    }
+  }
+  return result;
+}
+
+function findFieldByName(fields: OutputFieldOption[], fieldName: string): OutputFieldOption | undefined {
+  for (const f of fields) {
+    if (f.fieldName === fieldName) return f;
+    if (f.children) {
+      const found = findFieldByName(f.children, fieldName);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+
+const VALID_TYPE_MAP: Partial<Record<FieldType, Set<FieldType>>> = {
+  'text': new Set(['text', 'textarea']),
+  'number': new Set(['text', 'textarea']),
+  'radio': new Set(['radio', 'radiogroup']),
+  'signature': new Set(['signature', 'image', 'upload']),
+  'image': new Set(['signature', 'image', 'upload']),
+}
+
+const EMPTY_SET = new Set();
+
+function filterFieldsByType(fields: OutputFieldOption[], targetType: FieldType | ''): OutputFieldOption[] {
+  return fields.reduce<OutputFieldOption[]>((acc, f) => {
+    const selfMatches = f.type === targetType;
+    const validTypeSet = VALID_TYPE_MAP[targetType as FieldType] ?? EMPTY_SET;
+    const generalMatches = validTypeSet.has(f.type);
+
+    const filteredChildren = f.children ? filterFieldsByType(f.children, targetType) : [];
+    if (selfMatches || generalMatches || filteredChildren.length > 0) {
+      acc.push({ ...f, children: filteredChildren.length > 0 ? filteredChildren : f.children });
+    }
+    return acc;
+  }, []);
+}
+
+export function OutputConfigEditor({ value, onChange, sourceFields, targetFields, className }: OutputConfigEditorProps) {
+  const [dropdownTarget, setDropdownTarget] = useState<DropdownTarget>(null);
+  const [searchText, setSearchText] = useState('');
+  const [collapsedParents, setCollapsedParents] = useState<Set<string>>(new Set());
+
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-output-config-portal');
+
+  const sourceOptions = sourceFields ? outputParamsToOptions(sourceFields) : [];
+  const targetOptions = targetFields ? fieldsToOptions(targetFields) : [];
+
+  const handleDropdownOpenChange = useCallback((index: number, field: 'source' | 'target', open: boolean) => {
+    if (open) {
+      setDropdownTarget({ index, field });
+      setSearchText('');
+      setCollapsedParents(new Set());
+    } else {
+      setDropdownTarget(null);
+      setSearchText('');
+      setCollapsedParents(new Set());
+    }
+  }, []);
+
+  const handleAdd = useCallback(() => {
+    onChange?.([...value, { sourceField: { fieldName: '', fieldDesc: '' }, targetField: { fieldName: '', fieldDesc: '' } }]);
+  }, [value, onChange]);
+
+  const handleDelete = useCallback((index: number) => {
+    onChange?.(value.filter((_, i) => i !== index));
+  }, [value, onChange]);
+
+  const handleSelectSourceField = useCallback((index: number, field: OutputFieldOption) => {
+    const newValue = [...value];
+    const newItem = { ...newValue[index], sourceField: { fieldName: field.fieldName, fieldDesc: field.fieldDesc } };
+    if (newItem.targetField.fieldName) {
+      const targetOption = findFieldByName(targetOptions, newItem.targetField.fieldName);
+      if (targetOption && targetOption.type !== field.type) {
+        newItem.targetField = { fieldName: '', fieldDesc: '' };
+      }
+    }
+    newValue[index] = newItem;
+    onChange?.(newValue);
+    setDropdownTarget(null);
+    setSearchText('');
+  }, [value, onChange, targetOptions]);
+
+  const handleSelectTargetField = useCallback((index: number, field: OutputFieldOption) => {
+    const newValue = [...value];
+    newValue[index] = { ...newValue[index], targetField: { fieldName: field.fieldName, fieldDesc: field.fieldDesc } };
+    onChange?.(newValue);
+    setDropdownTarget(null);
+    setSearchText('');
+  }, [value, onChange]);
+
+  const toggleParent = useCallback((fieldName: string) => {
+    setCollapsedParents(prev => {
+      const next = new Set(prev);
+      if (next.has(fieldName)) {
+        next.delete(fieldName);
+      } else {
+        next.add(fieldName);
+      }
+      return next;
+    });
+  }, []);
+
+  const matchSearch = (text: string) =>
+    !searchText || text?.toLowerCase().includes(searchText.toLowerCase());
+
+  const filterFields = (fields: OutputFieldOption[]): OutputFieldOption[] =>
+    fields.reduce<OutputFieldOption[]>((acc, f) => {
+      const selfMatches = matchSearch(f.fieldDesc) || matchSearch(f.fieldName);
+      const filteredChildren = f.children ? filterFields(f.children) : [];
+      if (selfMatches || filteredChildren.length > 0) {
+        acc.push({ ...f, children: filteredChildren.length > 0 ? filteredChildren : f.children });
+      }
+      return acc;
+    }, []);
+
+  const flatSourceFields = flattenSourceFields(sourceOptions);
+  const filteredSourceFields = flatSourceFields.filter(
+    (f) => (matchSearch(f.fieldDesc) || matchSearch(f.fieldName)) && f.type !== 'subform'
+  );
+
+  const searchedTargetFields = filterFields(targetOptions);
+
+  const fieldRowCls = cn(
+    'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px]',
+    'flex items-center min-w-0',
+    'text-[14px] text-[#030303] leading-normal',
+    'hover:border-[#0265ff]',
+    transCls,
+  );
+
+  const isDropdownOpen = (index: number, field: 'source' | 'target') =>
+    dropdownTarget?.index === index && dropdownTarget?.field === field;
+
+  if (value.length === 0) {
+    return (
+      <div className={className}>
+        <button
+          type="button"
+          onClick={handleAdd}
+          className={cn(
+            'inline-flex items-center gap-[6px]',
+            'bg-transparent border-0 cursor-pointer p-0',
+            'text-[#0265ff] text-[14px] leading-normal',
+            'hover:opacity-80',
+            transCls,
+          )}
+        >
+          <PlusIcon />
+          <span>添加出参名称</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={setTriggerRef} className={cn(
+      'bg-[#f5f5f5] border border-[#e0e0e0] border-dashed rounded-[4px] p-[10px]',
+      'flex flex-col gap-[10px]',
+      className,
+    )}>
+      {value.map((item, index) => {
+        const selectedSourceType = item.sourceField.fieldName
+          ? flatSourceFields.find(f => f.fieldName === item.sourceField.fieldName)?.type
+          : undefined;
+        const rowTargetFields = selectedSourceType
+          ? filterFieldsByType(searchedTargetFields, selectedSourceType)
+          : searchedTargetFields;
+        return (
+        <div key={index} className="flex gap-[10px] items-center">
+          {/* Source field selector (JSON output field) */}
+          <Popover open={isDropdownOpen(index, 'source')} onOpenChange={(open) => handleDropdownOpenChange(index, 'source', open)}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                className={cn(
+                  fieldRowCls,
+                  'w-full justify-between cursor-pointer',
+                  isDropdownOpen(index, 'source') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
+                )}
+              >
+                <span className="text-[14px] text-[#030303] leading-normal truncate">
+                  {item.sourceField.fieldDesc || <span className="text-[#999]">请选择字段</span>}
+                </span>
+                <CaretIcon className={cn(
+                  'shrink-0 text-[#666]',
+                  isDropdownOpen(index, 'source') && 'rotate-180',
+                  transCls,
+                )} />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              align="start"
+              sideOffset={4}
+              portalContainer={portalContainer}
+              className="w-[216px] rounded-[4px] p-[4px] shadow-[0px_0px_16px_0px_rgba(0,0,0,0.1)]"
+            >
+              <div className="relative flex items-center border border-[#e0e0e0] rounded-[4px] mb-[4px]">
+                <span className="absolute left-[10px] top-1/2 -translate-y-1/2">
+                  <SearchIcon />
+                </span>
+                <input
+                  type="text"
+                  value={searchText}
+                  onChange={e => setSearchText(e.target.value)}
+                  placeholder="搜索"
+                  className={cn(
+                    'w-full h-[34px] pl-[32px] pr-[10px]',
+                    'text-[14px] text-[#030303] leading-normal outline-none',
+                    'bg-transparent border-0 rounded-[4px]',
+                    'placeholder:text-[#999]',
+                  )}
+                />
+              </div>
+              <div className="max-h-[210px] overflow-auto">
+                {filteredSourceFields.map((field) => (
+                  <button
+                    key={field.fieldName}
+                    type="button"
+                    onClick={() => handleSelectSourceField(index, field)}
+                    className={cn(
+                      'flex items-center w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
+                      'text-[14px] text-[#030303] leading-normal',
+                      'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                      item.sourceField.fieldDesc === field.fieldDesc && 'bg-[#EFF0F6] text-[#0265ff]',
+                      transCls,
+                    )}
+                  >
+                    <span className="truncate">{field.fieldDesc}</span>
+                  </button>
+                ))}
+                {filteredSourceFields.length === 0 && (
+                  <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
+                    无匹配结果
+                  </div>
+                )}
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          {/* "设置为" label */}
+          <div className="bg-[#d9d9d9] rounded-[4px] h-[34px] w-[98px] shrink-0 flex items-center justify-center">
+            <span className="text-[14px] text-[#030303] leading-normal whitespace-nowrap">设置为</span>
+          </div>
+
+          {/* Target field selector (Form field) */}
+          <Popover open={isDropdownOpen(index, 'target')} onOpenChange={(open) => handleDropdownOpenChange(index, 'target', open)}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                className={cn(
+                  fieldRowCls,
+                  'w-full justify-between cursor-pointer',
+                  isDropdownOpen(index, 'target') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
+                )}
+              >
+                <span className="text-[14px] text-[#030303] leading-normal truncate">
+                  {item.targetField.fieldDesc || <span className="text-[#999]">请选择表单字段</span>}
+                </span>
+                <CaretIcon className={cn(
+                  'shrink-0 text-[#666]',
+                  isDropdownOpen(index, 'target') && 'rotate-180',
+                  transCls,
+                )} />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              align="start"
+              sideOffset={4}
+              portalContainer={portalContainer}
+              className="w-[216px] rounded-[4px] p-[4px] shadow-[0px_0px_16px_0px_rgba(0,0,0,0.1)]"
+            >
+              <div className="relative flex items-center border border-[#e0e0e0] rounded-[4px] mb-[4px]">
+                <span className="absolute left-[10px] top-1/2 -translate-y-1/2">
+                  <SearchIcon />
+                </span>
+                <input
+                  type="text"
+                  value={searchText}
+                  onChange={e => setSearchText(e.target.value)}
+                  placeholder="搜索"
+                  className={cn(
+                    'w-full h-[34px] pl-[32px] pr-[10px]',
+                    'text-[14px] text-[#030303] leading-normal outline-none',
+                    'bg-transparent border-0 rounded-[4px]',
+                    'placeholder:text-[#999]',
+                  )}
+                />
+              </div>
+              <div className="max-h-[210px] overflow-auto">
+                {rowTargetFields.map((field) => {
+                  const isParent = field.children && field.children.length > 0;
+                  const isCollapsed = collapsedParents.has(field.fieldName);
+
+                  return (
+                    <div key={field.fieldName}>
+                      {isParent ? (
+                        <button
+                          type="button"
+                          onClick={() => toggleParent(field.fieldName)}
+                          className={cn(
+                            'flex items-center gap-[6px] w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
+                            'text-[14px] text-[#030303] leading-normal',
+                            'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                            transCls,
+                          )}
+                        >
+                          <ExpandArrowIcon className={cn(
+                            'shrink-0 text-[#999]',
+                            !isCollapsed && 'rotate-90',
+                            transCls,
+                          )} />
+                          <span className="truncate">{field.fieldDesc}</span>
+                        </button>
+                      ) : (
+                        <button
+                          type="button"
+                          onClick={() => handleSelectTargetField(index, field)}
+                          className={cn(
+                            'flex items-center w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
+                            'text-[14px] text-[#030303] leading-normal',
+                            'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                            item.targetField.fieldName === field.fieldName && 'bg-[#EFF0F6] text-[#0265ff]',
+                            transCls,
+                          )}
+                        >
+                          <span className="truncate">{field.fieldDesc}</span>
+                        </button>
+                      )}
+                      {isParent && !isCollapsed && field.children!.map((child) => (
+                        <button
+                          key={child.fieldName}
+                          type="button"
+                          onClick={() => handleSelectTargetField(index, child)}
+                          className={cn(
+                            'flex items-center w-full pl-[34px] pr-[10px] py-[7px] h-[34px] rounded-[4px]',
+                            'text-[14px] text-[#030303] leading-normal',
+                            'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                            item.targetField.fieldName === child.fieldName && 'bg-[#EFF0F6] text-[#0265ff]',
+                            transCls,
+                          )}
+                        >
+                          <span className="truncate">{child.fieldDesc}</span>
+                        </button>
+                      ))}
+                    </div>
+                  );
+                })}
+                {rowTargetFields.length === 0 && (
+                  <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
+                    无匹配结果
+                  </div>
+                )}
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          {/* Delete button */}
+          <button
+            type="button"
+            onClick={() => handleDelete(index)}
+            className="shrink-0 cursor-pointer bg-transparent border-0 p-0"
+          >
+            <span className="inline-flex items-center justify-center size-[16px] text-[#666] hover:text-[#FF4D4F] [&_svg_path]:fill-[#666] [&_svg_path]:hover:fill-[#FF4D4F]">
+              <TrashIcon />
+            </span>
+          </button>
+        </div>
+        );
+      })}
+
+      <button
+        type="button"
+        onClick={handleAdd}
+        className={cn(
+          'inline-flex items-center gap-[6px] w-fit',
+          'bg-transparent border-0 cursor-pointer p-0',
+          'text-[#0265ff] text-[14px] leading-normal',
+          'hover:opacity-80',
+          transCls,
+        )}
+      >
+        <PlusIcon />
+        <span>添加出参名称</span>
+      </button>
+    </div>
+  );
+}