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

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

@@ -1,291 +1,291 @@
-import { useState, useCallback, useRef } from 'react';
-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 { FormActionFieldEditPreference } from '@baishuyun/types';
-
-// ── Inline SVG Icons ──────────────────────────────────────────────
-
-const RadioUnchecked = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="shrink-0">
-    <circle cx="8" cy="8" r="7.5" stroke="#CCCCCC" />
-  </svg>
-);
-
-const RadioChecked = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="shrink-0">
-    <circle cx="8" cy="8" r="7.5" stroke="#0265FF" />
-    <circle cx="8" cy="8" r="4" fill="#0265FF" />
-  </svg>
-);
-
-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>
-);
-
-const DropdownChevron = ({ open }: { open: boolean }) => (
-  <svg
-    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" />
-  </svg>
-);
-
-// ── Chip Component ─────────────────────────────────────────────────
-
-function FieldChip({ label, onRemove }: { label: string; onRemove: () => void }) {
-  return (
-    <span
-      className={cn(
-        'bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px]',
-        'flex items-center gap-[4px] shrink-0'
-      )}
-    >
-      <span className="text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
-        {label}
-      </span>
-      <span onClick={(e) => {
-        e.stopPropagation();
-        onRemove?.();
-      }} className="flex items-center cursor-pointer">
-        <CloseIcon />
-      </span>
-    </span>
-  );
-}
-
-// ── Types ─────────────────────────────────────────────────────────
-
-export interface FieldEditPreferenceSelectProps {
-  fields: IField[];
-  value?: FormActionFieldEditPreference;
-  defaultValue?: FormActionFieldEditPreference;
-  onChange?: (value: FormActionFieldEditPreference) => void;
-  disabled?: boolean;
-  className?: string;
-}
-
-// ── Main Component ────────────────────────────────────────────────
-
-export const FieldEditPreferenceSelect = ({
-  fields,
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  disabled = false,
-  className,
-}: FieldEditPreferenceSelectProps) => {
-  const [open, setOpen] = useState(false);
-  const [internalValue, setInternalValue] = useState<FormActionFieldEditPreference>(
-    defaultValue ?? 'edit_any_field'
-  );
-  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
-
-  const currentValue = controlledValue !== undefined ? controlledValue : internalValue;
-  const mode: 'any' | 'specified' = typeof currentValue === 'string' ? 'any' : 'specified';
-  const selectedFields: IField[] =
-    mode === 'specified'
-      ? (currentValue as { type: 'edit_any_specified_field'; fields: IField[] }).fields
-      : [];
-
-  const setValue = useCallback(
-    (newValue: FormActionFieldEditPreference) => {
-      if (controlledValue === undefined) {
-        setInternalValue(newValue);
-      }
-      onChange?.(newValue);
-    },
-    [controlledValue, onChange]
-  );
-
-  const handleModeChange = useCallback(
-    (newMode: 'any' | 'specified') => {
-      if (disabled) return;
-      if (newMode === 'any') {
-        setValue('edit_any_field');
-      } else {
-        setValue({ type: 'edit_any_specified_field', fields: selectedFields });
-      }
-    },
-    [disabled, setValue, selectedFields]
-  );
-
-  const handleAddField = useCallback(
-    (field: IField, _nodeKey: string) => {
-      if (selectedFields.some((f) => f.label === field.label)) {
-        setOpen(false);
-        return;
-      }
-      const newFields = [...selectedFields, field];
-      setValue({ type: 'edit_any_specified_field', fields: newFields });
-      setOpen(false);
-    },
-    [setValue, selectedFields]
-  );
-
-  const handleRemoveField = useCallback(
-    (index: number) => {
-      const newFields = selectedFields.filter((_, i) => i !== index);
-      setValue({ type: 'edit_any_specified_field', fields: newFields });
-    },
-    [setValue, selectedFields]
-  );
-
-  const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
-    triggerRef.current = node;
-    if (!node) {
-      setPortalContainer(null);
-      return;
-    }
-    const rootNode = node.getRootNode();
-    if (rootNode instanceof ShadowRoot) {
-      const existing = rootNode.querySelector<HTMLElement>(
-        '[data-bs-field-edit-preference-portal]'
-      );
-      if (existing) {
-        setPortalContainer(existing);
-        return;
-      }
-      const container = document.createElement('div');
-      container.setAttribute('data-bs-field-edit-preference-portal', 'true');
-      rootNode.appendChild(container);
-      setPortalContainer(container);
-    } else {
-      setPortalContainer(null);
-    }
-  }, []);
-
-  // ── Render ──────────────────────────────────────────────────────
-
-  const isAny = mode === 'any';
-  const isSpecified = mode === 'specified';
-
-  return (
-    <div
-      className={cn(
-        'inline-flex items-start gap-[30px] min-w-0 w-full',
-        disabled && 'opacity-50 cursor-not-allowed',
-        className
-      )}
-    >
-      {/* "任意字段" option — independent bordered box */}
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => handleModeChange('any')}
-        className={cn(
-          'flex items-center gap-[6px] h-[34px] pl-[10px] pr-[20px] shrink-0 w-[200px]',
-          'bg-white border rounded-[4px]',
-          'shrink-0',
-          'text-left cursor-pointer',
-          isAny ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
-          transCls
-        )}
-      >
-        {isAny ? <RadioChecked /> : <RadioUnchecked />}
-        <span className="text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
-          任意字段
-        </span>
-      </button>
-
-      {/* "任意指定字段" option — compound control when selected */}
-      <div
-        className={cn(
-          'flex items-stretch bg-white border rounded-[4px] min-w-0 flex-1',
-          'grow min-w-0',
-          isSpecified ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
-          transCls
-        )}
-      >
-        {/* Label portion — clickable to switch mode */}
-        <button
-          type="button"
-          disabled={disabled}
-          onClick={() => handleModeChange('specified')}
-          className={cn(
-            'flex items-center gap-[6px] h-[32px] p-[10px] shrink-0 w-[200px]',
-            'text-left cursor-pointer bg-white rounded-[4px]',
-            transCls
-          )}
-        >
-          {isSpecified ? <RadioChecked /> : <RadioUnchecked />}
-          <span className="text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
-            任意指定字段
-          </span>
-        </button>
-
-        {/* Chips area + dropdown */}
-        <div className="flex items-center gap-[4px] pl-[4px] pr-[10px] py-[7px] min-w-0 flex-1 bg-white rounded-br-[4px] rounded-tr-[4px] h-[32px] border-l border-[#E0E0E0]">
-          {/* Dropdown trigger */}
-          <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-              <div className="flex items-center gap-[4px] min-w-0 flex-1">
-              {/* Selected field chips */}
-              <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide" onClick={() => {
-                if (disabled) {
-                  return;
-                }
-
-                setOpen(() => !open);
-              }}>
-                {isSpecified && selectedFields.map((field, index) => (
-                  <FieldChip
-                    key={index}
-                    label={field.label}
-                    onRemove={() => handleRemoveField(index)}
-                  />
-                ))}
-                {isSpecified && selectedFields.length === 0 && (
-                  <span className="text-[14px] text-[#999999] leading-[normal] whitespace-nowrap">
-                    请选择字段
-                  </span>
-                )}
-                {!isSpecified && (
-                  <span className="text-[14px] text-[#999999] leading-[normal] whitespace-nowrap">
-                    请选择字段
-                  </span>
-                )}
-              </div>
-
-              <button
-                ref={setTriggerRef}
-                type="button"
-                disabled={disabled}
-                className={cn(
-                  'flex items-center justify-center shrink-0',
-                  'w-[16px] h-[16px]',
-                  'cursor-pointer',
-                  disabled && 'cursor-not-allowed'
-                )}
-              >
-                <DropdownChevron open={open} />
-              </button>
-              </div>
-            </PopoverTrigger>
-            <PopoverContent
-              align="start"
-              sideOffset={4}
-              portalContainer={portalContainer}
-              className="!border-0 !p-0"
-              style={{ minWidth: 240 }}
-            >
-              <FieldSelectPopover
-                fields={fields}
-                onSelect={handleAddField}
-                searchPlaceholder="输入字段名称来搜索"
-                showTypeBadge
-              />
-            </PopoverContent>
-          </Popover>
-        </div>
-      </div>
-    </div>
-  );
-};
+import { useState, useCallback, useRef } from 'react';
+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 { FormActionFieldEditPreference } from '@baishuyun/types';
+
+// ── Inline SVG Icons ──────────────────────────────────────────────
+
+const RadioUnchecked = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="shrink-0">
+    <circle cx="8" cy="8" r="7.5" stroke="#CCCCCC" />
+  </svg>
+);
+
+const RadioChecked = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="shrink-0">
+    <circle cx="8" cy="8" r="7.5" stroke="#0265FF" />
+    <circle cx="8" cy="8" r="4" fill="#0265FF" />
+  </svg>
+);
+
+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>
+);
+
+const DropdownChevron = ({ open }: { open: boolean }) => (
+  <svg
+    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" />
+  </svg>
+);
+
+// ── Chip Component ─────────────────────────────────────────────────
+
+function FieldChip({ label, onRemove }: { label: string; onRemove: () => void }) {
+  return (
+    <span
+      className={cn(
+        'bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px]',
+        'flex items-center gap-[4px] shrink-0'
+      )}
+    >
+      <span className="text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+        {label}
+      </span>
+      <span onClick={(e) => {
+        e.stopPropagation();
+        onRemove?.();
+      }} className="flex items-center cursor-pointer">
+        <CloseIcon />
+      </span>
+    </span>
+  );
+}
+
+// ── Types ─────────────────────────────────────────────────────────
+
+export interface FieldEditPreferenceSelectProps {
+  fields: IField[];
+  value?: FormActionFieldEditPreference;
+  defaultValue?: FormActionFieldEditPreference;
+  onChange?: (value: FormActionFieldEditPreference) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+// ── Main Component ────────────────────────────────────────────────
+
+export const FieldEditPreferenceSelect = ({
+  fields,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  disabled = false,
+  className,
+}: FieldEditPreferenceSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<FormActionFieldEditPreference>(
+    defaultValue ?? 'edit_any_field'
+  );
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+
+  const currentValue = controlledValue !== undefined ? controlledValue : internalValue;
+  const mode: 'any' | 'specified' = typeof currentValue === 'string' ? 'any' : 'specified';
+  const selectedFields: IField[] =
+    mode === 'specified'
+      ? (currentValue as { type: 'edit_any_specified_field'; fields: IField[] }).fields
+      : [];
+
+  const setValue = useCallback(
+    (newValue: FormActionFieldEditPreference) => {
+      if (controlledValue === undefined) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [controlledValue, onChange]
+  );
+
+  const handleModeChange = useCallback(
+    (newMode: 'any' | 'specified') => {
+      if (disabled) return;
+      if (newMode === 'any') {
+        setValue('edit_any_field');
+      } else {
+        setValue({ type: 'edit_any_specified_field', fields: selectedFields });
+      }
+    },
+    [disabled, setValue, selectedFields]
+  );
+
+  const handleAddField = useCallback(
+    (field: IField, _nodeKey: string) => {
+      if (selectedFields.some((f) => f.label === field.label)) {
+        setOpen(false);
+        return;
+      }
+      const newFields = [...selectedFields, field];
+      setValue({ type: 'edit_any_specified_field', fields: newFields });
+      setOpen(false);
+    },
+    [setValue, selectedFields]
+  );
+
+  const handleRemoveField = useCallback(
+    (index: number) => {
+      const newFields = selectedFields.filter((_, i) => i !== index);
+      setValue({ type: 'edit_any_specified_field', fields: newFields });
+    },
+    [setValue, selectedFields]
+  );
+
+  const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
+    triggerRef.current = node;
+    if (!node) {
+      setPortalContainer(null);
+      return;
+    }
+    const rootNode = node.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>(
+        '[data-bs-field-edit-preference-portal]'
+      );
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-field-edit-preference-portal', 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+    } else {
+      setPortalContainer(null);
+    }
+  }, []);
+
+  // ── Render ──────────────────────────────────────────────────────
+
+  const isAny = mode === 'any';
+  const isSpecified = mode === 'specified';
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-start gap-[30px] min-w-0 w-full',
+        disabled && 'opacity-50 cursor-not-allowed',
+        className
+      )}
+    >
+      {/* "任意字段" option — independent bordered box */}
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => handleModeChange('any')}
+        className={cn(
+          'flex items-center gap-[6px] h-[34px] pl-[10px] pr-[20px] shrink-0 w-[200px]',
+          'bg-white border rounded-[4px]',
+          'shrink-0',
+          'text-left cursor-pointer',
+          isAny ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
+          transCls
+        )}
+      >
+        {isAny ? <RadioChecked /> : <RadioUnchecked />}
+        <span className="text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+          任意字段
+        </span>
+      </button>
+
+      {/* "任意指定字段" option — compound control when selected */}
+      <div
+        className={cn(
+          'flex items-stretch bg-white border rounded-[4px] min-w-0 flex-1',
+          'grow min-w-0',
+          isSpecified ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
+          transCls
+        )}
+      >
+        {/* Label portion — clickable to switch mode */}
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => handleModeChange('specified')}
+          className={cn(
+            'flex items-center gap-[6px] h-[32px] p-[10px] shrink-0 w-[200px]',
+            'text-left cursor-pointer bg-white rounded-[4px]',
+            transCls
+          )}
+        >
+          {isSpecified ? <RadioChecked /> : <RadioUnchecked />}
+          <span className="text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+            任意指定字段
+          </span>
+        </button>
+
+        {/* Chips area + dropdown */}
+        <div className="flex items-center gap-[4px] pl-[4px] pr-[10px] py-[7px] min-w-0 flex-1 bg-white rounded-br-[4px] rounded-tr-[4px] h-[32px] border-l border-[#E0E0E0]">
+          {/* Dropdown trigger */}
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <div className="flex items-center gap-[4px] min-w-0 flex-1">
+              {/* Selected field chips */}
+              <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide" onClick={() => {
+                if (disabled) {
+                  return;
+                }
+
+                setOpen(() => !open);
+              }}>
+                {isSpecified && selectedFields.map((field, index) => (
+                  <FieldChip
+                    key={index}
+                    label={field.label}
+                    onRemove={() => handleRemoveField(index)}
+                  />
+                ))}
+                {isSpecified && selectedFields.length === 0 && (
+                  <span className="text-[14px] text-[#999999] leading-[normal] whitespace-nowrap">
+                    请选择字段
+                  </span>
+                )}
+                {!isSpecified && (
+                  <span className="text-[14px] text-[#999999] leading-[normal] whitespace-nowrap">
+                    请选择字段
+                  </span>
+                )}
+              </div>
+
+              <button
+                ref={setTriggerRef}
+                type="button"
+                disabled={disabled}
+                className={cn(
+                  'flex items-center justify-center shrink-0',
+                  'w-[16px] h-[16px]',
+                  'cursor-pointer',
+                  disabled && 'cursor-not-allowed'
+                )}
+              >
+                <DropdownChevron open={open} />
+              </button>
+              </div>
+            </PopoverTrigger>
+            <PopoverContent
+              align="start"
+              sideOffset={4}
+              portalContainer={portalContainer}
+              className="!border-0 !p-0"
+              style={{ minWidth: 240 }}
+            >
+              <FieldSelectPopover
+                fields={fields}
+                onSelect={handleAddField}
+                searchPlaceholder="输入字段名称来搜索"
+                showTypeBadge
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+    </div>
+  );
+};