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:
parent
df1233f68e
commit
3f27668c9f
|
|
@ -143,8 +143,32 @@ const ExportRecordManager: React.FC<ExportRecordManagerProps> = ({
|
||||||
// 重新导出
|
// 重新导出
|
||||||
const handleReExport = async (recordId: string) => {
|
const handleReExport = async (recordId: string) => {
|
||||||
try {
|
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) {
|
} catch (err) {
|
||||||
setError(`重新导出失败: ${err}`);
|
setError(`重新导出失败: ${err}`);
|
||||||
}
|
}
|
||||||
|
|
@ -372,66 +396,77 @@ 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="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="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||||||
<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="flex items-center justify-between">
|
||||||
<div className="relative z-10">
|
<div>
|
||||||
<div className="flex items-center justify-between mb-2">
|
<p className="text-sm font-medium text-gray-500">总导出次数</p>
|
||||||
<div className="p-2 bg-primary-100/50 rounded-lg">
|
<p className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900`}>
|
||||||
<BarChart3 className="w-5 h-5 text-primary-600" />
|
{statistics.total_exports}
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
|
<div className="text-2xl opacity-60">
|
||||||
{statistics.total_exports}
|
<BarChart3 className="w-8 h-8 text-primary-600" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-gray-600">总导出次数</div>
|
|
||||||
</div>
|
</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="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||||||
<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="flex items-center justify-between">
|
||||||
<div className="relative z-10">
|
<div>
|
||||||
<div className="flex items-center justify-between mb-2">
|
<p className="text-sm font-medium text-gray-500">成功导出</p>
|
||||||
<div className="p-2 bg-green-100/50 rounded-lg">
|
<p className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-green-600`}>
|
||||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
{statistics.successful_exports}
|
||||||
</div>
|
</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>
|
||||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
|
<div className="text-2xl opacity-60">
|
||||||
{statistics.successful_exports}
|
<CheckCircle className="w-8 h-8 text-green-600" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-gray-600">成功导出</div>
|
|
||||||
</div>
|
</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="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||||||
<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="flex items-center justify-between">
|
||||||
<div className="relative z-10">
|
<div>
|
||||||
<div className="flex items-center justify-between mb-2">
|
<p className="text-sm font-medium text-gray-500">失败导出</p>
|
||||||
<div className="p-2 bg-red-100/50 rounded-lg">
|
<p className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-red-600`}>
|
||||||
<XCircle className="w-5 h-5 text-red-600" />
|
{statistics.failed_exports}
|
||||||
</div>
|
</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>
|
||||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
|
<div className="text-2xl opacity-60">
|
||||||
{statistics.failed_exports}
|
<XCircle className="w-8 h-8 text-red-600" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-gray-600">失败导出</div>
|
|
||||||
</div>
|
</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="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||||||
<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="flex items-center justify-between">
|
||||||
<div className="relative z-10">
|
<div>
|
||||||
<div className="flex items-center justify-between mb-2">
|
<p className="text-sm font-medium text-gray-500">总文件大小</p>
|
||||||
<div className="p-2 bg-purple-100/50 rounded-lg">
|
<p className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-purple-600`}>
|
||||||
<Download className="w-5 h-5 text-purple-600" />
|
{formatFileSize(statistics.total_file_size)}
|
||||||
</div>
|
</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>
|
||||||
<div className={`${compact ? 'text-xl' : 'text-2xl'} font-bold text-gray-900 mb-1`}>
|
<div className="text-2xl opacity-60">
|
||||||
{formatFileSize(statistics.total_file_size)}
|
<Download className="w-8 h-8 text-purple-600" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-gray-600">总文件大小</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue