Command

命令面板（Command）基于 cmdk 封装，用于构建可搜索的操作入口、快捷跳转、全局命令菜单或局部筛选列表。

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandLoading,
  CommandRoot,
  CommandSeparator,
  CommandShortcut
} from '@skyroc/web-ui';

架构说明

Command 提供两种使用方式：主组件通过 items 数据驱动渲染完整命令面板；基础子组件可用于更细粒度的自定义组合。

• Command：数据驱动主组件，自动组合输入框、列表、空状态和选项。
• CommandDialog：用 Dialog 包裹的命令面板，适合全局快捷命令入口。
• CommandRoot：cmdk 根容器。
• CommandInput：搜索输入框，默认带搜索图标，支持前后插槽。
• CommandList：命令列表滚动容器。
• CommandGroup：分组容器，支持分组标题。
• CommandItem：单个命令项，支持前置图标、后置内容和快捷键。
• CommandSeparator：分隔线。
• CommandEmpty：无匹配结果时显示。
• CommandShortcut：快捷键展示。
• CommandLoading：直接从 cmdk 透出，用于加载状态。

何时使用

• 需要通过输入快速筛选并执行操作时。
• 需要构建全局命令菜单、快捷跳转或应用内搜索入口时。
• 命令项需要分组、图标、快捷键和空状态时。
• 如果只是普通下拉选择，优先使用 Select；如果只是简单菜单，优先使用 DropdownMenu 或 Menu。

基础用法

通过 items 传入命令数据。每个 option 可以是分组、分隔线或单个命令项。

弹窗命令面板

CommandDialog 提供 Dialog 容器，适合全局命令面板。打开状态通过 open 和 onOpenChange 控制。

数据结构

items 支持三种节点：

API

Command

通用属性参考：根容器支持 cmdk Command Root 的属性；主组件使用 items 数据驱动渲染，不接收自定义 children。

CommandDialog

CommandDialog 负责 Dialog 外壳，命令内容通常放入其 children 中。

子组件

类型