新增Empty组件

site/mobile/mobile.config.js

@@ -262,5 +262,10 @@ export default {
       name: 'table',
       component: () => import('tdesign-mobile-react/table/_example/index.tsx'),
     },
+    {
+      title: 'Empty 空状态',
+      name: 'empty',
+      component: () => import('tdesign-mobile-react/empty/_example/index.tsx'),
+    },
   ],
 };

site/web/site.config.js

@@ -250,6 +250,12 @@ export default {
           path: '/mobile-react/components/count-down',
           component: () => import('tdesign-mobile-react/count-down/count-down.md'),
         },
+        {
+          title: 'Empty 空状态',
+          name: 'empty',
+          path: '/mobile-react/components/empty',
+          component: () => import('tdesign-mobile-react/empty/empty.md'),
+        },
         {
           title: 'Image 图片',
           name: 'image',

src/empty/Empty.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import TImage from '../image';
+import { TdEmptyProps } from './type';
+import { StyledProps } from '../common';
+import parseTNode from '../_util/parseTNode';
+import { usePrefixClass } from '../hooks/useClass';
+
+export interface EmptyProps extends TdEmptyProps, StyledProps {}
+
+const Empty: React.FC<EmptyProps> = (props) => {
+  const { action, description, icon, image } = props;
+
+  const emptyClass = usePrefixClass('empty');
+
+  const renderThumb = () => {
+    const tNodeImage = parseTNode(image);
+    if (tNodeImage) {
+      return typeof image === 'string' ? <TImage src={image} /> : tNodeImage;
+    }
+
+    const tNodeIcon = parseTNode(icon);
+    if (tNodeIcon) {
+      return <div className={`${emptyClass}__icon`}>{tNodeIcon}</div>;
+    }
+    return null;
+  };
+
+  return (
+    <div className={`${emptyClass}`}>
+      <div className={`${emptyClass}__thumb`}>{renderThumb()}</div>
+      {description && <div className={`${emptyClass}__description`}>{description}</div>}
+      {action && <div className={`${emptyClass}__actions`}>{action}</div>}
+    </div>
+  );
+};
+
+Empty.displayName = 'Empty';
+
+export default Empty;

src/empty/_example/base.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Empty } from 'tdesign-mobile-react';
+import { InfoCircleFilledIcon } from 'tdesign-icons-react';
+
+export default function Base() {
+  return <Empty icon={<InfoCircleFilledIcon />} description="描述文字" />;
+}

src/empty/_example/buttonEmpty.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Empty, Button } from 'tdesign-mobile-react';
+import { InfoCircleFilledIcon } from 'tdesign-icons-react';
+
+export default function ButtonEmpty() {
+  return (
+    <Empty
+      icon={<InfoCircleFilledIcon />}
+      description="描述文字"
+      action={
+        <Button theme="primary" size="large">
+          操作按钮
+        </Button>
+      }
+    />
+  );
+}

src/empty/_example/imageEmpty.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Empty } from 'tdesign-mobile-react';
+
+export default function ImageEmpty() {
+  return <Empty image="https://tdesign.gtimg.com/mobile/demos/empty1.png" description="描述文字" />;
+}

src/empty/_example/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import BaseDemo from './base';
+import ImageEmptyDemo from './imageEmpty';
+import ButtonEmptyDemo from './buttonEmpty';
+
+export default function EmptyDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="Empty 空状态" summary="用于空状态时的占位提示。" />
+      <TDemoBlock summary="图标空状态">
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="自定义图片空状态">
+        <ImageEmptyDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="带操作空状态">
+        <ButtonEmptyDemo />
+      </TDemoBlock>
+    </div>
+  );
+}

src/empty/empty.en-US.md

@@ -0,0 +1,14 @@
+:: BASE_DOC ::
+
+## API
+
+### Empty Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+action | TElement | - | action block。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+description | TNode | - | empty component description。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+icon | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+image | TNode | - | image url, or Image component props, or custom any node you need.。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N

src/empty/empty.md

@@ -0,0 +1,14 @@
+:: BASE_DOC ::
+
+## API
+
+### Empty Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+action | TElement | - | 操作按钮。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+description | TNode | - | 描述文字。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+icon | TNode | - | 图标。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+image | TNode | - | 图片地址。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N

src/empty/index.ts

@@ -0,0 +1,9 @@
+import _Empty from './Empty';
+
+import './style/index.js';
+
+export type { EmptyProps } from './Empty';
+export * from './type';
+
+export const Empty = _Empty;
+export default Empty;

src/empty/style/css.js

@@ -0,0 +1 @@
+import './index.css';

src/empty/style/index.js

@@ -0,0 +1 @@
+import '../../_common/style/mobile/components/empty/_index.less';

src/empty/type.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode, TElement } from '../common';
+
+export interface TdEmptyProps {
+  /**
+   * 操作按钮
+   */
+  action?: TElement;
+  /**
+   * 描述文字
+   */
+  description?: TNode;
+  /**
+   * 图标
+   */
+  icon?: TNode;
+  /**
+   * 图片地址
+   */
+  image?: TNode;
+}

src/index.ts

@@ -48,6 +48,7 @@ export * from './swipe-cell';
 export * from './tag';
 export * from './result';
 export * from './table';
+export * from './empty';
 
 /**
  * 消息提醒（7个）