头部导航栏增加用户名称

src/components/Layout/components/layoutHeader/index.vue

@@ -2,72 +2,70 @@
   <div class="header">
     <!--    标签-->
     <div class="flex-left-tag">
-<!--      <a-space wrap>-->
-<!--        <a-tag-->
-<!--            v-for="(tag, index) in tags"-->
-<!--            :key="tag.name"-->
-<!--            :closable="index !== 0"-->
-<!--            @close="settingStore.handleRemove(tag)"-->
-<!--        >-->
-<!--          {{ tag.meta.title }}-->
-<!--        </a-tag>-->
-<!--      </a-space>-->
+      <!--      <a-space wrap>-->
+      <!--        <a-tag-->
+      <!--            v-for="(tag, index) in tags"-->
+      <!--            :key="tag.name"-->
+      <!--            :closable="index !== 0"-->
+      <!--            @close="settingStore.handleRemove(tag)"-->
+      <!--        >-->
+      <!--          {{ tag.meta.title }}-->
+      <!--        </a-tag>-->
+      <!--      </a-space>-->
     </div>
     <!--    个人信息和操作-->
     <div class="flex-right-user">
-      <a-select :style="{width:'100px'}" v-model="langStore.lang" :bordered="false" @change="toggleLang">
+      <a-select :style="{ width: '100px' }" v-model="langStore.lang" :bordered="false" @change="toggleLang">
         <a-option v-for="item in langList" :key="item.key" :value="item.key">{{ item.label }}</a-option>
       </a-select>
 
       <div class="toggle-theme-box">
-        <icon-sun-fill v-if="designStore.getDarkTheme" @click="toggleTheme(false)" :size="18"/>
-        <icon-moon-fill v-else @click="toggleTheme(true)" :size="18"/>
+        <icon-sun-fill v-if="designStore.getDarkTheme" @click="toggleTheme(false)" :size="18" />
+        <icon-moon-fill v-else @click="toggleTheme(true)" :size="18" />
       </div>
 
       <a-dropdown trigger="click">
         <a-avatar :size="38" class="avatar-body">
-          <img
-              class="avatar-image"
-              alt="avatar"
-              src="https://avatars.githubusercontent.com/u/39849555?v=4"
-          />
+          <img class="avatar-image" alt="avatar" src="https://avatars.githubusercontent.com/u/39849555?v=4" />
         </a-avatar>
         <template #content>
           <a-doption>
             <a-space @click="evHandleLogout">
-              <icon-export/>
+              <icon-export />
               <span>{{ $t('global.logOut') }}</span>
             </a-space>
           </a-doption>
         </template>
       </a-dropdown>
+
+      <div class="userName">{{ userInfor?.username }}</div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {ref, inject, onMounted, watch, reactive} from 'vue'
-import {useRouter} from 'vue-router'
-import {useSystemStore} from '@/store/modules/systemStore'
-import {Notification} from '@arco-design/web-vue'
-import {useDesignStore} from '@/store/modules/designStore'
-import {useLangStore} from '@/store/modules/langStore'
-import {useI18n} from 'vue-i18n'
-import {langList} from '@/i18n'
-import {fn_logout} from '@/utils'
-import {RouterTagData} from '@/store/modules/routerTag.js'
+import { ref, inject, onMounted, watch, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useSystemStore } from '@/store/modules/systemStore'
+import { Notification } from '@arco-design/web-vue'
+import { useDesignStore } from '@/store/modules/designStore'
+import { useLangStore } from '@/store/modules/langStore'
+import { useI18n } from 'vue-i18n'
+import { langList } from '@/i18n'
+import { fn_logout } from '@/utils'
+import { RouterTagData } from '@/store/modules/routerTag.js'
 import { setLocalStorage, getLocalStorage } from "@/utils";
 // 标签页仓库
 const settingStore = RouterTagData()
-import {updateRouteByMenu} from "@/router/router.update.js"
+import { updateRouteByMenu } from "@/router/router.update.js"
 
 
 const router = useRouter()
-const {locale} = useI18n()
+const { locale } = useI18n()
 const systemStore = useSystemStore()
 const designStore = useDesignStore()
 const langStore = useLangStore()
-
+const userInfor = ref(null)
 
 // const reload  = inject('reloadRoutePage')
 
@@ -95,6 +93,9 @@ const evHandleLogout = () => {
     name: "login",
   })
 }
+onMounted(() => {
+  userInfor.value = JSON.parse(localStorage.getItem('user_login_information'))
+})
 
 </script>
 
@@ -134,4 +135,9 @@ const evHandleLogout = () => {
 :deep(.arco-select-view-suffix) {
   padding: 0;
 }
+
+.userName {
+  margin-left: 10px;
+  font-size: 16px;
+}
 </style>