From 017ebf2f920d55ef6134be86b12a964be479284e Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Wed, 2 Nov 2022 16:57:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=B4=E5=83=8F=E6=97=81=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E7=94=A8=E6=88=B7=E5=90=8D=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/NavigationBar/index.vue | 19 ++++++++++++++++++-
 src/store/modules/user.ts                     |  4 +++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/layout/components/NavigationBar/index.vue b/src/layout/components/NavigationBar/index.vue
index 22a73c2..4dd5ea7 100644
--- a/src/layout/components/NavigationBar/index.vue
+++ b/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;
+        }
+      }
     }
   }
 }
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index b596796..ea33a4e 100644
--- a/src/store/modules/user.ts
+++ b/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 外使用 */