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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { List, Select, Switch, Tooltip } from 'antd';
+import { clsx } from 'clsx';
 import React from 'react';
 import { defaultSettings } from "../../defaultSettings";
 import { getFormatMessage } from "./index";
@@ -37,7 +38,7 @@ const LayoutSetting = ({
     fixSiderbar
   } = settings || defaultSettings;
   return /*#__PURE__*/_jsx(List, {
-    className: `${prefixCls}-list ${hashId}`.trim(),
+    className: clsx(`${prefixCls}-list`, hashId),
     split: false,
     dataSource: [{
       title: formatMessage({
@@ -47,7 +48,7 @@ const LayoutSetting = ({
       action: /*#__PURE__*/_jsxs(Select, {
         value: contentWidth || 'Fixed',
         size: "small",
-        className: `content-width ${hashId}`.trim(),
+        className: clsx('content-width', hashId),
         onSelect: value => {
           changeSetting('contentWidth', value);
         },

package/es/layout/components/SettingDrawer/RegionalChange.js

@@ -1,4 +1,5 @@
 import { List, Switch } from 'antd';
+import { clsx } from 'clsx';
 import React from 'react';
 import { getFormatMessage } from "./index";
 import { renderLayoutSettingItem } from "./LayoutChange";
@@ -12,7 +13,7 @@ const RegionalSetting = ({
   const formatMessage = getFormatMessage();
   const regionalSetting = ['header', 'footer', 'menu', 'menuHeader'];
   return /*#__PURE__*/_jsx(List, {
-    className: `${prefixCls}-list ${hashId}`.trim(),
+    className: clsx(`${prefixCls}-list`, hashId),
     split: false,
     renderItem: renderLayoutSettingItem,
     dataSource: regionalSetting.map(key => {
@@ -22,7 +23,7 @@ const RegionalSetting = ({
         }),
         action: /*#__PURE__*/_jsx(Switch, {
           size: "small",
-          className: `regional-${key} ${hashId}`.trim(),
+          className: clsx(`regional-${key}`, hashId),
           checked: settings[`${key}Render`] || settings[`${key}Render`] === undefined,
           onChange: checked => changeSetting(`${key}Render`, checked === true ? undefined : false)
         })

package/es/layout/components/SettingDrawer/ThemeColor.js

@@ -1,5 +1,6 @@
 import { CheckOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
+import { clsx } from 'clsx';
 import React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Tag = /*#__PURE__*/React.forwardRef(({
@@ -27,7 +28,7 @@ const ThemeColor = ({
   }
   const baseClassName = `${prefixCls}-theme-color`;
   return /*#__PURE__*/_jsx("div", {
-    className: `${baseClassName} ${hashId}`.trim(),
+    className: clsx(baseClassName, hashId),
     children: colorList?.map(({
       key,
       color,
@@ -39,7 +40,7 @@ const ThemeColor = ({
           id: `app.setting.themecolor.${key}`
         }),
         children: /*#__PURE__*/_jsx(Tag, {
-          className: `${baseClassName}-block ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-block`, hashId),
           color: color,
           check: value === color,
           onClick: () => onChange && onChange(color)

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

@@ -2,6 +2,7 @@ import { CloseOutlined, CopyOutlined, NotificationOutlined, SettingOutlined } fr
 import { omit, useControlledState } from '@rc-component/util';
 import { useUrlSearchParams } from '@umijs/use-params';
 import { Alert, Button, Divider, Drawer, List, Switch, message } from 'antd';
+import { clsx } from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { isBrowser, merge, useRefFunction } from "../../../utils";
 import { defaultSettings } from "../../defaultSettings";
@@ -27,7 +28,7 @@ const Body = ({
     marginBlockEnd: 12
   },
   children: [/*#__PURE__*/_jsx("h3", {
-    className: `${prefixCls}-body-title ${hashId}`.trim(),
+    className: clsx(`${prefixCls}-body-title`, hashId),
     children: title
   }), children]
 });
@@ -288,7 +289,7 @@ export const SettingDrawer = props => {
   } = useStyle(baseClassName);
   return wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      className: `${baseClassName}-handle ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-handle`, hashId),
       onClick: () => setOpen(!open),
       style: {
         width: 48,
@@ -317,7 +318,7 @@ export const SettingDrawer = props => {
       },
       ...drawerProps,
       children: /*#__PURE__*/_jsxs("div", {
-        className: `${baseClassName}-drawer-content ${hashId}`.trim(),
+        className: clsx(`${baseClassName}-drawer-content`, hashId),
         children: [/*#__PURE__*/_jsx(Body, {
           title: formatMessage({
             id: 'app.setting.pagestyle',
@@ -444,7 +445,7 @@ export const SettingDrawer = props => {
               id: 'app.setting.othersettings'
             }),
             children: /*#__PURE__*/_jsx(List, {
-              className: `${baseClassName}-list ${hashId}`.trim(),
+              className: clsx(`${baseClassName}-list`, hashId),
               split: false,
               size: "small",
               renderItem: renderLayoutSettingItem,

package/es/layout/components/SiderMenu/BaseMenu.js

@@ -107,7 +107,7 @@ class MenuUtil {
           [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
         }),
         children: [menuType === 'group' && collapsed ? null : shouldHasIcon && iconDom ? /*#__PURE__*/_jsx("span", {
-          className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
+          className: clsx(`${baseClassName}-item-icon`, this.props?.hashId),
           children: iconDom
         }) : defaultIcon, /*#__PURE__*/_jsx("span", {
           className: clsx(`${baseClassName}-item-text`, this.props?.hashId, {
@@ -221,7 +221,7 @@ class MenuUtil {
         [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
       }),
       children: [/*#__PURE__*/_jsx("span", {
-        className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
+        className: clsx(`${baseClassName}-item-icon`, this.props?.hashId),
         style: {
           display: defaultIcon === null && !icon ? 'none' : ''
         },
@@ -251,7 +251,7 @@ class MenuUtil {
           [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
         }),
         children: [/*#__PURE__*/_jsx("span", {
-          className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
+          className: clsx(`${baseClassName}-item-icon`, this.props?.hashId),
           style: {
             display: defaultIcon === null && !icon ? 'none' : ''
           },

package/es/layout/components/SiderMenu/SiderMenu.js

@@ -125,7 +125,7 @@ const SiderMenu = props => {
     style: {
       width: '100%'
     },
-    className: `${baseClassName}-menu ${hashId}`.trim()
+    className: clsx(`${baseClassName}-menu`, hashId)
   }), [baseClassName, hashId, menuContentRender, onOpenChange, props]);
   const linksMenuItems = (links || []).map((node, index) => ({
     className: `${baseClassName}-link`,
@@ -165,7 +165,7 @@ const SiderMenu = props => {
       className: clsx([`${baseClassName}-actions-list`, collapsed && `${baseClassName}-actions-list-collapsed`, hashId]),
       children: [actionsRender?.(props)].flat(1).map((item, index) => {
         return /*#__PURE__*/_jsx("div", {
-          className: `${baseClassName}-actions-list-item ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-actions-list-item`, hashId),
           children: item
         }, index);
       })
@@ -233,10 +233,10 @@ const SiderMenu = props => {
     }), /*#__PURE__*/_jsxs(SiderContext.Provider, {
       value: {},
       children: [links ? /*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}-links ${hashId}`.trim(),
+        className: clsx(`${baseClassName}-links`, hashId),
         children: /*#__PURE__*/_jsx(Menu, {
           inlineIndent: 16,
-          className: `${baseClassName}-link-menu ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-link-menu`, hashId),
           selectedKeys: [],
           openKeys: [],
           theme: theme,
@@ -279,7 +279,7 @@ const SiderMenu = props => {
       width: siderWidth,
       className: clsx(siderClassName, hashId, hideMenuWhenCollapsedClassName),
       children: [hideMenuWhenCollapsedClassName ? /*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}-hide-when-collapsed ${hashId}`.trim(),
+        className: clsx(`${baseClassName}-hide-when-collapsed`, hashId),
         style: {
           height: '100%',
           width: '100%',

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

@@ -81,7 +81,7 @@ const TopNavHeader = props => {
       children: /*#__PURE__*/_jsx(BaseMenu, {
         theme: dark ? 'dark' : 'light',
         ...props,
-        className: `${prefixCls}-base-menu ${hashId}`.trim(),
+        className: clsx(`${prefixCls}-base-menu`, hashId),
         ...props.menuProps,
         style: {
           width: '100%',
@@ -113,7 +113,7 @@ const TopNavHeader = props => {
         children: [/*#__PURE__*/_jsx(AppsLogoComponents, {
           ...props
         }), /*#__PURE__*/_jsx("div", {
-          className: `${prefixCls}-logo ${hashId}`.trim(),
+          className: clsx(`${prefixCls}-logo`, hashId),
           id: "logo",
           children: headerDom
         }, "logo")]
@@ -121,7 +121,7 @@ const TopNavHeader = props => {
         style: {
           flex: 1
         },
-        className: `${prefixCls}-menu ${hashId}`.trim(),
+        className: clsx(`${prefixCls}-menu`, hashId),
         children: contentDom
       }), (actionsRender || props.avatarProps) && /*#__PURE__*/_jsx(ActionsContent, {
         ...props,

package/es/layout/utils/getBreadcrumbProps.js

@@ -42,7 +42,7 @@ export const getBreadcrumb = (breadcrumbMap, url) => {
       try {
         if (path?.startsWith('http')) return false;
         return match(path.replace('?', ''))(url);
-      } catch (error) {
+      } catch (_error) {
         return false;
       }
     }

package/es/list/Item.d.ts

@@ -6,7 +6,7 @@ import type { ListGridType } from './ProListBase';
 export type RenderExpandIconProps<RecordType> = {
     prefixCls: string;
     expanded: boolean;
-    expandIcon: React.ReactNode | JSX.Element | ((props: {
+    expandIcon: React.ReactNode | React.JSX.Element | ((props: {
         onExpand: (expanded: boolean) => void;
         expanded: boolean;
         record: RecordType;
@@ -48,8 +48,8 @@ export type ItemProps<RecordType> = {
     record: RecordType;
     onRow?: GetComponentProps<RecordType>;
     onItem?: GetComponentProps<RecordType>;
-    itemHeaderRender?: ((item: RecordType, index: number, defaultDom: JSX.Element | null) => React.ReactNode) | false;
-    itemTitleRender?: ((item: RecordType, index: number, defaultDom: JSX.Element | null) => React.ReactNode) | false;
+    itemHeaderRender?: ((item: RecordType, index: number, defaultDom: React.JSX.Element | null) => React.ReactNode) | false;
+    itemTitleRender?: ((item: RecordType, index: number, defaultDom: React.JSX.Element | null) => React.ReactNode) | false;
 };
 declare function ProListItem<RecordType>(props: ItemProps<RecordType>): import("react/jsx-runtime").JSX.Element;
 export default ProListItem;

package/es/list/Item.js

@@ -220,7 +220,14 @@ function ProListItem(props) {
             expanded,
             record
           })]
-        }), headerDom, actionsArray]
+        }), headerDom, actionsArray && actionsArray.length > 0 ? /*#__PURE__*/_jsx("div", {
+          className: clsx(`${prefixCls}-item-action`, hashId),
+          onClick: e => e.stopPropagation(),
+          children: actionsArray.map((action, i) => /*#__PURE__*/_jsx("div", {
+            className: clsx(`${prefixCls}-item-action-item`, hashId),
+            children: action
+          }, i))
+        }) : null]
       }), needExpanded && (content || expandedRowDom) && /*#__PURE__*/_jsxs("div", {
         className: clsx(`${className}-content`, hashId),
         children: [content, expandedRowRender && rowSupportExpand && /*#__PURE__*/_jsx("div", {

package/es/list/ListView.js

@@ -59,8 +59,7 @@ function ListView(props) {
       current = 1,
       pageSize = 10
     } = mergedPagination;
-    const currentPageData = dataSource.slice((current - 1) * pageSize, current * pageSize);
-    return currentPageData;
+    return dataSource.slice((current - 1) * pageSize, current * pageSize);
   }, [dataSource, mergedPagination, pagination]);
   const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
 

package/es/list/ProListBase.d.ts

@@ -35,7 +35,7 @@ export interface ListProps<T = any> {
     pagination?: PaginationConfig | false;
     prefixCls?: string;
     rowKey?: ((item: T) => React.Key) | keyof T;
-    renderItem?: (item: T, index: number, defaultDom: JSX.Element | null) => React.ReactNode;
+    renderItem?: (item: T, index: number, defaultDom: React.JSX.Element | null) => React.ReactNode;
     size?: ListSize;
     split?: boolean;
     header?: React.ReactNode;

package/es/list/ProListBase.js

@@ -2,10 +2,9 @@
  * 内部 List 容器与 List.Item / List.Item.Meta 实现，用于替代 antd List（antd List 已停止维护）
  * 保持与 antd List 相同的 DOM 结构及类名，以便复用 antd 的 list 样式
  */
-import { ConfigProvider, Empty, Pagination } from 'antd';
+import { ConfigProvider, Empty, Grid, Pagination, Spin } from 'antd';
 import { clsx } from 'clsx';
 import React, { useContext, useMemo } from 'react';
-import { useBreakpoint } from "../utils/useMediaQuery";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -179,29 +178,41 @@ const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListCont
       children: renderItem(item, index, null)
     }, key);
   };
-  const breakpoint = useBreakpoint();
+  const rawScreens = Grid.useBreakpoint();
+  const defaultScreens = {
+    xs: true,
+    sm: true,
+    md: true,
+    lg: false,
+    xl: false,
+    xxl: false
+  };
+  const screens = useMemo(() => {
+    if (rawScreens == null) return defaultScreens;
+    return {
+      xxl: rawScreens.xxl ?? defaultScreens.xxl,
+      xl: rawScreens.xl ?? defaultScreens.xl,
+      lg: rawScreens.lg ?? defaultScreens.lg,
+      md: rawScreens.md ?? defaultScreens.md,
+      sm: rawScreens.sm ?? defaultScreens.sm,
+      xs: rawScreens.xs ?? defaultScreens.xs
+    };
+  }, [rawScreens]);
 
   /**
-   * 根据当前断点获取列数
+   * 根据当前断点获取列数，与 antd Grid/Card 响应式逻辑一致
    */
   const getResponsiveColumn = useMemo(() => {
     if (!grid) return 1;
-    const breakpoints = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-    const currentBreakpoint = breakpoint || 'md';
-    const startIndex = breakpoints.indexOf(currentBreakpoint);
-
-    // 从当前断点开始，向下查找第一个已定义的列数
-    for (let i = startIndex; i < breakpoints.length; i++) {
-      const bp = breakpoints[i];
-      const colCount = grid[bp];
-      if (colCount !== undefined) {
-        return colCount;
+    const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+    for (let i = 0; i < responsiveArray.length; i += 1) {
+      const breakpoint = responsiveArray[i];
+      if (screens[breakpoint] && grid[breakpoint] !== undefined) {
+        return grid[breakpoint];
       }
     }
-
-    // 最后使用 column 默认值，确保不为 0（避免除以零）
     return grid.column || 1;
-  }, [grid, breakpoint]);
+  }, [grid, screens]);
 
   /**
    * 计算 grid 容器样式（flex 布局）
@@ -274,24 +285,15 @@ const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListCont
         style: colStyle,
         children: child
       }, child?.key ?? idx))
-    }) : /*#__PURE__*/_jsx("ul", {
-      className: `${prefixCls}-items`,
-      children: items
-    });
-  } else if (!children && !isLoading) {
+    }) : items;
+  } else if (!children) {
     const emptyContent = locale?.emptyText ?? (typeof renderEmpty === 'function' ? renderEmpty('List') : null) ?? /*#__PURE__*/_jsx(Empty, {
-      description: "\u6682\u65E0\u6570\u636E"
+      image: Empty.PRESENTED_IMAGE_SIMPLE
     });
     childrenContent = /*#__PURE__*/_jsx("div", {
       className: `${prefixCls}-empty-text`,
       children: emptyContent
     });
-  } else if (isLoading) {
-    childrenContent = /*#__PURE__*/_jsx("div", {
-      style: {
-        minHeight: 53
-      }
-    });
   } else {
     childrenContent = children;
   }
@@ -331,18 +333,22 @@ const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListCont
   }, propHashId, className, rootClassName);
   return /*#__PURE__*/_jsx(ProListContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsx("div", {
       ref: ref,
       style: style,
       className: classString,
       ...rest,
-      children: [showPaginationTop && paginationNode, header && /*#__PURE__*/_jsx("div", {
-        className: `${prefixCls}-header`,
-        children: header
-      }), childrenContent, children, footer && /*#__PURE__*/_jsx("div", {
-        className: `${prefixCls}-footer`,
-        children: footer
-      }), loadMore, showPaginationBottom && paginationNode]
+      children: /*#__PURE__*/_jsxs(Spin, {
+        spinning: isLoading,
+        delay: 100,
+        children: [showPaginationTop && paginationNode, header && /*#__PURE__*/_jsx("div", {
+          className: `${prefixCls}-header`,
+          children: header
+        }), childrenContent, footer && /*#__PURE__*/_jsx("div", {
+          className: `${prefixCls}-footer`,
+          children: footer
+        }), loadMore, showPaginationBottom && paginationNode]
+      })
     })
   });
 });

package/es/list/style/index.js

@@ -20,6 +20,16 @@ const genProListStyle = token => {
         boxSizing: 'border-box'
       },
       backgroundColor: 'transparent',
+      // 确保链接使用默认链接颜色，不被父元素的文本颜色覆盖
+      a: {
+        color: token.colorLink,
+        '&:hover': {
+          color: token.colorLinkHover
+        },
+        '&:active': {
+          color: token.colorLinkActive
+        }
+      },
       [`${token.proComponentsCls}-table-alert`]: {
         marginBlockEnd: token.margin
       },
@@ -323,6 +333,9 @@ const genProListStyle = token => {
           justifyContent: 'flex-start',
           width: '100%',
           minWidth: 0,
+          [`${token.proComponentsCls}-list-item-action`]: {
+            alignSelf: 'center'
+          },
           h4: {
             margin: 0,
             padding: 0,

package/es/provider/index.d.ts

@@ -75,7 +75,7 @@ export type ProRenderFieldPropsType = {
      * @params dom 默认的 dom
      * @return 返回一个用于读的 dom
      */
-    render?: ((text: any, props: Omit<ProFieldFCRenderProps, 'value' | 'onChange'>, dom: JSX.Element) => JSX.Element) | undefined;
+    render?: ((text: any, props: Omit<ProFieldFCRenderProps, 'value' | 'onChange'>, dom: React.JSX.Element) => React.JSX.Element) | undefined;
     /**
      * 一个自定义的编辑渲染器。
      * @params text 默认的值类型
@@ -83,7 +83,7 @@ export type ProRenderFieldPropsType = {
      * @params dom 默认的 dom
      * @return 返回一个用于编辑的dom
      */
-    formItemRender?: ((text: any, props: ProFieldFCRenderProps, dom: JSX.Element) => JSX.Element) | undefined;
+    formItemRender?: ((text: any, props: ProFieldFCRenderProps, dom: React.JSX.Element) => React.JSX.Element) | undefined;
 };
 export type ParamsType = Record<string, any>;
 /**

package/es/table/Table.js

@@ -716,19 +716,28 @@ const ProTable = props => {
     hideToolbar,
     toolbarDom
   });
-  const tableAreaDom = cardProps === false || notNeedCardDom || !!props.name ? tableContentDom : /*#__PURE__*/_jsx(ProCard, {
+
+  /** ProTable：有搜索/工具栏/标题时使用卡片包裹；可编辑表格（name）不包裹 */
+  /** ProList：始终使用卡片包裹（除非 cardProps 为 false） */
+  const useCard = useMemo(() => {
+    const useCardForTable = cardProps !== false && !props.name && !notNeedCardDom;
+    const useCardForList = cardProps !== false && type === 'list';
+    return useCardForTable || useCardForList;
+  }, [cardProps, props.name, type, notNeedCardDom]);
+  const resolvedCardProps = cardProps === false ? {} : cardProps ?? {};
+  const tableAreaDom = useCard ? /*#__PURE__*/_jsx(ProCard, {
+    ...resolvedCardProps,
     ghost: ghost,
     variant: isBordered('table', cardBordered) ? 'outlined' : 'borderless',
     styles: {
       body: {
         ...cardBodyStyle,
-        ...(cardProps?.styles?.body ?? {})
+        ...(resolvedCardProps.styles?.body ?? {})
       },
-      header: cardProps?.styles?.header
+      header: resolvedCardProps.styles?.header
     },
-    ...cardProps,
     children: tableContentDom
-  });
+  }) : tableContentDom;
   const renderTable = () => {
     if (props.tableRender) {
       return props.tableRender(props, tableAreaDom, {

package/es/table/components/Alert/index.js

@@ -1,4 +1,5 @@
 import { ConfigProvider, Space } from 'antd';
+import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { useIntl } from "../../../provider";
 import { useStyle } from "./style";
@@ -54,16 +55,16 @@ function TableAlert({
     return null;
   }
   return wrapSSR( /*#__PURE__*/_jsx("div", {
-    className: `${className} ${hashId}`.trim(),
+    className: clsx(className, hashId),
     children: /*#__PURE__*/_jsx("div", {
-      className: `${className}-container ${hashId}`.trim(),
+      className: clsx(`${className}-container`, hashId),
       children: /*#__PURE__*/_jsxs("div", {
-        className: `${className}-info ${hashId}`.trim(),
+        className: clsx(`${className}-info`, hashId),
         children: [/*#__PURE__*/_jsx("div", {
-          className: `${className}-info-content ${hashId}`.trim(),
+          className: clsx(`${className}-info-content`, hashId),
           children: dom
         }), option ? /*#__PURE__*/_jsx("div", {
-          className: `${className}-info-option ${hashId}`.trim(),
+          className: clsx(`${className}-info-option`, hashId),
           children: option
         }) : null]
       })