feat:修改了子路由设置hidden属性无效的bug

src/components/AppLink/index.vue

+<!-- 解析路径并跳转路由 -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
 import { isExternal } from '@/utils/validate'
 
@@ -11,6 +12,11 @@ const props = defineProps({
 })
 
 const isExtLink = computed(() => isExternal(props.to))
+
+onMounted(()=>{
+  // console.log(props.to,'111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111')
+  
+})
 </script>
 
 <template>

src/layout/components/Sidebar/Logo.vue

@@ -16,7 +16,9 @@ const logo = '' // 暂时为空
 </script>
 
 <template>
+  
   <div class="sidebar-logo-container" :class="{'collapse': collapse}">
+    
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" alt="logo">
@@ -60,6 +62,7 @@ const logo = '' // 暂时为空
       font-size: 14px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
+      margin-left: 6px;
     }
   }
 

src/layout/components/Sidebar/SidebarItem.vue

 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import type { PropType } from 'vue'
 import { isExternal } from '@/utils/validate'
 import AppLink from '@/components/AppLink/index.vue'
@@ -19,6 +19,9 @@ const props = defineProps({
   basePath: {
     type: String,
     default: ''
+  },
+  sidebarStatus: {
+    type: Boolean,
   }
 })
 
@@ -74,6 +77,11 @@ const hasOneShowingChild = (children: MenuItem[] = [], parent: MenuItem): boolea
 
   return false
 }
+
+onMounted(()=>{
+  // console.log(props.item,'555555555555555555');
+  // console.log(onlyOneChild.value,'6666666666666666666666');
+})
 </script>
 
 <template>
@@ -88,7 +96,7 @@ const hasOneShowingChild = (children: MenuItem[] = [], parent: MenuItem): boolea
           <el-icon v-if="onlyOneChild.meta?.icon">
             <component :is="onlyOneChild.meta.icon" />
           </el-icon>
-          <span v-if="onlyOneChild.meta?.title">{{ onlyOneChild.meta.title }}</span>
+          <span v-if="onlyOneChild.meta?.title && sidebarStatus">{{ onlyOneChild.meta.title }}</span>
         </el-menu-item>
       </app-link>
     </template>

src/layout/components/Sidebar/index.vue

 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, onMounted } from 'vue'
+import { useRoute, useRouter, type RouteRecordRaw } from 'vue-router'
 import { useSettingsStore } from '@/store/settings'
 import { useAppStore } from '@/store/app'
 import { storeToRefs } from 'pinia'
@@ -16,14 +16,41 @@ const { sidebar } = storeToRefs(appStore)
 const { sidebarLogo } = storeToRefs(settingsStore)
 
 // 获取所有路由配置，而不仅仅是匹配的路由
+// const routes = computed(() => {
+  
+//   // 获取路由器中的所有路由
+//   return router.options.routes.filter(item => {
+//     // 过滤掉设置了hidden的路由
+//     // @ts-ignore - hidden 属性在实际路由对象中存在，但TypeScript类型定义中没有
+//     return !(item.hidden || (item.meta && item.meta.hidden))
+//   })
+  
+// })
+
 const routes = computed(() => {
-  // 获取路由器中的所有路由
-  return router.options.routes.filter(item => {
-    // 过滤掉设置了hidden的路由
-    // @ts-ignore - hidden 属性在实际路由对象中存在，但TypeScript类型定义中没有
-    return !(item.hidden || (item.meta && item.meta.hidden))
-  })
-})
+  // 递归过滤路由，包括子路由
+  console.log(router.options.routes,'99999999999999999999999');
+  
+  const filterHiddenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
+    return routes.filter((route: any) => {
+      console.log(route,'每一项');
+      // 如果当前路由标记为 hidden，则过滤掉
+      if (route.meta?.hidden || route.hidden) {
+        return false;
+      }
+      // 如果有子路由，递归过滤子路由
+      if (route.children && route.children.length > 0) {
+        route.children = filterHiddenRoutes(route.children);
+        // 如果过滤后子路由为空，且父路由没有 component，则过滤掉整个路由
+        if (route.children.length === 0 && !route.component) {
+          return false;
+        }
+      }
+      return true;
+    });
+  };
+  return filterHiddenRoutes([...router.options.routes]);
+});
 
 const activeMenu = computed(() => {
   const { meta, path } = route
@@ -35,6 +62,12 @@ const activeMenu = computed(() => {
 })
 
 const isCollapse = computed(() => !sidebar.value.opened)
+
+onMounted(()=>{
+  // console.log(sidebar.value,'88888888888888');
+  // console.log(router.options.routes,'11111111111111111111111111111111111111111111');
+  // console.log(isCollapse,'6666666666666');
+})
 </script>
 
 <template>
@@ -50,12 +83,14 @@ const isCollapse = computed(() => !sidebar.value.opened)
         active-text-color="#409eff"
         :collapse-transition="false"
         mode="vertical"
+        class="el-menu-vertical-demo"
       >
         <sidebar-item
           v-for="route in routes"
           :key="route.path"
           :item="route"
           :base-path="route.path"
+          :sidebarStatus="sidebar.opened" 
         />
       </el-menu>
     </el-scrollbar>
@@ -64,17 +99,21 @@ const isCollapse = computed(() => !sidebar.value.opened)
 
 <style lang="scss" scoped>
 @use "@/styles/variables" as vars;
-
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 400px;
+}
 .sidebar-container-wrapper {
   height: 100%;
   display: flex;
   flex-direction: column;
-
+  margin-left: -6px;
   // 主题定制
   :deep(.el-menu) {
     border: none;
     height: 100%;
     width: 100% !important;
+    
   }
 
   :deep(.submenu-title-noDropdown:hover), :deep(.el-submenu__title:hover) {