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

package/es/utils/components/FilterDropdown/index.js

@@ -51,7 +51,7 @@ const FilterDropdown = props => {
           return htmlRef.current || document.body;
         },
         children: /*#__PURE__*/_jsx("div", {
-          className: `${prefixCls}-content ${hashId}`.trim(),
+          className: clsx(`${prefixCls}-content`, hashId),
           children: children
         })
       }), footer && /*#__PURE__*/_jsx(DropdownFooter, {

package/es/utils/components/InlineErrorFormItem/index.js

@@ -1,6 +1,7 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { get } from '@rc-component/util';
 import { ConfigProvider, Form, Popover, theme } from 'antd';
+import { clsx } from 'clsx';
 import React, { useContext, useEffect, useState } from 'react';
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -47,13 +48,13 @@ const InlineErrorFormItemPopover = ({
     getPopupContainer: popoverProps?.getPopupContainer,
     getTooltipContainer: popoverProps?.getTooltipContainer,
     content: wrapSSR( /*#__PURE__*/_jsx("div", {
-      className: `${prefixCls}-form-item ${hashId} ${token.hashId}`.trim(),
+      className: clsx(`${prefixCls}-form-item`, hashId, token.hashId),
       style: {
         margin: 0,
         padding: 0
       },
       children: /*#__PURE__*/_jsxs("div", {
-        className: `${prefixCls}-form-item-with-help ${hashId} ${token.hashId}`.trim(),
+        className: clsx(`${prefixCls}-form-item-with-help`, hashId, token.hashId),
         children: [loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : null, errorList]
       })
     })),
@@ -82,7 +83,7 @@ const InternalFormItemFunction = ({
       }
       try {
         return JSON.stringify(get(prev, shouldName)) !== JSON.stringify(get(next, shouldName));
-      } catch (error) {
+      } catch (_error) {
         return true;
       }
     }
@@ -132,7 +133,7 @@ export const InlineErrorFormItem = props => {
       }
       try {
         return JSON.stringify(get(prev, shouldName)) !== JSON.stringify(get(next, shouldName));
-      } catch (error) {
+      } catch (_error) {
         return true;
       }
     } : undefined,

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/components/LabelIconTip/index.js

@@ -47,12 +47,12 @@ export const LabelIconTip = /*#__PURE__*/React.memo(props => {
       }),
       children: label
     }), subTitle && /*#__PURE__*/_jsx("div", {
-      className: `${className}-subtitle ${hashId}`.trim(),
+      className: clsx(`${className}-subtitle`, hashId),
       children: subTitle
     }), tooltip && /*#__PURE__*/_jsx(Tooltip, {
       ...tooltipProps,
       children: /*#__PURE__*/_jsx("span", {
-        className: `${className}-icon ${hashId}`.trim(),
+        className: clsx(`${className}-icon`, hashId),
         children: icon
       })
     })]

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/hooks/useFetchData/index.js

@@ -11,7 +11,6 @@ export function useFetchData(props) {
     testId += 1;
     return testId.toString();
   });
-  const proFieldKeyRef = useRef(cacheKey);
   const fetchData = async () => {
     abortRef.current?.abort();
     const abort = new AbortController();
@@ -31,7 +30,6 @@ export function useFetchData(props) {
   };
   const {
     data,
-    error,
     isValidating
   } = useSWR(props.request ? [cacheKey, props.params] : null, fetchData, {
     revalidateOnFocus: false,

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/isUrl/index.js

@@ -11,7 +11,7 @@ export const isUrl = path => {
   try {
     const url = new URL(path);
     return !!url;
-  } catch (error) {
+  } catch (_error) {
     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.d.ts

@@ -14,8 +14,8 @@ export declare const objectToMap: (value: ProFieldValueEnumType | undefined) =>
  * 转化 text 和 valueEnum 通过 type 来添加 Status
  *
  * @param text
- * @param valueEnum
- * @param pure 纯净模式，不增加 status
+ * @param valueEnumParams
+ * @param key
  */
 export declare const proFieldParsingText: (text: string | number | (string | number)[], valueEnumParams: ProFieldValueEnumType, key?: number | string) => React.ReactNode;
 export {};

package/es/utils/proFieldParsingText/index.js

@@ -93,8 +93,8 @@ const TableStatus = {
  * 转化 text 和 valueEnum 通过 type 来添加 Status
  *
  * @param text
- * @param valueEnum
- * @param pure 纯净模式，不增加 status
+ * @param valueEnumParams
+ * @param key
  */
 export const proFieldParsingText = (text, valueEnumParams, key) => {
   if (Array.isArray(text)) {
@@ -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/components/pro-card.md

@@ -19,6 +19,7 @@
 - `tabs`: Configure tabs inside the card.
 - `collapsible`: Whether the card can be collapsed.
 - `ghost`: Transparent background.
+- `variant`: `'outlined'` | `'borderless'`. Card border style.
 
 **Usage Pattern**:
 
@@ -31,7 +32,7 @@ export default () => {
       title="Card Title"
       extra="More"
       split="vertical"
-      bordered
+      variant="outlined"
       headerBordered
     >
       <ProCard title="Left Details" colSpan="50%">
@@ -49,13 +50,13 @@ export default () => {
 
 ```tsx
 <ProCard gutter={16} ghost>
-  <ProCard colSpan={12} layout="center" bordered>
+  <ProCard colSpan={12} layout="center" variant="outlined">
     Col 12
   </ProCard>
-  <ProCard colSpan={6} layout="center" bordered>
+  <ProCard colSpan={6} layout="center" variant="outlined">
     Col 6
   </ProCard>
-  <ProCard colSpan={6} layout="center" bordered>
+  <ProCard colSpan={6} layout="center" variant="outlined">
     Col 6
   </ProCard>
 </ProCard>

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/ProCard.js

@@ -8,14 +8,22 @@ exports.default = void 0;
 var _Card = _interopRequireDefault(require("./components/Card"));
 var _Divider = _interopRequireDefault(require("./components/Divider"));
 var _jsxRuntime = require("react/jsx-runtime");
-const Group = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
-  styles: {
-    body: {
-      padding: 0
+const Group = props => {
+  const {
+    styles,
+    ...rest
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+    ...rest,
+    styles: {
+      ...styles,
+      body: {
+        ...styles?.body,
+        padding: 0
+      }
     }
-  },
-  ...props
-});
+  });
+};
 
 // 当前不对底层 Card 做封装，仅挂载子组件，直接导出
 const ProCard = _Card.default;

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

@@ -22,9 +22,8 @@ const {
 const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     className,
+    rootClassName,
     style,
-    bodyStyle,
-    headStyle,
     styles,
     title,
     subTitle,
@@ -36,7 +35,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     tooltip,
     split,
     headerBordered = false,
-    variant = 'outlined',
+    variant: customVariant,
+    cover,
+    classNames,
     boxShadow = false,
     children,
     size,
@@ -56,6 +57,16 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     type,
     ...rest
   } = props;
+  const variant = customVariant ?? 'outlined';
+  const mergedStyles = {
+    header: styles?.header,
+    body: styles?.body,
+    root: styles?.root,
+    extra: styles?.extra,
+    title: styles?.title,
+    actions: styles?.actions,
+    cover: styles?.cover
+  };
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
@@ -201,7 +212,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }
     return element;
   });
-  const cardCls = (0, _clsx.clsx)(`${prefixCls}`, className, hashId, {
+  const cardCls = (0, _clsx.clsx)(`${prefixCls}`, className, rootClassName, hashId, classNames?.root, {
     [`${prefixCls}-border`]: variant === 'outlined',
     [`${prefixCls}-box-shadow`]: boxShadow,
     [`${prefixCls}-contain-card`]: containProCard,
@@ -214,34 +225,53 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     [`${prefixCls}-collapse`]: collapsed,
     [`${prefixCls}-checked`]: checked
   });
-  const bodyCls = (0, _clsx.clsx)(`${prefixCls}-body`, hashId, {
+  const bodyCls = (0, _clsx.clsx)(`${prefixCls}-body`, hashId, classNames?.body, {
     [`${prefixCls}-body-center`]: layout === 'center',
     [`${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 = mergedStyles.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 collapsibleButton = collapsible && controlCollapsed === undefined && (collapsibleIconRender ? collapsibleIconRender({
-    collapsed
+  const handleCollapsibleIconClick = (0, _react.useCallback)(() => {
+    if (collapsible === 'icon') setCollapsed(prev => !prev);
+  }, [collapsible, setCollapsed]);
+  const collapsibleButton = collapsible && (collapsibleIconRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    role: "button",
+    tabIndex: collapsible === 'icon' ? 0 : undefined,
+    className: (0, _clsx.clsx)(`${prefixCls}-collapsible-icon`, hashId),
+    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()
+    className: (0, _clsx.clsx)(`${prefixCls}-collapsible-icon`, hashId)
   }));
+  const headerCls = (0, _clsx.clsx)(`${prefixCls}-header`, hashId, classNames?.header, {
+    [`${prefixCls}-header-border`]: headerBordered || type === 'inner',
+    [`${prefixCls}-header-collapsible`]: collapsibleButton
+  });
+  const titleCls = (0, _clsx.clsx)(`${prefixCls}-title`, hashId, classNames?.title);
+  const extraCls = (0, _clsx.clsx)(`${prefixCls}-extra`, hashId, classNames?.extra);
+  const rootStyle = {
+    ...mergedStyles.root,
+    ...style
+  };
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: cardCls,
-    style: style,
+    style: rootStyle,
     ref: ref,
     onClick: e => {
       onChecked?.(e);
@@ -249,38 +279,40 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     },
     ...(0, _util.omit)(rest, ['prefixCls', 'colSpan']),
     children: [(title || extra || collapsibleButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _clsx.clsx)(`${prefixCls}-header`, hashId, {
-        [`${prefixCls}-header-border`]: headerBordered || type === 'inner',
-        [`${prefixCls}-header-collapsible`]: collapsibleButton
-      }),
-      style: cardHeadStyle,
+      className: headerCls,
+      style: mergedStyles.header,
       onClick: () => {
         if (collapsible === 'header' || collapsible === true) setCollapsed(!collapsed);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${prefixCls}-title ${hashId}`.trim(),
+        className: titleCls,
+        style: mergedStyles.title,
         children: [collapsibleButton, /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.LabelIconTip, {
           label: title,
           tooltip: tooltip,
           subTitle: subTitle
         })]
       }), extra && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${prefixCls}-extra ${hashId}`.trim(),
+        className: extraCls,
+        style: mergedStyles.extra,
         onClick: e => e.stopPropagation(),
         children: extra
       })]
+    }), cover && !collapsed && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.clsx)(`${prefixCls}-cover`, hashId, classNames?.cover),
+      style: mergedStyles.cover,
+      children: cover
     }), tabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${prefixCls}-tabs ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-tabs`, hashId),
       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: mergedStyles.body,
       children: loading ? loadingDOM : childrenModified
     }), actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.default, {
       actions: actions,