@baishuyun/ai-design 2.0.47 → 2.0.49

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @baishuyun/ai-design
 
+## 2.0.49
+
+### Patch Changes
+
+- mobile style
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.44
+  - @baishuyun/types@3.0.41
+
+## 2.0.48
+
+### Patch Changes
+
+- fix style and other bugs
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.43
+  - @baishuyun/types@3.0.40
+
 ## 2.0.47
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.0.47",
+  "version": "2.0.49",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -60,8 +60,8 @@
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/ai-feat-utils": "2.0.42",
-    "@baishuyun/types": "3.0.39"
+    "@baishuyun/ai-feat-utils": "2.0.44",
+    "@baishuyun/types": "3.0.41"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -84,7 +84,7 @@
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
     "@baishuyun/tailwind-config": "3.0.9",
-    "@baishuyun/types": "3.0.39",
+    "@baishuyun/types": "3.0.41",
     "@baishuyun/typescript-config": "2.0.9"
   },
   "keywords": [],

package/src/components/agent-drawer.tsx

@@ -17,8 +17,20 @@ export interface AgentDrawerProps {
   trigger?: React.ReactNode;
 }
 
+/** 关闭图标（设计稿 40434:34111，20×20，#121111） */
+const CloseIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+    <path
+      d="M11.2584 9.99867L17.874 3.37975C18.0348 3.21757 18.125 2.99839 18.125 2.76996C18.125 2.54153 18.0348 2.32235 17.874 2.16017L17.8388 2.12495C17.6764 1.96522 17.4578 1.87572 17.23 1.87572C17.0023 1.87572 16.7837 1.96522 16.6213 2.12495L10.0027 8.75414L3.38708 2.12495C3.22461 1.96478 3.00568 1.875 2.77759 1.875C2.54951 1.875 2.33057 1.96478 2.1681 2.12495L2.13143 2.16017C2.05026 2.23946 1.98576 2.33419 1.94172 2.43878C1.89769 2.54338 1.875 2.65573 1.875 2.76923C1.875 2.88272 1.89769 2.99507 1.94172 3.09967C1.98576 3.20427 2.05026 3.299 2.13143 3.37828L8.74706 9.99867L2.13143 16.6205C1.97109 16.7826 1.88115 17.0015 1.88115 17.2296C1.88115 17.4577 1.97109 17.6765 2.13143 17.8386L2.1681 17.8739C2.33014 18.0343 2.5489 18.1243 2.77686 18.1243C3.00482 18.1243 3.22358 18.0343 3.38561 17.8739L10.0027 11.2549L16.6183 17.8739C16.7804 18.0347 16.9995 18.125 17.2278 18.125C17.4561 18.125 17.6752 18.0347 17.8373 17.8739L17.874 17.8386C18.0343 17.6765 18.1243 17.4577 18.1243 17.2296C18.1243 17.0015 18.0343 16.7826 17.874 16.6205L11.2598 9.99867H11.2584Z"
+      fill="#121111"
+    />
+  </svg>
+);
+
 /**
- * 智能体选择抽屉（默认从右侧滑入），复用 AgentSelect 列表，选中后自动关闭。
+ * 智能体选择抽屉（移动端从底部滑出），复用 AgentSelect 列表，选中后自动关闭。
+ * 视觉对齐设计稿 40434:34107：顶部圆角面板 +「全部智能体」18px 标题 +
+ * 关闭按钮 + 搜索框 + 全宽列表行。
  * shadow DOM 兼容逻辑统一由 EnhancedDrawer 处理。
  */
 export const AgentDrawer = ({
@@ -60,14 +72,35 @@ export const AgentDrawer = ({
       <EnhancedDrawer
         open={open}
         onOpenChange={setOpen}
-        direction="right"
-        width={300}
+        direction="bottom"
         title="选择智能体"
+        // DrawerContent 内联 style 强制 borderRadius: 0（会压掉方向圆角），
+        // 用 !important 任意值恢复设计稿的顶部 10px 圆角
+        className="rounded-t-[10px]!"
       >
-        <div className="h-full overflow-hidden p-[12px]">
+        <div className="flex flex-col">
+          {/* 头部：标题 18px Bold + 关闭（设计稿 40434:34109，上 20、下 20、左右 12） */}
+          <div className="flex items-center justify-between px-[12px] pt-[20px] pb-[20px]">
+            <span className="text-[18px] font-bold text-[#030303] leading-[normal]">
+              全部智能体
+            </span>
+            <button
+              type="button"
+              aria-label="关闭"
+              className="shrink-0 size-[20px] border-none bg-transparent p-0 text-[#121111] cursor-pointer"
+              onClick={() => setOpen(false)}
+            >
+              <CloseIcon />
+            </button>
+          </div>
+          {/* 搜索 + 列表（样式见 AgentSelect large；85px ≈ 头部块高度；
+              底部 16px 内边距，设计稿 40654:39900） */}
           <div
-            className="overflow-y-auto"
-            style={{ maxHeight: 'calc(100vh - 60px)', scrollbarWidth: 'none' }}
+            className="overflow-y-auto pb-[16px]"
+            style={{
+              maxHeight: 'calc(100vh - 52px - 85px)',
+              scrollbarWidth: 'none',
+            }}
             data-vaul-no-drag
           >
             <AgentSelect
@@ -76,6 +109,7 @@ export const AgentDrawer = ({
               onSelect={handleSelect}
               showSearch={showSearch}
               showAllItems
+              large
             />
           </div>
         </div>

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

@@ -118,11 +118,11 @@ export const AgentHelperCard = ({
       )}
     >
       {/* Header */}
-      <div className="grid-rows-[max-content] inline-grid leading-[0] place-items-start shrink-0 w-full">
+      <div className="grid-cols-1 grid-rows-[max-content] inline-grid leading-[0] place-items-start shrink-0 w-full">
         <div className="col-1 content-stretch flex h-[42px] items-center justify-between ml-0 mt-0 px-[12px] row-1 w-full">
-          <div className="content-stretch flex gap-[6px] items-center shrink-0 min-w-0">
+          <div className="content-stretch flex gap-[6px] items-center min-w-0">
             <TriggerTypeIcon triggerType={helper.triggerType} size={18} />
-            <p className="leading-[normal] shrink-0 text-[#030303] text-[14px] truncate">
+            <p className="leading-[normal] text-[#030303] text-[14px] truncate">
               {helper.helperName}
             </p>
           </div>

package/src/components/agent-helper/app-select/index.tsx

@@ -440,9 +440,9 @@ export const AppSelect = ({
   const hasMultiSelection = mode === 'multiple' && multiSelectedLabels.length > 0;
 
   const popoverContent = (
-    <div className={classNames('flex flex-col gap-[4px]', contentCls)}>
+    <div className={classNames('flex min-h-0 flex-col gap-[4px]', contentCls)}>
       {/* Search */}
-      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+      <div className="flex shrink-0 items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
         <SearchIcon />
         <input
           type="text"
@@ -462,7 +462,7 @@ export const AppSelect = ({
             setOpen(false);
           }}
           className={cn(
-            'flex items-center w-full h-[34px] rounded-[4px] text-left',
+            'flex shrink-0 items-center w-full h-[34px] rounded-[4px] text-left',
             'px-[10px]',
             transCls,
             'text-[#030303] hover:bg-[#EFF0F6]'
@@ -481,7 +481,7 @@ export const AppSelect = ({
             setOpen(false);
           }}
           className={cn(
-            'flex items-center w-full h-[34px] rounded-[4px] text-left',
+            'flex shrink-0 items-center w-full h-[34px] rounded-[4px] text-left',
             'px-[10px]',
             transCls,
             selectedIds.has(ALL_APPS_VALUE)
@@ -494,7 +494,7 @@ export const AppSelect = ({
       )}
 
       {/* Tree */}
-      <div className={classNames('overflow-y-auto', maxTreeHeightCls)}>
+      <div className={classNames('min-h-0 overflow-y-auto', maxTreeHeightCls)}>
         {filteredNodes.length > 0 ? (
           filteredNodes.map((node) => renderNodeRow(node, 0))
         ) : (
@@ -583,8 +583,8 @@ export const AppSelect = ({
           align="start"
           sideOffset={4}
           portalContainer={portalContainer}
-          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]"
-          style={{ minWidth: triggerWidth || undefined }}
+          className="flex flex-col overflow-hidden !border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]"
+          style={{ minWidth: triggerWidth || undefined, maxHeight: 300 }}
         >
           {popoverContent}
         </PopoverContent>

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

@@ -183,6 +183,7 @@ export const ConditionItem = ({
         value={currentOperator}
         onChange={handleOperatorChange}
         operators={availableOperators}
+        fieldType={fieldType}
         borderless
         disabled={disabled}
         className="w-[120px] shrink-0"

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) => {