feat: 移动端UI精致化优化
- 添加页面过渡动画(淡入+滑动) - 优化统计卡片视觉,添加渐变色和微动效 - 实现列表项左滑删除手势(编辑+删除按钮) - 优化底部导航,缩小高度并添加点击波纹效果 - 改进空状态,添加插画和引导按钮 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
import { Icon } from './icons';
|
||||
|
||||
export default function EmptyState({
|
||||
icon = 'info',
|
||||
title = '暂无数据',
|
||||
description = '这里还没有内容',
|
||||
action,
|
||||
actionLabel,
|
||||
onAction,
|
||||
}) {
|
||||
return (
|
||||
<div className="empty-state-enhanced">
|
||||
<div className="empty-state-illustration">
|
||||
<div className="empty-state-bg">
|
||||
<Icon name={icon} size={32} />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="empty-state-title">{title}</h3>
|
||||
{description && <p className="empty-state-description">{description}</p>}
|
||||
{action && (
|
||||
<button type="button" className="btn btn-primary empty-state-action" onClick={onAction}>
|
||||
{actionLabel}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user