32 lines
1.4 KiB
React
32 lines
1.4 KiB
React
import React from 'react';
|
|
import './EmptyPro.css';
|
|
|
|
const PRESET = {
|
|
empty: { icon: '📭', title: '暂无数据', desc: '当前列表为空，试试新增一条记录。' },
|
|
permission: { icon: '🔒', title: '无访问权限', desc: '你没有查看该内容的权限。' },
|
|
search: { icon: '🔍', title: '未找到结果', desc: '换个关键词或筛选条件再试。' },
|
|
error: { icon: '⚠️', title: '加载失败', desc: '网络异常，请稍后重试。' }
|
|
};
|
|
|
|
export default function EmptyPro({ type = 'empty', icon, title, desc, actionText, secondaryText, onAction, onSecondary }) {
|
|
const p = PRESET[type] || {};
|
|
const resolved = {
|
|
icon: icon || p.icon || '📭',
|
|
title: title || p.title || '暂无数据',
|
|
desc: desc || p.desc || ''
|
|
};
|
|
return (
|
|
<div className="aa-empty">
|
|
<div className="aa-empty-icon">{resolved.icon}</div>
|
|
<div className="aa-empty-title">{resolved.title}</div>
|
|
{resolved.desc ? <div className="aa-empty-desc">{resolved.desc}</div> : null}
|
|
{(actionText || secondaryText) ? (
|
|
<div className="aa-empty-actions">
|
|
{actionText ? <button className="aa-empty-btn primary" onClick={onAction}>{actionText}</button> : null}
|
|
{secondaryText ? <button className="aa-empty-btn" onClick={onSecondary}>{secondaryText}</button> : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|