czh-20260610-右上角显示用户名称

src/layouts/default/header/index.vue

@@ -11,9 +11,12 @@
       />
       <!-- <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" /> -->
       <!-- 欢迎语 -->
-      <span v-if="getShowContent && getShowBreadTitle && !getIsMobile" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']">
+      <span
+        v-if="getShowContent && getShowBreadTitle && !getIsMobile"
+        :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`, 'headerIntroductionClass']"
+      >
         <img src="../../../assets/images/header-brand.png" class="header-logo" />
-        {{t('layout.header.welcomeIn')}} {{ title }}
+        {{ t('layout.header.welcomeIn') }} {{ title }}
       </span>
     </div>
     <!-- left end -->
@@ -42,6 +45,7 @@
       <!-- ai助手 -->
       <Aide v-if="false"></Aide>
 
+      <span v-if="realname" :class="`${prefixCls}-action__item header-username`">{{ realname }}</span>
       <UserDropDown :theme="getHeaderTheme" />
     </div>
   </Header>
@@ -108,7 +112,7 @@
       const { prefixCls } = useDesign('layout-header');
       const userStore = useUserStore();
       const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
-      const { getUseErrorHandle, /* getShowSettingButton, getSettingButtonPosition, getAiIconShow */ } = useRootSetting();
+      const { getUseErrorHandle /* getShowSettingButton, getSettingButtonPosition, getAiIconShow */ } = useRootSetting();
       const { title } = useGlobSetting();
 
       const {
@@ -167,6 +171,10 @@
         return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
       });
 
+      const realname = computed(() => {
+        return userStore.getUserInfo?.realname || '';
+      });
+
       /**
        * 首页多租户部门弹窗逻辑
        */
@@ -210,6 +218,7 @@
         getUseErrorHandle,
         getLogoWidth,
         getIsMixSidebar,
+        realname,
         // getShowSettingButton,
         // getShowSetting,
         // getShowSearch,
@@ -252,6 +261,25 @@
       width: auto;
     }
 
+    .header-username {
+      font-size: 13px;
+      font-weight: 500;
+      cursor: default;
+      pointer-events: none;
+    }
+
+    &--light {
+      .header-username {
+        color: #1677ff;
+      }
+    }
+
+    &--dark {
+      .header-username {
+        color: rgba(255, 255, 255, 0.85);
+      }
+    }
+
     &--light {
       .headerIntroductionClass {
         color: #000;
@@ -262,7 +290,8 @@
       .headerIntroductionClass {
         color: rgba(255, 255, 255, 1);
       }
-      .anticon, .truncate {
+      .anticon,
+      .truncate {
         color: rgba(255, 255, 255, 1);
       }
     }