@oceanbase/ui 1.0.0-alpha.13 → 1.0.0-alpha.14

package/es/Action/Group.js

@@ -31,23 +31,29 @@ var getOrder = function getOrder(_ref) {
   return order;
 };
 
+/**
+ * 判断是否是 Action 组件（Action.Button 或 Action.Link）
+ */
+var isActionComponent = function isActionComponent(element) {
+  var _element$type, _element$type2;
+  // @ts-ignore
+  return ((_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.__DISPLAY_NAME) === 'button' || ((_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.__DISPLAY_NAME) === 'link';
+};
+
 /**
  * 递归查找 Action 组件（可能被 Popconfirm/Tooltip 等组件包裹）
- * 返回实际的 Action 组件和其 props
+ * 返回实际的 Action 组件和是否被包裹
  */
 var findActionComponent = function findActionComponent(element) {
-  var _element$type, _element$type2, _element$props;
+  var _element$props;
   var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   if (! /*#__PURE__*/React.isValidElement(element)) {
     return null;
   }
-
-  // 检查是否是 Action.Button 或 Action.Link
-  // @ts-ignore
-  if (((_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.__DISPLAY_NAME) === 'button' || ((_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.__DISPLAY_NAME) === 'link') {
+  if (isActionComponent(element)) {
     return {
       action: element,
-      wrapper: null
+      hasWrapper: false
     };
   }
 
@@ -63,10 +69,9 @@ var findActionComponent = function findActionComponent(element) {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       var result = findActionComponent(child, depth + 1);
       if (result) {
-        // 如果找到了 Action 组件，当前元素就是 wrapper
         return {
           action: result.action,
-          wrapper: element
+          hasWrapper: true
         };
       }
     }
@@ -74,6 +79,24 @@ var findActionComponent = function findActionComponent(element) {
   return null;
 };
 
+/**
+ * 递归克隆元素树，将 newProps 应用到最内层的 Action 组件
+ */
+var cloneWithActionProps = function cloneWithActionProps(element, newProps) {
+  var _element$props2;
+  if (isActionComponent(element)) {
+    return /*#__PURE__*/React.cloneElement(element, _objectSpread(_objectSpread({}, newProps), element.props));
+  }
+  var elementChildren = (_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.children;
+  if ( /*#__PURE__*/React.isValidElement(elementChildren)) {
+    return /*#__PURE__*/React.cloneElement(element, _objectSpread(_objectSpread({}, element.props), {}, {
+      key: newProps.key,
+      children: cloneWithActionProps(elementChildren, newProps)
+    }));
+  }
+  return element;
+};
+
 /**
  * 渲染菜单项内容，保持嵌套的 Popconfirm/Tooltip 结构
  */
@@ -82,40 +105,19 @@ var renderMenuItemContent = function renderMenuItemContent(action, actionProps,
     children = actionProps.children,
     tooltip = actionProps.tooltip;
   var result = findActionComponent(action);
-  if (!result) {
-    // 如果没有找到嵌套结构，使用默认渲染
-    var _content = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [loading && enableLoading && /*#__PURE__*/_jsx(LoadingOutlined, {}), " ", children || action]
-    });
-    // 如果有 tooltip，用 Tooltip 包裹
-    return tooltip ? /*#__PURE__*/_jsx(Tooltip, {
-      title: tooltip,
-      children: _content
-    }) : _content;
-  }
-  var actualAction = result.action,
-    wrapper = result.wrapper;
-
-  // 创建新的 action 元素，保留所有 props 并添加 loading 状态
-  var newAction = /*#__PURE__*/React.cloneElement(actualAction, _objectSpread(_objectSpread(_objectSpread({}, actualAction.props), actionProps), {}, {
-    children: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [loading && enableLoading && /*#__PURE__*/_jsx(LoadingOutlined, {}), " ", children || actualAction.props.children]
-    })
-  }));
+  var actualAction = (result === null || result === void 0 ? void 0 : result.action) || action;
+  var content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [loading && enableLoading && /*#__PURE__*/_jsx(LoadingOutlined, {}), " ", children || actualAction.props.children]
+  });
 
-  // 如果 action 被包裹，需要重新构建包裹结构
-  if (wrapper) {
-    var wrapperProps = wrapper.props;
-    // 保持原有的 wrapper 结构，只更新 children
-    return /*#__PURE__*/React.cloneElement(wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-      children: newAction
+  // 如果有 wrapper，需要重新构建包裹结构
+  if (result !== null && result !== void 0 && result.hasWrapper) {
+    return cloneWithActionProps(action, _objectSpread(_objectSpread({}, actionProps), {}, {
+      children: content
     }));
   }
 
-  // 如果没有包裹，直接渲染，如果有 tooltip 则用 Tooltip 包裹
-  var content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [loading && enableLoading && /*#__PURE__*/_jsx(LoadingOutlined, {}), " ", children || actualAction.props.children]
-  });
+  // 没有包裹时，如果有 tooltip 则用 Tooltip 包裹
   return tooltip ? /*#__PURE__*/_jsx(Tooltip, {
     title: tooltip,
     children: content
@@ -198,14 +200,20 @@ export default (function (_ref2) {
   return wrapSSR( /*#__PURE__*/_jsxs(Space, {
     size: ellipsisType === 'button' ? 8 : 16,
     children: [mainActions.map(function (action) {
-      return /*#__PURE__*/React.cloneElement(action, _objectSpread(_objectSpread({
-        // size should be covered by action props
-        size: buttonSize
-      }, action.props), {}, {
+      // 查找实际的 Action 组件（可能被 Popconfirm/Tooltip 等包裹）
+      var actionResult = findActionComponent(action);
+      var actualAction = (actionResult === null || actionResult === void 0 ? void 0 : actionResult.action) || action;
+      var actualActionProps = actualAction.props;
+      var newProps = {
         key: action.key,
+        // size should be covered by action props
+        size: buttonSize,
         enableLoading: enableLoading,
-        disabled: isBoolean(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key)
-      }));
+        disabled: isBoolean(actualActionProps.disabled) ? actualActionProps.disabled : getDefaultDisabled(action.key)
+      };
+
+      // 统一使用 cloneWithActionProps，无论是否有包裹都能正确处理
+      return cloneWithActionProps(action, newProps);
     }), ellipsisActions.length > 0 && /*#__PURE__*/_jsx(Dropdown, {
       placement: dropDownPlacement,
       overlay: /*#__PURE__*/_jsx(Menu, {
@@ -230,7 +238,7 @@ export default (function (_ref2) {
             var _actionProps$onClick;
             // 如果 action 被包裹（可能是 Popconfirm 或其他组件），不直接触发 onClick
             // 让包裹组件来处理交互
-            if (actionResult !== null && actionResult !== void 0 && actionResult.wrapper) {
+            if (actionResult !== null && actionResult !== void 0 && actionResult.hasWrapper) {
               // 包裹组件会处理点击，这里不需要做任何事
               // 注意：Menu.Item 的点击会关闭下拉菜单，但 Popconfirm 应该能够正常显示
               return;

package/es/FooterToolbar/style/index.js

@@ -5,10 +5,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genFooterToolbarStyle = function genFooterToolbarStyle(token) {
   var componentCls = token.componentCls,
-    colorBgBase = token.colorBgBase,
-    borderRadius = token.borderRadius,
-    boxShadowSecondary = token.boxShadowSecondary,
-    controlHeightLG = token.controlHeightLG;
+    colorBgBase = token.colorBgBase;
   return _defineProperty({}, "div".concat(componentCls), {
     flexDirection: 'row-reverse',
     lineHeight: 'initial',
@@ -19,7 +16,7 @@ export var genFooterToolbarStyle = function genFooterToolbarStyle(token) {
     paddingInline: token.paddingXL,
     width: '100%',
     backgroundColor: colorBgBase,
-    boxShadow: boxShadowSecondary,
+    boxShadow: '0px -1px 2px 0px #1320391A',
     borderBlockStart: 'none'
   });
 };

package/es/Highlight/index.d.ts

@@ -28,7 +28,7 @@ export declare const THEME_DARK = "dark";
 export declare const THEME_LIGHT = "light";
 declare const ThemeTypes: ["dark", "light"];
 export type ThemeType = (typeof ThemeTypes)[number];
-declare const supportedLanguages: ("go" | "ruby" | "css" | "json" | "jsx" | "tsx" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "yaml" | "solidity")[];
+declare const supportedLanguages: ("ruby" | "css" | "json" | "jsx" | "tsx" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/es/PageContainer/index.js

@@ -15,10 +15,11 @@ import classNames from 'classnames';
 import { isObject } from 'lodash';
 import React, { useContext } from 'react';
 import { Button, ConfigProvider, Divider, Space, Tooltip, theme } from '@oceanbase/design';
+import { useSize } from 'ahooks';
 import LocaleWrapper from "../locale/LocaleWrapper";
+import zhCN from "./locale/zh-CN";
 import ItemRender from "./ItemRender";
 import PageLoading from "../PageLoading";
-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";
@@ -53,6 +54,7 @@ var DocumentIcon = function DocumentIcon(_ref) {
   });
 };
 var PageContainer = function PageContainer(_ref2) {
+  var _window, _restProps$style;
   var customizePrefixCls = _ref2.prefixCls,
     className = _ref2.className,
     titleProp = _ref2.title,
@@ -78,6 +80,13 @@ var PageContainer = function PageContainer(_ref2) {
     wrapSSR = _useStyle.wrapSSR;
   var _theme$useToken = theme.useToken(),
     token = _theme$useToken.token;
+
+  // TODO: PageContainer should support ref to get the width of the container
+  var size = useSize((_window = window) === null || _window === void 0 || (_window = _window.document) === null || _window === void 0 ? void 0 : _window.querySelector(".".concat(prefixCls)));
+  var width = size === null || size === void 0 ? void 0 : size.width;
+  var maxWidthValue = (_restProps$style = restProps.style) === null || _restProps$style === void 0 ? void 0 : _restProps$style.maxWidth;
+  var maxWidth = typeof maxWidthValue === 'number' ? maxWidthValue : maxWidthValue !== null && maxWidthValue !== void 0 && maxWidthValue.includes('px') ? parseInt(maxWidthValue) : undefined;
+  var isOverflow = width && width >= maxWidth;
   var _ref3 = header || {},
     reload = _ref3.reload,
     _ref3$title = _ref3.title,
@@ -147,7 +156,7 @@ var PageContainer = function PageContainer(_ref2) {
   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);
+  var pageContainerCls = classNames(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-no-page-header"), noHasHeader), "".concat(prefixCls, "-max-width"), isOverflow), className);
   return wrapSSR( /*#__PURE__*/_jsx(AntPageContainer, _objectSpread({
     prefixCls: customizePrefixCls,
     className: pageContainerCls,

package/es/PageContainer/style/index.js

@@ -15,7 +15,7 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     fontSizeHeading2 = token.fontSizeHeading2,
     padding = token.padding,
     paddingLG = token.paddingLG;
-  return _objectSpread(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({
+  return _objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({
     minHeight: '100vh',
     backgroundColor: colorBgLayout
   }, "".concat(proComponentsCls, "-grid-content"), {
@@ -64,9 +64,7 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
   }), _defineProperty(_$concat$concat, "".concat(antCls, "-page-header-footer"), _defineProperty({
     marginBlockStart: 0
   }, "".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
-    borderBottom: "1px solid ".concat(token.colorBorderSecondary),
-    left: -token.paddingXL,
-    right: -token.paddingXL
+    borderBottom: "1px solid ".concat(token.colorBorderSecondary)
   })))), "".concat(componentCls, "-children-container"), _defineProperty(_defineProperty({
     paddingInline: token.paddingXL,
     paddingBlockStart: 0,
@@ -75,14 +73,18 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     // 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
+    borderBottom: "1px solid ".concat(token.colorBorderSecondary)
   }))), "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
     paddingBlockStart: paddingLG
   })), "".concat(componentCls, "-with-footer "), {
     paddingBottom: 64
-  }), genFooterToolbarStyle(_objectSpread(_objectSpread({}, token), {}, {
+  }), "".concat(componentCls, ":not(").concat(componentCls, "-max-width)"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), _defineProperty({}, "".concat(antCls, "-page-header-footer"), _defineProperty({}, "".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
+    left: -token.paddingXL,
+    right: -token.paddingXL
+  }))), "".concat(componentCls, "-children-container"), _defineProperty({}, "& > ".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
+    left: -token.paddingXL,
+    right: -token.paddingXL
+  }))), genFooterToolbarStyle(_objectSpread(_objectSpread({}, token), {}, {
     componentCls: "".concat(proComponentsCls, "-footer-bar")
   })));
 };

package/lib/Action/Group.js

@@ -32,21 +32,26 @@ const getOrder = ({
   return order;
 };
 
+/**
+ * 判断是否是 Action 组件（Action.Button 或 Action.Link）
+ */
+const isActionComponent = element => {
+  // @ts-ignore
+  return element.type?.__DISPLAY_NAME === 'button' || element.type?.__DISPLAY_NAME === 'link';
+};
+
 /**
  * 递归查找 Action 组件（可能被 Popconfirm/Tooltip 等组件包裹）
- * 返回实际的 Action 组件和其 props
+ * 返回实际的 Action 组件和是否被包裹
  */
 const findActionComponent = (element, depth = 0) => {
   if (! /*#__PURE__*/_react.default.isValidElement(element)) {
     return null;
   }
-
-  // 检查是否是 Action.Button 或 Action.Link
-  // @ts-ignore
-  if (element.type?.__DISPLAY_NAME === 'button' || element.type?.__DISPLAY_NAME === 'link') {
+  if (isActionComponent(element)) {
     return {
       action: element,
-      wrapper: null
+      hasWrapper: false
     };
   }
 
@@ -62,10 +67,9 @@ const findActionComponent = (element, depth = 0) => {
     if ( /*#__PURE__*/_react.default.isValidElement(child)) {
       const result = findActionComponent(child, depth + 1);
       if (result) {
-        // 如果找到了 Action 组件，当前元素就是 wrapper
         return {
           action: result.action,
-          wrapper: element
+          hasWrapper: true
         };
       }
     }
@@ -73,6 +77,27 @@ const findActionComponent = (element, depth = 0) => {
   return null;
 };
 
+/**
+ * 递归克隆元素树，将 newProps 应用到最内层的 Action 组件
+ */
+const cloneWithActionProps = (element, newProps) => {
+  if (isActionComponent(element)) {
+    return /*#__PURE__*/_react.default.cloneElement(element, {
+      ...newProps,
+      ...element.props
+    });
+  }
+  const elementChildren = element.props?.children;
+  if ( /*#__PURE__*/_react.default.isValidElement(elementChildren)) {
+    return /*#__PURE__*/_react.default.cloneElement(element, {
+      ...element.props,
+      key: newProps.key,
+      children: cloneWithActionProps(elementChildren, newProps)
+    });
+  }
+  return element;
+};
+
 /**
  * 渲染菜单项内容，保持嵌套的 Popconfirm/Tooltip 结构
  */
@@ -83,45 +108,20 @@ const renderMenuItemContent = (action, actionProps, enableLoading) => {
     tooltip
   } = actionProps;
   const result = findActionComponent(action);
-  if (!result) {
-    // 如果没有找到嵌套结构，使用默认渲染
-    const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [loading && enableLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {}), " ", children || action]
-    });
-    // 如果有 tooltip，用 Tooltip 包裹
-    return tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Tooltip, {
-      title: tooltip,
-      children: content
-    }) : content;
-  }
-  const {
-    action: actualAction,
-    wrapper
-  } = result;
-
-  // 创建新的 action 元素，保留所有 props 并添加 loading 状态
-  const newAction = /*#__PURE__*/_react.default.cloneElement(actualAction, {
-    ...actualAction.props,
-    ...actionProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [loading && enableLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {}), " ", children || actualAction.props.children]
-    })
+  const actualAction = result?.action || action;
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [loading && enableLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {}), " ", children || actualAction.props.children]
   });
 
-  // 如果 action 被包裹，需要重新构建包裹结构
-  if (wrapper) {
-    const wrapperProps = wrapper.props;
-    // 保持原有的 wrapper 结构，只更新 children
-    return /*#__PURE__*/_react.default.cloneElement(wrapper, {
-      ...wrapperProps,
-      children: newAction
+  // 如果有 wrapper，需要重新构建包裹结构
+  if (result?.hasWrapper) {
+    return cloneWithActionProps(action, {
+      ...actionProps,
+      children: content
     });
   }
 
-  // 如果没有包裹，直接渲染，如果有 tooltip 则用 Tooltip 包裹
-  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [loading && enableLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {}), " ", children || actualAction.props.children]
-  });
+  // 没有包裹时，如果有 tooltip 则用 Tooltip 包裹
   return tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Tooltip, {
     title: tooltip,
     children: content
@@ -197,14 +197,20 @@ var _default = ({
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
     size: ellipsisType === 'button' ? 8 : 16,
     children: [mainActions.map(action => {
-      return /*#__PURE__*/_react.default.cloneElement(action, {
+      // 查找实际的 Action 组件（可能被 Popconfirm/Tooltip 等包裹）
+      const actionResult = findActionComponent(action);
+      const actualAction = actionResult?.action || action;
+      const actualActionProps = actualAction.props;
+      const newProps = {
+        key: action.key,
         // size should be covered by action props
         size: buttonSize,
-        ...action.props,
-        key: action.key,
         enableLoading: enableLoading,
-        disabled: (0, _lodash.isBoolean)(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key)
-      });
+        disabled: (0, _lodash.isBoolean)(actualActionProps.disabled) ? actualActionProps.disabled : getDefaultDisabled(action.key)
+      };
+
+      // 统一使用 cloneWithActionProps，无论是否有包裹都能正确处理
+      return cloneWithActionProps(action, newProps);
     }), ellipsisActions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Dropdown, {
       placement: dropDownPlacement,
       overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Menu, {
@@ -227,7 +233,7 @@ var _default = ({
           const handleMenuItemClick = info => {
             // 如果 action 被包裹（可能是 Popconfirm 或其他组件），不直接触发 onClick
             // 让包裹组件来处理交互
-            if (actionResult?.wrapper) {
+            if (actionResult?.hasWrapper) {
               // 包裹组件会处理点击，这里不需要做任何事
               // 注意：Menu.Item 的点击会关闭下拉菜单，但 Popconfirm 应该能够正常显示
               return;

package/lib/FooterToolbar/style/index.js

@@ -8,10 +8,7 @@ var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
 const genFooterToolbarStyle = token => {
   const {
     componentCls,
-    colorBgBase,
-    borderRadius,
-    boxShadowSecondary,
-    controlHeightLG
+    colorBgBase
   } = token;
   return {
     [`div${componentCls}`]: {
@@ -24,7 +21,7 @@ const genFooterToolbarStyle = token => {
       paddingInline: token.paddingXL,
       width: '100%',
       backgroundColor: colorBgBase,
-      boxShadow: boxShadowSecondary,
+      boxShadow: '0px -1px 2px 0px #1320391A',
       borderBlockStart: 'none'
     }
   };

package/lib/Highlight/index.d.ts

@@ -28,7 +28,7 @@ export declare const THEME_DARK = "dark";
 export declare const THEME_LIGHT = "light";
 declare const ThemeTypes: ["dark", "light"];
 export type ThemeType = (typeof ThemeTypes)[number];
-declare const supportedLanguages: ("go" | "ruby" | "css" | "json" | "jsx" | "tsx" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "yaml" | "solidity")[];
+declare const supportedLanguages: ("ruby" | "css" | "json" | "jsx" | "tsx" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/lib/PageContainer/index.js

@@ -11,10 +11,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
 var _react2 = _interopRequireWildcard(require("react"));
 var _design = require("@oceanbase/design");
+var _ahooks = require("ahooks");
 var _LocaleWrapper = _interopRequireDefault(require("../locale/LocaleWrapper"));
+var _zhCN = _interopRequireDefault(require("./locale/zh-CN"));
 var _ItemRender = _interopRequireDefault(require("./ItemRender"));
 var _PageLoading = _interopRequireDefault(require("../PageLoading"));
-var _zhCN = _interopRequireDefault(require("./locale/zh-CN"));
 var _style = _interopRequireDefault(require("./style"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -83,6 +84,13 @@ const PageContainer = ({
   const {
     token
   } = _design.theme.useToken();
+
+  // TODO: PageContainer should support ref to get the width of the container
+  const size = (0, _ahooks.useSize)(window?.document?.querySelector(`.${prefixCls}`));
+  const width = size?.width;
+  const maxWidthValue = restProps.style?.maxWidth;
+  const maxWidth = typeof maxWidthValue === 'number' ? maxWidthValue : maxWidthValue?.includes('px') ? parseInt(maxWidthValue) : undefined;
+  const isOverflow = width && width >= maxWidth;
   const {
     reload,
     title = titleProp,
@@ -147,7 +155,8 @@ const PageContainer = ({
   };
   const noHasHeader = ['title', 'subTitle', 'onBack', 'breadcrumb', 'extra', 'tags', 'avatar'].every(item => !newHeader?.[item]) && !content && !extraContent && !tabList && !tabBarExtraContent;
   const pageContainerCls = (0, _classnames.default)({
-    [`${prefixCls}-no-page-header`]: noHasHeader
+    [`${prefixCls}-no-page-header`]: noHasHeader,
+    [`${prefixCls}-max-width`]: isOverflow
   }, className);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_proComponents.PageContainer, {
     prefixCls: customizePrefixCls,

package/lib/PageContainer/style/index.js

@@ -78,9 +78,7 @@ const genPageContainerStyle = token => {
         [`${antCls}-page-header-footer`]: {
           marginBlockStart: 0,
           [`${antCls}-tabs-top > ${antCls}-tabs-nav::before`]: {
-            borderBottom: `1px solid ${token.colorBorderSecondary}`,
-            left: -token.paddingXL,
-            right: -token.paddingXL
+            borderBottom: `1px solid ${token.colorBorderSecondary}`
           }
         }
       },
@@ -94,9 +92,7 @@ const genPageContainerStyle = token => {
           marginTop: -padding
         },
         [`& > ${antCls}-tabs-top > ${antCls}-tabs-nav::before`]: {
-          borderBottom: `1px solid ${token.colorBorderSecondary}`,
-          left: -token.paddingXL,
-          right: -token.paddingXL
+          borderBottom: `1px solid ${token.colorBorderSecondary}`
         }
       }
     },
@@ -108,6 +104,23 @@ const genPageContainerStyle = token => {
     [`${componentCls}-with-footer `]: {
       paddingBottom: 64
     },
+    // tabs pull through when the width is not overflow
+    [`${componentCls}:not(${componentCls}-max-width)`]: {
+      [`${componentCls}-warp-page-header,${componentCls}-wrap-page-header`]: {
+        [`${antCls}-page-header-footer`]: {
+          [`${antCls}-tabs-top > ${antCls}-tabs-nav::before`]: {
+            left: -token.paddingXL,
+            right: -token.paddingXL
+          }
+        }
+      },
+      [`${componentCls}-children-container`]: {
+        [`& > ${antCls}-tabs-top > ${antCls}-tabs-nav::before`]: {
+          left: -token.paddingXL,
+          right: -token.paddingXL
+        }
+      }
+    },
     ...(0, _style.genFooterToolbarStyle)({
       ...token,
       componentCls: `${proComponentsCls}-footer-bar`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.14",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",
@@ -38,7 +38,7 @@
     "@ant-design/cssinjs": "^1.24.0",
     "@ant-design/pro-components": "^2.8.10",
     "@inline-svg-unique-id/react": "^1.2.3",
-    "@oceanbase/design": "^1.0.0-alpha.13",
+    "@oceanbase/design": "^1.0.0-alpha.14",
     "@oceanbase/icons": "^1.0.0-alpha.0",
     "@oceanbase/util": "^1.0.0-alpha.2",
     "ahooks": "^2.10.14",
@@ -67,5 +67,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "6e6437a44e116442621221da1580b2d85950ff63"
+  "gitHead": "ba396251e1eb9fa2be8cfc758d1c857720ac8e72"
 }