feat: 系统顶部添加菜单搜索框功能

src/components/layout/Header.vue

@@ -15,13 +15,52 @@
       @click="toggleSidebar"
       text
     />
-    <!-- 中间：面包屑导航 -->
+    <!-- 中间：面包屑导航和搜索框 -->
     <div class="header-center">
       <Breadcrumb />
     </div>
 
     <!-- 右侧：功能按钮和用户信息 -->
     <div class="header-right">
+      <!-- 菜单搜索 -->
+      <div class="menu-search-wrapper">
+        <el-input
+          v-model="searchQuery"
+          placeholder="搜索菜单..."
+          class="menu-search-input"
+          clearable
+          @focus="handleSearchFocus"
+          @blur="handleSearchBlur"
+          @input="handleSearchInput"
+          @keydown.enter="handleSearchEnter"
+          @keydown.up.prevent="navigateResults(-1)"
+          @keydown.down.prevent="navigateResults(1)"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+        <!-- 搜索结果下拉 -->
+        <div v-show="searchVisible && searchResults.length > 0" class="search-results-dropdown">
+          <div
+            v-for="(item, index) in searchResults"
+            :key="item.path"
+            class="search-result-item"
+            :class="{ 'is-active': activeIndex === index }"
+            @click="handleResultClick(item)"
+            @mouseenter="activeIndex = index"
+          >
+            <el-icon v-if="item.icon" class="result-icon"><component :is="item.icon" /></el-icon>
+            <span class="result-label">{{ item.label }}</span>
+          </div>
+        </div>
+        <!-- 无结果提示 -->
+        <div v-show="searchVisible && searchQuery && !searchResults.length" class="search-empty">
+          <el-icon><Search /></el-icon>
+          <span>未找到匹配的菜单</span>
+        </div>
+      </div>
+
       <!-- 全屏 -->
       <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'">
         <el-button :icon="isFullscreen ? Crop : FullScreen" text @click="toggleFullscreen" />
@@ -61,7 +100,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import {
   FullScreen,
   Crop,
@@ -70,7 +109,8 @@ import {
   SwitchButton,
   ArrowDown,
   Fold,
-  Expand
+  Expand,
+  Search
 } from '@element-plus/icons-vue'
 import { useUserStore } from '@/stores/modules/user'
 import { useLanguageStore } from '@/stores/modules/language'
@@ -96,6 +136,106 @@ const toggleSidebar = () => {
 // 用户信息 - 使用 userStore 的响应式数据
 const activeUserName = computed(() => userStore.userInfo?.username || '-')
 
+// ==================== 菜单搜索功能 ====================
+interface SearchMenuItem {
+  label: string
+  path: string
+  icon?: string
+}
+
+const searchQuery = ref('')
+const searchVisible = ref(false)
+const searchResults = ref<SearchMenuItem[]>([])
+const activeIndex = ref(-1)
+
+// 从 storage 获取菜单列表
+const getMenuList = (): any[] => {
+  return getStorage('menusInfo') || []
+}
+
+// 扁平化菜单（只获取没有子菜单的菜单项，即叶子菜单）
+const flattenMenu = (menus: any[], result: SearchMenuItem[] = []): SearchMenuItem[] => {
+  menus.forEach(menu => {
+    // 只有没有子菜单的菜单项才添加到搜索结果
+    if (menu.name && menu.path && (!menu.son || menu.son.length === 0)) {
+      result.push({
+        label: menu.name,
+        path: menu.path,
+        icon: menu.icon
+      })
+    }
+    // 递归处理子菜单
+    if (menu.son && menu.son.length > 0) {
+      flattenMenu(menu.son, result)
+    }
+  })
+  return result
+}
+
+// 搜索菜单
+const performSearch = (query: string) => {
+  if (!query.trim()) {
+    searchResults.value = []
+    return
+  }
+  
+  const allMenus = flattenMenu(getMenuList())
+  const lowerQuery = query.toLowerCase()
+  
+  searchResults.value = allMenus.filter(menu =>
+    menu.label.toLowerCase().includes(lowerQuery)
+  ).slice(0, 10) // 最多显示10条
+  
+  activeIndex.value = searchResults.value.length > 0 ? 0 : -1
+}
+
+// 搜索输入处理
+const handleSearchInput = () => {
+  performSearch(searchQuery.value)
+  searchVisible.value = true
+}
+
+// 搜索框获得焦点
+const handleSearchFocus = () => {
+  if (searchQuery.value) {
+    searchVisible.value = true
+  }
+}
+
+// 搜索框失去焦点
+const handleSearchBlur = () => {
+  // 延迟关闭，以便点击结果
+  setTimeout(() => {
+    searchVisible.value = false
+  }, 200)
+}
+
+// 回车键处理
+const handleSearchEnter = () => {
+  if (activeIndex.value >= 0 && searchResults.value[activeIndex.value]) {
+    handleResultClick(searchResults.value[activeIndex.value])
+  }
+}
+
+// 点击搜索结果
+const handleResultClick = (item: SearchMenuItem) => {
+  searchQuery.value = ''
+  searchVisible.value = false
+  router.push(item.path)
+}
+
+// 上下键导航搜索结果
+const navigateResults = (direction: number) => {
+  if (searchResults.value.length === 0) return
+  
+  activeIndex.value += direction
+  if (activeIndex.value < 0) {
+    activeIndex.value = searchResults.value.length - 1
+  } else if (activeIndex.value >= searchResults.value.length) {
+    activeIndex.value = 0
+  }
+}
+
 // 全屏相关
 const isFullscreen = ref(false)
 const toggleFullscreen = () => {
@@ -219,6 +359,90 @@ const handleLogout = () => {
     min-width: 200px;
     justify-content: flex-end;
 
+    // 菜单搜索样式
+    .menu-search-wrapper {
+      position: relative;
+      flex-shrink: 0;
+
+      .menu-search-input {
+        width: 180px;
+        transition: width 0.3s ease;
+
+        &:hover,
+        &:focus-within {
+          width: 240px;
+        }
+
+        :deep(.el-input__wrapper) {
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+      }
+
+      .search-results-dropdown {
+        position: absolute;
+        top: calc(100% + 4px);
+        left: 0;
+        min-width: 240px;
+        background: var(--el-bg-color);
+        border: 1px solid var(--el-border-color-light);
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        max-height: 320px;
+        overflow-y: auto;
+        z-index: 2000;
+
+        .search-result-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 10px 12px;
+          cursor: pointer;
+          transition: background 0.2s;
+          border-bottom: 1px solid var(--el-border-color-lighter);
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          &:hover,
+          &.is-active {
+            background: var(--el-fill-color-light);
+          }
+
+          .result-icon {
+            color: var(--el-text-color-regular);
+            font-size: 14px;
+          }
+
+          .result-label {
+            flex: 1;
+            font-size: 13px;
+            color: var(--el-text-color-primary);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+
+      .search-empty {
+        position: absolute;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        padding: 16px;
+        color: var(--el-text-color-regular);
+        font-size: 13px;
+        background: var(--el-bg-color);
+        border: 1px solid var(--el-border-color-light);
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+    }
+
     .el-button {
       padding: 4px 8px;
       color: var(--el-text-color-regular);