优化

src/layout/MenuV2/MenuV2.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="floating" ref="floatingRef">
-    <div ref="logoRef">
+  <div class="floating">
+    <div>
       <Logo/>
     </div>
     <div style="height: 30px; padding: 0 8px 8px 8px" @click="expandMenu" id="tutorial_search_menu">
@@ -11,20 +11,23 @@
                 @input="searchInput"
                 placeholder="菜单太难找？在这里搜索。"/>
     </div>
-    <el-scrollbar :style="barHeight">
-      <el-menu
-          v-if="rendering"
-          ref="menuRef"
-          router
-          :collapse-transition="false"
-          :collapse="isCollapse"
-          :default-active="isSearch ? '' : activeMenu"
-          :unique-opened="isSearch ? false : expandOneMenu">
-        <menu-item-v2 v-for="item in isSearch ? searchData : menuData"
-                      :data="item"
-                      :menuText="menuText"/>
-      </el-menu>
-    </el-scrollbar>
+    <div style="flex: 1;height: 0">
+      <el-scrollbar>
+        <el-menu
+            v-if="rendering"
+            ref="menuRef"
+            router
+            :collapse-transition="false"
+            :collapse="isCollapse"
+            :default-active="isSearch ? '' : activeMenu"
+            :unique-opened="isSearch ? false : expandOneMenu">
+          <menu-item-v2 v-for="item in isSearch ? searchData : menuData"
+                        :data="item"
+                        :menuText="menuText"/>
+        </el-menu>
+      </el-scrollbar>
+    </div>
+
   </div>
 </template>
 
@@ -44,10 +47,8 @@ import {getUserMenu} from "@/api/settings/menu-settings";
 
 const menuText: Ref<string> = ref('')
 const menuRef = useCompRef(ElMenu)
-
 const menuData = ref(routerMenus.value)
 const rendering = ref(true)
-
 const isSearch = ref<boolean>(false)
 const searchData = ref([])
 
@@ -56,7 +57,6 @@ const searchActives = new Set()
 const searchInput: (val: string) => void = XEUtils.debounce(async (val: string) => {
   menuText.value = val;
   searchActives.clear();
-
   if (val) {
     searchData.value = treeSearch<{ metaTitle: string; }>(menuData.value, (item) => {
       const metaTitle: string = item.metaTitle
@@ -113,13 +113,7 @@ const expandMenu = () => {
   }
 }
 
-const logoRef: Ref<HTMLHtmlElement | null> = ref(null)
 const searchRef: Ref<HTMLHeadElement | null> = ref(null)
-const floatingRef: Ref<HTMLHtmlElement | null> = ref(null)
-
-const barHeight = reactive({
-  height: ''
-})
 
 const activeMenu = computed<string>(() => {
   const {meta, path} = route
@@ -133,7 +127,7 @@ const smoothScrolling = () => {
   const routerPath = document.getElementById(router.currentRoute.value.fullPath)
   if (!routerPath) return
   routerPath.scrollIntoView({
-    block: 'start',
+    block: 'center',
     inline: 'nearest',
     behavior: 'smooth'
   })
@@ -150,9 +144,8 @@ watch(() => router.currentRoute.value, async () => {
 
 
 onMounted(async () => {
-  await nextTick()
   menuData.value = await getUserMenu()
-  barHeight.height = (floatingRef.value.clientHeight - logoRef.value.clientHeight - 36) + 'px'
+  await nextTick()
   await sleep(500)
   smoothScrolling()
 })
@@ -164,6 +157,8 @@ onMounted(async () => {
   height: 100%;
   width: 100%;
   background-color: var(--el-menu-bg-color);
+  display: flex;
+  flex-direction: column;
 
   .el-menu {
     border-right: 0 !important;