fix: 修复Windows长路径前缀问题

路径处理优化:
- 去掉Windows长路径前缀 \\\\?\\ 避免文件URL转换错误
- 在convertFileSrc之前清理路径格式
- 确保缩略图URL在所有平台上正确显示

 修复内容:
- 数据库读取的缩略图路径处理
- 新生成缩略图的路径处理
- 统一使用convertFileSrc确保跨平台兼容性

现在缩略图可以正确显示,不会因为Windows长路径前缀导致加载失败。
This commit is contained in:
imeepos 2025-07-15 22:26:27 +08:00
parent 4d61fb69f3
commit 723575ba7e
1 changed files with 67 additions and 65 deletions

View File

@ -10,7 +10,7 @@ import {
Trash2, Trash2,
FolderOpen FolderOpen
} from 'lucide-react'; } from 'lucide-react';
import { invoke } from '@tauri-apps/api/core'; import { invoke, convertFileSrc } from '@tauri-apps/api/core';
import { SearchInput } from './InteractiveInput'; import { SearchInput } from './InteractiveInput';
import { InteractiveButton } from './InteractiveButton'; import { InteractiveButton } from './InteractiveButton';
@ -147,10 +147,12 @@ const ThumbnailDisplay: React.FC<ThumbnailDisplayProps> = ({
setThumbnailUrl(thumbnailCache.get(segmentId) || null); setThumbnailUrl(thumbnailCache.get(segmentId) || null);
return; return;
} }
console.log({ segment })
// 首先检查数据库中是否已有缩略图 // 首先检查数据库中是否已有缩略图
if (segment.segment.thumbnail_path) { 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); setThumbnailUrl(thumbnailUrl);
// 更新缓存 // 更新缓存
setThumbnailCache(prev => new Map(prev.set(segmentId, thumbnailUrl))); setThumbnailCache(prev => new Map(prev.set(segmentId, thumbnailUrl)));
@ -162,8 +164,10 @@ const ThumbnailDisplay: React.FC<ThumbnailDisplayProps> = ({
try { try {
const thumbnailPath = await generateSegmentThumbnail(segment); const thumbnailPath = await generateSegmentThumbnail(segment);
if (thumbnailPath) { if (thumbnailPath) {
// 去掉Windows长路径前缀 \\?\
const cleanPath = thumbnailPath.replace(/^\\\\\?\\/, '');
// 转换为可访问的URL // 转换为可访问的URL
const thumbnailUrl = `file://${thumbnailPath}`; const thumbnailUrl = convertFileSrc(cleanPath);
setThumbnailUrl(thumbnailUrl); setThumbnailUrl(thumbnailUrl);
// 更新缓存 // 更新缓存
@ -241,15 +245,15 @@ export const MaterialSegmentView: React.FC<MaterialSegmentViewProps> = ({ projec
// 获取分类选项 // 获取分类选项
const classificationOptions = useMemo(() => { const classificationOptions = useMemo(() => {
if (!segmentView) return [{ label: '全部', value: '全部', count: 0 }]; if (!segmentView) return [{ label: '全部', value: '全部', count: 0 }];
const options = [ const options = [
{ {
label: '全部', label: '全部',
value: '全部', value: '全部',
count: segmentView.stats.total_segments count: segmentView.stats.total_segments
} }
]; ];
Object.entries(segmentView.stats.classification_counts).forEach(([category, count]) => { Object.entries(segmentView.stats.classification_counts).forEach(([category, count]) => {
options.push({ options.push({
label: category || '未分类', label: category || '未分类',
@ -257,22 +261,22 @@ export const MaterialSegmentView: React.FC<MaterialSegmentViewProps> = ({ projec
count count
}); });
}); });
return options; return options;
}, [segmentView]); }, [segmentView]);
// 获取模特选项 // 获取模特选项
const modelOptions = useMemo(() => { const modelOptions = useMemo(() => {
if (!segmentView) return [{ label: '全部', value: '全部', count: 0 }]; if (!segmentView) return [{ label: '全部', value: '全部', count: 0 }];
const options = [ const options = [
{ {
label: '全部', label: '全部',
value: '全部', value: '全部',
count: segmentView.stats.total_segments count: segmentView.stats.total_segments
} }
]; ];
Object.entries(segmentView.stats.model_counts).forEach(([modelName, count]) => { Object.entries(segmentView.stats.model_counts).forEach(([modelName, count]) => {
options.push({ options.push({
label: modelName || '未指定', label: modelName || '未指定',
@ -280,7 +284,7 @@ export const MaterialSegmentView: React.FC<MaterialSegmentViewProps> = ({ projec
count count
}); });
}); });
return options; return options;
}, [segmentView]); }, [segmentView]);
@ -362,54 +366,54 @@ export const MaterialSegmentView: React.FC<MaterialSegmentViewProps> = ({ projec
<span className="ml-2">: {formatDuration(segment.segment.duration)}</span> <span className="ml-2">: {formatDuration(segment.segment.duration)}</span>
</p> </p>
</div> </div>
{/* 操作按钮 */} {/* 操作按钮 */}
<div className="flex items-center gap-1 ml-2"> <div className="flex items-center gap-1 ml-2">
<button <button
onClick={() => playVideoSegment( onClick={() => playVideoSegment(
segment.segment.file_path, segment.segment.file_path,
segment.segment.start_time, segment.segment.start_time,
segment.segment.end_time segment.segment.end_time
)} )}
className="p-1 text-gray-400 hover:text-blue-600 transition-colors" className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
title="播放视频片段" title="播放视频片段"
> >
<Eye size={16} /> <Eye size={16} />
</button> </button>
<button className="p-1 text-gray-400 hover:text-gray-600 transition-colors"> <button className="p-1 text-gray-400 hover:text-gray-600 transition-colors">
<Edit size={16} /> <Edit size={16} />
</button> </button>
<button className="p-1 text-gray-400 hover:text-red-600 transition-colors"> <button className="p-1 text-gray-400 hover:text-red-600 transition-colors">
<Trash2 size={16} /> <Trash2 size={16} />
</button> </button>
</div>
</div> </div>
</div>
{/* 标签信息 */} {/* 标签信息 */}
<div className="flex items-center gap-2 mt-3"> <div className="flex items-center gap-2 mt-3">
{segment.classification && ( {segment.classification && (
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
<Tag size={12} className="mr-1" /> <Tag size={12} className="mr-1" />
{segment.classification.category} {segment.classification.category}
</span> </span>
)} )}
{segment.model && ( {segment.model && (
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800"> <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
<Users size={12} className="mr-1" /> <Users size={12} className="mr-1" />
{segment.model.name} {segment.model.name}
</span> </span>
)} )}
{segment.classification?.confidence && ( {segment.classification?.confidence && (
<span className="text-xs text-gray-500"> <span className="text-xs text-gray-500">
: {Math.round(segment.classification.confidence * 100)}% : {Math.round(segment.classification.confidence * 100)}%
</span> </span>
)} )}
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };
@ -484,11 +488,10 @@ export const MaterialSegmentView: React.FC<MaterialSegmentViewProps> = ({ projec
<button <button
key={option.value} key={option.value}
onClick={() => setSelectedClassification(option.value)} onClick={() => setSelectedClassification(option.value)}
className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${ className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${selectedClassification === option.value
selectedClassification === option.value
? 'bg-blue-100 text-blue-800 border border-blue-200' ? 'bg-blue-100 text-blue-800 border border-blue-200'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200'
}`} }`}
> >
<span>{option.label}</span> <span>{option.label}</span>
<span className="ml-1.5 px-1.5 py-0.5 bg-white rounded-full text-xs"> <span className="ml-1.5 px-1.5 py-0.5 bg-white rounded-full text-xs">
@ -510,11 +513,10 @@ export const MaterialSegmentView: React.FC<MaterialSegmentViewProps> = ({ projec
<button <button
key={option.value} key={option.value}
onClick={() => setSelectedModel(option.value)} onClick={() => setSelectedModel(option.value)}
className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${ className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${selectedModel === option.value
selectedModel === option.value
? 'bg-green-100 text-green-800 border border-green-200' ? 'bg-green-100 text-green-800 border border-green-200'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200'
}`} }`}
> >
<span>{option.label}</span> <span>{option.label}</span>
<span className="ml-1.5 px-1.5 py-0.5 bg-white rounded-full text-xs"> <span className="ml-1.5 px-1.5 py-0.5 bg-white rounded-full text-xs">