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

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

@@ -55,14 +55,15 @@ function LoginFormPage(props) {
     wrapSSR,
     hashId
   } = (0, _style.useStyle)(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`.trim();
+  const getCls = className => `${baseClassName}-${className}`;
 
   /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
   const logoDom = (0, _react.useMemo)(() => {
     if (!logo) return null;
     if (typeof logo === 'string') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: logo
+        src: logo,
+        alt: ""
       });
     }
     return logo;
@@ -102,43 +103,43 @@ function LoginFormPage(props) {
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _clsx.clsx)(baseClassName, hashId),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getCls('notice'),
+        className: (0, _clsx.clsx)(getCls('notice'), hashId),
         children: activityConfig && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: getCls('notice-activity'),
+          className: (0, _clsx.clsx)(getCls('notice-activity'), hashId),
           style: activityConfig.style,
           children: [activityConfig.title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: getCls('notice-activity-title'),
+            className: (0, _clsx.clsx)(getCls('notice-activity-title'), hashId),
             children: activityConfig.title
           }), activityConfig.subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: getCls('notice-activity-subTitle'),
+            className: (0, _clsx.clsx)(getCls('notice-activity-subTitle'), hashId),
             children: activityConfig.subTitle
           }), activityConfig.action && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: getCls('notice-activity-action'),
+            className: (0, _clsx.clsx)(getCls('notice-activity-action'), hashId),
             children: activityConfig.action
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: getCls('left'),
+        className: (0, _clsx.clsx)(getCls('left'), hashId),
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: getCls('container'),
+          className: (0, _clsx.clsx)(getCls('container'), hashId),
           style: containerStyle,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: getCls('top'),
+            className: (0, _clsx.clsx)(getCls('top'), hashId),
             children: [title || logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: getCls('header'),
+              className: (0, _clsx.clsx)(getCls('header'), hashId),
               children: [logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: getCls('logo'),
+                className: (0, _clsx.clsx)(getCls('logo'), hashId),
                 children: logoDom
               }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: getCls('title'),
+                className: (0, _clsx.clsx)(getCls('title'), hashId),
                 children: title
               }) : null]
             }) : null, subTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: getCls('desc'),
+              className: (0, _clsx.clsx)(getCls('desc'), hashId),
               children: subTitle
             }) : null]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: getCls('main'),
+            className: (0, _clsx.clsx)(getCls('main'), hashId),
             style: mainStyle,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ProForm.ProForm, {
               isKeyPressSubmit: true,
@@ -146,7 +147,7 @@ function LoginFormPage(props) {
               submitter: submitter,
               children: [message, children]
             }), actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: getCls('other'),
+              className: (0, _clsx.clsx)(getCls('other'), hashId),
               style: otherStyle,
               children: actions
             }) : null]

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

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

@@ -169,7 +169,7 @@ const BaseProLayout = props => {
   }, [props.layout, propsSiderWidth]);
   const context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
   const prefixCls = props.prefixCls ?? context.getPrefixCls('pro');
-  const [menuLoading, setMenuLoadingInner] = (0, _util.useControlledState)(false, menu?.loading);
+  const [menuLoadingState, _setMenuLoadingInner] = (0, _util.useControlledState)(false, menu?.loading);
 
   /**
    * 使用 useRefFunction 包装回调，确保引用稳定
@@ -178,20 +178,6 @@ const BaseProLayout = props => {
     menu?.onLoadingChange?.(loading);
   });
 
-  /**
-   * 包装 setMenuLoading，使用 queueMicrotask 延迟回调调用
-   * 避免在渲染阶段调用外部回调导致的 React 警告
-   */
-  const setMenuLoading = (0, _react.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] = (0, _react.useState)(() => {
     layoutIndex += 1;
@@ -221,20 +207,21 @@ const BaseProLayout = props => {
   const {
     data,
     mutate,
-    isLoading
+    isValidating
   } = (0, _swr.default)([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
   });
-  (0, _react.useEffect)(() => {
-    setMenuLoading(isLoading);
-  }, [isLoading]);
+  const menuLoading = menu?.loading ?? (menu?.request ? isValidating : menuLoadingState);
   const {
     cache
   } = (0, _swr.useSWRConfig)();
@@ -419,11 +406,12 @@ const BaseProLayout = props => {
       return bgLayoutImgList?.map((item, index) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: item.src,
+          alt: "",
           style: {
             position: 'absolute',
             ...item
           }
-        }, index);
+        }, item.src ?? `bg-layout-${index}`);
       });
     }
     return null;
@@ -495,7 +483,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]
       })]