Merge pull request #612 from actiontech/fix/issue-359

[fix](Nav): Display optimization for usernames that are too long

Author: LZS911

packages/base/src/page/Nav/SideMenu/UserMenu/components/ContextMenu/index.tsx

@@ -32,7 +32,14 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
       onOpenChange={onOpenChange}
       content={
         <PopoverInnerStyleWrapper>
-          {header && <div className="header">{header}</div>}
+          {header && (
+            <div
+              className="header"
+              title={typeof header === 'string' ? header : undefined}
+            >
+              {header}
+            </div>
+          )}
           <div className="content">
             {items.map((menu) => {
               return (

packages/base/src/page/Nav/SideMenu/UserMenu/components/__tests__/__snapshots__/GlobalSetting.test.tsx.snap

@@ -82,10 +82,11 @@ exports[`base/page/Nav/SideMenu/GlobalSetting render snap when is "checkPagePerm
             class="ant-popover-inner-content"
           >
             <div
-              class="css-1uknfyo"
+              class="css-1lz0wpv"
             >
               <div
                 class="header"
+                title="全局设置"
               >
                 全局设置
               </div>

packages/base/src/page/Nav/SideMenu/UserMenu/components/__tests__/__snapshots__/UserNavigate.ce.test.tsx.snap

@@ -48,10 +48,11 @@ exports[`base/page/Nav/SideMenu/UserNavigate-ce render snap 2`] = `
             class="ant-popover-inner-content"
           >
             <div
-              class="css-1uknfyo"
+              class="css-1lz0wpv"
             >
               <div
                 class="header"
+                title="Test name"
               >
                 Test name
               </div>
@@ -201,10 +202,11 @@ exports[`base/page/Nav/SideMenu/UserNavigate-ce render snap 3`] = `
             class="ant-popover-inner-content"
           >
             <div
-              class="css-1uknfyo"
+              class="css-1lz0wpv"
             >
               <div
                 class="header"
+                title="Test name"
               >
                 Test name
               </div>

packages/base/src/page/Nav/SideMenu/UserMenu/components/__tests__/__snapshots__/UserNavigate.test.tsx.snap

@@ -48,10 +48,11 @@ exports[`base/page/Nav/SideMenu/UserNavigate-ee render snap 2`] = `
             class="ant-popover-inner-content"
           >
             <div
-              class="css-1uknfyo"
+              class="css-1lz0wpv"
             >
               <div
                 class="header"
+                title="Test name"
               >
                 Test name
               </div>
@@ -229,10 +230,11 @@ exports[`base/page/Nav/SideMenu/UserNavigate-ee render snap 3`] = `
             class="ant-popover-inner-content"
           >
             <div
-              class="css-1uknfyo"
+              class="css-1lz0wpv"
             >
               <div
                 class="header"
+                title="Test name"
               >
                 Test name
               </div>
@@ -410,10 +412,11 @@ exports[`base/page/Nav/SideMenu/UserNavigate-ee should update the user's languag
             class="ant-popover-inner-content"
           >
             <div
-              class="css-1uknfyo"
+              class="css-1lz0wpv"
             >
               <div
                 class="header"
+                title="Test name"
               >
                 Test name
               </div>
@@ -475,7 +478,7 @@ exports[`base/page/Nav/SideMenu/UserNavigate-ee should update the user's languag
                               class="ant-popover-inner-content"
                             >
                               <div
-                                class="css-1uknfyo"
+                                class="css-1lz0wpv"
                               >
                                 <div
                                   class="content"

packages/shared/lib/styleWrapper/nav.ts

@@ -251,6 +251,9 @@ export const PopoverInnerStyleWrapper = styled('div')`
     font-style: normal;
     font-weight: 500;
     line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .content {