@oceanbase/ui 0.2.24 → 0.2.25

package/es/locale/zh-TW.js

@@ -1,6 +1,6 @@
-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); }
-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); }
+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); }

package/lib/BasicLayout/Header.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { Locale } from '../interface';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
-import './Header.less';
 export type OverlayFunc = () => React.ReactElement;
 export interface HeaderLocale {
     help: string;
@@ -20,6 +19,7 @@ export interface AppData {
     releaseTime: string;
 }
 export interface HeaderProps extends LocaleWrapperProps {
+    prefixCls?: string;
     showLabel?: boolean;
     style?: React.CSSProperties;
     className?: string;

package/lib/BasicLayout/Header.js

@@ -44,11 +44,10 @@ var import_useNavigate = __toESM(require("../_util/useNavigate"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_oceanbase_logo = __toESM(require("../assets/logo/oceanbase_logo.svg"));
 var import_oceanbase_logo_dark = __toESM(require("../assets/logo/oceanbase_logo_dark.svg"));
-var import_user = __toESM(require("../assets/user.svg"));
 var import_LocaleDropdown = __toESM(require("../LocaleDropdown"));
-var import_Header = require("./Header.less");
-var prefix = (0, import_util.getPrefix)("layout-header");
+var import_Header = __toESM(require("./style/Header"));
 var Header = ({
+  prefixCls: customizePrefixCls,
   showLabel = true,
   title,
   extra,
@@ -70,7 +69,9 @@ var Header = ({
   langs,
   ...restProps
 }) => {
-  const { theme } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const { theme, getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("pro-basic-layout-header", `${customizePrefixCls}-header`);
+  const { wrapSSR } = (0, import_Header.default)(prefixCls);
   const navigate = (0, import_useNavigate.default)();
   const [visible, setVisible] = (0, import_react.useState)(false);
   const isWelcome = pathname === welcomePath;
@@ -95,81 +96,62 @@ var Header = ({
       }
     },
     welcomePath && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "welcome" }, locale.welcome),
+    docsPath && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "viewDocs" }, locale.viewDocs),
     pdfPath && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "downloadDocs" }, locale.downloadDocs),
     /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "about" }, `${locale.about}${appData.shortName ? ` ${appData.shortName}` : ""}`)
   );
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      ...restProps,
-      className: (0, import_classnames.default)(`${prefix}`, {
-        [`${prefix}-welcome`]: isWelcome
-      })
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-content` }, /* @__PURE__ */ import_react.default.createElement(
-      "img",
-      {
-        src: simpleLogoUrl,
-        alt: "",
-        onClick: () => {
-          navigate == null ? void 0 : navigate("/");
-        },
-        className: `${prefix}-logo`
-      }
-    ), title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-title` }, title), showLabel ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-extra ${prefix}-extra-with-label` }, extra, showHelp && /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: helpMenu }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.BulbOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", { "data-testid": "help" }, locale.help))), showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales: locales || langs })), userMenu ? /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: userMenu }, /* @__PURE__ */ import_react.default.createElement(import_design.Button, { shape: "round", size: "small" }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, username)))) : (
-      // userMenu username 都不存在时，不展示该项
-      /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, username ? /* @__PURE__ */ import_react.default.createElement(import_design.Button, { shape: "round", size: "small" }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, username))) : null)
-    )) : /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-extra` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: helpMenu }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-icon-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.BulbFilled, null)))), docsPath && /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: locale.viewDocs }, /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        className: `${prefix}-extra-item`,
-        onClick: () => {
-          (0, import_util.directTo)(docsPath);
-        }
-      },
-      /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-icon-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.ReadFilled, null))
-    )), showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { showLabel: true, locales: locales || langs })), userMenu ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: userMenu }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-user-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
-      "img",
-      {
-        src: import_user.default,
-        alt: "",
-        className: `${prefix}-extra-user-icon`,
-        style: { height: 12 }
-      }
-    ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-username` }, username)))) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-user-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
-      "img",
-      {
-        src: import_user.default,
-        alt: "",
-        className: `${prefix}-extra-user-icon`,
-        style: { height: 12 }
-      }
-    ), /* @__PURE__ */ import_react.default.createElement("span", null, username))))),
+  return wrapSSR(
     /* @__PURE__ */ import_react.default.createElement(
-      import_design.Modal,
+      "div",
       {
-        visible,
-        open: visible,
-        destroyOnClose: true,
-        footer: false,
-        onCancel: () => {
-          setVisible(false);
-        }
+        ...restProps,
+        className: (0, import_classnames.default)(prefixCls, {
+          [`${prefixCls}-welcome`]: isWelcome
+        })
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-about-wrapper` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-about` }, /* @__PURE__ */ import_react.default.createElement("img", { src: logoUrl, alt: "", className: `${prefix}-logo` }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-release-info` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-version` }, locale.version, ": ", appData.version), appData.releaseTime && /* @__PURE__ */ import_react.default.createElement(
-        "div",
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, /* @__PURE__ */ import_react.default.createElement(
+        "img",
+        {
+          src: simpleLogoUrl,
+          alt: "",
+          onClick: () => {
+            navigate == null ? void 0 : navigate("/");
+          },
+          className: `${prefixCls}-logo`
+        }
+      ), title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-title` }, title), showLabel ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-extra ${prefixCls}-extra-with-label` }, extra, showHelp && /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: helpMenu }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.BulbOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", { "data-testid": "help" }, locale.help))), showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales: locales || langs })), userMenu ? /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: userMenu }, /* @__PURE__ */ import_react.default.createElement(import_design.Button, { shape: "round", size: "small" }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, username)))) : (
+        // userMenu username 都不存在时，不展示该项
+        /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, username ? /* @__PURE__ */ import_react.default.createElement(import_design.Button, { shape: "round", size: "small" }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, username))) : null)
+      )) : /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-extra` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: helpMenu }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-icon-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.BulbFilled, null)))), docsPath && /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: locale.viewDocs }, /* @__PURE__ */ import_react.default.createElement(
+        "span",
         {
-          className: `${prefix}-date`
+          className: `${prefixCls}-extra-item`,
+          onClick: () => {
+            (0, import_util.directTo)(docsPath);
+          }
         },
-        `${locale.releaseTime}: ${appData.releaseTime}`
-      )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("a", { href: import_constant.OB_SITE_LINK, target: "_blank", rel: "noopener noreferrer" }, import_constant.OB_SITE_LINK)), /* @__PURE__ */ import_react.default.createElement(
-        "div",
+        /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-icon-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.ReadFilled, null))
+      )), showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { showLabel: true, locales: locales || langs })), userMenu ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: userMenu }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-user-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserFilled, { className: `${prefixCls}-extra-user-icon` }), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-username` }, username)))) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-item` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-extra-user-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserFilled, { className: `${prefixCls}-extra-user-icon` }), /* @__PURE__ */ import_react.default.createElement("span", null, username))))),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_design.Modal,
         {
-          style: { display: "flex", justifyContent: "space-between", alignItems: "center" }
+          visible,
+          open: visible,
+          destroyOnClose: true,
+          footer: false,
+          onCancel: () => {
+            setVisible(false);
+          }
         },
-        /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-copyright` }, locale.right, " ", /* @__PURE__ */ import_react.default.createElement(import_icons.CopyrightOutlined, null), " ", (0, import_moment.default)().year(), " ", locale.company),
-        /* @__PURE__ */ import_react.default.createElement("img", { src: theme.isDark ? import_oceanbase_logo_dark.default : import_oceanbase_logo.default, alt: "", style: { height: 12 } })
-      ))))
+        /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-about-wrapper` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-about` }, /* @__PURE__ */ import_react.default.createElement("img", { src: logoUrl, alt: "", className: `${prefixCls}-logo` }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-release-info` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-version` }, locale.version, ": ", appData.version), appData.releaseTime && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-date` }, `${locale.releaseTime}: ${appData.releaseTime}`)), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("a", { href: import_constant.OB_SITE_LINK, target: "_blank", rel: "noopener noreferrer" }, import_constant.OB_SITE_LINK)), /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            style: { display: "flex", justifyContent: "space-between", alignItems: "center" }
+          },
+          /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-copyright` }, locale.right, " ", /* @__PURE__ */ import_react.default.createElement(import_icons.CopyrightOutlined, null), " ", (0, import_moment.default)().year(), " ", locale.company),
+          /* @__PURE__ */ import_react.default.createElement("img", { src: theme.isDark ? import_oceanbase_logo_dark.default : import_oceanbase_logo.default, alt: "", style: { height: 12 } })
+        ))))
+      )
     )
   );
 };

package/lib/BasicLayout/index.d.ts

@@ -3,7 +3,6 @@ import type { MenuProps } from '@oceanbase/design/es/menu';
 import React from 'react';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
 import type { HeaderProps } from './Header';
-import './index.less';
 export interface SiderHeaderProps {
     backUrl: string;
     backupUrl?: string;

package/lib/BasicLayout/index.js

@@ -47,10 +47,8 @@ var import_useNavigate = __toESM(require("../_util/useNavigate"));
 var import_Header = __toESM(require("./Header"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
 var import_style = __toESM(require("./style"));
-var import_index = require("./index.less");
 var { Content, Sider } = import_design2.Layout;
 var { SubMenu, Item } = import_design2.Menu;
-var prefix = (0, import_util2.getPrefix)("layout");
 var BasicLayout = ({
   children,
   location: { pathname } = {},
@@ -66,14 +64,13 @@ var BasicLayout = ({
   sideHeader,
   subSideMenuProps,
   subSideMenus,
-  prefixCls: customizePrefixCls,
   className,
+  prefixCls: customizePrefixCls,
   ...restProps
 }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_design2.ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls("pro-basic-layout", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const basicLayoutCls = (0, import_classnames.default)(prefixCls, className);
   const navigate = (0, import_useNavigate.default)();
   const [collapsed, setCollapsed] = (0, import_react.useState)(defaultCollapsed);
   const [selectedKeys, setSelectedKeys] = (0, import_react.useState)(defaultSelectedKeys);
@@ -130,20 +127,21 @@ var BasicLayout = ({
             {
               "data-testid": "menu.sub",
               key: item.link,
-              title: /* @__PURE__ */ import_react.default.createElement(
-                import_design2.Tooltip,
+              title: /* @__PURE__ */ import_react.default.createElement("div", null, renderIcon(item), /* @__PURE__ */ import_react.default.createElement(
+                import_design.Typography.Text,
                 {
-                  placement: "right",
-                  title: item.title,
-                  ...(0, import_util2.isEnglish)() && item.title && item.title.length > 15 ? {} : {
-                    visible: false,
-                    // Support for antd 5.0
-                    open: false
+                  ellipsis: {
+                    tooltip: {
+                      placement: "right"
+                    }
                   },
-                  getPopupContainer: () => document.body
+                  style: {
+                    lineHeight: "40px",
+                    maxWidth: 80
+                  }
                 },
-                /* @__PURE__ */ import_react.default.createElement("span", null, renderIcon(item), /* @__PURE__ */ import_react.default.createElement("span", null, item.title))
-              )
+                item.title
+              ))
             },
             renderMenu(item.children)
           )
@@ -161,20 +159,21 @@ var BasicLayout = ({
                 }
               }
             },
-            /* @__PURE__ */ import_react.default.createElement(
-              import_design2.Tooltip,
+            /* @__PURE__ */ import_react.default.createElement("div", null, renderIcon(item), /* @__PURE__ */ import_react.default.createElement(
+              import_design.Typography.Text,
               {
-                placement: "right",
-                title: item.title,
-                ...(0, import_util2.isEnglish)() && item.title && item.title.length > 20 ? {} : {
-                  visible: false,
-                  // Support for antd 5.0
-                  open: false
+                ellipsis: {
+                  tooltip: {
+                    placement: "right"
+                  }
                 },
-                getPopupContainer: () => document.body
+                style: {
+                  lineHeight: "40px",
+                  maxWidth: 116
+                }
               },
-              /* @__PURE__ */ import_react.default.createElement("span", null, renderIcon(item), /* @__PURE__ */ import_react.default.createElement("span", null, item.title))
-            )
+              item.title
+            ))
           )
         );
       }
@@ -242,18 +241,23 @@ var BasicLayout = ({
     siderWidth = 0;
   }
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, banner && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-banner-wrapper` }, banner), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, banner && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-banner-wrapper` }, banner), /* @__PURE__ */ import_react.default.createElement(
       import_design2.Layout,
       {
-        className: (0, import_classnames.default)(prefix, className, basicLayoutCls, {
-          [`${prefix}-with-banner`]: banner,
-          [`${prefixCls}-sider-${siderWidth}`]: true
-        }),
+        className: (0, import_classnames.default)(
+          prefixCls,
+          {
+            [`${prefixCls}-with-banner`]: banner,
+            [`${prefixCls}-sider-${siderWidth}`]: true
+          },
+          className
+        ),
         ...restProps
       },
       /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
         import_Header.default,
         {
+          prefixCls,
           pathname,
           iconUrl,
           logoUrl,
@@ -263,7 +267,7 @@ var BasicLayout = ({
       ), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
         import_design2.Layout,
         {
-          className: `${prefix}-content-layout`,
+          className: `${prefixCls}-content-layout`,
           style: {
             marginTop: 48
           }
@@ -273,17 +277,17 @@ var BasicLayout = ({
           {
             theme: "light",
             width: siderWidth,
-            className: (0, import_classnames.default)(`${prefix}-sider`, {
-              [`${prefix}-sider-collapsed`]: collapsed,
-              [`${prefix}-sider-has-sub-sider`]: subSideMenus
+            className: (0, import_classnames.default)(`${prefixCls}-sider`, {
+              [`${prefixCls}-sider-collapsed`]: collapsed,
+              [`${prefixCls}-sider-has-sub-sider`]: subSideMenus
             })
           },
-          /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-wrapper` }, subSideMenus && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sub-sider` }, /* @__PURE__ */ import_react.default.createElement(
+          /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sider-wrapper` }, subSideMenus && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sub-sider` }, /* @__PURE__ */ import_react.default.createElement(
             import_design2.Menu,
             {
               ...subSideMenuProps,
               mode: "vertical",
-              className: `${prefix}-menu-vertical`
+              className: `${prefixCls}-menu-vertical`
             },
             renderCollapsedMenu(subSideMenus, true)
           )), (sideHeader || menus) && /* @__PURE__ */ import_react.default.createElement(
@@ -294,12 +298,12 @@ var BasicLayout = ({
                 width: "100%"
               }
             },
-            /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-content` }, sideHeader && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-header` }, sideHeader), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-menu-wrapper` }, collapsed ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-menu-collapsed` }, /* @__PURE__ */ import_react.default.createElement(
+            /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sider-content` }, sideHeader && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sider-header` }, sideHeader), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-menu-wrapper` }, collapsed ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-menu-collapsed` }, /* @__PURE__ */ import_react.default.createElement(
               import_design2.Menu,
               {
                 ...menuProps,
                 mode: "vertical",
-                className: `${prefix}-menu-vertical`
+                className: `${prefixCls}-menu-vertical`
               },
               renderCollapsedMenu(menus, false)
             )) : /* @__PURE__ */ import_react.default.createElement(
@@ -318,14 +322,14 @@ var BasicLayout = ({
                     }
                   );
                 },
-                className: `${prefix}-menu`
+                className: `${prefixCls}-menu`
               },
               renderMenu(menus)
             ))),
-            /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-sider-border` }, /* @__PURE__ */ import_react.default.createElement(
+            /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sider-border` }, /* @__PURE__ */ import_react.default.createElement(
               "div",
               {
-                className: `${prefix}-sider-collapse`,
+                className: `${prefixCls}-sider-collapse`,
                 onClick: () => {
                   setCollapsed(!collapsed);
                   setOpenKeys([]);
@@ -338,7 +342,7 @@ var BasicLayout = ({
         /* @__PURE__ */ import_react.default.createElement(
           Content,
           {
-            className: (0, import_classnames.default)(`${prefix}-content`, `${prefix}-content-${siderWidth}`),
+            className: (0, import_classnames.default)(`${prefixCls}-content`, `${prefixCls}-content-${siderWidth}`),
             style: {
               marginLeft: siderWidth
             }

package/lib/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/lib/BasicLayout/style/Header.js

@@ -0,0 +1,139 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/BasicLayout/style/Header.ts
+var Header_exports = {};
+__export(Header_exports, {
+  default: () => Header_default,
+  genHeaderStyle: () => genHeaderStyle
+});
+module.exports = __toCommonJS(Header_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genHeaderStyle = (token) => {
+  const { antCls, componentCls } = token;
+  return {
+    [`${componentCls}`]: {
+      position: "fixed",
+      zIndex: 10,
+      width: "100%",
+      height: 48,
+      padding: "10px 24px",
+      lineHeight: "48px",
+      backgroundColor: token.colorBgLayout,
+      boxShadow: `inset 0 -1px 0 0 ${token.colorBorderSecondary}`,
+      [`${componentCls}-content`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        maxWidth: token.maxWidth,
+        height: "100%",
+        margin: "0 auto"
+      },
+      [`${componentCls}-logo`]: {
+        height: 24,
+        cursor: "pointer"
+      },
+      [`${componentCls}-icon`]: {
+        width: 52,
+        height: 48,
+        lineHeight: "48px",
+        textAlign: "center",
+        borderRight: `1px solid ${token.colorBorderSecondary}`,
+        borderBottom: `1px solid ${token.colorBorderSecondary}`,
+        cursor: "pointer",
+        img: {
+          height: 32,
+          marginTop: 8
+        }
+      },
+      [`${componentCls}-title`]: {
+        /* 占据剩余的全部空间 */
+        flex: 1,
+        margin: "0 16px"
+      },
+      [`${componentCls}-extra`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        [`${componentCls}-extra-item`]: {
+          display: "inline-flex",
+          fontSize: 12,
+          cursor: "pointer",
+          "&:not(:last-child)": {
+            marginRight: 24
+          },
+          [`${componentCls}-extra-icon-wrapper`]: {
+            width: 28,
+            height: 28,
+            lineHeight: "28px",
+            textAlign: "center",
+            border: "0.88px solid #ced4e1",
+            borderRadius: 14
+          },
+          [`${componentCls}-extra-user-wrapper`]: {
+            height: 28,
+            padding: "0 10px",
+            lineHeight: "28px",
+            border: "0.88px solid #ced4e1",
+            borderRadius: 14,
+            [`${componentCls}-extra-user-icon`]: {
+              marginRight: 6
+            }
+          }
+        }
+      },
+      [`${componentCls}-extra-with-label`]: {
+        [`${componentCls}-extra-item`]: {
+          "&:not(:last-child)": {
+            marginRight: "24px !important"
+          }
+        }
+      }
+    },
+    [`${componentCls}-about-wrapper`]: {
+      [`${componentCls}-about`]: {
+        marginTop: 12
+      },
+      [`${componentCls}-logo`]: {
+        height: 72
+      },
+      [`${componentCls}-release-info`]: {
+        marginTop: 20,
+        marginBottom: 50,
+        [`${componentCls}-date`]: {
+          fontSize: 12,
+          color: token.colorTextTertiary
+        }
+      },
+      [`${componentCls}-copyright`]: {
+        fontSize: 12,
+        color: token.colorTextTertiary
+      }
+    }
+  };
+};
+var Header_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Header", (token) => {
+    return [genHeaderStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genHeaderStyle
+});