@baishuyun/ai-design 1.0.9 → 1.1.0

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

@@ -1,9 +1,10 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import type { OutputParam, FieldType } from '@baishuyun/types';
+import { useState, useCallback } from 'react';
+import type { FieldType, IAgentHelperOutputConfig, OutputParam, IField, ISubformField } from '@baishuyun/types';
 import { cn } from '../lib/utils';
-import { transCls, FieldTypeNameMap } from '../const/ui';
+import { transCls } from '../const/ui';
 import { TrashIcon, SearchIcon } from '../components/bs-icons';
-import { FieldIcon } from '../components/field-icon';
+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">
@@ -23,77 +24,113 @@ const ExpandArrowIcon = ({ className }: { className?: string }) => (
   </svg>
 );
 
-export interface OutputFieldOption {
+interface OutputFieldOption {
   fieldName: string;
   fieldDesc: string;
-  type: FieldType;
+  type: FieldType | '';
   children?: OutputFieldOption[];
 }
 
-type DropdownTarget = { index: number; field: 'name' | 'type' } | null;
+type DropdownTarget = { index: number; field: 'source' | 'target' } | null;
 
 export interface OutputConfigEditorProps {
-  value: OutputParam[];
-  onChange?: (value: OutputParam[]) => void;
-  availableFields?: OutputFieldOption[];
+  value: Array<IAgentHelperOutputConfig>;
+  onChange?: (value: Array<IAgentHelperOutputConfig>) => void;
+
+  sourceFields?: OutputParam[];
+  targetFields?: IField[];
   className?: string;
 }
 
-export function OutputConfigEditor({ value, onChange, availableFields, className }: OutputConfigEditorProps) {
+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: 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;
+}
+
+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 dropdownRef = useRef<HTMLDivElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!dropdownTarget) return;
-    const handleClickOutside = (e: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        setDropdownTarget(null);
-        setSearchText('');
-        setCollapsedParents(new Set());
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [dropdownTarget]);
 
-  useEffect(() => {
-    if (dropdownTarget && searchInputRef.current) {
-      setTimeout(() => searchInputRef.current?.focus(), 0);
+  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());
     }
-  }, [dropdownTarget]);
+  }, []);
 
   const handleAdd = useCallback(() => {
-    onChange?.([...value, { name: '', type: '', description: '' }]);
+    onChange?.([...value, { sourceField: { fieldName: '', fieldDesc: '' }, targetField: { fieldName: '', fieldDesc: '' } }]);
   }, [value, onChange]);
 
   const handleDelete = useCallback((index: number) => {
     onChange?.(value.filter((_, i) => i !== index));
   }, [value, onChange]);
 
-  const handleOpenDropdown = useCallback((index: number, field: 'name' | 'type') => {
-    setDropdownTarget({ index, field });
-    setSearchText('');
-    setCollapsedParents(new Set());
-  }, []);
-
-  const handleSelectField = useCallback((index: number, field: OutputFieldOption) => {
+  const handleSelectSourceField = useCallback((index: number, field: OutputFieldOption) => {
     const newValue = [...value];
-    newValue[index] = { ...newValue[index], name: field.fieldDesc };
+    newValue[index] = { ...newValue[index], sourceField: { fieldName: field.fieldName, fieldDesc: field.fieldDesc } };
     onChange?.(newValue);
     setDropdownTarget(null);
     setSearchText('');
   }, [value, onChange]);
 
-  const handleSelectType = useCallback((index: number, type: FieldType | '') => {
+  const handleSelectTargetField = useCallback((index: number, field: OutputFieldOption) => {
     const newValue = [...value];
-    newValue[index] = {
-      ...newValue[index],
-      type,
-      subformParams: type === 'subform' ? (newValue[index].subformParams || []) : undefined,
-    };
+    newValue[index] = { ...newValue[index], targetField: { fieldName: field.fieldName, fieldDesc: field.fieldDesc } };
     onChange?.(newValue);
     setDropdownTarget(null);
     setSearchText('');
@@ -114,10 +151,6 @@ export function OutputConfigEditor({ value, onChange, availableFields, className
   const matchSearch = (text: string) =>
     !searchText || text?.toLowerCase().includes(searchText.toLowerCase());
 
-  const filteredTypes = Object.entries(FieldTypeNameMap).filter(([, name]) =>
-    matchSearch(name),
-  );
-
   const filterFields = (fields: OutputFieldOption[]): OutputFieldOption[] =>
     fields.reduce<OutputFieldOption[]>((acc, f) => {
       const selfMatches = matchSearch(f.fieldDesc) || matchSearch(f.fieldName);
@@ -128,7 +161,12 @@ export function OutputConfigEditor({ value, onChange, availableFields, className
       return acc;
     }, []);
 
-  const filteredFields = availableFields ? filterFields(availableFields) : [];
+  const flatSourceFields = flattenSourceFields(sourceOptions);
+  const filteredSourceFields = flatSourceFields.filter(
+    f => matchSearch(f.fieldDesc) || matchSearch(f.fieldName)
+  );
+
+  const filteredTargetFields = filterFields(targetOptions);
 
   const fieldRowCls = cn(
     'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px]',
@@ -138,7 +176,7 @@ export function OutputConfigEditor({ value, onChange, availableFields, className
     transCls,
   );
 
-  const isDropdownOpen = (index: number, field: 'name' | 'type') =>
+  const isDropdownOpen = (index: number, field: 'source' | 'target') =>
     dropdownTarget?.index === index && dropdownTarget?.field === field;
 
   if (value.length === 0) {
@@ -163,219 +201,199 @@ export function OutputConfigEditor({ value, onChange, availableFields, className
   }
 
   return (
-    <div className={cn(
+    <div ref={setTriggerRef} className={cn(
       'bg-[#f5f5f5] border border-[#e0e0e0] border-dashed rounded-[4px] p-[10px]',
       'flex flex-col gap-[10px]',
       className,
     )}>
-      {value.map((param, index) => (
+      {value.map((item, index) => (
         <div key={index} className="flex gap-[10px] items-center">
-          {/* Name selector */}
-          <div className="relative flex-1 min-w-0">
-            <button
-              type="button"
-              onClick={() => handleOpenDropdown(index, 'name')}
-              className={cn(
-                fieldRowCls,
-                'w-full justify-between cursor-pointer',
-                isDropdownOpen(index, 'name') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
-              )}
-            >
-              <span className="text-[14px] text-[#030303] leading-normal truncate">
-                {param.name || <span className="text-[#999]">请选择字段</span>}
-              </span>
-              <CaretIcon className={cn(
-                'shrink-0 text-[#666]',
-                isDropdownOpen(index, 'name') && 'rotate-180',
-                transCls,
-              )} />
-            </button>
-
-            {isDropdownOpen(index, 'name') && (
-              <div
-                ref={dropdownRef}
+          {/* Source field selector (JSON output field) */}
+          <Popover open={isDropdownOpen(index, 'source')} onOpenChange={(open) => handleDropdownOpenChange(index, 'source', open)}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
                 className={cn(
-                  'absolute top-[38px] left-0 z-10 w-[216px]',
-                  'bg-white rounded-[4px] p-[4px]',
-                  'shadow-[0px_0px_16px_0px_rgba(0,0,0,0.1)]',
+                  fieldRowCls,
+                  'w-full justify-between cursor-pointer',
+                  isDropdownOpen(index, 'source') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
                 )}
               >
-                <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
-                    ref={searchInputRef}
-                    type="text"
-                    value={searchText}
-                    onChange={e => setSearchText(e.target.value)}
-                    placeholder="搜索"
+                <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(
-                      '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]',
+                      '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,
                     )}
-                  />
-                </div>
-                <div className="max-h-[210px] overflow-auto">
-                  {filteredFields.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={() => handleSelectField(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',
-                              param.name === field.fieldDesc && '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={() => handleSelectField(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',
-                              param.name === child.fieldDesc && 'bg-[#EFF0F6] text-[#0265ff]',
-                              transCls,
-                            )}
-                          >
-                            <span className="truncate">{child.fieldDesc}</span>
-                          </button>
-                        ))}
-                      </div>
-                    );
-                  })}
-                  {filteredFields.length === 0 && (
-                    <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
-                      无匹配结果
-                    </div>
-                  )}
-                </div>
+                  >
+                    <span className="truncate">{field.fieldDesc}</span>
+                  </button>
+                ))}
+                {filteredSourceFields.length === 0 && (
+                  <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
+                    无匹配结果
+                  </div>
+                )}
               </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>
 
-          {/* Type selector */}
-          <div className="relative flex-1 min-w-0">
-            <button
-              type="button"
-              onClick={() => handleOpenDropdown(index, 'type')}
-              className={cn(
-                fieldRowCls,
-                'w-full justify-between cursor-pointer',
-                isDropdownOpen(index, 'type') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
-              )}
-            >
-              <span className="flex items-center gap-[6px] min-w-0">
-                {param.type ? (
-                  <>
-                    <FieldIcon type={param.type} />
-                    <span className="text-[14px] text-[#030303] leading-normal truncate">
-                      {FieldTypeNameMap[param.type]}
-                    </span>
-                  </>
-                ) : (
-                  <span className="text-[14px] text-[#999] leading-normal">请选择</span>
-                )}
-              </span>
-              <CaretIcon className={cn(
-                'shrink-0 text-[#666]',
-                isDropdownOpen(index, 'type') && 'rotate-180',
-                transCls,
-              )} />
-            </button>
-
-            {isDropdownOpen(index, 'type') && (
-              <div
-                ref={dropdownRef}
+          {/* Target field selector (Form field) */}
+          <Popover open={isDropdownOpen(index, 'target')} onOpenChange={(open) => handleDropdownOpenChange(index, 'target', open)}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
                 className={cn(
-                  'absolute top-[38px] left-0 z-10 w-[216px]',
-                  'bg-white rounded-[4px] p-[4px]',
-                  'shadow-[0px_0px_16px_0px_rgba(0,0,0,0.1)]',
+                  fieldRowCls,
+                  'w-full justify-between cursor-pointer',
+                  isDropdownOpen(index, 'target') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
                 )}
               >
-                <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
-                    ref={searchInputRef}
-                    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">
-                  {filteredTypes.map(([type, name]) => (
-                    <button
-                      key={type}
-                      type="button"
-                      onClick={() => handleSelectType(index, type as FieldType)}
-                      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',
-                        param.type === type && 'bg-[#EFF0F6] text-[#0265ff]',
-                        transCls,
+                <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">
+                {filteredTargetFields.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.fieldDesc === field.fieldDesc && 'bg-[#EFF0F6] text-[#0265ff]',
+                            transCls,
+                          )}
+                        >
+                          <span className="truncate">{field.fieldDesc}</span>
+                        </button>
                       )}
-                    >
-                      <FieldIcon type={type as FieldType} />
-                      <span className="truncate">{name}</span>
-                    </button>
-                  ))}
-                  {filteredTypes.length === 0 && (
-                    <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
-                      无匹配结果
+                      {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.fieldDesc === child.fieldDesc && 'bg-[#EFF0F6] text-[#0265ff]',
+                            transCls,
+                          )}
+                        >
+                          <span className="truncate">{child.fieldDesc}</span>
+                        </button>
+                      ))}
                     </div>
-                  )}
-                </div>
+                  );
+                })}
+                {filteredTargetFields.length === 0 && (
+                  <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
+                    无匹配结果
+                  </div>
+                )}
               </div>
-            )}
-          </div>
+            </PopoverContent>
+          </Popover>
 
           {/* Delete button */}
           <button

package/src/components/subform-fields-value-checker.tsx

@@ -1,8 +1,6 @@
 import { memo, useCallback, useEffect, useState } from 'react';
-import { FieldType, ValueOf } from '@baishuyun/types';
+import { FieldType, IField } from '@baishuyun/types';
 import { FieldTypeNameMap } from '../const/ui';
-import { ToolUIPart } from 'ai';
-import { FieldsTools } from '@baishuyun/agents';
 import { toHumanReadable } from '../lib/utils';
 import { Collapsible, CollapsibleContent } from './collapsible';
 import LineChecker from './line-checker';
@@ -47,11 +45,11 @@ const SubFieldChecker = memo(
   }: {
     onCheckedChange: (
       checked: boolean,
-      field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>
+      field: IField,
     ) => void;
     readonly?: boolean;
     streaming?: boolean;
-    field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+    field: IField;
   }) => {
     const { widget, label } = field;
     if (!widget) {
@@ -100,12 +98,12 @@ const SubFieldChecker = memo(
   }
 );
 
-type F = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+type F = IField;
 
 interface generatedField {
   label: string;
   fieldName: string;
-  fieldType: string;
+  fieldType: FieldType;
   value: any;
 }
 
@@ -127,15 +125,16 @@ export const SubformFieldsValueChecker = ({
   readonly,
 }: {
   onChange: (p: onSubformFieldChangeParam) => void;
-  subformField: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  subformField: IField;
   streaming?: boolean;
   readonly?: boolean;
 }) => {
-  if (!subformField.widget.value || !subformField.widget.value.length) {
+  const subformValue = subformField.widget?.value;
+  if (!Array.isArray(subformValue) || subformValue.length === 0) {
     return null;
   }
 
-  const subformRecords = subformField.widget.value;
+  const subformRecords = subformValue as generatedField[][];
 
   // 默认展开
   const [openAll, setOpenAll] = useState(true);
@@ -169,7 +168,7 @@ export const SubformFieldsValueChecker = ({
                           field,
                           row,
                           col,
-                          parentFieldName: subformField.widget.widgetName,
+                          parentFieldName: subformField.widget?.widgetName ?? "",
                         });
                       }}
                     />