From 0e1b8d62430b866dc5997745827a2c87765766db Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Thu, 17 Jul 2025 13:32:49 +0800
Subject: [PATCH] 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
---
 .../src/components/ExportRecordManager.tsx    | 75 +++++++++++--------
 1 file changed, 43 insertions(+), 32 deletions(-)

diff --git a/apps/desktop/src/components/ExportRecordManager.tsx b/apps/desktop/src/components/ExportRecordManager.tsx
index 413545e..b75f2c8 100644
--- a/apps/desktop/src/components/ExportRecordManager.tsx
+++ b/apps/desktop/src/components/ExportRecordManager.tsx
@@ -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>