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

package/src/components/agent-helper/relational-operator-select/index.tsx

@@ -1,179 +1,179 @@
-import { useState, useCallback, useMemo } from 'react';
-import type { relationalOperator } from '@baishuyun/types';
-import { OPERATOR_LABEL_MAP } from '@baishuyun/ai-feat-utils';
-import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
-import { cn } from '../../../lib/utils';
-import { transCls } from '../../../const/ui';
-
-const ALL_OPTIONS: Array<{ value: relationalOperator; label: string }> = [
-  { value: 'eq', label: OPERATOR_LABEL_MAP.eq },
-  { value: 'neq', label: OPERATOR_LABEL_MAP.neq },
-  { value: 'gt', label: OPERATOR_LABEL_MAP.gt },
-  { value: 'lt', label: OPERATOR_LABEL_MAP.lt },
-  { value: 'gte', label: OPERATOR_LABEL_MAP.gte },
-  { value: 'lte', label: OPERATOR_LABEL_MAP.lte },
-  { value: 'contains', label: OPERATOR_LABEL_MAP.contains },
-  { value: 'not_contains', label: OPERATOR_LABEL_MAP.not_contains },
-  { value: 'in', label: OPERATOR_LABEL_MAP.in },
-  { value: 'nin', label: OPERATOR_LABEL_MAP.nin },
-  { value: 'all', label: OPERATOR_LABEL_MAP.all },
-  { value: 'empty', label: OPERATOR_LABEL_MAP.empty },
-  { value: 'not_empty', label: OPERATOR_LABEL_MAP.not_empty },
-  { value: 'range', label: OPERATOR_LABEL_MAP.range },
-  { value: 'like', label: OPERATOR_LABEL_MAP.like },
-  { value: 'unlike', label: OPERATOR_LABEL_MAP.unlike },
-];
-
-export interface IRelationalOperatorSelectProps {
-  value?: relationalOperator;
-  defaultValue?: relationalOperator;
-  onChange?: (value: relationalOperator) => void;
-  operators?: relationalOperator[];
-  borderless?: boolean;
-  disabled?: boolean;
-  className?: string;
-}
-
-export const RelationalOperatorSelect = ({
-  value: controlledValue,
-  defaultValue = 'eq',
-  onChange,
-  operators,
-  borderless = false,
-  disabled = false,
-  className,
-}: IRelationalOperatorSelectProps) => {
-  const [open, setOpen] = useState(false);
-  const [internalValue, setInternalValue] = useState<relationalOperator>(defaultValue);
-  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
-
-  const options = useMemo(() => {
-    if (!operators || operators.length === 0) return ALL_OPTIONS;
-    const set = new Set(operators);
-    return ALL_OPTIONS.filter((o) => set.has(o.value));
-  }, [operators]);
-
-  const resolvedValue = (() => {
-    const v = controlledValue !== undefined ? controlledValue : internalValue;
-    if (options.length > 0 && !options.find((o) => o.value === v)) {
-      return options[0].value;
-    }
-    return v;
-  })();
-
-  const selectedLabel = options.find((o) => o.value === resolvedValue)?.label ?? '';
-
-  const handleSelect = useCallback(
-    (v: relationalOperator) => {
-      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-relational-operator-select-portal]',
-      );
-      if (existing) {
-        setPortalContainer(existing);
-        return;
-      }
-      const container = document.createElement('div');
-      container.setAttribute('data-bs-relational-operator-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] px-[10px] w-full',
-              'text-left cursor-pointer',
-              borderless
-                ? 'h-[34px] bg-transparent'
-                : cn(
-                    'h-[31px] bg-white border rounded-[4px]',
-                    open
-                      ? 'border-[#0265FF]'
-                      : 'border-[#E0E0E0] hover:border-[#0265FF]',
-                  ),
-              disabled &&
-                'opacity-50 cursor-not-allowed',
-              !disabled && !borderless && 'hover:border-[#0265FF]',
-              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 max-h-[320px] overflow-y-auto">
-            {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] whitespace-nowrap shrink-0',
-                  resolvedValue === opt.value
-                    ? 'bg-[#F0F6FF] text-[#0265FF]'
-                    : 'text-[#030303] hover:bg-[#EFF0F6]',
-                  transCls,
-                )}
-              >
-                {opt.label}
-              </button>
-            ))}
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
+import { useState, useCallback, useMemo } from 'react';
+import type { relationalOperator } from '@baishuyun/types';
+import { OPERATOR_LABEL_MAP } from '@baishuyun/ai-feat-utils';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+
+const ALL_OPTIONS: Array<{ value: relationalOperator; label: string }> = [
+  { value: 'eq', label: OPERATOR_LABEL_MAP.eq },
+  { value: 'neq', label: OPERATOR_LABEL_MAP.neq },
+  { value: 'gt', label: OPERATOR_LABEL_MAP.gt },
+  { value: 'lt', label: OPERATOR_LABEL_MAP.lt },
+  { value: 'gte', label: OPERATOR_LABEL_MAP.gte },
+  { value: 'lte', label: OPERATOR_LABEL_MAP.lte },
+  { value: 'contains', label: OPERATOR_LABEL_MAP.contains },
+  { value: 'not_contains', label: OPERATOR_LABEL_MAP.not_contains },
+  { value: 'in', label: OPERATOR_LABEL_MAP.in },
+  { value: 'nin', label: OPERATOR_LABEL_MAP.nin },
+  { value: 'all', label: OPERATOR_LABEL_MAP.all },
+  { value: 'empty', label: OPERATOR_LABEL_MAP.empty },
+  { value: 'not_empty', label: OPERATOR_LABEL_MAP.not_empty },
+  { value: 'range', label: OPERATOR_LABEL_MAP.range },
+  { value: 'like', label: OPERATOR_LABEL_MAP.like },
+  { value: 'unlike', label: OPERATOR_LABEL_MAP.unlike },
+];
+
+export interface IRelationalOperatorSelectProps {
+  value?: relationalOperator;
+  defaultValue?: relationalOperator;
+  onChange?: (value: relationalOperator) => void;
+  operators?: relationalOperator[];
+  borderless?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const RelationalOperatorSelect = ({
+  value: controlledValue,
+  defaultValue = 'eq',
+  onChange,
+  operators,
+  borderless = false,
+  disabled = false,
+  className,
+}: IRelationalOperatorSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState<relationalOperator>(defaultValue);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+  const options = useMemo(() => {
+    if (!operators || operators.length === 0) return ALL_OPTIONS;
+    const set = new Set(operators);
+    return ALL_OPTIONS.filter((o) => set.has(o.value));
+  }, [operators]);
+
+  const resolvedValue = (() => {
+    const v = controlledValue !== undefined ? controlledValue : internalValue;
+    if (options.length > 0 && !options.find((o) => o.value === v)) {
+      return options[0].value;
+    }
+    return v;
+  })();
+
+  const selectedLabel = options.find((o) => o.value === resolvedValue)?.label ?? '';
+
+  const handleSelect = useCallback(
+    (v: relationalOperator) => {
+      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-relational-operator-select-portal]',
+      );
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-relational-operator-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] px-[10px] w-full',
+              'text-left cursor-pointer',
+              borderless
+                ? 'h-[34px] bg-transparent'
+                : cn(
+                    'h-[31px] bg-white border rounded-[4px]',
+                    open
+                      ? 'border-[#0265FF]'
+                      : 'border-[#E0E0E0] hover:border-[#0265FF]',
+                  ),
+              disabled &&
+                'opacity-50 cursor-not-allowed',
+              !disabled && !borderless && 'hover:border-[#0265FF]',
+              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 max-h-[320px] overflow-y-auto">
+            {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] whitespace-nowrap shrink-0',
+                  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/repeat-by-type-select/index.tsx

@@ -1,53 +1,53 @@
-import type { repeatByType } from '@baishuyun/types';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../ui/select';
-
-export interface RepeatByTypeOption {
-  value: repeatByType;
-  label: string;
-}
-
-export const RepeatByTypeOptions: RepeatByTypeOption[] = [
-  { value: 'week', label: '按周重复' },
-  { value: 'month', label: '按月重复' },
-];
-
-export interface RepeatByTypeSelectProps {
-  value?: repeatByType;
-  onChange?: (value: repeatByType) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-export const RepeatByTypeSelect = ({
-  value,
-  onChange,
-  placeholder = '请选择重复方式',
-  disabled = false,
-  className,
-}: RepeatByTypeSelectProps) => {
-  return (
-    <Select
-      value={value}
-      onValueChange={(v) => onChange?.(v as repeatByType)}
-      disabled={disabled}
-    >
-      <SelectTrigger className={className}>
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent>
-        {RepeatByTypeOptions.map((option) => (
-          <SelectItem key={option.value} value={option.value}>
-            {option.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-};
+import type { repeatByType } from '@baishuyun/types';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui/select';
+
+export interface RepeatByTypeOption {
+  value: repeatByType;
+  label: string;
+}
+
+export const RepeatByTypeOptions: RepeatByTypeOption[] = [
+  { value: 'week', label: '按周重复' },
+  { value: 'month', label: '按月重复' },
+];
+
+export interface RepeatByTypeSelectProps {
+  value?: repeatByType;
+  onChange?: (value: repeatByType) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const RepeatByTypeSelect = ({
+  value,
+  onChange,
+  placeholder = '请选择重复方式',
+  disabled = false,
+  className,
+}: RepeatByTypeSelectProps) => {
+  return (
+    <Select
+      value={value}
+      onValueChange={(v) => onChange?.(v as repeatByType)}
+      disabled={disabled}
+    >
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {RepeatByTypeOptions.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};