@oceanbase/ui 1.0.0-alpha.1 → 1.0.0-alpha.11

package/es/BasicLayout/style/index.js

@@ -22,11 +22,34 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
   siderWidthList.forEach(function (width) {
     footerBarStyle["".concat(componentCls).concat(componentCls, "-sider-").concat(width)] = _defineProperty({}, "".concat(proComponentsCls, "-footer-bar"), {
       // footer bar width adapt to sider width of BasicLayout
-      width: width === 0 ? '100%' : "calc(100% - ".concat(width, "px - 24px)"),
+      width: width === 0 ? '100%' : "calc(100% - ".concat(width, "px - 32px)"),
       transition: "width ".concat(motionDurationSlow)
     });
   });
-  return _objectSpread(_objectSpread(_defineProperty(_defineProperty({}, "".concat(componentCls, "-banner-wrapper"), {
+  return _objectSpread(_objectSpread(_defineProperty(_defineProperty({
+    '@keyframes activeGradientAnimation': {
+      '0%': {
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '0% 100%'
+      },
+      '100%': {
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 100%'
+      }
+    },
+    '@keyframes selectedGradientAnimation': {
+      '0%': {
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '0% 100%',
+        borderRadius: 0
+      },
+      '100%': {
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 100%',
+        borderRadius: token.borderRadiusLG
+      }
+    }
+  }, "".concat(componentCls, "-banner-wrapper"), {
     position: 'fixed',
     top: 0,
     zIndex: 20,
@@ -94,33 +117,22 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
   }))), "".concat(componentCls, "-sider-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'flex',
     height: 'calc(100vh - 48px)'
-  }, "".concat(antCls, "-menu"), _defineProperty(_defineProperty(_defineProperty({
+  }, "".concat(antCls, "-menu"), _defineProperty(_defineProperty({
     backgroundColor: 'transparent',
     borderRight: 'none'
-  }, "".concat(antCls, "-menu-item"), _defineProperty({
-    width: '100%',
-    marginTop: 0,
-    marginRight: 'auto',
-    marginLeft: 'auto',
-    color: colorText,
-    backgroundColor: 'transparent'
-  }, iconCls, {
-    // 图标尺寸设为 18px，因为设计侧给到的图标内侧有间距，需要适当加大尺寸
-    width: '18px',
-    height: '18px',
-    fontSize: '18px'
-  })), "".concat(antCls, "-menu-submenu"), _defineProperty({
+  }, "".concat(antCls, "-menu-submenu, ").concat(antCls, "-menu-item"), _defineProperty({
     width: '100%',
     marginTop: 0,
     marginRight: 'auto',
     marginLeft: 'auto',
     color: colorText,
     backgroundColor: 'transparent'
-  }, iconCls, {
+  }, "".concat(antCls, "-menu-title-content ").concat(iconCls), {
     // 图标尺寸设为 18px，因为设计侧给到的图标内侧有间距，需要适当加大尺寸
     width: '18px',
     height: '18px',
-    fontSize: '18px'
+    fontSize: '18px',
+    marginBottom: 10
   })), "".concat(antCls, "-menu-submenu > ").concat(antCls, "-menu-submenu-title"), {
     width: '100%',
     marginBottom: '4px !important',
@@ -148,7 +160,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     paddingLeft: '28px !important'
   })), "".concat(antCls, "-menu-item-active, ").concat(antCls, "-menu-submenu-active > ").concat(antCls, "-menu-submenu-title"), {
     color: "".concat(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, ".concat(colorBgLayout, "),linear-gradient(90deg,#C6CDD9,").concat(colorBgLayout, ")"),
@@ -159,7 +171,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     transition: 'border-width .3s'
   }), "".concat(antCls, "-menu-item-selected"), {
     color: "".concat(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,".concat(colorPrimaryBorder, ",").concat(colorBgLayout, ")"),
@@ -287,7 +299,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     }
   }), "".concat(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, ".concat(colorBgLayout, "), linear-gradient(90deg, #C6CDD9, ").concat(colorBgLayout, ")"),
@@ -298,7 +310,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     transition: 'border-width .3s'
   }), "".concat(antCls, "-menu-submenu-active > & ").concat(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, ".concat(colorBgLayout, "), linear-gradient(90deg, #C6CDD9, ").concat(colorBgLayout, ")"),
@@ -309,7 +321,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     transition: 'border-width .3s'
   }), "".concat(antCls, "-menu-item-selected"), {
     color: "".concat(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,".concat(colorPrimaryBorder, ",").concat(colorBgLayout, ")"),

package/es/BatchOperationBar/index.d.ts

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
-import './index.less';
 export interface AlertRenderParams {
     selectedRows: any[];
     setSelectedRows: (selectedRows: any[]) => void;

package/es/BatchOperationBar/index.js

@@ -10,19 +10,24 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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(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; }
+"use client";
 import { DownOutlined, UpOutlined } from '@oceanbase/icons';
-import { Space } from '@oceanbase/design';
+import { ConfigProvider, Space } from '@oceanbase/design';
 import classnames from 'classnames';
 import { cloneDeep, isEmpty, isEqual, pullAllWith } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import LocaleWrapper from "../locale/LocaleWrapper";
-import "./index.less";
+import useStyle from "./style";
 import zhCN from "./locale/zh-CN";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var prefix = 'ob-batch-operation-bar';
 var BatchOperationBar = function BatchOperationBar(props) {
   var _locale$alertText, _locale$alertText$rep;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('batch-operation-bar');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var locale = props === null || props === void 0 ? void 0 : props.locale;
   var title = props.title,
     _props$open = props.open,
@@ -86,12 +91,12 @@ var BatchOperationBar = function BatchOperationBar(props) {
   var disPlayBtnRender = function disPlayBtnRender() {
     if (!showOpenBtn) return null;
     return /*#__PURE__*/_jsxs("div", {
-      className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "-open-btn"), isOpen), "".concat(prefix, "-close-btn"), !isOpen), "".concat(prefix, "-display-btn"), true)),
+      className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-open-btn"), isOpen), "".concat(prefixCls, "-close-btn"), !isOpen), "".concat(prefixCls, "-display-btn"), true)),
       onClick: function onClick() {
         return setIsOpen(!isOpen);
       },
       children: [/*#__PURE__*/_jsx("span", {
-        className: classnames(_defineProperty({}, "".concat(prefix, "-display-text"), true)),
+        className: classnames(_defineProperty({}, "".concat(prefixCls, "-display-text"), true)),
         children: isOpen ? hiddenText : openText
       }), isOpen ? hiddenIcon : openIcon]
     });
@@ -99,21 +104,21 @@ var BatchOperationBar = function BatchOperationBar(props) {
   useEffect(function () {
     if (isEmpty(selectedRows) || !selectedRows) setSelectedData([]);else setSelectedData(selectedRows);
   }, [selectedRows]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classnames(_defineProperty(_defineProperty({}, className, !!className), prefix, true)),
+  return wrapSSR( /*#__PURE__*/_jsxs("div", {
+    className: classnames(_defineProperty(_defineProperty({}, className, !!className), prefixCls, true)),
     style: style,
     children: [/*#__PURE__*/_jsxs("div", {
-      className: "".concat(prefix, "-header"),
+      className: "".concat(prefixCls, "-header"),
       children: [/*#__PURE__*/_jsxs(Space, {
         children: [!!alertRender ? alertRender === null || alertRender === void 0 ? void 0 : alertRender(selectedData) : /*#__PURE__*/_jsxs(Space, {
           children: [title && /*#__PURE__*/_jsx("span", {
-            className: "".concat(prefix, "-title"),
+            className: "".concat(prefixCls, "-title"),
             children: title
           }), /*#__PURE__*/_jsx("span", {
             children: locale === null || locale === void 0 || (_locale$alertText = locale.alertText) === null || _locale$alertText === void 0 || (_locale$alertText$rep = _locale$alertText.replace) === null || _locale$alertText$rep === void 0 ? void 0 : _locale$alertText$rep.call(_locale$alertText, /\$\{\}/, (selectedData === null || selectedData === void 0 ? void 0 : selectedData.length) || 0)
           })]
         }), !!showCancelBtn && /*#__PURE__*/_jsx("span", {
-          className: classnames(_defineProperty({}, "".concat(prefix, "-cancel"), true)),
+          className: classnames(_defineProperty({}, "".concat(prefixCls, "-cancel"), true)),
           onClick: function onClick() {
             return cleanSelectedRows();
           },
@@ -127,14 +132,14 @@ var BatchOperationBar = function BatchOperationBar(props) {
         })
       })]
     }), /*#__PURE__*/_jsx("div", {
-      className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "-content"), true), "".concat(prefix, "-content-active"), !!isOpen), "".concat(prefix, "-content-hidden"), !isOpen)),
+      className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-content"), true), "".concat(prefixCls, "-content-active"), !!isOpen), "".concat(prefixCls, "-content-hidden"), !isOpen)),
       children: typeof content === 'function' ? content === null || content === void 0 ? void 0 : content({
         selectedRows: selectedData,
         setSelectedRows: setSelectedRows,
         cleanSelectedRows: cleanSelectedRows
       }) : content
     })]
-  });
+  }));
 };
 export default LocaleWrapper({
   componentName: 'BatchOperationBar',

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

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

package/es/BatchOperationBar/locale/ja-JP.js

@@ -0,0 +1,6 @@
+export default {
+  cancelText: '選択解除',
+  openText: '選択済みを展開',
+  hiddenText: '選択済みを折りたたむ',
+  alertText: '${} 件を選択しました'
+};

package/es/BatchOperationBar/style/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type BatchOperationBarToken = OBToken;
+export declare const genBatchOperationBarStyle: GenerateStyle<BatchOperationBarToken>;
+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/BatchOperationBar/style/index.js

@@ -0,0 +1,51 @@
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genBatchOperationBarStyle = function genBatchOperationBarStyle(token) {
+  var componentCls = token.componentCls,
+    colorBgBase = token.colorBgBase,
+    boxShadowSecondary = token.boxShadowSecondary,
+    fontWeightStrong = token.fontWeightStrong;
+  return _defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'fixed',
+    zIndex: 99999,
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    color: 'rgba(0, 0, 0, 1)',
+    backgroundColor: colorBgBase,
+    boxShadow: boxShadowSecondary
+  }, "".concat(componentCls, "-header"), _defineProperty(_defineProperty(_defineProperty({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: 64,
+    margin: '0 24px'
+  }, "".concat(componentCls, "-title"), {
+    fontWeight: fontWeightStrong
+  }), "".concat(componentCls, "-cancel, ").concat(componentCls, "-display-btn"), {
+    color: token.colorPrimary,
+    cursor: 'pointer'
+  }), "".concat(componentCls, "-display-text"), {
+    marginRight: 4
+  })), "".concat(componentCls, "-content"), {
+    maxHeight: 328,
+    padding: '0 24px 24px',
+    overflow: 'auto'
+  }), "".concat(componentCls, "-content-active"), {
+    maxHeight: 328,
+    transition: 'max-height 0.25s'
+  }), "".concat(componentCls, "-content-hidden"), {
+    maxHeight: 0,
+    padding: 0,
+    transition: 'max-height 0.25s'
+  }));
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('BatchOperationBar', function (token) {
+    return [genBatchOperationBarStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/Boundary/Components/Code.js

@@ -7,12 +7,14 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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 { Button } from '@oceanbase/design';
-import React, { useMemo } from 'react';
+"use client";
+import { Button, ConfigProvider } from '@oceanbase/design';
+import React, { useContext, useMemo } from 'react';
 import LocaleWrapper from "../../locale/LocaleWrapper";
 import { CODE_PRESET } from "../constant";
 import zhCN from "../locale/zh-CN";
 import classNames from 'classnames';
+import useStyle from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var BoundaryCode = function BoundaryCode(props) {
@@ -25,12 +27,17 @@ var BoundaryCode = function BoundaryCode(props) {
     locale = props.locale,
     className = props.className,
     restProps = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('boundary');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var info = useMemo(function () {
     var data = CODE_PRESET(locale);
     return data[code];
   }, [code, locale]);
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: classNames('boundary-container', 'boundary-code', "ob-boundary-".concat(code), className)
+  return wrapSSR( /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: classNames('boundary-container', 'boundary-code', "".concat(prefixCls, "-").concat(code), className)
   }, restProps), {}, {
     children: /*#__PURE__*/_jsxs("div", {
       className: "empty",
@@ -44,7 +51,7 @@ var BoundaryCode = function BoundaryCode(props) {
         children: buttonText || info.buttonText
       })]
     })
-  }));
+  })));
 };
 export var Code = LocaleWrapper({
   componentName: 'Boundary',

package/es/Boundary/Components/Exception.js

@@ -17,12 +17,14 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { Alert, Button } from '@oceanbase/design';
-import React from 'react';
+"use client";
+import { Alert, Button, ConfigProvider } from '@oceanbase/design';
+import React, { useContext } from 'react';
 import LocaleWrapper from "../../locale/LocaleWrapper";
 import { EXCEPTION_PRESET } from "../constant";
 import zhCN from "../locale/zh-CN";
 import classNames from 'classnames';
+import useStyle from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var BoundaryException = /*#__PURE__*/function (_React$PureComponent) {
@@ -65,78 +67,9 @@ var BoundaryException = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$state2,
-        _this2 = this;
-      var _this$props = this.props,
-        imageUrl = _this$props.imageUrl,
-        title = _this$props.title,
-        buttonText = _this$props.buttonText,
-        subscription = _this$props.subscription,
-        isNotCompatible = _this$props.isNotCompatible,
-        _this$props$showError = _this$props.showError,
-        showError = _this$props$showError === void 0 ? false : _this$props$showError,
-        _this$props$hasButton = _this$props.hasButton,
-        hasButton = _this$props$hasButton === void 0 ? true : _this$props$hasButton,
-        locale = _this$props.locale,
-        className = _this$props.className,
-        restProps = _objectWithoutProperties(_this$props, _excluded);
-      var errorInfo = EXCEPTION_PRESET(locale).ERROR_BOUNDARY;
-      var notCompatibleInfo = EXCEPTION_PRESET(locale).INCOMPATIBLE_VERSION;
-      var _this$state = this.state,
-        error = _this$state.error,
-        info = _this$state.info;
-      var errorDescription = info === null || info === void 0 ? void 0 : info.componentStack;
-      var errorMessage = (error || '').toString();
-      if ((_this$state2 = this.state) !== null && _this$state2 !== void 0 && _this$state2.hasError) {
-        return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-          className: classNames('boundary-container', 'ob-boundary-error', className)
-        }, restProps), {}, {
-          children: /*#__PURE__*/_jsxs("div", {
-            className: "empty",
-            children: [/*#__PURE__*/_jsx("img", {
-              src: imageUrl || errorInfo.imageUrl
-            }), /*#__PURE__*/_jsx("h4", {
-              children: title || errorInfo.title
-            }), showError ? /*#__PURE__*/_jsx(Alert, {
-              type: "error",
-              showIcon: true,
-              message: errorMessage,
-              description: errorDescription,
-              style: {
-                marginTop: 24,
-                overflow: 'auto',
-                maxHeight: '50vh',
-                // 为了避免被 Empty 的水平居中样式影响，需要设置 textAlign
-                textAlign: 'left'
-              }
-            }) : subscription && /*#__PURE__*/_jsx("span", {
-              children: subscription
-            }), hasButton ? /*#__PURE__*/_jsx(Button, {
-              type: "primary",
-              onClick: function onClick() {
-                return _this2.onClick();
-              },
-              children: buttonText || errorInfo.buttonText
-            }) : '']
-          })
-        }));
-      } else if (isNotCompatible) {
-        return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-          className: classNames('boundary-container', 'ob-boundary-browser-not-compatible', className)
-        }, restProps), {}, {
-          children: /*#__PURE__*/_jsxs("div", {
-            className: "empty",
-            children: [/*#__PURE__*/_jsx("img", {
-              src: imageUrl || notCompatibleInfo.imageUrl
-            }), /*#__PURE__*/_jsx("h4", {
-              children: title || notCompatibleInfo.title
-            }), /*#__PURE__*/_jsx("span", {
-              children: subscription ? subscription : notCompatibleInfo.subscription
-            })]
-          })
-        }));
-      }
-      return this.props.children;
+      return /*#__PURE__*/_jsx(ExceptionWrapper, {
+        component: this
+      });
     }
   }], [{
     key: "getDerivedStateFromError",
@@ -148,6 +81,85 @@ var BoundaryException = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return BoundaryException;
 }(React.PureComponent);
+var ExceptionWrapper = function ExceptionWrapper(_ref) {
+  var _component$state2;
+  var component = _ref.component;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('boundary');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
+  var _component$props = component.props,
+    imageUrl = _component$props.imageUrl,
+    title = _component$props.title,
+    buttonText = _component$props.buttonText,
+    subscription = _component$props.subscription,
+    isNotCompatible = _component$props.isNotCompatible,
+    _component$props$show = _component$props.showError,
+    showError = _component$props$show === void 0 ? false : _component$props$show,
+    _component$props$hasB = _component$props.hasButton,
+    hasButton = _component$props$hasB === void 0 ? true : _component$props$hasB,
+    locale = _component$props.locale,
+    className = _component$props.className,
+    restProps = _objectWithoutProperties(_component$props, _excluded);
+  var errorInfo = EXCEPTION_PRESET(locale).ERROR_BOUNDARY;
+  var notCompatibleInfo = EXCEPTION_PRESET(locale).INCOMPATIBLE_VERSION;
+  var _component$state = component.state,
+    error = _component$state.error,
+    info = _component$state.info;
+  var errorDescription = info === null || info === void 0 ? void 0 : info.componentStack;
+  var errorMessage = (error || '').toString();
+  if ((_component$state2 = component.state) !== null && _component$state2 !== void 0 && _component$state2.hasError) {
+    return wrapSSR( /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      className: classNames('boundary-container', "".concat(prefixCls, "-error"), className)
+    }, restProps), {}, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "empty",
+        children: [/*#__PURE__*/_jsx("img", {
+          src: imageUrl || errorInfo.imageUrl
+        }), /*#__PURE__*/_jsx("h4", {
+          children: title || errorInfo.title
+        }), showError ? /*#__PURE__*/_jsx(Alert, {
+          type: "error",
+          showIcon: true,
+          message: errorMessage,
+          description: errorDescription,
+          style: {
+            marginTop: 24,
+            overflow: 'auto',
+            maxHeight: '50vh',
+            // 为了避免被 Empty 的水平居中样式影响，需要设置 textAlign
+            textAlign: 'left'
+          }
+        }) : subscription && /*#__PURE__*/_jsx("span", {
+          children: subscription
+        }), hasButton ? /*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          onClick: function onClick() {
+            return component.onClick();
+          },
+          children: buttonText || errorInfo.buttonText
+        }) : '']
+      })
+    })));
+  } else if (isNotCompatible) {
+    return wrapSSR( /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      className: classNames('boundary-container', "".concat(prefixCls, "-browser-not-compatible"), className)
+    }, restProps), {}, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "empty",
+        children: [/*#__PURE__*/_jsx("img", {
+          src: imageUrl || notCompatibleInfo.imageUrl
+        }), /*#__PURE__*/_jsx("h4", {
+          children: title || notCompatibleInfo.title
+        }), /*#__PURE__*/_jsx("span", {
+          children: subscription ? subscription : notCompatibleInfo.subscription
+        })]
+      })
+    })));
+  }
+  return component.props.children;
+};
 export var Exception = LocaleWrapper({
   componentName: 'Boundary',
   defaultLocale: zhCN

package/es/Boundary/Components/Function.js

@@ -7,9 +7,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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 { Button } from '@oceanbase/design';
-import React, { useMemo } from 'react';
+"use client";
+import { Button, ConfigProvider } from '@oceanbase/design';
+import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
+import useStyle from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var BoundaryFunction = function BoundaryFunction(props) {
@@ -19,11 +21,16 @@ export var BoundaryFunction = function BoundaryFunction(props) {
     onClick = props.onClick,
     className = props.className,
     restProps = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('boundary');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var info = useMemo(function () {
     return state ? config[state] : config[Object.keys(config)[0]];
   }, [config, state]);
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: classNames('boundary-container', 'ob-boundary-function', className)
+  return wrapSSR( /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: classNames('boundary-container', "".concat(prefixCls, "-function"), className)
   }, restProps), {}, {
     children: /*#__PURE__*/_jsxs("div", {
       className: "empty",
@@ -37,5 +44,5 @@ export var BoundaryFunction = function BoundaryFunction(props) {
         children: info.buttonText
       })]
     })
-  }));
+  })));
 };

package/es/Boundary/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import './index.less';
 declare const _default: {
     Code: any;
     Function: import("react").FC<import("./Components/Function").IBoundaryFunction>;

package/es/Boundary/index.js

@@ -1,5 +1,5 @@
+"use client";
 import { BoundaryFunction, Code, Exception } from "./Components";
-import "./index.less";
 export default {
   Code: Code,
   Function: BoundaryFunction,

package/es/Boundary/locale/en-US.js

@@ -4,7 +4,7 @@ export default {
   noPage: 'This page was not found',
   normal: 'normal operation',
   test: 'Click to test crash effect',
-  collapse: 'The page crashed ~',
+  collapse: 'The page crashed',
   incompatible: 'Incompatible browser version',
   proposal: 'The browser version is too low. In order to avoid possible security risks, it is recommended to use Chrome browser version 80 or above'
 };

package/es/Boundary/locale/ja-JP.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    goHome: string;
+    noPermission: string;
+    noPage: string;
+    normal: string;
+    test: string;
+    collapse: string;
+    incompatible: string;
+    proposal: string;
+};
+export default _default;

package/es/Boundary/locale/ja-JP.js

@@ -0,0 +1,10 @@
+export default {
+  goHome: 'ホームに戻る',
+  noPermission: 'このページへのアクセス権限がありません',
+  noPage: 'このページが見つかりません',
+  normal: '正常動作',
+  test: 'クリックしてクラッシュをテスト',
+  collapse: 'ページがクラッシュしました',
+  incompatible: 'ブラウザがサポートされていません',
+  proposal: 'ブラウザのバージョンが古すぎます。セキュリティリスクを避けるため、Chrome 80以上のご利用をおすすめします'
+};

package/es/Boundary/locale/zh-CN.js

@@ -4,7 +4,7 @@ export default {
   noPage: '此页面未找到',
   normal: '正常运行',
   test: '点击测试崩溃效果',
-  collapse: '页面崩溃了～',
+  collapse: '页面崩溃了',
   incompatible: '浏览器版本不兼容',
   proposal: '浏览器版本过低，为避免可能存在的安全隐患，建议使用Chrome浏览器的80及以上版本'
 };

package/es/Boundary/locale/zh-TW.js

@@ -4,7 +4,7 @@ export default {
   noPage: '此頁面未找到',
   normal: '正常運行',
   test: '點擊測試崩潰效果',
-  collapse: '頁面崩潰了～',
+  collapse: '頁面崩潰了',
   incompatible: '流覽器版本不相容',
   proposal: '流覽器版本過低，為避免可能存在的安全隱患，建議使用Chrome瀏覽器的80及以上版本'
 };