fix: 修复Windows长路径前缀问题
路径处理优化: - 去掉Windows长路径前缀 \\\\?\\ 避免文件URL转换错误 - 在convertFileSrc之前清理路径格式 - 确保缩略图URL在所有平台上正确显示 修复内容: - 数据库读取的缩略图路径处理 - 新生成缩略图的路径处理 - 统一使用convertFileSrc确保跨平台兼容性 现在缩略图可以正确显示,不会因为Windows长路径前缀导致加载失败。
This commit is contained in:
parent
4d61fb69f3
commit
723575ba7e
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue