fix

@@ -36,6 +36,9 @@ function userCommand(command: 'home' | 'setting' | 'updatePwd' | 'hotkeys' | 'lo
 function pro() {
 function pro() {
   window.open('https://hooray.gitee.io/fantastic-admin-pro-example/', '_blank')
   window.open('https://hooray.gitee.io/fantastic-admin-pro-example/', '_blank')
 }
 }
+onMounted(() => {
+  console.log('mounted', JSON.parse(userStore.userData).abbreviation)
+})
 </script>
 </script>
 <template>
 <template>
   <div class="tools">
   <div class="tools">
@@ -53,10 +56,16 @@ function pro() {
             <svg-icon name="ep:user-filled" />
             <svg-icon name="ep:user-filled" />
           </el-icon>
           </el-icon>
         </el-avatar>
         </el-avatar>
-        {{ userStore.userName }}
-        <el-icon>
-          <svg-icon name="ep:caret-bottom" />
-        </el-icon>
+        <div class="v-uerinfo">
+          <div class="v-top">{{ userStore.userName }}</div>
+          <div class="v-top"> {{ JSON.parse(userStore.userData).abbreviation }}</div>
+        </div>
+        <div>
+          <el-icon>
+            <svg-icon name="ep:caret-bottom" />
+          </el-icon>
+        </div>
+
       </div>
       </div>
       <template #dropdown>
       <template #dropdown>
         <el-dropdown-menu class="user-dropdown">
         <el-dropdown-menu class="user-dropdown">
@@ -143,10 +152,26 @@ function pro() {
   cursor: pointer;
   cursor: pointer;
 
 
   .user-wrapper {
   .user-wrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    .v-uerinfo {
+      display: flex;
+      flex-direction: column;
+      font-size: 12px;
+
+      .v-top {
+        height: 18px;
+        line-height: 18px;
+      }
+    }
+
     .el-avatar {
     .el-avatar {
       vertical-align: middle;
       vertical-align: middle;
       margin-top: -2px;
       margin-top: -2px;
       margin-right: 4px;
       margin-right: 4px;
     }
     }
   }
   }
-}</style>
+}
+</style>