@baishuyun/ai-design 2.1.0-alpha.4 → 2.1.0

package/src/components/agent-helper/app-select/index.tsx

@@ -6,6 +6,7 @@ import { SquareChecker } from '../../square-checker';
 import type { IAppGroup, IAppGroupItem } from '@baishuyun/types';
 import { AppIcon } from '../../font-icon';
 import { SearchIcon } from '../../bs-icons';
+import classNames from 'classnames';
 
 // ── Tree Node Type ────────────────────────────────────────────────
 
@@ -41,7 +42,10 @@ export function groupsToAppTreeNodes(groups: IAppGroup[]): AppTreeNode[] {
 /** Folder/group icon (16x16) */
 const FolderIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-    <path d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z" fill="#6F81BD"/>
+    <path
+      d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z"
+      fill="#6F81BD"
+    />
   </svg>
 );
 
@@ -70,11 +74,20 @@ const FolderIcon = () => (
 /** Collapse/expand toggle (18x18) — shown on expandable parent nodes */
 const ToggleIcon = ({ expanded }: { expanded: boolean }) => (
   <svg
-    width="18" height="18" viewBox="0 0 18 18" fill="none"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
     className={cn('shrink-0', transCls)}
     style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
   >
-    <path d="M6 8L9 11L12 8" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    <path
+      d="M6 8L9 11L12 8"
+      stroke="#666666"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 );
 
@@ -97,11 +110,20 @@ const MoreIcon = () => (
 /** Dropdown chevron in trigger — matches Figma trigger icon */
 const DropdownChevron = ({ open }: { open: boolean }) => (
   <svg
-    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
     className={cn('shrink-0', transCls)}
     style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
   >
-    <path d="M4 6L8 10L12 6" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    <path
+      d="M4 6L8 10L12 6"
+      stroke="#666666"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 );
 
@@ -130,6 +152,7 @@ export interface AppSelectProps {
   maxVisibleChips?: number;
   /** Additional className */
   className?: string;
+  contentCls?: string;
   /** Show a "全部应用" (All Apps) item at the top. Only effective in single mode. */
   showAll?: boolean;
   /** Allow selecting an empty value as the first option. Only effective in single mode. */
@@ -137,6 +160,8 @@ export interface AppSelectProps {
   /** Label for the empty option. Default "无". */
   emptyLabel?: string;
   popoverContentOnly?: boolean; // for testing: render only the popover content without the trigger
+
+  disableMaxHeight?: boolean;
 }
 
 // ── Helpers ───────────────────────────────────────────────────────
@@ -171,6 +196,8 @@ export const AppSelect = ({
   disabled = false,
   maxVisibleChips = 4,
   className,
+  contentCls,
+  disableMaxHeight,
 }: AppSelectProps) => {
   const [open, setOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -181,6 +208,11 @@ export const AppSelect = ({
   const [triggerWidth, setTriggerWidth] = useState<number>(0);
   const triggerBtnRef = useRef<HTMLButtonElement | null>(null);
 
+  const maxTreeHeightCls = classNames({
+    'max-h-[400px]': !disableMaxHeight,
+    'max-h-full': disableMaxHeight,
+  });
+
   // Expanded node IDs (only nodes with children can be expanded)
   const [expandedIds, setExpandedIds] = useState<Set<string>>(() => {
     // Start with root nodes expanded
@@ -213,7 +245,7 @@ export const AppSelect = ({
 
   // Selected labels for trigger
   const selectedLabels = useMemo(() => {
-    const ids = Array.isArray(resolvedValue) ? resolvedValue : (resolvedValue ? [resolvedValue] : []);
+    const ids = Array.isArray(resolvedValue) ? resolvedValue : resolvedValue ? [resolvedValue] : [];
     return ids.map((id) => nodeMap.get(id)?.label ?? id);
   }, [resolvedValue, nodeMap]);
 
@@ -236,7 +268,10 @@ export const AppSelect = ({
         const labelMatch = node?.label?.toLowerCase().includes(q);
         const filteredChildren = node.children ? filterTree(node.children) : [];
         if (labelMatch || filteredChildren.length > 0) {
-          result.push({ ...node, children: filteredChildren.length > 0 ? filteredChildren : node.children });
+          result.push({
+            ...node,
+            children: filteredChildren.length > 0 ? filteredChildren : node.children,
+          });
         }
       }
       return result;
@@ -249,11 +284,17 @@ export const AppSelect = ({
   const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
     triggerBtnRef.current = node;
     if (node) setTriggerWidth(node.offsetWidth);
-    if (!node) { setPortalContainer(null); return; }
+    if (!node) {
+      setPortalContainer(null);
+      return;
+    }
     const rootNode = node.getRootNode();
     if (rootNode instanceof ShadowRoot) {
       const existing = rootNode.querySelector<HTMLElement>('[data-bs-app-select-portal]');
-      if (existing) { setPortalContainer(existing); return; }
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
       const container = document.createElement('div');
       container.setAttribute('data-bs-app-select-portal', 'true');
       rootNode.appendChild(container);
@@ -354,9 +395,7 @@ export const AppSelect = ({
               'flex items-center gap-[6px] w-full h-[34px] rounded-[4px] text-left',
               'pr-[10px]',
               transCls,
-              isSelected
-                ? 'bg-[#F0F6FF] text-[#0265FF]'
-                : 'text-[#030303] hover:bg-[#EFF0F6]'
+              isSelected ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]'
             )}
             style={{ paddingLeft: `${leftPad}px`, paddingTop: '10px', paddingBottom: '10px' }}
           >
@@ -376,7 +415,7 @@ export const AppSelect = ({
 
             {/* SquareChecker for multi-select on leaf nodes — always visible */}
             {mode === 'multiple' && !hasChildren && node.type !== 'group' && (
-              <span onClick={(e) => e.stopPropagation()} className='grid place-items-center'>
+              <span onClick={(e) => e.stopPropagation()} className="grid place-items-center">
                 <SquareChecker
                   checked={isSelected}
                   onCheckedChange={() => handleSelect(node.id, node)}
@@ -388,9 +427,7 @@ export const AppSelect = ({
 
           {/* Children (when expanded) */}
           {hasChildren && isExpanded && (
-            <div>
-              {node.children!.map((child) => renderNodeRow(child, depth + 1))}
-            </div>
+            <div>{node.children!.map((child) => renderNodeRow(child, depth + 1))}</div>
           )}
         </div>
       );
@@ -403,70 +440,70 @@ export const AppSelect = ({
   const hasMultiSelection = mode === 'multiple' && multiSelectedLabels.length > 0;
 
   const popoverContent = (
-          <div className="flex flex-col gap-[4px]">
-            {/* Search */}
-            <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
-              <SearchIcon />
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder={searchPlaceholder}
-                className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
-              />
-            </div>
-
-            {/* Empty option */}
-            {allowEmpty && mode === 'single' && !searchQuery.trim() && (
-              <button
-                type="button"
-                onClick={() => {
-                  updateValue('');
-                  setOpen(false);
-                }}
-                className={cn(
-                  'flex items-center w-full h-[34px] rounded-[4px] text-left',
-                  'px-[10px]',
-                  transCls,
-                  'text-[#030303] hover:bg-[#EFF0F6]'
-                )}
-              >
-                <span className="text-[14px] leading-[normal]">{emptyLabel}</span>
-              </button>
-            )}
-
-            {/* "全部应用" item */}
-            {showAll && mode === 'single' && !searchQuery.trim() && (
-              <button
-                type="button"
-                onClick={() => {
-                  updateValue(ALL_APPS_VALUE);
-                  setOpen(false);
-                }}
-                className={cn(
-                  'flex items-center w-full h-[34px] rounded-[4px] text-left',
-                  'px-[10px]',
-                  transCls,
-                  selectedIds.has(ALL_APPS_VALUE)
-                    ? 'bg-[#F0F6FF] text-[#0265FF]'
-                    : 'text-[#030303] hover:bg-[#EFF0F6]'
-                )}
-              >
-                <span className="text-[14px] leading-[normal]">全部应用</span>
-              </button>
-            )}
-
-            {/* Tree */}
-            <div className="max-h-[400px] overflow-y-auto">
-              {filteredNodes.length > 0 ? (
-                filteredNodes.map((node) => renderNodeRow(node, 0))
-              ) : (
-                <div className="flex items-center justify-center h-[60px] text-[12px] text-[#999999]">
-                  {searchQuery.trim() ? '未找到相关应用' : '暂无应用'}
-                </div>
-              )}
-            </div>
+    <div className={classNames('flex min-h-0 flex-col gap-[4px]', contentCls)}>
+      {/* Search */}
+      <div className="flex shrink-0 items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+        <SearchIcon />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={searchPlaceholder}
+          className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
+        />
+      </div>
+
+      {/* Empty option */}
+      {allowEmpty && mode === 'single' && !searchQuery.trim() && (
+        <button
+          type="button"
+          onClick={() => {
+            updateValue('');
+            setOpen(false);
+          }}
+          className={cn(
+            'flex shrink-0 items-center w-full h-[34px] rounded-[4px] text-left',
+            'px-[10px]',
+            transCls,
+            'text-[#030303] hover:bg-[#EFF0F6]'
+          )}
+        >
+          <span className="text-[14px] leading-[normal]">{emptyLabel}</span>
+        </button>
+      )}
+
+      {/* "全部应用" item */}
+      {showAll && mode === 'single' && !searchQuery.trim() && (
+        <button
+          type="button"
+          onClick={() => {
+            updateValue(ALL_APPS_VALUE);
+            setOpen(false);
+          }}
+          className={cn(
+            'flex shrink-0 items-center w-full h-[34px] rounded-[4px] text-left',
+            'px-[10px]',
+            transCls,
+            selectedIds.has(ALL_APPS_VALUE)
+              ? 'bg-[#F0F6FF] text-[#0265FF]'
+              : 'text-[#030303] hover:bg-[#EFF0F6]'
+          )}
+        >
+          <span className="text-[14px] leading-[normal]">全部应用</span>
+        </button>
+      )}
+
+      {/* Tree */}
+      <div className={classNames('min-h-0 overflow-y-auto', maxTreeHeightCls)}>
+        {filteredNodes.length > 0 ? (
+          filteredNodes.map((node) => renderNodeRow(node, 0))
+        ) : (
+          <div className="flex items-center justify-center h-[60px] text-[12px] text-[#999999]">
+            {searchQuery.trim() ? '未找到相关应用' : '暂无应用'}
           </div>
+        )}
+      </div>
+    </div>
   );
 
   if (popoverContentOnly) {
@@ -511,9 +548,7 @@ export const AppSelect = ({
                       <span className="text-[14px] text-[#030303] truncate leading-[normal]">
                         {label}
                       </span>
-                      <span
-                        className="cursor-pointer flex items-center shrink-0 hover:bg-[#EFF0F6]"
-                      >
+                      <span className="cursor-pointer flex items-center shrink-0 hover:bg-[#EFF0F6]">
                         <CloseIcon />
                       </span>
                     </span>
@@ -548,8 +583,8 @@ export const AppSelect = ({
           align="start"
           sideOffset={4}
           portalContainer={portalContainer}
-          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]"
-          style={{ minWidth: triggerWidth || undefined }}
+          className="flex flex-col overflow-hidden !border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]"
+          style={{ minWidth: triggerWidth || undefined, maxHeight: 300 }}
         >
           {popoverContent}
         </PopoverContent>

package/src/components/agent-helper/condition-input/index.tsx

@@ -1,5 +1,12 @@
 import { useState, useCallback, useRef } from 'react';
-import type { IField, ICondition, IConditionItem, quantifier, IFieldValueService, FieldType } from '@baishuyun/types';
+import type {
+  IField,
+  ICondition,
+  IConditionItem,
+  quantifier,
+  IFieldValueService,
+  FieldType,
+} from '@baishuyun/types';
 import { cn } from '../../../lib/utils';
 import { transCls } from '../../../const/ui';
 import { ConditonTriggerDescription } from '../condition-trigger-description';
@@ -23,12 +30,7 @@ function createEmptyItem(): IConditionItem {
   };
 }
 
-const FilterFieldTypeBlacklist: Array<FieldType> = [
-  'button',
-  'separator',
-  'subform',
-  'upload',
-];
+const FilterFieldTypeBlacklist: Array<FieldType> = ['button', 'separator', 'subform'];
 
 export interface ConditionInputProps {
   targetName: string;
@@ -56,11 +58,11 @@ export const ConditionInput = ({
       targetName,
       quantifier: 'all',
       items: [],
-    },
+    }
   ).current;
 
   const fields = allFields.filter(
-    (f) => !FilterFieldTypeBlacklist.includes(f.widget?.type as FieldType),
+    (f) => !FilterFieldTypeBlacklist.includes(f.widget?.type as FieldType)
   );
 
   const [internalValue, setInternalValue] = useState<ICondition>(defaultCondition);
@@ -72,14 +74,14 @@ export const ConditionInput = ({
       if (!isControlled) setInternalValue(next);
       onChange?.(next);
     },
-    [isControlled, onChange],
+    [isControlled, onChange]
   );
 
   const handleQuantifierChange = useCallback(
     (nextQuantifier: quantifier) => {
       updateValue({ ...currentValue, quantifier: nextQuantifier });
     },
-    [currentValue, updateValue],
+    [currentValue, updateValue]
   );
 
   const handleAddCondition = useCallback(() => {
@@ -111,7 +113,7 @@ export const ConditionInput = ({
             'text-[14px] leading-[normal] text-[#0265FF]',
             'hover:opacity-80',
             disabled && 'opacity-50 cursor-not-allowed',
-            transCls,
+            transCls
           )}
         >
           <AddIcon />
@@ -127,7 +129,7 @@ export const ConditionInput = ({
               'text-[14px] leading-[normal] text-[#FF5631]',
               'hover:opacity-80',
               disabled && 'opacity-50 cursor-not-allowed',
-              transCls,
+              transCls
             )}
           >
             删除全部
@@ -150,10 +152,7 @@ ConditionInput.displayName = 'ConditionInput';
 
 // ── BsConditionInput (IBsCondition string ↔ ICondition adapter) ──────────────
 
-function parseBsCondition(
-  str: string | undefined,
-  targetName: string,
-): ICondition {
+function parseBsCondition(str: string | undefined, targetName: string): ICondition {
   if (str) {
     try {
       const parsed = bsConditionParse2Condition(str);
@@ -198,9 +197,7 @@ export const BsConditionInput = ({
   disabled = false,
   className,
 }: BsConditionInputProps) => {
-  const defaultBS = useRef<string>(
-    defaultValue ?? defaultBsConditionString(targetName),
-  ).current;
+  const defaultBS = useRef<string>(defaultValue ?? defaultBsConditionString(targetName)).current;
 
   const [internalValue, setInternalValue] = useState<string>(defaultBS);
   const isControlled = controlledValue !== undefined;
@@ -214,7 +211,7 @@ export const BsConditionInput = ({
       if (!isControlled) setInternalValue(bsStr);
       onChange?.(bsStr);
     },
-    [isControlled, onChange, targetName],
+    [isControlled, onChange, targetName]
   );
 
   return (

package/src/components/agent-helper/condition-item/index.tsx

@@ -183,6 +183,7 @@ export const ConditionItem = ({
         value={currentOperator}
         onChange={handleOperatorChange}
         operators={availableOperators}
+        fieldType={fieldType}
         borderless
         disabled={disabled}
         className="w-[120px] shrink-0"

package/src/components/agent-helper/field-edit-preference-select/index.tsx

@@ -3,7 +3,7 @@ import { cn } from '../../../lib/utils';
 import { transCls } from '../../../const/ui';
 import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
 import { FieldSelectPopover } from '../field-select';
-import type { IField } from '@baishuyun/types';
+import type { IField, ISubformField } from '@baishuyun/types';
 import type { FormActionFieldEditPreference } from '@baishuyun/types';
 
 // ── Inline SVG Icons ──────────────────────────────────────────────
@@ -62,6 +62,29 @@ function FieldChip({ label, onRemove }: { label: string; onRemove: () => void })
 
 // ── Types ─────────────────────────────────────────────────────────
 
+/**
+ * 解析选中的字段：
+ * 顶层字段 nodeKey 无 '.'，原样返回；
+ * 子表单子字段 nodeKey 形如 parent.childWidgetName，从父字段 items 中取出
+ * 子字段，构造 label 为子字段名、widgetName 为完整路径的独立 IField，
+ * 使 FieldChip 显示子字段名而非「子表单」字段名。
+ */
+function resolveSelectedField(field: IField, nodeKey: string): IField {
+  const dotIndex = nodeKey.indexOf('.');
+  if (dotIndex < 0) return field;
+  const childWidgetName = nodeKey.slice(dotIndex + 1);
+  const item = field.widget?.items?.find(
+    (it): it is ISubformField =>
+      'widget' in it && it.widget?.widgetName === childWidgetName
+  );
+  if (!item) return field;
+  return {
+    ...field,
+    label: item.label,
+    widget: { ...item.widget, widgetName: nodeKey },
+  } as IField;
+}
+
 export interface FieldEditPreferenceSelectProps {
   fields: IField[];
   value?: FormActionFieldEditPreference;
@@ -118,12 +141,16 @@ export const FieldEditPreferenceSelect = ({
   );
 
   const handleAddField = useCallback(
-    (field: IField, _nodeKey: string) => {
-      if (selectedFields.some((f) => f.label === field.label)) {
+    (field: IField, nodeKey: string) => {
+      // 子表单子字段解析为独立字段（label=子字段名，widgetName=完整路径）
+      const resolved = resolveSelectedField(field, nodeKey);
+      // 以 widgetName（子字段为完整路径）去重，避免同名子字段误判
+      const resolvedKey = resolved.widget?.widgetName ?? resolved.label;
+      if (selectedFields.some((f) => (f.widget?.widgetName ?? f.label) === resolvedKey)) {
         setOpen(false);
         return;
       }
-      const newFields = [...selectedFields, field];
+      const newFields = [...selectedFields, resolved];
       setValue({ type: 'edit_any_specified_field', fields: newFields });
       setOpen(false);
     },