perf: 优化用户名称过长，使用Tooltip进行显示

@@ -2,10 +2,12 @@
   <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
     <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
       <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
-      <span :class="`${prefixCls}__info hidden md:block w-30 truncate`">
-        <span :class="`${prefixCls}__name  `" class="truncate">
-          {{ getUserInfo.realName }}
-        </span>
+      <span :class="`${prefixCls}__info hidden md:block truncate`">
+        <Tooltip :trigger="['click']" :title="getUserInfo.realName">
+          <span :class="`${prefixCls}__name  `" class="truncate">
+            {{ getUserInfo.realName?.slice(0, 10) }}
+          </span>
+        </Tooltip>
       </span>
     </span>
 
@@ -53,7 +55,7 @@
 </template>
 <script lang="ts">
   // components
-  import { Dropdown, Menu } from 'ant-design-vue';
+  import { Dropdown, Menu, Tooltip } from 'ant-design-vue';
   import { defineComponent, computed, ref, reactive } from 'vue';
   import { useUserStore } from '/@/store/modules/user';
   import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
@@ -83,6 +85,7 @@
       LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
       PersonalChild: createAsyncComponent(() => import('../personal/index.vue')),
       AboutSoftwareModal,
+      Tooltip,
     },
     props: {
       theme: propTypes.oneOf(['dark', 'light']),