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

package/es/list/Item.js

@@ -44,7 +44,8 @@ function ProListItem(props) {
     getPrefixCls
   } = useContext(ConfigProvider.ConfigContext);
   const {
-    hashId
+    hashId,
+    token
   } = useContext(ProProvider);
   const prefixCls = getPrefixCls('pro-list', props.prefixCls);
   const defaultClassName = `${prefixCls}-row`;
@@ -102,7 +103,8 @@ function ProListItem(props) {
     [`${defaultClassName}-type-${type}`]: !!type,
     [`${defaultClassName}-editable`]: isEditable
   }, hashId, defaultClassName);
-  const needExpanded = expanded || Object.values(expandableConfig || {}).length === 0;
+  const hasExpandBehavior = expandableConfig != null && Object.keys(expandableConfig).length > 0;
+  const needExpanded = expanded || !hasExpandBehavior;
   const expandedRowDom = expandedRowRender && expandedRowRender(record, index, indentSize, expanded);
   const actionsArray = useMemo(() => actions ? React.Children.toArray(actions) : undefined, [actions]);
   const titleDom = title || subTitle ? /*#__PURE__*/_jsxs("div", {
@@ -113,8 +115,8 @@ function ProListItem(props) {
       }),
       children: title
     }), subTitle && /*#__PURE__*/_jsx("div", {
-      className: clsx(`${defaultClassName}-subTitle`, hashId, {
-        [`${defaultClassName}-subTitle-editable`]: isEditable
+      className: clsx(`${defaultClassName}-sub-title`, hashId, {
+        [`${defaultClassName}-sub-title-editable`]: isEditable
       }),
       children: subTitle
     })]
@@ -129,7 +131,7 @@ function ProListItem(props) {
     })
   }) : null;
   const itemProps = onItem?.(record, index);
-  const hasExpandableConfig = Object.keys(expandableConfig || {}).length > 0;
+  const hasExpandableConfig = hasExpandBehavior;
   const expandedRowClassStr = typeof expandedRowClassName === 'function' ? expandedRowClassName(record, index, indentSize) : expandedRowClassName;
   const headerDom = typeof itemHeaderRender === 'function' ? itemHeaderRender(record, index, metaDom) : metaDom;
 
@@ -157,7 +159,7 @@ function ProListItem(props) {
         subTitle: subTitle,
         extra: actionsArray,
         bodyStyle: {
-          padding: 24,
+          padding: token.paddingLG,
           ...cardProps.bodyStyle
         },
         ...itemProps,
@@ -190,6 +192,7 @@ function ProListItem(props) {
       [propsClassName]: propsClassName !== defaultClassName
     }),
     ...rest,
+    actions: actionsArray,
     extra: extra,
     ...onRow?.(record, index),
     ...itemProps,
@@ -220,14 +223,7 @@ function ProListItem(props) {
             expanded,
             record
           })]
-        }), 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]
+        }), headerDom]
       }), needExpanded && (content || expandedRowDom) && /*#__PURE__*/_jsxs("div", {
         className: clsx(`${className}-content`, hashId),
         children: [content, expandedRowRender && rowSupportExpand && /*#__PURE__*/_jsx("div", {

package/es/list/ListView.js

@@ -98,21 +98,17 @@ function ListView(props) {
   const mergedExpandedKeys = React.useMemo(() => new Set(expandedRowKeys || innerExpandedKeys || []), [expandedRowKeys, innerExpandedKeys]);
   const onTriggerExpand = React.useCallback(record => {
     const key = getRowKey(record, dataSource.indexOf(record));
-    let newExpandedKeys;
     const hasKey = mergedExpandedKeys.has(key);
+    const nextKeys = new Set(mergedExpandedKeys);
     if (hasKey) {
-      mergedExpandedKeys.delete(key);
-      newExpandedKeys = [...mergedExpandedKeys];
+      nextKeys.delete(key);
     } else {
-      newExpandedKeys = [...mergedExpandedKeys, key];
+      nextKeys.add(key);
     }
+    const newExpandedKeys = [...nextKeys];
     setInnerExpandedKeys(newExpandedKeys);
-    if (onExpand) {
-      onExpand(!hasKey, record);
-    }
-    if (onExpandedRowsChange) {
-      onExpandedRowsChange(newExpandedKeys);
-    }
+    onExpand?.(!hasKey, record);
+    onExpandedRowsChange?.(newExpandedKeys);
   }, [getRowKey, mergedExpandedKeys, dataSource, onExpand, onExpandedRowsChange]);
 
   /** 展开收起功能区域 end */
@@ -153,8 +149,8 @@ function ListView(props) {
         ...item,
         index
       }) || {};
-      const isChecked = selectedKeySet.has(recordKey || index);
       const itemKey = getRowKey(item, index);
+      const isChecked = selectedKeySet.has(itemKey);
       const cardProps = rest.grid ? {
         ...itemCardProps,
         ...rest.grid,

package/es/list/ProListBase.d.ts

@@ -64,7 +64,6 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     style?: React.CSSProperties;
     extra?: React.ReactNode;
     actions?: React.ReactNode[];
-    colStyle?: React.CSSProperties;
 }
 export declare const ProListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>> & {
     Meta: typeof ProListItemMeta;

package/es/list/ProListBase.js

@@ -7,7 +7,6 @@ import { clsx } from 'clsx';
 import React, { useContext, useMemo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 export const ProListContext = /*#__PURE__*/React.createContext({});
 export const ProListItemMeta = ({
   prefixCls: customizePrefixCls,
@@ -48,7 +47,6 @@ const InternalProListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     actions,
     extra,
     className,
-    colStyle,
     ...rest
   } = props;
   const {
@@ -67,29 +65,27 @@ const InternalProListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: action
     }, i))
   }, "actions") : null;
-  const itemChildren = /*#__PURE__*/_jsx("div", {
+  const isVerticalWithExtra = itemLayout === 'vertical' && extra != null;
+  const extraContent = extra != null ? /*#__PURE__*/_jsx("div", {
+    className: `${prefixCls}-item-extra`,
+    children: extra
+  }, "extra") : null;
+  const mainContent = /*#__PURE__*/_jsxs("div", {
+    className: `${prefixCls}-item-main`,
+    children: [children, actionsContent, !isVerticalWithExtra && extraContent]
+  }, "main");
+  const itemChildren = /*#__PURE__*/_jsxs("div", {
+    ref: ref,
     ...rest,
     className: clsx(`${prefixCls}-item`, className),
-    children: itemLayout === 'vertical' && extra ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: `${prefixCls}-item-main`,
-        children: [children, actionsContent]
-      }, "content"), /*#__PURE__*/_jsx("div", {
-        className: `${prefixCls}-item-extra`,
-        children: extra
-      }, "extra")]
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [children, actionsContent, extra != null && /*#__PURE__*/_jsx(React.Fragment, {
-        children: extra
-      }, "extra")]
-    })
+    children: [mainContent, isVerticalWithExtra && extraContent]
   });
   if (grid) {
     return /*#__PURE__*/_jsx("div", {
-      ref: ref,
       style: {
-        width: '100%',
-        ...colStyle
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%'
       },
       children: itemChildren
     });
@@ -116,6 +112,14 @@ const defaultPaginationProps = {
   total: 0,
   position: 'bottom'
 };
+const DEFAULT_SCREENS = {
+  xs: true,
+  sm: true,
+  md: true,
+  lg: false,
+  xl: false,
+  xxl: false
+};
 const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListContainerInner(props, ref) {
   const {
     pagination = false,
@@ -179,23 +183,15 @@ const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListCont
     }, key);
   };
   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;
+    if (rawScreens == null) return DEFAULT_SCREENS;
     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
+      xxl: rawScreens.xxl ?? DEFAULT_SCREENS.xxl,
+      xl: rawScreens.xl ?? DEFAULT_SCREENS.xl,
+      lg: rawScreens.lg ?? DEFAULT_SCREENS.lg,
+      md: rawScreens.md ?? DEFAULT_SCREENS.md,
+      sm: rawScreens.sm ?? DEFAULT_SCREENS.sm,
+      xs: rawScreens.xs ?? DEFAULT_SCREENS.xs
     };
   }, [rawScreens]);
 
@@ -223,18 +219,12 @@ const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListCont
       display: 'flex',
       flexWrap: 'wrap'
     };
-
-    // 处理 gutter
     if (grid.gutter) {
-      const [horizontal, vertical] = Array.isArray(grid.gutter) ? grid.gutter : [grid.gutter, 0];
+      const [horizontal, vertical] = Array.isArray(grid.gutter) ? grid.gutter : [grid.gutter, grid.gutter];
       const h = Number(horizontal) || 0;
       const v = Number(vertical) || 0;
-
-      // flex 容器使用负 margin 来抵消子元素的 padding
-      style.marginLeft = -h / 2;
-      style.marginRight = -h / 2;
-      style.marginTop = -v / 2;
-      style.marginBottom = -v / 2;
+      style.marginInline = `${-h / 2}px`;
+      style.marginBlock = `${-v / 2}px`;
     }
     return style;
   }, [grid?.gutter]);
@@ -251,16 +241,12 @@ const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListCont
     const style = {
       display: 'flex'
     };
-
-    // 处理 gutter
     if (gutter) {
-      const [horizontal, vertical] = Array.isArray(gutter) ? gutter : [gutter, 0];
+      const [horizontal, vertical] = Array.isArray(gutter) ? gutter : [gutter, gutter];
       const h = Number(horizontal) || 0;
       const v = Number(vertical) || 0;
-      style.paddingLeft = h / 2;
-      style.paddingRight = h / 2;
-      style.paddingTop = v / 2;
-      style.paddingBottom = v / 2;
+      style.paddingInline = `${h / 2}px`;
+      style.paddingBlock = `${v / 2}px`;
     }
 
     // 计算每列的宽度（确保 column 有效，避免除以零）
@@ -280,8 +266,10 @@ const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListCont
   if (splitDataSource.length > 0) {
     const items = splitDataSource.map((item, idx) => renderInternalItem(item, idx));
     childrenContent = grid ? /*#__PURE__*/_jsx("div", {
+      className: `${prefixCls}-grid-container`,
       style: gridContainerStyle,
       children: items.map((child, idx) => /*#__PURE__*/_jsx("div", {
+        className: `${prefixCls}-grid-col`,
         style: colStyle,
         children: child
       }, child?.key ?? idx))
@@ -340,7 +328,6 @@ const ProListContainerInner = /*#__PURE__*/React.forwardRef(function ProListCont
       ...rest,
       children: /*#__PURE__*/_jsxs(Spin, {
         spinning: isLoading,
-        delay: 100,
         children: [showPaginationTop && paginationNode, header && /*#__PURE__*/_jsx("div", {
           className: `${prefixCls}-header`,
           children: header

package/es/list/index.js

@@ -78,7 +78,7 @@ function InternalProList(props) {
     ...rest
   } = props;
   const actionRef = useRef();
-  useImperativeHandle(rest.actionRef, () => actionRef.current, [actionRef.current]);
+  useImperativeHandle(rest.actionRef, () => actionRef.current);
 
   // metas 废弃提示，仅在开发环境触发一次
   useEffect(() => {

package/es/list/style/index.js

@@ -11,6 +11,54 @@ const genTechUiListActiveKeyframes = token => new Keyframes('techUiListActive',
     backgroundColor: 'unset'
   }
 });
+const genProListResponsiveStyle = token => {
+  const {
+    screenMD,
+    screenSM,
+    contentWidth
+  } = token;
+  return {
+    [`@media screen and (max-width: ${screenMD}px)`]: {
+      [token.componentCls]: {
+        [`${token.proComponentsCls}-list-item`]: {
+          [`${token.proComponentsCls}-list-item-action`]: {
+            marginInlineStart: token.marginLG
+          }
+        },
+        [`&${token.proComponentsCls}-list-vertical`]: {
+          [`${token.proComponentsCls}-list-item`]: {
+            [`${token.proComponentsCls}-list-item-extra`]: {
+              marginInlineStart: token.marginLG
+            }
+          }
+        }
+      }
+    },
+    [`@media screen and (max-width: ${screenSM}px)`]: {
+      [token.componentCls]: {
+        [`${token.proComponentsCls}-list-item`]: {
+          flexWrap: 'wrap',
+          [`${token.proComponentsCls}-list-item-action`]: {
+            marginInlineStart: token.marginSM
+          }
+        },
+        [`&${token.proComponentsCls}-list-vertical`]: {
+          [`${token.proComponentsCls}-list-item`]: {
+            flexWrap: 'wrap-reverse',
+            [`${token.proComponentsCls}-list-item-main`]: {
+              minWidth: contentWidth
+            },
+            [`${token.proComponentsCls}-list-item-extra`]: {
+              marginBlockStart: 'auto',
+              marginBlockEnd: token.margin,
+              marginInline: 'auto'
+            }
+          }
+        }
+      }
+    }
+  };
+};
 const genProListStyle = token => {
   const techUiListActive = genTechUiListActiveKeyframes(token);
   return {
@@ -35,17 +83,25 @@ const genProListStyle = token => {
       },
       [`${token.proComponentsCls}-list-item`]: {
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
         cursor: 'pointer',
         flex: 1,
         minWidth: 0,
         padding: token.paddingXS,
-        alignItems: 'flex-start',
         borderRadius: token.borderRadius,
         listStyle: 'none',
         '& > *:first-child': {
           flex: 1,
           minWidth: 0
+        },
+        [`${token.proComponentsCls}-list-item-action`]: {
+          flex: '0 0 auto',
+          alignSelf: 'center',
+          marginInlineStart: token.marginXXL
+        },
+        [`${token.proComponentsCls}-list-item-extra`]: {
+          alignSelf: 'center'
         }
       },
       '&-filled': {
@@ -79,7 +135,15 @@ const genProListStyle = token => {
         gap: token.marginXS,
         borderBlockEnd: 'none',
         margin: 0,
-        minWidth: 0
+        minWidth: 0,
+        color: token.colorText,
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight
+      },
+      [`${token.proComponentsCls}-list-item-meta-description`]: {
+        color: token.colorTextDescription,
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight
       },
       '&-split': {
         [`${token.componentCls}-row`]: {
@@ -89,11 +153,7 @@ const genProListStyle = token => {
           }
         },
         [`${token.proComponentsCls}-list-item`]: {
-          borderRadius: 0,
-          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
-          '&:last-child': {
-            borderBlockEnd: 'none'
-          }
+          borderRadius: 0
         }
       },
       '&-no-split': {
@@ -104,6 +164,149 @@ const genProListStyle = token => {
           borderBlockEnd: 'none'
         }
       },
+      '&-grid': {
+        [`${token.componentCls}-row`]: {
+          borderBlockEnd: 'none'
+        },
+        [`${token.componentCls}-grid-container`]: {
+          display: 'flex',
+          flexWrap: 'wrap'
+        },
+        [`${token.componentCls}-grid-col`]: {
+          display: 'flex',
+          '> *': {
+            flex: 1,
+            minWidth: 0
+          }
+        },
+        [`${token.proComponentsCls}-list-item`]: {
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          borderBlockEnd: 'none'
+        }
+      },
+      // 垂直布局：样式必须在 list 根级别，因 vertical 类在 list 根节点上
+      [`&${token.proComponentsCls}-list-vertical`]: {
+        [`${token.proComponentsCls}-list-item`]: {
+          alignItems: 'initial'
+        },
+        [`${token.proComponentsCls}-list-item-main`]: {
+          display: 'block',
+          flex: 1,
+          [`${token.proComponentsCls}-list-item-meta`]: {
+            marginBlockEnd: token.padding,
+            [`${token.proComponentsCls}-list-item-meta-title`]: {
+              marginBlockStart: 0,
+              marginBlockEnd: token.paddingSM,
+              color: token.colorText,
+              fontSize: token.fontSizeLG,
+              lineHeight: token.lineHeightLG
+            }
+          },
+          [`${token.proComponentsCls}-list-item-action`]: {
+            marginBlockStart: token.padding,
+            marginInlineStart: 'auto',
+            '> *': {
+              paddingBlock: 0,
+              paddingInline: token.padding,
+              '&:first-child': {
+                paddingInlineStart: 0
+              }
+            }
+          }
+        },
+        [`${token.componentCls}-row`]: {
+          marginBlockEnd: token.marginSM,
+          '&-header-title': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            justifyContent: 'center'
+          },
+          '&-content': {
+            marginBlock: 0,
+            marginInline: 0
+          },
+          '&-sub-title': {
+            marginBlockStart: token.marginXS
+          }
+        },
+        [`${token.proComponentsCls}-list-item-extra`]: {
+          display: 'flex',
+          alignItems: 'center',
+          marginInlineStart: token.marginXL,
+          [`${token.componentCls}-row-description`]: {
+            marginBlockStart: token.margin
+          }
+        },
+        [`${token.proComponentsCls}-list-bordered ${token.proComponentsCls}-list-item`]: {
+          paddingInline: 0
+        },
+        [`${token.componentCls}-row-show-extra-hover`]: {
+          [`${token.proComponentsCls}-list-item-extra`]: {
+            display: 'none'
+          }
+        },
+        [`${token.proComponentsCls}-list-pagination`]: {
+          marginBlockStart: token.margin,
+          marginBlockEnd: token.margin
+        },
+        [`${token.proComponentsCls}-list-list`]: {
+          '&-item': {
+            cursor: 'pointer',
+            paddingBlock: token.paddingSM,
+            paddingInline: token.paddingSM
+          }
+        },
+        [`${token.proComponentsCls}-list-row`]: {
+          '&-header': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            paddingBlock: 0,
+            paddingInline: 0,
+            borderBlockEnd: 'none'
+          },
+          '&-content': {
+            marginBlockStart: token.marginSM,
+            marginInlineStart: 0
+          },
+          [`${token.proComponentsCls}-list-item`]: {
+            width: '100%',
+            paddingBlock: token.paddingSM,
+            paddingInlineStart: token.paddingLG,
+            paddingInlineEnd: token.paddingMD,
+            [`${token.proComponentsCls}-list-item-meta-avatar`]: {
+              display: 'flex',
+              alignItems: 'center',
+              marginInlineEnd: token.marginXS
+            },
+            [`${token.proComponentsCls}-list-item-meta-title`]: {
+              marginBlockStart: 0,
+              marginBlockEnd: token.paddingSM,
+              marginInline: 0,
+              fontSize: token.fontSizeLG,
+              lineHeight: token.lineHeightLG
+            }
+          }
+        }
+      },
+      [`${token.proComponentsCls}-list-item-main`]: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        flex: 1,
+        minWidth: 0,
+        width: '100%',
+        '& > *:first-child': {
+          flex: 1,
+          minWidth: 0
+        },
+        [`${token.proComponentsCls}-list-item-action`]: {
+          alignSelf: 'center'
+        }
+      },
       [`${token.proComponentsCls}-list-item-action,
         ${token.proComponentsCls}-card-extra,
         ${token.proComponentsCls}-card-actions`]: {
@@ -182,7 +385,7 @@ const genProListStyle = token => {
             flexShrink: 9,
             marginBlock: 0,
             marginInline: 0,
-            lineHeight: 22
+            lineHeight: token.lineHeightLG
           }
         },
         [`&${token.componentCls}-row-editable`]: {
@@ -255,11 +458,11 @@ const genProListStyle = token => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          height: 44,
+          height: token.controlHeightLG,
           paddingInline: token.paddingLG,
           paddingBlock: 0,
           color: token.colorTextSecondary,
-          lineHeight: 44,
+          lineHeight: token.controlHeightLG,
           background: setAlpha(token.colorTextBase, 0.02),
           '&-actions': {
             display: 'none'
@@ -276,14 +479,14 @@ const genProListStyle = token => {
           display: 'flex',
           fontSize: token.fontSizeSM,
           cursor: 'pointer',
-          height: 24,
+          height: token.controlHeightSM,
           color: token.colorTextSecondary,
           '> .anticon > svg': {
             transition: '0.3s'
           }
         },
         '&-expanded': {
-          ' > .anticon > svg': {
+          '> .anticon > svg': {
             transform: 'rotate(90deg)'
           }
         },
@@ -304,9 +507,10 @@ const genProListStyle = token => {
           display: 'flex',
           flex: '1',
           flexDirection: 'column',
-          marginBlock: 0
+          marginBlock: 0,
+          marginInlineStart: token.marginXL
         },
-        '&-subTitle': {
+        '&-sub-title': {
           display: 'inline-flex',
           flexWrap: 'wrap',
           alignItems: 'center',
@@ -359,42 +563,9 @@ const genProListStyle = token => {
           alignItems: 'center'
         },
         '&-checkbox': {
-          width: 16,
+          width: token.fontSizeLG,
           marginInlineEnd: token.marginSM
         },
-        [`${token.proComponentsCls}-list-vertical`]: {
-          [`${token.componentCls}-row`]: {
-            marginBlockEnd: token.marginSM
-          },
-          '&-header-title': {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            justifyContent: 'center'
-          },
-          '&-content': {
-            marginBlock: 0,
-            marginInline: 0
-          },
-          '&-subTitle': {
-            marginBlockStart: token.marginXS
-          },
-          [`${token.proComponentsCls}-list-item-extra`]: {
-            display: 'flex',
-            alignItems: 'center',
-            [`${token.componentCls}-row-description`]: {
-              marginBlockStart: token.margin
-            }
-          },
-          [`${token.proComponentsCls}-list-bordered ${token.proComponentsCls}-list-item`]: {
-            paddingInline: 0
-          },
-          [`${token.componentCls}-row-show-extra-hover`]: {
-            [`${token.proComponentsCls}-list-item-extra `]: {
-              display: 'none'
-            }
-          }
-        },
         [`${token.proComponentsCls}-list-pagination`]: {
           marginBlockStart: token.margin,
           marginBlockEnd: token.margin
@@ -405,28 +576,6 @@ const genProListStyle = token => {
             paddingBlock: token.paddingSM,
             paddingInline: token.paddingSM
           }
-        },
-        [`${token.proComponentsCls}-list-vertical ${token.proComponentsCls}-list-row`]: {
-          '&-header': {
-            paddingBlock: 0,
-            paddingInline: 0,
-            borderBlockEnd: 'none'
-          },
-          [`${token.proComponentsCls}-list-item`]: {
-            width: '100%',
-            paddingBlock: token.paddingSM,
-            paddingInlineStart: token.paddingLG,
-            paddingInlineEnd: token.paddingMD,
-            [`${token.proComponentsCls}-list-item-meta-avatar`]: {
-              display: 'flex',
-              alignItems: 'center',
-              marginInlineEnd: token.marginXS
-            },
-            [`${token.proComponentsCls}-list-item-meta-title`]: {
-              marginBlock: 0,
-              marginInline: 0
-            }
-          }
         }
       }
     }
@@ -438,6 +587,6 @@ export function useStyle(prefixCls) {
       ...token,
       componentCls: `.${prefixCls}`
     };
-    return [genProListStyle(proListToken)];
+    return [genProListStyle(proListToken), genProListResponsiveStyle(proListToken)];
   });
 }