bowong
/
mixvideo-v2
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
imeepos 2025-07-17 13:36:32 +08:00
parent df1233f68e
commit 3f27668c9f
1 changed files with 77 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>