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

package/lib/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/lib/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/lib/form/layouts/QueryFilter/Actions.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _utils = require("../../../utils");
@@ -59,7 +60,7 @@ const Actions = props => {
     style: style,
     size: 16,
     children: [submitter, props.collapseRender !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-      className: `${getPrefixCls('pro-query-filter-collapse-button')} ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(getPrefixCls('pro-query-filter-collapse-button'), hashId),
       onClick: () => setCollapsed(!collapsed),
       children: collapseRender?.(collapsed, props, intl, hiddenNum)
     })]

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

@@ -17,20 +17,28 @@ var _BaseForm = require("../../BaseForm");
 var _Actions = _interopRequireDefault(require("./Actions"));
 var _style = require("./style");
 var _jsxRuntime = require("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 = _antd.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']]
+    }
+  };
 };
 
 /**
@@ -38,16 +46,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 {
@@ -206,12 +219,12 @@ const QueryFilterContent = props => {
     if (split && currentSpan % 24 === 0 && index < itemLength - 1) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
         span: colSpan,
-        className: `${props.baseClassName}-row-split-line ${props.baseClassName}-row-split ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${props.baseClassName}-row-split-line`, `${props.baseClassName}-row-split`, hashId),
         children: itemDom
       }, itemKey);
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
-      className: `${props.baseClassName}-row-split ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${props.baseClassName}-row-split`, hashId),
       span: colSpan,
       children: itemDom
     }, itemKey);
@@ -250,7 +263,7 @@ const QueryFilterContent = props => {
         label: " ",
         colon: false,
         shouldUpdate: false,
-        className: `${baseClassName}-actions ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${baseClassName}-actions`, hashId),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.default, {
           hiddenNum: hiddenNum,
           collapsed: collapsed,
@@ -293,8 +306,12 @@ function QueryFilter(props) {
     wrapSSR,
     hashId
   } = (0, _style.useStyle)(baseClassName);
+  const {
+    token
+  } = _antd.theme.useToken();
   const [width, setWidth] = (0, _react.useState)(() => typeof style?.width === 'number' ? style?.width : defaultWidth);
-  const spanSize = (0, _react.useMemo)(() => getSpanConfig(layout, width + 16, span), [layout, width, span]);
+  const breakpointsConfig = (0, _react.useMemo)(() => getBreakpointsConfig(token), [token.screenSMMin, token.screenMDMin, token.screenLGMin, token.screenXLMin, token.screenXXLMin]);
+  const spanSize = (0, _react.useMemo)(() => getSpanConfig(layout, width + 16, span, breakpointsConfig), [layout, width, span, breakpointsConfig]);
   const showLength = (0, _react.useMemo)(() => {
     if (defaultFormItemsNumber !== undefined) {
       return defaultFormItemsNumber;
@@ -334,7 +351,7 @@ function QueryFilter(props) {
     },
     children: ref => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: ref,
-      className: `${baseClassName}-container ${hashId}`,
+      className: (0, _clsx.clsx)(`${baseClassName}-container`, hashId),
       style: props.containerStyle,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseForm.BaseForm, {
         isKeyPressSubmit: true,

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

@@ -216,7 +216,7 @@ function StepsForm(props) {
       })
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${prefixCls}-steps-container ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-steps-container`, hashId),
       style: {
         maxWidth: Math.min(formArray.length * 320, 1160)
       },
@@ -345,7 +345,7 @@ function StepsForm(props) {
     return stepsDom;
   }, [formArray, stepsDom, stepsRender]);
   const formContainer = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: `${prefixCls}-container ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixCls}-container`, hashId),
     style: containerStyle,
     children: [formDom, stepsFormRender ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
       children: submitterDom

package/lib/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/lib/layout/ProLayout.js

@@ -495,7 +495,7 @@ const BaseProLayout = props => {
           children: siderMenuDom
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           style: genLayoutStyle,
-          className: `${proLayoutClassName}-container ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${proLayoutClassName}-container`, hashId),
           children: [headerDom, /*#__PURE__*/(0, _jsxRuntime.jsx)(_WrapContent.WrapContent, {
             hasPageContainer: hasPageContainer,
             isChildrenLayout: isChildrenLayout,

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultContent = void 0;
+var _clsx = require("clsx");
 var _react = _interopRequireDefault(require("react"));
 var _index = require("./index");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -16,15 +17,15 @@ const DefaultContent = props => {
     itemClick
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${baseClassName}-content ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${baseClassName}-content`, hashId),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      className: `${baseClassName}-content-list ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-content-list`, hashId),
       children: appList?.map((app, index) => {
         if (app?.children?.length) {
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: `${baseClassName}-content-list-item-group ${hashId}`.trim(),
+            className: (0, _clsx.clsx)(`${baseClassName}-content-list-item-group`, hashId),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: `${baseClassName}-content-list-item-group-title ${hashId}`.trim(),
+              className: (0, _clsx.clsx)(`${baseClassName}-content-list-item-group-title`, hashId),
               children: app.title
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultContent, {
               hashId: hashId,
@@ -35,7 +36,7 @@ const DefaultContent = props => {
           }, index);
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          className: `${baseClassName}-content-list-item ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-content-list-item`, hashId),
           onClick: e => {
             e.stopPropagation();
             itemClick?.(app);

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderLogo = exports.SimpleContent = void 0;
+var _clsx = require("clsx");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("../../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -49,15 +50,15 @@ const SimpleContent = props => {
     itemClick
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${baseClassName}-content ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${baseClassName}-content`, hashId),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      className: `${baseClassName}-content-list ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-content-list`, hashId),
       children: appList?.map((app, index) => {
         if (app?.children?.length) {
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: `${baseClassName}-content-list-item-group ${hashId}`.trim(),
+            className: (0, _clsx.clsx)(`${baseClassName}-content-list-item-group`, hashId),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: `${baseClassName}-content-list-item-group-title ${hashId}`.trim(),
+              className: (0, _clsx.clsx)(`${baseClassName}-content-list-item-group-title`, hashId),
               children: app.title
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SimpleContent, {
               hashId: hashId,
@@ -68,7 +69,7 @@ const SimpleContent = props => {
           }, index);
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          className: `${baseClassName}-content-list-item ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-content-list-item`, hashId),
           onClick: e => {
             e.stopPropagation();
             itemClick?.(app);

package/lib/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/lib/layout/components/FooterToolbar/index.js

@@ -61,10 +61,10 @@ const FooterToolbar = props => {
   });
   const dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${baseClassName}-left ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-left`, hashId),
       children: extra
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${baseClassName}-right ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-right`, hashId),
       children: children
     })]
   });

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

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

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

@@ -63,14 +63,14 @@ const ActionsContent = ({
     const doms = actionsRender && actionsRender?.(restParams);
     if (!doms && !avatarDom) return null;
     if (!Array.isArray(doms)) return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${prefixCls}-header-actions ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-header-actions`, hashId),
       children: [doms, avatarDom && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${prefixCls}-header-actions-avatar`, hashId),
         children: avatarDom
       })]
     }));
     return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${prefixCls}-header-actions ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-header-actions`, hashId),
       children: [doms.filter(Boolean).map((dom, index) => {
         let hideHover = false;
         // 如果配置了 hideHover 就不展示 hover 效果了
@@ -78,13 +78,13 @@ const ActionsContent = ({
           hideHover = !!dom?.props?.['aria-hidden'];
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx.clsx)(`${prefixCls}-header-actions-item ${hashId}`, {
+          className: (0, _clsx.clsx)(`${prefixCls}-header-actions-item`, hashId, {
             [`${prefixCls}-header-actions-hover`]: !hideHover
           }),
           children: dom
         }, index);
       }), avatarDom && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${prefixCls}-header-actions-avatar`, hashId),
         children: avatarDom
       })]
     }));
@@ -95,7 +95,7 @@ const ActionsContent = ({
   }, 160);
   const contentRender = rightActionsRender;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${prefixCls}-right-content ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixCls}-right-content`, hashId),
     style: {
       minWidth: rightSize,
       height: '100%'

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

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

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

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

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

@@ -8,6 +8,7 @@ exports.SelectKeyProvide = exports.ProHelpPanel = void 0;
 var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _HelpProvide = require("./HelpProvide");
@@ -82,7 +83,7 @@ const ProHelpPanel = ({
   const parentKey = (0, _react.useMemo)(() => dataSourceKeyMap.get(selectedKey)?.parentKey, [dataSourceKeyMap, selectedKey]);
   const defaultExtraActions = {
     collapsePanelAction: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${className}-actions-item ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${className}-actions-item`, hashId),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ProfileOutlined, {
         title: "collapse panel",
         onClick: () => {
@@ -91,8 +92,8 @@ const ProHelpPanel = ({
       })
     }),
     helpSelectAction: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.ProHelpSelect, {
-      iconClassName: `${className}-actions-item`,
-      className: `${hashId} ${className}-actions-input`,
+      iconClassName: (0, _clsx.clsx)(`${className}-actions-item`, hashId),
+      className: (0, _clsx.clsx)(hashId, `${className}-actions-input`),
       value: selectedKey,
       onChange: (value, item) => {
         setSelectedKey(value);
@@ -100,7 +101,7 @@ const ProHelpPanel = ({
       }
     }),
     closeAction: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${className}-actions-item ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${className}-actions-item`, hashId),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {
         title: "close panel",
         onClick: () => {
@@ -111,7 +112,7 @@ const ProHelpPanel = ({
   };
   const extraDomList = () => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${className}-actions ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${className}-actions`, hashId),
       children: extraRender ? extraRender(defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, defaultExtraActions.closeAction) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, onClose ? defaultExtraActions.closeAction : null]
       })
@@ -137,7 +138,7 @@ const ProHelpPanel = ({
       size: "small",
       extra: extraDomList(),
       children: [showLeftPanel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${hashId} ${className}-left-panel `,
+        className: (0, _clsx.clsx)(hashId, `${className}-left-panel`),
         style: {
           height
         },
@@ -167,7 +168,7 @@ const ProHelpPanel = ({
             }
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Menu, {
-            className: `${hashId} ${className}-left-panel-menu`,
+            className: (0, _clsx.clsx)(hashId, `${className}-left-panel-menu`),
             openKeys: [parentKey, openKey],
             onOpenChange: keys => {
               setOpenKey(keys.at(-1) || '');
@@ -194,17 +195,17 @@ const ProHelpPanel = ({
           })
         })
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${hashId} ${className}-content-panel`,
+        className: (0, _clsx.clsx)(hashId, `${className}-content-panel`),
         style: {
           height
         },
         children: [selectedKey ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProHelpContentPanel.ProHelpContentPanel, {
           parentItem: dataSourceKeyMap.get(parentKey),
-          className: `${className}-content-render`,
+          className: (0, _clsx.clsx)(`${className}-content-render`, hashId),
           selectedKey: selectedKey,
           onScroll: key => setSelectedKey(key)
         }) : null, footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${hashId} ${className}-footer`,
+          className: (0, _clsx.clsx)(hashId, `${className}-footer`),
           children: footer
         }) : null]
       })]

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

@@ -41,7 +41,7 @@ const renderFooter = ({
 }) => {
   if (Array.isArray(tabList) || tabBarExtraContent) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
-      className: `${prefixedClassName}-tabs ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixedClassName}-tabs`, hashId),
       activeKey: tabActiveKey,
       onChange: key => {
         if (onTabChange) {
@@ -64,16 +64,16 @@ const renderPageHeader = (content, extraContent, prefixedClassName, hashId) => {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${prefixedClassName}-detail ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixedClassName}-detail`, hashId),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${prefixedClassName}-main ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixedClassName}-main`, hashId),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${prefixedClassName}-row ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${prefixedClassName}-row`, hashId),
         children: [content && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${prefixedClassName}-content ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${prefixedClassName}-content`, hashId),
           children: content
         }), extraContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${prefixedClassName}-extraContent ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${prefixedClassName}-extraContent`, hashId),
           children: extraContent
         })]
       })
@@ -161,7 +161,7 @@ const memoRenderPageHeader = props => {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageHeader.PageHeader, {
     ...pageHeaderProps,
-    className: `${prefixedClassName}-warp-page-header ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixedClassName}-warp-page-header`, hashId),
     breadcrumb: breadcrumbRender === false ? undefined : {
       ...pageHeaderProps.breadcrumb,
       ...value.breadcrumbProps
@@ -282,9 +282,9 @@ const PageContainerBase = props => {
       (0, _jsxRuntime.jsx)(_antd.Affix, {
         offsetTop: value.hasHeader && value.fixedHeader ? token.layout?.header?.heightLayoutHeader : 1,
         ...affixProps,
-        className: `${basePageContainer}-affix ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${basePageContainer}-affix`, hashId),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${basePageContainer}-warp ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${basePageContainer}-warp`, hashId),
           children: pageHeaderDom
         })
       }) : pageHeaderDom, renderContentDom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContent.GridContent, {

package/lib/layout/components/PageHeader/index.js

@@ -17,13 +17,13 @@ const renderBack = (prefixCls, hashId, backIcon, onBack) => {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${prefixCls}-back ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixCls}-back`, hashId),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "button",
       onClick: e => {
         onBack?.(e);
       },
-      className: `${prefixCls}-back-button ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-back-button`, hashId),
       "aria-label": "back",
       children: backIcon
     })
@@ -61,26 +61,26 @@ const renderTitle = (prefixCls, props, direction = 'ltr', hashId) => {
   const backIconDom = renderBack(prefixCls, hashId, backIcon, onBack);
   const hasTitle = backIconDom || avatar || hasHeading;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: headingPrefixCls + ' ' + hashId,
+    className: (0, _clsx.clsx)(headingPrefixCls, hashId),
     children: [hasTitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${headingPrefixCls}-left ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${headingPrefixCls}-left`, hashId),
       children: [backIconDom, avatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, {
         className: (0, _clsx.clsx)(`${headingPrefixCls}-avatar`, hashId, avatar.className),
         ...avatar
       }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${headingPrefixCls}-title ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${headingPrefixCls}-title`, hashId),
         title: typeof title === 'string' ? title : undefined,
         children: title
       }), subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${headingPrefixCls}-sub-title ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${headingPrefixCls}-sub-title`, hashId),
         title: typeof subTitle === 'string' ? subTitle : undefined,
         children: subTitle
       }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${headingPrefixCls}-tags ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${headingPrefixCls}-tags`, hashId),
         children: tags
       })]
     }), extra && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: `${headingPrefixCls}-extra ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${headingPrefixCls}-extra`, hashId),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
         children: extra
       })
@@ -90,14 +90,14 @@ const renderTitle = (prefixCls, props, direction = 'ltr', hashId) => {
 const renderFooter = (prefixCls, footer, hashId) => {
   if (footer) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${prefixCls}-footer ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-footer`, hashId),
       children: footer
     });
   }
   return null;
 };
 const renderChildren = (prefixCls, children, hashId) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-  className: `${prefixCls}-content ${hashId}`.trim(),
+  className: (0, _clsx.clsx)(`${prefixCls}-content`, hashId),
   children: children
 });
 const PageHeader = props => {

package/lib/layout/components/SettingDrawer/BlockCheckbox.js

@@ -25,12 +25,12 @@ const BlockCheckbox = ({
         className: (0, _clsx.clsx)(hashId, `${baseClassName}-item`, `${baseClassName}-item-${item.key}`, `${baseClassName}-${configType}-item`),
         onClick: () => onChange(item.key),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {
-          className: `${baseClassName}-selectIcon ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-selectIcon`, hashId),
           style: {
             display: value === item.key ? 'block' : 'none'
           }
         }), item?.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${baseClassName}-icon ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-icon`, hashId),
           children: item.icon
         }) : null]
       })

package/lib/layout/components/SettingDrawer/LayoutChange.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderLayoutSettingItem = exports.LayoutSetting = void 0;
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = _interopRequireDefault(require("react"));
 var _defaultSettings = require("../../defaultSettings");
 var _index = require("./index");
@@ -44,7 +45,7 @@ const LayoutSetting = ({
     fixSiderbar
   } = settings || _defaultSettings.defaultSettings;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, {
-    className: `${prefixCls}-list ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixCls}-list`, hashId),
     split: false,
     dataSource: [{
       title: formatMessage({
@@ -54,7 +55,7 @@ const LayoutSetting = ({
       action: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Select, {
         value: contentWidth || 'Fixed',
         size: "small",
-        className: `content-width ${hashId}`.trim(),
+        className: (0, _clsx.clsx)('content-width', hashId),
         onSelect: value => {
           changeSetting('contentWidth', value);
         },