feat: 头像旁新增用户名显示

src/layout/components/NavigationBar/index.vue

@@ -47,7 +47,10 @@ const logout = () => {
       <ThemeSwitch v-if="showThemeSwitch" class="right-menu-item" />
       <Notify v-if="showNotify" class="right-menu-item" />
       <el-dropdown class="right-menu-item">
-        <el-avatar :icon="UserFilled" :size="34" />
+        <div class="right-menu-avatar">
+          <el-avatar :icon="UserFilled" :size="30" />
+          <span>{{ userStore.username }}</span>
+        </div>
         <template #dropdown>
           <el-dropdown-menu>
             <a target="_blank" href="https://juejin.cn/post/7089377403717287972">
@@ -96,6 +99,10 @@ const logout = () => {
   }
   .breadcrumb {
     float: left;
+    // 参考 Bootstrap 的响应式设计 WIDTH = 576
+    @media screen and (max-width: 576px) {
+      display: none;
+    }
   }
   .right-menu {
     float: right;
@@ -107,6 +114,16 @@ const logout = () => {
     .right-menu-item {
       padding: 0 10px;
       cursor: pointer;
+      .right-menu-avatar {
+        display: flex;
+        align-items: center;
+        .el-avatar {
+          margin-right: 10px;
+        }
+        span {
+          font-size: 16px;
+        }
+      }
     }
   }
 }

src/store/modules/user.ts

@@ -10,6 +10,7 @@ import { type RouteRecordRaw } from "vue-router"
 export const useUserStore = defineStore("user", () => {
   const token = ref<string>(getToken() || "")
   const roles = ref<string[]>([])
+  const username = ref<string>("")
 
   /** 设置角色数组 */
   const setRoles = (value: string[]) => {
@@ -39,6 +40,7 @@ export const useUserStore = defineStore("user", () => {
       getUserInfoApi()
         .then((res: any) => {
           roles.value = res.data.roles
+          username.value = res.data.username
           resolve(res)
         })
         .catch((error) => {
@@ -73,7 +75,7 @@ export const useUserStore = defineStore("user", () => {
     roles.value = []
   }
 
-  return { token, roles, setRoles, login, getInfo, changeRoles, logout, resetToken }
+  return { token, roles, username, setRoles, login, getInfo, changeRoles, logout, resetToken }
 })
 
 /** 在 setup 外使用 */