1

src/components/MobileBottomNav/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-bottom-nav" v-if="isMobile && show">
+  <div class="mobile-bottom-nav" :class="{ 'scrollable': navItems.length > 5 }" v-if="isMobile && show">
     <div 
       v-for="item in navItems" 
       :key="item.path"
@@ -106,7 +106,7 @@ export default {
       
       const flatRoutes = flattenRoutes(routes)
       
-      // 过滤并选择前5个主要路由
+      // 过滤并获取所有主要路由（不限制数量）
       const mainRoutes = flatRoutes
         .filter(route => {
           // 过滤掉一些特殊路由
@@ -117,7 +117,9 @@ export default {
                  !excludePaths.some(exclude => path.includes(exclude)) &&
                  !path.startsWith('/user/')
         })
-        .slice(0, 5)
+        // 不限制数量，显示所有可用路由
+        // 但限制最多10个，避免过多导致显示问题
+        .slice(0, 10)
       
       // 缓存结果
       if (mainRoutes.length > 0) {
@@ -215,17 +217,28 @@ export default {
   z-index: 1000;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
   padding-bottom: env(safe-area-inset-bottom);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  
+  // 如果导航项超过5个，允许横向滚动
+  &.scrollable {
+    justify-content: flex-start;
+    padding: 0 8px;
+  }
   
   .nav-item {
     flex: 1;
+    min-width: 60px;
+    max-width: 80px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 6px 0;
+    padding: 6px 4px;
     cursor: pointer;
     transition: all 0.3s;
     -webkit-tap-highlight-color: transparent;
+    flex-shrink: 0;
     
     .nav-icon {
       width: 28px;
@@ -252,6 +265,11 @@ export default {
       font-size: 11px;
       color: #909399;
       transition: all 0.3s;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      text-align: center;
     }
     
     &.active {