@oceanbase/ui 0.2.23 → 0.2.25

package/es/BasicLayout/index.js

@@ -1,7 +1,7 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["children", "location", "banner", "iconUrl", "logoUrl", "simpleLogoUrl", "topHeader", "menus", "defaultCollapsed", "defaultSelectedKeys", "defaultOpenKeys", "sideHeader", "subSideMenuProps", "subSideMenus", "prefixCls", "className"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children", "location", "banner", "iconUrl", "logoUrl", "simpleLogoUrl", "topHeader", "menus", "defaultCollapsed", "defaultSelectedKeys", "defaultOpenKeys", "sideHeader", "subSideMenuProps", "subSideMenus", "className", "prefixCls"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -9,26 +9,25 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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 classNames from 'classnames';
 import { some } from 'lodash';
 import { pathToRegexp } from 'path-to-regexp';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import LocaleWrapper from "../locale/LocaleWrapper";
-import { getPrefix, isEnglish, urlToList } from "../_util";
+import { urlToList } from "../_util";
 import useNavigate from "../_util/useNavigate";
 import Header from "./Header";
 import zhCN from "./locale/zh-CN";
 import useStyle from "./style";
-import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -36,9 +35,8 @@ var Content = Layout.Content,
   Sider = Layout.Sider;
 var SubMenu = Menu.SubMenu,
   Item = Menu.Item;
-var prefix = getPrefix('layout');
 var BasicLayout = function BasicLayout(_ref) {
-  var _classNames2;
+  var _classNames, _classNames2;
   var children = _ref.children,
     _ref$location = _ref.location,
     _ref$location2 = _ref$location === void 0 ? {} : _ref$location,
@@ -59,15 +57,14 @@ var BasicLayout = function BasicLayout(_ref) {
     sideHeader = _ref.sideHeader,
     subSideMenuProps = _ref.subSideMenuProps,
     subSideMenus = _ref.subSideMenus,
-    customizePrefixCls = _ref.prefixCls,
     className = _ref.className,
+    customizePrefixCls = _ref.prefixCls,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(ConfigProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('basic-layout', customizePrefixCls);
+  var prefixCls = getPrefixCls('pro-basic-layout', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
     wrapSSR = _useStyle.wrapSSR;
-  var basicLayoutCls = classNames(className);
   var navigate = useNavigate();
   // 侧边栏导航是否收起
   var _useState = useState(defaultCollapsed),
@@ -148,24 +145,20 @@ var BasicLayout = function BasicLayout(_ref) {
       }) : item.accessible)) {
         pre.push( /*#__PURE__*/_jsx(SubMenu, {
           "data-testid": "menu.sub",
-          title: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
-            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: function getPopupContainer() {
-              return document.body;
-            },
-            children: /*#__PURE__*/_jsxs("span", {
-              children: [renderIcon(item), /*#__PURE__*/_jsx("span", {
-                children: item.title
-              })]
-            })
-          })),
+          title: /*#__PURE__*/_jsxs("div", {
+            children: [renderIcon(item), /*#__PURE__*/_jsx(Typography.Text, {
+              ellipsis: {
+                tooltip: {
+                  placement: 'right'
+                }
+              },
+              style: {
+                lineHeight: '40px',
+                maxWidth: 80
+              },
+              children: item.title
+            })]
+          }),
           children: renderMenu(item.children)
         }, item.link));
       } else if (!item.children && accessible) {
@@ -173,27 +166,23 @@ var BasicLayout = function BasicLayout(_ref) {
           "data-testid": "menu.item",
           onClick: function onClick() {
             if (pathname !== item.link) {
-              navigate === null || navigate === void 0 ? void 0 : navigate(item.link);
+              navigate === null || navigate === void 0 || navigate(item.link);
             }
           },
-          children: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
-            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: function getPopupContainer() {
-              return document.body;
-            },
-            children: /*#__PURE__*/_jsxs("span", {
-              children: [renderIcon(item), /*#__PURE__*/_jsx("span", {
-                children: item.title
-              })]
-            })
-          }))
+          children: /*#__PURE__*/_jsxs("div", {
+            children: [renderIcon(item), /*#__PURE__*/_jsx(Typography.Text, {
+              ellipsis: {
+                tooltip: {
+                  placement: 'right'
+                }
+              },
+              style: {
+                lineHeight: '40px',
+                maxWidth: 116
+              },
+              children: item.title
+            })]
+          })
         }, item.link));
       }
       if (item.divider && accessible) {
@@ -230,7 +219,7 @@ var BasicLayout = function BasicLayout(_ref) {
           "data-testid": "menu.item",
           onClick: function onClick() {
             if (pathname !== item.link) {
-              navigate === null || navigate === void 0 ? void 0 : navigate(item.link);
+              navigate === null || navigate === void 0 || navigate(item.link);
             }
           },
           children: /*#__PURE__*/_jsx(Tooltip, {
@@ -254,7 +243,7 @@ var BasicLayout = function BasicLayout(_ref) {
   var siderWidth = 0;
   // 根据菜单项的配置计算侧边栏的宽度
   if (subSideMenus && menus) {
-    siderWidth = collapsed ? 104 : 192;
+    siderWidth = collapsed ? 52 * 2 : 208;
   } else if (subSideMenus && !menus) {
     siderWidth = 52;
   } else if (!subSideMenus && menus) {
@@ -264,34 +253,35 @@ var BasicLayout = function BasicLayout(_ref) {
   }
   return wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
     children: [banner && /*#__PURE__*/_jsx("div", {
-      className: "".concat(prefix, "-banner-wrapper"),
+      className: "".concat(prefixCls, "-banner-wrapper"),
       children: banner
     }), /*#__PURE__*/_jsx(Layout, _objectSpread(_objectSpread({
-      className: classNames(prefix, className, basicLayoutCls, _defineProperty({}, "".concat(prefix, "-with-banner"), banner))
+      className: classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-with-banner"), banner), _defineProperty(_classNames, "".concat(prefixCls, "-sider-").concat(siderWidth), true), _classNames), className)
     }, restProps), {}, {
       children: /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx(Header, _objectSpread({
+          prefixCls: prefixCls,
           pathname: pathname,
           iconUrl: iconUrl,
           logoUrl: logoUrl,
           simpleLogoUrl: simpleLogoUrl
         }, topHeader)), /*#__PURE__*/_jsx("div", {
           children: /*#__PURE__*/_jsxs(Layout, {
-            className: "".concat(prefix, "-content-layout"),
+            className: "".concat(prefixCls, "-content-layout"),
             style: {
               marginTop: 48
             },
             children: [(subSideMenus || menus) && /*#__PURE__*/_jsx(Sider, {
               theme: "light",
               width: siderWidth,
-              className: classNames("".concat(prefix, "-sider"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "-sider-collapsed"), collapsed), _defineProperty(_classNames2, "".concat(prefix, "-sider-has-sub-sider"), subSideMenus), _classNames2)),
+              className: classNames("".concat(prefixCls, "-sider"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-sider-collapsed"), collapsed), _defineProperty(_classNames2, "".concat(prefixCls, "-sider-has-sub-sider"), subSideMenus), _classNames2)),
               children: /*#__PURE__*/_jsxs("div", {
-                className: "".concat(prefix, "-sider-wrapper"),
+                className: "".concat(prefixCls, "-sider-wrapper"),
                 children: [subSideMenus && /*#__PURE__*/_jsx("div", {
-                  className: "".concat(prefix, "-sub-sider"),
+                  className: "".concat(prefixCls, "-sub-sider"),
                   children: /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({}, subSideMenuProps), {}, {
                     mode: "vertical",
-                    className: "".concat(prefix, "-menu-vertical"),
+                    className: "".concat(prefixCls, "-menu-vertical"),
                     children: renderCollapsedMenu(subSideMenus, true)
                   }))
                 }), (sideHeader || menus) && /*#__PURE__*/_jsxs("div", {
@@ -300,17 +290,17 @@ var BasicLayout = function BasicLayout(_ref) {
                     width: '100%'
                   },
                   children: [/*#__PURE__*/_jsxs("div", {
-                    className: "".concat(prefix, "-sider-content"),
+                    className: "".concat(prefixCls, "-sider-content"),
                     children: [sideHeader && /*#__PURE__*/_jsx("div", {
-                      className: "".concat(prefix, "-sider-header"),
+                      className: "".concat(prefixCls, "-sider-header"),
                       children: sideHeader
                     }), /*#__PURE__*/_jsx("div", {
-                      className: "".concat(prefix, "-menu-wrapper"),
+                      className: "".concat(prefixCls, "-menu-wrapper"),
                       children: collapsed ? /*#__PURE__*/_jsx("div", {
-                        className: "".concat(prefix, "-menu-collapsed"),
+                        className: "".concat(prefixCls, "-menu-collapsed"),
                         children: /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({}, menuProps), {}, {
                           mode: "vertical",
-                          className: "".concat(prefix, "-menu-vertical"),
+                          className: "".concat(prefixCls, "-menu-vertical"),
                           children: renderCollapsedMenu(menus, false)
                         }))
                       }) : /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread({}, menuProps), {}, {
@@ -324,14 +314,14 @@ var BasicLayout = function BasicLayout(_ref) {
                             }
                           });
                         },
-                        className: "".concat(prefix, "-menu"),
+                        className: "".concat(prefixCls, "-menu"),
                         children: renderMenu(menus)
                       }))
                     })]
                   }), /*#__PURE__*/_jsx("div", {
-                    className: "".concat(prefix, "-sider-border"),
+                    className: "".concat(prefixCls, "-sider-border"),
                     children: /*#__PURE__*/_jsx("div", {
-                      className: "".concat(prefix, "-sider-collapse"),
+                      className: "".concat(prefixCls, "-sider-collapse"),
                       onClick: function onClick() {
                         setCollapsed(!collapsed);
                         // 导航展开/收起时，重置 openKeys
@@ -343,7 +333,7 @@ var BasicLayout = function BasicLayout(_ref) {
                 })]
               })
             }), /*#__PURE__*/_jsx(Content, {
-              className: classNames("".concat(prefix, "-content"), "".concat(prefix, "-content-").concat(siderWidth)),
+              className: classNames("".concat(prefixCls, "-content"), "".concat(prefixCls, "-content-").concat(siderWidth)),
               style: {
                 marginLeft: siderWidth
               },

package/es/BasicLayout/style/Header.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+export type HeaderToken = FullToken<any>;
+export declare const genHeaderStyle: GenerateStyle<HeaderToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/es/BasicLayout/style/Header.js

@@ -0,0 +1,95 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genHeaderStyle = function genHeaderStyle(token) {
+  var _$concat2, _$concat5, _$concat7, _ref;
+  var antCls = token.antCls,
+    componentCls = token.componentCls;
+  return _ref = {}, _defineProperty(_ref, "".concat(componentCls), (_$concat5 = {
+    position: 'fixed',
+    zIndex: 10,
+    width: '100%',
+    height: 48,
+    padding: '10px 24px',
+    lineHeight: '48px',
+    backgroundColor: token.colorBgLayout,
+    boxShadow: "inset 0 -1px 0 0 ".concat(token.colorBorderSecondary)
+  }, _defineProperty(_$concat5, "".concat(componentCls, "-content"), {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    maxWidth: token.maxWidth,
+    height: '100%',
+    margin: '0 auto'
+  }), _defineProperty(_$concat5, "".concat(componentCls, "-logo"), {
+    height: 24,
+    cursor: 'pointer'
+  }), _defineProperty(_$concat5, "".concat(componentCls, "-icon"), {
+    width: 52,
+    height: 48,
+    lineHeight: '48px',
+    textAlign: 'center',
+    borderRight: "1px solid ".concat(token.colorBorderSecondary),
+    borderBottom: "1px solid ".concat(token.colorBorderSecondary),
+    cursor: 'pointer',
+    img: {
+      height: 32,
+      marginTop: 8
+    }
+  }), _defineProperty(_$concat5, "".concat(componentCls, "-title"), {
+    /* 占据剩余的全部空间 */
+    flex: 1,
+    margin: '0 16px'
+  }), _defineProperty(_$concat5, "".concat(componentCls, "-extra"), _defineProperty({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  }, "".concat(componentCls, "-extra-item"), (_$concat2 = {
+    display: 'inline-flex',
+    fontSize: 12,
+    cursor: 'pointer',
+    '&:not(:last-child)': {
+      marginRight: 24
+    }
+  }, _defineProperty(_$concat2, "".concat(componentCls, "-extra-icon-wrapper"), {
+    width: 28,
+    height: 28,
+    lineHeight: '28px',
+    textAlign: 'center',
+    border: '0.88px solid #ced4e1',
+    borderRadius: 14
+  }), _defineProperty(_$concat2, "".concat(componentCls, "-extra-user-wrapper"), _defineProperty({
+    height: 28,
+    padding: '0 10px',
+    lineHeight: '28px',
+    border: '0.88px solid #ced4e1',
+    borderRadius: 14
+  }, "".concat(componentCls, "-extra-user-icon"), {
+    marginRight: 6
+  })), _$concat2))), _defineProperty(_$concat5, "".concat(componentCls, "-extra-with-label"), _defineProperty({}, "".concat(componentCls, "-extra-item"), {
+    '&:not(:last-child)': {
+      marginRight: '24px !important'
+    }
+  })), _$concat5)), _defineProperty(_ref, "".concat(componentCls, "-about-wrapper"), (_$concat7 = {}, _defineProperty(_$concat7, "".concat(componentCls, "-about"), {
+    marginTop: 12
+  }), _defineProperty(_$concat7, "".concat(componentCls, "-logo"), {
+    height: 72
+  }), _defineProperty(_$concat7, "".concat(componentCls, "-release-info"), _defineProperty({
+    marginTop: 20,
+    marginBottom: 50
+  }, "".concat(componentCls, "-date"), {
+    fontSize: 12,
+    color: token.colorTextTertiary
+  })), _defineProperty(_$concat7, "".concat(componentCls, "-copyright"), {
+    fontSize: 12,
+    color: token.colorTextTertiary
+  }), _$concat7)), _ref;
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('Header', function (token) {
+    return [genHeaderStyle(token)];
+  });
+  return useStyle(prefixCls);
+});