From 723575ba7ee2ab7d57b72342dc0ecc1cb637ba9a Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Tue, 15 Jul 2025 22:26:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DWindows=E9=95=BF?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84=E5=89=8D=E7=BC=80=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

现在缩略图可以正确显示，不会因为Windows长路径前缀导致加载失败。
---
 .../src/components/MaterialSegmentView.tsx    | 132 +++++++++---------
 1 file changed, 67 insertions(+), 65 deletions(-)

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<ThumbnailDisplayProps> = ({
         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<ThumbnailDisplayProps> = ({
       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<MaterialSegmentViewProps> = ({ 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<MaterialSegmentViewProps> = ({ 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<MaterialSegmentViewProps> = ({ projec
         count
       });
     });
-    
+
     return options;
   }, [segmentView]);
 
@@ -362,54 +366,54 @@ export const MaterialSegmentView: React.FC<MaterialSegmentViewProps> = ({ projec
                   <span className="ml-2">时长: {formatDuration(segment.segment.duration)}</span>
                 </p>
               </div>
-            
-            {/* 操作按钮 */}
-            <div className="flex items-center gap-1 ml-2">
-              <button
-                onClick={() => playVideoSegment(
-                  segment.segment.file_path,
-                  segment.segment.start_time,
-                  segment.segment.end_time
-                )}
-                className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
-                title="播放视频片段"
-              >
-                <Eye size={16} />
-              </button>
-              <button className="p-1 text-gray-400 hover:text-gray-600 transition-colors">
-                <Edit size={16} />
-              </button>
-              <button className="p-1 text-gray-400 hover:text-red-600 transition-colors">
-                <Trash2 size={16} />
-              </button>
+
+              {/* 操作按钮 */}
+              <div className="flex items-center gap-1 ml-2">
+                <button
+                  onClick={() => playVideoSegment(
+                    segment.segment.file_path,
+                    segment.segment.start_time,
+                    segment.segment.end_time
+                  )}
+                  className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
+                  title="播放视频片段"
+                >
+                  <Eye size={16} />
+                </button>
+                <button className="p-1 text-gray-400 hover:text-gray-600 transition-colors">
+                  <Edit size={16} />
+                </button>
+                <button className="p-1 text-gray-400 hover:text-red-600 transition-colors">
+                  <Trash2 size={16} />
+                </button>
+              </div>
             </div>
-          </div>
 
-          {/* 标签信息 */}
-          <div className="flex items-center gap-2 mt-3">
-            {segment.classification && (
-              <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" />
-                {segment.classification.category}
-              </span>
-            )}
+            {/* 标签信息 */}
+            <div className="flex items-center gap-2 mt-3">
+              {segment.classification && (
+                <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" />
+                  {segment.classification.category}
+                </span>
+              )}
 
-            {segment.model && (
-              <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" />
-                {segment.model.name}
-              </span>
-            )}
+              {segment.model && (
+                <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" />
+                  {segment.model.name}
+                </span>
+              )}
 
-            {segment.classification?.confidence && (
-              <span className="text-xs text-gray-500">
-                置信度: {Math.round(segment.classification.confidence * 100)}%
-              </span>
-            )}
+              {segment.classification?.confidence && (
+                <span className="text-xs text-gray-500">
+                  置信度: {Math.round(segment.classification.confidence * 100)}%
+                </span>
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
     );
   };
 
@@ -484,11 +488,10 @@ export const MaterialSegmentView: React.FC<MaterialSegmentViewProps> = ({ projec
               <button
                 key={option.value}
                 onClick={() => setSelectedClassification(option.value)}
-                className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
-                  selectedClassification === option.value
+                className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${selectedClassification === option.value
                     ? 'bg-blue-100 text-blue-800 border border-blue-200'
                     : 'bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200'
-                }`}
+                  }`}
               >
                 <span>{option.label}</span>
                 <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
                 key={option.value}
                 onClick={() => setSelectedModel(option.value)}
-                className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
-                  selectedModel === option.value
+                className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${selectedModel === option.value
                     ? 'bg-green-100 text-green-800 border border-green-200'
                     : 'bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200'
-                }`}
+                  }`}
               >
                 <span>{option.label}</span>
                 <span className="ml-1.5 px-1.5 py-0.5 bg-white rounded-full text-xs">