diff --git a/packages/ui/src/BasicLayout/demo/basic.tsx b/packages/ui/src/BasicLayout/demo/basic.tsx
index 125523ef5..514834cdb 100644
--- 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: ,
selectedIcon: ,
},
diff --git a/packages/ui/src/BasicLayout/demo/menu-over-length.tsx b/packages/ui/src/BasicLayout/demo/menu-over-length.tsx
new file mode 100644
index 000000000..253f5fa2a
--- /dev/null
+++ 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: ,
+ selectedIcon: ,
+ },
+ {
+ link: '/~demos/basiclayout-demo-basic/tenant',
+ title: '租户管理租户管理租户管理租户管理',
+ icon: ,
+ selectedIcon: ,
+ },
+ {
+ link: '/~demos/basiclayout-demo-basic/monitor',
+ title: '监控中心',
+ icon: ,
+ selectedIcon: ,
+ },
+ {
+ link: '/~demos/basiclayout-demo-basic/diagnosis',
+ title: '诊断中心诊断中心诊断中心诊断中心',
+ icon: ,
+ selectedIcon: ,
+ 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: ,
+ selectedIcon: ,
+ },
+ {
+ link: '/~demos/basiclayout-demo-basic/log',
+ title: '日志服务',
+ icon: ,
+ selectedIcon: ,
+ divider: true,
+ },
+ {
+ link: '/~demos/basiclayout-demo-basic/property',
+ title: '系统参数',
+ icon: ,
+ selectedIcon: ,
+ },
+ ];
+ const userMenu = (
+
+ );
+ return (
+
+
+
+ );
+};
diff --git a/packages/ui/src/BasicLayout/index.md b/packages/ui/src/BasicLayout/index.md
index ed7a582f2..b196f1dc8 100644
--- a/packages/ui/src/BasicLayout/index.md
+++ b/packages/ui/src/BasicLayout/index.md
@@ -9,6 +9,8 @@ nav:
+
+
diff --git a/packages/ui/src/BasicLayout/index.tsx b/packages/ui/src/BasicLayout/index.tsx
index d2670b39f..6b96126ab 100644
--- 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 = ({
data-testid="menu.sub"
key={item.link}
title={
- 15 就支持 tooltip 展示
- {...(isEnglish() && item.title && item.title.length > 15
- ? {}
- : {
- visible: false,
- // Support for antd 5.0
- open: false,
- })}
- getPopupContainer={() => document.body}
- >
-
- {renderIcon(item)}
- {item.title}
-
-
+
+ {renderIcon(item)}
+
+ {item.title}
+
+
}
>
{renderMenu(item.children)}
@@ -205,24 +203,22 @@ const BasicLayout: React.FC = ({
}
}}
>
- 20 就支持 tooltip 展示
- {...(isEnglish() && item.title && item.title.length > 20
- ? {}
- : {
- visible: false,
- // Support for antd 5.0
- open: false,
- })}
- getPopupContainer={() => document.body}
- >
-
- {renderIcon(item)}
- {item.title}
-
-
+
+ {renderIcon(item)}
+
+ {item.title}
+
+
);
}
diff --git a/packages/ui/src/BasicLayout/style/Header.ts b/packages/ui/src/BasicLayout/style/Header.ts
index b4268a225..cddd5a524 100644
--- a/packages/ui/src/BasicLayout/style/Header.ts
+++ b/packages/ui/src/BasicLayout/style/Header.ts
@@ -18,7 +18,7 @@ export const genHeaderStyle: GenerateStyle = (
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 = (
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,20 +91,6 @@ export const genHeaderStyle: GenerateStyle = (
}
}
},
-
- },
-
- [`${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`]: {
@@ -112,22 +98,20 @@ export const genHeaderStyle: GenerateStyle = (
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
index 8bf9eb3e1..8483bbfe1 100644
--- 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
index d7f4d5fb7..9f94b08f8 100644
--- a/packages/ui/src/Welcome/index.tsx
+++ b/packages/ui/src/Welcome/index.tsx
@@ -149,7 +149,13 @@ const Welcome: React.FC = ({
{isDefault && (
- } block={true} {...buttonProps}>
+ }
+ block={true}
+ {...buttonProps}
+ >
{buttonText}