@baishuyun/ai-design 2.1.0-alpha.4 → 2.1.0

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

package/src/components/agent-helper/team-wide-form-select/data-adapter.ts

@@ -0,0 +1,109 @@
+import type {
+  IAllAppsAndFormsData,
+  IAppFormListEntry,
+  IAppWithFormList,
+} from '@baishuyun/types';
+import type { TeamWideFormTreeNode, TeamWideFormTreeSection } from './types';
+
+/**
+ * 数据适配：/dashboard/app/form/list 返回 → 树形结构。
+ *
+ * 树层级：应用分组 → 应用 → 表单分组 → 表单（表单分组可嵌套）。
+ * 传入 currentAppId 时拆成「当前应用表单 / 其他应用表单」两个 section，
+ * 当前应用的条目不再带应用/分组层级（平铺到 section 根）。
+ */
+
+/** 条目（含嵌套分组）→ 树节点 */
+function entryToNode(entry: IAppFormListEntry): TeamWideFormTreeNode {
+  const isGroup = entry.type === 'group';
+  return {
+    id: entry.entryId,
+    label: entry.name,
+    type: isGroup ? 'formGroup' : 'form',
+    formIcon: entry.icon,
+    data: isGroup ? undefined : entry,
+    children: entry.child?.map(entryToNode),
+  };
+}
+
+/** 应用 formList → 表单/分组树节点列表（聚合 form/dash/aggregate/etl 各类） */
+function appFormNodes(app: IAppWithFormList): TeamWideFormTreeNode[] {
+  const fl = app.formList;
+  if (!fl) return [];
+
+  const nodes: TeamWideFormTreeNode[] = [];
+  const pushEntries = (entries: IAppFormListEntry[] | null) => {
+    if (entries?.length) {
+      nodes.push(...entries.map(entryToNode));
+    }
+  };
+
+  pushEntries(fl.form);
+  pushEntries(fl.dash);
+  pushEntries(fl.aggregate_table);
+  pushEntries(fl.etl_table);
+
+  return nodes;
+}
+
+/** 应用 → 树节点（含其子树） */
+function appToNode(app: IAppWithFormList): TeamWideFormTreeNode {
+  return {
+    id: app._id,
+    label: app.appname,
+    type: 'app',
+    appIcon: app.style?.icon,
+    children: appFormNodes(app),
+  };
+}
+
+/**
+ * 全量数据 → 树形 section 列表。
+ * - 不传 currentAppId：单个 'all' section，全量树（应用分组→应用→表单分组→表单）
+ * - 传 currentAppId：'current'（当前应用条目，无应用层级）+ 'other'（其余应用全量树）
+ */
+export function appsAndFormsToTree(
+  data: IAllAppsAndFormsData | null | undefined,
+  currentAppId?: string
+): TeamWideFormTreeSection[] {
+  const groups = data?.items ?? [];
+
+  if (!currentAppId) {
+    return [
+      {
+        key: 'all',
+        nodes: groups.map((group) => ({
+          id: group._id,
+          label: group.name,
+          type: 'appGroup' as const,
+          children: (group.apps ?? []).map(appToNode),
+        })),
+      },
+    ];
+  }
+
+  // 当前应用：只取它的条目树（无应用/分组层级）
+  let currentNodes: TeamWideFormTreeNode[] = [];
+  for (const group of groups) {
+    const target = (group.apps ?? []).find((a) => a._id === currentAppId);
+    if (target) {
+      currentNodes = appFormNodes(target);
+      break;
+    }
+  }
+
+  // 其他应用：全量树，剔除当前应用（空应用分组保留）
+  const otherNodes: TeamWideFormTreeNode[] = groups.map((group) => ({
+    id: group._id,
+    label: group.name,
+    type: 'appGroup' as const,
+    children: (group.apps ?? [])
+      .filter((a) => a._id !== currentAppId)
+      .map(appToNode),
+  }));
+
+  return [
+    { key: 'current', title: '当前应用表单', nodes: currentNodes },
+    { key: 'other', title: '其他应用表单', nodes: otherNodes },
+  ];
+}

package/src/components/agent-helper/team-wide-form-select/index.tsx

@@ -0,0 +1,289 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { EnhancedDrawer } from '../../ui/enhanced-drawer';
+import { appsAndFormsToTree } from './data-adapter';
+import { TeamWideFormTreePanel } from './tree-panel';
+import type { IAllAppsAndFormsData } from '@baishuyun/types';
+import type {
+  TeamWideFormSelectChangeResult,
+  TeamWideFormTreeNode,
+} from './types';
+
+// ── Shared ────────────────────────────────────────────────────────
+
+/** 下拉箭头（trigger 用） */
+const DropdownChevron = ({ open }: { open: boolean }) => (
+  <svg
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    className={cn('shrink-0', transCls)}
+    style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
+  >
+    <path d="M4 6L8 10L12 6" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+/** 在 sections 里按 entryId 找选中节点的 label / formIcon */
+function findSelected(
+  sections: ReturnType<typeof appsAndFormsToTree>,
+  entryId?: string
+): { label: string; formIcon?: number } | null {
+  if (!entryId) return null;
+  let found: { label: string; formIcon?: number } | null = null;
+  const walk = (nodes: TeamWideFormTreeNode[]) => {
+    for (const n of nodes) {
+      if (found) return;
+      if (n.type === 'form' && n.id === entryId) {
+        found = { label: n.label, formIcon: n.formIcon };
+        return;
+      }
+      if (n.children) walk(n.children);
+    }
+  };
+  sections.forEach((s) => walk(s.nodes));
+  return found;
+}
+
+interface BaseProps {
+  /** 全量应用+表单数据（/dashboard/app/form/list 返回的 data 字段） */
+  data: IAllAppsAndFormsData | null | undefined;
+  /** 当前应用 ID：传入后按「当前应用表单 / 其他应用表单」分组展示 */
+  currentAppId?: string;
+  /** 选中的 entryId（受控） */
+  value?: string;
+  /** 选中回调（返回 appId + entryId + 原始条目） */
+  onChange?: (result: TeamWideFormSelectChangeResult) => void;
+  searchPlaceholder?: string;
+  className?: string;
+}
+
+// ── 1. 下拉选择 ───────────────────────────────────────────────────
+
+export interface TeamWideFormSelectProps extends BaseProps {
+  /** 非受控默认值 */
+  defaultValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+/**
+ * 全量表单选择（下拉形式）：数据源为一次拉全的应用+表单接口，
+ * 树形展示 应用分组→应用→表单分组→表单。
+ */
+export const TeamWideFormSelect = ({
+  data,
+  currentAppId,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  placeholder = '请选择表单',
+  searchPlaceholder,
+  disabled = false,
+  className,
+}: TeamWideFormSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const [triggerWidth, setTriggerWidth] = useState(0);
+  const triggerBtnRef = useRef<HTMLButtonElement | null>(null);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const sections = useMemo(
+    () => appsAndFormsToTree(data, currentAppId),
+    [data, currentAppId]
+  );
+  const selected = useMemo(
+    () => findSelected(sections, value),
+    [sections, value]
+  );
+
+  const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
+    triggerBtnRef.current = node;
+    if (node) setTriggerWidth(node.offsetWidth);
+    if (!node) {
+      setPortalContainer(null);
+      return;
+    }
+    const rootNode = node.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>(
+        '[data-bs-team-form-select-portal]'
+      );
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-team-form-select-portal', 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+    } else {
+      setPortalContainer(null);
+    }
+  }, []);
+
+  const handleChange = useCallback(
+    (result: TeamWideFormSelectChangeResult) => {
+      if (controlledValue === undefined) setInternalValue(result.entryId);
+      onChange?.(result);
+      setOpen(false);
+    },
+    [controlledValue, onChange]
+  );
+
+  return (
+    <div className={cn('relative', className)}>
+      <Popover
+        open={open}
+        onOpenChange={(next) => {
+          if (disabled) return;
+          setOpen(next);
+          if (next && triggerBtnRef.current) {
+            setTriggerWidth(triggerBtnRef.current.offsetWidth);
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] gap-2.5 px-[10px]',
+              'bg-white border border-[#E0E0E0] rounded-[4px]',
+              'text-left cursor-pointer hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open && 'border-[#0265FF]',
+              transCls
+            )}
+          >
+            <span
+              className={cn(
+                'text-[14px] leading-[normal] truncate',
+                selected ? 'text-[#030303]' : 'text-[#999999]'
+              )}
+            >
+              {selected?.label ?? placeholder}
+            </span>
+            <DropdownChevron open={open} />
+          </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-[12px]"
+          style={{ minWidth: triggerWidth || undefined }}
+        >
+          <TeamWideFormTreePanel
+            sections={sections}
+            value={value}
+            onSelect={handleChange}
+            searchPlaceholder={searchPlaceholder}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+// ── 2. 左侧滑入抽屉 ───────────────────────────────────────────────
+
+export interface TeamWideFormDrawerProps extends BaseProps {
+  /** 受控开关 */
+  open?: boolean;
+  /** 非受控默认开关 */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 触发器（可选；不传则完全由 open 控制） */
+  trigger?: React.ReactNode;
+  /** 数据加载状态：加载中/失败时替代树区域展示（不传则按 data 直接渲染树） */
+  status?: 'loading' | 'error';
+  /** status === 'error' 时展示重试按钮，点击回调 */
+  onRetry?: () => void;
+}
+
+/**
+ * 全量表单选择（左侧滑入抽屉）：选中表单后自动关闭。
+ * 视觉对齐 Figma：左侧 300px 白色面板 + 半透明蒙版。
+ */
+export const TeamWideFormDrawer = ({
+  data,
+  currentAppId,
+  value,
+  onChange,
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  searchPlaceholder,
+  trigger,
+  status,
+  onRetry,
+}: TeamWideFormDrawerProps) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const sections = useMemo(
+    () => appsAndFormsToTree(data, currentAppId),
+    [data, currentAppId]
+  );
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (controlledOpen === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+
+  const handleChange = useCallback(
+    (result: TeamWideFormSelectChangeResult) => {
+      onChange?.(result);
+      setOpen(false);
+    },
+    [onChange, setOpen]
+  );
+
+  return (
+    <>
+      {trigger && <span onClick={() => setOpen(true)}>{trigger}</span>}
+      <EnhancedDrawer
+        open={open}
+        onOpenChange={setOpen}
+        direction="left"
+        width={300}
+        title="切换表单"
+      >
+        <div className="h-full overflow-hidden p-[12px]">
+          {status === 'error' ? (
+            <div className="flex flex-col items-center justify-center h-full gap-[12px]">
+              <span className="text-[12px] text-[#999999]">应用/表单加载失败</span>
+              {onRetry && (
+                <button
+                  type="button"
+                  onClick={onRetry}
+                  className="h-[30px] px-[16px] rounded-[4px] border border-[#E0E0E0] text-[14px] text-[#0265FF] active:bg-[#F0F6FF]"
+                >
+                  重试
+                </button>
+              )}
+            </div>
+          ) : status === 'loading' ? (
+            <div className="flex items-center justify-center h-full text-[12px] text-[#999999]">
+              加载中…
+            </div>
+          ) : (
+            <TeamWideFormTreePanel
+              sections={sections}
+              value={value}
+              onSelect={handleChange}
+              searchPlaceholder={searchPlaceholder}
+              maxHeight="calc(100vh - 60px)"
+            />
+          )}
+        </div>
+      </EnhancedDrawer>
+    </>
+  );
+};

package/src/components/agent-helper/team-wide-form-select/tree-panel.tsx

@@ -0,0 +1,180 @@
+import { useCallback } from 'react';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { SearchIcon } from '../../bs-icons';
+import { AppIcon, FontIcon } from '../../font-icon';
+import { useFormTree } from './use-form-tree';
+import type {
+  TeamWideFormSelectChangeResult,
+  TeamWideFormTreeNode,
+  TeamWideFormTreeSection,
+} from './types';
+
+// ── Inline Icons（与 app-select / form-select 保持一致） ──────────
+
+/** 文件夹/分组图标 */
+const FolderIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path
+      d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z"
+      fill="#6F81BD"
+    />
+  </svg>
+);
+
+/** 展开/收起箭头 */
+const ToggleIcon = ({ expanded }: { expanded: boolean }) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    className={cn('shrink-0', transCls)}
+    style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
+  >
+    <path
+      d="M6 8L9 11L12 8"
+      stroke="#666666"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// ── Props ─────────────────────────────────────────────────────────
+
+export interface TeamWideFormTreePanelProps {
+  sections: TeamWideFormTreeSection[];
+  /** 当前选中的 entryId */
+  value?: string;
+  onSelect: (result: TeamWideFormSelectChangeResult) => void;
+  searchPlaceholder?: string;
+  /** 树区最大高度，超出滚动（数字按 px，或任意 CSS 长度如 calc(100vh-60px)） */
+  maxHeight?: number | string;
+  className?: string;
+}
+
+// ── Component ─────────────────────────────────────────────────────
+
+/**
+ * 全量表单选择的树形主体（搜索 + 树），下拉与抽屉两种交互共用。
+ * 视觉对齐 Figma：行高 34px、每级缩进 22px、选中行 bg #EFF0F6。
+ */
+export const TeamWideFormTreePanel = ({
+  sections,
+  value,
+  onSelect,
+  searchPlaceholder = '输入应用/表单名称来搜索',
+  maxHeight = 400,
+  className,
+}: TeamWideFormTreePanelProps) => {
+  const {
+    searchQuery,
+    setSearchQuery,
+    filteredSections,
+    isExpanded,
+    toggleExpanded,
+    searching,
+    hasResult,
+  } = useFormTree(sections);
+
+  const handleSelect = useCallback(
+    (node: TeamWideFormTreeNode) => {
+      const hasChildren = node.children && node.children.length > 0;
+      // 分组/应用行：切换展开；叶子（表单）：选中
+      if (hasChildren || node.type !== 'form') {
+        if (hasChildren) toggleExpanded(node.id);
+        return;
+      }
+      if (node.data) {
+        onSelect({
+          appId: node.data.appId,
+          entryId: node.data.entryId,
+          form: node.data,
+        });
+      }
+    },
+    [onSelect, toggleExpanded]
+  );
+
+  const renderNodeRow = (node: TeamWideFormTreeNode, depth: number): React.ReactNode => {
+    const hasChildren = node.children && node.children.length > 0;
+    const expanded = searching || isExpanded(node.id);
+    const isSelected = node.type === 'form' && value === node.id;
+    const leftPad = depth * 22 + 10; // 10, 32, 54, 78, 102...
+
+    return (
+      <div key={node.id}>
+        <button
+          type="button"
+          onClick={() => handleSelect(node)}
+          className={cn(
+            'flex items-center gap-[6px] w-full h-[34px] rounded-[4px] text-left pr-[10px] py-[10px]',
+            transCls,
+            isSelected ? 'bg-[#EFF0F6] text-[#030303]' : 'text-[#030303] hover:bg-[#EFF0F6]'
+          )}
+          style={{ paddingLeft: `${leftPad}px` }}
+        >
+          {hasChildren && <ToggleIcon expanded={expanded} />}
+          {node.type === 'appGroup' || node.type === 'formGroup' ? <FolderIcon /> : null}
+          {node.type === 'app' && node.appIcon != null && <AppIcon name={node.appIcon} />}
+          {node.type === 'form' && node.formIcon != null && <FontIcon name={node.formIcon} />}
+          <span className="text-[14px] truncate leading-[normal] flex-1 min-w-0">{node.label}</span>
+        </button>
+
+        {hasChildren && expanded && (
+          <div>{node.children!.map((child) => renderNodeRow(child, depth + 1))}</div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-[4px]', className)}>
+      {/* 搜索框 */}
+      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+        <SearchIcon />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={searchPlaceholder}
+          className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
+        />
+      </div>
+
+      {/* 树区（data-vaul-no-drag：滚动交给原生；抽屉侧 modal=false + dismissible=false
+          关掉 body 滚动锁与 vaul 拖拽指针捕获，此处无需额外覆盖） */}
+      <div
+        className="overflow-y-auto"
+        style={{ maxHeight, scrollbarWidth: 'none' }}
+        data-vaul-no-drag
+      >
+        {hasResult ? (
+          filteredSections.map((section) => (
+            <div key={section.key}>
+              {/* section 标题（当前应用表单 / 其他应用表单） */}
+              {section.title && (
+                <div className="flex flex-col justify-between h-[32px] pr-[10px] pt-[9px]">
+                  <div className="flex items-center gap-[6px]">
+                    <FolderIcon />
+                    <span className="text-[12px] text-[#666666] leading-[normal]">
+                      {section.title}
+                    </span>
+                  </div>
+                  <div className="h-px bg-[#E0E0E0] mt-[7px]" />
+                </div>
+              )}
+              {section.nodes.map((node) => renderNodeRow(node, 0))}
+            </div>
+          ))
+        ) : (
+          <div className="flex items-center justify-center h-[60px] text-[12px] text-[#999999]">
+            {searching ? '未找到相关应用/表单' : '暂无可选表单'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};