fix: 修复处于顶部模式时 el-menu 未自适应宽度去折叠的问题 (#153)

Co-authored-by: pany <[email protected]>

2 files changed, 3 insertions, 6 deletions

diff --git a/src/layouts/components/Sidebar/SidebarItem.vue b/src/layouts/components/Sidebar/SidebarItem.vue
index 938f3fc..5f829e4 100644
--- a/src/layouts/components/Sidebar/SidebarItem.vue
+++ b/src/layouts/components/Sidebar/SidebarItem.vue
@@ -60,10 +60,7 @@ const resolvePath = (routePath: string) => {
 </script>
 
 <template>
-  <div
-    v-if="!props.item.meta?.hidden"
-    :class="{ 'simple-mode': props.isCollapse && !isTop, 'first-level': props.isFirstLevel }"
-  >
+  <div :class="{ 'simple-mode': props.isCollapse && !isTop, 'first-level': props.isFirstLevel }">
     <template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
       <SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
         <el-menu-item :index="resolvePath(theOnlyOneChild.path)">
diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
index fc6a4d4..8f3f1ac 100644
--- a/src/layouts/components/Sidebar/index.vue
+++ b/src/layouts/components/Sidebar/index.vue
@@ -29,7 +29,7 @@ const activeMenu = computed(() => {
   } = route
   return activeMenu ? activeMenu : path
 })
-
+const noHiddenRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta?.hidden))
 const isCollapse = computed(() => !sidebar.value.opened)
 const isLeft = computed(() => layoutMode.value === "left")
 const isTop = computed(() => layoutMode.value === "top")
@@ -68,7 +68,7 @@ const hiddenScrollbarVerticalBar = computed(() => {
         :mode="isTop && !isMobile ? 'horizontal' : 'vertical'"
       >
         <SidebarItem
-          v-for="route in permissionStore.routes"
+          v-for="route in noHiddenRoutes"
           :key="route.path"
           :item="route"
           :base-path="route.path"