@baishuyun/ai-design 1.0.2 → 1.0.3

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]',
+        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 './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-[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={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';

package/src/components/bs-entry-select/other-app-section.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect, useMemo } from 'react';
+import { cn } from '../../lib/utils';
+import { transCls } from '../../const/ui';
+import { buildEntryTreeFromAliasMap } from './build-tree';
+import { TreeItemNode } from './tree-item-node';
+import type { IAppDetail } from '@baishuyun/types';
+import type { BsEntrySelectChangeResult } from './types';
+import { SolidArrowDownIcon } from '../bs-icons';
+
+const ChevronRightIcon = ({ size }: { size?: number }) => (
+  <SolidArrowDownIcon className="-rotate-90" size={size} />
+);
+
+export 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>
+  );
+}

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

@@ -0,0 +1,455 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../lib/utils';
+import { transCls } from '../../const/ui';
+import { IconBtn } from '../icon-btn';
+import { LeftArrowIcon, SolidArrowDownIcon } from '../bs-icons';
+import {
+  buildEntryTreeFromAliasMap,
+  getEntryIconClass,
+  filterTreeBySearch,
+} from './build-tree';
+import { SearchInput } from './search-input';
+import { TreeItemNode } from './tree-item-node';
+import type { IAppDetail } from '@baishuyun/types';
+import type { EntryTreeItem, BsEntrySelectChangeResult } from './types';
+
+const ChevronRightIcon = ({ size }: { size?: number }) => (
+  <SolidArrowDownIcon className="-rotate-90" size={size} />
+);
+
+interface FlatNode {
+  node: EntryTreeItem;
+  appId: string;
+  section: 'current' | 'other';
+}
+
+export function ScrollSlider({
+  appDetails,
+  currentAppId,
+  selectedEntryId,
+  onSelect,
+  onOverflowChange,
+}: {
+  appDetails: Record<string, IAppDetail>;
+  currentAppId?: string;
+  selectedEntryId?: string;
+  onSelect: (result: BsEntrySelectChangeResult) => void;
+  onOverflowChange?: (hasOverflow: boolean) => void;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  // Group popover state
+  const [activeGroup, setActiveGroup] = useState<FlatNode | null>(null);
+  const [groupSearchQuery, setGroupSearchQuery] = useState('');
+  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const groupPillRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const [groupPortalContainer, setGroupPortalContainer] = useState<HTMLElement | null>(null);
+
+  // Build first-level nodes from all apps (no search filter)
+  const flatNodes = useMemo<FlatNode[]>(() => {
+    const appIds = Object.keys(appDetails);
+    const currentFirst: FlatNode[] = [];
+    const otherNodes: FlatNode[] = [];
+
+    for (const appId of appIds) {
+      const detail = appDetails[appId];
+      const tree = buildEntryTreeFromAliasMap(detail, '');
+      const section = appId === currentAppId ? 'current' as const : 'other' as const;
+      const mapped = tree.map((node) => ({ node, appId, section }));
+      if (section === 'current') {
+        currentFirst.push(...mapped);
+      } else {
+        otherNodes.push(...mapped);
+      }
+    }
+
+    return [...currentFirst, ...otherNodes];
+  }, [appDetails, currentAppId]);
+
+  // Filtered tree for the active group popover
+  const filteredGroupTree = useMemo(() => {
+    if (!activeGroup) return [];
+    return filterTreeBySearch(activeGroup.node.children, groupSearchQuery);
+  }, [activeGroup, groupSearchQuery]);
+
+  const checkScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const canLeft = el.scrollLeft > 0;
+    const canRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+    setCanScrollLeft(canLeft);
+    setCanScrollRight(canRight);
+  }, []);
+
+  const hasOverflow = canScrollLeft || canScrollRight;
+
+  useEffect(() => {
+    onOverflowChange?.(hasOverflow);
+  }, [hasOverflow, onOverflowChange]);
+
+  // Map from descendant entry ID to the group pill node ID
+  const descendantToGroupId = useMemo(() => {
+    const map = new Map<string, string>();
+    function collectDescendants(node: EntryTreeItem, groupId: string) {
+      if (node.isSelectable) {
+        map.set(node.id, groupId);
+      }
+      for (const child of node.children) {
+        collectDescendants(child, groupId);
+      }
+    }
+    for (const { node } of flatNodes) {
+      if (!node.isSelectable) {
+        for (const child of node.children) {
+          collectDescendants(child, node.id);
+        }
+      }
+    }
+    return map;
+  }, [flatNodes]);
+
+  // Auto-scroll selected pill into view
+  useEffect(() => {
+    if (!selectedEntryId || !scrollRef.current) return;
+    // Try direct match first (leaf pill)
+    let targetId = selectedEntryId;
+    let pill = scrollRef.current.querySelector(
+      `[data-entry-id="${targetId}"]`,
+    ) as HTMLElement | null;
+    // Fall back to ancestor group pill
+    if (!pill) {
+      targetId = descendantToGroupId.get(selectedEntryId) || '';
+      if (targetId) {
+        pill = scrollRef.current.querySelector(
+          `[data-entry-id="${targetId}"]`,
+        ) as HTMLElement | null;
+      }
+    }
+    if (pill) {
+      pill.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+    }
+  }, [selectedEntryId, descendantToGroupId]);
+
+  useEffect(() => {
+    checkScroll();
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(checkScroll);
+    observer.observe(el);
+    el.addEventListener('scroll', checkScroll, { passive: true });
+    return () => {
+      observer.disconnect();
+      el.removeEventListener('scroll', checkScroll);
+    };
+  }, [flatNodes, checkScroll]);
+
+  const scroll = useCallback((direction: 'left' | 'right') => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollBy({
+      left: direction === 'left' ? -150 : 150,
+      behavior: 'smooth',
+    });
+  }, []);
+
+  const updatePopoverPosition = useCallback(() => {
+    if (!activeGroup) return;
+    const triggerEl = groupPillRefs.current.get(activeGroup.node.id);
+    if (!triggerEl) return;
+    const rect = triggerEl.getBoundingClientRect();
+    setPopoverStyle({
+      position: 'fixed',
+      top: rect.bottom + 4,
+      left: rect.left,
+      minWidth: Math.max(rect.width, 240),
+      zIndex: 9999,
+    });
+  }, [activeGroup]);
+
+  const closeGroupPopover = useCallback(() => {
+    setActiveGroup(null);
+    setGroupSearchQuery('');
+  }, []);
+
+  const openGroupPopover = useCallback((flatNode: FlatNode, event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (activeGroup?.node.id === flatNode.node.id) {
+      setActiveGroup(null);
+      setGroupSearchQuery('');
+      return;
+    }
+    setGroupSearchQuery('');
+    setActiveGroup(flatNode);
+
+    // Check Shadow DOM portal
+    const triggerEl = groupPillRefs.current.get(flatNode.node.id);
+    if (triggerEl) {
+      const rootNode = triggerEl.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        const existing = rootNode.querySelector<HTMLElement>(
+          '[data-bs-entry-select-group-portal]',
+        );
+        if (existing) {
+          setGroupPortalContainer(existing);
+        } else {
+          const container = document.createElement('div');
+          container.setAttribute('data-bs-entry-select-group-portal', 'true');
+          rootNode.appendChild(container);
+          setGroupPortalContainer(container);
+        }
+      } else {
+        setGroupPortalContainer(null);
+      }
+    }
+
+    // Position the popover after the next frame
+    const groupId = flatNode.node.id;
+    requestAnimationFrame(() => {
+      const el = groupPillRefs.current.get(groupId);
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        setPopoverStyle({
+          position: 'fixed',
+          top: rect.bottom + 4,
+          left: rect.left,
+          minWidth: Math.max(rect.width, 240),
+          zIndex: 9999,
+        });
+      }
+    });
+  }, [activeGroup]);
+
+  const handleGroupPopoverSelect = useCallback(
+    (result: BsEntrySelectChangeResult) => {
+      onSelect(result);
+      closeGroupPopover();
+    },
+    [onSelect, closeGroupPopover],
+  );
+
+  // Click outside for group popover
+  useEffect(() => {
+    if (!activeGroup) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const path = e.composedPath();
+      if (popoverRef.current && path.includes(popoverRef.current)) return;
+      const triggerEl = groupPillRefs.current.get(activeGroup.node.id);
+      if (triggerEl && path.includes(triggerEl)) return;
+      closeGroupPopover();
+    };
+
+    const handleScroll = () => updatePopoverPosition();
+
+    document.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('scroll', handleScroll, true);
+    window.addEventListener('resize', handleScroll);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener('resize', handleScroll);
+    };
+  }, [activeGroup, closeGroupPopover, updatePopoverPosition]);
+
+  // Keyboard escape
+  useEffect(() => {
+    if (!activeGroup) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeGroupPopover();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [activeGroup, closeGroupPopover]);
+
+  if (flatNodes.length === 0) return null;
+
+  const hasGroupSearch = groupSearchQuery.trim().length > 0;
+
+  return (
+    <div className="flex items-center flex-1 min-w-0">
+      {/* Left arrow: always in DOM, width transition */}
+      <span
+        className={cn(
+          transCls,
+          'inline-flex overflow-hidden',
+          canScrollLeft ? 'w-[26px] opacity-100 mr-2.5' : 'w-0 opacity-0 mr-0',
+        )}
+      >
+        <IconBtn
+          rounded
+          icon={<LeftArrowIcon />}
+          onClick={() => scroll('left')}
+        />
+      </span>
+
+      <div
+        ref={scrollRef}
+        className="flex-1 overflow-x-auto scrollbar-hide flex gap-2.5 min-w-0"
+      >
+        {flatNodes.map((flatNode) => {
+          const { node, appId, section } = flatNode;
+          const isLeaf = node.isSelectable;
+          const isSelected = isLeaf && selectedEntryId === node.id;
+          const isGroupActive = activeGroup?.node.id === node.id;
+
+          const setPillRef = (el: HTMLButtonElement | null) => {
+            if (el) {
+              groupPillRefs.current.set(node.id, el);
+            } else {
+              groupPillRefs.current.delete(node.id);
+            }
+          };
+
+          if (isLeaf) {
+            return (
+              <button
+                key={node.id}
+                data-entry-id={node.id}
+                type="button"
+                onClick={() => {
+                  if (node.entry) {
+                    onSelect({ entry: node.entry, appId, section });
+                  }
+                }}
+                className={cn(
+                  'flex items-center gap-[6px] shrink-0 max-w-[240px]',
+                  'px-[10px] py-[7px] rounded-[4px]',
+                  transCls,
+                  isSelected
+                    ? 'border border-[#F0F6FF] bg-[#F0F6FF] text-[#0265FF]'
+                    : 'border border-[#E0E0E0] text-[#030303] hover:bg-[#F0F6FF]',
+                )}
+              >
+                <i
+                  className={
+                    node.entry
+                      ? getEntryIconClass(node.entry)
+                      : 'node-icon icon-bsy-form icon-new-bsy-form-25'
+                  }
+                  style={{ fontSize: 16, lineHeight: 1 }}
+                />
+                <span className="text-[14px] leading-[normal] truncate">
+                  {node.name}
+                </span>
+              </button>
+            );
+          }
+
+          // Group pill (has descendants)
+          return (
+            <button
+              key={node.id}
+              data-entry-id={node.id}
+              ref={setPillRef}
+              type="button"
+              onClick={(e) => openGroupPopover(flatNode, e)}
+              className={cn(
+                'flex items-center gap-[10px] shrink-0 max-w-[240px]',
+                'px-[10px] py-[7px] rounded-[4px]',
+                transCls,
+                isGroupActive
+                  ? 'border border-[#0265FF] text-[#030303]'
+                  : 'border border-[#E0E0E0] text-[#030303] hover:bg-[#F0F6FF]',
+              )}
+            >
+              <span className="flex items-center gap-[6px] min-w-0 flex-1">
+                <i
+                  className="icon-bsy-folder-close"
+                  style={{ fontSize: 16, lineHeight: 1 }}
+                />
+                <span className="text-[14px] leading-[normal] truncate">
+                  {node.name}
+                </span>
+              </span>
+              <span
+                className={cn(
+                  'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
+                  transCls,
+                  isGroupActive && 'rotate-90',
+                )}
+              >
+                <ChevronRightIcon size={16} />
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Right arrow: always in DOM, width transition */}
+      <span
+        className={cn(
+          transCls,
+          'inline-flex overflow-hidden',
+          canScrollRight ? 'w-[26px] opacity-100 ml-2.5' : 'w-0 opacity-0 ml-0',
+        )}
+      >
+        <IconBtn
+          rounded
+          icon={
+            <span className="rotate-180 inline-flex">
+              <LeftArrowIcon />
+            </span>
+          }
+          onClick={() => scroll('right')}
+        />
+      </span>
+
+      {/* Group subtree popover */}
+      {activeGroup &&
+        (() => {
+          const content = (
+            <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={groupSearchQuery}
+                onChange={setGroupSearchQuery}
+              />
+              <div className="flex flex-col gap-[4px] max-h-[300px] overflow-y-auto">
+                {filteredGroupTree.length > 0 ? (
+                  filteredGroupTree.map((child) => (
+                    <TreeItemNode
+                      key={child.id}
+                      item={child}
+                      selectedEntryId={selectedEntryId}
+                      appId={activeGroup.appId}
+                      section={activeGroup.section}
+                      onSelect={handleGroupPopoverSelect}
+                    />
+                  ))
+                ) : hasGroupSearch ? (
+                  <div className="text-[12px] text-[#999999] py-[8px] text-center">
+                    无匹配结果
+                  </div>
+                ) : (
+                  <div className="text-[12px] text-[#999999] py-[8px] text-center">
+                    暂无表单
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+
+          return createPortal(content, groupPortalContainer || document.body);
+        })()}
+    </div>
+  );
+}