BizGlobalSearch 全局搜索命令面板

Ctrl+K 唤起的全局搜索面板：关键词模糊过滤（label / hint / keywords，含宽松子序列匹配）、分组聚合、键盘 ↑↓ 导导 + Enter 选中 + Esc 关闭、命中高亮、最近访问记录（localStorage 最近 8 条）、触发器插槽。中后台快速导航、系统内功能直达、文档站检索入口——与 BizSearchInput（表单搜索框）互补，本组件为全局命令面板形态。

基础用法

搜索Ctrl K

点击触发器或按 Ctrl+K 唤起，输入关键词过滤，键盘导航选择。

<script setup lang="ts">
/** 场景：快速导航——Ctrl+K 或点击触发，模糊过滤 + 键盘选择 */
import { ElMessage } from 'element-plus'
import { BizGlobalSearch } from 'vue3-ep-biz-lib'
import type { BizGlobalSearchItem } from 'vue3-ep-biz-lib'

const items: BizGlobalSearchItem[] = [
  { key: 'order', label: '订单管理', group: '业务', hint: '查询 / 导出销售订单' },
  { key: 'goods', label: '商品中心', group: '业务', hint: '商品上下架与库存' },
  { key: 'user', label: '用户管理', group: '系统', hint: '账号 / 角色 / 权限' },
  { key: 'monitor', label: '监控大盘', group: '系统', hint: '服务健康与告警' },
  { key: 'theme', label: '偏好设置', group: '设置', hint: '主题与通知' },
]
</script>

<template>
  <BizGlobalSearch :items="items" @select="(item) => ElMessage.success(`打开：${item.label}`)" />
</template>

显示代码

分组聚合

搜索Ctrl K

item.group 分组展示（页面 / 功能 / 设置混合导航）。

<script setup lang="ts">
/** 场景：分组聚合——页面 / 功能 / 设置混合导航 */
import { ElMessage } from 'element-plus'
import { BizGlobalSearch } from 'vue3-ep-biz-lib'
import type { BizGlobalSearchItem } from 'vue3-ep-biz-lib'

const items: BizGlobalSearchItem[] = [
  { key: 'p1', label: '数据报表', group: '页面' },
  { key: 'p2', label: '工单中心', group: '页面' },
  { key: 'f1', label: '新建工单', group: '功能', hint: '快捷操作' },
  { key: 'f2', label: '批量导出', group: '功能', hint: '快捷操作' },
  { key: 's1', label: '通知设置', group: '设置' },
  { key: 's2', label: '安全设置', group: '设置' },
]
</script>

<template>
  <BizGlobalSearch :items="items" @select="(item) => ElMessage.info(`选择：[${item.group ?? ''}] ${item.label}`)" />
</template>

显示代码

最近访问

搜索Ctrl K

show-recent 记录最近 8 条选择（空态展示，Esc 关闭面板）。

<script setup lang="ts">
/** 场景：最近访问——show-recent 记录 8 条，空关键词时展示 */
import { ElMessage } from 'element-plus'
import { BizGlobalSearch } from 'vue3-ep-biz-lib'
import type { BizGlobalSearchItem } from 'vue3-ep-biz-lib'

const items: BizGlobalSearchItem[] = [
  { key: 'a', label: '客户 360 视图', group: '客户' },
  { key: 'b', label: '合同审批', group: '合同' },
  { key: 'c', label: '回款计划', group: '财务' },
]
</script>

<template>
  <BizGlobalSearch :items="items" show-recent @select="(item) => ElMessage.success(`打开：${item.label}`)" />
</template>

显示代码

自定义触发器

搜索文档…Ctrl K

#trigger 插槽接管入口（导航栏搜索框形态）。

<script setup lang="ts">
/** 场景：自定义触发器——导航栏搜索框形态 */
import { ElMessage } from 'element-plus'
import { ElIcon } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { BizGlobalSearch } from 'vue3-ep-biz-lib'
import type { BizGlobalSearchItem } from 'vue3-ep-biz-lib'

const items: BizGlobalSearchItem[] = [
  { key: 'doc', label: '组件文档', group: '文档' },
  { key: 'changelog', label: '更新日志', group: '文档' },
  { key: 'api', label: '接口文档', group: '文档' },
]
</script>

<template>
  <BizGlobalSearch :items="items" @select="(item) => ElMessage.success(`打开：${item.label}`)">
    <template #trigger>
      <span style="display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: var(--el-border); border-radius: 17px; color: var(--el-text-color-secondary); font-size: 13px; cursor: pointer">
        <ElIcon><Search /></ElIcon>
        <span>搜索文档…</span>
        <kbd style="font-size: 11px; border: 1px solid var(--el-border-color-lighter); border-radius: 3px; padding: 0 4px; color: var(--el-text-color-placeholder)">Ctrl K</kbd>
      </span>
    </template>
  </BizGlobalSearch>
</template>

显示代码

选择事件

搜索Ctrl K

• 唤起面板并选择，事件日志在此显示

select / update:visible 事件联动（路由跳转由业务侧执行）。

<script setup lang="ts">
/** 场景：选择事件——select / update:visible 联动日志 */
import { ref } from 'vue'
import { BizGlobalSearch } from 'vue3-ep-biz-lib'
import type { BizGlobalSearchItem } from 'vue3-ep-biz-lib'

const items: BizGlobalSearchItem[] = [
  { key: 'a', label: '库存查询' },
  { key: 'b', label: '库存盘点' },
  { key: 'c', label: '调拨单' },
]

const logs = ref<string[]>([])

const push = (text: string): void => {
  logs.value = [text, ...logs.value].slice(0, 6)
}
</script>

<template>
  <div>
    <BizGlobalSearch
      :items="items"
      @select="(item: BizGlobalSearchItem) => push(`select：${item.key} → ${item.label}（业务侧执行跳转）`)"
      @update:visible="(v: boolean) => push(`面板${v ? '打开' : '关闭'}`)"
    />
    <ul style="margin: 10px 0 0; padding: 8px 12px; list-style: none; border: 1px solid var(--el-border-color-lighter); border-radius: 4px; font-size: 12px; color: var(--el-text-color-secondary)">
      <li v-if="logs.length === 0" style="padding: 2px 0">唤起面板并选择，事件日志在此显示</li>
      <li v-for="(log, i) in logs" :key="i" style="padding: 2px 0">{{ log }}</li>
    </ul>
  </div>
</template>

显示代码

关键词扩展

试试输入拼音：kehu → 客户管理、hetong → 合同管理

搜索Ctrl K

item.keywords 附加检索词（拼音 / 别名），maxResults 控制条数。

<script setup lang="ts">
/** 场景：关键词扩展——keywords 附加检索词（拼音 / 别名） */
import { ElAlert, ElMessage } from 'element-plus'
import { BizGlobalSearch } from 'vue3-ep-biz-lib'
import type { BizGlobalSearchItem } from 'vue3-ep-biz-lib'

const items: BizGlobalSearchItem[] = [
  { key: 'kh', label: '客户管理', keywords: ['kehu', 'khgl', 'CRM'] },
  { key: 'ht', label: '合同管理', keywords: ['hetong', 'htgl', 'contract'] },
  { key: 'fk', label: '回款管理', keywords: ['huikuan', 'fkgl', 'payment'] },
]
</script>

<template>
  <div>
    <ElAlert title="试试输入拼音：kehu → 客户管理、hetong → 合同管理" type="info" :closable="false" style="margin-bottom: 10px" />
    <BizGlobalSearch :items="items" :max-results="6" @select="(item) => ElMessage.success(`打开：${item.label}`)" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
items	BizGlobalSearchItem[]	[]	候选项（key / label / group / icon / hint / keywords）
hotkey	string	'ctrl+k'	快捷键（空串禁用监听）
placeholder	string	'搜索菜单、页面、功能…'	输入占位
show-recent	boolean	false	记录最近访问（localStorage）
max-results	number	12	结果最大条数

Events

事件名	参数	说明
select	(item: BizGlobalSearchItem)	选中条目（面板自动关闭）
update:visible	(visible: boolean)	面板开合

Slots

插槽名	说明
trigger	触发器入口接管

Expose

名称	类型	说明
open	() => void	打开面板
close	() => void	关闭面板
clearRecent	() => void	清空最近访问记录