feat: empty-component

Author: wangshuhan

src/components/Empty/assets/empty.png

@@ -0,0 +1,50 @@
+.haki-empty-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.haki-empty-root .haki-empty-image {
+  width: 160px;
+  height: 160px;
+}
+
+.haki-empty-root .haki-empty-title {
+  margin-top: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  line-height: 24px;
+}
+
+.haki-empty-root .haki-empty-description {
+  margin-top: 4px;
+  font-size: 14px;
+  color: #666;
+  line-height: 21px;
+}
+
+.haki-empty-root .haki-empty-button {
+  min-width: 80px;
+  height: 32px;
+  margin-top: 16px;
+  padding: 0 16px;
+  font-size: 14px;
+  color: #fff;
+  line-height: 32px;
+  text-align: center;
+  background-color: #06605a;
+  border-radius: 6px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.haki-empty-root .haki-empty-button:hover {
+  background-color: #207a74;
+}
+
+.haki-empty-root .haki-empty-button:active {
+  background-color: #004747;
+}

src/components/Empty/index.css

@@ -11,8 +11,43 @@ group:
 
 空状态时的展示占位图。
 
+## 示例
+
+仅图片
+
 ```jsx
 import { Empty } from 'react-haki';
 
-export default () => <Empty title="Hello dumi!" />;
+export default () => <Empty />;
 ```
+
+全展示
+
+```jsx
+import { Empty } from 'react-haki';
+
+export default () => (
+  <Empty
+    title="无内容"
+    description="请刷新页面重试"
+    buttonText="刷新"
+    onClick={() => {
+      location.reload();
+    }}
+  />
+);
+```
+
+## Empty
+
+### 属性
+
+| 属性        | 说明         | 类型                  | 默认值 |
+| ----------- | ------------ | --------------------- | ------ |
+| image       | 占位图       | `string`              | -      |
+| title       | 标题         | `string`              | -      |
+| description | 描述         | `string`              | -      |
+| buttonText  | 按钮文案     | `string`              | -      |
+| onClick     | 按钮点击事件 | `() => void`          | -      |
+| className   | 类名         | `string`              | -      |
+| style       | 根元素样式   | `React.CSSProperties` | -      |

src/components/Empty/index.md

@@ -1,5 +1,35 @@
 import React, { type FC } from 'react';
+import emptyImage from './assets/empty.png';
+import './index.css';
 
-const Empty: FC<{ title: string }> = (props) => <h4>{props.title}</h4>;
+interface EmptyProps {
+  image?: string;
+  title?: string;
+  description?: string;
+  buttonText?: string;
+  onClick?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Empty: FC<EmptyProps> = (props) => {
+  const { title, description, image, buttonText, onClick, className, style } =
+    props;
+
+  return (
+    <div className={`haki-empty-root ${className}`} style={style}>
+      <img className="haki-empty-image" src={image || emptyImage} alt="" />
+      {title && <div className="haki-empty-title">{title}</div>}
+      {description && (
+        <div className="haki-empty-description">{description}</div>
+      )}
+      {buttonText && (
+        <div className="haki-empty-button" onClick={onClick}>
+          {buttonText}
+        </div>
+      )}
+    </div>
+  );
+};
 
 export default Empty;

src/components/Empty/index.tsx

@@ -11,8 +11,18 @@ group:
 
 This is an example component.
 
+## 示例
+
 ```jsx
 import { Foo } from 'react-haki';
 
-export default () => <Foo title="Hello dumi!" />
+export default () => <Foo title="Hello dumi!" />;
 ```
+
+## Foo
+
+### 属性
+
+| 属性  | 说明         | 类型     | 默认值 |
+| ----- | ------------ | -------- | ------ |
+| title | 内容（必填） | `string` | -      |