From 3f27668c9f95f017cec7c7d8f9649a5b10a9fa44 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Thu, 17 Jul 2025 13:36:32 +0800
Subject: [PATCH] style: implement left-right layout for export statistics
 cards

- Change to left-right layout: left side statistics info, right side icon
- Follow TemplateMatchingResultStatsPanel design pattern
- Use white background with subtle shadow and border
- Add percentage calculations for success/failure rates
- Add average file size calculation
- Use larger icons (w-8 h-8) with opacity-60 for visual balance
- Include subtitle information for better context
- Match the exact layout structure used in project statistics

fix: correct re_export_record command parameters
- Add newFilePath parameter using file dialog selection
- Fix parameter naming to match backend expectation (newFilePath)
- Implement proper file selection dialog for export path
---
 .../src/components/ExportRecordManager.tsx    | 119 +++++++++++-------
 1 file changed, 77 insertions(+), 42 deletions(-)

diff --git a/apps/desktop/src/components/ExportRecordManager.tsx b/apps/desktop/src/components/ExportRecordManager.tsx
index b75f2c8..4ba281b 100644
--- a/apps/desktop/src/components/ExportRecordManager.tsx
+++ b/apps/desktop/src/components/ExportRecordManager.tsx
@@ -143,8 +143,32 @@ const ExportRecordManager: React.FC<ExportRecordManagerProps> = ({
   // 重新导出
   const handleReExport = async (recordId: string) => {
     try {
-      await invoke('re_export_record', { recordId });
-      await loadExportRecords();
+      // 打开文件选择对话框
+      const { open } = await import('@tauri-apps/plugin-dialog');
+      const selected = await open({
+        title: '选择导出路径',
+        directory: false,
+        multiple: false,
+        filters: [
+          {
+            name: '剪映项目',
+            extensions: ['json']
+          },
+          {
+            name: '所有文件',
+            extensions: ['*']
+          }
+        ]
+      });
+
+      if (selected) {
+        await invoke('re_export_record', {
+          recordId,
+          newFilePath: selected
+        });
+        await loadExportRecords();
+        console.log('重新导出成功');
+      }
     } catch (err) {
       setError(`重新导出失败: ${err}`);
     }
@@ -372,66 +396,77 @@ 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="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="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-500">总导出次数</p>
+                  <p className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900`}>
+                    {statistics.total_exports}
+                  </p>
                 </div>
-                <div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
-                  {statistics.total_exports}
+                <div className="text-2xl opacity-60">
+                  <BarChart3 className="w-8 h-8 text-primary-600" />
                 </div>
-                <div className="text-sm text-gray-600">总导出次数</div>
               </div>
             </div>
 
             {/* 成功导出 */}
-            <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="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-500">成功导出</p>
+                  <p className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-green-600`}>
+                    {statistics.successful_exports}
+                  </p>
+                  {statistics.total_exports > 0 && (
+                    <p className="text-xs text-gray-400 mt-1">
+                      {((statistics.successful_exports / statistics.total_exports) * 100).toFixed(1)}% 成功率
+                    </p>
+                  )}
                 </div>
-                <div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
-                  {statistics.successful_exports}
+                <div className="text-2xl opacity-60">
+                  <CheckCircle className="w-8 h-8 text-green-600" />
                 </div>
-                <div className="text-sm text-gray-600">成功导出</div>
               </div>
             </div>
 
             {/* 失败导出 */}
-            <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="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-500">失败导出</p>
+                  <p className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-red-600`}>
+                    {statistics.failed_exports}
+                  </p>
+                  {statistics.total_exports > 0 && (
+                    <p className="text-xs text-gray-400 mt-1">
+                      {((statistics.failed_exports / statistics.total_exports) * 100).toFixed(1)}% 失败率
+                    </p>
+                  )}
                 </div>
-                <div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
-                  {statistics.failed_exports}
+                <div className="text-2xl opacity-60">
+                  <XCircle className="w-8 h-8 text-red-600" />
                 </div>
-                <div className="text-sm text-gray-600">失败导出</div>
               </div>
             </div>
 
             {/* 总文件大小 */}
-            <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="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-500">总文件大小</p>
+                  <p className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-purple-600`}>
+                    {formatFileSize(statistics.total_file_size)}
+                  </p>
+                  {statistics.total_exports > 0 && (
+                    <p className="text-xs text-gray-400 mt-1">
+                      平均 {formatFileSize(statistics.total_file_size / statistics.total_exports)}
+                    </p>
+                  )}
                 </div>
-                <div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
-                  {formatFileSize(statistics.total_file_size)}
+                <div className="text-2xl opacity-60">
+                  <Download className="w-8 h-8 text-purple-600" />
                 </div>
-                <div className="text-sm text-gray-600">总文件大小</div>
               </div>
             </div>
           </div>