diff --git a/apps/desktop/src/components/MaterialSegmentView.tsx b/apps/desktop/src/components/MaterialSegmentView.tsx index 7c201af..bf3d5fa 100644 --- a/apps/desktop/src/components/MaterialSegmentView.tsx +++ b/apps/desktop/src/components/MaterialSegmentView.tsx @@ -10,7 +10,7 @@ import { Trash2, FolderOpen } from 'lucide-react'; -import { invoke } from '@tauri-apps/api/core'; +import { invoke, convertFileSrc } from '@tauri-apps/api/core'; import { SearchInput } from './InteractiveInput'; import { InteractiveButton } from './InteractiveButton'; @@ -147,10 +147,12 @@ const ThumbnailDisplay: React.FC = ({ setThumbnailUrl(thumbnailCache.get(segmentId) || null); return; } - + console.log({ segment }) // 首先检查数据库中是否已有缩略图 if (segment.segment.thumbnail_path) { - const thumbnailUrl = `file://${segment.segment.thumbnail_path}`; + // 去掉Windows长路径前缀 \\?\ + const cleanPath = segment.segment.thumbnail_path.replace(/^\\\\\?\\/, ''); + const thumbnailUrl = convertFileSrc(cleanPath); setThumbnailUrl(thumbnailUrl); // 更新缓存 setThumbnailCache(prev => new Map(prev.set(segmentId, thumbnailUrl))); @@ -162,8 +164,10 @@ const ThumbnailDisplay: React.FC = ({ try { const thumbnailPath = await generateSegmentThumbnail(segment); if (thumbnailPath) { + // 去掉Windows长路径前缀 \\?\ + const cleanPath = thumbnailPath.replace(/^\\\\\?\\/, ''); // 转换为可访问的URL - const thumbnailUrl = `file://${thumbnailPath}`; + const thumbnailUrl = convertFileSrc(cleanPath); setThumbnailUrl(thumbnailUrl); // 更新缓存 @@ -241,15 +245,15 @@ export const MaterialSegmentView: React.FC = ({ projec // 获取分类选项 const classificationOptions = useMemo(() => { if (!segmentView) return [{ label: '全部', value: '全部', count: 0 }]; - + const options = [ - { - label: '全部', - value: '全部', - count: segmentView.stats.total_segments + { + label: '全部', + value: '全部', + count: segmentView.stats.total_segments } ]; - + Object.entries(segmentView.stats.classification_counts).forEach(([category, count]) => { options.push({ label: category || '未分类', @@ -257,22 +261,22 @@ export const MaterialSegmentView: React.FC = ({ projec count }); }); - + return options; }, [segmentView]); // 获取模特选项 const modelOptions = useMemo(() => { if (!segmentView) return [{ label: '全部', value: '全部', count: 0 }]; - + const options = [ - { - label: '全部', - value: '全部', - count: segmentView.stats.total_segments + { + label: '全部', + value: '全部', + count: segmentView.stats.total_segments } ]; - + Object.entries(segmentView.stats.model_counts).forEach(([modelName, count]) => { options.push({ label: modelName || '未指定', @@ -280,7 +284,7 @@ export const MaterialSegmentView: React.FC = ({ projec count }); }); - + return options; }, [segmentView]); @@ -362,54 +366,54 @@ export const MaterialSegmentView: React.FC = ({ projec 时长: {formatDuration(segment.segment.duration)}

- - {/* 操作按钮 */} -
- - - + + {/* 操作按钮 */} +
+ + + +
- - {/* 标签信息 */} -
- {segment.classification && ( - - - {segment.classification.category} - - )} + {/* 标签信息 */} +
+ {segment.classification && ( + + + {segment.classification.category} + + )} - {segment.model && ( - - - {segment.model.name} - - )} + {segment.model && ( + + + {segment.model.name} + + )} - {segment.classification?.confidence && ( - - 置信度: {Math.round(segment.classification.confidence * 100)}% - - )} + {segment.classification?.confidence && ( + + 置信度: {Math.round(segment.classification.confidence * 100)}% + + )} +
- ); }; @@ -484,11 +488,10 @@ export const MaterialSegmentView: React.FC = ({ projec