feat: completed all functions of the card component and wrote test sa…

package.json

@@ -25,7 +25,7 @@
     "lint:fix": "eslint --fix --ext .ts,.tsx .",
     "generate:entry": "node ./script/generate-entry.js",
     "prepare": "husky",
-    "test":"echo 'test to do'"
+    "test": "echo 'test to do'"
   },
   "files": [
     "esm",
@@ -64,7 +64,7 @@
     "clsx": "^2.1.0",
     "copy-to-clipboard": "^3.3.3",
     "lodash": "~4.17.15",
-    "omi": "7.6.15",
+    "omi": "^7.6.17",
     "omi-transition": "^0.1.8",
     "tailwind-merge": "^2.2.1",
     "tdesign-icons-web-components": "^0.0.1-alpha.3"

site/sidebar.config.ts

@@ -191,6 +191,12 @@ export default [
         path: '/components/calendar',
         // component: () => import('tdesign-web-components/calendar/README.md'),
       },
+      {
+        title: 'Card 卡片',
+        name: 'card',
+        path: '/components/card',
+        component: () => import('tdesign-web-components/card/README.md'),
+      },
       {
         title: 'Collapse 折叠面板',
         name: 'Collapse',

src/card/README.md

@@ -0,0 +1,109 @@
+---
+title: Card 卡片
+description: 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
+isComponent: true
+usage: { title: '', description: '' }
+spline: base
+---
+
+### 极简卡片
+
+仅有内容的卡片形式。
+
+#### 有边框
+
+{{ bordered }}
+
+#### 无边框
+
+{{ bordered-none }}
+
+### 带header的卡片
+
+由极简卡片上方的标题栏组成，标题栏中可包含标题、图片、操作区、状态等内容。顶部栏可以定义所有的内容，以用户的自定义元素为准
+
+#### 不带分割线
+
+{{ header }}
+
+#### 带分割线
+
+{{ header-bordered }}
+
+### 带footer的卡片
+
+由极简卡片下方的底部栏组成，可包含标题、图片、操作区、状态等内容。
+
+{{ footer }}
+
+#### 全部为操作内容的底部栏
+
+{{ footer-actions }}
+
+#### 全部为展示内容的底部栏
+
+{{ footer-content }}
+
+#### 同时带展示内容与操作内容的底部栏
+
+{{ footer-content-actions }}
+
+### 同时带header和footer的卡片
+
+由顶部栏、底部栏和极简卡片组成的复杂卡片，三个区域内容可根据需要对内容进行配置。
+
+{{ header-subtitle-footer-actions }}
+
+{{ header-footer-actions }}
+
+### 不同标题内容的卡片
+
+带有主标题、副标题、或标题描述的卡片。
+
+#### 带主副标题的卡片
+
+{{ header-subtitle }}
+
+#### 带标题描述的卡片
+
+{{ header-description }}
+
+#### 同时带主副标题与标题描述的卡片
+
+{{ header-all-props }}
+
+#### 自定义loadingProps的卡片
+
+{{ custom-loading-props }}
+
+
+
+## API
+
+### Card Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式 | N
+actions | TNode | - | 卡片操作区。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+avatar | TNode | - | 卡片中的用户头像，仅在海报风格的卡片中有效。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+bordered | Boolean | true | 是否有边框 | N
+children | TNode | - | 卡片内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | 卡片内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+cover | TNode | - | 卡片封面图。值类型为字符串，会自动使用 `img` 标签输出封面图；也可以完全最定义封面图。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+description | TNode | - | 卡片描述文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+footer | TNode | - | 卡片底部内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+header | TNode | - | 卡片顶部内容，优先级高于其他所有元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N
+hoverShadow | Boolean | false | hover时是否有阴影 | N
+loading | TNode | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/card/type.ts) | N
+shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N
+size | String | medium | 尺寸。可选项：medium/small | N
+status | String | - | 卡片状态内容，仅在操作区域不在顶部时有效（即 `theme=poster2` ） | N
+subtitle | TNode | - | 卡片副标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+theme | String | normal | 卡片风格：普通风格、海报风格1（操作区域在顶部）、海报风格2（操作区域在底部）。可选项：normal/poster1/poster2 | N
+title | TNode | - | 卡片标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+
+

src/card/_example/base.tsx

@@ -0,0 +1,13 @@
+import 'tdesign-web-components/card';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  render() {
+    return (
+      <t-card bordered hoverShadow style={{ width: '400px' }}>
+        仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+      </t-card>
+    );
+  }
+}

src/card/_example/bordered-none.tsx

@@ -0,0 +1,29 @@
+import 'tdesign-web-components/card';
+
+import { bind, Component } from 'omi';
+
+export default class Button extends Component {
+  @bind
+  clickHandler() {
+    window.alert('操作');
+  }
+
+  render() {
+    return (
+      <div style={{ padding: '16px', backgroundColor: 'var(--td-bg-color-container-hover)' }}>
+        <t-card
+          title="标题"
+          actions={
+            <a href={null} onClick={this.clickHandler} style={{ cursor: 'pointer' }}>
+              操作
+            </a>
+          }
+          hoverShadow
+          style={{ width: '400px' }}
+        >
+          仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+        </t-card>
+      </div>
+    );
+  }
+}

src/card/_example/bordered.tsx

@@ -0,0 +1,13 @@
+import 'tdesign-web-components/card';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  render() {
+    return (
+      <t-card bordered style={{ width: '400px' }}>
+        仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+      </t-card>
+    );
+  }
+}

src/card/_example/custom-loading-props.tsx

@@ -0,0 +1,17 @@
+import 'tdesign-web-components/card';
+
+import { Component } from 'omi';
+
+export default class Button extends Component {
+  customProps = {
+    text: 'TDesign努力加载中...',
+  };
+
+  render() {
+    return (
+      <t-card title="标题" loading bordered style={{ width: '400px' }} loadingProps={this.customProps}>
+        仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容。可使用大中小不同的卡片尺寸，按业务需求进行呈现。
+      </t-card>
+    );
+  }
+}

src/card/_example/footer-actions.tsx

@@ -0,0 +1,126 @@
+import 'tdesign-web-components/card';
+import 'tdesign-web-components/avatar';
+import 'tdesign-web-components/button';
+import 'tdesign-web-components/divider';
+import 'tdesign-web-components/grid';
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/dropdown';
+import 'tdesign-icons-web-components/esm/components/user-1';
+import 'tdesign-icons-web-components/esm/components/thumb-up-1';
+import 'tdesign-icons-web-components/esm/components/chat';
+import 'tdesign-icons-web-components/esm/components/share';
+import 'tdesign-icons-web-components/esm/components/heart';
+import 'tdesign-icons-web-components/esm/components/more';
+
+import { Component } from 'omi';
+
+interface Option {
+  content: string;
+  value: number;
+}
+type ClickHandler = (data: Option) => void;
+
+export default class Button extends Component {
+  options: Option[] = [
+    {
+      content: '操作一',
+      value: 1,
+    },
+    {
+      content: '操作二',
+      value: 2,
+    },
+  ];
+
+  clickHandler: ClickHandler = (data) => {
+    alert(`选中【${data.value}】`);
+  };
+
+  render() {
+    return (
+      <>
+        <t-space direction="vertical">
+          <t-card
+            bordered
+            theme="poster2"
+            cover="https://tdesign.gtimg.com/site/source/card-demo.png"
+            style={{ width: '400px' }}
+            footer={
+              <t-row style={{ display: 'flex', justifyContent: 'space-around', width: '100%', alignItems: 'center' }}>
+                <t-col>
+                  <t-button theme="default" variant="text">
+                    <t-icon-thumb-up-1 />
+                  </t-button>
+                </t-col>
+                <t-divider layout="vertical"></t-divider>
+                <t-col>
+                  <t-button theme="default" variant="text">
+                    <t-icon-chat />
+                  </t-button>
+                </t-col>
+                <t-divider layout="vertical"></t-divider>
+                <t-col>
+                  <t-button theme="default" variant="text">
+                    <t-icon-share />
+                  </t-button>
+                </t-col>
+              </t-row>
+            }
+          ></t-card>
+          <t-card
+            bordered
+            theme="poster2"
+            cover="https://tdesign.gtimg.com/site/source/card-demo.png"
+            style={{ width: '400px' }}
+            actions={
+              <t-col flex="auto" align="middle">
+                <t-dropdown options={this.options} onClick={this.clickHandler}>
+                  <t-button variant="text" shape="square">
+                    <t-icon-more />
+                  </t-button>
+                </t-dropdown>
+              </t-col>
+            }
+            footer={
+              <t-row>
+                <t-col>
+                  <t-button theme="default" variant="text">
+                    <t-icon-heart />
+                  </t-button>
+                </t-col>
+                <t-col>
+                  <t-button theme="default" variant="text">
+                    <t-icon-share />
+                  </t-button>
+                </t-col>
+              </t-row>
+            }
+          ></t-card>
+          <t-card
+            bordered
+            theme="poster2"
+            cover="https://tdesign.gtimg.com/site/source/card-demo.png"
+            style={{ width: '400px' }}
+            actions={
+              <t-col flex="auto" align="middle">
+                <t-dropdown options={this.options} onClick={this.clickHandler}>
+                  <t-button variant="text" shape="square">
+                    <t-icon-more />
+                  </t-button>
+                </t-dropdown>
+              </t-col>
+            }
+            footer={
+              <t-avatar-group max={2}>
+                <t-avatar icon={<t-icon-user-1 />}></t-avatar>
+                <t-avatar>Z</t-avatar>
+                <t-avatar>Y</t-avatar>
+                <t-avatar>Y</t-avatar>
+              </t-avatar-group>
+            }
+          ></t-card>
+        </t-space>
+      </>
+    );
+  }
+}