菜单查询功能

src/components/HeaderSearch/index.vue

@@ -1,190 +0,0 @@
-<template>
-  <div :class="{ show: show }" class="header-search">
-    <svg-icon
-      class-name="search-icon"
-      icon-class="search"
-      @click.stop="click"
-    />
-    <el-select
-      ref="headerSearchSelect"
-      v-model="search"
-      :remote-method="querySearch"
-      filterable
-      default-first-option
-      remote
-      placeholder="搜索导航栏"
-      class="header-search-select"
-      @change="change"
-    >
-      <el-option
-        v-for="item in options"
-        :key="item.path"
-        :value="item"
-        :label="item.title.join(' > ')"
-      />
-    </el-select>
-  </div>
-</template>
-
-<script>
-// fuse is a lightweight fuzzy-search module
-// make search results more in line with expectations
-import Fuse from 'fuse.js'
-import path from 'path'
-
-export default {
-  name: 'HeaderSearch',
-  data () {
-    return {
-      search: '',
-      options: [],
-      searchPool: [],
-      show: false,
-      fuse: undefined
-    }
-  },
-  computed: {
-    routes () {
-      return this.$store.getters.permission_routes
-    }
-  },
-  watch: {
-    routes () {
-      this.searchPool = this.generateRoutes(this.routes)
-    },
-    searchPool (list) {
-      this.initFuse(list)
-    },
-    show (value) {
-      if (value) {
-        document.body.addEventListener('click', this.close)
-      } else {
-        document.body.removeEventListener('click', this.close)
-      }
-    }
-  },
-  mounted () {
-    this.searchPool = this.generateRoutes(this.routes)
-  },
-  methods: {
-    click () {
-      this.show = !this.show
-      if (this.show) {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
-      }
-    },
-    close () {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
-      this.options = []
-      this.show = false
-    },
-    change (val) {
-      this.$router.push(val.path)
-      this.search = ''
-      this.options = []
-      this.$nextTick(() => {
-        this.show = false
-      })
-    },
-    initFuse (list) {
-      this.fuse = new Fuse(list, {
-        shouldSort: true,
-        threshold: 0.4,
-        location: 0,
-        distance: 100,
-        maxPatternLength: 32,
-        minMatchCharLength: 1,
-        keys: [{
-          name: 'title',
-          weight: 0.7
-        }, {
-          name: 'path',
-          weight: 0.3
-        }]
-      })
-    },
-    // Filter out the routes that can be displayed in the sidebar
-    // And generate the internationalized title
-    generateRoutes (routes, basePath = '/', prefixTitle = []) {
-      let res = []
-
-      for (const router of routes) {
-        // skip hidden router
-        if (router.hidden) { continue }
-
-        const data = {
-          path: path.resolve(basePath, router.path),
-          title: [...prefixTitle]
-        }
-
-        if (router.meta && router.meta.title) {
-          data.title = [...data.title, router.meta.title]
-
-          if (router.redirect !== 'noRedirect') {
-            // only push the routes with title
-            // special case: need to exclude parent router without redirect
-            res.push(data)
-          }
-        }
-
-        // recursive child routes
-        if (router.children) {
-          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
-          if (tempRoutes.length >= 1) {
-            res = [...res, ...tempRoutes]
-          }
-        }
-      }
-      return res
-    },
-    querySearch (query) {
-      if (query !== '') {
-        this.options = this.fuse.search(query)
-      } else {
-        this.options = []
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.header-search {
-  font-size: 0 !important;
-
-  .search-icon {
-    cursor: pointer;
-    font-size: 18px;
-    vertical-align: middle;
-  }
-
-  .header-search-select {
-    font-size: 18px;
-    transition: width 0.2s;
-    width: 0;
-    overflow: hidden;
-    background: transparent;
-    border-radius: 0;
-    display: inline-block;
-    vertical-align: middle;
-
-    ::v-deep .el-input__inner {
-      border-radius: 0;
-      border: 0;
-      padding-left: 0;
-      padding-right: 0;
-      box-shadow: none !important;
-      border-bottom: 1px solid #d9d9d9;
-      vertical-align: middle;
-      background: transparent;
-    }
-  }
-
-  &.show {
-    .header-search-select {
-      width: 210px;
-      margin-left: 10px;
-    }
-  }
-}
-</style>

src/components/RouterSearch/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ElDialog v-model="showSearch" :show-close="false" title="菜单搜索">
+  <ElDialog v-if="isModal" v-model="showSearch" :show-close="false" title="菜单搜索">
     <el-select
       filterable
       :reserve-keyword="false"
@@ -17,19 +17,64 @@
       />
     </el-select>
   </ElDialog>
+  <div v-else class="custom-hover" @click.stop="showTopSearch = !showTopSearch">
+    <Icon icon="ep:search" />
+    <el-select
+      filterable
+      :reserve-keyword="false"
+      remote
+      placeholder="请输入菜单内容"
+      :remote-method="remoteMethod"
+      class="overflow-hidden transition-all-600"
+      :class="showTopSearch ? 'w-220px ml2' : 'w-0'"
+      @change="handleChange"
+    >
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { usePermissionStore } from '@/store/modules/permission'
+import { filterBreadcrumb } from '@/layout/components/Breadcrumb/src/helper'
+
+defineProps({
+  isModal: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const permissionStore = usePermissionStore()
+const routersa = permissionStore.getRouters
+// 解析路由 展开菜单路由
+const analyzeRouters = (routers:any) => {
+  return recursion(routers, [])
+}
+// 递归
+const recursion = (routers:any, rs) => {
+  routers.forEach(item => {
+    if (item.children?.length > 0) {
+      recursion(item.children, rs)
+    } else {
+      rs.push(item)
+    }
+  })
+  return rs
+}
 const router = useRouter() // 路由对象
 const showSearch = ref(false) // 是否显示弹框
+const showTopSearch = ref(false) // 是否显示顶部搜索框
 const value: Ref = ref('') // 用户输入的值
-
+// const routers = router.getRoutes() // 路由对象
-const routers = router.getRoutes() // 路由对象
+// 20240111 cxm 修改 根据当前登录人获取有效路由 并解析展开所有菜单路由过滤目录路由
+const routers = analyzeRouters(filterBreadcrumb(routersa))
 const options = computed(() => {
   // 提示选项
   if (!value.value) {
     return []
   }
+ 
   const list = routers.filter((item: any) => {
     if (item.meta.title?.indexOf(value.value) > -1 || item.path.indexOf(value.value) > -1) {
       return true
@@ -50,14 +95,21 @@ function remoteMethod(data) {
 
 function handleChange(path) {
   router.push({ path })
+  hiddenTopSearch();
+}
+
+function hiddenTopSearch() {
+  showTopSearch.value = false
 }
 
 onMounted(() => {
   window.addEventListener('keydown', listenKey)
+  window.addEventListener('click', hiddenTopSearch)
 })
 
 onUnmounted(() => {
   window.removeEventListener('keydown', listenKey)
+  window.removeEventListener('click', hiddenTopSearch)
 })
 
 // 监听 ctrl + k
@@ -74,3 +126,11 @@ defineExpose({
   }
 })
 </script>
+<style lang="scss" scoped>
+.w-0 {
+    width: 0 !important;
+}
+.w-220px {
+    width: 220px !important;
+}
+</style>

src/layout/components/ToolHeader.vue

@@ -9,6 +9,7 @@ import { SizeDropdown } from '@/layout/components/SizeDropdown'
 import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
+import RouterSearch from '@/components/RouterSearch/index.vue'
 
 // 头部工具
 const { getPrefixCls, variables } = useDesign()
@@ -26,6 +27,9 @@ const hamburger = computed(() => appStore.getHamburger)
 // 全屏图标
 const screenfull = computed(() => appStore.getScreenfull)
 
+// 搜索图片
+const search = computed(() => appStore.search)
+
 // 尺寸图标
 const size = computed(() => appStore.getSize)
 
@@ -59,6 +63,7 @@ export default defineComponent({
           </div>
         ) : undefined}
         <div class="h-full flex items-center">
+          {search.value ? (<RouterSearch isModal={false} />) : undefined}
           {screenfull.value ? (
             <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
           ) : undefined}

src/locales/zh-CN.ts

@@ -116,7 +116,7 @@ export default {
   },
   login: {
     welcome: '欢迎使用本系统',
-    message: '开箱即用的中后台管理系统',
+    message: '',
     tenantname: '租户名称',
     username: '用户名',
     password: '密码',
@@ -369,7 +369,7 @@ export default {
       qrSignInFormTitle: '二维码登录',
       signUpFormTitle: '注册',
       forgetFormTitle: '重置密码',
-      signInTitle: '开箱即用的中后台管理系统',
+      signInTitle: '',
       signInDesc: '输入您的个人详细信息开始使用！',
       policy: '我同意xxx隐私政策',
       scanSign: `扫码后点击"确认"，即可完成登录`,

src/store/modules/app.ts

@@ -16,6 +16,7 @@ interface AppState {
   uniqueOpened: boolean
   hamburger: boolean
   screenfull: boolean
+  search: boolean
   size: boolean
   locale: boolean
   message: boolean
@@ -52,6 +53,7 @@ export const useAppStore = defineStore('app', {
       uniqueOpened: true, // 是否只保持一个子菜单的展开
       hamburger: true, // 折叠图标
       screenfull: true, // 全屏图标
+      search: true, // 搜索图标
       size: true, // 尺寸图标
       locale: true, // 多语言图标
       message: true, // 消息图标