@baishuyun/ai-design 1.0.0

package/src/components/bs-entry-select.tsx

@@ -0,0 +1,724 @@
+import {
+  forwardRef,
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import type { IAppDetail, IEntryDetail } from '@baishuyun/types';
+import { SolidArrowDownIcon as  ChevronDownIcon } from './bs-icons';
+const ChevronRightIcon = ({ size }: { size?: number }) => (
+  <ChevronDownIcon className="-rotate-90" size={size} />
+)
+
+export interface BsEntrySelectChangeResult {
+  entry: IEntryDetail;
+  appId: string;
+  section: 'current' | 'other';
+}
+
+export interface BsEntrySelectProps {
+  appDetails: Record<string, IAppDetail>;
+  currentAppId?: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (result: BsEntrySelectChangeResult | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+interface EntryTreeItem {
+  id: string;
+  name: string;
+  icon: number;
+  type: string;
+  children: EntryTreeItem[];
+  depth: number;
+  isSelectable: boolean;
+  entry: IEntryDetail | null;
+}
+
+const DEPTH_PADDING: Record<number, string> = {
+  0: 'pl-[10px]',
+  1: 'pl-[32px]',
+  2: 'pl-[32px]',
+  3: 'pl-[54px]',
+  4: 'pl-[78px]',
+  5: 'pl-[102px]',
+};
+
+function getDepthPadding(depth: number): string {
+  return DEPTH_PADDING[Math.min(depth, 5)] ?? DEPTH_PADDING[5];
+}
+
+function getEntryIconClass(entry: IEntryDetail): string {
+  const isNew = entry.icon >= 25;
+  const newStr = isNew ? '-new' : '';
+  return `node-icon icon-bsy-form${newStr}  icon${newStr}-bsy-form-${entry.icon}`;
+}
+
+function buildEntryTreeFromAliasMap(
+  appDetail: IAppDetail,
+  searchQuery: string,
+): EntryTreeItem[] {
+  const { entryIdAliasMap, entryMap } = appDetail;
+  const aliasKeys = Object.keys(entryIdAliasMap);
+  if (aliasKeys.length === 0) return [];
+
+  const childrenByParent = new Map<string, string[]>();
+  for (const id of aliasKeys) {
+    const aliasItem = entryIdAliasMap[id];
+    const parentKey = aliasItem.parent || '0';
+    if (!childrenByParent.has(parentKey)) {
+      childrenByParent.set(parentKey, []);
+    }
+    childrenByParent.get(parentKey)!.push(id);
+  }
+
+  // Root parents: any parent value that is not itself a key in entryIdAliasMap.
+  // Also include the sentinel '0' for entries with empty/falsy parent.
+  const allParentValues = new Set(childrenByParent.keys());
+  const rootParents = Array.from(allParentValues).filter(
+    (p) => p === '0' || !entryIdAliasMap[p],
+  );
+
+  const lowerQuery = searchQuery.toLowerCase().trim();
+
+  function buildRecursive(parentId: string, depth: number): EntryTreeItem[] {
+    const childIds = childrenByParent.get(parentId) || [];
+    const nodes: EntryTreeItem[] = [];
+
+    for (const id of childIds) {
+      const aliasItem = entryIdAliasMap[id];
+      const entryDetail = entryMap[id] || null;
+      const name = entryDetail?.name || id;
+      const icon = entryDetail?.icon || 0;
+      const isGroup = aliasItem.type === 'group';
+
+      const children = buildRecursive(id, depth + 1);
+      const selfMatch = !lowerQuery || name.toLowerCase().includes(lowerQuery);
+
+      if (isGroup) {
+        if (selfMatch || children.length > 0) {
+          nodes.push({
+            id,
+            name,
+            icon,
+            type: 'group',
+            children,
+            depth,
+            isSelectable: false,
+            entry: entryDetail,
+          });
+        }
+      } else {
+        if (selfMatch) {
+          nodes.push({
+            id,
+            name,
+            icon,
+            type: aliasItem.type,
+            children: [],
+            depth,
+            isSelectable: true,
+            entry: entryDetail,
+          });
+        }
+      }
+    }
+
+    return nodes;
+  }
+
+  // Build from each root parent, all at depth 0
+  const result: EntryTreeItem[] = [];
+  for (const rootId of rootParents) {
+    result.push(...buildRecursive(rootId, 0));
+  }
+  return result;
+}
+
+function findSelected(
+  appDetails: Record<string, IAppDetail>,
+  entryId: string,
+  currentAppId?: string,
+): BsEntrySelectChangeResult | null {
+  for (const [appId, detail] of Object.entries(appDetails)) {
+    if (detail.entryMap[entryId]) {
+      return {
+        entry: detail.entryMap[entryId],
+        appId,
+        section: appId === currentAppId ? 'current' : 'other',
+      };
+    }
+  }
+  return null;
+}
+
+function SearchInput({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        className="text-[#999999] shrink-0"
+      >
+        <circle cx="7" cy="7" r="4.5" />
+        <path d="M10.5 10.5L14 14" />
+      </svg>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="输入表单名称来搜索"
+        className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
+      />
+    </div>
+  );
+}
+
+function EntryItem({
+  item,
+  depth,
+  isSelected,
+  onClick,
+}: {
+  item: EntryTreeItem;
+  depth: number;
+  isSelected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between h-[34px] px-[10px] cursor-pointer rounded-[4px]',
+        getDepthPadding(depth),
+        'hover:bg-[#EFF0F6]',
+        isSelected && 'bg-[#EFF0F6]',
+        transCls,
+      )}
+      onClick={onClick}
+    >
+      <span className="flex items-center gap-[6px] min-w-0 flex-1">
+        <i
+          className={
+            item.entry
+              ? getEntryIconClass(item.entry)
+              : 'node-icon icon-bsy-form icon-new-bsy-form-25'
+          }
+          style={{ fontSize: 16, lineHeight: 1 }}
+        />
+        <span className="text-[14px] text-[#030303] truncate">
+          {item.name}
+        </span>
+      </span>
+    </div>
+  );
+}
+
+function TreeItemNode({
+  item,
+  selectedEntryId,
+  appId,
+  section,
+  onSelect,
+}: {
+  item: EntryTreeItem;
+  selectedEntryId: string | undefined;
+  appId: string;
+  section: 'current' | 'other';
+  onSelect: (result: BsEntrySelectChangeResult) => void;
+}) {
+  const [expanded, setExpanded] = useState(true);
+
+  if (item.type === 'group') {
+    return (
+      <div>
+        <div
+          className={cn(
+            'flex items-center gap-[6px] h-[34px] px-[10px] cursor-pointer rounded-[4px]',
+            getDepthPadding(item.depth),
+            'hover:bg-[#EFF0F6]',
+            transCls,
+          )}
+          onClick={() => setExpanded(!expanded)}
+        >
+          <span
+            className={cn(
+              'shrink-0 flex items-center justify-center w-[16px] h-[16px]',
+              transCls,
+              expanded && 'rotate-90',
+            )}
+          >
+            <ChevronRightIcon size={16} />
+          </span>
+          <i
+            className="icon-bsy-folder-close"
+            style={{ fontSize: 16, lineHeight: 1 }}
+          />
+          <span className="text-[14px] text-[#030303] truncate">
+            {item.name}
+          </span>
+        </div>
+        {expanded &&
+          item.children.map((child) => (
+            <TreeItemNode
+              key={child.id}
+              item={child}
+              selectedEntryId={selectedEntryId}
+              appId={appId}
+              section={section}
+              onSelect={onSelect}
+            />
+          ))}
+      </div>
+    );
+  }
+
+  return (
+    <EntryItem
+      item={item}
+      depth={item.depth}
+      isSelected={selectedEntryId === item.id}
+      onClick={() => {
+        if (item.entry) {
+          onSelect({ entry: item.entry, appId, section });
+        }
+      }}
+    />
+  );
+}
+
+function AppGroupFolder({
+  label,
+  searchQuery,
+  children,
+}: {
+  label: string;
+  searchQuery: string;
+  children: React.ReactNode;
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const hasSearch = searchQuery.trim().length > 0;
+
+  useEffect(() => {
+    if (hasSearch) {
+      setExpanded(true);
+    }
+  }, [hasSearch]);
+
+  return (
+    <div>
+      <div
+        className={cn(
+          'flex items-center gap-[6px] h-[32px] cursor-pointer rounded-[4px] pr-[10px]',
+          'hover:bg-[#EFF0F6]',
+          'border-b border-[#E0E0E0]',
+          'rounded-b-none',
+          transCls,
+        )}
+        style={{ paddingLeft: 10, paddingTop: 9 }}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <span
+          className={cn(
+            'shrink-0 flex items-center justify-center w-[16px] h-[16px]',
+            transCls,
+            expanded && 'rotate-90',
+          )}
+        >
+          <ChevronRightIcon size={16} />
+        </span>
+        <i
+          className="icon-bsy-folder-close"
+          style={{ fontSize: 16, lineHeight: 1 }}
+        />
+        <span className="text-[12px] text-[#666666]">{label}</span>
+      </div>
+      {expanded && (
+        <div className="flex flex-col">{children}</div>
+      )}
+    </div>
+  );
+}
+
+function OtherAppSection({
+  appId,
+  appDetail,
+  searchQuery,
+  selectedEntryId,
+  section,
+  onSelect,
+}: {
+  appId: string;
+  appDetail: IAppDetail;
+  searchQuery: string;
+  selectedEntryId: string | undefined;
+  section: 'current' | 'other';
+  onSelect: (result: BsEntrySelectChangeResult) => void;
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const hasSearch = searchQuery.trim().length > 0;
+
+  useEffect(() => {
+    if (hasSearch) {
+      setExpanded(true);
+    }
+  }, [hasSearch]);
+
+  const tree = useMemo(() => {
+    return buildEntryTreeFromAliasMap(appDetail, searchQuery);
+  }, [appDetail, searchQuery]);
+
+  return (
+    <div>
+      <div
+        className={cn(
+          'flex items-center gap-[6px] h-[32px] cursor-pointer rounded-[4px] pr-[10px]',
+          'hover:bg-[#EFF0F6]',
+          transCls,
+        )}
+        style={{ paddingLeft: 15 }}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <span
+          className={cn(
+            'shrink-0 flex items-center justify-center w-[18px] h-[18px]',
+            transCls,
+            expanded && 'rotate-90',
+          )}
+        >
+          <ChevronRightIcon size={18} />
+        </span>
+        <i
+          className="node-icon icon-bsy-form icon-new-bsy-form-0"
+          style={{ fontSize: 16, lineHeight: 1 }}
+        />
+        <span className="text-[14px] text-[#030303] truncate">
+          {appDetail.name}
+        </span>
+      </div>
+      {expanded && tree.length > 0 && (
+        <div className="flex flex-col" style={{ paddingLeft: 15 }}>
+          {tree.map((node) => (
+            <TreeItemNode
+              key={node.id}
+              item={node}
+              selectedEntryId={selectedEntryId}
+              appId={appId}
+              section={section}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+      {expanded && tree.length === 0 && hasSearch && (
+        <div className="text-[12px] text-[#999999] py-[8px] pl-[32px]">
+          无匹配结果
+        </div>
+      )}
+      {expanded && tree.length === 0 && !hasSearch && (
+        <div className="text-[12px] text-[#999999] py-[8px] pl-[32px]">
+          暂无表单
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
+  (
+    {
+      appDetails,
+      currentAppId,
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      placeholder = '请选择',
+      disabled = false,
+      className,
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [internalValue, setInternalValue] = useState<string | undefined>(
+      defaultValue,
+    );
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const popoverRef = useRef<HTMLDivElement>(null);
+    const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
+    const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
+    const selectedEntryId = controlledValue ?? internalValue;
+
+    const selectedResult = useMemo(() => {
+      if (!selectedEntryId) return null;
+      return findSelected(appDetails, selectedEntryId, currentAppId);
+    }, [appDetails, selectedEntryId, currentAppId]);
+
+    const otherAppIds = useMemo(() => {
+      return Object.keys(appDetails).filter((id) => id !== currentAppId);
+    }, [appDetails, currentAppId]);
+
+    const updatePopoverPosition = useCallback(() => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      setPopoverStyle({
+        position: 'fixed',
+        top: rect.bottom + 4,
+        left: rect.left,
+        minWidth: Math.max(rect.width, 240),
+        zIndex: 9999,
+      });
+    }, []);
+
+    useEffect(() => {
+      const triggerEl = triggerRef.current;
+      if (!triggerEl) return;
+      const rootNode = triggerEl.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        const existing = rootNode.querySelector<HTMLElement>(
+          '[data-bs-entry-select-portal]',
+        );
+        if (existing) {
+          setPortalContainer(existing);
+          return;
+        }
+        const container = document.createElement('div');
+        container.setAttribute('data-bs-entry-select-portal', 'true');
+        rootNode.appendChild(container);
+        setPortalContainer(container);
+        return;
+      }
+      setPortalContainer(null);
+    }, []);
+
+    const handleOpen = useCallback(() => {
+      if (disabled) return;
+      setIsOpen(true);
+      updatePopoverPosition();
+    }, [disabled, updatePopoverPosition]);
+
+    const handleClose = useCallback(() => {
+      setIsOpen(false);
+      setSearchQuery('');
+      if (triggerRef.current) {
+        triggerRef.current.style.backgroundColor = '';
+      }
+    }, []);
+
+    const handleSelect = useCallback(
+      (result: BsEntrySelectChangeResult) => {
+        setInternalValue(result.entry.entryId);
+        onChange?.(result);
+        handleClose();
+      },
+      [onChange, handleClose],
+    );
+
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const handleClickOutside = (e: MouseEvent) => {
+        const path = e.composedPath();
+        if (
+          (popoverRef.current && path.includes(popoverRef.current)) ||
+          (triggerRef.current && path.includes(triggerRef.current))
+        ) {
+          return;
+        }
+        handleClose();
+      };
+
+      const handleScroll = () => {
+        updatePopoverPosition();
+      };
+
+      const handleResize = () => {
+        updatePopoverPosition();
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      window.addEventListener('scroll', handleScroll, true);
+      window.addEventListener('resize', handleResize);
+
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+        window.removeEventListener('scroll', handleScroll, true);
+        window.removeEventListener('resize', handleResize);
+      };
+    }, [isOpen, handleClose, updatePopoverPosition]);
+
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const handleEscape = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          handleClose();
+        }
+      };
+
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, handleClose]);
+
+    const hasCurrentApp = Boolean(currentAppId && appDetails[currentAppId]);
+    const hasOtherApps = otherAppIds.length > 0;
+    const hasAnyContent = hasCurrentApp || hasOtherApps;
+
+    const currentAppTree = useMemo(() => {
+      if (!currentAppId || !appDetails[currentAppId]) return [];
+      return buildEntryTreeFromAliasMap(appDetails[currentAppId], searchQuery);
+    }, [appDetails, currentAppId, searchQuery]);
+
+    const hasSearch = searchQuery.trim().length > 0;
+
+    return (
+      <div ref={ref} className={cn('relative inline-block', className)}>
+        {/* Trigger */}
+        <div
+          ref={triggerRef}
+          className={cn(
+            'flex items-center gap-[10px] px-[10px] py-[7px] rounded-[4px] cursor-pointer select-none',
+            transCls,
+            isOpen && 'bg-[#EFF0F6]',
+            disabled && 'opacity-50 cursor-not-allowed',
+          )}
+          onClick={handleOpen}
+          onMouseEnter={(e) => {
+            if (!isOpen && !disabled) {
+              (e.currentTarget as HTMLElement).style.backgroundColor =
+                '#EFF0F6';
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (!isOpen) {
+              (e.currentTarget as HTMLElement).style.backgroundColor = '';
+            }
+          }}
+        >
+          <span className="flex items-center gap-[10px] min-w-0 flex-1">
+            {selectedResult ? (
+              <>
+                <i
+                  className={getEntryIconClass(selectedResult.entry)}
+                  style={{ fontSize: 16, lineHeight: 1 }}
+                />
+                <span className="text-[14px] text-[#030303] truncate">
+                  {selectedResult.entry.name}
+                </span>
+              </>
+            ) : (
+              <span className="text-[14px] text-[#999999] truncate">
+                {placeholder}
+              </span>
+            )}
+          </span>
+          <span
+            className={cn(
+              'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
+              transCls,
+              isOpen && 'rotate-180',
+            )}
+          >
+            <ChevronDownIcon size={16} />
+          </span>
+        </div>
+
+        {/* Popover */}
+        {isOpen &&
+          createPortal(
+            <div
+              ref={popoverRef}
+              style={popoverStyle}
+              className={cn(
+                'bg-white rounded-[10px] shadow-[0px_0px_10px_0px_rgba(0,0,0,0.04)] p-[4px]',
+                'flex flex-col gap-[4px]',
+                transCls,
+              )}
+            >
+              <SearchInput
+                  value={searchQuery}
+                  onChange={setSearchQuery}
+                />
+
+              <div className="flex flex-col gap-[4px] max-h-[400px] overflow-y-auto">
+                {hasCurrentApp && (
+                  <AppGroupFolder
+                    label="当前应用表单"
+                    searchQuery={searchQuery}
+                  >
+                    {currentAppTree.length > 0 ? (
+                      currentAppTree.map((node) => (
+                        <TreeItemNode
+                          key={node.id}
+                          item={node}
+                          selectedEntryId={selectedEntryId}
+                          appId={currentAppId!}
+                          section="current"
+                          onSelect={handleSelect}
+                        />
+                      ))
+                    ) : hasSearch ? (
+                      <div className="text-[12px] text-[#999999] py-[8px] pl-[22px]">
+                        无匹配结果
+                      </div>
+                    ) : (
+                      <div className="text-[12px] text-[#999999] py-[8px] pl-[22px]">
+                        暂无表单
+                      </div>
+                    )}
+                  </AppGroupFolder>
+                )}
+
+                {hasOtherApps && (
+                  <AppGroupFolder
+                    label="其他应用表单"
+                    searchQuery={searchQuery}
+                  >
+                    {otherAppIds.map((appId) => (
+                      <OtherAppSection
+                        key={appId}
+                        appId={appId}
+                        appDetail={appDetails[appId]}
+                        searchQuery={searchQuery}
+                        selectedEntryId={selectedEntryId}
+                        section="other"
+                        onSelect={handleSelect}
+                      />
+                    ))}
+                  </AppGroupFolder>
+                )}
+
+                {!hasAnyContent && (
+                  <div className="text-[14px] text-[#999999] py-[12px] text-center">
+                    暂无应用
+                  </div>
+                )}
+              </div>
+            </div>,
+            portalContainer || document.body,
+          )}
+      </div>
+    );
+  },
+);
+
+BsEntrySelect.displayName = 'BsEntrySelect';