refactor: card #6258

Author: tangjinzhou

components/card/Card.tsx

@@ -1,15 +1,14 @@
 import type { VNodeTypes, PropType, VNode, ExtractPropTypes, CSSProperties } from 'vue';
 import { isVNode, defineComponent, renderSlot } from 'vue';
 import Tabs from '../tabs';
-import Row from '../row';
-import Col from '../col';
 import PropTypes from '../_util/vue-types';
 import { flattenChildren, isEmptyElement, filterEmptyWithUndefined } from '../_util/props-util';
 import type { SizeType } from '../config-provider';
 import isPlainObject from 'lodash-es/isPlainObject';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import devWarning from '../vc-util/devWarning';
 import useStyle from './style';
+import Skeleton from '../skeleton';
 export interface CardTabListType {
   key: string;
   tab: any;
@@ -112,34 +111,10 @@ const Card = defineComponent({
         [`${pre}-type-${type}`]: !!type,
         [`${pre}-rtl`]: direction.value === 'rtl',
       };
-
-      const loadingBlockStyle =
-        bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: '24px' } : undefined;
-
-      const block = <div class={`${pre}-loading-block`} />;
       const loadingBlock = (
-        <div class={`${pre}-loading-content`} style={loadingBlockStyle}>
-          <Row gutter={8}>
-            <Col span={22}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={8}>{block}</Col>
-            <Col span={15}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={6}>{block}</Col>
-            <Col span={18}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={13}>{block}</Col>
-            <Col span={9}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={4}>{block}</Col>
-            <Col span={3}>{block}</Col>
-            <Col span={16}>{block}</Col>
-          </Row>
-        </div>
+        <Skeleton loading active paragraph={{ rows: 4 }} title={false}>
+          {children}
+        </Skeleton>
       );
 
       const hasActiveTabKey = activeTabKey !== undefined;
@@ -195,7 +170,7 @@ const Card = defineComponent({
         actions && actions.length ? <ul class={`${pre}-actions`}>{getAction(actions)}</ul> : null;
 
       return wrapSSR(
-        <div ref="cardContainerRef" {...attrs} class={classString}>
+        <div ref="cardContainerRef" {...attrs} class={[classString, attrs.class]}>
           {head}
           {coverDom}
           {children && children.length ? body : null}

components/card/Meta.tsx

@@ -1,14 +1,14 @@
 import type { ExtractPropTypes } from 'vue';
 import { defineComponent } from 'vue';
-import PropTypes from '../_util/vue-types';
 import { getPropsSlot } from '../_util/props-util';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
+import { vNodeType } from '../_util/type';
 
 export const cardMetaProps = () => ({
   prefixCls: String,
-  title: PropTypes.any,
-  description: PropTypes.any,
-  avatar: PropTypes.any,
+  title: vNodeType(),
+  description: vNodeType(),
+  avatar: vNodeType(),
 });
 export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardMetaProps>>>;
 export default defineComponent({

components/card/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Display
 title: Card
-cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Simple rectangular container.

components/card/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 数据展示
 title: Card
 subtitle: 卡片
-cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 通用卡片容器