imeepos
/
mixvideo-v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2025-07-17 13:32:49 +08:00
parent 09c6209030
commit 0e1b8d6243
1 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
apps/desktop/src/components/ExportRecordManager.tsx
View File

@ -371,57 +371,68 @@ const ExportRecordManager: React.FC<ExportRecordManagerProps> = ({
{/* 统计信息 */} {/* 统计信息 */}
{statistics && ( {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={`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 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> <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={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-primary-600`}> <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>
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
{statistics.total_exports} {statistics.total_exports}
</div> </div>
<div className="text-sm text-gray-600">总导出次数</div> <div className="text-sm text-gray-600">总导出次数</div>
</div> </div>
<div className="p-3 bg-primary-50 rounded-lg"> </div>
<BarChart3 className="w-6 h-6 text-primary-600" />
{/* 成功导出 */}
<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>
</div> </div>
</div> <div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
<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} {statistics.successful_exports}
</div> </div>
<div className="text-sm text-gray-600">成功导出</div> <div className="text-sm text-gray-600">成功导出</div>
</div> </div>
<div className="p-3 bg-green-50 rounded-lg"> </div>
<CheckCircle className="w-6 h-6 text-green-600" />
{/* 失败导出 */}
<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>
</div> </div>
</div> <div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
<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} {statistics.failed_exports}
</div> </div>
<div className="text-sm text-gray-600">失败导出</div> <div className="text-sm text-gray-600">失败导出</div>
</div> </div>
<div className="p-3 bg-red-50 rounded-lg"> </div>
<XCircle className="w-6 h-6 text-red-600" />
{/* 总文件大小 */}
<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>
</div> </div>
</div> <div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
<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)} {formatFileSize(statistics.total_file_size)}
</div> </div>
<div className="text-sm text-gray-600">总文件大小</div> <div className="text-sm text-gray-600">总文件大小</div>
</div> </div>
<div className="p-3 bg-purple-50 rounded-lg">
<Download className="w-6 h-6 text-purple-600" />
</div>
</div>
</div> </div>
</div> </div>
)} )}