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

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

@@ -1,466 +1,466 @@
-import { useState, useCallback, useMemo, useRef, JSX } from 'react';
-import { cn } from '../../../lib/utils';
-import { transCls } from '../../../const/ui';
-import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
-import type { IField, FieldType, ISubformField } from '@baishuyun/types';
-import { SearchIcon } from '../../bs-icons';
-
-const ToggleIcon = ({ expanded }: { expanded: boolean }) => (
-  <svg
-    width="16" height="16" viewBox="0 0 16 16" fill="none"
-    className={cn('shrink-0', transCls)}
-    style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
-  >
-    <path d="M5 7L8 10L11 7" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-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>
-);
-
-// ── FieldType → Badge Mapping ─────────────────────────────────────
-
-interface BadgeStyle { label: string; bgColor: string; textColor: string }
-
-const FIELD_TYPE_BADGE_MAP: Partial<Record<FieldType, BadgeStyle>> = {};
-
-const textTypes: FieldType[] = [
-  'text', 'textarea', 'password', 'radio', 'radiogroup', 'combo', 'combocheck',
-  'checkboxgroup', 'address', 'location', 'separator', 'user',
-  'usergroup', 'dept', 'deptgroup', 'sn', 'formula', 'flowState', 'flowstate',
-  'subform', 'unknown',
-];
-const numberTypes: FieldType[] = ['number'];
-const datetimeTypes: FieldType[] = ['datetime'];
-const fileTypes: FieldType[] = ['upload', 'image', 'linkdata', 'linkquery', 'dataload', 'signature'];
-
-for (const t of textTypes) {
-  FIELD_TYPE_BADGE_MAP[t] = { label: '文本', bgColor: '#F0F6FF', textColor: '#0265FF' };
-}
-for (const t of numberTypes) {
-  FIELD_TYPE_BADGE_MAP[t] = { label: '数字', bgColor: '#FDF4D9', textColor: '#F4B700' };
-}
-for (const t of datetimeTypes) {
-  FIELD_TYPE_BADGE_MAP[t] = { label: '日期', bgColor: '#EEDEFE', textColor: '#8E24F9' };
-}
-for (const t of fileTypes) {
-  FIELD_TYPE_BADGE_MAP[t] = { label: '附件', bgColor: '#DDF6DD', textColor: '#1EC31E' };
-}
-
-FIELD_TYPE_BADGE_MAP['button'] = { label: '按钮', bgColor: '#DDF6DD', textColor: '#1EC31E' };
-
-
-// ── Type Badge Component ──────────────────────────────────────────
-
-function TypeBadge({ style }: { style: BadgeStyle }) {
-  return (
-    <span
-      className="text-[12px] rounded-[100px] h-[20px] px-[6px] flex items-center justify-center shrink-0 leading-[normal]"
-      style={{ backgroundColor: style.bgColor, color: style.textColor }}
-    >
-      {style.label}
-    </span>
-  );
-}
-
-// ── Tree Node Type ────────────────────────────────────────────────
-
-interface FieldTreeNode {
-  key: string;
-  label: string;
-  field: IField | null;
-  fieldType?: FieldType;
-  depth: number;
-  children: FieldTreeNode[];
-  isExpandable?: boolean;
-  widgetName?: string;
-}
-
-// ── Tree Builder ──────────────────────────────────────────────────
-
-function buildNodeKey(field: IField, index: number): string {
-  return field.widget?.widgetName || String(index);
-}
-
-function buildItemNodeKey(parentKey: string, item: { widget?: { widgetName?: string }; value?: unknown; text?: string }, index: number): string {
-  return (item as { widget?: { widgetName?: string } }).widget?.widgetName || `${parentKey}-${index}`;
-}
-
-function buildFieldTree(fields: IField[], searchQuery: string): FieldTreeNode[] {
-  const q = searchQuery.toLowerCase().trim();
-
-  const nodes: FieldTreeNode[] = [];
-
-  for (let i = 0; i < fields.length; i++) {
-    const field = fields[i];
-    const label = field.label;
-    const parentWidgetName = field.widget?.widgetName;
-
-    // Only items with a 'widget' property (ISubformField) are expandable sub-fields
-    const items = field.widget?.items;
-    const subformItems = items?.filter(
-      (item): item is ISubformField => 'widget' in item
-    );
-    const hasItems = subformItems && subformItems.length > 0;
-    const rootKey = parentWidgetName || buildNodeKey(field, i);
-
-    const children: FieldTreeNode[] = [];
-    if (hasItems) {
-      for (let j = 0; j < subformItems!.length; j++) {
-        const item = subformItems![j];
-        const childWidgetName = item.widget?.widgetName || `${rootKey}-item-${j}`;
-        const fullWidgetName = `${parentWidgetName}.${childWidgetName}`;
-        children.push({
-          key: fullWidgetName,
-          label: item.label || `选项 ${j + 1}`,
-          field: field,
-          fieldType: item.widget?.type,
-          depth: 1,
-          children: [],
-          isExpandable: false,
-          widgetName: fullWidgetName,
-        });
-      }
-    }
-
-    const labelMatch = !q || label.toLowerCase().includes(q);
-    const childMatch = children.some((c) => c?.label?.toLowerCase().includes(q));
-
-    if (labelMatch || childMatch) {
-      nodes.push({
-        key: rootKey,
-        label,
-        field,
-        fieldType: field.widget?.type,
-        depth: 0,
-        children,
-        isExpandable: hasItems,
-        widgetName: parentWidgetName,
-      });
-    }
-  }
-
-  return nodes;
-}
-
-// ── FieldSelectPopover ────────────────────────────────────────────
-
-export interface FieldSelectPopoverProps {
-  fields: IField[];
-  selectedKey?: string;
-  onSelect: (field: IField, nodeKey: string) => void;
-  searchPlaceholder?: string;
-  showTypeBadge?: boolean;
-  width?: number;
-  className?: string;
-}
-
-export const FieldSelectPopover = ({
-  fields,
-  selectedKey,
-  onSelect,
-  searchPlaceholder = '搜索',
-  showTypeBadge = false,
-  width,
-  className,
-}: FieldSelectPopoverProps) => {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(() => {
-    const s = new Set<string>();
-    for (let i = 0; i < fields.length; i++) {
-      if (fields[i].widget?.items?.length) {
-        s.add(buildNodeKey(fields[i], i));
-      }
-    }
-    return s;
-  });
-
-  const tree = useMemo(
-    () => buildFieldTree(fields, searchQuery),
-    [fields, searchQuery]
-  );
-
-  const toggleExpanded = useCallback((key: string) => {
-    setExpandedKeys((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  }, []);
-
-  const handleSelect = useCallback(
-    (node: FieldTreeNode) => {
-      if (node.isExpandable) return;
-      if (node.field) {
-        onSelect(node.field, node.key);
-      }
-    },
-    [onSelect]
-  );
-
-  const renderNodeRow = useCallback(
-    (node: FieldTreeNode): JSX.Element => {
-      const isExpanded = expandedKeys.has(node.key);
-      const isSelected = selectedKey != null && node.key === selectedKey;
-      const paddingLeft = node.depth * 22 + 10;
-      const badge = node.fieldType && showTypeBadge
-        ? FIELD_TYPE_BADGE_MAP[node.fieldType]
-        : undefined;
-
-      const handleRowClick = () => {
-        if (node.isExpandable) {
-          toggleExpanded(node.key);
-        } else {
-          handleSelect(node);
-        }
-      };
-
-      const handleToggleClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        toggleExpanded(node.key);
-      };
-
-      return (
-        <div key={node.key}>
-          <button
-            type="button"
-            onClick={handleRowClick}
-            className={cn(
-              'flex items-center justify-between w-full h-[34px] rounded-[4px] text-left',
-              'pr-[10px]',
-              transCls,
-              isSelected
-                ? 'bg-[#F0F6FF] text-[#0265FF]'
-                : 'text-[#030303] hover:bg-[#EFF0F6]'
-            )}
-            style={{ paddingLeft: `${paddingLeft}px`, paddingTop: 7, paddingBottom: 7 }}
-          >
-            <div className="flex items-center gap-[8px] min-w-0 flex-1">
-              {/* Toggle arrow or spacer */}
-              {node.isExpandable ? (
-                <span onClick={handleToggleClick} className="flex items-center cursor-pointer">
-                  <ToggleIcon expanded={isExpanded} />
-                </span>
-              ) : node.depth > 0 ? (
-                <span className="w-[16px] h-[16px] shrink-0" />
-              ) : null}
-
-              <span className="text-[14px] truncate leading-[normal]">
-                {node.label}
-              </span>
-            </div>
-
-            {badge && <TypeBadge style={badge} />}
-          </button>
-
-          {/* Children when expanded */}
-          {node.isExpandable && isExpanded && (
-            <div>
-              {node.children.map((child) => renderNodeRow(child))}
-            </div>
-          )}
-        </div>
-      );
-    },
-    [expandedKeys, selectedKey, showTypeBadge, handleSelect, toggleExpanded]
-  );
-
-  return (
-    <div
-      className={cn(
-        'bg-white drop-shadow-[0px_0px_8px_rgba(0,0,0,0.1)] rounded-[4px] p-[4px]',
-        'flex flex-col gap-[4px]',
-        className
-      )}
-      style={width ? { width } : undefined}
-    >
-      {/* Search input */}
-      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[34px] px-[10px] py-[7px] shrink-0">
-        <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>
-
-      {/* Field list */}
-      <div className="max-h-[400px] overflow-y-auto flex flex-col">
-        {tree.length > 0 ? (
-          tree.map((node) => renderNodeRow(node))
-        ) : (
-          <div className="flex items-center justify-center h-[60px] text-[12px] text-[#999999]">
-            {searchQuery.trim() ? '未找到相关字段' : '暂无字段'}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-// ── Key → Label Lookup ───────────────────────────────────────────
-
-function buildKeyLabelMap(fields: IField[]): Map<string, string> {
-  const map = new Map<string, string>();
-  for (let i = 0; i < fields.length; i++) {
-    const field = fields[i];
-    const rootKey = buildNodeKey(field, i);
-    map.set(rootKey, field.label);
-    const items = field.widget?.items;
-    if (items) {
-      for (let j = 0; j < items.length; j++) {
-        const item = items[j];
-        // For ISubformField items, use dot-joined widgetName as key
-        if ('widget' in item) {
-          const fullKey = `${field.widget?.widgetName}.${item.widget?.widgetName}`;
-          map.set(fullKey, item.label || `选项 ${j + 1}`);
-        } else {
-          const childKey = buildItemNodeKey(rootKey, item, j);
-          map.set(childKey, item.text || `选项 ${j + 1}`);
-        }
-      }
-    }
-  }
-  return map;
-}
-
-function getLabelByKey(fields: IField[], key: string | undefined): string | null {
-  if (!key) return null;
-  return buildKeyLabelMap(fields).get(key) ?? null;
-}
-
-// ── FieldSelect ───────────────────────────────────────────────────
-
-export interface FieldSelectProps {
-  fields: IField[];
-  value?: string;
-  defaultValue?: string;
-  onChange?: (field: IField, nodeKey: string) => void;
-  placeholder?: string;
-  searchPlaceholder?: string;
-  disabled?: boolean;
-  showTypeBadge?: boolean;
-  className?: string;
-}
-
-export const FieldSelect = ({
-  fields,
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  placeholder = '请选择字段',
-  searchPlaceholder = '输入字段名称来搜索',
-  disabled = false,
-  showTypeBadge = true,
-  className,
-}: FieldSelectProps) => {
-  const [open, setOpen] = useState(false);
-  const [internalSelectedKey, setInternalSelectedKey] = useState<string | undefined>(defaultValue);
-  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
-  const [triggerWidth, setTriggerWidth] = useState<number>(0);
-  const triggerBtnRef = useRef<HTMLButtonElement | null>(null);
-
-  const selectedKey = controlledValue !== undefined ? controlledValue : internalSelectedKey;
-  const displayLabel = useMemo(
-    () => getLabelByKey(fields, selectedKey),
-    [fields, selectedKey]
-  );
-
-  const handleSelect = useCallback(
-    (field: IField, nodeKey: string) => {
-      if (controlledValue === undefined) {
-        setInternalSelectedKey(nodeKey);
-      }
-      onChange?.(field, nodeKey);
-      setOpen(false);
-    },
-    [controlledValue, onChange]
-  );
-
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (disabled) return;
-      setOpen(nextOpen);
-      if (nextOpen && triggerBtnRef.current) {
-        setTriggerWidth(triggerBtnRef.current.offsetWidth);
-      }
-    },
-    [disabled]
-  );
-
-  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-field-select-portal]');
-      if (existing) { setPortalContainer(existing); return; }
-      const container = document.createElement('div');
-      container.setAttribute('data-bs-field-select-portal', 'true');
-      rootNode.appendChild(container);
-      setPortalContainer(container);
-    } else {
-      setPortalContainer(null);
-    }
-  }, []);
-
-  return (
-    <div className={cn('relative', className)}>
-      <Popover open={open} onOpenChange={handleOpenChange}>
-        <PopoverTrigger asChild>
-          <button
-            ref={setTriggerRef}
-            type="button"
-            disabled={disabled}
-            className={cn(
-              'flex items-center justify-between w-full h-[34px]',
-              'bg-white border rounded-[4px]',
-              'px-[10px] py-[7px]',
-              'text-left cursor-pointer',
-              'hover:border-[#0265FF]',
-              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
-              open ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
-              transCls
-            )}
-          >
-            <span
-              className={cn(
-                'text-[14px] leading-[normal] truncate',
-                displayLabel ? 'text-[#030303]' : 'text-[#999999]'
-              )}
-            >
-              {displayLabel ?? placeholder}
-            </span>
-            <DropdownChevron open={open} />
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          sideOffset={4}
-          portalContainer={portalContainer}
-          className="!border-0 !p-0"
-          style={{ minWidth: triggerWidth || undefined }}
-        >
-          <FieldSelectPopover
-            fields={fields}
-            selectedKey={selectedKey}
-            onSelect={handleSelect}
-            searchPlaceholder={searchPlaceholder}
-            showTypeBadge={showTypeBadge}
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
+import { useState, useCallback, useMemo, useRef, JSX } from 'react';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import type { IField, FieldType, ISubformField } from '@baishuyun/types';
+import { SearchIcon } from '../../bs-icons';
+
+const ToggleIcon = ({ expanded }: { expanded: boolean }) => (
+  <svg
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    className={cn('shrink-0', transCls)}
+    style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
+  >
+    <path d="M5 7L8 10L11 7" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+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>
+);
+
+// ── FieldType → Badge Mapping ─────────────────────────────────────
+
+interface BadgeStyle { label: string; bgColor: string; textColor: string }
+
+const FIELD_TYPE_BADGE_MAP: Partial<Record<FieldType, BadgeStyle>> = {};
+
+const textTypes: FieldType[] = [
+  'text', 'textarea', 'password', 'radio', 'radiogroup', 'combo', 'combocheck',
+  'checkboxgroup', 'address', 'location', 'separator', 'user',
+  'usergroup', 'dept', 'deptgroup', 'sn', 'formula', 'flowState', 'flowstate',
+  'subform', 'unknown',
+];
+const numberTypes: FieldType[] = ['number'];
+const datetimeTypes: FieldType[] = ['datetime'];
+const fileTypes: FieldType[] = ['upload', 'image', 'linkdata', 'linkquery', 'dataload', 'signature'];
+
+for (const t of textTypes) {
+  FIELD_TYPE_BADGE_MAP[t] = { label: '文本', bgColor: '#F0F6FF', textColor: '#0265FF' };
+}
+for (const t of numberTypes) {
+  FIELD_TYPE_BADGE_MAP[t] = { label: '数字', bgColor: '#FDF4D9', textColor: '#F4B700' };
+}
+for (const t of datetimeTypes) {
+  FIELD_TYPE_BADGE_MAP[t] = { label: '日期', bgColor: '#EEDEFE', textColor: '#8E24F9' };
+}
+for (const t of fileTypes) {
+  FIELD_TYPE_BADGE_MAP[t] = { label: '附件', bgColor: '#DDF6DD', textColor: '#1EC31E' };
+}
+
+FIELD_TYPE_BADGE_MAP['button'] = { label: '按钮', bgColor: '#DDF6DD', textColor: '#1EC31E' };
+
+
+// ── Type Badge Component ──────────────────────────────────────────
+
+function TypeBadge({ style }: { style: BadgeStyle }) {
+  return (
+    <span
+      className="text-[12px] rounded-[100px] h-[20px] px-[6px] flex items-center justify-center shrink-0 leading-[normal]"
+      style={{ backgroundColor: style.bgColor, color: style.textColor }}
+    >
+      {style.label}
+    </span>
+  );
+}
+
+// ── Tree Node Type ────────────────────────────────────────────────
+
+interface FieldTreeNode {
+  key: string;
+  label: string;
+  field: IField | null;
+  fieldType?: FieldType;
+  depth: number;
+  children: FieldTreeNode[];
+  isExpandable?: boolean;
+  widgetName?: string;
+}
+
+// ── Tree Builder ──────────────────────────────────────────────────
+
+function buildNodeKey(field: IField, index: number): string {
+  return field.widget?.widgetName || String(index);
+}
+
+function buildItemNodeKey(parentKey: string, item: { widget?: { widgetName?: string }; value?: unknown; text?: string }, index: number): string {
+  return (item as { widget?: { widgetName?: string } }).widget?.widgetName || `${parentKey}-${index}`;
+}
+
+function buildFieldTree(fields: IField[], searchQuery: string): FieldTreeNode[] {
+  const q = searchQuery.toLowerCase().trim();
+
+  const nodes: FieldTreeNode[] = [];
+
+  for (let i = 0; i < fields.length; i++) {
+    const field = fields[i];
+    const label = field.label;
+    const parentWidgetName = field.widget?.widgetName;
+
+    // Only items with a 'widget' property (ISubformField) are expandable sub-fields
+    const items = field.widget?.items;
+    const subformItems = items?.filter(
+      (item): item is ISubformField => 'widget' in item
+    );
+    const hasItems = subformItems && subformItems.length > 0;
+    const rootKey = parentWidgetName || buildNodeKey(field, i);
+
+    const children: FieldTreeNode[] = [];
+    if (hasItems) {
+      for (let j = 0; j < subformItems!.length; j++) {
+        const item = subformItems![j];
+        const childWidgetName = item.widget?.widgetName || `${rootKey}-item-${j}`;
+        const fullWidgetName = `${parentWidgetName}.${childWidgetName}`;
+        children.push({
+          key: fullWidgetName,
+          label: item.label || `选项 ${j + 1}`,
+          field: field,
+          fieldType: item.widget?.type,
+          depth: 1,
+          children: [],
+          isExpandable: false,
+          widgetName: fullWidgetName,
+        });
+      }
+    }
+
+    const labelMatch = !q || label.toLowerCase().includes(q);
+    const childMatch = children.some((c) => c?.label?.toLowerCase().includes(q));
+
+    if (labelMatch || childMatch) {
+      nodes.push({
+        key: rootKey,
+        label,
+        field,
+        fieldType: field.widget?.type,
+        depth: 0,
+        children,
+        isExpandable: hasItems,
+        widgetName: parentWidgetName,
+      });
+    }
+  }
+
+  return nodes;
+}
+
+// ── FieldSelectPopover ────────────────────────────────────────────
+
+export interface FieldSelectPopoverProps {
+  fields: IField[];
+  selectedKey?: string;
+  onSelect: (field: IField, nodeKey: string) => void;
+  searchPlaceholder?: string;
+  showTypeBadge?: boolean;
+  width?: number;
+  className?: string;
+}
+
+export const FieldSelectPopover = ({
+  fields,
+  selectedKey,
+  onSelect,
+  searchPlaceholder = '搜索',
+  showTypeBadge = false,
+  width,
+  className,
+}: FieldSelectPopoverProps) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(() => {
+    const s = new Set<string>();
+    for (let i = 0; i < fields.length; i++) {
+      if (fields[i].widget?.items?.length) {
+        s.add(buildNodeKey(fields[i], i));
+      }
+    }
+    return s;
+  });
+
+  const tree = useMemo(
+    () => buildFieldTree(fields, searchQuery),
+    [fields, searchQuery]
+  );
+
+  const toggleExpanded = useCallback((key: string) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  const handleSelect = useCallback(
+    (node: FieldTreeNode) => {
+      if (node.isExpandable) return;
+      if (node.field) {
+        onSelect(node.field, node.key);
+      }
+    },
+    [onSelect]
+  );
+
+  const renderNodeRow = useCallback(
+    (node: FieldTreeNode): JSX.Element => {
+      const isExpanded = expandedKeys.has(node.key);
+      const isSelected = selectedKey != null && node.key === selectedKey;
+      const paddingLeft = node.depth * 22 + 10;
+      const badge = node.fieldType && showTypeBadge
+        ? FIELD_TYPE_BADGE_MAP[node.fieldType]
+        : undefined;
+
+      const handleRowClick = () => {
+        if (node.isExpandable) {
+          toggleExpanded(node.key);
+        } else {
+          handleSelect(node);
+        }
+      };
+
+      const handleToggleClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        toggleExpanded(node.key);
+      };
+
+      return (
+        <div key={node.key}>
+          <button
+            type="button"
+            onClick={handleRowClick}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] rounded-[4px] text-left',
+              'pr-[10px]',
+              transCls,
+              isSelected
+                ? 'bg-[#F0F6FF] text-[#0265FF]'
+                : 'text-[#030303] hover:bg-[#EFF0F6]'
+            )}
+            style={{ paddingLeft: `${paddingLeft}px`, paddingTop: 7, paddingBottom: 7 }}
+          >
+            <div className="flex items-center gap-[8px] min-w-0 flex-1">
+              {/* Toggle arrow or spacer */}
+              {node.isExpandable ? (
+                <span onClick={handleToggleClick} className="flex items-center cursor-pointer">
+                  <ToggleIcon expanded={isExpanded} />
+                </span>
+              ) : node.depth > 0 ? (
+                <span className="w-[16px] h-[16px] shrink-0" />
+              ) : null}
+
+              <span className="text-[14px] truncate leading-[normal]">
+                {node.label}
+              </span>
+            </div>
+
+            {badge && <TypeBadge style={badge} />}
+          </button>
+
+          {/* Children when expanded */}
+          {node.isExpandable && isExpanded && (
+            <div>
+              {node.children.map((child) => renderNodeRow(child))}
+            </div>
+          )}
+        </div>
+      );
+    },
+    [expandedKeys, selectedKey, showTypeBadge, handleSelect, toggleExpanded]
+  );
+
+  return (
+    <div
+      className={cn(
+        'bg-white drop-shadow-[0px_0px_8px_rgba(0,0,0,0.1)] rounded-[4px] p-[4px]',
+        'flex flex-col gap-[4px]',
+        className
+      )}
+      style={width ? { width } : undefined}
+    >
+      {/* Search input */}
+      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[34px] px-[10px] py-[7px] shrink-0">
+        <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>
+
+      {/* Field list */}
+      <div className="max-h-[400px] overflow-y-auto flex flex-col">
+        {tree.length > 0 ? (
+          tree.map((node) => renderNodeRow(node))
+        ) : (
+          <div className="flex items-center justify-center h-[60px] text-[12px] text-[#999999]">
+            {searchQuery.trim() ? '未找到相关字段' : '暂无字段'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ── Key → Label Lookup ───────────────────────────────────────────
+
+function buildKeyLabelMap(fields: IField[]): Map<string, string> {
+  const map = new Map<string, string>();
+  for (let i = 0; i < fields.length; i++) {
+    const field = fields[i];
+    const rootKey = buildNodeKey(field, i);
+    map.set(rootKey, field.label);
+    const items = field.widget?.items;
+    if (items) {
+      for (let j = 0; j < items.length; j++) {
+        const item = items[j];
+        // For ISubformField items, use dot-joined widgetName as key
+        if ('widget' in item) {
+          const fullKey = `${field.widget?.widgetName}.${item.widget?.widgetName}`;
+          map.set(fullKey, item.label || `选项 ${j + 1}`);
+        } else {
+          const childKey = buildItemNodeKey(rootKey, item, j);
+          map.set(childKey, item.text || `选项 ${j + 1}`);
+        }
+      }
+    }
+  }
+  return map;
+}
+
+function getLabelByKey(fields: IField[], key: string | undefined): string | null {
+  if (!key) return null;
+  return buildKeyLabelMap(fields).get(key) ?? null;
+}
+
+// ── FieldSelect ───────────────────────────────────────────────────
+
+export interface FieldSelectProps {
+  fields: IField[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (field: IField, nodeKey: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  disabled?: boolean;
+  showTypeBadge?: boolean;
+  className?: string;
+}
+
+export const FieldSelect = ({
+  fields,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  placeholder = '请选择字段',
+  searchPlaceholder = '输入字段名称来搜索',
+  disabled = false,
+  showTypeBadge = true,
+  className,
+}: FieldSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [internalSelectedKey, setInternalSelectedKey] = useState<string | undefined>(defaultValue);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const [triggerWidth, setTriggerWidth] = useState<number>(0);
+  const triggerBtnRef = useRef<HTMLButtonElement | null>(null);
+
+  const selectedKey = controlledValue !== undefined ? controlledValue : internalSelectedKey;
+  const displayLabel = useMemo(
+    () => getLabelByKey(fields, selectedKey),
+    [fields, selectedKey]
+  );
+
+  const handleSelect = useCallback(
+    (field: IField, nodeKey: string) => {
+      if (controlledValue === undefined) {
+        setInternalSelectedKey(nodeKey);
+      }
+      onChange?.(field, nodeKey);
+      setOpen(false);
+    },
+    [controlledValue, onChange]
+  );
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (disabled) return;
+      setOpen(nextOpen);
+      if (nextOpen && triggerBtnRef.current) {
+        setTriggerWidth(triggerBtnRef.current.offsetWidth);
+      }
+    },
+    [disabled]
+  );
+
+  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-field-select-portal]');
+      if (existing) { setPortalContainer(existing); return; }
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-field-select-portal', 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+    } else {
+      setPortalContainer(null);
+    }
+  }, []);
+
+  return (
+    <div className={cn('relative', className)}>
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <button
+            ref={setTriggerRef}
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px]',
+              'bg-white border rounded-[4px]',
+              'px-[10px] py-[7px]',
+              'text-left cursor-pointer',
+              'hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
+              transCls
+            )}
+          >
+            <span
+              className={cn(
+                'text-[14px] leading-[normal] truncate',
+                displayLabel ? 'text-[#030303]' : 'text-[#999999]'
+              )}
+            >
+              {displayLabel ?? placeholder}
+            </span>
+            <DropdownChevron open={open} />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 !p-0"
+          style={{ minWidth: triggerWidth || undefined }}
+        >
+          <FieldSelectPopover
+            fields={fields}
+            selectedKey={selectedKey}
+            onSelect={handleSelect}
+            searchPlaceholder={searchPlaceholder}
+            showTypeBadge={showTypeBadge}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};