NoData 组件

index.tsx

import React from 'react';
import nodataUrl from '@/assets/images/noData.svg';
import './index.scss';

interface NoDataProps {
    text?: string;
    callback?: () => void;
    btnText?: string;
    style?: React.CSSProperties;
    className?: string;
    imgUrl?: string;
}

const NoData: React.FC<NoDataProps> = ({text, callback, btnText, style, className, imgUrl}) => {
    return (
        <div className={'ml-no-data' + (className || '')} style={style}>
            <div className="no-data-img">
                <img src={imgUrl ? imgUrl : nodataUrl} width="140" />
            </div>
            <div className="no-data-tip">
                <div className="no-data-text">{text}</div>
                {callback ? (
                    <div className="no-data-action">
                        <span className="action-text" onClick={callback}>
                            {btnText && `${btnText}>`}
                        </span>
                    </div>
                ) : null}
            </div>
        </div>
    );
};

export default NoData;

index.css

.ml-no-data {
    height: 200px;
    margin-top: 100px;

    .no-data-img {
        display: inline-block;
        margin-right: 20px;
    }

    .no-data-tip {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        font-size: 14px;
        color: #333;

        .no-data-text {
            margin-bottom: 10px;
        }

        .no-data-action {
            color: #108cee;
            cursor: pointer;
        }
    }
}

noData.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="82px" height="49px" viewBox="0 0 82 49" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>空页面</title>
    <defs>
        <linearGradient x1="86.810329%" y1="-8.15875094%" x2="22.5336083%" y2="100%" id="linearGradient-1">
            <stop stop-color="#F2F4F8" offset="0%"></stop>
            <stop stop-color="#E1E6EF" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="20.7456441%" y1="87.8798841%" x2="84.5825512%" y2="14.3428357%" id="linearGradient-2">
            <stop stop-color="#F6F9FC" offset="0%"></stop>
            <stop stop-color="#F6F9FC" offset="5.19294787%"></stop>
            <stop stop-color="#C6D1E2" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="147.230955%" y1="6.10314698%" x2="2.6063407%" y2="77.6498721%" id="linearGradient-3">
            <stop stop-color="#E1E6EF" offset="0%"></stop>
            <stop stop-color="#FFFFFF" stop-opacity="0.215726052" offset="98.8323078%"></stop>
            <stop stop-color="#F2F4F8" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0%" y1="21.0919748%" x2="93.9260768%" y2="78.9080252%" id="linearGradient-4">
            <stop stop-color="#FEFEFF" offset="0%"></stop>
            <stop stop-color="#E1E6EF" offset="100%"></stop>
        </linearGradient>
        <polygon id="path-5" points="10.6166667 26.4 17.5837949 26.4 21.837099 30.3606284 48.5916667 30.3606284 48.5916667 55.275 10.6166667 55.275"></polygon>
        <filter x="-11.8%" y="-15.6%" width="123.7%" height="131.2%" filterUnits="objectBoundingBox" id="filter-6">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
            <feColorMatrix values="0 0 0 0 0.000533509651   0 0 0 0 0.151869725   0 0 0 0 0.458993221  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
        <linearGradient x1="153.579175%" y1="-86.7294252%" x2="22.6913975%" y2="89.5914216%" id="linearGradient-7">
            <stop stop-color="#E1E6EF" offset="0%"></stop>
            <stop stop-color="#FFFFFF" stop-opacity="0.5" offset="100%"></stop>
        </linearGradient>
        <path d="M80.0333333,12.375 C84.0926262,12.375 87.3833333,15.6992857 87.3833333,19.8 C87.3833333,23.9007143 84.0926262,27.225 80.0333333,27.225 C75.9740404,27.225 72.6833333,23.9007143 72.6833333,19.8 C72.6833333,15.6992857 75.9740404,12.375 80.0333333,12.375 Z M80.0333333,15.75 C77.8191736,15.75 76.0242424,17.5632468 76.0242424,19.8 C76.0242424,22.0367532 77.8191736,23.85 80.0333333,23.85 C82.2474931,23.85 84.0424242,22.0367532 84.0424242,19.8 C84.0424242,17.5632468 82.2474931,15.75 80.0333333,15.75 Z" id="path-8"></path>
        <filter x="-30.6%" y="-30.3%" width="161.2%" height="160.6%" filterUnits="objectBoundingBox" id="filter-9">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.152941176   0 0 0 0 0.458823529  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
        <linearGradient x1="0%" y1="50%" x2="98.5269613%" y2="50%" id="linearGradient-10">
            <stop stop-color="#FEFEFF" offset="0%"></stop>
            <stop stop-color="#C6D1E2" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0%" y1="50%" x2="98.5269613%" y2="50%" id="linearGradient-11">
            <stop stop-color="#FEFEFF" offset="0%"></stop>
            <stop stop-color="#C6D1E2" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="-18.8730916%" x2="50%" y2="100%" id="linearGradient-12">
            <stop stop-color="#2E96FF" offset="0%"></stop>
            <stop stop-color="#2468F2" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="营销-泰康临时优化需求" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="空页面" transform="translate(-8.000000, -9.000000)">
            <rect id="矩形" fill="url(#linearGradient-1)" x="33.075" y="10.725" width="32.6666667" height="41.25"></rect>
            <path d="M57.575,36.7125 C59.3791302,36.7125 60.8416667,38.1750365 60.8416667,39.9791667 L60.8416667,40.0458333 C60.8416667,41.8499635 59.3791302,43.3125 57.575,43.3125 C55.7708698,43.3125 54.3083333,41.8499635 54.3083333,40.0458333 L54.3083333,39.9791667 C54.3083333,38.1750365 55.7708698,36.7125 57.575,36.7125 Z" id="矩形备份-2" fill="url(#linearGradient-2)"></path>
            <g id="矩形" opacity="0.86">
                <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
                <path stroke="url(#linearGradient-4)" stroke-width="0.5" d="M17.4854198,26.65 L21.7387239,30.6106284 L48.3416667,30.6106284 L48.3416667,55.025 L10.8666667,55.025 L10.8666667,26.65 L17.4854198,26.65 Z" stroke-linejoin="square" fill="url(#linearGradient-3)" fill-rule="evenodd"></path>
            </g>
            <g id="形状结合">
                <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
                <use fill="url(#linearGradient-7)" fill-rule="evenodd" xlink:href="#path-8"></use>
            </g>
            <rect id="矩形备份-16" fill="url(#linearGradient-10)" x="37.975" y="24.3375" width="17.9666667" height="2.475"></rect>
            <rect id="矩形备份-17" fill="url(#linearGradient-11)" x="37.975" y="17.7375" width="12.25" height="2.475"></rect>
            <g id="编组-2" transform="translate(61.250000, 29.700000)" fill="url(#linearGradient-12)">
                <path d="M11.4333333,0 C14.5905612,-5.79973342e-16 17.15,2.55943885 17.15,5.71666667 L17.15,9.13333333 C17.15,12.1964974 14.7407969,14.6969618 11.713881,14.8432364 C15.4316736,14.8872879 19.1407814,15.8531842 22.4870975,17.73875 L22.8666667,17.9575 L22.8666667,25.245 L0,25.245 L0,17.9575 C3.44444098,15.9277401 7.29426817,14.8889244 11.1536564,14.8410527 C8.12601873,14.6971164 5.71666667,12.196592 5.71666667,9.13333333 L5.71666667,5.71666667 C5.71666667,2.55943885 8.27610551,5.79973342e-16 11.4333333,0 Z" id="形状结合"></path>
            </g>
        </g>
    </g>
</svg>