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

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

@@ -1,559 +1,559 @@
-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 { SquareChecker } from '../../square-checker';
-import type { IAppGroup, IAppGroupItem } from '@baishuyun/types';
-import { AppIcon } from '../../font-icon';
-import { SearchIcon } from '../../bs-icons';
-
-// ── Tree Node Type ────────────────────────────────────────────────
-
-export interface AppTreeNode {
-  id: string;
-  label: string;
-  type: 'group' | 'app' | 'item';
-  color?: string;
-  children?: AppTreeNode[];
-  /** Original app data (for leaf app nodes) */
-  data?: IAppGroupItem;
-}
-
-// ── Converter: IAppGroup[] → AppTreeNode[] ────────────────────────
-
-export function groupsToAppTreeNodes(groups: IAppGroup[]): AppTreeNode[] {
-  return groups.map((group) => ({
-    id: group._id,
-    label: group.name,
-    type: 'group' as const,
-    children: group.apps.map((app) => ({
-      id: app._id,
-      label: app.appname,
-      type: 'app' as const,
-      color: String(app.style?.color || '#666666'),
-      data: app,
-    })),
-  }));
-}
-
-// ── Inline SVG Icons ──────────────────────────────────────────────
-
-/** Folder/group icon (16x16) */
-const FolderIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-    <path d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z" fill="#6F81BD"/>
-  </svg>
-);
-
-/** App grid icon (16x16), colorized */
-// const AppGridIcon = ({ color }: { color?: string }) => {
-//   const c = color || '#666666';
-//   return (
-//     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="shrink-0">
-//       <rect x="1.5" y="1.5" width="5" height="5" rx="1" fill={c} opacity="0.2" />
-//       <rect x="1.5" y="1.5" width="5" height="5" rx="1" stroke={c} strokeWidth="1.2" />
-//       <rect x="9.5" y="1.5" width="5" height="5" rx="1" fill={c} opacity="0.2" />
-//       <rect x="9.5" y="1.5" width="5" height="5" rx="1" stroke={c} strokeWidth="1.2" />
-//       <rect x="1.5" y="9.5" width="5" height="5" rx="1" fill={c} opacity="0.2" />
-//       <rect x="1.5" y="9.5" width="5" height="5" rx="1" stroke={c} strokeWidth="1.2" />
-//       <rect x="9.5" y="9.5" width="5" height="5" rx="1" fill={c} opacity="0.2" />
-//       <rect x="9.5" y="9.5" width="5" height="5" rx="1" stroke={c} strokeWidth="1.2" />
-//     </svg>
-//   );
-// };
-
-/** Generic item icon (16x16), colorized — used for leaf items */
-// const ItemIcon = ({ color }: { color?: string }) => (
-//   <AppGridIcon color={color} />
-// );
-
-/** Collapse/expand toggle (18x18) — shown on expandable parent nodes */
-const ToggleIcon = ({ expanded }: { expanded: boolean }) => (
-  <svg
-    width="18" height="18" viewBox="0 0 18 18" fill="none"
-    className={cn('shrink-0', transCls)}
-    style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
-  >
-    <path d="M6 8L9 11L12 8" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-/** Close X icon (12x12) for chip dismiss */
-const CloseIcon = () => (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
-    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
-  </svg>
-);
-
-/** More dots icon (12x12) for overflow chip */
-const MoreIcon = () => (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
-    <circle cx="2" cy="6" r="1" fill="#999999" />
-    <circle cx="6" cy="6" r="1" fill="#999999" />
-    <circle cx="10" cy="6" r="1" fill="#999999" />
-  </svg>
-);
-
-/** Dropdown chevron in trigger — matches Figma trigger icon */
-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>
-);
-
-// ── Types ─────────────────────────────────────────────────────────
-
-export const ALL_APPS_VALUE = '__all__';
-
-export interface AppSelectProps {
-  /** Tree nodes to display. Use groupsToAppTreeNodes() to convert IAppGroup[] */
-  nodes: AppTreeNode[];
-  /** Selection mode */
-  mode?: 'single' | 'multiple';
-  /** Controlled value — selected node id(s) */
-  value?: string | string[];
-  /** Uncontrolled default value */
-  defaultValue?: string | string[];
-  /** Change handler — returns selected id(s) */
-  onChange?: (value: string | string[]) => void;
-  /** Placeholder when no selection */
-  placeholder?: string;
-  /** Search placeholder */
-  searchPlaceholder?: string;
-  /** Disable the control */
-  disabled?: boolean;
-  /** Max visible chips in multi-select trigger (default 4) */
-  maxVisibleChips?: number;
-  /** Additional className */
-  className?: string;
-  /** Show a "全部应用" (All Apps) item at the top. Only effective in single mode. */
-  showAll?: boolean;
-  /** Allow selecting an empty value as the first option. Only effective in single mode. */
-  allowEmpty?: boolean;
-  /** Label for the empty option. Default "无". */
-  emptyLabel?: string;
-  popoverContentOnly?: boolean; // for testing: render only the popover content without the trigger
-}
-
-// ── Helpers ───────────────────────────────────────────────────────
-
-/** Flatten tree into a map of id → node */
-function flattenNodes(nodes: AppTreeNode[]): Map<string, AppTreeNode> {
-  const map = new Map<string, AppTreeNode>();
-  const walk = (list: AppTreeNode[]) => {
-    for (const n of list) {
-      map.set(n.id, n);
-      if (n.children) walk(n.children);
-    }
-  };
-  walk(nodes);
-  return map;
-}
-
-// ── Component ─────────────────────────────────────────────────────
-
-export const AppSelect = ({
-  nodes,
-  mode = 'single',
-  popoverContentOnly,
-  showAll = false,
-  allowEmpty = false,
-  emptyLabel = '无',
-  value: controlledValue,
-  defaultValue,
-  onChange,
-  placeholder = '请选择',
-  searchPlaceholder = '输入应用名称来搜索',
-  disabled = false,
-  maxVisibleChips = 4,
-  className,
-}: AppSelectProps) => {
-  const [open, setOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [internalValue, setInternalValue] = useState<string | string[]>(
-    defaultValue ?? (mode === 'multiple' ? [] : '')
-  );
-  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
-  const [triggerWidth, setTriggerWidth] = useState<number>(0);
-  const triggerBtnRef = useRef<HTMLButtonElement | null>(null);
-
-  // Expanded node IDs (only nodes with children can be expanded)
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => {
-    // Start with root nodes expanded
-    const s = new Set<string>();
-    const initExpand = (list: AppTreeNode[], depth: number) => {
-      for (const n of list) {
-        if (n.children && n.children.length > 0 && depth < 2) {
-          s.add(n.id);
-          initExpand(n.children, depth + 1);
-        }
-      }
-    };
-    initExpand(nodes, 0);
-    return s;
-  });
-
-  // Controlled vs uncontrolled value
-  const resolvedValue = controlledValue !== undefined ? controlledValue : internalValue;
-
-  // Flat lookup
-  const nodeMap = useMemo(() => flattenNodes(nodes), [nodes]);
-
-  // Selected ids as Set
-  const selectedIds = useMemo(() => {
-    if (mode === 'multiple') {
-      return new Set(Array.isArray(resolvedValue) ? resolvedValue : []);
-    }
-    return new Set(typeof resolvedValue === 'string' && resolvedValue ? [resolvedValue] : []);
-  }, [resolvedValue, mode]);
-
-  // Selected labels for trigger
-  const selectedLabels = useMemo(() => {
-    const ids = Array.isArray(resolvedValue) ? resolvedValue : (resolvedValue ? [resolvedValue] : []);
-    return ids.map((id) => nodeMap.get(id)?.label ?? id);
-  }, [resolvedValue, nodeMap]);
-
-  const selectedAppLabel =
-    mode === 'single' && selectedLabels.length === 1
-      ? selectedLabels[0] === ALL_APPS_VALUE
-        ? '全部应用'
-        : selectedLabels[0]
-      : null;
-
-  // ── Tree filter by search ──────────────────────────────────────
-
-  const filteredNodes = useMemo(() => {
-    if (!searchQuery.trim()) return nodes;
-    const q = searchQuery.toLowerCase();
-
-    const filterTree = (list: AppTreeNode[]): AppTreeNode[] => {
-      const result: AppTreeNode[] = [];
-      for (const node of list) {
-        const labelMatch = node?.label?.toLowerCase().includes(q);
-        const filteredChildren = node.children ? filterTree(node.children) : [];
-        if (labelMatch || filteredChildren.length > 0) {
-          result.push({ ...node, children: filteredChildren.length > 0 ? filteredChildren : node.children });
-        }
-      }
-      return result;
-    };
-    return filterTree(nodes);
-  }, [nodes, searchQuery]);
-
-  // ── Shadow DOM portal ref ──────────────────────────────────────
-
-  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-app-select-portal]');
-      if (existing) { setPortalContainer(existing); return; }
-      const container = document.createElement('div');
-      container.setAttribute('data-bs-app-select-portal', 'true');
-      rootNode.appendChild(container);
-      setPortalContainer(container);
-    } else {
-      setPortalContainer(null);
-    }
-  }, []);
-
-  // ── Handlers ────────────────────────────────────────────────────
-
-  const updateValue = useCallback(
-    (newValue: string | string[]) => {
-      if (controlledValue === undefined) setInternalValue(newValue);
-      onChange?.(newValue);
-    },
-    [controlledValue, onChange]
-  );
-
-  const toggleExpanded = useCallback((nodeId: string) => {
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(nodeId)) next.delete(nodeId);
-      else next.add(nodeId);
-      return next;
-    });
-  }, []);
-
-  const handleSelect = useCallback(
-    (nodeId: string, node: AppTreeNode) => {
-      // Groups toggle expand; never selectable
-      if (node.type === 'group' || (node.children && node.children.length > 0)) {
-        toggleExpanded(nodeId);
-        return;
-      }
-
-      // Leaf node selection
-      if (mode === 'single') {
-        updateValue(nodeId);
-        setOpen(false);
-      } else {
-        const currentIds = Array.isArray(resolvedValue) ? [...resolvedValue] : [];
-        const idx = currentIds.indexOf(nodeId);
-        if (idx >= 0) {
-          currentIds.splice(idx, 1);
-        } else {
-          currentIds.push(nodeId);
-        }
-        updateValue(currentIds);
-      }
-    },
-    [mode, resolvedValue, updateValue, toggleExpanded]
-  );
-
-  const handleRemoveChip = useCallback(
-    (nodeId: string, e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (mode === 'multiple' && Array.isArray(resolvedValue)) {
-        updateValue(resolvedValue.filter((id) => id !== nodeId));
-      }
-    },
-    [mode, resolvedValue, updateValue]
-  );
-
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (disabled) return;
-      setOpen(nextOpen);
-      if (nextOpen && triggerBtnRef.current) {
-        setTriggerWidth(triggerBtnRef.current.offsetWidth);
-      }
-      if (!nextOpen) setSearchQuery('');
-    },
-    [disabled]
-  );
-
-  // ── Chip visibility ─────────────────────────────────────────────
-
-  const multiSelectedLabels = mode === 'multiple' ? selectedLabels : [];
-  const visibleChips = multiSelectedLabels.slice(0, maxVisibleChips);
-  const overflowCount = multiSelectedLabels.length - visibleChips.length;
-
-  // ── Tree row rendering ──────────────────────────────────────────
-
-  const renderNodeRow = useCallback(
-    (node: AppTreeNode, depth: number) => {
-      const hasChildren = node.children && node.children.length > 0;
-      const isExpanded = expandedIds.has(node.id);
-      const isSelected = selectedIds.has(node.id);
-      const leftPad = depth * 22 + 10; // 10, 32, 54, 78, 102...
-
-      return (
-        <div key={node.id}>
-          <button
-            type="button"
-            onClick={() => handleSelect(node.id, node)}
-            className={cn(
-              'flex items-center gap-[6px] w-full h-[34px] rounded-[4px] text-left',
-              'pr-[10px]',
-              transCls,
-              isSelected
-                ? 'bg-[#F0F6FF] text-[#0265FF]'
-                : 'text-[#030303] hover:bg-[#EFF0F6]'
-            )}
-            style={{ paddingLeft: `${leftPad}px`, paddingTop: '10px', paddingBottom: '10px' }}
-          >
-            {/* Left side: toggle icon for expandable nodes */}
-            {hasChildren && <ToggleIcon expanded={isExpanded} />}
-
-            {/* Node icon */}
-            {node.type === 'group' && !hasChildren && <FolderIcon />}
-            {node.type === 'group' && hasChildren && <FolderIcon />}
-            {node.type === 'app' && <AppIcon name={node.data?.style.icon!} />}
-            {/* {node.type === 'item' && <ItemIcon color={isSelected ? '#0265FF' : node.color} />} */}
-
-            {/* Label */}
-            <span className="text-[14px] truncate leading-[normal] flex-1 min-w-0">
-              {node.label}
-            </span>
-
-            {/* SquareChecker for multi-select on leaf nodes — always visible */}
-            {mode === 'multiple' && !hasChildren && node.type !== 'group' && (
-              <span onClick={(e) => e.stopPropagation()} className='grid place-items-center'>
-                <SquareChecker
-                  checked={isSelected}
-                  onCheckedChange={() => handleSelect(node.id, node)}
-                  className="shrink-0"
-                />
-              </span>
-            )}
-          </button>
-
-          {/* Children (when expanded) */}
-          {hasChildren && isExpanded && (
-            <div>
-              {node.children!.map((child) => renderNodeRow(child, depth + 1))}
-            </div>
-          )}
-        </div>
-      );
-    },
-    [expandedIds, selectedIds, mode, handleSelect]
-  );
-
-  // ── Render ──────────────────────────────────────────────────────
-
-  const hasMultiSelection = mode === 'multiple' && multiSelectedLabels.length > 0;
-
-  const popoverContent = (
-          <div className="flex flex-col gap-[4px]">
-            {/* Search */}
-            <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
-              <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>
-
-            {/* Empty option */}
-            {allowEmpty && mode === 'single' && !searchQuery.trim() && (
-              <button
-                type="button"
-                onClick={() => {
-                  updateValue('');
-                  setOpen(false);
-                }}
-                className={cn(
-                  'flex items-center w-full h-[34px] rounded-[4px] text-left',
-                  'px-[10px]',
-                  transCls,
-                  'text-[#030303] hover:bg-[#EFF0F6]'
-                )}
-              >
-                <span className="text-[14px] leading-[normal]">{emptyLabel}</span>
-              </button>
-            )}
-
-            {/* "全部应用" item */}
-            {showAll && mode === 'single' && !searchQuery.trim() && (
-              <button
-                type="button"
-                onClick={() => {
-                  updateValue(ALL_APPS_VALUE);
-                  setOpen(false);
-                }}
-                className={cn(
-                  'flex items-center w-full h-[34px] rounded-[4px] text-left',
-                  'px-[10px]',
-                  transCls,
-                  selectedIds.has(ALL_APPS_VALUE)
-                    ? 'bg-[#F0F6FF] text-[#0265FF]'
-                    : 'text-[#030303] hover:bg-[#EFF0F6]'
-                )}
-              >
-                <span className="text-[14px] leading-[normal]">全部应用</span>
-              </button>
-            )}
-
-            {/* Tree */}
-            <div className="max-h-[400px] overflow-y-auto">
-              {filteredNodes.length > 0 ? (
-                filteredNodes.map((node) => renderNodeRow(node, 0))
-              ) : (
-                <div className="flex items-center justify-center h-[60px] text-[12px] text-[#999999]">
-                  {searchQuery.trim() ? '未找到相关应用' : '暂无应用'}
-                </div>
-              )}
-            </div>
-          </div>
-  );
-
-  if (popoverContentOnly) {
-    return popoverContent;
-  }
-
-  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] gap-2.5',
-              'bg-white border border-[#E0E0E0] rounded-[4px]',
-              'py-[7px]',
-              hasMultiSelection ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
-              'text-left cursor-pointer',
-              'hover:border-[#0265FF]',
-              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
-              open && 'border-[#0265FF]',
-              transCls
-            )}
-            // style={{ minHeight: '34px' }}
-          >
-            {hasMultiSelection ? (
-              <>
-                <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
-                  {visibleChips.map((label, i) => (
-                    <span
-                      key={i}
-                      className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0 max-w-[160px]"
-                      onClick={(e) => {
-                        // stop propagation to prevent opening popover when clicking the chip, but still allow it when clicking the close icon
-                        e.stopPropagation();
-                        const ids = Array.isArray(resolvedValue) ? resolvedValue : [];
-                        if (ids[i]) handleRemoveChip(ids[i], e);
-                      }}
-                    >
-                      <span className="text-[14px] text-[#030303] truncate leading-[normal]">
-                        {label}
-                      </span>
-                      <span
-                        className="cursor-pointer flex items-center shrink-0 hover:bg-[#EFF0F6]"
-                      >
-                        <CloseIcon />
-                      </span>
-                    </span>
-                  ))}
-                  {overflowCount > 0 && (
-                    <span className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0">
-                      <span className="text-[14px] text-[#030303] leading-[normal]">
-                        +{overflowCount}
-                      </span>
-                      <MoreIcon />
-                    </span>
-                  )}
-                </div>
-                <DropdownChevron open={open} />
-              </>
-            ) : (
-              <>
-                <span
-                  className={cn(
-                    'text-[14px] leading-[normal] truncate',
-                    selectedAppLabel ? 'text-[#030303]' : 'text-[#999999]'
-                  )}
-                >
-                  {selectedAppLabel ?? (allowEmpty ? emptyLabel : placeholder)}
-                </span>
-                <DropdownChevron open={open} />
-              </>
-            )}
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          sideOffset={4}
-          portalContainer={portalContainer}
-          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]"
-          style={{ minWidth: triggerWidth || undefined }}
-        >
-          {popoverContent}
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
+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 { SquareChecker } from '../../square-checker';
+import type { IAppGroup, IAppGroupItem } from '@baishuyun/types';
+import { AppIcon } from '../../font-icon';
+import { SearchIcon } from '../../bs-icons';
+
+// ── Tree Node Type ────────────────────────────────────────────────
+
+export interface AppTreeNode {
+  id: string;
+  label: string;
+  type: 'group' | 'app' | 'item';
+  color?: string;
+  children?: AppTreeNode[];
+  /** Original app data (for leaf app nodes) */
+  data?: IAppGroupItem;
+}
+
+// ── Converter: IAppGroup[] → AppTreeNode[] ────────────────────────
+
+export function groupsToAppTreeNodes(groups: IAppGroup[]): AppTreeNode[] {
+  return groups.map((group) => ({
+    id: group._id,
+    label: group.name,
+    type: 'group' as const,
+    children: group.apps.map((app) => ({
+      id: app._id,
+      label: app.appname,
+      type: 'app' as const,
+      color: String(app.style?.color || '#666666'),
+      data: app,
+    })),
+  }));
+}
+
+// ── Inline SVG Icons ──────────────────────────────────────────────
+
+/** Folder/group icon (16x16) */
+const FolderIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z" fill="#6F81BD"/>
+  </svg>
+);
+
+/** App grid icon (16x16), colorized */
+// const AppGridIcon = ({ color }: { color?: string }) => {
+//   const c = color || '#666666';
+//   return (
+//     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="shrink-0">
+//       <rect x="1.5" y="1.5" width="5" height="5" rx="1" fill={c} opacity="0.2" />
+//       <rect x="1.5" y="1.5" width="5" height="5" rx="1" stroke={c} strokeWidth="1.2" />
+//       <rect x="9.5" y="1.5" width="5" height="5" rx="1" fill={c} opacity="0.2" />
+//       <rect x="9.5" y="1.5" width="5" height="5" rx="1" stroke={c} strokeWidth="1.2" />
+//       <rect x="1.5" y="9.5" width="5" height="5" rx="1" fill={c} opacity="0.2" />
+//       <rect x="1.5" y="9.5" width="5" height="5" rx="1" stroke={c} strokeWidth="1.2" />
+//       <rect x="9.5" y="9.5" width="5" height="5" rx="1" fill={c} opacity="0.2" />
+//       <rect x="9.5" y="9.5" width="5" height="5" rx="1" stroke={c} strokeWidth="1.2" />
+//     </svg>
+//   );
+// };
+
+/** Generic item icon (16x16), colorized — used for leaf items */
+// const ItemIcon = ({ color }: { color?: string }) => (
+//   <AppGridIcon color={color} />
+// );
+
+/** Collapse/expand toggle (18x18) — shown on expandable parent nodes */
+const ToggleIcon = ({ expanded }: { expanded: boolean }) => (
+  <svg
+    width="18" height="18" viewBox="0 0 18 18" fill="none"
+    className={cn('shrink-0', transCls)}
+    style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
+  >
+    <path d="M6 8L9 11L12 8" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+/** Close X icon (12x12) for chip dismiss */
+const CloseIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
+    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
+  </svg>
+);
+
+/** More dots icon (12x12) for overflow chip */
+const MoreIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
+    <circle cx="2" cy="6" r="1" fill="#999999" />
+    <circle cx="6" cy="6" r="1" fill="#999999" />
+    <circle cx="10" cy="6" r="1" fill="#999999" />
+  </svg>
+);
+
+/** Dropdown chevron in trigger — matches Figma trigger icon */
+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>
+);
+
+// ── Types ─────────────────────────────────────────────────────────
+
+export const ALL_APPS_VALUE = '__all__';
+
+export interface AppSelectProps {
+  /** Tree nodes to display. Use groupsToAppTreeNodes() to convert IAppGroup[] */
+  nodes: AppTreeNode[];
+  /** Selection mode */
+  mode?: 'single' | 'multiple';
+  /** Controlled value — selected node id(s) */
+  value?: string | string[];
+  /** Uncontrolled default value */
+  defaultValue?: string | string[];
+  /** Change handler — returns selected id(s) */
+  onChange?: (value: string | string[]) => void;
+  /** Placeholder when no selection */
+  placeholder?: string;
+  /** Search placeholder */
+  searchPlaceholder?: string;
+  /** Disable the control */
+  disabled?: boolean;
+  /** Max visible chips in multi-select trigger (default 4) */
+  maxVisibleChips?: number;
+  /** Additional className */
+  className?: string;
+  /** Show a "全部应用" (All Apps) item at the top. Only effective in single mode. */
+  showAll?: boolean;
+  /** Allow selecting an empty value as the first option. Only effective in single mode. */
+  allowEmpty?: boolean;
+  /** Label for the empty option. Default "无". */
+  emptyLabel?: string;
+  popoverContentOnly?: boolean; // for testing: render only the popover content without the trigger
+}
+
+// ── Helpers ───────────────────────────────────────────────────────
+
+/** Flatten tree into a map of id → node */
+function flattenNodes(nodes: AppTreeNode[]): Map<string, AppTreeNode> {
+  const map = new Map<string, AppTreeNode>();
+  const walk = (list: AppTreeNode[]) => {
+    for (const n of list) {
+      map.set(n.id, n);
+      if (n.children) walk(n.children);
+    }
+  };
+  walk(nodes);
+  return map;
+}
+
+// ── Component ─────────────────────────────────────────────────────
+
+export const AppSelect = ({
+  nodes,
+  mode = 'single',
+  popoverContentOnly,
+  showAll = false,
+  allowEmpty = false,
+  emptyLabel = '无',
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  placeholder = '请选择',
+  searchPlaceholder = '输入应用名称来搜索',
+  disabled = false,
+  maxVisibleChips = 4,
+  className,
+}: AppSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [internalValue, setInternalValue] = useState<string | string[]>(
+    defaultValue ?? (mode === 'multiple' ? [] : '')
+  );
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const [triggerWidth, setTriggerWidth] = useState<number>(0);
+  const triggerBtnRef = useRef<HTMLButtonElement | null>(null);
+
+  // Expanded node IDs (only nodes with children can be expanded)
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => {
+    // Start with root nodes expanded
+    const s = new Set<string>();
+    const initExpand = (list: AppTreeNode[], depth: number) => {
+      for (const n of list) {
+        if (n.children && n.children.length > 0 && depth < 2) {
+          s.add(n.id);
+          initExpand(n.children, depth + 1);
+        }
+      }
+    };
+    initExpand(nodes, 0);
+    return s;
+  });
+
+  // Controlled vs uncontrolled value
+  const resolvedValue = controlledValue !== undefined ? controlledValue : internalValue;
+
+  // Flat lookup
+  const nodeMap = useMemo(() => flattenNodes(nodes), [nodes]);
+
+  // Selected ids as Set
+  const selectedIds = useMemo(() => {
+    if (mode === 'multiple') {
+      return new Set(Array.isArray(resolvedValue) ? resolvedValue : []);
+    }
+    return new Set(typeof resolvedValue === 'string' && resolvedValue ? [resolvedValue] : []);
+  }, [resolvedValue, mode]);
+
+  // Selected labels for trigger
+  const selectedLabels = useMemo(() => {
+    const ids = Array.isArray(resolvedValue) ? resolvedValue : (resolvedValue ? [resolvedValue] : []);
+    return ids.map((id) => nodeMap.get(id)?.label ?? id);
+  }, [resolvedValue, nodeMap]);
+
+  const selectedAppLabel =
+    mode === 'single' && selectedLabels.length === 1
+      ? selectedLabels[0] === ALL_APPS_VALUE
+        ? '全部应用'
+        : selectedLabels[0]
+      : null;
+
+  // ── Tree filter by search ──────────────────────────────────────
+
+  const filteredNodes = useMemo(() => {
+    if (!searchQuery.trim()) return nodes;
+    const q = searchQuery.toLowerCase();
+
+    const filterTree = (list: AppTreeNode[]): AppTreeNode[] => {
+      const result: AppTreeNode[] = [];
+      for (const node of list) {
+        const labelMatch = node?.label?.toLowerCase().includes(q);
+        const filteredChildren = node.children ? filterTree(node.children) : [];
+        if (labelMatch || filteredChildren.length > 0) {
+          result.push({ ...node, children: filteredChildren.length > 0 ? filteredChildren : node.children });
+        }
+      }
+      return result;
+    };
+    return filterTree(nodes);
+  }, [nodes, searchQuery]);
+
+  // ── Shadow DOM portal ref ──────────────────────────────────────
+
+  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-app-select-portal]');
+      if (existing) { setPortalContainer(existing); return; }
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-app-select-portal', 'true');
+      rootNode.appendChild(container);
+      setPortalContainer(container);
+    } else {
+      setPortalContainer(null);
+    }
+  }, []);
+
+  // ── Handlers ────────────────────────────────────────────────────
+
+  const updateValue = useCallback(
+    (newValue: string | string[]) => {
+      if (controlledValue === undefined) setInternalValue(newValue);
+      onChange?.(newValue);
+    },
+    [controlledValue, onChange]
+  );
+
+  const toggleExpanded = useCallback((nodeId: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  }, []);
+
+  const handleSelect = useCallback(
+    (nodeId: string, node: AppTreeNode) => {
+      // Groups toggle expand; never selectable
+      if (node.type === 'group' || (node.children && node.children.length > 0)) {
+        toggleExpanded(nodeId);
+        return;
+      }
+
+      // Leaf node selection
+      if (mode === 'single') {
+        updateValue(nodeId);
+        setOpen(false);
+      } else {
+        const currentIds = Array.isArray(resolvedValue) ? [...resolvedValue] : [];
+        const idx = currentIds.indexOf(nodeId);
+        if (idx >= 0) {
+          currentIds.splice(idx, 1);
+        } else {
+          currentIds.push(nodeId);
+        }
+        updateValue(currentIds);
+      }
+    },
+    [mode, resolvedValue, updateValue, toggleExpanded]
+  );
+
+  const handleRemoveChip = useCallback(
+    (nodeId: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (mode === 'multiple' && Array.isArray(resolvedValue)) {
+        updateValue(resolvedValue.filter((id) => id !== nodeId));
+      }
+    },
+    [mode, resolvedValue, updateValue]
+  );
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (disabled) return;
+      setOpen(nextOpen);
+      if (nextOpen && triggerBtnRef.current) {
+        setTriggerWidth(triggerBtnRef.current.offsetWidth);
+      }
+      if (!nextOpen) setSearchQuery('');
+    },
+    [disabled]
+  );
+
+  // ── Chip visibility ─────────────────────────────────────────────
+
+  const multiSelectedLabels = mode === 'multiple' ? selectedLabels : [];
+  const visibleChips = multiSelectedLabels.slice(0, maxVisibleChips);
+  const overflowCount = multiSelectedLabels.length - visibleChips.length;
+
+  // ── Tree row rendering ──────────────────────────────────────────
+
+  const renderNodeRow = useCallback(
+    (node: AppTreeNode, depth: number) => {
+      const hasChildren = node.children && node.children.length > 0;
+      const isExpanded = expandedIds.has(node.id);
+      const isSelected = selectedIds.has(node.id);
+      const leftPad = depth * 22 + 10; // 10, 32, 54, 78, 102...
+
+      return (
+        <div key={node.id}>
+          <button
+            type="button"
+            onClick={() => handleSelect(node.id, node)}
+            className={cn(
+              'flex items-center gap-[6px] w-full h-[34px] rounded-[4px] text-left',
+              'pr-[10px]',
+              transCls,
+              isSelected
+                ? 'bg-[#F0F6FF] text-[#0265FF]'
+                : 'text-[#030303] hover:bg-[#EFF0F6]'
+            )}
+            style={{ paddingLeft: `${leftPad}px`, paddingTop: '10px', paddingBottom: '10px' }}
+          >
+            {/* Left side: toggle icon for expandable nodes */}
+            {hasChildren && <ToggleIcon expanded={isExpanded} />}
+
+            {/* Node icon */}
+            {node.type === 'group' && !hasChildren && <FolderIcon />}
+            {node.type === 'group' && hasChildren && <FolderIcon />}
+            {node.type === 'app' && <AppIcon name={node.data?.style.icon!} />}
+            {/* {node.type === 'item' && <ItemIcon color={isSelected ? '#0265FF' : node.color} />} */}
+
+            {/* Label */}
+            <span className="text-[14px] truncate leading-[normal] flex-1 min-w-0">
+              {node.label}
+            </span>
+
+            {/* SquareChecker for multi-select on leaf nodes — always visible */}
+            {mode === 'multiple' && !hasChildren && node.type !== 'group' && (
+              <span onClick={(e) => e.stopPropagation()} className='grid place-items-center'>
+                <SquareChecker
+                  checked={isSelected}
+                  onCheckedChange={() => handleSelect(node.id, node)}
+                  className="shrink-0"
+                />
+              </span>
+            )}
+          </button>
+
+          {/* Children (when expanded) */}
+          {hasChildren && isExpanded && (
+            <div>
+              {node.children!.map((child) => renderNodeRow(child, depth + 1))}
+            </div>
+          )}
+        </div>
+      );
+    },
+    [expandedIds, selectedIds, mode, handleSelect]
+  );
+
+  // ── Render ──────────────────────────────────────────────────────
+
+  const hasMultiSelection = mode === 'multiple' && multiSelectedLabels.length > 0;
+
+  const popoverContent = (
+          <div className="flex flex-col gap-[4px]">
+            {/* Search */}
+            <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+              <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>
+
+            {/* Empty option */}
+            {allowEmpty && mode === 'single' && !searchQuery.trim() && (
+              <button
+                type="button"
+                onClick={() => {
+                  updateValue('');
+                  setOpen(false);
+                }}
+                className={cn(
+                  'flex items-center w-full h-[34px] rounded-[4px] text-left',
+                  'px-[10px]',
+                  transCls,
+                  'text-[#030303] hover:bg-[#EFF0F6]'
+                )}
+              >
+                <span className="text-[14px] leading-[normal]">{emptyLabel}</span>
+              </button>
+            )}
+
+            {/* "全部应用" item */}
+            {showAll && mode === 'single' && !searchQuery.trim() && (
+              <button
+                type="button"
+                onClick={() => {
+                  updateValue(ALL_APPS_VALUE);
+                  setOpen(false);
+                }}
+                className={cn(
+                  'flex items-center w-full h-[34px] rounded-[4px] text-left',
+                  'px-[10px]',
+                  transCls,
+                  selectedIds.has(ALL_APPS_VALUE)
+                    ? 'bg-[#F0F6FF] text-[#0265FF]'
+                    : 'text-[#030303] hover:bg-[#EFF0F6]'
+                )}
+              >
+                <span className="text-[14px] leading-[normal]">全部应用</span>
+              </button>
+            )}
+
+            {/* Tree */}
+            <div className="max-h-[400px] overflow-y-auto">
+              {filteredNodes.length > 0 ? (
+                filteredNodes.map((node) => renderNodeRow(node, 0))
+              ) : (
+                <div className="flex items-center justify-center h-[60px] text-[12px] text-[#999999]">
+                  {searchQuery.trim() ? '未找到相关应用' : '暂无应用'}
+                </div>
+              )}
+            </div>
+          </div>
+  );
+
+  if (popoverContentOnly) {
+    return popoverContent;
+  }
+
+  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] gap-2.5',
+              'bg-white border border-[#E0E0E0] rounded-[4px]',
+              'py-[7px]',
+              hasMultiSelection ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
+              'text-left cursor-pointer',
+              'hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open && 'border-[#0265FF]',
+              transCls
+            )}
+            // style={{ minHeight: '34px' }}
+          >
+            {hasMultiSelection ? (
+              <>
+                <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+                  {visibleChips.map((label, i) => (
+                    <span
+                      key={i}
+                      className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0 max-w-[160px]"
+                      onClick={(e) => {
+                        // stop propagation to prevent opening popover when clicking the chip, but still allow it when clicking the close icon
+                        e.stopPropagation();
+                        const ids = Array.isArray(resolvedValue) ? resolvedValue : [];
+                        if (ids[i]) handleRemoveChip(ids[i], e);
+                      }}
+                    >
+                      <span className="text-[14px] text-[#030303] truncate leading-[normal]">
+                        {label}
+                      </span>
+                      <span
+                        className="cursor-pointer flex items-center shrink-0 hover:bg-[#EFF0F6]"
+                      >
+                        <CloseIcon />
+                      </span>
+                    </span>
+                  ))}
+                  {overflowCount > 0 && (
+                    <span className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0">
+                      <span className="text-[14px] text-[#030303] leading-[normal]">
+                        +{overflowCount}
+                      </span>
+                      <MoreIcon />
+                    </span>
+                  )}
+                </div>
+                <DropdownChevron open={open} />
+              </>
+            ) : (
+              <>
+                <span
+                  className={cn(
+                    'text-[14px] leading-[normal] truncate',
+                    selectedAppLabel ? 'text-[#030303]' : 'text-[#999999]'
+                  )}
+                >
+                  {selectedAppLabel ?? (allowEmpty ? emptyLabel : placeholder)}
+                </span>
+                <DropdownChevron open={open} />
+              </>
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]"
+          style={{ minWidth: triggerWidth || undefined }}
+        >
+          {popoverContent}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};