@baishuyun/ai-design 1.0.3 → 1.0.5

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

@@ -0,0 +1,177 @@
+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 },
+];
+
+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

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +1,162 @@
+import { useCallback } from 'react';
+import { cn } from '../../../lib/utils';
+import { RepeatPreferenceTypeSelect } from '../repeat-preference-type-select';
+import { RepeatByTypeSelect } from '../repeat-by-type-select';
+import { WeekdaysSelect } from '../weekdays-select';
+import { MonthdaysSelect } from '../monthdays-select';
+import type {
+  IRepeatPreference,
+  customRepeatPreference,
+  repeatPreferenceType,
+  repeatByType,
+  repeatByWeekDetail,
+  repeatByMonthDetail,
+} from '@baishuyun/types';
+
+export interface RepeatPreferenceSelectProps {
+  value?: IRepeatPreference;
+  onChange?: (value: IRepeatPreference) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+const NUMBER_INPUT_CLASSES = cn(
+  'h-[34px] px-[10px] py-[7px] rounded-[4px] bg-white border border-[#e0e0e0]',
+  'text-[14px] text-[#030303] placeholder:text-[#999999]',
+  'focus:outline-none focus:border-[#0265FF]',
+  'disabled:bg-[#EFF0F6] disabled:cursor-not-allowed',
+  '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+  'w-[60px]',
+);
+
+function defaultCustomRepeatPreference(): customRepeatPreference {
+  return { repeatBy: 'week', interval: 1, repeatDetailDates: [] };
+}
+
+export function RepeatPreferenceSelect({
+  value,
+  onChange,
+  disabled = false,
+  className,
+}: RepeatPreferenceSelectProps) {
+  const selectedType = value?.type;
+  const customPref = value?.customRepeatPreference;
+  const repeatBy = customPref?.repeatBy;
+
+  const handleTypeChange = useCallback(
+    (type: repeatPreferenceType) => {
+      if (type === 'custom') {
+        onChange?.({
+          type: 'custom',
+          customRepeatPreference: customPref ?? defaultCustomRepeatPreference(),
+        });
+      } else {
+        onChange?.({ type });
+      }
+    },
+    [onChange, customPref],
+  );
+
+  const handleRepeatByChange = useCallback(
+    (newRepeatBy: repeatByType) => {
+      if (!customPref) return;
+      onChange?.({
+        type: 'custom',
+        customRepeatPreference: {
+          ...customPref,
+          repeatBy: newRepeatBy,
+          repeatDetailDates: [],
+        },
+      });
+    },
+    [onChange, customPref],
+  );
+
+  const handleIntervalChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!customPref) return;
+      const raw = parseInt(e.target.value, 10);
+      const interval = isNaN(raw) ? 1 : Math.max(1, raw);
+      onChange?.({
+        type: 'custom',
+        customRepeatPreference: { ...customPref, interval },
+      });
+    },
+    [onChange, customPref],
+  );
+
+  const handleWeekdaysChange = useCallback(
+    (days: repeatByWeekDetail[]) => {
+      if (!customPref) return;
+      onChange?.({
+        type: 'custom',
+        customRepeatPreference: { ...customPref, repeatDetailDates: days },
+      });
+    },
+    [onChange, customPref],
+  );
+
+  const handleMonthdaysChange = useCallback(
+    (days: repeatByMonthDetail[]) => {
+      if (!customPref) return;
+      onChange?.({
+        type: 'custom',
+        customRepeatPreference: { ...customPref, repeatDetailDates: days },
+      });
+    },
+    [onChange, customPref],
+  );
+
+  const weekdaysValue = (customPref?.repeatDetailDates ?? []) as repeatByWeekDetail[];
+  const monthdaysValue = (customPref?.repeatDetailDates ?? []) as repeatByMonthDetail[];
+
+  return (
+    <div className={cn('flex flex-col gap-[10px]', className)}>
+      <RepeatPreferenceTypeSelect
+        value={selectedType}
+        onChange={handleTypeChange}
+        disabled={disabled}
+      />
+
+      {selectedType === 'custom' && (
+        <div className="flex items-start gap-[10px] w-full">
+          <RepeatByTypeSelect
+            className="w-[200px] shrink-0"
+            value={repeatBy}
+            onChange={handleRepeatByChange}
+            disabled={disabled}
+          />
+          <span className="text-[14px] text-[#030303] leading-[34px] shrink-0">每</span>
+          <input
+            type="number"
+            value={customPref?.interval ?? 1}
+            onChange={handleIntervalChange}
+            disabled={disabled}
+            min={1}
+            step={1}
+            className={NUMBER_INPUT_CLASSES}
+          />
+          <span className="text-[14px] text-[#030303] leading-[34px] shrink-0">
+            {repeatBy === 'month' ? '月' : '周'}
+          </span>
+          {repeatBy === 'week' && (
+            <WeekdaysSelect
+              className="flex-1 min-w-0"
+              value={weekdaysValue}
+              onChange={handleWeekdaysChange}
+              disabled={disabled}
+            />
+          )}
+          {repeatBy === 'month' && (
+            <MonthdaysSelect
+              className="flex-1 min-w-0"
+              value={monthdaysValue}
+              onChange={handleMonthdaysChange}
+              disabled={disabled}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/agent-helper/repeat-preference-type-select/index.tsx

@@ -0,0 +1,58 @@
+import type { repeatPreferenceType } from '@baishuyun/types';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui/select';
+
+export interface RepeatPreferenceTypeOption {
+  value: repeatPreferenceType;
+  label: string;
+}
+
+export const RepeatPreferenceTypeOptions: RepeatPreferenceTypeOption[] = [
+  { value: 'none', label: '不重复触发' },
+  { value: 'daily', label: '每天触发一次' },
+  { value: 'weekly', label: '每周触发一次' },
+  { value: 'everyTwoWeeks', label: '每两周触发一次' },
+  { value: 'monthly', label: '每月触发一次' },
+  { value: 'yearly', label: '每年触发一次' },
+  { value: 'custom', label: '自定义重复' },
+];
+
+export interface RepeatPreferenceTypeSelectProps {
+  value?: repeatPreferenceType;
+  onChange?: (value: repeatPreferenceType) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const RepeatPreferenceTypeSelect = ({
+  value,
+  onChange,
+  placeholder = '请选择重复类型',
+  disabled = false,
+  className,
+}: RepeatPreferenceTypeSelectProps) => {
+  return (
+    <Select
+      value={value}
+      onValueChange={(v) => onChange?.(v as repeatPreferenceType)}
+      disabled={disabled}
+    >
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {RepeatPreferenceTypeOptions.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};

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

@@ -0,0 +1,35 @@
+import { cn } from '../../../lib/utils';
+import { SearchIcon } from '../../bs-icons';
+
+export interface SearchInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export const SearchInput = ({
+  value,
+  onChange,
+  placeholder = '搜索智能体名称',
+  className,
+}: SearchInputProps) => {
+  return (
+    <div
+      className={cn(
+        'content-stretch flex items-center gap-[6px] border border-[#e0e0e0] border-solid rounded-[4px] px-[10px] h-[34px]',
+        'group hover:border-[#0265ff] focus-within:border-[#0265ff]',
+        className,
+      )}
+    >
+      <SearchIcon className="shrink-0 text-[#999] group-hover:text-[#0265ff] group-focus-within:text-[#0265ff]" />
+      <input
+        type="text"
+        value={value || ''}
+        onChange={(e) => onChange?.(e.target.value)}
+        placeholder={placeholder}
+        className="flex-1 outline-none text-[14px] placeholder:text-[#999] bg-transparent min-w-0 text-[#030303] leading-[normal]"
+      />
+    </div>
+  );
+};

package/src/components/agent-helper/table/index.tsx

@@ -0,0 +1,114 @@
+import { cn } from '../../../lib/utils';
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  type ColumnDef,
+  type TableOptions,
+ createColumnHelper,
+} from '@tanstack/react-table';
+import { EmptyTableIcon } from '../../icons/empty-table-icon';
+
+export {
+  createColumnHelper,
+}
+
+export interface DataTableProps<TData> {
+  columns: ColumnDef<TData, any>[];
+  data: TData[];
+  emptyText?: string;
+  emptyIcon?: React.ReactNode;
+  className?: string;
+  tableOptions?: Omit<
+    Partial<TableOptions<TData>>,
+    'columns' | 'data' | 'getCoreRowModel'
+  >;
+}
+
+export function DataTable<TData>({
+  columns,
+  data,
+  emptyText = '暂无数据',
+  emptyIcon,
+  className,
+  tableOptions,
+}: DataTableProps<TData>) {
+  const table = useReactTable({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    ...tableOptions,
+  });
+
+  const headerGroups = table.getHeaderGroups();
+  const rows = table.getRowModel().rows;
+  const isEmpty = data.length === 0;
+
+  return (
+    <div
+      className={cn(
+        'rounded-[10px] border border-[#e0e0e0] overflow-hidden bg-white',
+        className,
+      )}
+    >
+      <table className="w-full h-full border-collapse">
+        <thead>
+          {headerGroups.map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header, index) => (
+                <th
+                  key={header.id}
+                  className={cn(
+                    'bg-[#f5f7fa] h-[34px] px-[10px] text-left text-[14px] font-normal text-[#030303] border-b border-[#e0e0e0] align-middle whitespace-nowrap',
+                    index !== 0 && 'border-l border-[#e0e0e0]',
+                  )}
+                  style={{
+                    width:
+                      header.getSize() !== 150 ? header.getSize() : undefined,
+                  }}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {isEmpty ? (
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="py-[60px] text-center align-middle"
+              >
+                <div className="flex flex-col items-center gap-[12px]">
+                  {emptyIcon || <EmptyTableIcon />}
+                  <span className="text-[14px] text-[#999]">{emptyText}</span>
+                </div>
+              </td>
+            </tr>
+          ) : (
+            rows.map((row) => (
+              <tr key={row.id}>
+                {row.getVisibleCells().map((cell, index) => (
+                  <td
+                    key={cell.id}
+                    className={cn(
+                      'p-[10px] text-[14px] text-[#030303]',
+                      index !== 0 && 'border-l border-[#e0e0e0]',
+                      'border-b border-[#e0e0e0]',
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}