feat(Empty): add empty component

src/empty/Empty.tsx

@@ -0,0 +1,114 @@
+import React, { isValidElement, type ReactNode } from 'react';
+import cls from 'classnames';
+import { isObject, isString } from 'lodash';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { emptyDefaultProps } from './defaultProps';
+import { TdEmptyProps } from './type';
+import Image from '../image';
+import { StyledProps } from '../common';
+import useConfig from '../hooks/useConfig';
+
+import MaintenanceSvg from './assets/MaintenanceSvg';
+import NetworkErrorSvg from './assets/NetworkErrorSvg';
+import EmptySvg from './assets/EmptySvg';
+import FailSvg from './assets/FailSvg';
+import SuccessSvg from './assets/SuccessSvg';
+
+export type EmptyProps = TdEmptyProps & StyledProps;
+
+function getImageIns(data: EmptyProps['image']) {
+  let result = data;
+  if (isValidElement(data)) {
+    result = data;
+  } else if (isObject(data)) {
+    result = <Image {...(data as any)} />;
+  } else if (isString(data)) {
+    result = <Image src={data} />;
+  }
+
+  return data ? (result as ReactNode) : null;
+}
+
+const defaultMaps: {
+  [key in EmptyProps['type']]?: Pick<EmptyProps, 'image' | 'title'>;
+} = {
+  maintenance: {
+    image: <MaintenanceSvg />,
+    title: '建设中',
+  },
+  success: {
+    image: <SuccessSvg />,
+    title: '成功',
+  },
+  fail: {
+    image: <FailSvg />,
+    title: '失败',
+  },
+  'network-error': {
+    image: <NetworkErrorSvg />,
+    title: '网络错误',
+  },
+  empty: {
+    image: <EmptySvg />,
+    title: '暂无数据',
+  },
+};
+
+const Empty = (props: EmptyProps) => {
+  const {
+    image: propsImage,
+    imageStyle,
+    description: propsDescription,
+    title: propsTitle,
+    type,
+    action,
+    style,
+    className,
+  } = useDefaultProps(props, emptyDefaultProps);
+  const { classPrefix } = useConfig();
+
+  const name = cls(`${classPrefix}-empty`, className);
+  const titleClasses = cls(`${name}__title`);
+  const imageClasses = cls(`${name}__image`);
+  const descriptionClasses = cls(`${name}__description`);
+  const actionCls = cls(`${name}__action`);
+
+  const typeImageProps = defaultMaps[type] ?? null;
+
+  const { image, description, title } = {
+    image: propsImage ? propsImage : typeImageProps?.image ?? null,
+    title: propsTitle ? propsTitle : typeImageProps?.title ?? null,
+    description: propsDescription,
+  };
+
+  function renderTitle() {
+    if (!title) {
+      return null;
+    }
+    return <div className={titleClasses}>{title}</div>;
+  }
+
+  function renderDescription() {
+    if (!description) {
+      return null;
+    }
+    return <div className={descriptionClasses}>{description}</div>;
+  }
+
+  const imageContent = getImageIns(image);
+
+  return (
+    <div className={name} style={style}>
+      {imageContent ? (
+        <div className={imageClasses} style={imageStyle}>
+          {imageContent}
+        </div>
+      ) : null}
+      {renderTitle()}
+      {renderDescription()}
+      {action ? <div className={actionCls}>{action}</div> : null}
+    </div>
+  );
+};
+
+export default Empty;

src/empty/assets/EmptySvg.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export default function EmptySvg() {
+  return (
+    <svg width="200" height="140" viewBox="0 0 200 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M30 62H118V122H30V62Z" fill="#E7E7E7" />
+      <path d="M63 20H151V80H63V20Z" fill="#0052D9" />
+      <path d="M105.667 38H108.333V43.3333H105.667V38Z" fill="white" />
+      <path d="M97.668 38.781L95.7824 40.6667L99.668 44.5523L101.554 42.6667L97.668 38.781Z" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M92.3333 56.3126L98.2262 46H115.774L121.667 56.3126V67.3333H92.3333V56.3126ZM99.7738 48.6667L95.9642 55.3333H102.868L103.126 56.3343C103.57 58.0598 105.138 59.3333 107 59.3333C108.862 59.3333 110.43 58.0598 110.874 56.3343L111.132 55.3333H118.036L114.226 48.6667H99.7738Z"
+        fill="white"
+      />
+      <path d="M116.332 38.781L112.446 42.6667L114.332 44.5523L118.218 40.6667L116.332 38.781Z" fill="white" />
+      <path d="M63 20H151V30H63V20Z" fill="white" fillOpacity="0.22" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M64 90H46V88H64V90Z" fill="white" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M86 100H46V98H86V100Z" fill="white" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M86 107H46V105H86V107Z" fill="white" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M146 26H80V24H146V26Z" fill="white" />
+      <path d="M75 25H75.0039V25.0039H75V25Z" fill="white" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M74 24H76.0039V26.0039H74V24Z" fill="white" />
+      <path d="M69 25H69.0039V25.0039H69V25Z" fill="white" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M68 24H70.0039V26.0039H68V24Z" fill="white" />
+      <path d="M157 54L181.249 96H132.751L157 54Z" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M157 53L182.115 96.5H131.885L157 53ZM133.617 95.5H180.383L157 55L133.617 95.5Z"
+        fill="black"
+      />
+      <path fillRule="evenodd" clipRule="evenodd" d="M157.5 71L157.5 89H156.5L156.5 71H157.5Z" fill="black" />
+    </svg>
+  );
+}

src/empty/assets/FailSvg.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function FailSvg() {
+  return (
+    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M19.9238 41.2476L29.1716 31.9998L19.9241 22.7524L22.7526 19.924L32 29.1714L41.2474 19.924L44.0758 22.7524L34.8284 31.9998L44.0762 41.2476L41.2478 44.076L32 34.8282L22.7522 44.076L19.9238 41.2476Z"
+        fill="#D54941"
+      />
+      <path
+        d="M32 4C47.464 4 60 16.536 60 32C60 47.464 47.464 60 32 60C16.536 60 3.99999 47.464 4 32C4 16.536 16.536 3.99999 32 4ZM32 8C18.7452 8 8 18.7452 8 32C8 45.2548 18.7452 56 32 56C45.2548 56 56 45.2548 56 32C56 18.7452 45.2548 8 32 8Z"
+        fill="#D54941"
+      />
+    </svg>
+  );
+}

src/empty/assets/MaintenanceSvg.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export default function MaintenanceSvg() {
+  return (
+    <svg width="200" height="140" viewBox="0 0 200 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M119 9L157.105 31V75L119 97L80.8949 75V31L119 9Z" fill="#0052D9" />
+      <path d="M119 53L157.105 31L119 9L80.8949 31L119 53Z" fill="white" fillOpacity="0.22" />
+      <path d="M118.27 26.9222L107.066 24.276L111.65 30.7444L118.27 26.9222Z" fill="white" />
+      <path d="M120.729 27.5028L112.655 32.1638L115.492 36.1671L127.662 29.1405L120.729 27.5028Z" fill="white" />
+      <path
+        d="M130.121 29.7212L116.498 37.5864L118.522 40.4432L116.403 41.6665L118.713 42.9999L139.497 30.9999L137.188 29.6665L135.069 30.8899L130.121 29.7212Z"
+        fill="white"
+      />
+      <path d="M68 48L106.105 70V114L68 136L29.8949 114V70L68 48Z" fill="#E7E7E7" />
+      <path d="M41.8984 86.2866L44.7267 87.9197L44.727 94.4515L41.8987 92.8185L41.8984 86.2866Z" fill="white" />
+      <path d="M53.9189 93.2273L56.7472 94.8603L56.7474 101.392L53.9191 99.7591L53.9189 93.2273Z" fill="white" />
+      <path
+        d="M44.7276 107.515L41.8994 105.882L41.8995 109.148L44.7278 110.781L44.7276 107.515L53.9195 112.823L53.9196 116.088L56.7479 117.721L56.7478 114.455L53.9195 112.823L53.9195 109.557L44.7275 104.249L44.7276 107.515Z"
+        fill="white"
+      />
+      <path
+        d="M143 67L148.348 85.7378L167.249 81L153.695 95L167.249 109L148.348 104.262L143 123L137.652 104.262L118.751 109L132.305 95L118.751 81L137.652 85.7378L143 67Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M148.348 85.7378L143 67L137.652 85.7378L118.751 81L132.305 95L118.751 109L137.652 104.262L143 123L148.348 104.262L167.249 109L153.695 95L167.249 81L148.348 85.7378ZM164.093 82.822L147.652 86.9432L143 70.6439L138.348 86.9432L121.907 82.822L133.697 95L121.907 107.178L138.348 103.057L143 119.356L147.652 103.057L164.093 107.178L152.303 95L164.093 82.822Z"
+        fill="black"
+      />
+    </svg>
+  );
+}

src/empty/assets/NetworkErrorSvg.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export default function NetworkErrorSvg() {
+  return (
+    <svg width="200" height="140" viewBox="0 0 200 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M42 54.856L100.045 121L158.089 54.856C142.597 41.2498 122.284 33 100.045 33C77.8051 33 57.4925 41.2498 42 54.856Z"
+        fill="#E7E7E7"
+      />
+      <path
+        d="M78.4943 70.2979L75.6001 73.1921L81.3257 78.9177C77.0595 80.8182 73.1356 83.3484 69.6721 86.3902L100.044 121L110.965 108.556L116.842 114.434L119.737 111.54L85.496 77.2993C85.496 77.2993 85.4961 77.2993 85.496 77.2993L78.4943 70.2979Z"
+        fill="#0052D9"
+      />
+      <path
+        d="M130.417 86.3901L116.376 102.39L90.0308 76.0457C93.2546 75.3308 96.6055 74.9538 100.044 74.9538C111.681 74.9538 122.31 79.2705 130.417 86.3901Z"
+        fill="#0052D9"
+      />
+      <path
+        d="M156 15L161.348 33.7378L180.249 29L166.695 43L180.249 57L161.348 52.2622L156 71L150.652 52.2622L131.751 57L145.305 43L131.751 29L150.652 33.7378L156 15Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M161.348 33.7378L156 15L150.652 33.7378L131.751 29L145.305 43L131.751 57L150.652 52.2622L156 71L161.348 52.2622L180.249 57L166.695 43L180.249 29L161.348 33.7378ZM177.093 30.822L160.652 34.9432L156 18.6439L151.348 34.9432L134.907 30.822L146.697 43L134.907 55.178L151.348 51.0568L156 67.3561L160.652 51.0568L177.093 55.178L165.303 43L177.093 30.822Z"
+        fill="black"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M103.679 39.4985L106.321 42.5014L98.0274 49.8L108.027 58.6L99.0485 66.5014L96.406 63.4985L101.973 58.6L91.9726 49.8L103.679 39.4985Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

src/empty/assets/SuccessSvg.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function SuccessSvg() {
+  return (
+    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M18 32.826L28 42.828L46 24.83L43.17 22L28 37.172L20.826 30L18 32.826Z" fill="#2BA471" />
+      <path
+        d="M16.444 8.71885C21.0486 5.64217 26.4621 4 32 4C39.4261 4 46.548 6.94999 51.799 12.201C57.05 17.452 60 24.5739 60 32C60 37.5379 58.3578 42.9514 55.2812 47.556C52.2045 52.1605 47.8315 55.7494 42.7151 57.8686C37.5988 59.9879 31.969 60.5424 26.5375 59.462C21.106 58.3816 16.1169 55.7149 12.201 51.799C8.28515 47.8831 5.61841 42.894 4.53802 37.4625C3.45764 32.0311 4.01213 26.4012 6.13139 21.2849C8.25064 16.1685 11.8395 11.7955 16.444 8.71885ZM18.6663 51.9553C22.6131 54.5924 27.2533 56 32 56C38.3652 56 44.4697 53.4714 48.9706 48.9706C53.4714 44.4697 56 38.3652 56 32C56 27.2532 54.5924 22.6131 51.9553 18.6663C49.3181 14.7195 45.5698 11.6434 41.1844 9.82689C36.799 8.01039 31.9734 7.53511 27.3178 8.46115C22.6623 9.3872 18.3859 11.673 15.0294 15.0294C11.673 18.3859 9.38721 22.6623 8.46117 27.3178C7.53512 31.9734 8.0104 36.799 9.8269 41.1844C11.6434 45.5698 14.7195 49.3181 18.6663 51.9553Z"
+        fill="#2BA471"
+      />
+    </svg>
+  );
+}

src/empty/defaultProps.ts

@@ -0,0 +1,7 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdEmptyProps } from './type';
+
+export const emptyDefaultProps: TdEmptyProps = { type: 'empty' };

src/empty/empty.en-US.md

@@ -0,0 +1,15 @@
+:: BASE_DOC ::
+
+## API
+### Empty Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+action | TElement | - | action block。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+description | TNode | - | empty component description。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+image | TNode | - | image url, or Image component props, or custom any node you need.。Typescript：`string \| ImageProps \| TNode `，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/empty/type.ts) | N
+imageStyle | Object | - | pass `Cascading Style Sheets` to image element。Typescript：`Styles`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+title | TNode | - | empty component title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+type | String | empty | Empty component type。options: empty/success/fail/network-error/maintenance | N

src/empty/empty.md

@@ -0,0 +1,15 @@
+:: BASE_DOC ::
+
+## API
+### Empty Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+action | TElement | - | 操作区域。TS 类型：`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
+image | TNode | - | 组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：`<Empty image={{ src: '', shape: 'round' }} />`。TS 类型：`string \| ImageProps \| TNode `，[Image API Documents](./image?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/empty/type.ts) | N
+imageStyle | Object | - | 透传图片样式表。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+title | TNode | - | 错误标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+type | String | empty | 组件类型，如：空数据/成功/失败/网络错误/建设中。可选项：empty/success/fail/network-error/maintenance | N

src/empty/index.ts

@@ -0,0 +1,6 @@
+import _Empty from './Empty';
+import './style/index.js';
+
+export * from './type';
+
+export const Empty = _Empty;

src/empty/style/css.js

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

src/empty/style/index.js

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

src/empty/type.ts

@@ -0,0 +1,40 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { ImageProps } from '../image';
+import { TNode, TElement, Styles } from '../common';
+
+export interface TdEmptyProps {
+  /**
+   * 操作区域
+   */
+  action?: TElement;
+  /**
+   * 描述文字
+   */
+  description?: TNode;
+  /**
+   * 组件图片，可以完全自定义内容。值类型为字符串时，表示图片地址；值类型为对象时，则表示透传全部属性到图片组件，示例：`<Empty image={{ src: '', shape: 'round' }} />`
+   */
+  image?: ImageProps | TNode;
+  /**
+   * 透传图片样式表
+   */
+  imageStyle?: Styles;
+  /**
+   * 错误标题
+   */
+  title?: TNode;
+  /**
+   * 组件类型，如：空数据/成功/失败/网络错误/建设中
+   * @default empty
+   */
+  type?: 'empty' | 'success' | 'fail' | 'network-error' | 'maintenance';
+  /**
+   * 同 action
+   */
+  children?: TNode;
+}

src/index.ts

@@ -66,3 +66,4 @@ export * from './guide';
 export * from './back-top';
 export * from './statistic';
 export * from './descriptions';
+export * from './empty';