docs(card): use card semantic-dom instead of table (#50390)

Co-authored-by: codefactor-io <support@codefactor.io>

components/card/demo/_semantic.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
+import { Avatar, Card } from 'antd';
+
+const { Meta } = Card;
+
+const locales = {
+  cn: {
+    header: '设置卡片头部区域',
+    body: '设置卡片内容区域',
+    extra: '设置卡片右上角的操作区域',
+    title: '设置卡片标题',
+    actions: '设置卡片底部操作组',
+    cover: '设置标题封面',
+  },
+  en: {
+    header: 'set `header` of card ',
+    body: 'set `body` of card',
+    extra: 'set `extra` of card ',
+    title: 'set `title` of card ',
+    actions: 'set `actions` of card',
+    cover: 'set `cover` of card ',
+  },
+};
+
+const BlockCard: React.FC<React.PropsWithChildren> = (props) => {
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={divRef} style={{ position: 'absolute', inset: 0 }}>
+      <Card
+        {...props}
+        title="Card title"
+        extra="More"
+        style={{ width: 300 }}
+        cover={
+          <img
+            alt="example"
+            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+          />
+        }
+        actions={[
+          <SettingOutlined key="setting" />,
+          <EditOutlined key="edit" />,
+          <EllipsisOutlined key="ellipsis" />,
+        ]}
+      />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      semantics={[
+        { name: 'header', desc: locale.header, version: '5.14.0' },
+        { name: 'body', desc: locale.body, version: '5.14.0' },
+        { name: 'extra', desc: locale.extra, version: '5.14.0' },
+        { name: 'title', desc: locale.title, version: '5.14.0' },
+        { name: 'actions', desc: locale.actions, version: '5.14.0' },
+        { name: 'cover', desc: locale.cover, version: '5.14.0' },
+      ]}
+    >
+      <BlockCard>
+        <Meta
+          avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />}
+          title="Card Meta title"
+          description="This is the description"
+        />
+      </BlockCard>
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/card/index.en-US.md

@@ -34,8 +34,6 @@ Common props ref：[Common props](/docs/react/common-props)
 <Card title="Card title">Card content</Card>
 ```
 
-### Card
-
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | actions | The action list, shows at the bottom of the Card | Array&lt;ReactNode> | - |  |
@@ -52,8 +50,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | tabProps | [Tabs](/components/tabs/#tabs) | - | - |  |
 | title | Card title | ReactNode | - |  |
 | type | Card style type, can be set to `inner` or not set | string | - |  |
-| classNames | Config Card build-in module's className | Record<SemanticDOM, string> | - | 5.14.0 |
-| styles | Config Card build-in module's style | Record<SemanticDOM, string> | - | 5.14.0 |
+| classNames | Config Card build-in module's className | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.14.0 |
+| styles | Config Card build-in module's style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.14.0 |
 | onTabChange | Callback when tab is switched | (key) => void | - |  |
 
 ### Card.Grid
@@ -74,16 +72,9 @@ Common props ref：[Common props](/docs/react/common-props)
 | style       | The style object of container | CSSProperties | -       |         |
 | title       | Title content                 | ReactNode     | -       |         |
 
-### `styles` 和 `classNames` attribute
+## Semantic DOM
 
-| Property | Description           | Version |
-| -------- | --------------------- | ------- |
-| header   | set `header` of card  | 5.14.0  |
-| body     | set `body` of card    | 5.14.0  |
-| extra    | set `extra` of card   | 5.14.0  |
-| title    | set `title` of card   | 5.14.0  |
-| actions  | set `actions` of card | 5.14.0  |
-| cover    | set `cover` of card   | 5.14.0  |
+<code src="./demo/_semantic.tsx" simplify="true"></code>
 
 ## Design Token
 

components/card/index.zh-CN.md

@@ -35,8 +35,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAA
 <Card title="卡片标题">卡片内容</Card>
 ```
 
-### Card
-
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | actions | 卡片操作组，位置在卡片底部 | Array&lt;ReactNode> | - |  |
@@ -53,8 +51,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAA
 | tabProps | [Tabs](/components/tabs-cn#tabs) | - | - |  |
 | title | 卡片标题 | ReactNode | - |  |
 | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |  |
-| classNames | 配置卡片内置模块的 className | Record<SemanticDOM, string> | - | 5.14.0 |
-| styles | 配置卡片内置模块的 style | Record<SemanticDOM, string> | - | 5.14.0 |
+| classNames | 配置卡片内置模块的 className | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.14.0 |
+| styles | 配置卡片内置模块的 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.14.0 |
 | onTabChange | 页签切换的回调 | (key) => void | - |  |
 
 ### Card.Grid
@@ -75,16 +73,9 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAA
 | style       | 定义容器类名的样式 | CSSProperties | -      |      |
 | title       | 标题内容           | ReactNode     | -      |      |
 
-### `styles` 和 `classNames` 属性
+## Semantic DOM
 
-| 名称    | 说明                     | 版本   |
-| ------- | ------------------------ | ------ |
-| header  | 设置卡片头部区域         | 5.14.0 |
-| body    | 设置卡片内容区域         | 5.14.0 |
-| extra   | 设置卡片右上角的操作区域 | 5.14.0 |
-| title   | 设置卡片标题             | 5.14.0 |
-| actions | 设置卡片底部操作组       | 5.14.0 |
-| cover   | 设置标题封面             | 5.14.0 |
+<code src="./demo/_semantic.tsx" simplify="true"></code>
 
 ## 主题变量（Design Token）
 

scripts/__snapshots__/check-site.ts.snap

@@ -40,9 +40,9 @@ exports[`site test Component components/calendar en Page 1`] = `1`;
 
 exports[`site test Component components/calendar zh Page 1`] = `1`;
 
-exports[`site test Component components/card en Page 1`] = `4`;
+exports[`site test Component components/card en Page 1`] = `3`;
 
-exports[`site test Component components/card zh Page 1`] = `4`;
+exports[`site test Component components/card zh Page 1`] = `3`;
 
 exports[`site test Component components/carousel en Page 1`] = `2`;