4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T3068,import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { commandStyleKeys, matchCommandItem } from '../lib/core'; import type { CommandBaseProps, CommandFilterFn } from '../lib/core'; import { usePortalContainer, type PortalContainer } from '../portal'; import styles from './command.module.scss'; interface CommandContextValue { search: string; setSearch: (value: string) => void; filter?: CommandFilterFn; loop: boolean; itemsRef: React.RefObject; visibleCount: number; reportVisibility: (visible: boolean) => void; } const CommandContext = createContext(null); function useCommandContext(): CommandContextValue { const context = useContext(CommandContext); if (!context) { throw new Error('Command 子组件必须位于内部。'); } return context; } function CommandSearchIcon() { return ( ); } export interface CommandProps extends React.HTMLAttributes, CommandBaseProps {} const Command = React.forwardRef(({ className = '', items, groups, filter, loop = true, children, ...props }, ref) => { const [search, setSearch] = useState(''); const itemsRef = useRef([]); const [visibleCount, setVisibleCount] = useState(0); const reportVisibility = useCallback((visible: boolean) => { setVisibleCount((count) => count + (visible ? 1 : -1)); }, []); const value = { search, setSearch, filter, loop, itemsRef, visibleCount, reportVisibility }; const renderDataItems = (defs: { value: string; label?: string; keywords?: string[]; disabled?: boolean; shortcut?: string }[]) => defs.map((item) => ( {item.label ?? item.value} {item.shortcut ? {item.shortcut} : null} )); let content = children; if (groups && groups.length > 0) { content = groups.map((group) => ( {renderDataItems(group.items)} )); } else if (items && items.length > 0) { content = renderDataItems(items); } return (

{content}

); }); Command.displayName = 'Command'; export interface CommandInputProps extends React.InputHTMLAttributes {} const CommandInput = React.forwardRef(({ className = '', value, onChange, onKeyDown, ...props }, ref) => { const context = useCommandContext(); const { itemsRef, loop } = context; function handleChange(event: React.ChangeEvent) { onChange?.(event); context.setSearch(event.target.value); } function handleKeyDown(event: React.KeyboardEvent) { onKeyDown?.(event); if (event.defaultPrevented) { return; } const items = itemsRef.current.filter((item) => !item.hasAttribute('hidden') && item.getAttribute('data-disabled') !== 'true'); if (items.length === 0) { return; } const currentIndex = items.findIndex((item) => item.getAttribute('data-selected') === 'true'); const highlight = (next: number) => { items.forEach((item) => item.removeAttribute('data-selected')); items[next].setAttribute('data-selected', 'true'); items[next].scrollIntoView({ block: 'nearest' }); }; const nextFrom = (direction: 1 | -1): number => { if (currentIndex < 0) { return direction === 1 ? 0 : items.length - 1; } const next = currentIndex + direction; if (next < 0) { return loop ? items.length - 1 : 0; } if (next >= items.length) { return loop ? 0 : items.length - 1; } return next; }; switch (event.key) { case 'ArrowDown': event.preventDefault(); highlight(nextFrom(1)); break; case 'ArrowUp': event.preventDefault(); highlight(nextFrom(-1)); break; case 'Enter': event.preventDefault(); (currentIndex >= 0 ? items[currentIndex] : items[0]).click(); break; } } return (

); }); CommandInput.displayName = 'CommandInput'; export interface CommandListProps extends React.HTMLAttributes {} const CommandList = React.forwardRef(({ className = '', children, ...props }, ref) => { const { itemsRef, loop } = useCommandContext(); function handleKeyDown(event: React.KeyboardEvent) { const items = itemsRef.current.filter((item) => !item.hasAttribute('hidden') && item.getAttribute('data-disabled') !== 'true'); if (items.length === 0) { return; } const currentIndex = items.findIndex((item) => item.getAttribute('data-selected') === 'true'); const highlight = (next: number) => { items.forEach((item) => item.removeAttribute('data-selected')); items[next].setAttribute('data-selected', 'true'); items[next].scrollIntoView({ block: 'nearest' }); }; const nextFrom = (direction: 1 | -1): number => { if (currentIndex < 0) { return direction === 1 ? 0 : items.length - 1; } const next = currentIndex + direction; if (next < 0) { return loop ? items.length - 1 : 0; } if (next >= items.length) { return loop ? 0 : items.length - 1; } return next; }; switch (event.key) { case 'ArrowDown': event.preventDefault(); highlight(nextFrom(1)); break; case 'ArrowUp': event.preventDefault(); highlight(nextFrom(-1)); break; case 'Enter': event.preventDefault(); (currentIndex >= 0 ? items[currentIndex] : items[0]).click(); break; } } return (

{children}

); }); CommandList.displayName = 'CommandList'; export interface CommandEmptyProps extends React.HTMLAttributes {} const CommandEmpty = React.forwardRef(({ className = '', children, ...props }, ref) => { const { visibleCount } = useCommandContext(); if (visibleCount > 0) { return null; } const classes = [styles[commandStyleKeys.empty], className].filter(Boolean).join(' '); return (

{children}

); }); CommandEmpty.displayName = 'CommandEmpty'; export interface CommandGroupProps extends React.HTMLAttributes { heading?: string; } const CommandGroup = React.forwardRef(({ className = '', heading, children, ...props }, ref) => { return (

{heading ?

{heading}

: null}

{children}

); }); CommandGroup.displayName = 'CommandGroup'; export interface CommandItemProps extends Omit, 'value' | 'onSelect'> { value: string; keywords?: string[]; disabled?: boolean; onSelect?: (value: string) => void; } const CommandItem = React.forwardRef(({ className = '', value, keywords, disabled = false, onSelect, children, ...props }, ref) => { const context = useCommandContext(); const itemRef = useRef(null); const { filter: filterFn, search, itemsRef, reportVisibility } = context; const matches = useMemo(() => { if (filterFn) { return filterFn(value, search, keywords); } return matchCommandItem({ value, keywords }, search); }, [value, keywords, search, filterFn]); useEffect(() => { const element = itemRef.current; if (!element) { return; } itemsRef.current.push(element); return () => { itemsRef.current = itemsRef.current.filter((item) => item !== element); }; }, [itemsRef]); useEffect(() => { if (matches) { reportVisibility(true); return () => reportVisibility(false); } }, [matches, reportVisibility]); function setRef(element: HTMLDivElement | null) { itemRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } function handleClick() { if (disabled) { return; } onSelect?.(value); } const classes = [styles[commandStyleKeys.item], className].filter(Boolean).join(' '); return ( ); }); CommandItem.displayName = 'CommandItem'; export interface CommandSeparatorProps extends React.HTMLAttributes {} const CommandSeparator = React.forwardRef(({ className = '', ...props }, ref) => { const classes = [styles[commandStyleKeys.separator], className].filter(Boolean).join(' '); return

; }); CommandSeparator.displayName = 'CommandSeparator'; export interface CommandShortcutProps extends React.HTMLAttributes {} const CommandShortcut = React.forwardRef(({ className = '', children, ...props }, ref) => { const classes = [styles[commandStyleKeys.shortcut], className].filter(Boolean).join(' '); return ( {children} ); }); CommandShortcut.displayName = 'CommandShortcut'; export interface CommandDialogProps { open?: boolean; onOpenChange?: (open: boolean) => void; title?: string; description?: string; className?: string; showCloseButton?: boolean; container?: PortalContainer; children?: React.ReactNode; } const CommandDialog = ({ open = false, onOpenChange, title = 'Command Palette', description = 'Search for a command to run...', className = '', showCloseButton = true, container, children, }: CommandDialogProps) => { const portalContainer = usePortalContainer(container); if (!open) { return null; } function handleOverlayClick() { onOpenChange?.(false); } function handleCloseClick() { onOpenChange?.(false); } function handleKeyDown(event: React.KeyboardEvent) { if (event.key === 'Escape') { onOpenChange?.(false); } } const content = (

); if (!portalContainer) { return null; } return createPortal(content, portalContainer); }; CommandDialog.displayName = 'CommandDialog'; export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut, CommandDialog }; export default Command; 4f:Tdce,@use '../../../styles/variables/colors' as *; // 根容器 .root { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; border-radius: $radius; background-color: $popover; color: $popover-foreground; } // 输入框容器 .inputWrapper { display: flex; align-items: center; gap: $spacing-2; border-bottom: 1px solid $border; padding: 0 $spacing-3; } // 搜索输入框 .input { display: flex; width: 100%; height: 2.5rem; border: none; background: transparent; padding: $spacing-2 0; font-size: $text-sm; color: $foreground; outline: none; &::placeholder { color: $muted-foreground; } &[data-disabled='true'] { cursor: not-allowed; opacity: 0.5; } } // 输入框图标 .inputIcon { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; color: $muted-foreground; opacity: 0.5; } // 列表容器 .list { max-height: 300px; overflow-x: hidden; overflow-y: auto; padding: $spacing-1; } // 空状态 .empty { padding: $spacing-6; text-align: center; font-size: $text-sm; color: $muted-foreground; } // 分组容器 .group { overflow: hidden; padding: $spacing-1; color: $foreground; } // 分组标题 .groupLabel { padding: $spacing-1_5 $spacing-2; font-size: $text-xs; font-weight: $font-medium; color: $muted-foreground; } // 分组内容 .groupContent { display: block; } // 命令项 .item { position: relative; display: flex; align-items: center; gap: $spacing-2; border-radius: $radius-sm; padding: $spacing-1_5 $spacing-2; font-size: $text-sm; line-height: $leading-normal; color: $popover-foreground; outline: none; cursor: default; user-select: none; &[data-selected='true'] { background-color: $accent; color: $accent-foreground; } &[data-disabled='true'] { pointer-events: none; opacity: 0.5; } & > svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; color: $muted-foreground; } } // 分隔线 .separator { margin: $spacing-1 (-$spacing-1); height: 1px; background-color: $border; } // 快捷键文本 .shortcut { margin-left: auto; font-size: $text-xs; letter-spacing: 0.1em; color: $muted-foreground; } // 对话框遮罩 .dialogOverlay { position: fixed; inset: 0; z-index: $z-modal; background-color: color-mix(in srgb, $overlay 80%, transparent); } // 对话框容器 .dialogContent { position: fixed; z-index: $z-modal; top: 50%; left: 50%; width: 100%; max-width: 32rem; transform: translate(-50%, -50%); overflow: hidden; border-radius: $radius-lg; border: 1px solid $border; background-color: $popover; padding: 0; box-shadow: $shadow-lg; outline: none; } // 对话框标题 .dialogTitle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } // 对话框描述 .dialogDescription { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } // 对话框关闭按钮 .dialogClose { position: absolute; top: $spacing-3; right: $spacing-3; display: inline-flex; align-items: center; justify-content: center; padding: $spacing-1; border: none; border-radius: $radius; background-color: transparent; color: $muted-foreground; opacity: 0.7; cursor: pointer; transition: opacity $transition-fast; outline: none; &:hover { opacity: 1; } & > svg { pointer-events: none; width: 1rem; height: 1rem; } } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-dom",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dom","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-dom"}]]}]}]]}],["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/portal","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/command/command.tsx","content":"$4e","type":"registry:ui","target":"components/ui/command/command.tsx"},{"path":"packages/styles/scss/components/command.module.scss","content":"$4f","type":"registry:file","target":"components/ui/command/command.module.scss"},{"path":"packages/react/src/components/command/index.ts","content":"export {\n\tCommand,\n\tCommandInput,\n\tCommandList,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandItem,\n\tCommandSeparator,\n\tCommandShortcut,\n\tCommandDialog,\n\ttype CommandProps,\n\ttype CommandInputProps,\n\ttype CommandListProps,\n\ttype CommandEmptyProps,\n\ttype CommandGroupProps,\n\ttype CommandItemProps,\n\ttype CommandSeparatorProps,\n\ttype CommandShortcutProps,\n\ttype CommandDialogProps,\n} from './command';\n","type":"registry:ui","target":"components/ui/command/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]