1

src/layout/index.vue

@@ -1,20 +1,23 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
-    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
+    <sidebar v-if="!sidebar.hide && device !== 'mobile'" class="sidebar-container"/>
+    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide, 'mobile-layout': device === 'mobile'}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar @setLayout="setLayout"/>
-        <tags-view v-if="needTagsView"/>
+        <tags-view v-if="needTagsView && device !== 'mobile'"/>
       </div>
       <app-main/>
       <settings ref="settingRef"/>
     </div>
+    <!-- 移动端底部导航 -->
+    <mobile-bottom-nav v-if="device === 'mobile'" />
   </div>
 </template>
 
 <script>
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import MobileBottomNav from '@/components/MobileBottomNav'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import variables from '@/assets/styles/variables.scss'
@@ -26,7 +29,8 @@ export default {
     Navbar,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
+    MobileBottomNav
   },
   mixins: [ResizeMixin],
   computed: {
@@ -107,4 +111,40 @@ export default {
   .mobile .fixed-header {
     width: 100%;
   }
+
+  // 移动端优化
+  @media (max-width: 768px) {
+    .app-wrapper {
+      &.mobile {
+        .sidebar-container {
+          display: none; // 移动端完全隐藏侧边栏，使用底部导航
+        }
+      }
+
+      .drawer-bg {
+        display: none; // 移动端不需要遮罩
+      }
+
+      .main-container {
+        margin-left: 0 !important;
+        width: 100%;
+        
+        &.mobile-layout {
+          padding-bottom: 60px; // 为底部导航预留空间
+        }
+      }
+
+      .fixed-header {
+        width: 100% !important;
+        left: 0;
+      }
+      
+      // 移动端隐藏标签页
+      .hasTagsView {
+        .fixed-header + .app-main {
+          padding-top: 48px !important;
+        }
+      }
+    }
+  }
 </style>