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

package/es/PageContainer/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "className", "title", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "footerToolBarProps", "locale", "loading"];
+var _excluded = ["prefixCls", "className", "title", "subTitle", "onBack", "backIcon", "breadcrumb", "extra", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "footerToolBarProps", "locale", "loading"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -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 { SyncOutlined } from '@oceanbase/icons';
+import { useUniqueInlineId } from '@inline-svg-unique-id/react';
+import { ArrowLeftOutlined, SyncOutlined } from '@oceanbase/icons';
 import { PageContainer as AntPageContainer } from '@ant-design/pro-components';
 import classNames from 'classnames';
 import { isObject } from 'lodash';
 import React, { useContext } from 'react';
-import { ConfigProvider, Space, Tooltip } from '@oceanbase/design';
+import { Button, ConfigProvider, Divider, Space, Tooltip, theme } from '@oceanbase/design';
 import LocaleWrapper from "../locale/LocaleWrapper";
 import ItemRender from "./ItemRender";
 import PageLoading from "../PageLoading";
@@ -20,41 +21,116 @@ import zhCN from "./locale/zh-CN";
 import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var PageContainer = function PageContainer(_ref) {
-  var customizePrefixCls = _ref.prefixCls,
-    className = _ref.className,
-    title = _ref.title,
-    header = _ref.header,
-    content = _ref.content,
-    extraContent = _ref.extraContent,
-    tabList = _ref.tabList,
-    tabBarExtraContent = _ref.tabBarExtraContent,
-    footerToolBarProps = _ref.footerToolBarProps,
-    locale = _ref.locale,
-    loading = _ref.loading,
-    restProps = _objectWithoutProperties(_ref, _excluded);
+var DocumentIcon = function DocumentIcon(_ref) {
+  var className = _ref.className;
+  var _id = useUniqueInlineId();
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className,
+    children: [/*#__PURE__*/_jsx("g", {
+      clipPath: "url(#".concat(_id, ")"),
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M7.99992 4.66667C7.99992 3.95942 7.71897 3.28115 7.21887 2.78105C6.71877 2.28095 6.0405 2 5.33325 2H1.33325V12H5.99992C6.53035 12 7.03906 12.2107 7.41413 12.5858C7.78921 12.9609 7.99992 13.4696 7.99992 14M7.99992 4.66667V14M7.99992 4.66667C7.99992 3.95942 8.28087 3.28115 8.78097 2.78105C9.28106 2.28095 9.95934 2 10.6666 2H14.6666V12H9.99992C9.46949 12 8.96078 12.2107 8.5857 12.5858C8.21063 12.9609 7.99992 13.4696 7.99992 14",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })
+    }), /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("clipPath", {
+        id: _id,
+        children: /*#__PURE__*/_jsx("rect", {
+          width: "16",
+          height: "16",
+          fill: "white"
+        })
+      })
+    })]
+  });
+};
+var PageContainer = function PageContainer(_ref2) {
+  var customizePrefixCls = _ref2.prefixCls,
+    className = _ref2.className,
+    titleProp = _ref2.title,
+    subTitleProp = _ref2.subTitle,
+    onBackProp = _ref2.onBack,
+    backIconProp = _ref2.backIcon,
+    breadcrumbProp = _ref2.breadcrumb,
+    extraProp = _ref2.extra,
+    header = _ref2.header,
+    content = _ref2.content,
+    extraContent = _ref2.extraContent,
+    tabList = _ref2.tabList,
+    tabBarExtraContent = _ref2.tabBarExtraContent,
+    footerToolBarProps = _ref2.footerToolBarProps,
+    locale = _ref2.locale,
+    loading = _ref2.loading,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
   var _useContext = useContext(ConfigProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls;
   var rootPrefixCls = getPrefixCls();
   var prefixCls = getPrefixCls('pro-page-container', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
     wrapSSR = _useStyle.wrapSSR;
-  var _ref2 = header || {},
-    reload = _ref2.reload,
-    subTitle = _ref2.subTitle,
-    breadcrumb = _ref2.breadcrumb;
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
+  var _ref3 = header || {},
+    reload = _ref3.reload,
+    _ref3$title = _ref3.title,
+    title = _ref3$title === void 0 ? titleProp : _ref3$title,
+    _ref3$subTitle = _ref3.subTitle,
+    subTitle = _ref3$subTitle === void 0 ? subTitleProp : _ref3$subTitle,
+    _ref3$onBack = _ref3.onBack,
+    onBack = _ref3$onBack === void 0 ? onBackProp : _ref3$onBack,
+    _ref3$backIcon = _ref3.backIcon,
+    backIcon = _ref3$backIcon === void 0 ? backIconProp || /*#__PURE__*/_jsx(Button, {
+      style: {
+        fontSize: token.fontSizeLG
+      },
+      icon: /*#__PURE__*/_jsx(ArrowLeftOutlined, {})
+    }) : _ref3$backIcon,
+    document = _ref3.document,
+    _ref3$breadcrumb = _ref3.breadcrumb,
+    breadcrumb = _ref3$breadcrumb === void 0 ? breadcrumbProp : _ref3$breadcrumb,
+    _ref3$extra = _ref3.extra,
+    extra = _ref3$extra === void 0 ? extraProp : _ref3$extra;
   var reloadProps = isObject(reload) && ! /*#__PURE__*/React.isValidElement(reload) ? reload : {};
   var reloadCls = classNames("".concat(rootPrefixCls, "-page-header-heading-reload"), reloadProps.className);
-  var newSubTitle = (reload || subTitle) && /*#__PURE__*/_jsxs(Space, {
+  var documentLink = typeof document === 'string' ? document : undefined;
+  var documentClick = typeof document === 'function' ? document : undefined;
+  var newSubTitle = (reload || subTitle || document) && /*#__PURE__*/_jsxs(Space, {
     children: [reload && /*#__PURE__*/_jsx(Tooltip, {
       title: locale.reload,
       children: isObject(reload) && /*#__PURE__*/React.isValidElement(reload) ? reload : /*#__PURE__*/_jsx(SyncOutlined, _objectSpread(_objectSpread({}, reloadProps), {}, {
         className: reloadCls
       }))
-    }), subTitle]
+    }), subTitle, document && /*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx(Divider, {
+        type: "vertical",
+        className: "".concat(rootPrefixCls, "-page-header-heading-document-divider")
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: locale.viewDocument,
+        children: /*#__PURE__*/_jsx("a", {
+          href: documentLink,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          onClick: documentClick,
+          className: "".concat(rootPrefixCls, "-page-header-heading-document-icon"),
+          children: documentLink || documentClick ? /*#__PURE__*/_jsx(DocumentIcon, {
+            className: "".concat(rootPrefixCls, "-page-header-heading-document-default-icon")
+          }) : document
+        })
+      })]
+    })]
   });
-  var newHeader = header && _objectSpread(_objectSpread({}, header), {}, {
+  var newHeader = (header || title || newSubTitle || onBack || breadcrumb || extra) && _objectSpread(_objectSpread({}, header), {}, {
+    title: title,
     subTitle: newSubTitle,
+    onBack: onBack,
+    backIcon: backIcon,
     breadcrumb: breadcrumb && _objectSpread({
       itemRender: function itemRender(route, params, routes, paths) {
         return /*#__PURE__*/_jsx(ItemRender, {
@@ -64,9 +140,10 @@ var PageContainer = function PageContainer(_ref) {
           paths: paths
         });
       }
-    }, breadcrumb)
+    }, breadcrumb),
+    extra: extra
   });
-  var noHasHeader = !title && ['title', 'subTitle', 'extra', 'tags', 'avatar', 'backIcon', 'breadcrumb'].every(function (item) {
+  var noHasHeader = ['title', 'subTitle', 'onBack', 'breadcrumb', 'extra', 'tags', 'avatar'].every(function (item) {
     return !(newHeader !== null && newHeader !== void 0 && newHeader[item]);
   }) && !content && !extraContent && !tabList && !tabBarExtraContent;
   var pageContainerCls = classNames(_defineProperty({}, "".concat(prefixCls, "-no-page-header"), noHasHeader), className);

package/es/PageContainer/locale/en-US.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
     reload: string;
+    viewDocument: string;
 };
 export default _default;

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

@@ -1,3 +1,4 @@
 export default {
-  reload: 'Reload'
+  reload: 'Reload',
+  viewDocument: 'View Document'
 };

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    reload: string;
+    viewDocument: string;
+};
+export default _default;

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

@@ -0,0 +1,4 @@
+export default {
+  reload: '再読み込み',
+  viewDocument: 'ドキュメントを見る'
+};

package/es/PageContainer/locale/zh-CN.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
     reload: string;
+    viewDocument: string;
 };
 export default _default;

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

@@ -1,3 +1,4 @@
 export default {
-  reload: '刷新'
+  reload: '刷新',
+  viewDocument: '查看文档'
 };

package/es/PageContainer/locale/zh-TW.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
     reload: string;
+    viewDocument: string;
 };
 export default _default;

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

@@ -1,3 +1,4 @@
 export default {
-  reload: '重新加載'
+  reload: '重新加載',
+  viewDocument: '查看文檔'
 };

package/es/PageContainer/style/index.js

@@ -7,52 +7,77 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 import { genFooterToolbarStyle } from "../../FooterToolbar/style";
 export var genPageContainerStyle = function genPageContainerStyle(token) {
+  var _$concat$concat;
   var antCls = token.antCls,
     proComponentsCls = token.proComponentsCls,
     componentCls = token.componentCls,
     colorBgLayout = token.colorBgLayout,
-    fontSizeHeading3 = token.fontSizeHeading3,
-    controlHeightLG = token.controlHeightLG,
+    fontSizeHeading2 = token.fontSizeHeading2,
     padding = token.padding,
     paddingLG = token.paddingLG;
-  var height = controlHeightLG;
-  var lineHeight = "".concat(controlHeightLG, "px");
   return _objectSpread(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({
     minHeight: '100vh',
     backgroundColor: colorBgLayout
   }, "".concat(proComponentsCls, "-grid-content"), {
     minHeight: 'auto'
-  }), "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  }), "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), (_$concat$concat = {
     // 减小内容区左右两侧间距
-    paddingInlineStart: "".concat(paddingLG, "px !important"),
-    paddingInlineEnd: "".concat(paddingLG, "px !important"),
-    paddingBlockStart: "".concat(padding, "px !important"),
+    paddingInlineStart: "".concat(token.paddingXL, "px !important"),
+    paddingInlineEnd: "".concat(token.paddingXL, "px !important"),
+    paddingBlockStart: "".concat(paddingLG, "px !important"),
     paddingBlockEnd: "".concat(padding, "px !important")
-  }, "".concat(antCls, "-page-header-breadcrumb"), {
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat$concat, "".concat(antCls, "-page-header-breadcrumb"), {
     // overwritten pro-components style
     paddingBlockStart: 0
   }), "".concat(antCls, "-page-header-heading"), {
     paddingBlockStart: 0
   }), "".concat(antCls, "-page-header-heading-title"), {
-    fontSize: fontSizeHeading3,
+    fontSize: fontSizeHeading2,
+    fontWeight: token.fontWeightStrong,
     marginInlineEnd: token.marginXS
+  }), "".concat(antCls, "-page-header-heading-sub-title"), {
+    fontSize: token.fontSize
   }), "".concat(antCls, "-page-header-heading-reload"), {
     cursor: 'pointer',
     fontSize: token.fontSizeLG,
     marginTop: token.marginXXS
+  }), "".concat(antCls, "-page-header-heading-document-divider"), {
+    marginInline: 0,
+    height: token.size
+  }), "".concat(antCls, "-page-header-heading-document-icon"), {
+    display: 'inline-block',
+    color: token.colorIcon,
+    fontSize: token.fontSizeLG,
+    cursor: 'pointer',
+    '&:hover': {
+      color: token.colorLinkHover
+    },
+    '&:active': {
+      color: token.colorLinkActive
+    }
+  }), "".concat(antCls, "-page-header-heading-document-default-icon"), {
+    marginBottom: -3
+  }), "".concat(antCls, "-page-header-heading-left"), {
+    marginBlock: 0
   }), "".concat(antCls, "-page-header-heading-extra"), {
-    height: height,
-    lineHeight: lineHeight,
     marginBlock: 0
-  }), "".concat(antCls, "-page-header-footer"), {
+  }), _defineProperty(_$concat$concat, "".concat(antCls, "-page-header-footer"), _defineProperty({
     marginBlockStart: 0
-  })), "".concat(componentCls, "-children-container"), _defineProperty({
-    paddingInline: paddingLG,
+  }, "".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
+    borderBottom: "1px solid ".concat(token.colorBorderSecondary),
+    left: -token.paddingXL,
+    right: -token.paddingXL
+  })))), "".concat(componentCls, "-children-container"), _defineProperty(_defineProperty({
+    paddingInline: token.paddingXL,
     paddingBlockStart: 0,
-    paddingBlockEnd: paddingLG
+    paddingBlockEnd: padding
   }, "& > ".concat(antCls, "-tabs-top:not(").concat(antCls, "-tabs-card):first-child"), {
     // equal to page header paddingBlockEnd
     marginTop: -padding
+  }), "& > ".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
+    borderBottom: "1px solid ".concat(token.colorBorderSecondary),
+    left: -token.paddingXL,
+    right: -token.paddingXL
   }))), "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
     paddingBlockStart: paddingLG
   })), "".concat(componentCls, "-with-footer "), {

package/es/Password/index.js

@@ -110,7 +110,7 @@ var Password = function Password(_ref) {
         // @ts-ignore
         ,
         popupAlign: {
-          offset: [48, 0]
+          offset: [16, 0]
         },
         content: /*#__PURE__*/_jsx(Content, {
           isTouched: isTouched,

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

@@ -0,0 +1,13 @@
+declare const _default: {
+    lengthRuleMessage: string;
+    charRuleMessage: string;
+    strengthRuleMessage: string;
+    placeholder: string;
+    generatePlaceholder: string;
+    randomlyGenerate: string;
+    pleaseRememberYourPassword: string;
+    copySuccessfully: string;
+    copyPassword: string;
+    andKeepItProperly: string;
+};
+export default _default;

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

@@ -0,0 +1,12 @@
+export default {
+  lengthRuleMessage: '長さは 8~32 文字',
+  charRuleMessage: '英字、数字、および特殊文字（~!@#%^&*_-+= (){}[]:;,.?/`$"<>\）のみ使用可能',
+  strengthRuleMessage: '大文字・小文字・数字・特殊文字をそれぞれ2文字以上含める必要があります',
+  placeholder: 'パスワードを入力してください',
+  generatePlaceholder: '入力またはランダム生成',
+  randomlyGenerate: 'ランダム生成',
+  pleaseRememberYourPassword: 'パスワードを必ず保存してください',
+  copySuccessfully: 'コピー成功',
+  copyPassword: 'パスワードをコピーし',
+  andKeepItProperly: '適切に保管してください'
+};

package/es/ProCard/index.d.ts

@@ -1,5 +1,6 @@
 import { ProCard as AntProCard } from '@ant-design/pro-components';
 import type { ProCardProps } from '@ant-design/pro-components';
 export { ProCardProps };
-declare const ProCard: typeof AntProCard;
+export type ProCardType = typeof AntProCard;
+declare const ProCard: ProCardType;
 export default ProCard;

package/es/ProCard/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["ghost", "title", "tabs", "headerBordered", "bodyStyle", "prefixCls", "className"];
+var _excluded = ["loading", "bordered", "ghost", "title", "tabs", "headerBordered", "bodyStyle", "prefixCls", "className", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _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); }
@@ -9,26 +9,29 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 React, { useContext } from 'react';
 import { ProCard as AntProCard } from '@ant-design/pro-components';
-import { ConfigProvider } from '@oceanbase/design';
+import { ConfigProvider, Skeleton, theme } from '@oceanbase/design';
 import { isHorizontalPaddingZero } from '@oceanbase/design/es/_util';
-import { theme } from '@oceanbase/design';
+import { CaretRightFilled } from '@oceanbase/icons';
 import classNames from 'classnames';
 import useStyle from "./style";
-import { CaretRightFilled } from '@oceanbase/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore
 var ProCard = function ProCard(_ref) {
-  var ghost = _ref.ghost,
+  var loading = _ref.loading,
+    bordered = _ref.bordered,
+    ghost = _ref.ghost,
     title = _ref.title,
     tabs = _ref.tabs,
     headerBordered = _ref.headerBordered,
     bodyStyle = _ref.bodyStyle,
     customizePrefixCls = _ref.prefixCls,
     className = _ref.className,
+    style = _ref.style,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(ConfigProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
-    iconPrefixCls = _useContext.iconPrefixCls;
+    iconPrefixCls = _useContext.iconPrefixCls,
+    contextCard = _useContext.card;
   var prefixCls = getPrefixCls('pro-card', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
     wrapSSR = _useStyle.wrapSSR;
@@ -37,17 +40,26 @@ var ProCard = function ProCard(_ref) {
 
   // ProCard body no horizontal padding
   var noBodyHorizontalPadding = isHorizontalPaddingZero(bodyStyle === null || bodyStyle === void 0 ? void 0 : bodyStyle.padding) || ghost;
-  var proCardCls = classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-has-title"), !!title), "".concat(prefixCls, "-no-body-horizontal-padding"), noBodyHorizontalPadding), "".concat(prefixCls, "-no-divider"), !headerBordered), "".concat(prefixCls, "-contain-tabs"), !!tabs), className);
+  var proCardCls = classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-has-title"), !!title), "".concat(prefixCls, "-no-body-horizontal-padding"), noBodyHorizontalPadding), "".concat(prefixCls, "-no-divider"), !headerBordered), "".concat(prefixCls, "-contain-tabs"), !!tabs), contextCard === null || contextCard === void 0 ? void 0 : contextCard.className, className);
   return wrapSSR( /*#__PURE__*/_jsx(AntProCard, _objectSpread({
+    loading: loading === true ? /*#__PURE__*/_jsx(Skeleton, {
+      active: true,
+      title: false,
+      paragraph: {
+        rows: 4
+      }
+    }) : loading,
     prefixCls: customizePrefixCls,
+    bordered: bordered !== null && bordered !== void 0 ? bordered : contextCard !== null && contextCard !== void 0 && contextCard.variant ? (contextCard === null || contextCard === void 0 ? void 0 : contextCard.variant) === 'outlined' : undefined,
     ghost: ghost,
     title: title,
     tabs: _typeof(tabs) === 'object' ? _objectSpread({
       size: 'large'
     }, tabs) : tabs,
-    headerBordered: headerBordered,
+    headerBordered: headerBordered !== null && headerBordered !== void 0 ? headerBordered : contextCard === null || contextCard === void 0 ? void 0 : contextCard.divided,
     bodyStyle: bodyStyle,
     className: proCardCls,
+    style: _objectSpread(_objectSpread({}, contextCard === null || contextCard === void 0 ? void 0 : contextCard.style), style),
     collapsibleIconRender: function collapsibleIconRender(_ref2) {
       var collapsed = _ref2.collapsed;
       return /*#__PURE__*/_jsx(CaretRightFilled, {

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { CSSObject } from '@ant-design/cssinjs';
 import type { OBToken } from '../../_util/genComponentStyleHook';
-export declare const genProCardStyle: GenerateStyle<OBToken>;
+export declare const genProCardStyle: (token: OBToken, outerComponentCls?: string) => CSSObject;
 declare const _default: (prefixCls: string) => {
     wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
     hashId: string;

package/es/ProCard/style/index.js

@@ -6,15 +6,23 @@ 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); }
 import { Card, Tabs } from '@oceanbase/design';
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
-export var genProCardStyle = function genProCardStyle(token) {
-  var componentCls = token.componentCls,
+export var genProCardStyle = function genProCardStyle(token, outerComponentCls) {
+  var _token$Table, _ref;
+  var innerComponentCls = token.componentCls,
     antCls = token.antCls,
     prefixCls = token.prefixCls;
+  var componentCls = outerComponentCls || innerComponentCls;
   var tableComponentCls = "".concat(antCls, "-table");
   var tabsComponentCls = "".concat(antCls, "-tabs");
   var tabsPrefixCls = "".concat(prefixCls, "-tabs");
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "div".concat(componentCls), {
+  return _ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "div".concat(componentCls), {
     borderRadius: token.borderRadiusLG
+  }), "".concat(componentCls).concat(componentCls, "-no-divider"), _defineProperty({}, "".concat(componentCls, "-header"), {
+    paddingBlockStart: token.paddingLG
+  })), "".concat(componentCls).concat(componentCls, "-size-small").concat(componentCls, "-no-divider"), _defineProperty({}, "".concat(componentCls, "-header"), {
+    paddingBlockStart: token.paddingSM
+  })), "".concat(componentCls).concat(componentCls, "-border"), {
+    border: "".concat(token.lineWidth, "px solid ").concat(token.colorBorderSecondary)
   }), "".concat(componentCls, ":not(").concat(componentCls, "-border):not(").concat(componentCls, "-ghost)"), {
     boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)'
   }), "".concat(componentCls, ":not(").concat(componentCls, "-size-small):not(").concat(componentCls, "-ghost)"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-body"), {
@@ -27,12 +35,12 @@ export var genProCardStyle = function genProCardStyle(token) {
     paddingBlock: 0,
     paddingInline: 0
   })), "&".concat(componentCls, "-has-title").concat(componentCls, "-no-divider:not(").concat(componentCls, "-contain-tabs)"), _defineProperty({}, "".concat(componentCls, "-body"), _defineProperty({}, "& > ".concat(tableComponentCls, "-wrapper ").concat(tableComponentCls, ":not(").concat(tableComponentCls, "-bordered):first-child"), {
-    marginTop: -token.marginSM
+    marginTop: -((_token$Table = token.Table) === null || _token$Table === void 0 ? void 0 : _token$Table.cellPaddingBlock)
   }))), "".concat(componentCls).concat(componentCls, "-no-body-horizontal-padding:not(").concat(componentCls, "-contain-tabs)"), _objectSpread(_defineProperty({}, "".concat(componentCls, "-header"), {
     paddingBlockEnd: token.padding
   }), Card.genTableStyle(token.paddingLG, token))), "".concat(componentCls).concat(componentCls, "-no-body-horizontal-padding").concat(componentCls, "-size-small:not(").concat(componentCls, "-contain-tabs)"), _objectSpread(_defineProperty({}, "".concat(componentCls, "-header"), {
     paddingBlockEnd: token.paddingXS
-  }), Card.genTableStyle(token.paddingSM, token))), "".concat(componentCls), _defineProperty({}, "".concat(componentCls, "-tabs"), _objectSpread(_defineProperty({}, "".concat(tabsComponentCls, "-top, ").concat(tabsComponentCls, "-bottom"), _defineProperty({}, ">".concat(tabsComponentCls, "-nav ").concat(tabsComponentCls, "-nav-list"), {
+  }), Card.genTableStyle(token.paddingSM, token))), _defineProperty(_ref, "".concat(componentCls), _defineProperty({}, "".concat(componentCls, "-tabs"), _objectSpread(_defineProperty({}, "".concat(tabsComponentCls, "-top, ").concat(tabsComponentCls, "-bottom"), _defineProperty({}, ">".concat(tabsComponentCls, "-nav ").concat(tabsComponentCls, "-nav-list"), {
     marginBlockStart: 0,
     paddingInlineStart: token.marginLG
   })), Tabs.genTabsStyle(_objectSpread(_objectSpread({}, token), {}, {

package/es/ProTable/index.d.ts

@@ -3,7 +3,7 @@ import type { ProTableProps as AntProTableProps } from '@ant-design/pro-componen
 export interface ProTableProps<T, U, ValueType> extends AntProTableProps<T, U, ValueType> {
     innerBordered?: boolean;
 }
-declare function ProTable<T, U, ValueType>({ form, headerTitle, options, optionsRender, toolbar, toolBarRender, size, bordered, innerBordered, expandable, rowSelection, pagination: customPagination, footer, locale, cardProps: outerCardProps, prefixCls: customizePrefixCls, tableClassName, className, ...restProps }: ProTableProps<T, U, ValueType>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function ProTable<T, U, ValueType>({ form, headerTitle, options, optionsRender, toolbar, toolBarRender, size, bordered, innerBordered, cardBordered, expandable, rowSelection, pagination: customPagination, footer, locale, cardProps: outerCardProps, prefixCls: customizePrefixCls, tableClassName, className, ...restProps }: ProTableProps<T, U, ValueType>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 declare namespace ProTable {
     var Summary;
 }

package/es/ProTable/index.js

@@ -1,18 +1,24 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["form", "headerTitle", "options", "optionsRender", "toolbar", "toolBarRender", "size", "bordered", "innerBordered", "expandable", "rowSelection", "pagination", "footer", "locale", "cardProps", "prefixCls", "tableClassName", "className"],
+var _excluded = ["form", "headerTitle", "options", "optionsRender", "toolbar", "toolBarRender", "size", "bordered", "innerBordered", "cardBordered", "expandable", "rowSelection", "pagination", "footer", "locale", "cardProps", "prefixCls", "tableClassName", "className"],
   _excluded2 = ["emptyText"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useContext } from 'react';
 import { ProTable as AntProTable } from '@ant-design/pro-components';
-import { ConfigProvider, Empty, Table } from '@oceanbase/design';
+import { ConfigProvider, Empty, Table, theme } from '@oceanbase/design';
 import classNames from 'classnames';
-import { isEmpty } from 'lodash';
+import { isEmpty, merge } from 'lodash';
 import useLightFilterStyle from "../LightFilter/style";
 import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -28,6 +34,7 @@ function ProTable(_ref) {
     size = _ref.size,
     bordered = _ref.bordered,
     innerBordered = _ref.innerBordered,
+    cardBordered = _ref.cardBordered,
     expandable = _ref.expandable,
     rowSelection = _ref.rowSelection,
     customPagination = _ref.pagination,
@@ -39,12 +46,16 @@ function ProTable(_ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
+    getPrefixCls = _useContext.getPrefixCls,
+    contextCard = _useContext.card;
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token;
 
   // customize Table style
   var tablePrefixCls = getPrefixCls('table', customizePrefixCls);
   var _Table$useStyle = Table.useStyle(tablePrefixCls),
-    tableWrapSSR = _Table$useStyle.wrapSSR;
+    _Table$useStyle2 = _slicedToArray(_Table$useStyle, 1),
+    tableWrapCSSVar = _Table$useStyle2[0];
   var pagination = Table.useDefaultPagination(customPagination);
   var tableCls = classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(tablePrefixCls, "-expandable"), !isEmpty(expandable)), "".concat(tablePrefixCls, "-selectable"), !!rowSelection), "".concat(tablePrefixCls, "-has-footer"), !!footer), "".concat(tablePrefixCls, "-inner-bordered"), innerBordered), tableClassName);
 
@@ -62,14 +73,15 @@ function ProTable(_ref) {
       image: Empty.PRESENTED_IMAGE_SIMPLE
     }) : _ref2$emptyText,
     restLocale = _objectWithoutProperties(_ref2, _excluded2);
-  var cardProps = typeof outerCardProps === 'boolean' ? {} : outerCardProps;
+  var cardProps = merge({}, contextCard, typeof outerCardProps === 'boolean' ? {} : outerCardProps);
   var proCardCls = getPrefixCls('pro-card', customizePrefixCls);
-  return tableWrapSSR(lightFilterWrapSSR(wrapSSR( /*#__PURE__*/_jsx(AntProTable
+  return tableWrapCSSVar(lightFilterWrapSSR(wrapSSR( /*#__PURE__*/_jsx(AntProTable
   // default size change to `large` as same as Table
   , _objectSpread({
     defaultSize: "large",
     size: size,
     bordered: bordered || innerBordered,
+    cardBordered: cardBordered !== null && cardBordered !== void 0 ? cardBordered : contextCard !== null && contextCard !== void 0 && contextCard.variant ? (contextCard === null || contextCard === void 0 ? void 0 : contextCard.variant) === 'outlined' : undefined,
     form: _objectSpread({
       // query form should remove required mark
       requiredMark: false
@@ -80,7 +92,10 @@ function ProTable(_ref) {
     toolbar: toolbar,
     toolBarRender: toolBarRender,
     cardProps: _objectSpread(_objectSpread({}, cardProps), {}, {
-      className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(proCardCls, "-has-title"), !!headerTitle || options || options === undefined || optionsRender || toolbar || toolBarRender), "".concat(proCardCls, "-no-divider"), !(cardProps !== null && cardProps !== void 0 && cardProps.headerBordered)), "".concat(proCardCls, "-no-padding"), true), "".concat(proCardCls, "-contain-tabs"), !!(cardProps !== null && cardProps !== void 0 && cardProps.tabs)), cardProps === null || cardProps === void 0 ? void 0 : cardProps.className)
+      className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(proCardCls, "-has-title"), !!headerTitle || options || options === undefined || optionsRender || toolbar || toolBarRender), "".concat(proCardCls, "-no-divider"), !(cardProps !== null && cardProps !== void 0 && cardProps.headerBordered) && !(cardProps !== null && cardProps !== void 0 && cardProps.divided)), "".concat(proCardCls, "-no-padding"), true), "".concat(proCardCls, "-contain-tabs"), !!(cardProps !== null && cardProps !== void 0 && cardProps.tabs)), cardProps === null || cardProps === void 0 ? void 0 : cardProps.className),
+      bodyStyle: _objectSpread({
+        paddingBlock: 0
+      }, cardProps === null || cardProps === void 0 ? void 0 : cardProps.bodyStyle)
     }),
     expandable: expandable ? _objectSpread({
       columnWidth: !size || size === 'large' ? 40 : 32

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { CSSObject } from '@ant-design/cssinjs';
 import type { OBToken } from '../../_util/genComponentStyleHook';
-export declare const genProTableStyle: GenerateStyle<OBToken>;
+export declare const genProTableStyle: (token: OBToken) => CSSObject;
 declare const _default: (prefixCls: string) => {
     wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
     hashId: string;