diff --git a/apps/desktop/src/components/MaterialMatchingResultDialog.tsx b/apps/desktop/src/components/MaterialMatchingResultDialog.tsx index 491bc5d..f135943 100644 --- a/apps/desktop/src/components/MaterialMatchingResultDialog.tsx +++ b/apps/desktop/src/components/MaterialMatchingResultDialog.tsx @@ -39,7 +39,7 @@ export const MaterialMatchingResultDialog: React.FC { - const [activeTab, setActiveTab] = useState<'overview' | 'matches' | 'failures'>('overview'); + const [activeTab, setActiveTab] = useState<'overview' | 'matches' | 'failures' | 'records'>('overview'); if (!isOpen) return null; @@ -68,9 +68,9 @@ export const MaterialMatchingResultDialog: React.FC -
+
{/* 头部 */} -
+

素材匹配结果

{result && ( @@ -81,14 +81,14 @@ export const MaterialMatchingResultDialog: React.FC
- {/* 内容 */} -
+ {/* 内容区域 - 使用flex布局确保正确的高度分配 */} +
{loading ? (
@@ -99,27 +99,27 @@ export const MaterialMatchingResultDialog: React.FC {/* 统计概览 */} -
+
-
+
{result.statistics.total_segments}
总片段数
-
+
{result.statistics.matched_segments}
匹配成功
-
+
{result.statistics.failed_segments}
匹配失败
-
+
{(result.statistics.success_rate * 100).toFixed(1)}%
@@ -128,16 +128,17 @@ export const MaterialMatchingResultDialog: React.FC {/* 成功率进度条 */} -
-
- 匹配进度 - {result.statistics.matched_segments}/{result.statistics.total_segments} +
+
+ 匹配进度 + {result.statistics.matched_segments}/{result.statistics.total_segments}
-
+
= 0.8 ? 'bg-green-500' : - result.statistics.success_rate >= 0.6 ? 'bg-yellow-500' : 'bg-red-500' + className={`h-3 rounded-full transition-all duration-500 ease-out ${ + result.statistics.success_rate >= 0.8 ? 'bg-gradient-to-r from-green-500 to-green-600' : + result.statistics.success_rate >= 0.6 ? 'bg-gradient-to-r from-yellow-500 to-yellow-600' : + 'bg-gradient-to-r from-red-500 to-red-600' }`} style={{ width: `${result.statistics.success_rate * 100}%` }} /> @@ -146,14 +147,14 @@ export const MaterialMatchingResultDialog: React.FC {/* 选项卡 */} -
+
- {/* 选项卡内容 */} -
+ {/* 选项卡内容 - 使用flex-1确保占用剩余空间 */} +
{activeTab === 'overview' && ( )} @@ -201,6 +215,9 @@ export const MaterialMatchingResultDialog: React.FC )} + {activeTab === 'records' && ( + + )}
) : ( @@ -213,33 +230,34 @@ export const MaterialMatchingResultDialog: React.FC - {/* 底部操作按钮 */} + {/* 底部操作按钮 - 固定在底部 */} {result && !loading && ( -
+
- 使用了 {result.statistics.used_materials} 个素材，涉及 {result.statistics.used_models} 个模特 + 使用了 {result.statistics.used_materials} 个素材， + 涉及 {result.statistics.used_models} 个模特
{onRetryMatching && ( )} {onApplyResult && result.statistics.matched_segments > 0 && ( @@ -254,79 +272,131 @@ export const MaterialMatchingResultDialog: React.FC = ({ statistics }) => { + const getSuccessRateColor = (rate: number): string => { + if (rate >= 0.8) return 'text-green-600'; + if (rate >= 0.6) return 'text-yellow-600'; + return 'text-red-600'; + }; + + const getSuccessRateBgColor = (rate: number): string => { + if (rate >= 0.8) return 'bg-green-50 border-green-200'; + if (rate >= 0.6) return 'bg-yellow-50 border-yellow-200'; + return 'bg-red-50 border-red-200'; + }; + return (
{/* 匹配统计 */} -
-

- +
+

+
+ +
匹配统计

-
-
+
+
总片段数: - {statistics.total_segments} + {statistics.total_segments}
-
+
匹配成功: - {statistics.matched_segments} + {statistics.matched_segments}
-
+
匹配失败: - {statistics.failed_segments} + {statistics.failed_segments}
-
- 成功率: - {(statistics.success_rate * 100).toFixed(1)}% +
+
+ 成功率: + + {(statistics.success_rate * 100).toFixed(1)}% + +
{/* 资源使用 */} -
-

- +
+

+
+ +
资源使用

-
-
+
+
使用素材: - {statistics.used_materials} 个 + {statistics.used_materials} 个
-
+
涉及模特: - {statistics.used_models} 个 + {statistics.used_models} 个 +
+
+
+ 平均每个模特使用 {statistics.used_models > 0 ? Math.round(statistics.used_materials / statistics.used_models) : 0} 个素材 +
{/* 匹配质量评估 */} -
-

- +
+

+
+ +
匹配质量评估

-
+
{statistics.success_rate >= 0.8 && ( -
- - 匹配质量优秀，大部分片段都找到了合适的素材 +
+ +
+

匹配质量优秀

+

大部分片段都找到了合适的素材，匹配效果非常好

+
)} {statistics.success_rate >= 0.6 && statistics.success_rate < 0.8 && ( -
- - 匹配质量良好，但仍有改进空间 +
+ +
+

匹配质量良好

+

匹配效果不错，但仍有改进空间，可以考虑增加更多素材或优化分类

+
)} {statistics.success_rate < 0.6 && ( -
- - 匹配质量较低，建议检查素材分类和模板设置 +
+ +
+

匹配质量较低

+

建议检查素材分类和模板设置，或增加更多相关素材

+
)} + + {/* 改进建议 */} +
+

改进建议:

+
    + {statistics.success_rate < 0.8 && ( +
  • • 增加更多已分类的素材以提高匹配成功率
    • + )} + {statistics.used_models < 3 && ( +
  • • 考虑增加更多模特以提高匹配多样性
    • + )} + {statistics.failed_segments > 0 && ( +
  • • 检查失败片段的匹配规则设置
    • + )} +
+
@@ -340,46 +410,85 @@ const MatchesTab: React.FC<{ }> = ({ matches, formatDuration }) => { if (matches.length === 0) { return ( -
+
-

没有成功匹配的片段

+

没有成功匹配的片段

+

请检查素材分类或调整匹配规则

); } + const getMatchScoreColor = (score: number): string => { + if (score >= 0.8) return 'text-green-600 bg-green-100'; + if (score >= 0.6) return 'text-yellow-600 bg-yellow-100'; + return 'text-red-600 bg-red-100'; + }; + return (
+
+
+

成功匹配列表

+

共 {matches.length} 个片段匹配成功

+
+
+ {matches.map((match, index) => ( -
+
-
- -

{match.track_segment_name}

- #{index + 1} +
+
+ +
+
+

{match.track_segment_name}

+ 片段 #{index + 1} +
+ + {(match.match_score * 100).toFixed(1)}% 匹配度 +
-
-
- 匹配素材: - {match.material_name} -
-
- 时长: - {formatDuration(match.material_segment.duration * 1000000)} -
- {match.model_name && ( -
- 模特: - {match.model_name} + +
+
+
+ 匹配素材: + + {match.material_name} + +
+
+ 时长: + + {formatDuration(match.material_segment.duration * 1000000)} + +
+
+ +
+ {match.model_name && ( +
+ 模特: + + {match.model_name} + +
+ )} +
+ 片段ID: + + {match.material_segment_id.slice(0, 8)}... +
- )} -
- 匹配度: - {(match.match_score * 100).toFixed(1)}%
-
- 匹配原因: {match.match_reason} + +
+
+ 匹配原因: + {match.match_reason} +
@@ -393,9 +502,10 @@ const MatchesTab: React.FC<{ const FailuresTab: React.FC<{ failures: FailedSegmentMatch[] }> = ({ failures }) => { if (failures.length === 0) { return ( -
+
-

所有片段都匹配成功！

+

所有片段都匹配成功！

+

恭喜，没有匹配失败的片段

); } @@ -410,19 +520,23 @@ const FailuresTab: React.FC<{ failures: FailedSegmentMatch[] }> = ({ failures }) }, {} as Record); return ( -
+
{Object.entries(groupedFailures).map(([reason, failureList]) => ( -
-
- -

{reason}

- ({failureList.length} 个片段) +
+
+
+ +
+
+

{reason}

+ {failureList.length} 个片段 +
{failureList.map((failure) => ( -
+
{failure.track_segment_name} - + 规则: {SegmentMatchingRuleHelper.getDisplayName(failure.matching_rule)}
@@ -433,3 +547,131 @@ const FailuresTab: React.FC<{ failures: FailedSegmentMatch[] }> = ({ failures })
); }; + +// 匹配记录选项卡组件 +const MatchingRecordsTab: React.FC = () => { + // 模拟匹配记录数据 + const mockRecords = [ + { + id: '1', + timestamp: '2024-01-15 14:30:25', + template_name: '时尚写真模板', + project_name: '春季新品拍摄', + success_rate: 0.85, + total_segments: 24, + matched_segments: 20, + used_materials: 15, + used_models: 3 + }, + { + id: '2', + timestamp: '2024-01-14 16:45:12', + template_name: '商务风格模板', + project_name: '企业形象拍摄', + success_rate: 0.92, + total_segments: 18, + matched_segments: 17, + used_materials: 12, + used_models: 2 + }, + { + id: '3', + timestamp: '2024-01-13 10:20:08', + template_name: '休闲生活模板', + project_name: '日常生活记录', + success_rate: 0.78, + total_segments: 32, + matched_segments: 25, + used_materials: 20, + used_models: 4 + } + ]; + + const getSuccessRateColor = (rate: number): string => { + if (rate >= 0.8) return 'text-green-600'; + if (rate >= 0.6) return 'text-yellow-600'; + return 'text-red-600'; + }; + + const getSuccessRateBgColor = (rate: number): string => { + if (rate >= 0.8) return 'bg-green-100'; + if (rate >= 0.6) return 'bg-yellow-100'; + return 'bg-red-100'; + }; + + return ( +
+
+
+

历史匹配记录

+

查看之前的素材匹配结果

+
+
+ 共 {mockRecords.length} 条记录 +
+
+ + {mockRecords.length === 0 ? ( +
+ +

暂无匹配记录

+

完成首次匹配后，记录将显示在这里

+
+ ) : ( +
+ {mockRecords.map((record) => ( +
+
+
+
+

{record.template_name}

+ + {(record.success_rate * 100).toFixed(1)}% 成功率 + +
+

项目: {record.project_name}

+

{record.timestamp}

+
+
+
+
匹配: {record.matched_segments}/{record.total_segments}
+
素材: {record.used_materials} 个
+
模特: {record.used_models} 个
+
+
+
+ + {/* 进度条 */} +
+
+ 匹配进度 + {record.matched_segments}/{record.total_segments} +
+
+
= 0.8 ? 'bg-gradient-to-r from-green-500 to-green-600' : + record.success_rate >= 0.6 ? 'bg-gradient-to-r from-yellow-500 to-yellow-600' : + 'bg-gradient-to-r from-red-500 to-red-600' + }`} + style={{ width: `${record.success_rate * 100}%` }} + /> +
+
+ + {/* 操作按钮 */} +
+ + +
+
+ ))} +
+ )} +
+ ); +};