@oceanbase/ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/lib/BasicLayout/index.js

@@ -47,6 +47,7 @@ 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_jsx_runtime = require("react/jsx-runtime");
 var { Content, Sider } = import_design2.Layout;
 var { SubMenu, Item } = import_design2.Menu;
 var BasicLayout = ({
@@ -139,64 +140,70 @@ var BasicLayout = ({
         (_a = item.children) == null ? void 0 : _a.some(({ accessible: childAccessible = true }) => childAccessible)
       ) : item.accessible)) {
         pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             SubMenu,
             {
               "data-testid": "menu.sub",
-              key: item.link,
-              title: /* @__PURE__ */ import_react.default.createElement("div", null, renderIcon(item), /* @__PURE__ */ import_react.default.createElement(
-                import_design.Typography.Text,
-                {
-                  ellipsis: {
-                    tooltip: {
-                      placement: "right"
-                    }
-                  },
-                  style: {
-                    lineHeight: "40px",
-                    maxWidth: 80
+              title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                renderIcon(item),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_design.Typography.Text,
+                  {
+                    ellipsis: {
+                      tooltip: {
+                        placement: "right"
+                      }
+                    },
+                    style: {
+                      lineHeight: "40px",
+                      maxWidth: 80
+                    },
+                    children: item.title
                   }
-                },
-                item.title
-              ))
+                )
+              ] }),
+              children: renderMenu(item.children)
             },
-            renderMenu(item.children)
+            item.link
           )
         );
       } else if (!item.children && accessible) {
         pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             Item,
             {
               "data-testid": "menu.item",
-              key: item.link,
               onClick: () => {
                 if (pathname !== item.link) {
                   navigate == null ? void 0 : navigate(item.link);
                 }
-              }
-            },
-            /* @__PURE__ */ import_react.default.createElement("div", null, renderIcon(item), /* @__PURE__ */ import_react.default.createElement(
-              import_design.Typography.Text,
-              {
-                ellipsis: {
-                  tooltip: {
-                    placement: "right"
-                  }
-                },
-                style: {
-                  lineHeight: "40px",
-                  maxWidth: 116
-                }
               },
-              item.title
-            ))
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                renderIcon(item),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_design.Typography.Text,
+                  {
+                    ellipsis: {
+                      tooltip: {
+                        placement: "right"
+                      }
+                    },
+                    style: {
+                      lineHeight: "40px",
+                      maxWidth: 116
+                    },
+                    children: item.title
+                  }
+                )
+              ] })
+            },
+            item.link
           )
         );
       }
       if (item.divider && accessible) {
         pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_design2.Divider,
             {
               style: {
@@ -222,27 +229,27 @@ var BasicLayout = ({
         (_a = item.children) == null ? void 0 : _a.some(({ accessible: childAccessible = true }) => childAccessible)
       ) : item.accessible)) {
         pre.push(
-          /* @__PURE__ */ import_react.default.createElement(SubMenu, { key: item.link, title: renderIcon(item, isSubSider) }, renderMenu(item.children))
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SubMenu, { title: renderIcon(item, isSubSider), children: renderMenu(item.children) }, item.link)
         );
       } else if (!item.children && accessible) {
         pre.push(
-          /* @__PURE__ */ import_react.default.createElement(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             Item,
             {
               "data-testid": "menu.item",
-              key: item.link,
               onClick: () => {
                 if (pathname !== item.link) {
                   navigate == null ? void 0 : navigate(item.link);
                 }
-              }
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design2.Tooltip, { placement: "right", title: item.title, getPopupContainer: () => document.body, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: renderIcon(item, isSubSider) }) })
             },
-            /* @__PURE__ */ import_react.default.createElement(import_design2.Tooltip, { placement: "right", title: item.title, getPopupContainer: () => document.body }, /* @__PURE__ */ import_react.default.createElement("div", null, renderIcon(item, isSubSider)))
+            item.link
           )
         );
       }
       if (item.divider && accessible) {
-        pre.push(/* @__PURE__ */ import_react.default.createElement(import_design2.Divider, null));
+        pre.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design2.Divider, {}));
       }
       return pre;
     }, []);
@@ -258,116 +265,132 @@ var BasicLayout = ({
     siderWidth = 0;
   }
   return wrapSSR(
-    /* @__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)(
-          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,
-          simpleLogoUrl,
-          ...topHeader
-        }
-      ), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      banner && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-banner-wrapper`, children: banner }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_design2.Layout,
         {
-          className: `${prefixCls}-content-layout`,
-          style: {
-            marginTop: 48
-          }
-        },
-        (subSideMenus || menus) && /* @__PURE__ */ import_react.default.createElement(
-          Sider,
-          {
-            theme: "light",
-            width: siderWidth,
-            className: (0, import_classnames.default)(`${prefixCls}-sider`, {
-              [`${prefixCls}-sider-collapsed`]: collapsed,
-              [`${prefixCls}-sider-has-sub-sider`]: subSideMenus
-            })
-          },
-          /* @__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: `${prefixCls}-menu-vertical`
-            },
-            renderCollapsedMenu(subSideMenus, true)
-          )), (sideHeader || menus) && /* @__PURE__ */ import_react.default.createElement(
-            "div",
+          className: (0, import_classnames.default)(
+            prefixCls,
             {
-              style: {
-                display: "flex",
-                width: "100%"
-              }
+              [`${prefixCls}-with-banner`]: banner,
+              [`${prefixCls}-sider-${siderWidth}`]: true
             },
-            /* @__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,
+            className
+          ),
+          ...restProps,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Header.default,
               {
-                ...menuProps,
-                mode: "vertical",
-                className: `${prefixCls}-menu-vertical`
-              },
-              renderCollapsedMenu(menus, false)
-            )) : /* @__PURE__ */ import_react.default.createElement(
-              import_design2.Menu,
+                prefixCls,
+                pathname,
+                iconUrl,
+                logoUrl,
+                simpleLogoUrl,
+                ...topHeader
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_design2.Layout,
               {
-                ...menuProps,
-                mode: "inline",
-                expandIcon: ({ isOpen }) => {
-                  return /* @__PURE__ */ import_react.default.createElement(
-                    import_icons.CaretRightFilled,
+                className: `${prefixCls}-content-layout`,
+                style: {
+                  marginTop: 48
+                },
+                children: [
+                  (subSideMenus || menus) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    Sider,
+                    {
+                      theme: "light",
+                      width: siderWidth,
+                      className: (0, import_classnames.default)(`${prefixCls}-sider`, {
+                        [`${prefixCls}-sider-collapsed`]: collapsed,
+                        [`${prefixCls}-sider-has-sub-sider`]: subSideMenus
+                      }),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-sider-wrapper`, children: [
+                        subSideMenus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-sub-sider`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_design2.Menu,
+                          {
+                            ...subSideMenuProps,
+                            mode: "vertical",
+                            className: `${prefixCls}-menu-vertical`,
+                            children: renderCollapsedMenu(subSideMenus, true)
+                          }
+                        ) }),
+                        (sideHeader || menus) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              width: "100%"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefixCls}-sider-content`, children: [
+                                sideHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-sider-header`, children: sideHeader }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-menu-wrapper`, children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-menu-collapsed`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  import_design2.Menu,
+                                  {
+                                    ...menuProps,
+                                    mode: "vertical",
+                                    className: `${prefixCls}-menu-vertical`,
+                                    children: renderCollapsedMenu(menus, false)
+                                  }
+                                ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  import_design2.Menu,
+                                  {
+                                    ...menuProps,
+                                    mode: "inline",
+                                    expandIcon: ({ isOpen }) => {
+                                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                        import_icons.CaretRightFilled,
+                                        {
+                                          rotate: isOpen ? 90 : 0,
+                                          style: {
+                                            fontSize: 12
+                                          }
+                                        }
+                                      );
+                                    },
+                                    className: `${prefixCls}-menu`,
+                                    children: renderMenu(menus)
+                                  }
+                                ) })
+                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-sider-border`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "div",
+                                {
+                                  className: `${prefixCls}-sider-collapse`,
+                                  onClick: () => {
+                                    setCollapsed(!collapsed);
+                                    setOpenKeys([]);
+                                  },
+                                  children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RightOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LeftOutlined, {})
+                                }
+                              ) })
+                            ]
+                          }
+                        )
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    Content,
                     {
-                      rotate: isOpen ? 90 : 0,
+                      className: (0, import_classnames.default)(`${prefixCls}-content`, `${prefixCls}-content-${siderWidth}`),
                       style: {
-                        fontSize: 12
-                      }
+                        marginLeft: siderWidth
+                      },
+                      children
                     }
-                  );
-                },
-                className: `${prefixCls}-menu`
-              },
-              renderMenu(menus)
-            ))),
-            /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-sider-border` }, /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                className: `${prefixCls}-sider-collapse`,
-                onClick: () => {
-                  setCollapsed(!collapsed);
-                  setOpenKeys([]);
-                }
-              },
-              collapsed ? /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
-            ))
-          ))
-        ),
-        /* @__PURE__ */ import_react.default.createElement(
-          Content,
-          {
-            className: (0, import_classnames.default)(`${prefixCls}-content`, `${prefixCls}-content-${siderWidth}`),
-            style: {
-              marginLeft: siderWidth
-            }
-          },
-          children
-        )
-      )))
-    ))
+                  )
+                ]
+              }
+            ) })
+          ] })
+        }
+      )
+    ] })
   );
 };
 var BasicLayout_default = (0, import_LocaleWrapper.default)({

package/lib/BasicLayout/locale/ja-JP.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    help: string;
+    welcome: string;
+    versionNotice: string;
+    viewDocs: string;
+    downloadDocs: string;
+    about: string;
+    version: string;
+    releaseTime: string;
+    company: string;
+    right: string;
+};
+export default _default;

package/lib/BasicLayout/locale/ja-JP.js

@@ -0,0 +1,36 @@
+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/locale/ja-JP.ts
+var ja_JP_exports = {};
+__export(ja_JP_exports, {
+  default: () => ja_JP_default
+});
+module.exports = __toCommonJS(ja_JP_exports);
+var ja_JP_default = {
+  help: "ヘルプ",
+  welcome: "ウェルカムページ",
+  versionNotice: "バージョン通知",
+  viewDocs: "ユーザーマニュアルを表示",
+  downloadDocs: "ユーザーマニュアルをダウンロード",
+  about: "について",
+  version: "バージョン",
+  releaseTime: "リリース日",
+  company: "北京奥星贝斯科技有限公司",
+  right: "著作権所有"
+};

package/lib/BasicLayout/style/index.js

@@ -211,7 +211,7 @@ var genBasicLayoutStyle = (token) => {
               // 菜单项激活样式
               [`${antCls}-menu-item-active, ${antCls}-menu-submenu-active > ${antCls}-menu-submenu-title`]: {
                 color: `${colorText} !important`,
-                fontWeight: 600,
+                fontWeight: token.fontWeightStrong,
                 animation: "activeGradientAnimation 0.1s",
                 // .border-gradient(linear-gradient(to right, #E9EDF6, @colorBgLayout), linear-gradient(90deg, #C6CDD9, @colorBgLayout), 0.5px, solid, 8px 0 0 8px),
                 backgroundImage: `linear-gradient(to right,#E9EDF6, ${colorBgLayout}),linear-gradient(90deg,#C6CDD9,${colorBgLayout})`,
@@ -224,7 +224,7 @@ var genBasicLayoutStyle = (token) => {
               // 菜单项选中样式
               [`${antCls}-menu-item-selected`]: {
                 color: `${colorPrimary} !important`,
-                fontWeight: 600,
+                fontWeight: token.fontWeightStrong,
                 animation: "selectedGradientAnimation 0.5s",
                 // .border-gradient(linear-gradient(to right, #E5EEFF, #F4F8FF), linear-gradient(90deg, @colorPrimaryBorder, @colorBgLayout), 0.5px, solid, 8px 0 0 8px),
                 backgroundImage: `linear-gradient(to right,#E5EEFF,#F4F8FF),linear-gradient(90deg,${colorPrimaryBorder},${colorBgLayout})`,
@@ -403,7 +403,7 @@ var genBasicLayoutStyle = (token) => {
         },
         [`${antCls}-menu-item-active`]: {
           color: "colorText !important",
-          fontWeight: 600,
+          fontWeight: token.fontWeightStrong,
           animation: "activeGradientAnimation 0.1s",
           // .border-gradient(linear-gradient(to right, #E9EDF6, colorBgLayout), linear-gradient(90deg, #C6CDD9, colorBgLayout), 0.5px, solid, 8px 0 0 8px),
           backgroundImage: `linear-gradient(to right, #E9EDF6, ${colorBgLayout}), linear-gradient(90deg, #C6CDD9, ${colorBgLayout})`,
@@ -415,7 +415,7 @@ var genBasicLayoutStyle = (token) => {
         },
         [`${antCls}-menu-submenu-active > & ${antCls}-menu-submenu-title`]: {
           color: "colorText !important",
-          fontWeight: 600,
+          fontWeight: token.fontWeightStrong,
           animation: "activeGradientAnimation 0.1s",
           // .border-gradient(linear-gradient(to right, #E9EDF6, colorBgLayout), linear-gradient(90deg, #C6CDD9, colorBgLayout), 0.5px, solid, 8px 0 0 8px),
           backgroundImage: `linear-gradient(to right, #E9EDF6, ${colorBgLayout}), linear-gradient(90deg, #C6CDD9, ${colorBgLayout})`,
@@ -427,7 +427,7 @@ var genBasicLayoutStyle = (token) => {
         },
         [`${antCls}-menu-item-selected`]: {
           color: `${colorPrimary} !important`,
-          fontWeight: 600,
+          fontWeight: token.fontWeightStrong,
           animation: "selectedGradientAnimation 0.1s",
           // .border-gradient(linear-gradient(to right, #E5EEFF, #F4F8FF), linear-gradient(90deg, @colorPrimaryBorder, colorBgLayout), 0.5px, solid, 8px 0 0 8px),
           backgroundImage: `linear-gradient(to right,#E5EEFF,#F4F8FF),linear-gradient(90deg,${colorPrimaryBorder},${colorBgLayout})`,

package/lib/BatchOperationBar/index.js

@@ -36,10 +36,11 @@ var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
 var import_lodash = require("lodash");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_index = require("./index.less");
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var prefix = "ob-batch-operation-bar";
 var BatchOperationBar = (props) => {
   var _a, _b;
@@ -55,9 +56,9 @@ var BatchOperationBar = (props) => {
     className = "",
     cancelText = locale == null ? void 0 : locale.cancelText,
     openText = locale == null ? void 0 : locale.openText,
-    openIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null),
+    openIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DownOutlined, {}),
     hiddenText = locale == null ? void 0 : locale.hiddenText,
-    hiddenIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.UpOutlined, null),
+    hiddenIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.UpOutlined, {}),
     showCancelBtn = true,
     showOpenBtn = true,
     position = ["bottom", "right"],
@@ -95,7 +96,7 @@ var BatchOperationBar = (props) => {
   const disPlayBtnRender = () => {
     if (!showOpenBtn)
       return null;
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         className: (0, import_classnames.default)({
@@ -103,18 +104,20 @@ var BatchOperationBar = (props) => {
           [`${prefix}-close-btn`]: !isOpen,
           [`${prefix}-display-btn`]: true
         }),
-        onClick: () => setIsOpen(!isOpen)
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "span",
-        {
-          className: (0, import_classnames.default)({
-            [`${prefix}-display-text`]: true
-          })
-        },
-        isOpen ? hiddenText : openText
-      ),
-      isOpen ? hiddenIcon : openIcon
+        onClick: () => setIsOpen(!isOpen),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: (0, import_classnames.default)({
+                [`${prefix}-display-text`]: true
+              }),
+              children: isOpen ? hiddenText : openText
+            }
+          ),
+          isOpen ? hiddenIcon : openIcon
+        ]
+      }
     );
   };
   (0, import_react.useEffect)(() => {
@@ -123,40 +126,52 @@ var BatchOperationBar = (props) => {
     else
       setSelectedData(selectedRows);
   }, [selectedRows]);
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       className: (0, import_classnames.default)({
         [className]: !!className,
         [prefix]: true
       }),
-      style
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-header` }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, null, !!alertRender ? alertRender == null ? void 0 : alertRender(selectedData) : /* @__PURE__ */ import_react.default.createElement(import_design.Space, null, title && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-title` }, title), /* @__PURE__ */ import_react.default.createElement("span", null, (_b = (_a = locale == null ? void 0 : locale.alertText) == null ? void 0 : _a.replace) == null ? void 0 : _b.call(_a, /\$\{\}/, (selectedData == null ? void 0 : selectedData.length) || 0))), !!showCancelBtn && /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        className: (0, import_classnames.default)({
-          [`${prefix}-cancel`]: true
-        }),
-        onClick: () => cleanSelectedRows()
-      },
-      cancelText
-    ), disPlayBtnRender()), !!alertOptionRender && /* @__PURE__ */ import_react.default.createElement("div", null, alertOptionRender == null ? void 0 : alertOptionRender({
-      selectedRows: selectedData,
-      setSelectedRows,
-      cleanSelectedRows
-    }))),
-    /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)({
-          [`${prefix}-content`]: true,
-          [`${prefix}-content-active`]: !!isOpen,
-          [`${prefix}-content-hidden`]: !isOpen
-        })
-      },
-      typeof content === "function" ? content == null ? void 0 : content({ selectedRows: selectedData, setSelectedRows, cleanSelectedRows }) : content
-    )
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${prefix}-header`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { children: [
+            !!alertRender ? alertRender == null ? void 0 : alertRender(selectedData) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefix}-title`, children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: (_b = (_a = locale == null ? void 0 : locale.alertText) == null ? void 0 : _a.replace) == null ? void 0 : _b.call(_a, /\$\{\}/, (selectedData == null ? void 0 : selectedData.length) || 0) })
+            ] }),
+            !!showCancelBtn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: (0, import_classnames.default)({
+                  [`${prefix}-cancel`]: true
+                }),
+                onClick: () => cleanSelectedRows(),
+                children: cancelText
+              }
+            ),
+            disPlayBtnRender()
+          ] }),
+          !!alertOptionRender && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: alertOptionRender == null ? void 0 : alertOptionRender({
+            selectedRows: selectedData,
+            setSelectedRows,
+            cleanSelectedRows
+          }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_classnames.default)({
+              [`${prefix}-content`]: true,
+              [`${prefix}-content-active`]: !!isOpen,
+              [`${prefix}-content-hidden`]: !isOpen
+            }),
+            children: typeof content === "function" ? content == null ? void 0 : content({ selectedRows: selectedData, setSelectedRows, cleanSelectedRows }) : content
+          }
+        )
+      ]
+    }
   );
 };
 var BatchOperationBar_default = (0, import_LocaleWrapper.default)({

package/lib/BatchOperationBar/index.less

@@ -18,7 +18,7 @@
     height: 64px;
     margin: 0 24px;
     .@{prefix}-title {
-      font-weight: 500;
+      font-weight: @fontWeightStrong;
     }
     .@{prefix}-cancel,
     .@{prefix}-display-btn {

package/lib/BatchOperationBar/locale/ja-JP.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    cancelText: string;
+    openText: string;
+    hiddenText: string;
+    alertText: string;
+};
+export default _default;