From 5dc38831eb545d56951bad34ec53bf969a056da9 Mon Sep 17 00:00:00 2001
From: Leo <leo@qi-cloud.com>
Date: Mon, 5 Jan 2026 18:59:53 +0800
Subject: [PATCH] 11

---
 src/components/MobileBottomNav/index.vue | 152 ++++++++++++++++++++---
 src/layout/index.vue                     |  10 +-
 2 files changed, 144 insertions(+), 18 deletions(-)

diff --git a/src/components/MobileBottomNav/index.vue b/src/components/MobileBottomNav/index.vue
index dc0a270..a876201 100644
--- a/src/components/MobileBottomNav/index.vue
+++ b/src/components/MobileBottomNav/index.vue
@@ -34,48 +34,166 @@ export default {
       default: true
     }
   },
+  data() {
+    return {
+      navItemsCache: null
+    }
+  },
   computed: {
-    ...mapGetters(['device']),
+    ...mapGetters(['device', 'sidebarRouters']),
     isMobile() {
       return this.device === 'mobile' || window.innerWidth < 768
     },
     navItems() {
+      // 如果提供了自定义items，直接使用
       if (this.items && this.items.length > 0) {
         return this.items
       }
-      // 默认导航项 - 从路由中获取
-      const routes = this.$store?.state?.permission?.routes || []
-      const mainRoutes = routes.filter(route => route.meta && route.meta.title && !route.hidden)
       
-      if (mainRoutes.length > 0) {
-        return mainRoutes.slice(0, 5).map(route => ({
-          path: route.path,
-          label: route.meta.title,
-          icon: route.meta.icon || 'el-icon-menu',
-          iconClass: route.meta.icon
-        }))
+      // 使用缓存，避免重复计算
+      if (this.navItemsCache) {
+        return this.navItemsCache
       }
       
-      // 如果没有路由，返回默认导航
-      return [
+      // 从侧边栏路由中获取可用的路由
+      const routes = this.sidebarRouters || []
+      
+      // 扁平化路由，获取所有叶子节点路由
+      const flattenRoutes = (routes, parentPath = '') => {
+        let result = []
+        if (!routes || !Array.isArray(routes)) {
+          return result
+        }
+        
+        routes.forEach(route => {
+          if (route.hidden) return
+          
+          // 处理路径 - 确保路径正确
+          let fullPath = route.path || ''
+          if (parentPath) {
+            if (fullPath.startsWith('/')) {
+              fullPath = fullPath
+            } else {
+              // 合并路径
+              const basePath = parentPath.endsWith('/') ? parentPath.slice(0, -1) : parentPath
+              fullPath = `${basePath}/${fullPath}`.replace(/\/+/g, '/')
+            }
+          }
+          
+          // 确保路径以/开头
+          if (fullPath && !fullPath.startsWith('/')) {
+            fullPath = '/' + fullPath
+          }
+          
+          // 如果有子路由，递归处理
+          if (route.children && route.children.length > 0) {
+            result = result.concat(flattenRoutes(route.children, fullPath))
+          } else {
+            // 叶子节点路由，且有meta信息
+            if (route.meta && route.meta.title && fullPath) {
+              result.push({
+                path: fullPath,
+                label: route.meta.title,
+                icon: route.meta.icon || 'el-icon-menu',
+                iconClass: route.meta.icon,
+                route: route
+              })
+            }
+          }
+        })
+        return result
+      }
+      
+      const flatRoutes = flattenRoutes(routes)
+      
+      // 过滤并选择前5个主要路由
+      const mainRoutes = flatRoutes
+        .filter(route => {
+          // 过滤掉一些特殊路由
+          const excludePaths = ['/redirect', '/login', '/register', '/404', '/401', '/user/profile']
+          const path = route.path || ''
+          return path && 
+                 path !== '/' &&
+                 !excludePaths.some(exclude => path.includes(exclude)) &&
+                 !path.startsWith('/user/')
+        })
+        .slice(0, 5)
+      
+      // 缓存结果
+      if (mainRoutes.length > 0) {
+        this.navItemsCache = mainRoutes
+        return mainRoutes
+      }
+      
+      // 如果没有找到路由，返回默认导航
+      const defaultRoutes = [
         {
-          path: '/index',
+          path: '/sloworder/index',
           label: '首页',
           icon: 'el-icon-s-home'
         }
       ]
+      
+      this.navItemsCache = defaultRoutes
+      return defaultRoutes
     }
   },
+  watch: {
+    sidebarRouters: {
+      handler() {
+        // 路由变化时清除缓存
+        this.navItemsCache = null
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // 等待路由加载完成
+    this.$nextTick(() => {
+      // 延迟一下，确保路由已经加载
+      setTimeout(() => {
+        this.navItemsCache = null
+        this.$forceUpdate()
+      }, 500)
+    })
+  },
   methods: {
     isActive(path) {
-      return this.$route.path.startsWith(path)
+      if (!path) return false
+      const currentPath = this.$route.path
+      return currentPath === path || currentPath.startsWith(path + '/')
     },
     handleNavClick(item) {
       if (item.handler) {
         item.handler()
-      } else if (item.path) {
-        this.$router.push(item.path)
+        this.$emit('nav-click', item)
+        return
       }
+      
+      if (item.path) {
+        // 确保路径正确
+        let path = item.path
+        if (!path.startsWith('/')) {
+          path = `/${path}`
+        }
+        
+        // 移除末尾的斜杠（除了根路径）
+        if (path !== '/' && path.endsWith('/')) {
+          path = path.slice(0, -1)
+        }
+        
+        // 尝试导航
+        this.$router.push(path).catch(err => {
+          // 如果push失败，尝试replace
+          if (err.name !== 'NavigationDuplicated') {
+            this.$router.replace(path).catch(() => {
+              console.error('Navigation to', path, 'failed')
+              // 不显示错误消息，避免打扰用户
+            })
+          }
+        })
+      }
+      
       this.$emit('nav-click', item)
     }
   }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 2ae9413..5d9cb20 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -11,7 +11,10 @@
       <settings ref="settingRef"/>
     </div>
     <!-- 移动端底部导航 -->
-    <mobile-bottom-nav v-if="device === 'mobile'" />
+    <mobile-bottom-nav 
+      v-if="device === 'mobile'" 
+      :items="mobileNavItems"
+    />
   </div>
 </template>
 
@@ -42,6 +45,11 @@ export default {
       needTagsView: state => state.settings.tagsView,
       fixedHeader: state => state.settings.fixedHeader
     }),
+    mobileNavItems() {
+      // 可以从配置或store中获取，也可以自定义
+      // 如果返回空数组，组件会使用默认逻辑
+      return []
+    },
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,