@baishuyun/ai-design 1.0.3 → 1.0.4

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

@@ -0,0 +1,440 @@
+import { useState, useCallback, useMemo, useRef } from 'react';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import type { IField, FieldType } 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', 'button', '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' };
+}
+
+// ── 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;
+}
+
+// ── Tree Builder ──────────────────────────────────────────────────
+
+function buildNodeKey(field: IField, index: number): string {
+  return field.widget?.widgetName || String(index);
+}
+
+function buildItemNodeKey(parentKey: string, item: { widget?: { widgetName?: string } }, index: number): string {
+  return item.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 items = field.widget?.items;
+    const hasItems = items && items.length > 0 && field.widget?.type === 'subform';
+    const rootKey = buildNodeKey(field, i);
+
+    const children: FieldTreeNode[] = [];
+    if (hasItems) {
+      for (let j = 0; j < items!.length; j++) {
+        const item = items![j];
+        children.push({
+          key: buildItemNodeKey(rootKey, item, j),
+          label: item.label,
+          field: field,
+          fieldType: item.widget?.type,
+          depth: 1,
+          children: [],
+          isExpandable: false,
+        });
+      }
+    }
+
+    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,
+      });
+    }
+  }
+
+  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.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 = () => {
+        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 childKey = buildItemNodeKey(rootKey, items[j], j);
+        map.set(childKey, items[j].label);
+      }
+    }
+  }
+  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>
+  );
+};