1

src/layout/components/AppMain.vue

@@ -51,24 +51,47 @@ export default {
   width: 100%;
   position: relative;
   overflow: hidden;
+  
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 48px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 .app-main:has(.copyright) {
   padding-bottom: 36px;
+  
+  @media (max-width: 768px) {
+    padding-bottom: 30px;
+  }
 }
 
 .fixed-header + .app-main {
   padding-top: 50px;
+  
+  @media (max-width: 768px) {
+    padding-top: 48px;
+  }
 }
 
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 84px);
+    
+    @media (max-width: 768px) {
+      min-height: calc(100vh - 48px);
+    }
   }
 
   .fixed-header + .app-main {
     padding-top: 84px;
+    
+    @media (max-width: 768px) {
+      padding-top: 48px;
+    }
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -110,6 +110,12 @@ export default {
   background: #fff;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
+  // 移动端优化
+  @media (max-width: 768px) {
+    height: 48px;
+    padding: 0 5px;
+  }
+
   .hamburger-container {
     line-height: 46px;
     height: 100%;
@@ -117,19 +123,41 @@ export default {
     cursor: pointer;
     transition: background .3s;
     -webkit-tap-highlight-color:transparent;
+    padding: 0 12px;
+    min-width: 44px; // 增大触摸目标
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @media (max-width: 768px) {
+      line-height: 48px;
+      padding: 0 10px;
+    }
 
     &:hover {
       background: rgba(0, 0, 0, .025)
     }
+    
+    &:active {
+      background: rgba(0, 0, 0, .05)
+    }
   }
 
   .breadcrumb-container {
     float: left;
+    
+    @media (max-width: 768px) {
+      display: none; // 移动端隐藏面包屑
+    }
   }
 
   .topmenu-container {
     position: absolute;
     left: 50px;
+    
+    @media (max-width: 768px) {
+      left: 44px;
+    }
   }
 
   .errLog-container {
@@ -141,19 +169,36 @@ export default {
     float: right;
     height: 100%;
     line-height: 50px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    @media (max-width: 768px) {
+      line-height: 48px;
+      gap: 2px;
+    }
 
     &:focus {
       outline: none;
     }
 
     .right-menu-item {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       padding: 0 8px;
       height: 100%;
+      min-width: 44px; // 增大触摸目标
       font-size: 18px;
       color: #5a5e66;
       vertical-align: text-bottom;
 
+      @media (max-width: 768px) {
+        padding: 0 6px;
+        font-size: 16px;
+        min-width: 40px;
+      }
+
       &.hover-effect {
         cursor: pointer;
         transition: background .3s;
@@ -161,6 +206,10 @@ export default {
         &:hover {
           background: rgba(0, 0, 0, .025)
         }
+        
+        &:active {
+          background: rgba(0, 0, 0, .05)
+        }
       }
     }
 
@@ -168,33 +217,71 @@ export default {
       margin-right: 0px;
       padding-right: 0px;
 
+      @media (max-width: 768px) {
+        margin-right: 0;
+      }
+
       .avatar-wrapper {
         margin-top: 10px;
         position: relative;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        cursor: pointer;
+        padding: 0 4px;
+        min-height: 44px; // 增大触摸目标
+
+        @media (max-width: 768px) {
+          margin-top: 8px;
+          gap: 4px;
+        }
 
         .user-avatar {
           cursor: pointer;
           width: 30px;
           height: 30px;
           border-radius: 50%;
+          flex-shrink: 0;
+
+          @media (max-width: 768px) {
+            width: 28px;
+            height: 28px;
+          }
         }
 
         .user-nickname{
           position: relative;
-          bottom: 10px;
           font-size: 14px;
           font-weight: bold;
+          white-space: nowrap;
+          max-width: 80px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          @media (max-width: 768px) {
+            font-size: 13px;
+            max-width: 60px;
+            display: none; // 移动端隐藏昵称
+          }
         }
 
         .el-icon-caret-bottom {
           cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
           font-size: 12px;
+          flex-shrink: 0;
+
+          @media (max-width: 768px) {
+            font-size: 10px;
+          }
         }
       }
     }
+    
+    .setting {
+      @media (max-width: 768px) {
+        display: none; // 移动端隐藏设置按钮
+      }
+    }
   }
 }
 </style>

src/layout/components/Sidebar/Logo.vue

@@ -65,6 +65,12 @@ export default {
   overflow: hidden;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
+  
+  // 移动端优化
+  @media (max-width: 768px) {
+    height: 50px;
+    line-height: 50px;
+  }
 
   & .sidebar-logo-link {
     height: 100%;
@@ -73,6 +79,10 @@ export default {
     align-items: center;
     justify-content: center;
     padding: 0 20px;
+    
+    @media (max-width: 768px) {
+      padding: 0 15px;
+    }
 
     & .logo-icon {
       display: flex;
@@ -86,11 +96,21 @@ export default {
       margin-right: 15px;
       transition: all 0.3s ease;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      
+      @media (max-width: 768px) {
+        width: 36px;
+        height: 36px;
+        margin-right: 10px;
+      }
 
       i {
         font-size: 22px;
         color: #ffffff;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        
+        @media (max-width: 768px) {
+          font-size: 18px;
+        }
       }
 
       &:hover {
@@ -99,6 +119,10 @@ export default {
         transform: scale(1.05);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       }
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
 
     & .sidebar-title {
@@ -110,6 +134,10 @@ export default {
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      
+      @media (max-width: 768px) {
+        font-size: 14px;
+      }
     }
   }
 

src/layout/components/TagsView/index.vue

@@ -244,6 +244,14 @@ export default {
   background: #fff;
   border-bottom: 1px solid #d8dce5;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  
+  // 移动端优化
+  @media (max-width: 768px) {
+    height: 0;
+    overflow: hidden;
+    display: none; // 移动端隐藏标签页
+  }
+  
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -258,11 +266,30 @@ export default {
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
+      white-space: nowrap;
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      
+      @media (max-width: 768px) {
+        max-width: 120px;
+        font-size: 11px;
+        padding: 0 6px;
+      }
+      
       &:first-of-type {
         margin-left: 15px;
+        
+        @media (max-width: 768px) {
+          margin-left: 10px;
+        }
       }
       &:last-of-type {
         margin-right: 15px;
+        
+        @media (max-width: 768px) {
+          margin-right: 10px;
+        }
       }
       &.active {
         background-color: #42b983;
@@ -298,13 +325,39 @@ export default {
     font-weight: 400;
     color: #333;
     box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    min-width: 120px;
+    
+    @media (max-width: 768px) {
+      font-size: 14px;
+      min-width: 140px;
+      padding: 8px 0;
+    }
+    
     li {
       margin: 0;
       padding: 7px 16px;
       cursor: pointer;
+      min-height: 40px;
+      display: flex;
+      align-items: center;
+      
+      @media (max-width: 768px) {
+        padding: 10px 16px;
+        min-height: 44px;
+      }
+      
       &:hover {
         background: #eee;
       }
+      
+      &:active {
+        background: #ddd;
+      }
+      
+      i {
+        margin-right: 8px;
+        font-size: 14px;
+      }
     }
   }
 }

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>

src/layout/mixin/ResizeHandler.js

@@ -1,7 +1,7 @@
 import store from '@/store'
 
 const { body } = document
-const WIDTH = 992 // refer to Bootstrap's responsive design
+const WIDTH = 768 // 移动端断点调整为 768px，更符合移动设备标准
 
 export default {
   watch: {