improve(ui): BasicLayout with over-length menu

oceanbase · Oct 23, 2023 · 4c5552b · 4c5552b
1 parent f1a2b78
commit 4c5552b
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 39 deletions.
diff --git a/packages/ui/src/BasicLayout/demo/basic.tsx b/packages/ui/src/BasicLayout/demo/basic.tsx
@@ -18,7 +18,7 @@ export default () => {
     },
     {
       link: '/~demos/basiclayout-demo-basic/tenant',
-      title: '租户管理租户管理租户管理租户管理',
+      title: '租户管理',
       icon: <IconFont type="tenant" />,
       selectedIcon: <Lottie path="/lottie/tenant.json" mode="icon" loop={false} speed={3} />,
     },

diff --git a/packages/ui/src/BasicLayout/demo/menu-over-length.tsx b/packages/ui/src/BasicLayout/demo/menu-over-length.tsx
@@ -0,0 +1,106 @@
+/**
+ * iframe: 600
+ */
+import React from 'react';
+import { Menu, message } from '@oceanbase/design';
+import { BasicLayout, IconFont, Lottie } from '@oceanbase/ui';
+import Icon from '@oceanbase/icons';
+import PageContainerCompleteDemo from '../../PageContainer/demo/complete';
+import { ReactComponent as MonitorSvg } from '../../assets/monitor.svg';
+
+export default () => {
+  const menus = [
+    {
+      link: '/~demos/basiclayout-demo-basic/overview',
+      title: '总览',
+      icon: <IconFont type="overview" />,
+      selectedIcon: <Lottie path="/lottie/overview.json" mode="icon" loop={false} speed={3} />,
+    },
+    {
+      link: '/~demos/basiclayout-demo-basic/tenant',
+      title: '租户管理租户管理租户管理租户管理',
+      icon: <IconFont type="tenant" />,
+      selectedIcon: <Lottie path="/lottie/tenant.json" mode="icon" loop={false} speed={3} />,
+    },
+    {
+      link: '/~demos/basiclayout-demo-basic/monitor',
+      title: '监控中心',
+      icon: <Icon component={MonitorSvg} />,
+      selectedIcon: <Lottie path="/lottie/monitor.json" mode="icon" loop={false} speed={3} />,
+    },
+    {
+      link: '/~demos/basiclayout-demo-basic/diagnosis',
+      title: '诊断中心诊断中心诊断中心诊断中心',
+      icon: <IconFont type="diagnosis" />,
+      selectedIcon: <Lottie path="/lottie/diagnosis.json" mode="icon" loop={false} speed={3} />,
+      children: [
+        {
+          link: `/~demos/basiclayout-basic/diagnosis/realtime`,
+          title: '实时诊断',
+        },
+
+        {
+          link: `/~demos/basiclayout-basic/diagnosis/capacity`,
+          title: '容量中心',
+        },
+
+        {
+          link: `/~demos/basiclayout-basic/diagnosis/report`,
+          title: '报告中心',
+        },
+      ],
+    },
+    {
+      link: '/~demos/basiclayout-demo-basic/backup',
+      title: '备份恢复',
+      icon: <IconFont type="backup" />,
+      selectedIcon: <Lottie path="/lottie/backup.json" mode="icon" loop={false} speed={3} />,
+    },
+    {
+      link: '/~demos/basiclayout-demo-basic/log',
+      title: '日志服务',
+      icon: <IconFont type="log" />,
+      selectedIcon: <Lottie path="/lottie/log.json" mode="icon" loop={false} speed={3} />,
+      divider: true,
+    },
+    {
+      link: '/~demos/basiclayout-demo-basic/property',
+      title: '系统参数',
+      icon: <IconFont type="property" />,
+      selectedIcon: <Lottie path="/lottie/property.json" mode="icon" loop={false} speed={3} />,
+    },
+  ];
+  const userMenu = (
+    <Menu
+      onClick={() => {
+        message.success('你点击了下拉菜单');
+      }}
+    >
+      <Menu.Item key="profile">个人设置</Menu.Item>
+      <Menu.Item key="modifyPassword">修改密码</Menu.Item>
+      <Menu.Item key="logout">退出登录</Menu.Item>
+    </Menu>
+  );
+  return (
+    <BasicLayout
+      logoUrl="https://mdn.alipayobjects.com/huamei_n8rchn/afts/img/A*WElAQJswckAAAAAAAAAAAAAADvSFAQ/original"
+      simpleLogoUrl="https://mdn.alipayobjects.com/huamei_n8rchn/afts/img/A*x1BtQ5x7_pUAAAAAAAAAAAAADvSFAQ/original"
+      menus={menus}
+      defaultSelectedKeys={['/~demos/basiclayout-basic/overview']}
+      topHeader={{
+        welcomePath: '/welcome',
+        docsPath: '/docs/index.html',
+        username: 'admin',
+        userMenu,
+        showLocale: true,
+        appData: {
+          shortName: 'OCP Express',
+          version: '1.0.0',
+          releaseTime: '2022-12-30 00:00:00',
+        },
+      }}
+    >
+      <PageContainerCompleteDemo />
+    </BasicLayout>
+  );
+};
diff --git a/packages/ui/src/BasicLayout/index.md b/packages/ui/src/BasicLayout/index.md
@@ -9,6 +9,8 @@ nav:
 
 <code src="./demo/basic.tsx" title="基本"></code>
 
+<code src="./demo/menu-over-length.tsx" title="菜单项内容超长" description="自动省略 + tooltip"></code>
+
 <code src="./demo/banner.tsx" title="带顶部 banner"></code>
 
 <code src="./demo/topHeader-icon.tsx" title="顶部导航 icon 模式"></code>

diff --git a/packages/ui/src/BasicLayout/index.tsx b/packages/ui/src/BasicLayout/index.tsx
@@ -1,6 +1,6 @@
 import { CaretRightFilled, LeftOutlined, RightOutlined } from '@oceanbase/icons';
 import { setAlpha } from '@ant-design/pro-components';
-import { token } from '@oceanbase/design';
+import { Typography, token } from '@oceanbase/design';
 import { isNullValue } from '@oceanbase/util';
 import { ConfigProvider, Divider, Layout, Menu, Tooltip } from '@oceanbase/design';
 import type { BadgeProps } from '@oceanbase/design/es/badge';
@@ -11,7 +11,7 @@ import { pathToRegexp } from 'path-to-regexp';
 import React, { useEffect, useState, useContext } from 'react';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
 import LocaleWrapper from '../locale/LocaleWrapper';
-import { isEnglish, urlToList } from '../_util';
+import { urlToList } from '../_util';
 import useNavigate from '../_util/useNavigate';
 import type { HeaderProps } from './Header';
 import Header from './Header';
@@ -171,24 +171,22 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({
             data-testid="menu.sub"
             key={item.link}
             title={
-              <Tooltip
-                placement="right"
-                title={item.title}
-                // SubMenu 通常都会带 icon，因此这里判断英文环境下如果标题字符长度 > 15 就支持 tooltip 展示
-                {...(isEnglish() && item.title && item.title.length > 15
-                  ? {}
-                  : {
-                      visible: false,
-                      // Support for antd 5.0
-                      open: false,
-                    })}
-                getPopupContainer={() => document.body}
-              >
-                <span>
-                  {renderIcon(item)}
-                  <span>{item.title}</span>
-                </span>
-              </Tooltip>
+              <div>
+                {renderIcon(item)}
+                <Typography.Text
+                  ellipsis={{
+                    tooltip: {
+                      placement: 'right',
+                    },
+                  }}
+                  style={{
+                    lineHeight: '40px',
+                    maxWidth: 80,
+                  }}
+                >
+                  {item.title}
+                </Typography.Text>
+              </div>
             }
           >
             {renderMenu(item.children)}
@@ -205,24 +203,22 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({
               }
             }}
           >
-            <Tooltip
-              placement="right"
-              title={item.title}
-              // 对于 Menu.Item，英文环境下如果标题字符长度 > 20 就支持 tooltip 展示
-              {...(isEnglish() && item.title && item.title.length > 20
-                ? {}
-                : {
-                    visible: false,
-                    // Support for antd 5.0
-                    open: false,
-                  })}
-              getPopupContainer={() => document.body}
-            >
-              <span>
-                {renderIcon(item)}
-                <span>{item.title}</span>
-              </span>
-            </Tooltip>
+            <div>
+              {renderIcon(item)}
+              <Typography.Text
+                ellipsis={{
+                  tooltip: {
+                    placement: 'right',
+                  },
+                }}
+                style={{
+                  lineHeight: '40px',
+                  maxWidth: 116,
+                }}
+              >
+                {item.title}
+              </Typography.Text>
+            </div>
           </Item>
         );
       }