添加菜单搜索功能，修复菜单显示不全的问题

src/layout/MenuV2/MenuV2.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="floating" ref="floatingRef">
-    <Logo ref="logoRef"/>
-    <el-scrollbar :height="floatingRef?.clientHeight - logoRef?.clientHeight">
+    <div ref="logoRef">
+      <Logo/>
+    </div>
+    <div style="height: 30px; padding: 0 8px 8px 8px" @click="expandMenu">
+      <el-input ref="searchRef" v-model="menuText" prefix-icon="Search" clearable placeholder="菜单太难找？在这里搜索。"></el-input>
+    </div>
+    <el-scrollbar :style="barHeight">
       <el-menu router
                :collapse-transition="false"
                :collapse="isCollapse"
                :default-active="activeMenu"
                :unique-opened="expandOneMenu">
-        <menu-item-v2 v-for="item in data" :data="item"/>
+        <menu-item-v2 v-for="item in cptMenu" :data="item"/>
       </el-menu>
     </el-scrollbar>
   </div>
@@ -16,29 +21,58 @@
 <script setup name='MenuV2' lang="ts">
 import store from '@/store'
 import MenuItemV2 from "./MenuItemV2.vue";
-import {computed, Ref, ref} from "vue";
+import {computed, nextTick, onMounted, reactive, Ref, ref} from "vue";
 import {useRoute} from "vue-router";
 import Logo from '../HeaderV2/Logo.vue'
-import {theme} from "@/theme";
+
+const menuText: Ref<string> = ref(null)
 
 const data = store.state.user.routes
+const flatMenu = store.state.user.flatRoutes
+
+const cptMenu = computed(() => {
+  if (menuText.value) {
+    return flatMenu.filter(item => item['metaTitle'].indexOf(menuText.value) !== -1)
+  }
+  return data.filter(() => {
+      return true
+  });
+})
+
 const expandOneMenu = computed(() => store.state.app.expandOneMenu)
 const route = useRoute()
 const isCollapse = computed(() => store.state.app.isCollapse)
 
+const expandMenu = () => {
+  if (isCollapse.value) {
+    store.commit('app/isCollapseChange', false)
+    setTimeout(() => {
+      searchRef.value.focus()
+    }, 100)
+  }
+}
 
 const logoRef: Ref<HTMLHtmlElement> = ref(null)
+const searchRef: Ref<HTMLHeadElement> = ref(null)
 const floatingRef: Ref<HTMLHtmlElement> = ref(null)
 
+const barHeight = reactive({
+  height: ''
+})
 
 const activeMenu = computed(() => {
   const {meta, path} = route
-  if (meta.activeMenu) {
-    return meta.activeMenu
+  if (meta['activeMenu']) {
+    return meta['activeMenu']
   }
   return path
 })
 
+onMounted(() => {
+  nextTick(() => {
+    barHeight.height = (floatingRef.value.clientHeight - logoRef.value.clientHeight - 36) + 'px'
+  })
+})
 
 </script>
 
@@ -62,4 +96,7 @@ const activeMenu = computed(() => {
 :deep(.el-sub-menu__title) {
   padding: 0 16px;
 }
+//:deep(.el-scrollbar) {
+//  height: 86%;
+//}
 </style>

src/store/modules/user.js

@@ -10,6 +10,7 @@ const state = () => ({
   routes: [], // 用户所以可访问路由
   ward: '', // 用户当前选择的病房
   paths: [], // 装载path的string数组
+  flatRoutes: [] // 用户可访问路由的扁平列表
 })
 
 // getters
@@ -69,6 +70,9 @@ const mutations = {
   pathsChange(state, paths) {
     state.paths = paths
   },
+  flatRoutesChange(state, flatRoutes) {
+    state.flatRoutes = flatRoutes
+  },
 }
 
 // actions
@@ -104,6 +108,7 @@ const actions = {
         commit('menusChange', res.routes)
         commit('routesChange', res.routes)
         commit('pathsChange', res.paths)
+        commit('flatRoutesChange', res.flatRoutes)
         resolve(res)
       })
     })