@baishuyun/ai-design 2.0.48 → 2.0.50

package/src/components/agent-helper/field-value-input/dept-select.tsx

@@ -0,0 +1,447 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import type { IDeptOption } from '@baishuyun/types';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { FieldWrapper, type FieldValueInputProps } from './index';
+import { usePortalContainer } from './picker-inputs';
+import { DropdownChevron, ClearIcon, CloseIcon, CheckIcon } from './icons';
+import { SearchIcon } from '../../bs-icons';
+import { ClearAllIcon } from '../../icons/clear-all-icon';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+
+// ── Types ───────────────────────────────────────────────────────────
+
+export type DeptSelectKind = 'dept' | 'deptgroup';
+
+export interface DeptSelectProps extends FieldValueInputProps {
+  kind: DeptSelectKind;
+  multiple?: boolean;
+}
+
+interface DeptFlatNode {
+  id: string;
+  name: string;
+  parentId?: string;
+}
+
+interface DeptTreeNode extends DeptFlatNode {
+  children?: DeptTreeNode[];
+}
+
+// ── Tree utilities ──────────────────────────────────────────────────
+
+/** 将服务返回的选项统一拍平：嵌套 children 与扁平 parentId 两种结构都支持 */
+function flattenOptions(options: IDeptOption[], inheritedParentId?: string): DeptFlatNode[] {
+  const out: DeptFlatNode[] = [];
+  options.forEach((opt) => {
+    out.push({ id: opt.id, name: opt.name, parentId: opt.parentId ?? inheritedParentId });
+    if (opt.children?.length) {
+      out.push(...flattenOptions(opt.children, opt.id));
+    }
+  });
+  return out;
+}
+
+/** 由扁平列表构建部门树；parentId 缺失或找不到父节点时作为根节点 */
+function buildTree(flat: DeptFlatNode[]): DeptTreeNode[] {
+  const nodeMap = new Map<string, DeptTreeNode>();
+  flat.forEach((f) => nodeMap.set(f.id, { ...f }));
+  const roots: DeptTreeNode[] = [];
+  flat.forEach((f) => {
+    const node = nodeMap.get(f.id)!;
+    const parent = f.parentId ? nodeMap.get(f.parentId) : undefined;
+    if (parent && parent.id !== node.id) {
+      parent.children = parent.children ?? [];
+      parent.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  });
+  return roots;
+}
+
+// ── Icons ───────────────────────────────────────────────────────────
+
+const TreeChevron = ({ expanded }: { expanded: boolean }) => (
+  <svg
+    width="14" height="14" viewBox="0 0 14 14" fill="none"
+    className="shrink-0 transition-transform duration-200"
+    style={{ transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)' }}
+  >
+    <path d="M5 3L9.5 7L5 11" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+// ── DeptSelect ──────────────────────────────────────────────────────
+//
+// 等价于旧版 BsyDeptCheckBox：
+// - 打开时一次性加载完整部门列表并缓存，构建组织架构树（可展开/收起）
+// - 搜索时对整棵树按名称过滤，展示扁平结果；清空搜索恢复树形展示
+// - 多选支持「全选」（搜索时为「全选搜索结果」），触发器内以标签展示已选项
+// - 数据无 parentId 时（如部门组）退化为扁平列表
+
+export function DeptSelect({
+  field,
+  value,
+  onChange,
+  disabled,
+  service,
+  kind,
+  multiple = false,
+  showLabel,
+  showDescription,
+}: DeptSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [tree, setTree] = useState<DeptTreeNode[]>([]);
+  const [flatList, setFlatList] = useState<DeptFlatNode[]>([]);
+  const [nameMap, setNameMap] = useState<Record<string, string>>({});
+  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
+  const [isHovering, setIsHovering] = useState(false);
+  const loadedRef = useRef(false);
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-field-value-picker-portal');
+
+  const fieldName = field.widget?.widgetName || '';
+  const searchFn = kind === 'dept' ? service?.searchDepts : service?.searchDeptGroups;
+
+  const selectedIds: string[] = multiple ? (Array.isArray(value) ? value.map(String) : []) : [];
+  const selectedIdSet = new Set(selectedIds);
+  const singleId = !multiple && typeof value === 'string' ? value : '';
+
+  const loadOptions = useCallback(async () => {
+    if (!searchFn || loadedRef.current) return;
+    loadedRef.current = true;
+    setLoading(true);
+    try {
+      const list = await searchFn('', { field: fieldName });
+      const flat = flattenOptions(list);
+      const nextTree = buildTree(flat);
+      setFlatList(flat);
+      setTree(nextTree);
+      setNameMap((prev) => {
+        const next = { ...prev };
+        flat.forEach((f) => {
+          next[f.id] = f.name;
+        });
+        return next;
+      });
+      // 与旧组件一致：默认展开第一个根节点
+      const firstWithChildren = nextTree.find((n) => n.children?.length);
+      if (firstWithChildren) {
+        setExpandedKeys(new Set([firstWithChildren.id]));
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [searchFn, fieldName]);
+
+  // 首次打开时加载；已有值时提前加载以解析名称
+  useEffect(() => {
+    if (open) loadOptions();
+  }, [open, loadOptions]);
+
+  useEffect(() => {
+    const hasValue = multiple ? selectedIds.length > 0 : !!singleId;
+    if (hasValue) loadOptions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const searching = !!keyword.trim();
+  const searchResults = useMemo(() => {
+    if (!searching) return [];
+    const kw = keyword.trim();
+    return flatList.filter((n) => n.name.includes(kw));
+  }, [searching, keyword, flatList]);
+
+  // 全选作用于当前可见范围：搜索时为搜索结果，否则为全部部门
+  const visibleIds = searching ? searchResults.map((n) => n.id) : flatList.map((n) => n.id);
+  const isAllSelected =
+    multiple && visibleIds.length > 0 && visibleIds.every((id) => selectedIdSet.has(id));
+
+  const handleToggle = useCallback(
+    (node: DeptFlatNode) => {
+      if (multiple) {
+        const next = selectedIdSet.has(node.id)
+          ? selectedIds.filter((id) => id !== node.id)
+          : [...selectedIds, node.id];
+        onChange?.(next);
+      } else {
+        onChange?.(node.id);
+        setNameMap((prev) => ({ ...prev, [node.id]: node.name }));
+        setOpen(false);
+        setKeyword('');
+      }
+    },
+    [multiple, selectedIds, selectedIdSet, onChange],
+  );
+
+  const handleSelectAll = useCallback(() => {
+    if (!multiple) return;
+    if (isAllSelected) {
+      const visibleSet = new Set(visibleIds);
+      onChange?.(selectedIds.filter((id) => !visibleSet.has(id)));
+    } else {
+      onChange?.([...new Set([...selectedIds, ...visibleIds])]);
+    }
+  }, [multiple, isAllSelected, visibleIds, selectedIds, onChange]);
+
+  const toggleExpand = useCallback((id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleClearSingle = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.('');
+    },
+    [onChange],
+  );
+
+  const handleRemoveMultiple = useCallback(
+    (id: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.(selectedIds.filter((v) => v !== id));
+    },
+    [selectedIds, onChange],
+  );
+
+  const handleClearAllMultiple = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange],
+  );
+
+  const renderTreeNodes = (nodes: DeptTreeNode[], level: number): React.ReactNode =>
+    nodes.map((node) => {
+      const hasChildren = !!node.children?.length;
+      const expanded = expandedKeys.has(node.id);
+      const checked = multiple ? selectedIdSet.has(node.id) : singleId === node.id;
+      return (
+        <div key={node.id}>
+          <button
+            type="button"
+            onClick={() => handleToggle(node)}
+            className={cn(
+              'flex items-center gap-[6px] w-full h-[34px] pr-[10px] rounded-[4px] text-left',
+              checked ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
+              transCls,
+            )}
+            style={{ paddingLeft: 10 + level * 20 }}
+          >
+            {hasChildren ? (
+              <span
+                role="button"
+                tabIndex={-1}
+                onClick={(e) => toggleExpand(node.id, e)}
+                className="flex items-center justify-center w-[16px] h-[16px] shrink-0"
+              >
+                <TreeChevron expanded={expanded} />
+              </span>
+            ) : (
+              <span className="w-[16px] shrink-0" />
+            )}
+            {multiple && (
+              <div
+                className={cn(
+                  'w-[14px] h-[14px] rounded-[2px] flex items-center justify-center shrink-0 border',
+                  checked ? 'bg-[#0265FF] border-[#0265FF]' : 'bg-white border-[#CCCCCC]',
+                )}
+              >
+                {checked && <CheckIcon />}
+              </div>
+            )}
+            <span className="truncate text-[14px]">{node.name}</span>
+          </button>
+          {hasChildren && expanded && renderTreeNodes(node.children!, level + 1)}
+        </div>
+      );
+    });
+
+  const renderSearchResults = () =>
+    searchResults.map((node) => {
+      const checked = multiple ? selectedIdSet.has(node.id) : singleId === node.id;
+      return (
+        <button
+          key={node.id}
+          type="button"
+          onClick={() => handleToggle(node)}
+          className={cn(
+            'flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
+            checked ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]',
+            transCls,
+          )}
+        >
+          {multiple && (
+            <div
+              className={cn(
+                'w-[14px] h-[14px] rounded-[2px] flex items-center justify-center shrink-0 border',
+                checked ? 'bg-[#0265FF] border-[#0265FF]' : 'bg-white border-[#CCCCCC]',
+              )}
+            >
+              {checked && <CheckIcon />}
+            </div>
+          )}
+          <span className="truncate text-[14px]">{node.name}</span>
+        </button>
+      );
+    });
+
+  const hasSelectionMulti = multiple && selectedIds.length > 0;
+  const showClearMulti = hasSelectionMulti && isHovering;
+  const singleLabel = singleId ? nameMap[singleId] || singleId : '';
+
+  return (
+    <FieldWrapper field={field} showLabel={showLabel} showDescription={showDescription}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] gap-2.5',
+              'bg-white border rounded-[4px]',
+              'py-[7px]',
+              (multiple ? hasSelectionMulti : !!singleLabel) ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
+              'text-left cursor-pointer',
+              'hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
+              transCls,
+            )}
+          >
+            {multiple ? (
+              hasSelectionMulti ? (
+                <>
+                  <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+                    {selectedIds.map((id) => (
+                      <span
+                        key={id}
+                        className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0"
+                      >
+                        <span className="text-[14px] text-[#030303] leading-[normal]">
+                          {nameMap[id] || id}
+                        </span>
+                        <span
+                          className="cursor-pointer flex items-center shrink-0"
+                          onClick={(e) => handleRemoveMultiple(id, e)}
+                        >
+                          <CloseIcon />
+                        </span>
+                      </span>
+                    ))}
+                  </div>
+                  {showClearMulti ? (
+                    <span
+                      className="cursor-pointer flex items-center shrink-0"
+                      onClick={handleClearAllMultiple}
+                    >
+                      <ClearAllIcon />
+                    </span>
+                  ) : (
+                    <DropdownChevron open={open} />
+                  )}
+                </>
+              ) : (
+                <>
+                  <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                    {field.description ?? `请选择${field.label}`}
+                  </span>
+                  <DropdownChevron open={open} />
+                </>
+              )
+            ) : (
+              <>
+                <span className={cn('truncate', !singleLabel && 'text-[#999999]')}>
+                  {singleLabel || (field.description ?? `请选择${field.label}`)}
+                </span>
+                <div className="flex items-center gap-[4px] shrink-0">
+                  {!!singleLabel && (
+                    <span
+                      role="button"
+                      tabIndex={-1}
+                      onClick={handleClearSingle}
+                      className="flex items-center justify-center w-[18px] h-[18px] hover:bg-[#EFF0F6] rounded-full"
+                    >
+                      <ClearIcon />
+                    </span>
+                  )}
+                  <DropdownChevron open={open} />
+                </div>
+              </>
+            )}
+          </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-[8px]"
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+        >
+          <div className="flex items-center gap-[8px] px-[6px] mb-[4px] h-[34px] bg-[#F6F7FA] rounded-[4px]">
+            <SearchIcon />
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              placeholder={`搜索${field.label}`}
+              className="flex-1 bg-transparent text-[14px] text-[#030303] placeholder:text-[#999999] outline-none border-none"
+              autoFocus
+            />
+          </div>
+          {multiple && !loading && visibleIds.length > 0 && (
+            <button
+              type="button"
+              onClick={handleSelectAll}
+              className={cn(
+                'flex items-center gap-[10px] w-full h-[34px] px-[10px] rounded-[4px] text-left',
+                'text-[#0265FF] hover:bg-[#EFF0F6]',
+                transCls,
+              )}
+            >
+              <div
+                className={cn(
+                  'w-[14px] h-[14px] rounded-[2px] flex items-center justify-center shrink-0 border',
+                  isAllSelected ? 'bg-[#0265FF] border-[#0265FF]' : 'bg-white border-[#CCCCCC]',
+                )}
+              >
+                {isAllSelected && <CheckIcon />}
+              </div>
+              <span className="text-[14px]">{searching ? '全选搜索结果' : '全选'}</span>
+            </button>
+          )}
+          <div className="flex flex-col gap-0 max-h-[240px] overflow-y-auto">
+            {loading ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">加载中...</div>
+            ) : searching ? (
+              searchResults.length === 0 ? (
+                <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">暂无数据</div>
+              ) : (
+                renderSearchResults()
+              )
+            ) : tree.length === 0 ? (
+              <div className="px-[10px] py-[8px] text-[14px] text-[#999999]">暂无数据</div>
+            ) : (
+              renderTreeNodes(tree, 0)
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </FieldWrapper>
+  );
+}

package/src/components/agent-helper/field-value-input/index.tsx

@@ -5,6 +5,7 @@ import { cn } from '../../../lib/utils';
 
 import { TextInput, NumberInput, TextareaInput, PasswordInput, DateTimeInput, UploadInput, RangeNumberInput, RangeDateTimeInput } from './inputs';
 import { ComboInput, CheckboxGroupInput, RadioGroupInput, AsyncPicker, CascadingAddressInput, TextMultiSelect } from './picker-inputs';
+import { DeptSelect } from './dept-select';
 import { SeparatorDisplay, ButtonDisplay, SubformPlaceholder } from './display';
 
 // ── Props ───────────────────────────────────────────────────────────
@@ -104,11 +105,11 @@ export const FieldValueInput = (props: FieldValueInputProps) => {
     case 'user':
       return <AsyncPicker {...props} kind="user" multiple={operator === 'in' || operator === 'nin'} />;
     case 'dept':
-      return <AsyncPicker {...props} kind="dept" multiple={operator === 'in' || operator === 'nin'} />;
+      return <DeptSelect {...props} kind="dept" multiple={operator === 'in' || operator === 'nin'} />;
     case 'usergroup':
       return <AsyncPicker {...props} kind="usergroup" multiple={operator === 'in' || operator === 'nin' || operator === 'all'} />;
     case 'deptgroup':
-      return <AsyncPicker {...props} kind="deptgroup" multiple={operator === 'in' || operator === 'nin' || operator === 'all'} />;
+      return <DeptSelect {...props} kind="deptgroup" multiple={operator === 'in' || operator === 'nin' || operator === 'all'} />;
 
     // ── Combo / linkdata / linkquery ──
     case 'combo':

package/src/components/agent-helper/field-value-input/picker-inputs.tsx

@@ -33,7 +33,7 @@ function getItems(field: FieldValueInputProps['field']): WidgetItem[] {
     })) as WidgetItem[] ?? [];
 }
 
-function usePortalContainer(attr: string) {
+export function usePortalContainer(attr: string) {
   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
   const setTriggerRef = useCallback(
     (node: HTMLButtonElement | null) => {
@@ -131,7 +131,8 @@ export function ComboInput({ field, value, onChange, disabled, service, showLabe
                   type="button"
                   onClick={() => handleSelect(item.value)}
                   className={cn(
-                    'h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
+                    // shrink-0 防止 flex 容器 max-height 下子项收缩坍缩，改走 overflow 滚动
+                    'shrink-0 h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
                     value === item.value
                       ? 'bg-[#F0F6FF] text-[#0265FF]'
                       : 'text-[#030303] hover:bg-[#EFF0F6]',
@@ -504,7 +505,8 @@ export function AsyncPicker({ field, value, onChange, disabled, service, kind, m
                   type="button"
                   onClick={() => handleSelect(opt)}
                   className={cn(
-                    'flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
+                    // shrink-0 防止 flex 容器 max-height 下子项收缩坍缩，改走 overflow 滚动
+                    'shrink-0 flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
                     isSelected
                       ? 'bg-[#F0F6FF] text-[#0265FF]'
                       : 'text-[#030303] hover:bg-[#EFF0F6]',
@@ -684,7 +686,8 @@ export function TextMultiSelect({ field, value, onChange, disabled, service, sho
                     type="button"
                     onClick={() => handleToggle(opt)}
                     className={cn(
-                      'flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
+                      // shrink-0 防止 flex 容器 max-height 下子项收缩坍缩，改走 overflow 滚动
+                      'shrink-0 flex items-center gap-[10px] h-[34px] px-[10px] rounded-[4px] text-left',
                       checked
                         ? 'bg-[#F0F6FF] text-[#0265FF]'
                         : 'text-[#030303] hover:bg-[#EFF0F6]',
@@ -1027,7 +1030,8 @@ export function AddressInput({ field, value, onChange, disabled, service, showLa
                     setKeyword('');
                   }}
                   className={cn(
-                    'h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
+                    // shrink-0 防止 flex 容器 max-height 下子项收缩坍缩，改走 overflow 滚动
+                    'shrink-0 h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
                     'text-[#030303] hover:bg-[#EFF0F6]',
                     transCls,
                   )}
@@ -1124,7 +1128,8 @@ export function LocationInput({ field, value, onChange, disabled, service, showL
                     setKeyword('');
                   }}
                   className={cn(
-                    'h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
+                    // shrink-0 防止 flex 容器 max-height 下子项收缩坍缩，改走 overflow 滚动
+                    'shrink-0 h-[34px] px-[10px] rounded-[4px] text-left text-[14px] leading-[normal]',
                     'text-[#030303] hover:bg-[#EFF0F6]',
                     transCls,
                   )}

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

@@ -1,27 +1,27 @@
 import { useState, useCallback, useMemo } from 'react';
-import type { relationalOperator } from '@baishuyun/types';
-import { OPERATOR_LABEL_MAP } from '@baishuyun/ai-feat-utils';
+import type { FieldType, relationalOperator } from '@baishuyun/types';
+import { getOperatorLabel } 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 },
+const ALL_OPERATORS: relationalOperator[] = [
+  'eq',
+  'neq',
+  'gt',
+  'lt',
+  'gte',
+  'lte',
+  'contains',
+  'not_contains',
+  'in',
+  'nin',
+  'all',
+  'empty',
+  'not_empty',
+  'range',
+  'like',
+  'unlike',
 ];
 
 export interface IRelationalOperatorSelectProps {
@@ -29,6 +29,13 @@ export interface IRelationalOperatorSelectProps {
   defaultValue?: relationalOperator;
   onChange?: (value: relationalOperator) => void;
   operators?: relationalOperator[];
+  /**
+   * 字段类型：同一操作符在不同字段类型下描述不同
+   * （如部门多选的 in 为「包含任意一个」），未提供时使用默认文案
+   */
+  fieldType?: FieldType;
+  /** 逐操作符的文案覆盖，优先级高于 fieldType 推导 */
+  operatorLabels?: Partial<Record<relationalOperator, string>>;
   borderless?: boolean;
   disabled?: boolean;
   className?: string;
@@ -39,6 +46,8 @@ export const RelationalOperatorSelect = ({
   defaultValue = 'eq',
   onChange,
   operators,
+  fieldType,
+  operatorLabels,
   borderless = false,
   disabled = false,
   className,
@@ -48,10 +57,15 @@ export const RelationalOperatorSelect = ({
   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 list =
+      !operators || operators.length === 0
+        ? ALL_OPERATORS
+        : ALL_OPERATORS.filter((o) => new Set(operators).has(o));
+    return list.map((value) => ({
+      value,
+      label: operatorLabels?.[value] ?? getOperatorLabel(value, fieldType),
+    }));
+  }, [operators, fieldType, operatorLabels]);
 
   const resolvedValue = (() => {
     const v = controlledValue !== undefined ? controlledValue : internalValue;

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

@@ -47,9 +47,13 @@ export function DataTable<TData>({
   return (
     <div
       className={cn(
-        'rounded-[10px] border border-[#e0e0e0] overflow-hidden bg-white',
+        'rounded-[10px] border border-[#e0e0e0] overflow-auto bg-white',
         className,
       )}
+      // 抽屉(vaul/Radix Dialog)经 react-remove-scroll 在 document 级 preventDefault
+      // wheel 事件；shadow DOM 下其 contains 判定失效，内部滚动会被误杀。
+      // 阻断冒泡使其不可见，恢复触摸板滚动（同 form-select 的处理先例）。
+      onWheel={(e) => e.stopPropagation()}
     >
       <table className="w-full h-full border-collapse">
         <thead>
@@ -59,7 +63,7 @@ export function DataTable<TData>({
                 <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',
+                    'sticky top-0 z-[1] 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={{