@ant-design/pro-components 3.1.3-1 → 3.1.5-0

package/es/form/layouts/ModalForm/index.js

@@ -23,9 +23,7 @@ function ModalForm({
   open: propsOpen,
   ...rest
 }) {
-  noteOnce(
-  // eslint-disable-next-line @typescript-eslint/dot-notation
-  !rest['footer'] || !modalProps?.footer, 'ModalForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
+  noteOnce(!rest.footer || !modalProps?.footer, 'ModalForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
   const context = useContext(ConfigProvider.ConfigContext);
   const [, forceUpdate] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -74,7 +72,6 @@ function ModalForm({
     if (propsOpen) {
       onOpenChange?.(true);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [propsOpen]);
   const triggerDom = useMemo(() => {
     if (!trigger) {

package/es/form/layouts/QueryFilter/Actions.js

@@ -1,5 +1,6 @@
 import { DownOutlined } from '@ant-design/icons';
 import { ConfigProvider, Space } from 'antd';
+import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { ProProvider, useIntl } from "../../../provider";
 import { omitBoolean } from "../../../utils";
@@ -54,7 +55,7 @@ const Actions = props => {
     style: style,
     size: 16,
     children: [submitter, props.collapseRender !== false && /*#__PURE__*/_jsx("a", {
-      className: `${getPrefixCls('pro-query-filter-collapse-button')} ${hashId}`.trim(),
+      className: clsx(getPrefixCls('pro-query-filter-collapse-button'), hashId),
       onClick: () => setCollapsed(!collapsed),
       children: collapseRender?.(collapsed, props, intl, hiddenNum)
     })]

package/es/form/layouts/QueryFilter/index.js

@@ -1,7 +1,6 @@
-/* eslint-disable no-param-reassign */
 import RcResizeObserver from '@rc-component/resize-observer';
 import { useControlledState } from '@rc-component/util';
-import { Col, ConfigProvider, Form, Row } from 'antd';
+import { Col, ConfigProvider, Form, Row, theme } from 'antd';
 import { clsx } from 'clsx';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { ProProvider, useIntl } from "../../../provider";
@@ -11,20 +10,28 @@ import Actions from "./Actions";
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const CONFIG_SPAN_BREAKPOINTS = {
-  xs: 513,
-  sm: 513,
-  md: 785,
-  lg: 992,
-  xl: 1057,
-  xxl: Infinity
-};
-/** 配置表单列变化的容器宽度断点 */
-const BREAKPOINTS = {
-  vertical: [
-  // [breakpoint, cols, layout]
-  [513, 1, 'vertical'], [785, 2, 'vertical'], [1057, 3, 'vertical'], [Infinity, 4, 'vertical']],
-  default: [[513, 1, 'vertical'], [701, 2, 'vertical'], [1062, 3, 'horizontal'], [1352, 3, 'horizontal'], [Infinity, 4, 'horizontal']]
+/** 从 antd 设计 token 获取断点配置，与 Grid 响应式布局保持一致 */
+const getBreakpointsConfig = token => {
+  const defaultToken = theme.getDesignToken();
+  const t = {
+    ...defaultToken,
+    ...token
+  };
+  const bp = {
+    xs: t.screenSMMin ?? 576,
+    sm: t.screenMDMin ?? 768,
+    md: t.screenLGMin ?? 992,
+    lg: t.screenXLMin ?? 1200,
+    xl: t.screenXXLMin ?? 1600,
+    xxl: Infinity
+  };
+  return {
+    configSpanBreakpoints: bp,
+    breakpoints: {
+      vertical: [[bp.xs, 1, 'vertical'], [bp.md, 2, 'vertical'], [bp.xl, 3, 'vertical'], [Infinity, 4, 'vertical']],
+      default: [[bp.xs, 1, 'vertical'], [bp.sm, 2, 'vertical'], [bp.xl, 3, 'horizontal'], [Infinity, 4, 'horizontal']]
+    }
+  };
 };
 
 /**
@@ -32,16 +39,21 @@ const BREAKPOINTS = {
  *
  * @param layout
  * @param width
+ * @param breakpointsConfig 从 theme.useToken() 获取，支持 ConfigProvider 主题定制
  */
-const getSpanConfig = (layout, width, span) => {
+const getSpanConfig = (layout, width, span, breakpointsConfig) => {
   if (span && typeof span === 'number') {
     return {
       span,
       layout
     };
   }
-  const spanConfig = span ? ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map(key => [CONFIG_SPAN_BREAKPOINTS[key], 24 / span[key], 'horizontal']) : BREAKPOINTS[layout || 'default'];
-  const breakPoint = (spanConfig || BREAKPOINTS.default).find(item => width < item[0] + 16 // 16 = 2 * (ant-row -8px margin)
+  const {
+    breakpoints,
+    configSpanBreakpoints
+  } = breakpointsConfig;
+  const spanConfig = span ? ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map(key => [configSpanBreakpoints[key], 24 / span[key], 'horizontal']) : breakpoints[layout || 'default'];
+  const breakPoint = (spanConfig || breakpoints.default).find(item => width < item[0] + 16 // 16 = 2 * (ant-row -8px margin)
   );
   if (!breakPoint) {
     return {
@@ -200,12 +212,12 @@ const QueryFilterContent = props => {
     if (split && currentSpan % 24 === 0 && index < itemLength - 1) {
       return /*#__PURE__*/_jsx(Col, {
         span: colSpan,
-        className: `${props.baseClassName}-row-split-line ${props.baseClassName}-row-split ${hashId}`.trim(),
+        className: clsx(`${props.baseClassName}-row-split-line`, `${props.baseClassName}-row-split`, hashId),
         children: itemDom
       }, itemKey);
     }
     return /*#__PURE__*/_jsx(Col, {
-      className: `${props.baseClassName}-row-split ${hashId}`.trim(),
+      className: clsx(`${props.baseClassName}-row-split`, hashId),
       span: colSpan,
       children: itemDom
     }, itemKey);
@@ -244,7 +256,7 @@ const QueryFilterContent = props => {
         label: " ",
         colon: false,
         shouldUpdate: false,
-        className: `${baseClassName}-actions ${hashId}`.trim(),
+        className: clsx(`${baseClassName}-actions`, hashId),
         children: /*#__PURE__*/_jsx(Actions, {
           hiddenNum: hiddenNum,
           collapsed: collapsed,
@@ -287,8 +299,12 @@ function QueryFilter(props) {
     wrapSSR,
     hashId
   } = useStyle(baseClassName);
+  const {
+    token
+  } = theme.useToken();
   const [width, setWidth] = useState(() => typeof style?.width === 'number' ? style?.width : defaultWidth);
-  const spanSize = useMemo(() => getSpanConfig(layout, width + 16, span), [layout, width, span]);
+  const breakpointsConfig = useMemo(() => getBreakpointsConfig(token), [token.screenSMMin, token.screenMDMin, token.screenLGMin, token.screenXLMin, token.screenXXLMin]);
+  const spanSize = useMemo(() => getSpanConfig(layout, width + 16, span, breakpointsConfig), [layout, width, span, breakpointsConfig]);
   const showLength = useMemo(() => {
     if (defaultFormItemsNumber !== undefined) {
       return defaultFormItemsNumber;
@@ -328,7 +344,7 @@ function QueryFilter(props) {
     },
     children: ref => /*#__PURE__*/_jsx("div", {
       ref: ref,
-      className: `${baseClassName}-container ${hashId}`,
+      className: clsx(`${baseClassName}-container`, hashId),
       style: props.containerStyle,
       children: /*#__PURE__*/_jsx(BaseForm, {
         isKeyPressSubmit: true,

package/es/form/layouts/StepsForm/StepForm.js

@@ -35,7 +35,6 @@ function StepForm(stepNativeProps) {
     return () => {
       context?.unRegForm(name);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   if (context && context?.formArrayRef) {
     context.formArrayRef.current[step || 0] = formRef;

package/es/form/layouts/StepsForm/index.js

@@ -140,8 +140,8 @@ function StepsForm(props) {
     });
   }, [onCurrentChangeCallback]);
   const layoutRender = useMemo(() => {
-    return StepsLayoutStrategy[stepsProps?.direction || 'horizontal'];
-  }, [stepsProps?.direction]);
+    return StepsLayoutStrategy[stepsProps?.orientation || 'horizontal'];
+  }, [stepsProps?.orientation]);
   const lastStep = useMemo(() => step === formArray.length - 1, [formArray.length, step]);
 
   /**
@@ -207,22 +207,13 @@ function StepsForm(props) {
         return stepItemProps;
       })
     };
-
-    // Convert deprecated direction to orientation
-    const processedStepsProps = stepsProps ? {
-      ...stepsProps
-    } : {};
-    if ('direction' in processedStepsProps) {
-      processedStepsProps.orientation = processedStepsProps.direction;
-      delete processedStepsProps.direction;
-    }
     return /*#__PURE__*/_jsx("div", {
-      className: `${prefixCls}-steps-container ${hashId}`.trim(),
+      className: clsx(`${prefixCls}-steps-container`, hashId),
       style: {
         maxWidth: Math.min(formArray.length * 320, 1160)
       },
       children: /*#__PURE__*/_jsx(Steps, {
-        ...processedStepsProps,
+        ...stepsProps,
         ...itemsProps,
         current: step,
         onChange: undefined
@@ -346,7 +337,7 @@ function StepsForm(props) {
     return stepsDom;
   }, [formArray, stepsDom, stepsRender]);
   const formContainer = useMemo(() => /*#__PURE__*/_jsxs("div", {
-    className: `${prefixCls}-container ${hashId}`.trim(),
+    className: clsx(`${prefixCls}-container`, hashId),
     style: containerStyle,
     children: [formDom, stepsFormRender ? null : /*#__PURE__*/_jsx(Space, {
       children: submitterDom

package/es/layout/ProLayout.d.ts

@@ -50,7 +50,7 @@ export type ProLayoutProps = GlobalTypes & {
      * @example 设置 logo 为 false 不显示 logo  logo={false}
      * @example 设置 logo 为 方法  logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> }
      * */
-    logo?: React.ReactNode | JSX.Element | WithFalse<() => React.ReactNode | JSX.Element>;
+    logo?: React.ReactNode | React.JSX.Element | WithFalse<() => React.ReactNode | React.JSX.Element>;
     /**
      * @name 页面切换的时候触发
      *

package/es/layout/ProLayout.js

@@ -229,7 +229,6 @@ const BaseProLayout = props => {
   });
   useEffect(() => {
     setMenuLoading(isLoading);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
   const {
     cache
@@ -238,7 +237,6 @@ const BaseProLayout = props => {
     return () => {
       if (cache instanceof Map) cache.delete(defaultId);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const menuInfoData = useMemo(() => getMenuData(data || route?.children || route?.routes || [], menu, formatMessage, menuDataRender), [formatMessage, menu, menuDataRender, data, route?.children]);
   const {
@@ -401,7 +399,6 @@ const BaseProLayout = props => {
   /** 页面切换的时候触发 */
   useEffect(() => {
     props.onPageChange?.(props.location);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.pathname, location.pathname?.search]);
   const [hasFooterToolbar, setHasFooterToolbar] = useState(false);
   /**
@@ -462,9 +459,7 @@ const BaseProLayout = props => {
           flexDirection: siderMenuDom ? 'row' : undefined,
           ...style
         },
-        children: [/*#__PURE__*/_jsx(ConfigProvider
-        // @ts-ignore
-        , {
+        children: [/*#__PURE__*/_jsx(ConfigProvider, {
           theme: {
             hashed: isNeedOpenHash(),
             token: {
@@ -495,7 +490,7 @@ const BaseProLayout = props => {
           children: siderMenuDom
         }), /*#__PURE__*/_jsxs("div", {
           style: genLayoutStyle,
-          className: `${proLayoutClassName}-container ${hashId}`.trim(),
+          className: clsx(`${proLayoutClassName}-container`, hashId),
           children: [headerDom, /*#__PURE__*/_jsx(WrapContent, {
             hasPageContainer: hasPageContainer,
             isChildrenLayout: isChildrenLayout,

package/es/layout/components/AppsLogoComponents/DefaultContent.js

@@ -1,3 +1,4 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import { defaultRenderLogo } from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,15 +11,15 @@ export const DefaultContent = props => {
     itemClick
   } = props;
   return /*#__PURE__*/_jsx("div", {
-    className: `${baseClassName}-content ${hashId}`.trim(),
+    className: clsx(`${baseClassName}-content`, hashId),
     children: /*#__PURE__*/_jsx("ul", {
-      className: `${baseClassName}-content-list ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-content-list`, hashId),
       children: appList?.map((app, index) => {
         if (app?.children?.length) {
           return /*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}-content-list-item-group ${hashId}`.trim(),
+            className: clsx(`${baseClassName}-content-list-item-group`, hashId),
             children: [/*#__PURE__*/_jsx("div", {
-              className: `${baseClassName}-content-list-item-group-title ${hashId}`.trim(),
+              className: clsx(`${baseClassName}-content-list-item-group-title`, hashId),
               children: app.title
             }), /*#__PURE__*/_jsx(DefaultContent, {
               hashId: hashId,
@@ -29,7 +30,7 @@ export const DefaultContent = props => {
           }, index);
         }
         return /*#__PURE__*/_jsx("li", {
-          className: `${baseClassName}-content-list-item ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-content-list-item`, hashId),
           onClick: e => {
             e.stopPropagation();
             itemClick?.(app);

package/es/layout/components/AppsLogoComponents/SimpleContent.js

@@ -1,3 +1,4 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import { isUrl } from "../../../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -42,15 +43,15 @@ export const SimpleContent = props => {
     itemClick
   } = props;
   return /*#__PURE__*/_jsx("div", {
-    className: `${baseClassName}-content ${hashId}`.trim(),
+    className: clsx(`${baseClassName}-content`, hashId),
     children: /*#__PURE__*/_jsx("ul", {
-      className: `${baseClassName}-content-list ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-content-list`, hashId),
       children: appList?.map((app, index) => {
         if (app?.children?.length) {
           return /*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}-content-list-item-group ${hashId}`.trim(),
+            className: clsx(`${baseClassName}-content-list-item-group`, hashId),
             children: [/*#__PURE__*/_jsx("div", {
-              className: `${baseClassName}-content-list-item-group-title ${hashId}`.trim(),
+              className: clsx(`${baseClassName}-content-list-item-group-title`, hashId),
               children: app.title
             }), /*#__PURE__*/_jsx(SimpleContent, {
               hashId: hashId,
@@ -61,7 +62,7 @@ export const SimpleContent = props => {
           }, index);
         }
         return /*#__PURE__*/_jsx("li", {
-          className: `${baseClassName}-content-list-item ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-content-list-item`, hashId),
           onClick: e => {
             e.stopPropagation();
             itemClick?.(app);

package/es/layout/components/AppsLogoComponents/style/index.js

@@ -4,6 +4,10 @@ import { genAppsLogoComponentsSimpleListStyle } from "./simple";
 const genAppsLogoComponentsStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       '&-icon': {
         display: 'inline-flex',
         alignItems: 'center',

package/es/layout/components/FooterToolbar/index.d.ts

@@ -9,7 +9,7 @@ export type FooterToolbarProps = {
     className?: string;
     renderContent?: (props: FooterToolbarProps & RouteContextType & {
         leftWidth?: string;
-    }, dom: JSX.Element) => ReactNode;
+    }, dom: React.JSX.Element) => ReactNode;
     prefixCls?: string;
     stylish?: GenerateStyle<FooterToolBarToken>;
     children?: React.ReactNode;

package/es/layout/components/FooterToolbar/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { omit } from '@rc-component/util';
 import { ConfigProvider } from 'antd';
 import { clsx } from 'clsx';
@@ -46,7 +45,6 @@ const FooterToolbar = props => {
       return '100%';
     }
     return isMobile ? '100%' : `calc(100% - ${siderWidth}px)`;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value.collapsed, value.hasSiderMenu, value.isMobile, value.siderWidth]);
   const containerDom = useMemo(() => {
     if (typeof window === 'undefined' || typeof document === 'undefined') return null;
@@ -58,10 +56,10 @@ const FooterToolbar = props => {
   });
   const dom = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      className: `${baseClassName}-left ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-left`, hashId),
       children: extra
     }), /*#__PURE__*/_jsx("div", {
-      className: `${baseClassName}-right ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-right`, hashId),
       children: children
     })]
   });
@@ -75,7 +73,6 @@ const FooterToolbar = props => {
     return () => {
       value?.setHasFooterToolbar?.(false);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const renderDom = /*#__PURE__*/_jsx("div", {
     className: clsx(className, hashId, baseClassName, {

package/es/layout/components/GlobalFooter/index.js

@@ -24,9 +24,9 @@ const GlobalFooter = ({
     className: clsx(baseClassName, hashId, className),
     style: style,
     children: [links && /*#__PURE__*/_jsx("div", {
-      className: `${baseClassName}-list ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-list`, hashId),
       children: links.map(link => /*#__PURE__*/_jsx("a", {
-        className: `${baseClassName}-list-link ${hashId}`.trim(),
+        className: clsx(`${baseClassName}-list-link`, hashId),
         title: link.key,
         target: link.blankTarget ? '_blank' : '_self',
         href: link.href,
@@ -34,7 +34,7 @@ const GlobalFooter = ({
         children: link.title
       }, link.key))
     }), copyright && /*#__PURE__*/_jsx("div", {
-      className: `${baseClassName}-copyright ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-copyright`, hashId),
       children: copyright
     })]
   }));

package/es/layout/components/GlobalHeader/ActionsContent.js

@@ -58,14 +58,14 @@ export const ActionsContent = ({
     const doms = actionsRender && actionsRender?.(restParams);
     if (!doms && !avatarDom) return null;
     if (!Array.isArray(doms)) return wrapSSR( /*#__PURE__*/_jsxs("div", {
-      className: `${prefixCls}-header-actions ${hashId}`.trim(),
+      className: clsx(`${prefixCls}-header-actions`, hashId),
       children: [doms, avatarDom && /*#__PURE__*/_jsx("span", {
-        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
+        className: clsx(`${prefixCls}-header-actions-avatar`, hashId),
         children: avatarDom
       })]
     }));
     return wrapSSR( /*#__PURE__*/_jsxs("div", {
-      className: `${prefixCls}-header-actions ${hashId}`.trim(),
+      className: clsx(`${prefixCls}-header-actions`, hashId),
       children: [doms.filter(Boolean).map((dom, index) => {
         let hideHover = false;
         // 如果配置了 hideHover 就不展示 hover 效果了
@@ -73,13 +73,13 @@ export const ActionsContent = ({
           hideHover = !!dom?.props?.['aria-hidden'];
         }
         return /*#__PURE__*/_jsx("div", {
-          className: clsx(`${prefixCls}-header-actions-item ${hashId}`, {
+          className: clsx(`${prefixCls}-header-actions-item`, hashId, {
             [`${prefixCls}-header-actions-hover`]: !hideHover
           }),
           children: dom
         }, index);
       }), avatarDom && /*#__PURE__*/_jsx("span", {
-        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
+        className: clsx(`${prefixCls}-header-actions-avatar`, hashId),
         children: avatarDom
       })]
     }));
@@ -90,7 +90,7 @@ export const ActionsContent = ({
   }, 160);
   const contentRender = rightActionsRender;
   return /*#__PURE__*/_jsx("div", {
-    className: `${prefixCls}-right-content ${hashId}`.trim(),
+    className: clsx(`${prefixCls}-right-content`, hashId),
     style: {
       minWidth: rightSize,
       height: '100%'
@@ -116,7 +116,6 @@ export const ActionsContent = ({
           children: contentRender ? contentRender({
             ...props,
             // 测试专用
-            //@ts-ignore
             rightContentSize: rightSize
           }) : null
         })

package/es/layout/components/GlobalHeader/index.js

@@ -77,7 +77,7 @@ const GlobalHeader = props => {
       ...style
     },
     children: [isMobile && /*#__PURE__*/_jsx("span", {
-      className: `${baseClassName}-collapsed-button ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-collapsed-button`, hashId),
       onClick: () => {
         onCollapse?.(!collapsed);
       },

package/es/layout/components/GridContent/index.js

@@ -35,7 +35,7 @@ const GridContent = props => {
     }),
     style: style,
     children: /*#__PURE__*/_jsx("div", {
-      className: `${prefixCls}-grid-content-children ${hashId}`.trim(),
+      className: clsx(`${prefixCls}-grid-content-children`, hashId),
       children: children
     })
   }));

package/es/layout/components/Header/index.js

@@ -97,9 +97,7 @@ const DefaultHeader = props => {
   });
   if (layout === 'side' && !isMobile) return null;
   return stylish.wrapSSR(wrapSSR( /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsxs(ConfigProvider
-    // @ts-ignore
-    , {
+    children: /*#__PURE__*/_jsxs(ConfigProvider, {
       theme: {
         hashed: isNeedOpenHash(),
         components: {

package/es/layout/components/Help/ProHelpPanel.js

@@ -1,6 +1,7 @@
 import { CloseOutlined, ProfileOutlined } from '@ant-design/icons';
 import { useControlledState } from '@rc-component/util';
 import { Card, ConfigProvider, Menu } from 'antd';
+import { clsx } from 'clsx';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { ProProvider, isNeedOpenHash } from "../../../provider";
 import { ProHelpProvide } from "./HelpProvide";
@@ -77,7 +78,7 @@ export const ProHelpPanel = ({
   const parentKey = useMemo(() => dataSourceKeyMap.get(selectedKey)?.parentKey, [dataSourceKeyMap, selectedKey]);
   const defaultExtraActions = {
     collapsePanelAction: /*#__PURE__*/_jsx("div", {
-      className: `${className}-actions-item ${hashId}`.trim(),
+      className: clsx(`${className}-actions-item`, hashId),
       children: /*#__PURE__*/_jsx(ProfileOutlined, {
         title: "collapse panel",
         onClick: () => {
@@ -86,8 +87,8 @@ export const ProHelpPanel = ({
       })
     }),
     helpSelectAction: /*#__PURE__*/_jsx(ProHelpSelect, {
-      iconClassName: `${className}-actions-item`,
-      className: `${hashId} ${className}-actions-input`,
+      iconClassName: clsx(`${className}-actions-item`, hashId),
+      className: clsx(hashId, `${className}-actions-input`),
       value: selectedKey,
       onChange: (value, item) => {
         setSelectedKey(value);
@@ -95,7 +96,7 @@ export const ProHelpPanel = ({
       }
     }),
     closeAction: /*#__PURE__*/_jsx("div", {
-      className: `${className}-actions-item ${hashId}`.trim(),
+      className: clsx(`${className}-actions-item`, hashId),
       children: /*#__PURE__*/_jsx(CloseOutlined, {
         title: "close panel",
         onClick: () => {
@@ -106,7 +107,7 @@ export const ProHelpPanel = ({
   };
   const extraDomList = () => {
     return /*#__PURE__*/_jsx("div", {
-      className: `${className}-actions ${hashId}`.trim(),
+      className: clsx(`${className}-actions`, hashId),
       children: extraRender ? extraRender(defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, defaultExtraActions.closeAction) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, onClose ? defaultExtraActions.closeAction : null]
       })
@@ -132,7 +133,7 @@ export const ProHelpPanel = ({
       size: "small",
       extra: extraDomList(),
       children: [showLeftPanel ? /*#__PURE__*/_jsx("div", {
-        className: `${hashId} ${className}-left-panel `,
+        className: clsx(hashId, `${className}-left-panel`),
         style: {
           height
         },
@@ -162,7 +163,7 @@ export const ProHelpPanel = ({
             }
           },
           children: /*#__PURE__*/_jsx(Menu, {
-            className: `${hashId} ${className}-left-panel-menu`,
+            className: clsx(hashId, `${className}-left-panel-menu`),
             openKeys: [parentKey, openKey],
             onOpenChange: keys => {
               setOpenKey(keys.at(-1) || '');
@@ -189,17 +190,17 @@ export const ProHelpPanel = ({
           })
         })
       }) : null, /*#__PURE__*/_jsxs("div", {
-        className: `${hashId} ${className}-content-panel`,
+        className: clsx(hashId, `${className}-content-panel`),
         style: {
           height
         },
         children: [selectedKey ? /*#__PURE__*/_jsx(ProHelpContentPanel, {
           parentItem: dataSourceKeyMap.get(parentKey),
-          className: `${className}-content-render`,
+          className: clsx(`${className}-content-render`, hashId),
           selectedKey: selectedKey,
           onScroll: key => setSelectedKey(key)
         }) : null, footer ? /*#__PURE__*/_jsx("div", {
-          className: `${hashId} ${className}-footer`,
+          className: clsx(hashId, `${className}-footer`),
           children: footer
         }) : null]
       })]

package/es/layout/components/PageContainer/index.js

@@ -36,7 +36,7 @@ const renderFooter = ({
 }) => {
   if (Array.isArray(tabList) || tabBarExtraContent) {
     return /*#__PURE__*/_jsx(Tabs, {
-      className: `${prefixedClassName}-tabs ${hashId}`.trim(),
+      className: clsx(`${prefixedClassName}-tabs`, hashId),
       activeKey: tabActiveKey,
       onChange: key => {
         if (onTabChange) {
@@ -59,16 +59,16 @@ const renderPageHeader = (content, extraContent, prefixedClassName, hashId) => {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: `${prefixedClassName}-detail ${hashId}`.trim(),
+    className: clsx(`${prefixedClassName}-detail`, hashId),
     children: /*#__PURE__*/_jsx("div", {
-      className: `${prefixedClassName}-main ${hashId}`.trim(),
+      className: clsx(`${prefixedClassName}-main`, hashId),
       children: /*#__PURE__*/_jsxs("div", {
-        className: `${prefixedClassName}-row ${hashId}`.trim(),
+        className: clsx(`${prefixedClassName}-row`, hashId),
         children: [content && /*#__PURE__*/_jsx("div", {
-          className: `${prefixedClassName}-content ${hashId}`.trim(),
+          className: clsx(`${prefixedClassName}-content`, hashId),
           children: content
         }), extraContent && /*#__PURE__*/_jsx("div", {
-          className: `${prefixedClassName}-extraContent ${hashId}`.trim(),
+          className: clsx(`${prefixedClassName}-extraContent`, hashId),
           children: extraContent
         })]
       })
@@ -155,7 +155,7 @@ const memoRenderPageHeader = props => {
   }
   return /*#__PURE__*/_jsx(PageHeader, {
     ...pageHeaderProps,
-    className: `${prefixedClassName}-warp-page-header ${hashId}`.trim(),
+    className: clsx(`${prefixedClassName}-warp-page-header`, hashId),
     breadcrumb: breadcrumbRender === false ? undefined : {
       ...pageHeaderProps.breadcrumb,
       ...value.breadcrumbProps
@@ -190,7 +190,6 @@ const PageContainerBase = props => {
     return () => {
       value?.setHasPageContainer?.(num => num - 1);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const {
     token
@@ -277,9 +276,9 @@ const PageContainerBase = props => {
       _jsx(Affix, {
         offsetTop: value.hasHeader && value.fixedHeader ? token.layout?.header?.heightLayoutHeader : 1,
         ...affixProps,
-        className: `${basePageContainer}-affix ${hashId}`.trim(),
+        className: clsx(`${basePageContainer}-affix`, hashId),
         children: /*#__PURE__*/_jsx("div", {
-          className: `${basePageContainer}-warp ${hashId}`.trim(),
+          className: clsx(`${basePageContainer}-warp`, hashId),
           children: pageHeaderDom
         })
       }) : pageHeaderDom, renderContentDom && /*#__PURE__*/_jsx(GridContent, {

package/es/layout/components/PageContainer/style/index.js

@@ -3,6 +3,10 @@ const [sm, md, lg, xl] = [576, 768, 992, 1200].map(bp => `@media (max-width: ${b
 const genPageContainerStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       position: 'relative',
       '&-children-container': {
         paddingBlockStart: 0,