Components

SearchInput 搜索框

通用纯前端搜索框组件（同时提供 SearchBox 别名导出），内置搜索图标、一键清除、Loading 状态、快捷键徽标（如 ⌘K 或 /）、防抖触发与可选的联想词/结果浮层，后端可任意对接 Elasticsearch、Meilisearch、SQL 或本地内存检索。

基础搜索输入框

支持 v-model 双向绑定，内置 300ms 防抖并暴露 @search 与 @submit 事件。

防抖查询 (@search): （空）提交 (@submit): （无）

<SearchInput
  v-model="query"
  placeholder="搜索实例、集群或配置项..."
  @search="onSearch"
  @submit="onSubmit"
  @clear="onClear"
/>

视觉变体与尺寸规格

提供 default（线框卡片）、filled（静音填充）与 pill（胶囊圆角）三种变体，并支持 sm、md、lg 尺寸。

小尺寸胶囊 (size="sm" variant="pill")

标准填充态 (size="md" variant="filled")

大尺寸线框 (size="lg" variant="default")

<SearchInput size="sm" variant="pill" placeholder="快捷筛选..." />
<SearchInput size="md" variant="filled" placeholder="搜索资源组..." />
<SearchInput size="lg" variant="default" placeholder="在全网知识库中搜索..." />

快捷键与异步 Loading 状态

支持展示 shortcut 快捷键（支持全局聚焦监听），支持 loading 模拟后端异步请求状态。

⌘K

<SearchInput
  shortcut="⌘K"
  enable-global-shortcut
  placeholder="按 ⌘K 聚焦..."
/>
<SearchInput :loading="isLoading" placeholder="异步请求中..." />

联想结果与后端对接展示

传入 suggestions 列表即可展开下拉结果面板，支持键盘上下箭头高亮、Enter 选中或点击选择。

<SearchInput
  v-model="query"
  :suggestions="resultsFromBackend"
  placeholder="输入微服务名称..."
  @select="onSelect"
/>

API 参考

属性	类型	默认值	说明
`modelValue`	`string`	`''`	搜索框文本输入值（v-model）。
`placeholder`	`string`	`'搜索...'`	占位提示文字。
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	输入框尺寸规格。
`variant`	`'default' \| 'filled' \| 'pill'`	`'default'`	外观形态：线框卡片、静音填充、圆角胶囊。
`debounce`	`number`	`300`	防抖延迟毫秒数，触发 @search 事件。
`clearable`	`boolean`	`true`	有输入内容时是否展示一键清空按钮。
`clearOnEsc`	`boolean`	`true`	按 Escape 键是否清空输入内容。
`loading`	`boolean`	`false`	是否处于加载/搜索中状态，展示转圈动画。
`shortcut`	`string`	`undefined`	显示的按键提示（如 ⌘K 或 /）。
`enableGlobalShortcut`	`boolean`	`false`	是否在全局监听按键并自动聚焦输入框。
`suggestions`	`SearchSuggestion[]`	`undefined`	后端返回的联想建议或检索结果列表。
`open`	`boolean`	`undefined`	受控的下拉浮层展开状态（v-model:open）。
`emptyText`	`string`	`'未找到匹配结果'`	搜索无匹配项时的空态文案。
`@search`	`(query: string) => void`	`—`	防抖触发或回车触发的搜索事件。
`@submit`	`(query: string) => void`	`—`	按回车提交搜索事件。
`@clear`	`() => void`	`—`	点击清空按钮时触发。
`@select`	`(item: SearchSuggestion) => void`	`—`	选中联想建议项时触发。