1

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>