@ant-design/pro-components 3.1.4-0 → 3.1.6-0

package/es/form/layouts/ModalForm/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { FormProps, ModalProps } from 'antd';
+import React from 'react';
 import type { CommonFormProps } from '../../BaseForm';
 export type ModalFormProps<T = Record<string, any>, U = Record<string, any>> = Omit<FormProps<T>, 'onFinish' | 'title'> & CommonFormProps<T, U> & {
     /**
@@ -17,7 +17,7 @@ export type ModalFormProps<T = Record<string, any>, U = Record<string, any>> = O
     /** @name 提交数据时，禁用取消按钮的超时时间（毫秒）。 */
     submitTimeout?: number;
     /** @name 用于触发抽屉打开的 dom */
-    trigger?: JSX.Element;
+    trigger?: React.JSX.Element;
     /** @name 受控的打开关闭 */
     open?: ModalProps['open'];
     /** @name 打开关闭的事件 */

package/es/form/layouts/ProForm/index.d.ts

@@ -9,7 +9,7 @@ declare namespace ProForm {
     var Group: React.FC<import("src/form").GroupProps>;
     var useForm: typeof import("antd/es/form/Form").useForm;
     var Item: React.FC<import("src/form/components/FormItem").ProFormItemProps>;
-    var useWatch: typeof import("antd/es/form/Form").useWatch;
+    var useWatch: typeof import("@rc-component/form").useWatch;
     var ErrorList: React.FC<import("antd/es/form").ErrorListProps>;
     var Provider: React.FC<import("antd/es/form/context").FormProviderProps>;
     var useFormInstance: typeof import("antd/es/form/hooks/useFormInstance").default;

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,6 +1,6 @@
 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";
@@ -10,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']]
+    }
+  };
 };
 
 /**
@@ -31,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 {
@@ -199,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);
@@ -243,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,
@@ -286,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;
@@ -327,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/index.js

@@ -208,7 +208,7 @@ function StepsForm(props) {
       })
     };
     return /*#__PURE__*/_jsx("div", {
-      className: `${prefixCls}-steps-container ${hashId}`.trim(),
+      className: clsx(`${prefixCls}-steps-container`, hashId),
       style: {
         maxWidth: Math.min(formArray.length * 320, 1160)
       },
@@ -337,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

@@ -46,11 +46,11 @@ export type ProLayoutProps = GlobalTypes & {
      * @name logo 的配置，可以配置url，React 组件 和 false
      *
      * @example 设置 logo 为网络地址  logo="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"
-     * @example 设置 logo 为组件  logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/>}
+     * @example 设置 logo 为组件  logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4" alt="" />}
      * @example 设置 logo 为 false 不显示 logo  logo={false}
-     * @example 设置 logo 为 方法  logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> }
+     * @example 设置 logo 为 方法  logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4" alt="" /> }
      * */
-    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

@@ -164,7 +164,7 @@ const BaseProLayout = props => {
   }, [props.layout, propsSiderWidth]);
   const context = useContext(ConfigProvider.ConfigContext);
   const prefixCls = props.prefixCls ?? context.getPrefixCls('pro');
-  const [menuLoading, setMenuLoadingInner] = useControlledState(false, menu?.loading);
+  const [menuLoadingState, _setMenuLoadingInner] = useControlledState(false, menu?.loading);
 
   /**
    * 使用 useRefFunction 包装回调，确保引用稳定
@@ -173,20 +173,6 @@ const BaseProLayout = props => {
     menu?.onLoadingChange?.(loading);
   });
 
-  /**
-   * 包装 setMenuLoading，使用 queueMicrotask 延迟回调调用
-   * 避免在渲染阶段调用外部回调导致的 React 警告
-   */
-  const setMenuLoading = useCallback(updater => {
-    setMenuLoadingInner(prev => {
-      const next = typeof updater === 'function' ? updater(prev) : updater;
-      queueMicrotask(() => {
-        menuOnLoadingChange(next);
-      });
-      return next;
-    });
-  }, [menuOnLoadingChange]);
-
   // give a default key for swr
   const [defaultId] = useState(() => {
     layoutIndex += 1;
@@ -216,20 +202,21 @@ const BaseProLayout = props => {
   const {
     data,
     mutate,
-    isLoading
+    isValidating
   } = useSWR([defaultId, menu?.params], async ([, params]) => {
-    setMenuLoading(true);
-    const menuDataItems = await menu?.request?.(params || {}, route?.children || route?.routes || []);
-    setMenuLoading(false);
-    return menuDataItems;
+    menuOnLoadingChange(true);
+    try {
+      const menuDataItems = await menu?.request?.(params || {}, route?.children || route?.routes || []);
+      return menuDataItems;
+    } finally {
+      menuOnLoadingChange(false);
+    }
   }, {
     revalidateOnFocus: false,
     shouldRetryOnError: false,
     revalidateOnReconnect: false
   });
-  useEffect(() => {
-    setMenuLoading(isLoading);
-  }, [isLoading]);
+  const menuLoading = menu?.loading ?? (menu?.request ? isValidating : menuLoadingState);
   const {
     cache
   } = useSWRConfig();
@@ -414,11 +401,12 @@ const BaseProLayout = props => {
       return bgLayoutImgList?.map((item, index) => {
         return /*#__PURE__*/_jsx("img", {
           src: item.src,
+          alt: "",
           style: {
             position: 'absolute',
             ...item
           }
-        }, index);
+        }, item.src ?? `bg-layout-${index}`);
       });
     }
     return null;
@@ -490,7 +478,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/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

@@ -56,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
     })]
   });

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%'

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/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
@@ -276,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, {