@baishuyun/ai-design 2.0.18 → 2.0.20

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @baishuyun/ai-design
 
+## 2.0.20
+
+### Patch Changes
+
+- multiple select
+
+## 2.0.19
+
+### Patch Changes
+
+- fix attachment params
+- Updated dependencies
+  - @baishuyun/types@3.0.19
+  - @baishuyun/ai-feat-utils@2.0.19
+
 ## 2.0.18
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.0.18",
+  "version": "2.0.20",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -60,8 +60,8 @@
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/ai-feat-utils": "2.0.18",
-    "@baishuyun/types": "3.0.18"
+    "@baishuyun/ai-feat-utils": "2.0.19",
+    "@baishuyun/types": "3.0.19"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -83,9 +83,9 @@
     "typescript": "^5.5.0",
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
-    "@baishuyun/types": "3.0.18",
-    "@baishuyun/tailwind-config": "3.0.9",
-    "@baishuyun/typescript-config": "2.0.9"
+    "@baishuyun/typescript-config": "2.0.9",
+    "@baishuyun/types": "3.0.19",
+    "@baishuyun/tailwind-config": "3.0.9"
   },
   "keywords": [],
   "author": "",

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

@@ -19,6 +19,22 @@ const FolderIcon = () => (
   </svg>
 );
 
+/** Close X icon (12x12) for chip dismiss in multiple mode */
+const CloseIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
+    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
+  </svg>
+);
+
+/** More dots icon (12x12) for overflow chip in multiple mode */
+const MoreIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
+    <circle cx="2" cy="6" r="1" fill="#999999" />
+    <circle cx="6" cy="6" r="1" fill="#999999" />
+    <circle cx="10" cy="6" r="1" fill="#999999" />
+  </svg>
+);
+
 // ── Types ─────────────────────────────────────────────────────────
 
 export interface FormSelectItem {
@@ -31,21 +47,30 @@ export interface FormSelectItem {
 }
 
 export interface FormSelectChangeResult {
+  /** Set in single-select mode. */
   form?: FormSelectItem;
+  /** Set in multiple mode — the full selection after the change. */
+  forms?: FormSelectItem[];
 }
 
 export interface FormSelectProps {
   items: FormSelectItem[];
-  value?: string;
-  defaultValue?: string;
+  /** Enable multi-select mode. Default false (single-select). */
+  multiple?: boolean;
+  /** Controlled value — form id in single mode, form id array in multiple mode. */
+  value?: string | string[];
+  /** Uncontrolled default value — same shape as `value`. */
+  defaultValue?: string | string[];
   onChange?: (result: FormSelectChangeResult) => void;
   placeholder?: string;
   disabled?: boolean;
   className?: string;
-  /** Allow selecting an empty value as the first option. */
+  /** Allow selecting an empty value as the first option. Only effective in single mode. */
   allowEmpty?: boolean;
   /** Label for the empty option. Default "无". */
   emptyLabel?: string;
+  /** Max visible chips in the trigger in multiple mode (default 4). */
+  maxVisibleChips?: number;
 }
 
 // ── Tree types ────────────────────────────────────────────────────
@@ -192,12 +217,12 @@ function FormEntryItem({
 
 function FormTreeItemNode({
   item,
-  selectedFormId,
+  selectedIds,
   onSelect,
 }: {
   item: FormTreeItem;
-  selectedFormId: string | undefined;
-  onSelect: (result: FormSelectChangeResult) => void;
+  selectedIds: Set<string>;
+  onSelect: (item: FormSelectItem) => void;
 }) {
   const [expanded, setExpanded] = useState(true);
 
@@ -232,7 +257,7 @@ function FormTreeItemNode({
             <FormTreeItemNode
               key={child.id}
               item={child}
-              selectedFormId={selectedFormId}
+              selectedIds={selectedIds}
               onSelect={onSelect}
             />
           ))}
@@ -244,10 +269,10 @@ function FormTreeItemNode({
     <FormEntryItem
       item={item}
       depth={item.depth}
-      isSelected={selectedFormId === item.id}
+      isSelected={selectedIds.has(item.id)}
       onClick={() => {
         if (item.form) {
-          onSelect({ form: item.form });
+          onSelect(item.form);
         }
       }}
     />
@@ -260,7 +285,7 @@ function FormPopover({
   searchQuery,
   onSearchChange,
   tree,
-  selectedFormId,
+  selectedIds,
   onSelect,
   hasSearch,
   allowEmpty,
@@ -270,8 +295,8 @@ function FormPopover({
   searchQuery: string;
   onSearchChange: (v: string) => void;
   tree: FormTreeItem[];
-  selectedFormId: string | undefined;
-  onSelect: (result: FormSelectChangeResult) => void;
+  selectedIds: Set<string>;
+  onSelect: (item: FormSelectItem) => void;
   hasSearch: boolean;
   allowEmpty: boolean;
   emptyLabel: string;
@@ -301,7 +326,7 @@ function FormPopover({
         <div
           className={cn(
             'flex items-center h-[34px] px-[10px] cursor-pointer rounded-[4px] shrink-0',
-            !selectedFormId ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
+            selectedIds.size === 0 ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
             transCls,
           )}
           onClick={onEmptySelect}
@@ -317,7 +342,7 @@ function FormPopover({
             <FormTreeItemNode
               key={node.id}
               item={node}
-              selectedFormId={selectedFormId}
+              selectedIds={selectedIds}
               onSelect={onSelect}
             />
           ))
@@ -341,6 +366,7 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
   (
     {
       items,
+      multiple = false,
       value: controlledValue,
       defaultValue,
       onChange,
@@ -349,14 +375,15 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
       className,
       allowEmpty = false,
       emptyLabel = '无',
+      maxVisibleChips = 4,
     },
     ref,
   ) => {
     const [isOpen, setIsOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
-    const [internalValue, setInternalValue] = useState<string | undefined>(
-      defaultValue,
-    );
+    const [internalValue, setInternalValue] = useState<
+      string | string[] | undefined
+    >(defaultValue);
     const triggerRef = useRef<HTMLDivElement>(null);
     const popoverRef = useRef<HTMLDivElement>(null);
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
@@ -364,19 +391,41 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
     const { popoverStyle, updatePopoverPosition } =
       useSelectPopoverPosition(triggerRef);
 
-    const selectedFormId = controlledValue ?? internalValue;
+    const resolvedValue = controlledValue ?? internalValue;
+
+    const selectedIds = useMemo(() => {
+      if (Array.isArray(resolvedValue)) {
+        return new Set(resolvedValue);
+      }
+      return new Set(resolvedValue ? [resolvedValue] : []);
+    }, [resolvedValue]);
+
+    const selectedFormId = Array.isArray(resolvedValue)
+      ? undefined
+      : resolvedValue;
 
     // Build the form tree
     const tree = useMemo(() => {
       return buildFormTree(items, searchQuery);
     }, [items, searchQuery]);
 
-    // Find selected form
+    // Find selected form (single mode trigger display)
     const selectedForm = useMemo(() => {
       if (!selectedFormId) return null;
       return items.find((item) => item.id === selectedFormId && item.itemType !== 'group') ?? null;
     }, [items, selectedFormId]);
 
+    // Selected forms (multiple mode chips)
+    const selectedForms = useMemo(() => {
+      if (!multiple) return [];
+      return items.filter(
+        (item) => selectedIds.has(item.id) && item.itemType !== 'group',
+      );
+    }, [multiple, items, selectedIds]);
+
+    const visibleChips = selectedForms.slice(0, maxVisibleChips);
+    const overflowCount = selectedForms.length - visibleChips.length;
+
     const hasSearch = searchQuery.trim().length > 0;
 
     const setTriggerRef = useCallback((node: HTMLDivElement | null) => {
@@ -424,13 +473,41 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
       }
     }, [disabled, isOpen, handleClose, updatePopoverPosition]);
 
+    // Single mode: pick one and close. Multiple mode: toggle and stay open.
     const handleSelect = useCallback(
-      (result: FormSelectChangeResult) => {
-        setInternalValue(result.form?.id || '');
-        onChange?.(result);
-        handleClose();
+      (form: FormSelectItem) => {
+        if (!multiple) {
+          setInternalValue(form.id);
+          onChange?.({ form });
+          handleClose();
+          return;
+        }
+        const nextIds = selectedIds.has(form.id)
+          ? [...selectedIds].filter((id) => id !== form.id)
+          : [...selectedIds, form.id];
+        setInternalValue(nextIds);
+        onChange?.({
+          forms: items.filter(
+            (item) => nextIds.includes(item.id) && item.itemType !== 'group',
+          ),
+        });
+      },
+      [multiple, selectedIds, items, onChange, handleClose],
+    );
+
+    const handleRemoveChip = useCallback(
+      (formId: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (disabled) return;
+        const nextIds = [...selectedIds].filter((id) => id !== formId);
+        setInternalValue(nextIds);
+        onChange?.({
+          forms: items.filter(
+            (item) => nextIds.includes(item.id) && item.itemType !== 'group',
+          ),
+        });
       },
-      [onChange, handleClose],
+      [disabled, selectedIds, items, onChange],
     );
 
     const handleEmptySelect = useCallback(() => {
@@ -534,6 +611,8 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
 
     // ── Render ────────────────────────────────────────────────────
 
+    const hasMultiSelection = multiple && selectedForms.length > 0;
+
     return (
       <div ref={ref} className={cn('relative inline-flex min-w-0 w-full', className)}>
         {/* Trigger */}
@@ -550,23 +629,54 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
           )}
           onClick={handleToggle}
         >
-          <span className="flex items-center gap-[6px] min-w-0 flex-1">
-            {selectedForm ? (
-              <>
-                <i
-                  className={getFormIconClass(selectedForm.icon ?? 0)}
-                  style={{ fontSize: 16, lineHeight: 1 }}
-                />
-                <span className="text-[14px] text-[#030303] leading-[normal] truncate">
-                  {selectedForm.name}
+          {hasMultiSelection ? (
+            <span className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+              {visibleChips.map((form) => (
+                <span
+                  key={form.id}
+                  className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0 max-w-[160px]"
+                  onClick={(e) => handleRemoveChip(form.id, e)}
+                >
+                  <i
+                    className={getFormIconClass(form.icon ?? 0)}
+                    style={{ fontSize: 14, lineHeight: 1 }}
+                  />
+                  <span className="text-[14px] text-[#030303] truncate leading-[normal]">
+                    {form.name}
+                  </span>
+                  <span className="cursor-pointer flex items-center shrink-0 hover:bg-[#EFF0F6]">
+                    <CloseIcon />
+                  </span>
                 </span>
-              </>
-            ) : (
-              <span className="text-[14px] text-[#999999] leading-[normal] truncate">
-                {allowEmpty ? emptyLabel : placeholder}
-              </span>
-            )}
-          </span>
+              ))}
+              {overflowCount > 0 && (
+                <span className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0">
+                  <span className="text-[14px] text-[#030303] leading-[normal]">
+                    +{overflowCount}
+                  </span>
+                  <MoreIcon />
+                </span>
+              )}
+            </span>
+          ) : (
+            <span className="flex items-center gap-[6px] min-w-0 flex-1">
+              {selectedForm ? (
+                <>
+                  <i
+                    className={getFormIconClass(selectedForm.icon ?? 0)}
+                    style={{ fontSize: 16, lineHeight: 1 }}
+                  />
+                  <span className="text-[14px] text-[#030303] leading-[normal] truncate">
+                    {selectedForm.name}
+                  </span>
+                </>
+              ) : (
+                <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                  {allowEmpty && !multiple ? emptyLabel : placeholder}
+                </span>
+              )}
+            </span>
+          )}
           <span
             className={cn(
               'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
@@ -586,10 +696,10 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
                 searchQuery={searchQuery}
                 onSearchChange={setSearchQuery}
                 tree={tree}
-                selectedFormId={selectedFormId}
+                selectedIds={selectedIds}
                 onSelect={handleSelect}
                 hasSearch={hasSearch}
-                allowEmpty={allowEmpty}
+                allowEmpty={allowEmpty && !multiple}
                 emptyLabel={emptyLabel}
                 onEmptySelect={handleEmptySelect}
               />

package/src/lib/utils.ts

@@ -1,6 +1,6 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { FieldType, IAddress, ILocation, IField } from '@baishuyun/types';
+import { FieldType, IAddress, ILocation, IField, ILinkedData } from '@baishuyun/types';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -80,6 +80,10 @@ export const toHumanReadable = (value: unknown, type: FieldType): string | unkno
     return `经度: ${lnglatXY[0] || ''}, 纬度: ${lnglatXY[1] || ''}`;
   }
 
+  if (type === 'linkdata') {
+    return (value as ILinkedData).label;
+  }
+
   if (Array.isArray(value)) {
     return value.join(', ');
   }

package/src/stories/FormSelect.stories.tsx

@@ -140,3 +140,83 @@ export const Interactive: Story = {
     placeholder: '请选择表单',
   },
 };
+
+export const Multiple: Story = {
+  args: {
+    items: mockFormItems,
+    multiple: true,
+    placeholder: '请选择表单（可多选）',
+  },
+};
+
+export const MultipleWithSelection: Story = {
+  args: {
+    items: mockFormItems,
+    multiple: true,
+    defaultValue: ['form3', 'form4', 'form7'],
+    placeholder: '请选择表单（可多选）',
+  },
+};
+
+export const MultipleWithOverflow: Story = {
+  args: {
+    items: manyFormItems,
+    multiple: true,
+    defaultValue: ['form_0', 'form_1', 'form_2', 'form_3', 'form_4', 'form_5'],
+    maxVisibleChips: 2,
+    placeholder: '请选择表单（可多选）',
+  },
+};
+
+export const MultipleDisabled: Story = {
+  args: {
+    items: mockFormItems,
+    multiple: true,
+    defaultValue: ['form1', 'form4'],
+    disabled: true,
+    placeholder: '请选择表单（可多选）',
+  },
+};
+
+export const MultipleInteractive: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<string[]>(['form1']);
+    const [selected, setSelected] = useState<FormSelectChangeResult | null>(null);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <FormSelect
+          {...args}
+          multiple
+          value={value}
+          onChange={(result) => {
+            setSelected(result);
+            setValue(result.forms?.map((f) => f.id) ?? []);
+          }}
+        />
+        <div
+          style={{
+            padding: 12,
+            background: '#F5F7FA',
+            borderRadius: 8,
+            fontSize: 14,
+          }}
+        >
+          <div>
+            <strong>已选数量:</strong> {selected?.forms?.length ?? 1}
+          </div>
+          <div>
+            <strong>已选表单:</strong>{' '}
+            {(selected?.forms ?? [])
+              .map((f) => `${f.name}(${f.id})`)
+              .join('、') || 'form1'}
+          </div>
+        </div>
+      </div>
+    );
+  },
+  args: {
+    items: mockFormItems,
+    placeholder: '请选择表单（可多选）',
+  },
+};