@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/components/bs-entry-select/app-group-folder.tsx

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import { cn } from '../../lib/utils';
+import { transCls } from '../../const/ui';
+import { SolidArrowDownIcon } from '../bs-icons';
+
+const ChevronRightIcon = ({ size }: { size?: number }) => (
+  <SolidArrowDownIcon className="-rotate-90" size={size} />
+);
+
+export 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>
+  );
+}

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

@@ -0,0 +1,271 @@
+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 { ScrollSlider } from './scroll-slider';
+import { EntryPopover } from './entry-popover';
+import { buildEntryTreeFromAliasMap } from './build-tree';
+import type { BsEntrySelectProps, BsEntrySelectChangeResult } from './types';
+import { SolidArrowDownIcon as ChevronDownIcon, MenuLinesIcon } from '../bs-icons';
+
+export type { BsEntrySelectProps, BsEntrySelectChangeResult };
+
+export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
+  (
+    {
+      appDetails,
+      currentAppId,
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      placeholder: _placeholder = '请选择',
+      disabled = false,
+      className,
+      showSlider = true,
+    },
+    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 [sliderHasOverflow, setSliderHasOverflow] = useState(false);
+
+    const handleOverflowChange = useCallback((hasOverflow: boolean) => {
+      setSliderHasOverflow(hasOverflow);
+    }, []);
+
+    const selectedEntryId = controlledValue ?? internalValue;
+
+    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,
+      });
+    }, []);
+
+    const setTriggerRef = useCallback((node: HTMLDivElement | null) => {
+      (triggerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      if (!node) {
+        setPortalContainer(null);
+        return;
+      }
+      const rootNode = node.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 handleClose = useCallback(() => {
+      setIsOpen(false);
+      setSearchQuery('');
+      if (triggerRef.current) {
+        triggerRef.current.style.backgroundColor = '';
+      }
+    }, []);
+
+    const handleToggle = useCallback(() => {
+      if (disabled) return;
+      if (isOpen) {
+        handleClose();
+      } else {
+        setIsOpen(true);
+        updatePopoverPosition();
+      }
+    }, [disabled, isOpen, handleClose, updatePopoverPosition]);
+
+    const handleSelect = useCallback(
+      (result: BsEntrySelectChangeResult) => {
+        setInternalValue(result.entry.entryId);
+        onChange?.(result);
+        handleClose();
+      },
+      [onChange, handleClose],
+    );
+
+    // Event listeners for popover (click outside, scroll, resize)
+    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]);
+
+    // Keyboard escape listener
+    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-flex items-center gap-[10px] min-w-0', className)}>
+        {/* Scroll slider — greedy width */}
+        {showSlider && (
+          <ScrollSlider
+            appDetails={appDetails}
+            currentAppId={currentAppId}
+            selectedEntryId={selectedEntryId}
+            onSelect={handleSelect}
+            onOverflowChange={handleOverflowChange}
+          />
+        )}
+
+        {/* Trigger — hidden when slider shows all nodes without overflow */}
+        {(!showSlider || sliderHasOverflow) && (
+          <div
+            ref={setTriggerRef}
+            className={cn(
+              'flex items-center gap-[10px] px-[10px] py-[7px] rounded-[4px] cursor-pointer select-none shrink-0',
+              transCls,
+              isOpen && 'bg-[#EFF0F6]',
+              disabled && 'opacity-50 cursor-not-allowed',
+            )}
+            onClick={handleToggle}
+          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">
+            <MenuLinesIcon />
+            <span>全部</span>
+            {/* {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}>
+              <EntryPopover
+                searchQuery={searchQuery}
+                onSearchChange={setSearchQuery}
+                currentAppTree={currentAppTree}
+                currentAppId={currentAppId}
+                otherAppIds={otherAppIds}
+                appDetails={appDetails}
+                selectedEntryId={selectedEntryId}
+                hasCurrentApp={hasCurrentApp}
+                hasOtherApps={hasOtherApps}
+                hasAnyContent={hasAnyContent}
+                hasSearch={hasSearch}
+                onSelect={handleSelect}
+              />
+            </div>,
+            portalContainer || document.body,
+          )}
+      </div>
+    );
+  },
+);
+
+BsEntrySelect.displayName = 'BsEntrySelect';

package/src/components/bs-entry-select/build-tree.ts

@@ -0,0 +1,139 @@
+import type { IAppDetail, IEntryDetail } from '@baishuyun/types';
+import type { EntryTreeItem, BsEntrySelectChangeResult } from './types';
+
+export const DEPTH_PADDING: Record<number, string> = {
+  0: 'pl-[10px]',
+  1: 'pl-[32px]',
+  2: 'pl-[32px]',
+  3: 'pl-[54px]',
+  4: 'pl-[78px]',
+  5: 'pl-[102px]',
+};
+
+export function getDepthPadding(depth: number): string {
+  return DEPTH_PADDING[Math.min(depth, 5)] ?? DEPTH_PADDING[5];
+}
+
+export 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}`;
+}
+
+export 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;
+}
+
+export function filterTreeBySearch(nodes: EntryTreeItem[], searchQuery: string): EntryTreeItem[] {
+  const lowerQuery = searchQuery.toLowerCase().trim();
+  if (!lowerQuery) return nodes;
+
+  const result: EntryTreeItem[] = [];
+  for (const node of nodes) {
+    const nameMatch = node?.name.toLowerCase().includes(lowerQuery);
+    const filteredChildren = filterTreeBySearch(node.children, searchQuery);
+
+    if (!node.isSelectable) {
+      if (nameMatch || filteredChildren.length > 0) {
+        result.push({ ...node, children: filteredChildren });
+      }
+    } else {
+      if (nameMatch) {
+        result.push(node);
+      }
+    }
+  }
+  return result;
+}
+
+export 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;
+}

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

@@ -0,0 +1,43 @@
+import { cn } from '../../lib/utils';
+import { transCls } from '../../const/ui';
+import { getDepthPadding, getEntryIconClass } from './build-tree';
+import type { EntryTreeItem } from './types';
+
+export 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] shrink-0',
+        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>
+  );
+}

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

@@ -0,0 +1,97 @@
+import { cn } from '../../lib/utils';
+import { transCls } from '../../const/ui';
+import { SearchInput } from '../agent-helper/search-input';
+import { TreeItemNode } from './tree-item-node';
+import { AppGroupFolder } from './app-group-folder';
+import { OtherAppSection } from './other-app-section';
+import type { IAppDetail } from '@baishuyun/types';
+import type { EntryTreeItem, BsEntrySelectChangeResult } from './types';
+
+export function EntryPopover({
+  searchQuery,
+  onSearchChange,
+  currentAppTree,
+  currentAppId,
+  otherAppIds,
+  appDetails,
+  selectedEntryId,
+  hasCurrentApp,
+  hasOtherApps,
+  hasAnyContent,
+  hasSearch,
+  onSelect,
+}: {
+  searchQuery: string;
+  onSearchChange: (v: string) => void;
+  currentAppTree: EntryTreeItem[];
+  currentAppId: string | undefined;
+  otherAppIds: string[];
+  appDetails: Record<string, IAppDetail>;
+  selectedEntryId: string | undefined;
+  hasCurrentApp: boolean;
+  hasOtherApps: boolean;
+  hasAnyContent: boolean;
+  hasSearch: boolean;
+  onSelect: (result: BsEntrySelectChangeResult) => void;
+}) {
+  return (
+    <div
+      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={onSearchChange} />
+
+      <div className="flex flex-col gap-0 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={onSelect}
+                />
+              ))
+            ) : 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={onSelect}
+              />
+            ))}
+          </AppGroupFolder>
+        )}
+
+        {!hasAnyContent && (
+          <div className="text-[14px] text-[#999999] py-[12px] text-center">
+            暂无应用
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/bs-entry-select/index.ts

@@ -0,0 +1,2 @@
+export { BsEntrySelect } from './bs-entry-select';
+export type { BsEntrySelectProps, BsEntrySelectChangeResult } from './types';