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

package/es/table/components/ListToolBar/index.d.ts

@@ -1,7 +1,7 @@
 import { TabPaneProps } from 'antd';
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import type { SearchProps } from 'antd/lib/input';
 import React from 'react';
+import type { LabelTooltipType } from '../../../utils';
 import type { ListToolBarHeaderMenuProps } from './HeaderMenu';
 export type ListToolBarSetting = {
     icon: React.ReactNode;

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

@@ -162,13 +162,11 @@ const ListToolBar = ({
       },
       children: actions.map((action, index) => {
         if (! /*#__PURE__*/React.isValidElement(action)) {
-          // eslint-disable-next-line react/no-array-index-key
           return /*#__PURE__*/_jsx(React.Fragment, {
             children: action
           }, index);
         }
         return /*#__PURE__*/React.cloneElement(action, {
-          // eslint-disable-next-line react/no-array-index-key
           key: index,
           ...action?.props
         });
@@ -240,14 +238,10 @@ const ListToolBar = ({
         className: `${prefixCls}-setting-items ${hashId}`.trim(),
         children: settings.map((setting, index) => {
           const settingItem = getSettingItem(setting);
-          return (
-            /*#__PURE__*/
-            // eslint-disable-next-line react/no-array-index-key
-            _jsx("div", {
-              className: `${prefixCls}-setting-item ${hashId}`.trim(),
-              children: settingItem
-            }, index)
-          );
+          return /*#__PURE__*/_jsx("div", {
+            className: `${prefixCls}-setting-item ${hashId}`.trim(),
+            children: settingItem
+          }, index);
         })
       }) : null]
     });

package/es/table/components/ListToolBar/style.js

@@ -8,7 +8,7 @@ const genProListStyle = token => {
         display: 'flex',
         justifyContent: 'space-between',
         paddingBlock: token.padding,
-        paddingInline: 0,
+        paddingInline: token.paddingXS,
         '&-mobile': {
           flexDirection: 'column'
         }

package/es/table/components/ToolBar/index.d.ts

@@ -1,6 +1,6 @@
 import type { TableColumnType } from 'antd';
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import React from 'react';
+import type { LabelTooltipType } from '../../../utils';
 import type { ActionType, OptionSearchProps, ProTableProps } from '../../typing';
 import type { ListToolBarProps } from '../ListToolBar';
 export type SettingOptionType = {

package/es/table/style/index.js

@@ -20,6 +20,10 @@ export const turn = new Keyframes('turn', {
 const genProListStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       zIndex: 1,
       [`${token.antCls}-table-wrapper ${token.antCls}-table-pagination${token.antCls}-pagination`]: {
         marginBlockEnd: 0

package/es/table/typing.d.ts

@@ -1,6 +1,5 @@
 import type { SpinProps, TableProps } from 'antd';
 import type { SizeType } from 'antd/lib/config-provider/SizeContext';
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import type { NamePath } from 'antd/lib/form/interface';
 import type { SearchProps } from 'antd/lib/input';
 import type { ColumnFilterItem, ColumnType, CompareFn, SorterResult, SortOrder } from 'antd/lib/table/interface';
@@ -10,7 +9,7 @@ import type { CSSProperties, Key } from 'react';
 import type { ProCardProps } from '../card';
 import type { ProFieldEmptyText } from '../field';
 import type { LightWrapperProps, ProFormProps, QueryFilterProps } from '../form';
-import type { ProCoreActionType, ProSchema, ProSchemaComponentTypes, ProTableEditableFnType, RowEditableConfig, SearchTransformKeyFn } from '../utils';
+import type { LabelTooltipType, ProCoreActionType, ProEllipsis, ProSchema, ProSchemaComponentTypes, ProTableEditableFnType, RowEditableConfig, SearchTransformKeyFn } from '../utils';
 import type { AlertRenderType } from './components/Alert';
 import type { SearchConfig, TableFormItem } from './components/Form/FormRender';
 import type { ListToolBarProps } from './components/ListToolBar';
@@ -80,7 +79,7 @@ export type ProColumnType<T = unknown, ValueType = 'text'> = ProSchema<T, ExtraP
     /** 搜索表单的默认值 */
     initialValue?: any;
     /** @name 是否缩略 */
-    ellipsis?: ColumnType<T>['ellipsis'];
+    ellipsis?: ProEllipsis;
     /** @name 是否拷贝 */
     copyable?: boolean;
     /** 在查询表单中隐藏 */
@@ -106,8 +105,14 @@ export type ProColumnType<T = unknown, ValueType = 'text'> = ProSchema<T, ExtraP
     order?: number;
     /** @name 可编辑表格是否可编辑 */
     editable?: boolean | ProTableEditableFnType<T>;
-    /** @private */
-    listKey?: string;
+    /**
+     * 用于 ProList，指定该列映射到列表项的哪个插槽位置
+     *
+     * @name 列表项插槽
+     * @example listSlot: 'title'
+     * @example listSlot: 'avatar'
+     */
+    listSlot?: 'title' | 'subTitle' | 'avatar' | 'description' | 'content' | 'actions' | 'aside' | 'type' | (string & {});
     /** @name 只读 */
     readonly?: boolean;
     /** @name 列设置的 disabled */

package/es/table/useFetchData.js

@@ -264,7 +264,6 @@ const useFetchData = (getData, defaultData, options) => {
     return () => {
       clearTimeout(pollingSetTimeRef.current);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [polling]);
   useEffect(() => {
     umountRef.current = false;
@@ -297,7 +296,6 @@ const useFetchData = (getData, defaultData, options) => {
       abortFetch();
       fetchListDebounce.run(false);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageInfo?.current]);
 
   // pageSize 修改后返回第一页
@@ -307,7 +305,6 @@ const useFetchData = (getData, defaultData, options) => {
     }
     abortFetch();
     fetchListDebounce.run(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageInfo?.pageSize]);
 
   /**

package/es/table/utils/cellRenderToFromItem.js

@@ -60,9 +60,7 @@ const CellRenderFromItem = props => {
     name: formItemName,
     ...restProps,
     children: children
-  }, key),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [key, formItemName]);
+  }, key), [key, formItemName]);
   const generateFormItem = useCallback(() => {
     const formItemProps = {
       ...getFieldPropsOrFormItemProps(columnProps?.formItemProps, ...needProps)

package/es/table/utils/index.js

@@ -87,7 +87,6 @@ export function useActionType(ref, action, props) {
     // 透出 scrollTo（如上层提供）
     scrollTo: props.scrollTo
   };
-  // eslint-disable-next-line no-param-reassign
   ref.current = userAction;
 }
 /**

package/es/utils/components/LabelIconTip/index.d.ts

@@ -1,5 +1,6 @@
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import React from 'react';
+import type { ProEllipsis } from '../../genCopyable';
+import type { LabelTooltipType } from '../../typing';
 /**
  * 在 form 的 label 后面增加一个 tips 来展示一些说明文案
  *
@@ -9,7 +10,5 @@ export declare const LabelIconTip: React.FC<{
     label: React.ReactNode;
     subTitle?: React.ReactNode;
     tooltip?: string | LabelTooltipType;
-    ellipsis?: boolean | {
-        showTitle?: boolean;
-    };
+    ellipsis?: ProEllipsis;
 }>;

package/es/utils/genCopyable/index.d.ts

@@ -1,4 +1,10 @@
+import type { TooltipProps } from 'antd';
 import React from 'react';
+export type ProEllipsisTooltip = {
+    showTitle?: boolean;
+    tooltip?: TooltipProps;
+};
+export type ProEllipsis = ProEllipsisTooltip | boolean;
 /**
  * 生成 Copyable 或 Ellipsis 的 dom
  *

package/es/utils/genCopyable/index.js

@@ -1,4 +1,5 @@
 import { Typography } from 'antd';
+import isObject from 'lodash-es/isObject';
 import React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,16 +24,35 @@ const normalizeCopyText = text => {
   return text === null || text === undefined ? '' : String(text).trimEnd();
 };
 const genEllipsis = (dom, item, text) => {
+  const ellipsis = getEllipsis(item);
+  if (!ellipsis || !text) {
+    return false;
+  }
   /** 有些 valueType 需要设置copy的为string */
   const needTranText = isNeedTranText(item);
-  return getEllipsis(item) && text ? {
-    tooltip:
-    // 支持一下 tooltip 的关闭
-    item?.tooltip !== false && needTranText ? /*#__PURE__*/_jsx("div", {
-      className: "pro-table-tooltip-text",
-      children: dom
-    }) : text
-  } : false;
+
+  // 支持一下 tooltip 的关闭
+  if (needTranText && item?.tooltip !== false) {
+    return {
+      tooltip: /*#__PURE__*/_jsx("div", {
+        className: "pro-table-tooltip-text",
+        children: dom
+      })
+    };
+  }
+
+  // 如果 ellipsis 是对象且包含 tooltip 属性,合并 tooltip 的属性
+  if (isObject(ellipsis) && isObject(ellipsis.tooltip)) {
+    return {
+      tooltip: {
+        title: text,
+        ...ellipsis.tooltip
+      }
+    };
+  }
+  return {
+    tooltip: text
+  };
 };
 
 /**

package/es/utils/hooks/useDebounceValue/index.js

@@ -15,8 +15,6 @@ export function useDebounceValue(value, delay = 100, deps) {
       setDebouncedValue(valueRef.current);
     }, delay);
     return () => clearTimeout(handler);
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  deps ? [delay, ...deps] : undefined);
+  }, deps ? [delay, ...deps] : undefined);
   return debouncedValue;
 }

package/es/utils/hooks/useDeepCompareEffect/index.js

@@ -12,7 +12,6 @@ export function useDeepCompareMemoize(value, ignoreKeys) {
   return ref.current;
 }
 export function useDeepCompareEffect(effect, dependencies, ignoreKeys) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(effect, useDeepCompareMemoize(dependencies || [], ignoreKeys));
 }
 export function useDeepCompareEffectDebounce(effect, dependencies, ignoreKeys, waitTime) {
@@ -21,6 +20,5 @@ export function useDeepCompareEffectDebounce(effect, dependencies, ignoreKeys, w
   }, waitTime || 16);
   useEffect(() => {
     effectDn.run();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, useDeepCompareMemoize(dependencies || [], ignoreKeys));
 }

package/es/utils/index.d.ts

@@ -9,6 +9,7 @@ import type { ProFormInstanceType } from './components/ProFormContext';
 import { ProFormContext } from './components/ProFormContext';
 import { conversionMomentValue, convertMoment, dateFormatterMap } from './conversionMomentValue';
 import { dateArrayFormatter } from './dateArrayFormatter';
+import type { ProEllipsis } from './genCopyable';
 import { genCopyable } from './genCopyable';
 import { getFieldPropsOrFormItemProps } from './getFieldPropsOrFormItemProps';
 import { useDebounceFn } from './hooks/useDebounceFn';
@@ -48,4 +49,4 @@ import { useEditableMap } from './useEditableMap';
 import { useBreakpoint } from './useMediaQuery';
 export * from './typing';
 export { conversionMomentValue, conversionMomentValue as conversionSubmitValue, convertMoment, dateArrayFormatter, dateFormatterMap, DropdownFooter, editableRowByKey, ErrorBoundary, FieldLabel, FilterDropdown, genCopyable, getFieldPropsOrFormItemProps, InlineErrorFormItem, isBrowser, isDeepEqualReact, isDropdownValueType, isImg, isNil, isUrl, LabelIconTip, lighten, merge, nanoid, objectToMap, omitBoolean, omitUndefined, omitUndefinedAndEmptyArr, operationUnit, parseValueToDay, pickProFormItemProps, pickProProps, proFieldParsingText, ProFormContext, recordKeyToString, resetComponent, runFunction, setAlpha, stringify, transformKeySubmitValue, useBreakpoint, useDebounceFn, useDebounceValue, useDeepCompareEffect, useDeepCompareEffectDebounce, useDeepCompareMemo, useDocumentTitle, useEditableArray, useEditableMap, useFetchData, useLatest, usePrevious, useReactiveRef, useRefCallback, useRefFunction, useStyle, };
-export type { ProFormInstanceType, ProRequestData, RowEditableConfig, RowEditableType, UseEditableMapType, UseEditableMapUtilType, UseEditableType, UseEditableUtilType, };
+export type { ProEllipsis, ProFormInstanceType, ProRequestData, RowEditableConfig, RowEditableType, UseEditableMapType, UseEditableMapUtilType, UseEditableType, UseEditableUtilType, };

package/es/utils/isDeepEqualReact/index.js

@@ -1,9 +1,3 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable no-continue */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable no-self-compare */
-/* eslint-disable eqeqeq */
-/* eslint-disable no-plusplus */
 // do not edit .js files directly - edit src/index.jst
 
 export function isDeepEqualReact(a, b, ignoreKeys) {
@@ -42,8 +36,6 @@ export function isDeepEqualReact(a, b, ignoreKeys) {
     if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
     if (a.valueOf !== Object.prototype.valueOf && a.valueOf) return a.valueOf() === b.valueOf();
     if (a.toString !== Object.prototype.toString && a.toString) return a.toString() === b.toString();
-
-    // eslint-disable-next-line prefer-const
     keys = Object.keys(a);
     length = keys.length;
     if (length !== Object.keys(b).length) return false;

package/es/utils/merge/index.js

@@ -1,5 +1,3 @@
-/* eslint-disable prefer-rest-params */
-
 /**
  * 用于合并 n 个对象
  * @param  {any[]} ...rest
@@ -11,7 +9,6 @@ const merge = (...rest) => {
   let key;
   let i = 0;
   for (; i < il; i += 1) {
-    // eslint-disable-next-line no-restricted-syntax
     for (key in rest[i]) {
       if (rest[i].hasOwnProperty(key)) {
         if (typeof obj[key] === 'object' && typeof rest[i][key] === 'object' && obj[key] !== undefined && obj[key] !== null && !Array.isArray(obj[key]) && !Array.isArray(rest[i][key])) {

package/es/utils/nanoid/index.d.ts

@@ -1,6 +1,4 @@
 /**
- * 生成uuid，如果不支持 randomUUID，就用 genNanoid
- *
- * @returns string
+ * @description 生成uuid，如果不支持 randomUUID，就用 genNanoid
  */
 export declare const nanoid: () => string;

package/es/utils/nanoid/index.js

@@ -1,12 +1,9 @@
-/* eslint-disable prefer-const */
-
 let index = 0;
 let genNanoid = (t = 21) => {
   if (typeof window === 'undefined') return (index += 1).toFixed(0);
   if (!window.crypto) return (index += 1).toFixed(0);
   let e = '',
     r = crypto.getRandomValues(new Uint8Array(t));
-  // eslint-disable-next-line no-param-reassign
   for (; t--;) {
     let n = 63 & r[t];
     e += n < 36 ? n.toString(36) : n < 62 ? (n - 26).toString(36).toUpperCase() : n < 63 ? '_' : '-';
@@ -15,15 +12,10 @@ let genNanoid = (t = 21) => {
 };
 
 /**
- * 生成uuid，如果不支持 randomUUID，就用 genNanoid
- *
- * @returns string
+ * @description 生成uuid，如果不支持 randomUUID，就用 genNanoid
  */
 export const nanoid = () => {
-  if (typeof window === 'undefined') return genNanoid();
-  // @ts-ignore
-  if (window.crypto && window.crypto.randomUUID && typeof crypto.randomUUID == 'function') {
-    // @ts-ignore
+  if (window?.crypto?.randomUUID && typeof crypto.randomUUID === 'function') {
     return crypto.randomUUID();
   }
   return genNanoid();

package/es/utils/proFieldParsingText/index.js

@@ -102,9 +102,7 @@ export const proFieldParsingText = (text, valueEnumParams, key) => {
       separator: ",",
       size: 2,
       wrap: true,
-      children: text.map((value, index) =>
-      // @ts-ignore
-      proFieldParsingText(value, valueEnumParams, index))
+      children: text.map((value, index) => proFieldParsingText(value, valueEnumParams, index))
     }, key);
   }
   const valueEnum = objectToMap(valueEnumParams);

package/es/utils/typing.d.ts

@@ -1,13 +1,14 @@
 import type { AvatarProps, CascaderProps, CheckboxProps, ColorPickerProps, DatePickerProps, DividerProps, ImageProps, InputNumberProps, InputProps, PopoverProps, ProgressProps, RadioProps, RateProps, SegmentedProps, SelectProps, SliderSingleProps, SpaceProps, SwitchProps, TimeRangePickerProps, TreeSelectProps } from 'antd';
 import type { RangePickerProps } from 'antd/lib/date-picker';
 import type { FormInstance, FormItemProps } from 'antd/lib/form';
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import type { NamePath } from 'antd/lib/form/interface';
 import type { PasswordProps, TextAreaProps } from 'antd/lib/input';
 import type { SliderRangeProps } from 'antd/lib/slider';
 import type { ReactNode } from 'react';
 import type { ProSchemaValueEnumType } from '../provider';
 import type { UseEditableUtilType } from './useEditableArray';
+export type LabelTooltipType = any;
+export type WrapperTooltipProps = any;
 export type ProFormBaseGroupProps = {
     /**
      * @name 分组的标题

package/es/utils/useEditableArray/index.js

@@ -1,4 +1,4 @@
-/* eslint-disable react-hooks/exhaustive-deps */import { LoadingOutlined } from '@ant-design/icons';
+import { LoadingOutlined } from '@ant-design/icons';
 import { get, warning as rcWarning, set, useControlledState } from '@rc-component/util';
 import { Form, Popconfirm, message } from 'antd';
 import React, { createRef, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';

package/es/utils/useEditableMap/index.js

@@ -1,4 +1,4 @@
-/* eslint-disable react-hooks/exhaustive-deps */import { get, useControlledState } from '@rc-component/util';
+import { get, useControlledState } from '@rc-component/util';
 import { message } from 'antd';
 import { useCallback, useMemo, useRef } from 'react';
 import { useRefFunction } from '..';

package/guidelines/overview-components.md

@@ -14,7 +14,7 @@ Here are the guidelines files and additional guidelines for the ProComponents:
 | DrawerForm       | Form inside a drawer                              | [drawer-form.md](components/drawer-form.md)               |
 | StepsForm        | Multi-step form wizard                            | [steps-form.md](components/steps-form.md)                 |
 | ProLayout        | Heavy-duty layout component                       | [pro-layout.md](components/pro-layout.md)                 |
-| ProList          | List component with table-like features           | [pro-list.md](components/pro-list.md)                     |
+| ProList          | List component with table-like features           | [list.md](components/list.md)                     |
 | ProSkeleton      | Skeleton loading component                        | [pro-skeleton.md](components/pro-skeleton.md)             |
 | ProTable         | Advanced table with search, filter, and valueType | [pro-table.md](components/pro-table.md)                   |
 | EditableProTable | Editable table for inline editing                 | [editable-pro-table.md](components/editable-pro-table.md) |

package/lib/card/components/Actions/index.js

@@ -21,10 +21,7 @@ const ProCardActions = props => {
   if (Array.isArray(actions) && actions?.length) {
     return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
       className: (0, _clsx.clsx)(`${prefixCls}-actions`, hashId),
-      children: actions.map((action, index) =>
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      (0, _jsxRuntime.jsx)("li", {
+      children: actions.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         style: {
           width: `${100 / actions.length}%`,
           padding: 0,

package/lib/card/components/Card/index.js

@@ -23,8 +23,6 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     className,
     style,
-    bodyStyle,
-    headStyle,
     styles,
     title,
     subTitle,
@@ -219,23 +217,34 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     [`${prefixCls}-body-direction-column`]: split === 'horizontal' || direction === 'column',
     [`${prefixCls}-body-wrap`]: wrap && containProCard
   });
-
-  // 支持新的 styles API，同时保持向后兼容
-  const cardBodyStyle = styles?.body || bodyStyle;
-  const cardHeadStyle = styles?.header || headStyle;
+  const bodyStylePadding = styles?.body?.padding;
   const loadingDOM = /*#__PURE__*/_react.default.isValidElement(loading) ? loading : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {
     prefix: prefixCls,
-    style: cardBodyStyle?.padding === 0 || cardBodyStyle?.padding === '0px' ? {
+    style: bodyStylePadding === 0 || bodyStylePadding === '0px' ? {
       padding: 24
     } : undefined
   });
+  const handleCollapsibleIconClick = (0, _react.useCallback)(() => {
+    if (collapsible === 'icon') setCollapsed(prev => !prev);
+  }, [collapsible, setCollapsed]);
+
   // 非受控情况下展示
-  const collapsibleButton = collapsible && controlCollapsed === undefined && (collapsibleIconRender ? collapsibleIconRender({
-    collapsed
+  const collapsibleButton = collapsible && controlCollapsed === undefined && (collapsibleIconRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    role: "button",
+    tabIndex: collapsible === 'icon' ? 0 : undefined,
+    className: `${prefixCls}-collapsible-icon ${hashId}`.trim(),
+    onClick: collapsible === 'icon' ? handleCollapsibleIconClick : undefined,
+    onKeyDown: collapsible === 'icon' ? e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleCollapsibleIconClick();
+      }
+    } : undefined,
+    children: collapsibleIconRender({
+      collapsed
+    })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {
-    onClick: () => {
-      if (collapsible === 'icon') setCollapsed(!collapsed);
-    },
+    onClick: handleCollapsibleIconClick,
     rotate: !collapsed ? 90 : undefined,
     className: `${prefixCls}-collapsible-icon ${hashId}`.trim()
   }));
@@ -253,7 +262,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         [`${prefixCls}-header-border`]: headerBordered || type === 'inner',
         [`${prefixCls}-header-collapsible`]: collapsibleButton
       }),
-      style: cardHeadStyle,
+      style: styles?.header,
       onClick: () => {
         if (collapsible === 'header' || collapsible === true) setCollapsed(!collapsed);
       },
@@ -274,13 +283,12 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
         onChange: tabs.onChange,
         ...(0, _util.omit)(tabs, ['cardProps']),
-        // @ts-ignore
         items: ModifyTabItemsContent,
         children: loading ? loadingDOM : children
       })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: bodyCls,
-      style: cardBodyStyle,
+      style: styles?.body,
       children: loading ? loadingDOM : childrenModified
     }), actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.default, {
       actions: actions,

package/lib/card/components/Card/style.js

@@ -19,6 +19,9 @@ const genProCardStyle = token => {
       display: 'flex',
       flexDirection: 'column',
       boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       width: '100%',
       marginBlock: 0,
       marginInline: 0,
@@ -35,6 +38,29 @@ const genProCardStyle = token => {
       '&-col': {
         width: '100%'
       },
+      // 分割线样式：col 之间的分割线
+      [` ${componentCls}-col${componentCls}-split-vertical`]: {
+        borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+      },
+      [` ${componentCls}-col${componentCls}-split-horizontal`]: {
+        borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+      },
+      // Divider 分割线组件样式
+      [`${componentCls}-divider`]: {
+        flex: 'none',
+        alignSelf: 'stretch',
+        width: token.lineWidth,
+        marginInline: token.marginXS,
+        marginBlock: token.marginLG,
+        backgroundColor: token.colorSplit,
+        [`&${componentCls}-divider-horizontal`]: {
+          width: 'auto',
+          alignSelf: 'auto',
+          height: token.lineWidth,
+          marginInline: token.marginLG,
+          marginBlock: token.marginXS
+        }
+      },
       '&-border': {
         border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
       },
@@ -179,19 +205,19 @@ const genProCardStyle = token => {
             paddingBlock: token.paddingSM
           }
         },
+        [` ${componentCls}-divider`]: {
+          marginBlock: token.marginLG,
+          marginInline: token.marginXS,
+          [`&${componentCls}-divider-horizontal`]: {
+            marginBlock: token.marginXS,
+            marginInline: token.marginLG
+          }
+        },
         [`${componentCls}-header${componentCls}-header-collapsible`]: {
           paddingBlock: token.paddingXS
         }
       }
     },
-    [`${componentCls}-col`]: {
-      [`&${componentCls}-split-vertical`]: {
-        borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
-      },
-      [`&${componentCls}-split-horizontal`]: {
-        borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
-      }
-    },
     [`${componentCls}-tabs`]: {
       [`${token.antCls}-tabs-top > ${token.antCls}-tabs-nav`]: {
         marginBlockEnd: 0,

package/lib/card/components/CheckCard/Group.js

@@ -167,9 +167,7 @@ const CheckCardGroup = props => {
   };
   const children = (0, _react.useMemo)(() => {
     if (loading) {
-      return new Array(options.length || _react.default.Children.toArray(props.children).length || 1).fill(0)
-      // eslint-disable-next-line react/no-array-index-key
-      .map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
+      return new Array(options.length || _react.default.Children.toArray(props.children).length || 1).fill(0).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
         loading: true
       }, index));
     }

package/lib/card/components/CheckCard/index.js

@@ -49,7 +49,6 @@ const CheckCard = props => {
   (0, _react.useEffect)(() => {
     checkCardGroup?.registerValue?.(props.value);
     return () => checkCardGroup?.cancelValue?.(props.value);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.value]);
   const {
     prefixCls: customizePrefixCls,

package/lib/card/components/Divider/index.d.ts

@@ -17,7 +17,7 @@ export type ProCardDividerProps = {
      *
      * @default vertical
      */
-    type?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical';
 };
 declare const ProCardDivider: React.FC<ProCardDividerProps>;
 export default ProCardDivider;

package/lib/card/components/Divider/index.js

@@ -24,10 +24,10 @@ const ProCardDivider = props => {
   const {
     className,
     style = {},
-    type
+    orientation = 'vertical'
   } = props;
   const classString = (0, _clsx.clsx)(prefixCls, className, hashId, {
-    [`${prefixCls}-${type}`]: type
+    [`${prefixCls}-${orientation}`]: orientation
   });
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: classString,

package/lib/card/components/Divider/style.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-export default function useStyle(prefixCls: string): {
+/**
+ * Divider 样式已合并至 ProCard style.ts，此 hook 仅用于获取 hashId 和 wrapSSR
+ */
+export default function useStyle(_prefixCls: string): {
     wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };