style: align ExportRecordManager statistics with project statistics design
- Replace stat-card classes with project-style gradient cards - Use same design pattern as ProjectCard and ProjectDetails statistics - Add gradient backgrounds with decorative circles - Implement hover animations with translate and shadow effects - Use consistent color scheme: primary, green, red, purple - Match the visual style of other project statistics throughout the app - Improve visual hierarchy with proper spacing and typography
This commit is contained in:
imeepos
parent
09c6209030
commit
0e1b8d6243
|
|
@ -371,56 +371,67 @@ const ExportRecordManager: React.FC<ExportRecordManagerProps> = ({
|
|||
{/* 统计信息 */}
|
||||
{statistics && (
|
||||
<div className={`grid ${compact ? 'grid-cols-2 md:grid-cols-4 gap-3' : 'grid-cols-2 md:grid-cols-4 gap-4'}`}>
|
||||
<div className="stat-card primary">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-primary-600`}>
|
||||
{statistics.total_exports}
|
||||
{/* 总导出次数 */}
|
||||
<div className="bg-gradient-to-br from-white to-primary-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-primary-100/50 to-primary-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="p-2 bg-primary-100/50 rounded-lg">
|
||||
<BarChart3 className="w-5 h-5 text-primary-600" />
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">总导出次数</div>
|
||||
</div>
|
||||
<div className="p-3 bg-primary-50 rounded-lg">
|
||||
<BarChart3 className="w-6 h-6 text-primary-600" />
|
||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
|
||||
{statistics.total_exports}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">总导出次数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-card success">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-green-600`}>
|
||||
{statistics.successful_exports}
|
||||
|
||||
{/* 成功导出 */}
|
||||
<div className="bg-gradient-to-br from-white to-green-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-green-100/50 to-green-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="p-2 bg-green-100/50 rounded-lg">
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">成功导出</div>
|
||||
</div>
|
||||
<div className="p-3 bg-green-50 rounded-lg">
|
||||
<CheckCircle className="w-6 h-6 text-green-600" />
|
||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
|
||||
{statistics.successful_exports}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">成功导出</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-card warning">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-red-600`}>
|
||||
{statistics.failed_exports}
|
||||
|
||||
{/* 失败导出 */}
|
||||
<div className="bg-gradient-to-br from-white to-red-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-red-100/50 to-red-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="p-2 bg-red-100/50 rounded-lg">
|
||||
<XCircle className="w-5 h-5 text-red-600" />
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">失败导出</div>
|
||||
</div>
|
||||
<div className="p-3 bg-red-50 rounded-lg">
|
||||
<XCircle className="w-6 h-6 text-red-600" />
|
||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
|
||||
{statistics.failed_exports}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">失败导出</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-card purple">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-purple-600`}>
|
||||
{formatFileSize(statistics.total_file_size)}
|
||||
|
||||
{/* 总文件大小 */}
|
||||
<div className="bg-gradient-to-br from-white to-purple-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-purple-100/50 to-purple-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="p-2 bg-purple-100/50 rounded-lg">
|
||||
<Download className="w-5 h-5 text-purple-600" />
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">总文件大小</div>
|
||||
</div>
|
||||
<div className="p-3 bg-purple-50 rounded-lg">
|
||||
<Download className="w-6 h-6 text-purple-600" />
|
||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
|
||||
{formatFileSize(statistics.total_file_size)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">总文件大小</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue