feat(Empty): add empty component

site/site.config.mjs

@@ -473,6 +473,14 @@ export const docs = [
         component: () => import('tdesign-react/descriptions/descriptions.md'),
         componentEn: () => import('tdesign-react/descriptions/descriptions.en-US.md'),
       },
+      {
+        title: 'Empty 空状态',
+        titleEn: 'Empty',
+        name: 'Empty',
+        path: '/react/components/empty',
+        component: () => import('tdesign-react/empty/empty.md'),
+        componentEn: () => import('tdesign-react/empty/empty.en-US.md'),
+      },
       {
         title: 'Image 图片',
         titleEn: 'Image',

src/auto-complete/_example/option.tsx

@@ -32,7 +32,7 @@ const TEXTS = ['第一个默认联想词', '第二个默认联想词', '第三
 const AutoCompleteOption = () => {
   const [value, setValue] = useState('');
 
-  const options = TEXTS.map(text => ({
+  const options = TEXTS.map((text) => ({
     text,
     label: (
       <div className="custom-option">
@@ -42,7 +42,7 @@ const AutoCompleteOption = () => {
           <small className="description">这是关于联想词的描述，使用 label 渲染</small>
         </div>
       </div>
-    )
+    ),
   }));
 
   useEffect(() => {

src/auto-complete/_example/size.tsx

@@ -9,20 +9,15 @@ const AutoCompleteSize = () => {
   const [value3, setValue3] = useState('');
 
   return (
-    <Space direction='vertical' style={{ width: '100%' }}>
+    <Space direction="vertical" style={{ width: '100%' }}>
       <AutoComplete
         value={value1}
         options={options}
         onChange={setValue1}
         size="small"
         inputProps={{ label: '小尺寸：' }}
       />
-      <AutoComplete
-        value={value2}
-        options={options}
-        onChange={setValue2}
-        inputProps={{ label: '中尺寸：' }}
-      />
+      <AutoComplete value={value2} options={options} onChange={setValue2} inputProps={{ label: '中尺寸：' }} />
       <AutoComplete
         value={value3}
         options={options}

src/auto-complete/_example/status.tsx

@@ -7,7 +7,7 @@ const AutoCompleteStatus = () => {
   const [value, setValue] = useState('');
 
   return (
-    <Space direction='vertical' style={{ width: '100%' }} size="32px">
+    <Space direction="vertical" style={{ width: '100%' }} size="32px">
       <AutoComplete
         value={value}
         options={options}

src/avatar/_example/size.tsx

@@ -33,14 +33,31 @@ export default function SizeAvatar() {
         </Avatar>
       </Space>
       <Space align="center">
-        <Avatar alt='test' image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="small" style={{ marginRight: '40px' }}>
-        </Avatar>
-        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="medium" style={{ marginRight: '40px' }}>
-        </Avatar>
-        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="large" style={{ marginRight: '40px' }}>
-        </Avatar>
-        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="100px" style={{ marginRight: '40px' }}>
-        </Avatar>
+        <Avatar
+          alt="test"
+          image="https://tdesign.gtimg.com/site/avatar.jpg"
+          shape="round"
+          size="small"
+          style={{ marginRight: '40px' }}
+        ></Avatar>
+        <Avatar
+          image="https://tdesign.gtimg.com/site/avatar.jpg"
+          shape="round"
+          size="medium"
+          style={{ marginRight: '40px' }}
+        ></Avatar>
+        <Avatar
+          image="https://tdesign.gtimg.com/site/avatar.jpg"
+          shape="round"
+          size="large"
+          style={{ marginRight: '40px' }}
+        ></Avatar>
+        <Avatar
+          image="https://tdesign.gtimg.com/site/avatar.jpg"
+          shape="round"
+          size="100px"
+          style={{ marginRight: '40px' }}
+        ></Avatar>
       </Space>
     </Space>
   );

src/collapse/_example/other.tsx

@@ -9,7 +9,13 @@ export default function CollapseExample() {
   const [showIcon, setShowIcon] = useState(true);
   return (
     <Space direction="vertical">
-      <Collapse expandIcon={showIcon} value={collapseValue} borderless={borderless} disabled={disabledAll} onChange={setCollapseValue}>
+      <Collapse
+        expandIcon={showIcon}
+        value={collapseValue}
+        borderless={borderless}
+        disabled={disabledAll}
+        onChange={setCollapseValue}
+      >
         <Panel header="这是一个折叠标题">
           这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
         </Panel>

src/comment/_example/reply-form.tsx

@@ -15,7 +15,9 @@ export default function BasicComment() {
   const replyForm = (
     <Space direction="vertical" align="end" style={{ width: '100%' }}>
       <Textarea placeholder="请输入内容" value={replyData} onChange={setReplayData} />
-      <Button style={{ float: 'right' }} onClick={submitReply}>回复</Button>
+      <Button style={{ float: 'right' }} onClick={submitReply}>
+        回复
+      </Button>
     </Space>
   );
 

src/dialog/_example/plugin.tsx

@@ -19,7 +19,7 @@ export default function PluginModalExample() {
       },
       onCloseBtnClick: ({ e }) => {
         console.log('close btn: ', e);
-      }
+      },
     });
   };
   const handleDN = () => {

src/dropdown/_example/click.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import {
-  Dropdown, Button, MessagePlugin,
-} from 'tdesign-react';
+import { Dropdown, Button, MessagePlugin } from 'tdesign-react';
 
 export default function BasicDropdown() {
   const getContent = () => <div>操作四</div>;
@@ -29,9 +27,7 @@ export default function BasicDropdown() {
   ];
   return (
     <Dropdown options={options}>
-      <Button>
-        hover我试试
-      </Button>
+      <Button>hover我试试</Button>
     </Dropdown>
   );
 }

src/empty/Empty.tsx

@@ -0,0 +1,115 @@
+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 prefix = `${classPrefix}-empty`;
+  const emptyClasses = cls(prefix, className);
+  const titleClasses = cls(`${prefix}__title`);
+  const imageClasses = cls(`${prefix}__image`);
+  const descriptionClasses = cls(`${prefix}__description`);
+  const actionCls = cls(`${prefix}__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={emptyClasses} 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/_example/base.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Empty } from 'tdesign-react';
+
+export default function BasicGrid() {
+  return (
+    <>
+      <Empty type="empty" title="暂无数据" />
+    </>
+  );
+}

src/empty/_example/descriptions.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Empty, Button } from 'tdesign-react';
+
+export default function Operation() {
+  function goToIndex() {
+    console.log('go to index');
+    location.href = '/';
+  }
+  return (
+    <Empty
+      type="empty"
+      action={<Button onClick={goToIndex}>返回首页</Button>}
+      description="description"
+      title="暂无数据"
+    />
+  );
+}

src/empty/_example/operation.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Empty, Button } from 'tdesign-react';
+
+export default function Operation() {
+  function goToIndex() {
+    console.log('go to index');
+    location.href = '/';
+  }
+  return <Empty type="empty" action={<Button onClick={goToIndex}>返回首页</Button>} title="暂无数据" />;
+}

src/empty/_example/self-defined.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Empty, Row, Col } from 'tdesign-react';
+import { ErrorCircleIcon } from 'tdesign-icons-react';
+
+export default function BasicGrid() {
+  const CustomImageContainer = (
+    <div
+      style={{
+        width: '64px',
+        height: '64px',
+        backgroundImage: 'url(https://tdesign.gtimg.com/demo/demo-image-1.png)',
+        backgroundSize: '100% 100%',
+      }}
+    />
+  );
+  return (
+    <Row gutter={40}>
+      <Col>
+        <Empty image={<ErrorCircleIcon size={64} color="rgba(0, 0, 0, 0.26)" />} description="暂无数据" />
+      </Col>
+      <Col>
+        <Empty description="暂无数据" image={CustomImageContainer} />
+      </Col>
+    </Row>
+  );
+}

src/empty/_example/status.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Empty, Row, Col } from 'tdesign-react';
+
+export default function StatusExample() {
+  return (
+    <Row gutter={40}>
+      <Col>
+        <Empty type="empty" />
+      </Col>
+      <Col>
+        <Empty type="maintenance" />
+      </Col>
+      <Col>
+        <Empty type="network-error" />
+      </Col>
+      <Col>
+        <Empty type="success" />
+      </Col>
+      <Col>
+        <Empty type="fail" />
+      </Col>
+    </Row>
+  );
+}