组件

命令面板 Command

Command：命令面板。页面顶部出现模态浮层，内含搜索字段和调用方传入的命令；命令按组显示，每行有按键提示。外壳使用 dialog 状态机，提供 scrim、焦点陷阱和 Escape；搜索由 combobox 状态机驱动自有列表。容器和列表都在浮层内，combobox 不再渲染单独弹层，状态机内容挂接到浮层列表。input 部件带有一个 `as never`：它的 prop 联合类型超出了 h（）的可解析范围（TS2590）。

#基础用法

command/basic Vue React

Nothing run yet.

command/basic.vue

<script setup lang="ts">
import { Button, Command } from "@bysages/vue";
import { ref } from "vue";

const open = ref(false);
const status = ref("Nothing run yet.");

const commands = [
  { label: "New document", value: "file.new", group: "File", hint: "N" },
  { label: "Save", value: "file.save", group: "File", hint: "S" },
  { label: "Export as PDF", value: "file.export", group: "File", hint: "E" },
  { label: "Toggle theme", value: "appearance.theme", group: "Appearance", hint: "T" },
  { label: "Increase density", value: "appearance.density-up", group: "Appearance", hint: "+" },
  { label: "Decrease density", value: "appearance.density-down", group: "Appearance", hint: "-" },
  { label: "Open documentation", value: "help.docs", group: "Help", hint: "?" },
  { label: "Keyboard shortcuts", value: "help.keys", group: "Help", hint: "K" },
];

const run = (value: string) => {
  status.value = `Ran ${value}`;
};
</script>

<template>
  <div class="w-full">
    <Button @click="open = true">
      Open command palette
      <span class="ms-2 text-xs text-tertiary"> Ctrl K </span>
    </Button>
    <Command v-model:open="open" :items="commands" placeholder="Type a command…" @select="run" />
    <p role="status" class="mt-4 text-sm text-tertiary">
      {{ status }}
    </p>
  </div>
</template>

command/searching Vue React

Open the palette and type “the”, “app”, or nothing at all — typing narrows the ledger across every group, and the empty state speaks when nothing answers.

command/searching.vue

<script setup lang="ts">
import { Button, Command } from "@bysages/vue";
import { ref } from "vue";

const open = ref(false);

const commands = [
  { label: "New document", value: "file.new", group: "File", hint: "N" },
  { label: "Save", value: "file.save", group: "File", hint: "S" },
  { label: "Export as PDF", value: "file.export", group: "File", hint: "E" },
  { label: "Toggle theme", value: "appearance.theme", group: "Appearance", hint: "T" },
  { label: "Increase density", value: "appearance.density-up", group: "Appearance", hint: "+" },
  { label: "Decrease density", value: "appearance.density-down", group: "Appearance", hint: "-" },
  { label: "Open documentation", value: "help.docs", group: "Help", hint: "?" },
  { label: "Keyboard shortcuts", value: "help.keys", group: "Help", hint: "K" },
];
</script>

<template>
  <div class="w-full">
    <p class="mb-4 text-sm text-tertiary">
      Open the palette and type “the”, “app”, or nothing at all — typing narrows the ledger across
      every group, and the empty state speaks when nothing answers.
    </p>
    <Button @click="open = true">Open and start typing</Button>
    <Command
      v-model:open="open"
      :items="commands"
      placeholder="Type a command…"
      @select="open = false"
    />
  </div>
</template>

#属性

#Command

Command：命令面板。页面顶部出现模态浮层，内含搜索字段和调用方传入的命令；命令按组显示，每行有按键提示。外壳使用 dialog 状态机，提供 scrim、焦点陷阱和 Escape；搜索由 combobox 状态机驱动自有列表。容器和列表都在浮层内，combobox 不再渲染单独弹层，状态机内容挂接到浮层列表。input 部件带有一个 as never：它的 prop 联合类型超出了 h（）的可解析范围（TS2590）。

属性	类型	默认值	描述
`items`	`Array as PropType<CommandEntry[]>`	`() => []`	—
`placeholder`	`String`	`undefined`	—
`open`	`Boolean`	`undefined`	—
`autoFilter`	`Boolean`	`true`	—
`inputValue`	`String`	`undefined`	—
`emptyText`	`String`	`"No matching commands"`	—
`onSelect`	`Function as PropType<(value: string) => void>`	`undefined`	—