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 = ( + { + message.success('你点击了下拉菜单'); + }} + > + 个人设置 + 修改密码 + 退出登录 + + ); + 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 && (
-