头部增加搜索菜单功能

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fs-admin",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check build-only",

src/components/core/GlobalHeader.vue

@@ -6,6 +6,7 @@ import avatar from '@/assets/images/avatar.png'
 import { ElMessageBox } from 'element-plus'
 import { isAbsolutePath } from '@/utils/utils'
 import router from '@/router'
+import type { RouteRecordRaw } from 'vue-router'
 
 const themeStore = useThemeStore()
 // 整体风格
@@ -78,6 +79,39 @@ const goInfo = () => {
 const settingVisible = ref(false)
 //消息提醒
 const newsVisible = ref(false)
+
+// 构造搜索需要的菜单列表
+const menuList = ref<RouteRecordRaw[]>([])
+const buildMenu = (list: RouteRecordRaw[]) => {
+  list.forEach(item => {
+    if (item.children) {
+      buildMenu(item.children)
+    } else {
+      menuList.value.push(item)
+    }
+  })
+}
+buildMenu(menuStore.leftMenuList)
+
+// 搜索框
+const searchVisible = ref(false)
+const searchValue = ref('')
+
+const menuSearch = (queryString: string, cb: any) => {
+  const results = queryString
+    ? menuList.value.filter((menu: any) => menu.meta.title.includes(queryString))
+    : menuList.value
+  cb(results)
+}
+const handleSelect = (menu: any) => {
+  searchVisible.value = false
+  const path = menu.path
+  if (isAbsolutePath(path)) {
+    window.open(path)
+  } else {
+    router.push(path)
+  }
+}
 </script>
 
 <template>
@@ -110,6 +144,9 @@ const newsVisible = ref(false)
         </div>
       </div>
       <div class="flex items-center">
+        <el-button link @click="searchVisible = true">
+          <icon-search :size="iconSize" :fill="headerStyle.color" />
+        </el-button>
         <el-button link @click="toggleScreen">
           <icon-off-screen :size="iconSize" :fill="headerStyle.color" v-if="isFullscreen" />
           <icon-full-screen :size="iconSize" :fill="headerStyle.color" v-else />
@@ -117,10 +154,10 @@ const newsVisible = ref(false)
         <el-button link @click="settingVisible = true">
           <icon-setting-two :size="iconSize" :fill="headerStyle.color" />
         </el-button>
-        <el-button link class="mr-4" @click="newsVisible = true">
+        <!-- <el-button link  @click="newsVisible = true">
           <icon-remind :size="iconSize" :fill="headerStyle.color" />
-        </el-button>
-        <el-avatar class="mr-10px" :src="user.photo" :size="35">
+        </el-button> -->
+        <el-avatar class="mr-10px ml-4" :src="user.photo" :size="35">
           <img :src="avatar" alt="" />
         </el-avatar>
         <el-dropdown>
@@ -148,6 +185,21 @@ const newsVisible = ref(false)
 
     <GlobalSetting v-model="settingVisible"></GlobalSetting>
     <GlobalNews v-model="newsVisible"></GlobalNews>
+
+    <el-dialog v-model="searchVisible" width="600px">
+      <el-autocomplete
+        class="w-full"
+        v-model="searchValue"
+        placeholder="菜单搜索："
+        :fetch-suggestions="menuSearch"
+        prefix-icon="Search"
+        @select="handleSelect"
+      >
+        <template #default="{ item }">
+          <div class="value">{{ item.meta.title }}</div>
+        </template>
+      </el-autocomplete>
+    </el-dialog>
   </header>
 </template>
 
@@ -175,7 +227,7 @@ const newsVisible = ref(false)
 .hidden {
   display: none;
 }
-.el-dropdown-link{
+.el-dropdown-link {
   cursor: pointer;
   display: flex;
   align-items: center;