c366261008
- 优化设计系统和主题配置 - 增强Tailwind配置，添加更丰富的色彩系统 - 新增多种动画效果和过渡动画 - 改进字体系统和间距设置 - 添加阴影变体和渐变效果 - 改进项目列表页面UI/UX - 重新设计页面头部，添加渐变背景和统计信息 - 优化项目卡片布局和响应式设计 - 增强加载和错误状态的视觉效果 - 添加交错动画效果 - 优化项目卡片组件 - 重新设计卡片布局，添加背景装饰 - 改进统计信息展示，使用渐变背景和徽章 - 增强悬停效果和交互反馈 - 优化菜单和按钮设计 - 改进表单和模态框体验 - 重新设计模态框头部和布局 - 增强表单字段的视觉设计和验证反馈 - 添加加载状态和成功状态指示 - 改进按钮样式和交互效果 - 增强加载状态和反馈机制 - 重新设计EmptyState组件，添加装饰效果 - 增强LoadingSpinner，支持多种动画样式 - 改进ErrorMessage组件，支持多种消息类型 - 新增SkeletonLoader组件用于骨架屏加载 - 添加微交互和动画效果 - 新增AnimatedButton组件，支持涟漪效果 - 创建PageTransition组件用于页面过渡 - 添加多种动画工具组件 - 增强按钮和卡片的微交互效果 - 优化响应式设计和移动端体验 - 改进容器布局和间距设置 - 优化移动端的触摸体验 - 确保所有组件在不同屏幕尺寸下的完美适配 遵循前端开发规范，提升界面美观性和用户体验
67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import React from 'react';
|
||
import { FolderPlus, Sparkles } from 'lucide-react';
|
||
|
||
interface EmptyStateProps {
|
||
title: string;
|
||
description: string;
|
||
actionText: string;
|
||
onAction: () => void;
|
||
}
|
||
|
||
/**
|
||
* 空状态组件
|
||
* 遵循现代化设计风格，提供更好的用户体验
|
||
*/
|
||
export const EmptyState: React.FC<EmptyStateProps> = ({
|
||
title,
|
||
description,
|
||
actionText,
|
||
onAction
|
||
}) => {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-20 text-center animate-fade-in-up">
|
||
{/* 图标区域 */}
|
||
<div className="relative mb-8">
|
||
{/* 背景装饰 */}
|
||
<div className="absolute inset-0 bg-gradient-to-r from-primary-100 to-blue-100 rounded-full blur-2xl opacity-50 scale-150"></div>
|
||
|
||
{/* 主图标 */}
|
||
<div className="relative p-6 bg-gradient-to-r from-primary-50 to-blue-50 rounded-3xl border border-primary-100">
|
||
<FolderPlus size={64} className="text-primary-600 animate-bounce-subtle" />
|
||
|
||
{/* 装饰性小图标 */}
|
||
<div className="absolute -top-2 -right-2 p-2 bg-yellow-100 rounded-full animate-pulse">
|
||
<Sparkles size={16} className="text-yellow-600" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 文本内容 */}
|
||
<div className="max-w-md space-y-4">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-3">
|
||
{title}
|
||
</h3>
|
||
<p className="text-gray-600 leading-relaxed text-lg">
|
||
{description}
|
||
</p>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div className="mt-8">
|
||
<button
|
||
className="btn btn-primary btn-lg shadow-glow animate-pulse-slow"
|
||
onClick={onAction}
|
||
>
|
||
<FolderPlus size={20} />
|
||
{actionText}
|
||
</button>
|
||
</div>
|
||
|
||
{/* 提示信息 */}
|
||
<div className="mt-6 text-sm text-gray-500">
|
||
<p>💡 提示：您可以通过拖拽文件夹到此处快速创建项目</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|