@oceanbase/ui 1.0.0-alpha.0 → 1.0.0-alpha.10

package/es/BatchOperationBar/index.js

@@ -11,18 +11,22 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; }
 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 +90,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 +103,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 +131,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,13 @@ 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';
+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 +26,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 +50,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,13 @@ 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';
+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 +66,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 +80,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,10 @@ 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';
+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 +20,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 +43,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,4 @@
 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及以上版本'
 };

package/es/Boundary/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 BoundaryToken = OBToken;
+export declare const genBoundaryStyle: GenerateStyle<BoundaryToken>;
+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/Boundary/style/index.js

@@ -0,0 +1,46 @@
+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 genBoundaryStyle = function genBoundaryStyle(token) {
+  var colorTextTertiary = token.colorTextTertiary;
+  return _defineProperty(_defineProperty({}, ".boundary-container", {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    '.empty': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingBottom: 60,
+      '> img': {
+        height: 102,
+        marginBottom: 24
+      },
+      '> h4': {
+        margin: 0,
+        fontSize: 18
+      },
+      '> span': {
+        marginTop: 8,
+        color: colorTextTertiary,
+        fontSize: 14,
+        textAlign: 'center'
+      },
+      '> button': {
+        marginTop: 24
+      }
+    }
+  }), ".boundary-code", {
+    minHeight: 'calc(100vh - 120px)'
+  });
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('Boundary', function (token) {
+    return [genBoundaryStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/ContentWithIcon/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 export interface ContentWithIconProps {
     content?: React.ReactNode;
     tooltip?: any;