Commit 9469606f authored by 涂茜's avatar 涂茜

fix: 合并分支

parents 88fb8e5c 568aaefd
Pipeline #24084 failed with stages
in 1 minute 59 seconds
......@@ -95,19 +95,19 @@ export default {
'/components': [
{
title: '布局',
children: ['card'],
children: ['Empty'],
},
{
title: '通用',
children: ['card'],
children: ['Empty'],
},
{
title: '数据录入',
children: ['card'],
children: ['Empty'],
},
{
title: '数据展示',
children: ['card'],
children: ['Empty'],
},
],
},
......
# `@wisdom-components/Empty`
> TODO: description
## Usage
```
const empty = require('@wisdom-components/Empty');
// TODO: DEMONSTRATE API
```
{
"name": "@wisdom-components/empty",
"version": "1.0.0",
"description": "> TODO: description",
"author": "tuqian <webtuqian@163.com>",
"homepage": "",
"license": "ISC",
"main": "lib/index.js",
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib"
],
"publishConfig": {
"registry": "https://g.civnet.cn:4873/"
},
"repository": {
"type": "git",
"url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
},
"scripts": {
"test": "echo \"Error: run tests from root\" && exit 1"
}
}
---
title: Empty - 空状态
nav:
title: 组件
path: /components
group:
path: /
---
# Empty 空状态
空状态时的展示占位图。
## 何时使用
- 当目前没有数据时,用于显式的用户提示。
- 初始化场景时的引导创建流程。
## 代码演示
<code src="./demos/Basic.js">
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| description | 自定义描述内容 | ReactNode | - |
| image | 设置显示图片,为 string 时表示自定义图片地址 | ReactNode | - |
| theme | 设置主题 | string | 可选值:light/dark, 默认 light |
| size | 设置图片尺寸 | string | 可选值:small/middle/large, 默认 middle |
| statusCode | 状态码 | string | 可选值:0/-1/-2, 默认 0 |
| imageStyle | 图片样式 | CSSProperties | - |
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 168 155" style="enable-background:new 0 0 168 155;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.5;}
.st1{fill:#AEBACC;}
.st2{fill:#7D889E;}
.st3{fill:#748091;}
.st4{fill:#FFFFFF;}
.st5{fill:url(#SVGID_1_);}
.st6{fill:url(#SVGID_2_);}
</style>
<g class="st0">
<g>
<ellipse class="st1" cx="128.7" cy="116.5" rx="38.7" ry="38.5"/>
<ellipse class="st2" cx="142.9" cy="104.3" rx="5.4" ry="5.4"/>
<ellipse class="st2" cx="150.8" cy="115.9" rx="2.5" ry="2.1"/>
<ellipse class="st2" cx="139" cy="133.8" rx="4.2" ry="4.3"/>
<path class="st1" d="M143.2,80.6c0.8-1.1,1.6-2.2,2.4-3.4c0.3,1,1.5,3.9,4.6,5.9c3.8,2.5,7.7,1.9,8.6,1.8
c-0.8,1.6-1.7,3.2-2.5,4.8C152,86.8,147.6,83.7,143.2,80.6z"/>
<path class="st1" d="M164.1,130.7c1,0.6,2.4,1.9,3.4,2.6c-0.9,0.3-2.4,1.7-4.3,4.2c-2.3,3.1-2.3,5.4-2.1,6.1c-1.5-0.7-3-1.4-4.4-2
C159.5,138,161.2,134.3,164.1,130.7z"/>
<ellipse transform="matrix(0.497 -0.8678 0.8678 0.497 5.8072 172.8094)" class="st2" cx="152" cy="81.4" rx="2.4" ry="7.8"/>
<ellipse transform="matrix(0.5031 -0.8642 0.8642 0.5031 -37.9388 210.9669)" class="st2" cx="164.5" cy="138.5" rx="6" ry="2"/>
</g>
<g>
<circle class="st1" cx="41.6" cy="30.5" r="30.5"/>
<path class="st2" d="M12,38c-6.1,4.7-7.3,8-6.7,9.8c0.6,1.8,4,3.7,11.7,3.8c7.7,0.1,17.4-1.7,27.3-5C66,39.3,77.7,28.3,76.3,24
c-0.5-1.4-2.5-2.4-5.7-3L68,15.1c6.4,0.7,12,2.9,13.4,7.2l0,0C84.8,32.5,65.7,45,46.1,51.6c-10.2,3.4-20.2,5.3-28.4,5.3
c-0.2,0-0.4,0-0.6,0C5.2,56.8,1.4,52.8,0.2,49.4c-1.1-3.3,1.5-10.1,10.9-17.4L12,38z"/>
</g>
<g>
<path class="st3" d="M63,136.3c1.3,3.2,2.4,5.1,3.4,6.2c1,1.2,2.8,2.5,3.9,5.2c0.2,0.4,0.3,0.6,0.4,1c0.8,2.7-0.5,4.5,0.5,5.6
c0.2,0.2,0.5,0.5,1.3,0.6c3.9,0,7.7,0,11.6,0c0.5-1.1,1.1-2.5,1.5-4.1c0.7-2.5,0.8-4.8,0.8-6.5c0.4-0.1,0.8-0.2,1.1-0.2
c0.6,0,1.1,0.1,1.5,0.2c0.3,0.1,0.6,0.1,0.7,0.2c0.2,1.7,0.4,3.5,0.5,5.3c0,0.5-0.1,1.6,0.2,2.9c0.2,0.9,0.5,1.7,0.7,2.2
c4.3,0,8.5,0,12.8,0c0.2-0.1,0.6-0.3,0.9-0.9c0.3-0.6,0.2-1.3,0.2-1.5c-0.1-0.8,0.3-2.1,1-4.8c0.8-3.1,2.6-4.3,4-7.2
c0.9-1.8,1.9-4.2,2.5-8.2C96.6,133.6,79,135,63,136.3z"/>
<path class="st3" d="M65.1,99c-5.5,6-9.4,11.4-12,15.3c-8.6,13-8.3,18.3-7.9,20.7c0.2,1.3,1,5.9,4.1,7.3c3.8,1.6,8.7-2.6,11-4.5
c11.8-10,15.3-30.8,16.5-40.7C72.8,97.8,69,98.4,65.1,99z"/>
<path class="st4" d="M66.8,97.7c-2.1,2.6-5.4,7.2-7.1,13.9c-0.9,3.4-3.7,14.4,2.7,23.9c4.1,6.1,10.1,8.6,12.1,9.4
c11.8,4.7,29.4,2.1,36.5-9.5c5.9-9.8,1.8-21.8-0.2-27.6c-2.2-6.4-5.4-11.1-7.7-14C91,95,78.9,96.4,66.8,97.7z"/>
<path class="st3" d="M101,98.5c2.4,3.3,4.2,6.9,5.5,10.7c1.8,5.1,5.4,15.8,0.6,23.7c-4.2,7-13.3,9.5-20.3,9.5
c-3.8,0-7.4-0.7-10.5-1.9c-4.4-1.7-7.7-4.3-10-7.7c-5.3-7.8-2.9-17.1-2.1-20.2c1-3.8,2.7-7.4,5.1-10.7l27-3L101,98.5 M103.1,93.7
c-12.1,1.3-24.2,2.7-36.3,4c-2.1,2.6-5.4,7.2-7.1,13.9c-0.9,3.4-3.7,14.4,2.7,23.9c4.1,6.1,10.1,8.6,12.1,9.4
c3.7,1.5,7.9,2.2,12.2,2.2c9.5,0,19.4-3.7,24.3-11.7c5.9-9.8,1.8-21.8-0.2-27.6C108.7,101.3,105.5,96.6,103.1,93.7L103.1,93.7z"/>
<path class="st3" d="M64,111.1c4.3-0.7,12.4-3,17.4-3.4c10.1-0.8,19.3-0.5,27.2,0.3c0-4.5,0-9,0-13.5c-14,0-28,0-42,0
C66.8,99.5,63.7,106.1,64,111.1z"/>
<path class="st4" d="M35.7,58.1c-1.8,4.4-2.5,8.5-2.5,8.5c-0.6,3.4-0.6,6.3-0.5,8.4c0.6,11.1,6.4,17.6,12.2,21.8
c10.6,7.7,75.4,17,88.7-12.8c4.2-9.4,0.3-21.3-0.6-24.8c-4-16.3-16.3-25.1-20.2-27.6c-19.2-12.4-45.4-8.7-60.5,3.6
C42.4,43.1,37,54.8,35.7,58.1z"/>
<path class="st3" d="M85.6,28.6c9.1,0,17.6,2.4,24.6,6.9c4.3,2.8,14.8,10.8,18.2,24.8c0.1,0.4,0.2,0.9,0.4,1.4
c1.1,4,3.6,13.5,0.5,20.4c-7,15.4-30.6,17.8-44,17.8c-17.7,0-34-4-37.9-6.8c-6.5-4.8-9.9-10.8-10.3-18.3c-0.1-2.5,0-5,0.5-7.4
c0,0,0.7-3.7,2.2-7.6c0.5-1.3,5.6-13.3,15.2-21C63,32.4,74.4,28.6,85.6,28.6 M85.6,24c-12.5,0-24.8,4.2-33.4,11.2
C42.4,43.1,37,54.8,35.7,58.1c-1.8,4.4-2.5,8.5-2.5,8.5c-0.6,3.4-0.6,6.3-0.5,8.4c0.6,11.1,6.4,17.6,12.2,21.8
c5.1,3.7,22.4,7.7,40.6,7.7c20,0,41.2-4.9,48.2-20.5c4.2-9.4,0.3-21.3-0.6-24.8c-4-16.3-16.3-25.1-20.2-27.6
C104.5,26.4,95,24,85.6,24L85.6,24z"/>
<path class="st3" d="M105.3,27.8c5.7-3.6,13.1-3.1,18.1,1.2c5.3,4.6,6.9,12.5,3.7,19C119.9,41.3,112.6,34.5,105.3,27.8z"/>
<path class="st3" d="M63.3,29.2c-5.7-3.6-13.1-3.1-18.1,1.2c-5.3,4.6-6.9,12.5-3.7,19C48.8,42.7,56.1,36,63.3,29.2z"/>
<path class="st3" d="M55.2,68.4c0.1-1.5,0.7-6.4,4.8-10c2.9-2.5,8.4-5.1,12.5-2.8c2,1.1,2.9,3,3.2,3.7c2.1,4.6,0.4,11.1-3.9,14.7
c-3.3,2.7-8.4,4.1-12.2,2.1c-0.6-0.3-2.9-1.5-3.9-4.1C55.1,70.5,55.1,69.1,55.2,68.4z"/>
<path class="st3" d="M115.1,68.4c-0.1-1.5-0.7-6.4-4.8-10c-2.9-2.5-8.4-5.1-12.5-2.8c-2,1.1-2.9,3-3.2,3.7
c-2.1,4.6-0.4,11.1,3.9,14.7c3.3,2.7,8.4,4.1,12.2,2.1c0.6-0.3,2.9-1.5,3.9-4.1C115.2,70.5,115.2,69.1,115.1,68.4z"/>
<path class="st3" d="M82.3,71.9c-0.2-0.5,0.1-1.2,0.7-1.3c1-0.2,2.3-0.4,3.8-0.4c1.7,0,2.6,0,2.9,0.5c0.5,1-1.2,3.9-3.6,4
C84.6,74.8,83,73.7,82.3,71.9z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="106.1071" y1="81.2148" x2="109.9657" y2="81.2148">
<stop offset="0" style="stop-color:#566277"/>
<stop offset="1" style="stop-color:#7D889E"/>
</linearGradient>
<rect x="106.1" y="75.9" class="st5" width="3.9" height="10.6"/>
<path class="st3" d="M103.7,114.3c-4.9-6.4-3.9-13.9-3.4-17.3c0.7-4.9,3.3-14.8,8.1-15.2c3.9-0.3,7.4,5.9,8.2,7.4
c6.6,11.9,3.1,29.7-3.2,31.3C109.3,121.5,104.6,115.5,103.7,114.3z"/>
<circle class="st4" cx="69.8" cy="61.9" r="2.9"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="91.1882" y1="62.8381" x2="121.0263" y2="62.8381">
<stop offset="0" style="stop-color:#566277"/>
<stop offset="1" style="stop-color:#7D889E"/>
</linearGradient>
<path class="st6" d="M106.1,51.4c6.3,0,11.5,5.2,11.5,11.5s-5.2,11.5-11.5,11.5c-6.3,0-11.5-5.2-11.5-11.5S99.8,51.4,106.1,51.4
M106.1,47.9c-8.2,0-14.9,6.7-14.9,14.9s6.7,14.9,14.9,14.9S121,71.1,121,62.8S114.3,47.9,106.1,47.9L106.1,47.9z"/>
<circle class="st4" cx="100.5" cy="61.6" r="4.2"/>
<path class="st3" d="M85.8,82.7c-1.6,0-3.2-0.3-4.8-1c-0.7-0.3-1.1-1.1-0.8-1.8c0.3-0.7,1.1-1.1,1.8-0.8c1.3,0.6,2.7,0.8,4.1,0.7
c3.2-0.1,5.5-1.9,6.5-2.9c0.6-0.5,1.4-0.5,2,0c0.5,0.6,0.5,1.4,0,2c-1.3,1.3-4.2,3.5-8.3,3.7C86.1,82.7,86,82.7,85.8,82.7z"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 168 155" style="enable-background:new 0 0 168 155;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EFF3F6;}
.st1{fill:#D5DFEB;}
.st2{fill:#D3DFEC;}
.st3{fill:#FFFFFF;}
.st4{fill:url(#SVGID_1_);}
.st5{fill:url(#SVGID_2_);}
</style>
<g>
<ellipse class="st0" cx="128.7" cy="116.5" rx="38.7" ry="38.5"/>
<ellipse class="st1" cx="142.9" cy="104.3" rx="5.4" ry="5.4"/>
<ellipse class="st1" cx="150.8" cy="115.9" rx="2.5" ry="2.1"/>
<ellipse class="st1" cx="139" cy="133.8" rx="4.2" ry="4.3"/>
<path class="st0" d="M143.2,80.6c0.8-1.1,1.6-2.2,2.4-3.4c0.3,1,1.5,3.9,4.6,5.9c3.8,2.5,7.7,1.9,8.6,1.8c-0.8,1.6-1.7,3.2-2.5,4.8
C152,86.8,147.6,83.7,143.2,80.6z"/>
<path class="st0" d="M164.1,130.7c1,0.6,2.4,1.9,3.4,2.6c-0.9,0.3-2.4,1.7-4.3,4.2c-2.3,3.1-2.3,5.4-2.1,6.1c-1.5-0.7-3-1.4-4.4-2
C159.5,138,161.2,134.3,164.1,130.7z"/>
<ellipse transform="matrix(0.497 -0.8678 0.8678 0.497 5.8072 172.8094)" class="st1" cx="152" cy="81.4" rx="2.4" ry="7.8"/>
<ellipse transform="matrix(0.5031 -0.8642 0.8642 0.5031 -37.9388 210.9669)" class="st1" cx="164.5" cy="138.5" rx="6" ry="2"/>
</g>
<g>
<circle class="st0" cx="41.6" cy="30.5" r="30.5"/>
<path class="st1" d="M12,38c-6.1,4.7-7.3,8-6.7,9.8c0.6,1.8,4,3.7,11.7,3.8c7.7,0.1,17.4-1.7,27.3-5C66,39.3,77.7,28.3,76.3,24
c-0.5-1.4-2.5-2.4-5.7-3L68,15.1c6.4,0.7,12,2.9,13.4,7.2l0,0C84.8,32.5,65.7,45,46.1,51.6c-10.2,3.4-20.2,5.3-28.4,5.3
c-0.2,0-0.4,0-0.6,0C5.2,56.8,1.4,52.8,0.2,49.4c-1.1-3.3,1.5-10.1,10.9-17.4L12,38z"/>
</g>
<g>
<path class="st2" d="M63,136.3c1.3,3.2,2.4,5.1,3.4,6.2c1,1.2,2.8,2.5,3.9,5.2c0.2,0.4,0.3,0.6,0.4,1c0.8,2.7-0.5,4.5,0.5,5.6
c0.2,0.2,0.5,0.5,1.3,0.6c3.9,0,7.7,0,11.6,0c0.5-1.1,1.1-2.5,1.5-4.1c0.7-2.5,0.8-4.8,0.8-6.5c0.4-0.1,0.8-0.2,1.1-0.2
c0.6,0,1.1,0.1,1.5,0.2c0.3,0.1,0.6,0.1,0.7,0.2c0.2,1.7,0.4,3.5,0.5,5.3c0,0.5-0.1,1.6,0.2,2.9c0.2,0.9,0.5,1.7,0.7,2.2
c4.3,0,8.5,0,12.8,0c0.2-0.1,0.6-0.3,0.9-0.9c0.3-0.6,0.2-1.3,0.2-1.5c-0.1-0.8,0.3-2.1,1-4.8c0.8-3.1,2.6-4.3,4-7.2
c0.9-1.8,1.9-4.2,2.5-8.2C96.6,133.6,79,135,63,136.3z"/>
<path class="st2" d="M65.1,99c-5.5,6-9.4,11.4-12,15.3c-8.6,13-8.3,18.3-7.9,20.7c0.2,1.3,1,5.9,4.1,7.3c3.8,1.6,8.7-2.6,11-4.5
c11.8-10,15.3-30.8,16.5-40.7C72.8,97.8,69,98.4,65.1,99z"/>
<path class="st3" d="M66.8,97.7c-2.1,2.6-5.4,7.2-7.1,13.9c-0.9,3.4-3.7,14.4,2.7,23.9c4.1,6.1,10.1,8.6,12.1,9.4
c11.8,4.7,29.4,2.1,36.5-9.5c5.9-9.8,1.8-21.8-0.2-27.6c-2.2-6.4-5.4-11.1-7.7-14C91,95,78.9,96.4,66.8,97.7z"/>
<path class="st2" d="M101,98.5c2.4,3.3,4.2,6.9,5.5,10.7c1.8,5.1,5.4,15.8,0.6,23.7c-4.2,7-13.3,9.5-20.3,9.5
c-3.8,0-7.4-0.7-10.5-1.9c-4.4-1.7-7.7-4.3-10-7.7c-5.3-7.8-2.9-17.1-2.1-20.2c1-3.8,2.7-7.4,5.1-10.7l27-3L101,98.5 M103.1,93.7
c-12.1,1.3-24.2,2.7-36.3,4c-2.1,2.6-5.4,7.2-7.1,13.9c-0.9,3.4-3.7,14.4,2.7,23.9c4.1,6.1,10.1,8.6,12.1,9.4
c3.7,1.5,7.9,2.2,12.2,2.2c9.5,0,19.4-3.7,24.3-11.7c5.9-9.8,1.8-21.8-0.2-27.6C108.7,101.3,105.5,96.6,103.1,93.7L103.1,93.7z"/>
<path class="st2" d="M64,111.1c4.3-0.7,12.4-3,17.4-3.4c10.1-0.8,19.3-0.5,27.2,0.3c0-4.5,0-9,0-13.5c-14,0-28,0-42,0
C66.8,99.5,63.7,106.1,64,111.1z"/>
<path class="st3" d="M35.7,58.1c-1.8,4.4-2.5,8.5-2.5,8.5c-0.6,3.4-0.6,6.3-0.5,8.4c0.6,11.1,6.4,17.6,12.2,21.8
c10.6,7.7,75.4,17,88.7-12.8c4.2-9.4,0.3-21.3-0.6-24.8c-4-16.3-16.3-25.1-20.2-27.6c-19.2-12.4-45.4-8.7-60.5,3.6
C42.4,43.1,37,54.8,35.7,58.1z"/>
<path class="st2" d="M85.6,28.6c9.1,0,17.6,2.4,24.6,6.9c4.3,2.8,14.8,10.8,18.2,24.8c0.1,0.4,0.2,0.9,0.4,1.4
c1.1,4,3.6,13.5,0.5,20.4c-7,15.4-30.6,17.8-44,17.8c-17.7,0-34-4-37.9-6.8c-6.5-4.8-9.9-10.8-10.3-18.3c-0.1-2.5,0-5,0.5-7.4
c0,0,0.7-3.7,2.2-7.6c0.5-1.3,5.6-13.3,15.2-21C63,32.4,74.4,28.6,85.6,28.6 M85.6,24c-12.5,0-24.8,4.2-33.4,11.2
C42.4,43.1,37,54.8,35.7,58.1c-1.8,4.4-2.5,8.5-2.5,8.5c-0.6,3.4-0.6,6.3-0.5,8.4c0.6,11.1,6.4,17.6,12.2,21.8
c5.1,3.7,22.4,7.7,40.6,7.7c20,0,41.2-4.9,48.2-20.5c4.2-9.4,0.3-21.3-0.6-24.8c-4-16.3-16.3-25.1-20.2-27.6
C104.5,26.4,95,24,85.6,24L85.6,24z"/>
<path class="st2" d="M105.3,27.8c5.7-3.6,13.1-3.1,18.1,1.2c5.3,4.6,6.9,12.5,3.7,19C119.9,41.3,112.6,34.5,105.3,27.8z"/>
<path class="st2" d="M63.3,29.2c-5.7-3.6-13.1-3.1-18.1,1.2c-5.3,4.6-6.9,12.5-3.7,19C48.8,42.7,56.1,36,63.3,29.2z"/>
<path class="st2" d="M55.2,68.4c0.1-1.5,0.7-6.4,4.8-10c2.9-2.5,8.4-5.1,12.5-2.8c2,1.1,2.9,3,3.2,3.7c2.1,4.6,0.4,11.1-3.9,14.7
c-3.3,2.7-8.4,4.1-12.2,2.1c-0.6-0.3-2.9-1.5-3.9-4.1C55.1,70.5,55.1,69.1,55.2,68.4z"/>
<path class="st2" d="M115.1,68.4c-0.1-1.5-0.7-6.4-4.8-10c-2.9-2.5-8.4-5.1-12.5-2.8c-2,1.1-2.9,3-3.2,3.7
c-2.1,4.6-0.4,11.1,3.9,14.7c3.3,2.7,8.4,4.1,12.2,2.1c0.6-0.3,2.9-1.5,3.9-4.1C115.2,70.5,115.2,69.1,115.1,68.4z"/>
<path class="st2" d="M82.3,71.9c-0.2-0.5,0.1-1.2,0.7-1.3c1-0.2,2.3-0.4,3.8-0.4c1.7,0,2.6,0,2.9,0.5c0.5,1-1.2,3.9-3.6,4
C84.6,74.8,83,73.7,82.3,71.9z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="106.1071" y1="81.2148" x2="109.9657" y2="81.2148">
<stop offset="0" style="stop-color:#9AABC5"/>
<stop offset="1" style="stop-color:#D5DFEB"/>
</linearGradient>
<rect x="106.1" y="75.9" class="st4" width="3.9" height="10.6"/>
<path class="st2" d="M103.7,114.3c-4.9-6.4-3.9-13.9-3.4-17.3c0.7-4.9,3.3-14.8,8.1-15.2c3.9-0.3,7.4,5.9,8.2,7.4
c6.6,11.9,3.1,29.7-3.2,31.3C109.3,121.5,104.6,115.5,103.7,114.3z"/>
<circle class="st3" cx="69.8" cy="61.9" r="2.9"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="91.1882" y1="62.8381" x2="121.0263" y2="62.8381">
<stop offset="0" style="stop-color:#9AABC5"/>
<stop offset="1" style="stop-color:#D5DFEB"/>
</linearGradient>
<path class="st5" d="M106.1,51.4c6.3,0,11.5,5.2,11.5,11.5s-5.2,11.5-11.5,11.5c-6.3,0-11.5-5.2-11.5-11.5S99.8,51.4,106.1,51.4
M106.1,47.9c-8.2,0-14.9,6.7-14.9,14.9s6.7,14.9,14.9,14.9S121,71.1,121,62.8S114.3,47.9,106.1,47.9L106.1,47.9z"/>
<circle class="st3" cx="100.5" cy="61.6" r="4.2"/>
<path class="st2" d="M85.8,82.7c-1.6,0-3.2-0.3-4.8-1c-0.7-0.3-1.1-1.1-0.8-1.8c0.3-0.7,1.1-1.1,1.8-0.8c1.3,0.6,2.7,0.8,4.1,0.7
c3.2-0.1,5.5-1.9,6.5-2.9c0.6-0.5,1.4-0.5,2,0c0.5,0.6,0.5,1.4,0,2c-1.3,1.3-4.2,3.5-8.3,3.7C86.1,82.7,86,82.7,85.8,82.7z"/>
</g>
</svg>
import React from 'react';
import { Button } from 'antd';
import PandaEmpty from '../index';
class Demo extends React.Component {
render() {
return (
<div style={{ width: '100%' }}>
<PandaEmpty size={'small'} />
<br />
<PandaEmpty />
<br />
<PandaEmpty size={'large'} />
<br />
<PandaEmpty size={'small'} statusCode={'-2'} />
<br />
<PandaEmpty statusCode={'-1'}>
<Button type="primary">刷新试试</Button>
</PandaEmpty>
<br />
<div style={{ width: '100%', padding: '32px 0', backgroundColor: '#282D3B' }}>
<PandaEmpty theme={'dark'} statusCode={'-1'}></PandaEmpty>
</div>
</div>
);
}
}
export default Demo;
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import noDataLight from './assets/noDataLight.svg';
import noDataDark from './assets/noDataDark.svg';
import errorLight from './assets/errorLight.png';
import errorDark from './assets/errorDark.png';
import './index.less';
const Empty = ({ description, image, theme, size, statusCode, imageStyle, children }) => {
const alt = description ? description : 'empty';
const des = description ? description : DESC_DATA[`${statusCode}`];
const imageSrc = image ? image : IMAGE_DATA[theme][statusCode == '0' ? 0 : 1];
let imageNode = null;
if (typeof image === 'string') {
imageNode = <img alt={alt} src={imageSrc} />;
} else {
imageNode = image;
}
return (
<div className={`empty ${size}`}>
<div className={'image'} style={imageStyle}>
{imageNode}
</div>
{des && <div className={'des'}>{des}</div>}
{children && <div className={'footer'}>{children}</div>}
</div>
);
};
Empty.defaultProps = {
description: '',
image: '',
theme: 'light',
size: 'middle',
statusCode: '0',
imageStyle: {},
};
Empty.propTypes = {
description: PropTypes.node, // 自定义描述内容
image: PropTypes.node, // 设置显示图片,为 string 时表示自定义图片地址
theme: PropTypes.string, // 设置主题 light dark
size: PropTypes.string, // 设置图片尺寸 small middle large
statusCode: PropTypes.string, // 状态码
imageStyle: PropTypes.object, // 图片样式
};
export default Empty;
const DESC_DATA = {
0: '咦~暂时没有查询到相关数据呢~',
'-1': '参数错误~请刷新试试或等服务恢复~',
'-2': '服务器处理异常~请刷新试试或等服务恢复~',
};
const IMAGE_DATA = {
light: [noDataLight, errorLight],
dark: [noDataDark, errorDark],
};
.empty {
font-size: 14px;
text-align: center;
.image {
margin-bottom: 10px;
img {
height: 100%;
}
}
.des {
font-weight: 400;
color: #90a0bb;
}
.footer {
margin-top: 16px;
}
&.small {
margin: 8px 0;
.image {
height: 92px;
}
}
&.middle {
margin: 32px 0;
.image {
height: 124px;
}
}
&.large {
margin: 32px 0;
.image {
height: 156px;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment