oceanbase · dengfuping · Oct 23, 2023 · Oct 23, 2023 · Oct 23, 2023 · Oct 23, 2023
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>
         );
       }

diff --git a/packages/ui/src/BasicLayout/style/Header.ts b/packages/ui/src/BasicLayout/style/Header.ts
@@ -18,7 +18,7 @@ export const genHeaderStyle: GenerateStyle<HeaderToken> = (
       padding: "10px 24px",
       lineHeight: '48px',
       backgroundColor: token.colorBgLayout,
-      boxShadow: "inset 0 -1px 0 0 #e2e8f3",
+      boxShadow: `inset 0 -1px 0 0 ${token.colorBorderSecondary}`,
 
       [`${componentCls}-content`]: {
         display: "flex",
@@ -38,8 +38,8 @@ export const genHeaderStyle: GenerateStyle<HeaderToken> = (
         height: 48,
         lineHeight: '48px',
         textAlign: "center",
-        borderRight: "1px solid #e2e8f3",
-        borderBottom: "1px solid #e2e8f3",
+        borderRight: `1px solid ${token.colorBorderSecondary}`,
+        borderBottom: `1px solid ${token.colorBorderSecondary}`,
         cursor: "pointer",
         img: {
           height: 32,
@@ -91,43 +91,27 @@ export const genHeaderStyle: GenerateStyle<HeaderToken> = (
           }
         }
       },
-
-    },
-
-    [`${componentCls}-welcome`]: {
-      color: "#fff",
-      backgroundColor: "transparent",
-      borderBottom: "none",
-      [`${componentCls}-extra`]: {
-        [`${antCls}-btn`]: {
-          color: "#fff",
-          backgroundColor: "rgba(255, 255, 255, 0.25)",
-          border: "0.5px solid rgba(0, 0, 0, 0.1)",
-        },
-      },
     },
 
     [`${componentCls}-about-wrapper`]: {
       [`${componentCls}-about`]: {
         marginTop: 12,
       },
       [`${componentCls}-logo`]: {
-        marginTop: 72,
+        height: 72,
       },
       [`${componentCls}-release-info`]: {
         marginTop: 20,
         marginBottom: 50,
         [`${componentCls}-date`]: {
           fontSize: 12,
-          fontFamily: 'Helvetica',
-          opacity: 0.45,
+          color: token.colorTextTertiary,
         },
       },
 
       [`${componentCls}-copyright`]: {
-        color: "#000",
         fontSize: 12,
-        opacity: 0.45,
+        color: token.colorTextTertiary,
       },
     }
 

diff --git a/packages/ui/src/Welcome/index.less b/packages/ui/src/Welcome/index.less
@@ -5,8 +5,7 @@
 .@{prefix}-container {
   height: 100%;
   padding-bottom: 0 !important;
-  overflow: auto;
-  background-color: #fff;
+  background-color: @colorBgContainer;
 
   .tech-page-container-content {
     // 由于 umi 的本地开发和线上打包的 CSS 样式优先级不一致，导致下列样式在线上环境不生效，因此先加上 !important
@@ -18,7 +17,7 @@
     height: 272px;
     padding-top: 72px;
     padding-left: 100px;
-    color: #fff;
+    color: @colorBgContainer;
     background-repeat: no-repeat;
     background-size: 100% 100%;
 
@@ -145,7 +144,7 @@
   // margin-right: 30px;
   margin-bottom: 30px;
   padding: 20px 30px 20px 0;
-  background: #fff;
+  background: @colorBgContainer;
   border: 1px solid rgba(0, 0, 0, 0.06);
   border-radius: 2px;
 
@@ -175,7 +174,7 @@
   }
 
   .@{prefix}-step-operations {
-    color: #0090ff;
+    color: @colorPrimary;
     font-size: 14px;
     line-height: 22px;
   }

diff --git a/packages/ui/src/Welcome/index.tsx b/packages/ui/src/Welcome/index.tsx
@@ -149,7 +149,13 @@ const Welcome: React.FC<WelcomeProps> = ({
             {isDefault && (
               <Col span={24}>
                 <div className={`${prefix}-btn-wrapper`}>
-                  <Button type="primary" icon={<PlusOutlined />} block={true} {...buttonProps}>
+                  <Button
+                    size="large"
+                    type="primary"
+                    icon={<PlusOutlined />}
+                    block={true}
+                    {...buttonProps}
+                  >
                     {buttonText}
                   </Button>
                 </div>