@baishuyun/ai-design 1.0.3 → 1.0.5

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

@@ -0,0 +1,134 @@
+import { useState, useCallback, useRef } from 'react';
+import type { IField, ICondition, IConditionItem, quantifier, IFieldValueService } from '@baishuyun/types';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { ConditonTriggerDescription } from '../condition-trigger-description';
+import { ConditionGroup } from '../condition-group';
+import { AddIcon } from '../../bs-icons';
+
+function generateId(): string {
+  return `cond-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+function createEmptyItem(): IConditionItem {
+  return {
+    id: generateId(),
+    field: undefined as unknown as IField,
+    operator: 'eq',
+    value: undefined,
+  };
+}
+
+export interface ConditionInputProps {
+  targetName: string;
+  fields: IField[];
+  value?: ICondition;
+  defaultValue?: ICondition;
+  onChange?: (condition: ICondition) => void;
+  service?: IFieldValueService;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const ConditionInput = ({
+  targetName,
+  fields,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  service,
+  disabled = false,
+  className,
+}: ConditionInputProps) => {
+  const defaultCondition = useRef<ICondition>(
+    defaultValue || {
+      targetName,
+      quantifier: 'all',
+      items: [],
+    },
+  ).current;
+
+  const [internalValue, setInternalValue] = useState<ICondition>(defaultCondition);
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  const updateValue = useCallback(
+    (next: ICondition) => {
+      if (!isControlled) setInternalValue(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange],
+  );
+
+  const handleQuantifierChange = useCallback(
+    (nextQuantifier: quantifier) => {
+      updateValue({ ...currentValue, quantifier: nextQuantifier });
+    },
+    [currentValue, updateValue],
+  );
+
+  const handleAddCondition = useCallback(() => {
+    const newItem = createEmptyItem();
+    updateValue({ ...currentValue, items: [...currentValue.items, newItem] });
+  }, [currentValue, updateValue]);
+
+  const handleDeleteAll = useCallback(() => {
+    updateValue({ ...currentValue, items: [] });
+  }, [currentValue, updateValue]);
+
+  const showDeleteAll = currentValue.items.length >= 3;
+
+  return (
+    <div className={cn('flex flex-col gap-[10px]', className)}>
+      <ConditonTriggerDescription
+        targetName={targetName}
+        quantifier={currentValue.quantifier}
+        onQuantifierChange={handleQuantifierChange}
+      />
+
+      <div className="flex items-center justify-between">
+        <button
+          type="button"
+          onClick={handleAddCondition}
+          disabled={disabled}
+          className={cn(
+            'flex items-center gap-[6px]',
+            'text-[14px] leading-[normal] text-[#0265FF]',
+            'hover:opacity-80',
+            disabled && 'opacity-50 cursor-not-allowed',
+            transCls,
+          )}
+        >
+          <AddIcon />
+          添加条件
+        </button>
+
+        {showDeleteAll && (
+          <button
+            type="button"
+            onClick={handleDeleteAll}
+            disabled={disabled}
+            className={cn(
+              'text-[14px] leading-[normal] text-[#FF5631]',
+              'hover:opacity-80',
+              disabled && 'opacity-50 cursor-not-allowed',
+              transCls,
+            )}
+          >
+            删除全部
+          </button>
+        )}
+      </div>
+
+      <ConditionGroup
+        fields={fields}
+        value={currentValue}
+        onChange={updateValue}
+        service={service}
+        disabled={disabled}
+      />
+    </div>
+  );
+};
+
+ConditionInput.displayName = 'ConditionInput';

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

@@ -0,0 +1,237 @@
+import { useState, useCallback, useRef, useMemo } from 'react';
+import type { IField, IConditionItem, relationalOperator, IFieldValueService } from '@baishuyun/types';
+import { getAvailableOperators, getDefaultOperator } from '@baishuyun/ai-feat-utils';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { FieldSelect } from '../field-select';
+import { RelationalOperatorSelect } from '../relational-operator-select';
+import { FieldValueInput } from '../field-value-input';
+import { TrashIcon } from '../../bs-icons';
+
+// ── Helpers ──────────────────────────────────────────────────────────
+
+function findFieldKey(_: IField[], targetField: IField): string | undefined {
+  return targetField.widget?.widgetName;
+
+  // for (let i = 0; i < fields.length; i++) {
+  //   if (fields[i] === targetField) return targetField.widget?.widgetName || String(i);
+  // }
+  // return undefined;
+}
+
+function generateId(): string {
+  return `cond-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+// ── Props ────────────────────────────────────────────────────────────
+
+export interface ConditionItemProps {
+  fields: IField[];
+  value?: IConditionItem;
+  defaultValue?: IConditionItem;
+  onChange?: (item: IConditionItem) => void;
+  onRemoveClick?: () => void;
+  service?: IFieldValueService;
+  disabled?: boolean;
+  className?: string;
+}
+
+// ── Component ────────────────────────────────────────────────────────
+
+export const ConditionItem = ({
+  fields,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  onRemoveClick,
+  service,
+  disabled = false,
+  className,
+}: ConditionItemProps) => {
+  const idRef = useRef<string>(controlledValue?.id || defaultValue?.id || generateId());
+
+  const [internalField, setInternalField] = useState<IField | undefined>(
+    defaultValue?.field,
+  );
+  const [internalKey, setInternalKey] = useState<string | undefined>(() =>
+    defaultValue?.field ? findFieldKey(fields, defaultValue.field) : undefined,
+  );
+  const [internalOperator, setInternalOperator] = useState<relationalOperator>(
+    defaultValue?.operator ||
+      getDefaultOperator(defaultValue?.field?.widget?.type),
+  );
+  const [internalValue, setInternalValue] = useState<unknown>(
+    defaultValue?.value,
+  );
+
+  const isControlled = controlledValue !== undefined;
+
+  const currentField = isControlled ? controlledValue.field : internalField;
+  const currentKey = useMemo(() => {
+    if (isControlled && controlledValue.field) {
+      return findFieldKey(fields, controlledValue.field);
+    }
+    return internalKey;
+  }, [isControlled, controlledValue?.field, fields, internalKey]);
+  const currentOperator = isControlled
+    ? controlledValue.operator
+    : internalOperator;
+  const currentValue = isControlled ? controlledValue.value : internalValue;
+
+  const fieldType = currentField?.widget?.type;
+  const availableOperators = useMemo(
+    () => getAvailableOperators(fieldType),
+    [fieldType],
+  );
+
+  const emitChange = useCallback(
+    (field: IField, operator: relationalOperator, value: unknown) => {
+      onChange?.({
+        id: idRef.current,
+        field,
+        operator,
+        value,
+      });
+    },
+    [onChange],
+  );
+
+  // ── Handlers ──────────────────────────────────────────────────
+
+  const handleFieldChange = useCallback(
+    (field: IField, nodeKey: string) => {
+      const newOperator = getDefaultOperator(field.widget?.type);
+
+      if (!isControlled) {
+        setInternalField(field);
+        setInternalKey(nodeKey);
+        setInternalOperator(newOperator);
+        setInternalValue(undefined);
+      }
+
+      emitChange(field, newOperator, undefined);
+    },
+    [isControlled, emitChange],
+  );
+
+  const handleOperatorChange = useCallback(
+    (operator: relationalOperator) => {
+      const isEmptyOp = operator === 'empty' || operator === 'not_empty';
+      const isRangeOp = operator === 'range';
+      const isMultiOp = operator === 'in' || operator === 'nin' || operator === 'all';
+
+      let newValue: unknown;
+      if (isEmptyOp) {
+        newValue = undefined;
+      } else if (isRangeOp) {
+        newValue = { min: undefined, max: undefined };
+      } else if (isMultiOp) {
+        newValue = [];
+      } else if (
+        typeof currentValue === 'object' &&
+        currentValue !== null &&
+        !Array.isArray(currentValue)
+      ) {
+        newValue = undefined;
+      } else {
+        newValue = currentValue;
+      }
+
+      if (!isControlled) {
+        setInternalOperator(operator);
+        if (isEmptyOp || isRangeOp || isMultiOp) setInternalValue(newValue);
+      }
+
+      if (currentField) {
+        emitChange(currentField, operator, newValue);
+      }
+    },
+    [isControlled, currentField, currentValue, emitChange],
+  );
+
+  const handleValueChange = useCallback(
+    (value: unknown) => {
+      if (!isControlled) {
+        setInternalValue(value);
+      }
+
+      if (currentField) {
+        emitChange(currentField, currentOperator, value);
+      }
+    },
+    [isControlled, currentField, currentOperator, emitChange],
+  );
+
+  const hideValueInput =
+    currentField != null &&
+    (currentOperator === 'empty' || currentOperator === 'not_empty');
+
+  return (
+    <div className={cn('flex items-center gap-[10px]', className)}>
+      <FieldSelect
+        fields={fields}
+        value={currentKey}
+        onChange={handleFieldChange}
+        placeholder="请选择字段"
+        searchPlaceholder="输入字段名称来搜索"
+        disabled={disabled}
+        showTypeBadge
+        className="w-[200px] shrink-0"
+      />
+
+      <RelationalOperatorSelect
+        value={currentOperator}
+        onChange={handleOperatorChange}
+        operators={availableOperators}
+        borderless
+        disabled={disabled}
+        className="w-[120px] shrink-0"
+      />
+
+      {hideValueInput ? (
+        <div className="flex-1 min-w-0 h-[34px]" />
+      ) : currentField ? (
+        <div className="flex-1 min-w-0">
+          <FieldValueInput
+            field={currentField}
+            value={currentValue}
+            onChange={handleValueChange}
+            operator={currentOperator}
+            service={service}
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <div
+          className={cn(
+            'flex-1 min-w-0 flex items-center',
+            'bg-white border border-[#E0E0E0] rounded-[4px]',
+            'h-[34px] px-[10px] py-[7px]',
+          )}
+        >
+          <span className="text-[14px] leading-[normal] text-[#999] truncate">
+            请选择
+          </span>
+        </div>
+      )}
+
+      {onRemoveClick && (
+        <button
+          type="button"
+          onClick={onRemoveClick}
+          disabled={disabled}
+          className={cn(
+            'shrink-0 flex items-center justify-center size-[16px]',
+            'text-[#999] hover:text-[#FF5631]',
+            disabled && 'opacity-50 cursor-not-allowed',
+            transCls,
+          )}
+        >
+          <TrashIcon />
+        </button>
+      )}
+    </div>
+  );
+};
+
+ConditionItem.displayName = 'ConditionItem';

package/src/components/agent-helper/condition-quantifier-select/index.tsx

@@ -0,0 +1,142 @@
+import { useState, useCallback } from 'react';
+import type { quantifier } from '@baishuyun/types';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+
+const OPTIONS: Array<{ value: quantifier; label: string }> = [
+  { value: 'all', label: '所有' },
+  { value: 'any', label: '任意' },
+];
+
+export interface IConditonQuantifierSelectProps {
+  value?: quantifier;
+  defaultValue?: quantifier;
+  onChange?: (value: quantifier) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const ConditonQuantifierSelect = ({
+  value: controlledValue,
+  defaultValue = 'all',
+  onChange,
+  disabled = false,
+  className,
+}: IConditonQuantifierSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<quantifier>(defaultValue);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+  const resolvedValue = controlledValue !== undefined ? controlledValue : internalValue;
+  const selectedLabel = OPTIONS.find((o) => o.value === resolvedValue)?.label ?? '';
+
+  const handleSelect = useCallback(
+    (v: quantifier) => {
+      if (controlledValue === undefined) setInternalValue(v);
+      onChange?.(v);
+      setOpen(false);
+    },
+    [controlledValue, onChange],
+  );
+
+  const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
+    if (!node) {
+      setPortalContainer(null);
+      return;
+    }
+    const rootNode = node.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>(
+        '[data-bs-quantifier-select-portal]',
+      );
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-quantifier-select-portal', 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+    } else {
+      setPortalContainer(null);
+    }
+  }, []);
+
+  return (
+    <div className={cn('relative inline-flex', className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'flex items-center justify-between gap-[10px]',
+              'min-w-[82px] h-[31px] px-[10px]',
+              'bg-white border rounded-[4px]',
+              'text-left cursor-pointer',
+              open
+                ? 'border-[#0265FF]'
+                : 'border-[#E0E0E0] hover:border-[#0265FF]',
+              disabled &&
+                'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              transCls,
+            )}
+          >
+            <span className="text-[14px] leading-[normal] text-[#030303] truncate">
+              {selectedLabel}
+            </span>
+            <span
+              className={cn(
+                'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
+                transCls,
+                open && 'rotate-180',
+              )}
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              >
+                <path
+                  d="M4 6L8 10L12 6"
+                  stroke="#666666"
+                  strokeWidth="1.2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px] min-w-[82px]"
+        >
+          <div className="flex flex-col gap-0">
+            {OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => handleSelect(opt.value)}
+                className={cn(
+                  'h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
+                  resolvedValue === opt.value
+                    ? 'bg-[#F0F6FF] text-[#0265FF]'
+                    : 'text-[#030303] hover:bg-[#EFF0F6]',
+                  transCls,
+                )}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};

package/src/components/agent-helper/condition-trigger-description/index.tsx

@@ -0,0 +1,49 @@
+import type { quantifier } from '@baishuyun/types';
+import { ConditonQuantifierSelect } from '../condition-quantifier-select';
+import { cn } from '../../../lib/utils';
+
+export interface IConditonTriggerDescriptionProps {
+  targetName: string;
+  quantifier?: quantifier;
+  defaultQuantifier?: quantifier;
+  onQuantifierChange?: (value: quantifier) => void;
+  quantifierPrefixStr?: string;
+  quantifierSuffixStr?: string;
+  className?: string;
+}
+
+export const ConditonTriggerDescription = ({
+  targetName,
+  quantifier,
+  defaultQuantifier = 'all',
+  onQuantifierChange,
+  quantifierPrefixStr = '的数据符合以下',
+  quantifierSuffixStr = '条件时，触发后续动作',
+  className,
+}: IConditonTriggerDescriptionProps) => {
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-[10px]',
+        className,
+      )}
+    >
+      <span className="text-[14px] leading-[normal] text-[#4D609F] shrink-0 whitespace-nowrap">
+        {targetName}
+      </span>
+      <span className="flex items-center gap-[10px] shrink-0">
+        <span className="text-[14px] leading-[normal] text-black whitespace-nowrap">
+          {quantifierPrefixStr}
+        </span>
+        <ConditonQuantifierSelect
+          value={quantifier}
+          defaultValue={defaultQuantifier}
+          onChange={onQuantifierChange}
+        />
+        <span className="text-[14px] leading-[normal] text-black whitespace-nowrap">
+          {quantifierSuffixStr}
+        </span>
+      </span>
+    </div>
+  );
+};