CommandPalette 命令面板

命令面板组件，提供快速搜索和导航菜单的功能。

🎯 在线体验：登录 https://vue.youlai.tech 后，按 Ctrl+K（Mac: ⌘+K）即可打开命令面板。

功能特性

• 🔍 快速搜索 - 支持模糊搜索菜单名称和关键字
• 📝 搜索历史 - 自动记录搜索历史，方便快速访问
• ⌨️ 键盘操作 - 支持 Enter 键快速选择
• 🚀 快速导航 - 点击搜索结果直接跳转到对应页面

基础用法

<template>
  <CommandPalette />
</template>

<script setup lang="ts">
import CommandPalette from '@/components/CommandPalette/index.vue'
</script>

在导航栏中使用

<template>
  <div class="navbar">
    <div class="navbar-left">
      <!-- 其他导航内容 -->
    </div>
    
    <div class="navbar-right">
      <CommandPalette />
      <!-- 其他工具按钮 -->
    </div>
  </div>
</template>

功能说明

搜索功能

• 输入关键字后实时搜索匹配的菜单项
• 支持菜单名称和路径的模糊匹配
• 搜索结果显示菜单标题和路径

搜索历史

• 自动记录访问过的菜单
• 无搜索关键字时显示历史记录
• 点击历史记录可快速跳转

键盘操作

按键	功能
Enter	选择第一个搜索结果
Esc	关闭搜索面板

组件结构

CommandPalette/
├── index.vue           # 主组件
└── useCommandPalette.ts # 逻辑 Composable

useCommandPalette

组件内部使用 useCommandPalette Composable 管理状态和逻辑：

const {
  visible,    // 面板显示状态
  keyword,    // 搜索关键字
  results,    // 搜索结果
  history,    // 搜索历史
  inputRef,   // 输入框引用
  open,       // 打开面板
  close,      // 关闭面板
  onSearch,   // 搜索处理
  onSelect,   // 选择处理
  onGo        // 跳转处理
} = useCommandPalette()

样式定制

// 自定义搜索面板样式
:deep(.el-dialog) {
  .el-dialog__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color);
  }
  
  .el-dialog__body {
    padding: 20px;
  }
}

// 搜索结果项样式
.search-item {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    background-color: var(--el-fill-color-light);
  }
}

注意事项

1. 菜单数据：组件从路由配置中获取菜单数据
2. 权限过滤：搜索结果会根据用户权限自动过滤
3. 国际化：支持菜单名称的国际化显示

相关链接

• 路由和菜单
• 权限控制