@ant-design/pro-components 3.1.13-0 → 3.1.14-0

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

@@ -111,7 +111,7 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
   /**
    * 根据响应式获取 gutter, 参考 antd 实现
    *
-   * @param gutter Gutter
+   * @param gut
    */
   const getNormalizedGutter = gut => {
     const results = [0, 0];
@@ -208,7 +208,6 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const cardCls = clsx(`${prefixCls}`, className, rootClassName, hashId, classNames?.root, {
     [`${prefixCls}-border`]: variant === 'outlined',
-    [`${prefixCls}-filled`]: variant === 'filled',
     [`${prefixCls}-box-shadow`]: boxShadow,
     [`${prefixCls}-contain-card`]: containProCard,
     [`${prefixCls}-loading`]: loading,
@@ -300,17 +299,15 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
       className: clsx(`${prefixCls}-cover`, hashId, classNames?.cover),
       style: mergedStyles.cover,
       children: cover
-    }), tabs ?
-    /*#__PURE__*/
-    // antd v5 Tabs 仅通过 items 渲染，传 children 会被忽略。
-    // loading 状态下，把骨架屏放到 Tabs 容器外层，避免 children 被吞。
-    _jsx("div", {
-      className: clsx(`${prefixCls}-tabs`, hashId),
-      children: loading ? loadingDOM : /*#__PURE__*/_jsx(Tabs, {
-        onChange: tabs.onChange,
-        ...omit(tabs, ['cardProps']),
-        items: ModifyTabItemsContent
-      })
+    }), tabs ? loading ? /*#__PURE__*/_jsx("div", {
+      className: bodyCls,
+      style: mergedStyles.body,
+      children: loadingDOM
+    }) : /*#__PURE__*/_jsx(Tabs, {
+      onChange: tabs.onChange,
+      ...omit(tabs, ['cardProps']),
+      items: ModifyTabItemsContent,
+      className: clsx(`${prefixCls}-tabs`, hashId)
     }) : /*#__PURE__*/_jsx("div", {
       className: bodyCls,
       style: mergedStyles.body,

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

@@ -26,13 +26,11 @@ const genProCardStyle = token => {
       transition: 'all 0.3s',
       ...resetComponent?.(token),
       // 对齐 antd v6 Card：variant='borderless' 默认就有 boxShadowTertiary 浅阴影。
-      // 用 :not(&-border):not(&-box-shadow) 把显式 -box-shadow（boxShadowCard 重阴影）
-      // 和 -hoverable:hover（hover 也走 boxShadowCard）排除掉，确保它们的优先级更高。
-      '&&:not(&-border):not(&-box-shadow):not(&-filled)': {
+      '&&:not(&-border):not(&-box-shadow)': {
         boxShadow: token.boxShadowTertiary
       },
       '&-box-shadow': {
-        boxShadow: token.boxShadowCard,
+        boxShadow: token.boxShadowTertiary,
         borderColor: 'transparent'
       },
       '&-col': {
@@ -64,17 +62,12 @@ const genProCardStyle = token => {
       '&-border': {
         border: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`
       },
-      '&-filled': {
-        backgroundColor: token.colorFillAlter,
-        borderColor: 'transparent',
-        boxShadow: 'none'
-      },
       '&-hoverable': {
         cursor: 'pointer',
         transition: 'box-shadow 0.3s, border-color 0.3s',
         '&:hover': {
           borderColor: 'transparent',
-          boxShadow: token.boxShadowCard
+          boxShadow: token.boxShadowTertiary
         },
         [`&${componentCls}-checked:hover`]: {
           borderColor: token.controlOutline
@@ -102,6 +95,8 @@ const genProCardStyle = token => {
       },
       '&&-ghost': {
         backgroundColor: 'transparent',
+        border: 'none',
+        boxShadow: 'none',
         [`> ${componentCls}`]: {
           '&-header': {
             paddingInlineEnd: 0,
@@ -237,47 +232,55 @@ const genProCardStyle = token => {
       }
     },
     [`${componentCls}-tabs`]: {
-      [`${token.antCls}-tabs-top > ${token.antCls}-tabs-nav`]: {
-        marginBlockEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          marginBlockStart: token.marginXS,
-          paddingInlineStart: token.padding
-        }
-      },
-      [`${token.antCls}-tabs-bottom > ${token.antCls}-tabs-nav`]: {
-        marginBlockEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingInlineStart: token.padding
-        }
-      },
-      [`${token.antCls}-tabs-left`]: {
-        [`${token.antCls}-tabs-content-holder`]: {
+      [`&${token.antCls}-tabs-top`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          marginBlockEnd: 0,
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingInlineStart: token.paddingLG
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
           [`${token.antCls}-tabs-content`]: {
-            [`${token.antCls}-tabs-tabpane`]: {
-              paddingInlineStart: 0
-            }
+            padding: token.paddingLG
           }
         }
       },
-      // 这里是为了保证 tabs 的高度和左侧的一致
-      [`${token.antCls}-tabs-left > ${token.antCls}-tabs-nav`]: {
-        marginInlineEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingBlockStart: token.padding
+      [`&${token.antCls}-tabs-bottom`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          marginBlockEnd: 0,
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingInlineStart: token.paddingLG
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
+          [`${token.antCls}-tabs-content`]: {
+            padding: token.paddingLG
+          }
         }
       },
-      [`${token.antCls}-tabs-right`]: {
-        [`${token.antCls}-tabs-content-holder`]: {
+      [`&${token.antCls}-tabs-left`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          marginInlineEnd: 0,
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingBlockStart: token.padding
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
           [`${token.antCls}-tabs-content`]: {
-            [`${token.antCls}-tabs-tabpane`]: {
-              paddingInlineStart: 0
-            }
+            padding: token.paddingLG
           }
         }
       },
-      [`${token.antCls}-tabs-right > ${token.antCls}-tabs-nav`]: {
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingBlockStart: token.padding
+      [`&${token.antCls}-tabs-right`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingBlockStart: token.padding
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
+          [`${token.antCls}-tabs-content`]: {
+            padding: token.paddingLG
+          }
         }
       }
     }
@@ -323,10 +326,7 @@ export default function useStyle(prefixCls) {
   return useAntdStyle('ProCard', token => {
     const proCardToken = {
       ...token,
-      componentCls: `.${prefixCls}`,
-      // antd v6 运行时注入了 boxShadowCard，但 GlobalToken 类型里没有声明，
-      // 这里从原始 token 上透传一次。
-      boxShadowCard: token.boxShadowCard ?? token.boxShadow
+      componentCls: `.${prefixCls}`
     };
     return [genProCardStyle(proCardToken), getGridStyleByCls(proCardToken.componentCls)];
   });

package/es/card/typing.d.ts

@@ -63,7 +63,7 @@ type CardPropsBase = Pick<AntdCardProps, 'rootClassName' | 'cover'> & {
     /** 拆分卡片方式 */
     split?: 'vertical' | 'horizontal';
     /** 卡片变体，与 antd Card variant 一致 */
-    variant?: 'outlined' | 'borderless' | 'filled';
+    variant?: 'outlined' | 'borderless';
     /**
      * 鼠标移过时可浮起
      *

package/es/form/components/List/ListItem.js

@@ -26,6 +26,7 @@ const listToArray = children => {
  * 这是一个纯渲染辅助函数（不含任何 hook），可以在条件分支中安全调用。
  */
 function renderActionIcon({
+  key,
   iconProps,
   defaultIcon: DefaultIcon,
   actionClassName,
@@ -46,7 +47,7 @@ function renderActionIcon({
       className: clsx(`${prefixCls}-action-icon`, actionClassName, hashId),
       onClick: onClick
     })
-  });
+  }, key);
 }
 const ProFormListItem = props => {
   const {
@@ -140,6 +141,7 @@ const ProFormListItem = props => {
 
   // 4 个操作 icon 无条件调用 renderActionIcon（纯函数，无 hook），通过 hidden 控制是否渲染
   const copyIcon = renderActionIcon({
+    key: 'copy',
     iconProps: copyIconProps,
     defaultIcon: CopyOutlined,
     actionClassName: 'action-copy',
@@ -155,6 +157,7 @@ const ProFormListItem = props => {
     }
   });
   const deleteIcon = renderActionIcon({
+    key: 'delete',
     iconProps: deleteIconProps,
     defaultIcon: DeleteOutlined,
     actionClassName: 'action-remove',
@@ -171,6 +174,7 @@ const ProFormListItem = props => {
     }
   });
   const upIcon = renderActionIcon({
+    key: 'up',
     iconProps: upIconProps,
     defaultIcon: ArrowUpOutlined,
     actionClassName: 'action-up',
@@ -182,6 +186,7 @@ const ProFormListItem = props => {
     }
   });
   const downIcon = renderActionIcon({
+    key: 'down',
     iconProps: downIconProps,
     defaultIcon: ArrowDownOutlined,
     actionClassName: 'action-down',

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

@@ -118,7 +118,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   /**
    * 根据响应式获取 gutter, 参考 antd 实现
    *
-   * @param gutter Gutter
+   * @param gut
    */
   const getNormalizedGutter = gut => {
     const results = [0, 0];
@@ -215,7 +215,6 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   });
   const cardCls = (0, _clsx.clsx)(`${prefixCls}`, className, rootClassName, hashId, classNames?.root, {
     [`${prefixCls}-border`]: variant === 'outlined',
-    [`${prefixCls}-filled`]: variant === 'filled',
     [`${prefixCls}-box-shadow`]: boxShadow,
     [`${prefixCls}-contain-card`]: containProCard,
     [`${prefixCls}-loading`]: loading,
@@ -307,17 +306,15 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       className: (0, _clsx.clsx)(`${prefixCls}-cover`, hashId, classNames?.cover),
       style: mergedStyles.cover,
       children: cover
-    }), tabs ?
-    /*#__PURE__*/
-    // antd v5 Tabs 仅通过 items 渲染，传 children 会被忽略。
-    // loading 状态下，把骨架屏放到 Tabs 容器外层，避免 children 被吞。
-    (0, _jsxRuntime.jsx)("div", {
-      className: (0, _clsx.clsx)(`${prefixCls}-tabs`, hashId),
-      children: loading ? loadingDOM : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
-        onChange: tabs.onChange,
-        ...(0, _util.omit)(tabs, ['cardProps']),
-        items: ModifyTabItemsContent
-      })
+    }), tabs ? loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: bodyCls,
+      style: mergedStyles.body,
+      children: loadingDOM
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
+      onChange: tabs.onChange,
+      ...(0, _util.omit)(tabs, ['cardProps']),
+      items: ModifyTabItemsContent,
+      className: (0, _clsx.clsx)(`${prefixCls}-tabs`, hashId)
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: bodyCls,
       style: mergedStyles.body,

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

@@ -32,13 +32,11 @@ const genProCardStyle = token => {
       transition: 'all 0.3s',
       ...(0, _utils.resetComponent)?.(token),
       // 对齐 antd v6 Card：variant='borderless' 默认就有 boxShadowTertiary 浅阴影。
-      // 用 :not(&-border):not(&-box-shadow) 把显式 -box-shadow（boxShadowCard 重阴影）
-      // 和 -hoverable:hover（hover 也走 boxShadowCard）排除掉，确保它们的优先级更高。
-      '&&:not(&-border):not(&-box-shadow):not(&-filled)': {
+      '&&:not(&-border):not(&-box-shadow)': {
         boxShadow: token.boxShadowTertiary
       },
       '&-box-shadow': {
-        boxShadow: token.boxShadowCard,
+        boxShadow: token.boxShadowTertiary,
         borderColor: 'transparent'
       },
       '&-col': {
@@ -70,17 +68,12 @@ const genProCardStyle = token => {
       '&-border': {
         border: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`
       },
-      '&-filled': {
-        backgroundColor: token.colorFillAlter,
-        borderColor: 'transparent',
-        boxShadow: 'none'
-      },
       '&-hoverable': {
         cursor: 'pointer',
         transition: 'box-shadow 0.3s, border-color 0.3s',
         '&:hover': {
           borderColor: 'transparent',
-          boxShadow: token.boxShadowCard
+          boxShadow: token.boxShadowTertiary
         },
         [`&${componentCls}-checked:hover`]: {
           borderColor: token.controlOutline
@@ -108,6 +101,8 @@ const genProCardStyle = token => {
       },
       '&&-ghost': {
         backgroundColor: 'transparent',
+        border: 'none',
+        boxShadow: 'none',
         [`> ${componentCls}`]: {
           '&-header': {
             paddingInlineEnd: 0,
@@ -243,47 +238,55 @@ const genProCardStyle = token => {
       }
     },
     [`${componentCls}-tabs`]: {
-      [`${token.antCls}-tabs-top > ${token.antCls}-tabs-nav`]: {
-        marginBlockEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          marginBlockStart: token.marginXS,
-          paddingInlineStart: token.padding
-        }
-      },
-      [`${token.antCls}-tabs-bottom > ${token.antCls}-tabs-nav`]: {
-        marginBlockEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingInlineStart: token.padding
-        }
-      },
-      [`${token.antCls}-tabs-left`]: {
-        [`${token.antCls}-tabs-content-holder`]: {
+      [`&${token.antCls}-tabs-top`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          marginBlockEnd: 0,
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingInlineStart: token.paddingLG
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
           [`${token.antCls}-tabs-content`]: {
-            [`${token.antCls}-tabs-tabpane`]: {
-              paddingInlineStart: 0
-            }
+            padding: token.paddingLG
           }
         }
       },
-      // 这里是为了保证 tabs 的高度和左侧的一致
-      [`${token.antCls}-tabs-left > ${token.antCls}-tabs-nav`]: {
-        marginInlineEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingBlockStart: token.padding
+      [`&${token.antCls}-tabs-bottom`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          marginBlockEnd: 0,
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingInlineStart: token.paddingLG
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
+          [`${token.antCls}-tabs-content`]: {
+            padding: token.paddingLG
+          }
         }
       },
-      [`${token.antCls}-tabs-right`]: {
-        [`${token.antCls}-tabs-content-holder`]: {
+      [`&${token.antCls}-tabs-left`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          marginInlineEnd: 0,
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingBlockStart: token.padding
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
           [`${token.antCls}-tabs-content`]: {
-            [`${token.antCls}-tabs-tabpane`]: {
-              paddingInlineStart: 0
-            }
+            padding: token.paddingLG
           }
         }
       },
-      [`${token.antCls}-tabs-right > ${token.antCls}-tabs-nav`]: {
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingBlockStart: token.padding
+      [`&${token.antCls}-tabs-right`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingBlockStart: token.padding
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
+          [`${token.antCls}-tabs-content`]: {
+            padding: token.paddingLG
+          }
         }
       }
     }
@@ -329,10 +332,7 @@ function useStyle(prefixCls) {
   return (0, _utils.useStyle)('ProCard', token => {
     const proCardToken = {
       ...token,
-      componentCls: `.${prefixCls}`,
-      // antd v6 运行时注入了 boxShadowCard，但 GlobalToken 类型里没有声明，
-      // 这里从原始 token 上透传一次。
-      boxShadowCard: token.boxShadowCard ?? token.boxShadow
+      componentCls: `.${prefixCls}`
     };
     return [genProCardStyle(proCardToken), getGridStyleByCls(proCardToken.componentCls)];
   });

package/lib/card/typing.d.ts

@@ -63,7 +63,7 @@ type CardPropsBase = Pick<AntdCardProps, 'rootClassName' | 'cover'> & {
     /** 拆分卡片方式 */
     split?: 'vertical' | 'horizontal';
     /** 卡片变体，与 antd Card variant 一致 */
-    variant?: 'outlined' | 'borderless' | 'filled';
+    variant?: 'outlined' | 'borderless';
     /**
      * 鼠标移过时可浮起
      *

package/lib/form/components/List/ListItem.js

@@ -32,6 +32,7 @@ const listToArray = children => {
  * 这是一个纯渲染辅助函数（不含任何 hook），可以在条件分支中安全调用。
  */
 function renderActionIcon({
+  key,
   iconProps,
   defaultIcon: DefaultIcon,
   actionClassName,
@@ -52,7 +53,7 @@ function renderActionIcon({
       className: (0, _clsx.clsx)(`${prefixCls}-action-icon`, actionClassName, hashId),
       onClick: onClick
     })
-  });
+  }, key);
 }
 const ProFormListItem = props => {
   const {
@@ -146,6 +147,7 @@ const ProFormListItem = props => {
 
   // 4 个操作 icon 无条件调用 renderActionIcon（纯函数，无 hook），通过 hidden 控制是否渲染
   const copyIcon = renderActionIcon({
+    key: 'copy',
     iconProps: copyIconProps,
     defaultIcon: _icons.CopyOutlined,
     actionClassName: 'action-copy',
@@ -161,6 +163,7 @@ const ProFormListItem = props => {
     }
   });
   const deleteIcon = renderActionIcon({
+    key: 'delete',
     iconProps: deleteIconProps,
     defaultIcon: _icons.DeleteOutlined,
     actionClassName: 'action-remove',
@@ -177,6 +180,7 @@ const ProFormListItem = props => {
     }
   });
   const upIcon = renderActionIcon({
+    key: 'up',
     iconProps: upIconProps,
     defaultIcon: _icons.ArrowUpOutlined,
     actionClassName: 'action-up',
@@ -188,6 +192,7 @@ const ProFormListItem = props => {
     }
   });
   const downIcon = renderActionIcon({
+    key: 'down',
     iconProps: downIconProps,
     defaultIcon: _icons.ArrowDownOutlined,
     actionClassName: 'action-down',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/pro-components",
-  "version": "3.1.13-0",
+  "version": "3.1.14-0",
   "description": "All-in-one package of @ant-design/pro-components",
   "keywords": [
     "antd",