import React from 'react'; import { Empty } from '@douyinfe/semi-ui'; import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations'; () => ( <Empty image={<IllustrationConstruction style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />} title={'功能建设中'} description="当前功能暂未开放，敬请期待。" /> );

import React from 'react'; import { Empty, Button } from '@douyinfe/semi-ui'; import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations'; () => ( <Empty image={<IllustrationNoContent style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />} title="空状态标题" description="开始创建你的第一个仪表盘吧！" > <div> <Button style={{ padding: '6px 24px', marginRight: 12 }} type="primary"> 二级按钮 </Button> <Button style={{ padding: '6px 24px' }} theme="solid" type="primary"> 一级按钮 </Button> </div> </Empty> );

import React from 'react'; import { Empty, Typography } from '@douyinfe/semi-ui'; () => ( <Empty title="暂未找到匹配的筛选结果" description={ <span> <Typography.Text>试试 </Typography.Text> <Typography.Text link>重置筛选条件</Typography.Text> </span> } /> );

import React from 'react'; import { Empty, Button } from '@douyinfe/semi-ui'; import { IllustrationSuccess, IllustrationSuccessDark } from '@douyinfe/semi-illustrations'; () => ( <Empty title={'创建成功'} image={<IllustrationSuccess style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />} layout="horizontal" description="这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。" style={{ width: 800, margin: '0 auto' }} > <Button type="primary" theme="solid" style={{ padding: '6px 24px' }}> 开始操作 </Button> </Empty> );

import React from 'react'; import { Empty } from '@douyinfe/semi-ui'; import { IllustrationConstruction, IllustrationSuccess, IllustrationFailure, IllustrationNoAccess, IllustrationNoContent, IllustrationNotFound, IllustrationNoResult } from '@douyinfe/semi-illustrations'; /* 以下为 1.13.0 版本后提供 */ import { IllustrationIdle, IllustrationIdleDark, IllustrationConstructionDark, IllustrationSuccessDark, IllustrationFailureDark, IllustrationNoAccessDark, IllustrationNoContentDark, IllustrationNotFoundDark, IllustrationNoResultDark } from '@douyinfe/semi-illustrations'; () => { const emptyStyle = { padding: 30, }; return ( <div style={{ display: 'flex', flexWrap: 'wrap' }}> <Empty image={<IllustrationSuccess style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />} description={'创建成功'} style={emptyStyle} /> <Empty image={<IllustrationFailure style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationFailureDark style={{ width: 150, height: 150 }} />} description={'加载失败'} style={emptyStyle} /> <Empty image={<IllustrationNoAccess style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoAccessDark style={{ width: 150, height: 150 }} />} description={'没有权限'} style={emptyStyle} /> <Empty image={<IllustrationNoContent style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />} description={'暂无内容，请添加'} style={emptyStyle} /> <Empty image={<IllustrationNotFound style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNotFoundDark style={{ width: 150, height: 150 }} />} description={'页面404'} style={emptyStyle} /> <Empty image={<IllustrationNoResult style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />} description={'搜索无结果'} style={emptyStyle} /> <Empty image={<IllustrationConstruction style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />} description={'建设中'} style={emptyStyle} /> <Empty image={<IllustrationIdle style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationIdleDark style={{ width: 150, height: 150 }} />} description={'神游四方'} style={emptyStyle} /> </div> ); };