修改：调整顶部小组件样式，解决组件垂直对齐的问题；

src/layouts/GlobalHeader.vue

@@ -68,17 +68,6 @@ export default {
       color: #1890ff;
     }
   }
-  .header-item{
-    padding: 0 12px;
-    display: inline-block;
-    height: 100%;
-    cursor: pointer;
-    vertical-align: middle;
-    i{
-      font-size: 16px;
-      color: rgba(0,0,0,.65);
-    }
-  }
   .global-header{
     padding: 0 12px 0 0;
     -webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
@@ -129,10 +118,20 @@ export default {
       }
       .global-header-right{
         float: right;
+        display: flex;
         &.dark{
           color: #fff;
+          a, i{
+            color: #fff !important;
+          }
+        }
+        .header-item{
+          padding: 0 12px;
+          cursor: pointer;
+          align-self: center;
           i{
-            color: #fff;
+            font-size: 16px;
+            color: rgba(0,0,0,.65);
           }
         }
       }

src/layouts/HeaderlAvatar.vue

@@ -1,9 +1,9 @@
 <template>
-  <a-dropdown class="header-avatar">
+  <a-dropdown>
-    <span style="cursor: pointer">
+    <div class="header-avatar" style="cursor: pointer">
-      <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar"/>
+      <a-avatar class="avatar" :size="30" shape="circle" :src="user.avatar"/>
-      <span>{{user.name}}</span>
+      <span class="name">{{user.name}}</span>
-    </span>
+    </div>
     <a-menu :class="['avatar-menu']" slot="overlay">
       <a-menu-item>
         <a-icon type="user" />
@@ -38,17 +38,19 @@ export default {
 
 <style lang="less">
   .header-avatar{
-    display: inline-block;
+    display: inline-flex;
-    height: 100%;
+    .avatar, .name{
-    vertical-align: initial;
+      align-self: center;
-  }
+    }
-  .avatar{
+    .avatar{
-    margin: 20px 4px 20px 0;
+      margin-right: 8px;
-    color: #1890ff;
+    }
-    background: hsla(0,0%,100%,.85);
+    .name{
-    vertical-align: middle;
+      font-weight: 500;
+    }
   }
   .avatar-menu{
     width: 150px;
   }
+
 </style>