From 293c1e29c751e41f5d6e21c7175ee41f51a1ecd1 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Mon, 14 Jul 2025 16:36:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E6=9D=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VideoClassificationProgress.tsx           | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/desktop/src/components/VideoClassificationProgress.tsx b/apps/desktop/src/components/VideoClassificationProgress.tsx
index b61ab74..93ee00e 100644
--- a/apps/desktop/src/components/VideoClassificationProgress.tsx
+++ b/apps/desktop/src/components/VideoClassificationProgress.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import {
   Brain, Clock, CheckCircle, XCircle, AlertCircle, Pause, Play, Square,
   TrendingUp, BarChart3, Eye, Star, Target
@@ -158,10 +158,10 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
   };
 
   // 计算进度百分比
-  const getOverallProgress = () => {
+  const getOverallProgress = useCallback(() => {
     if (!typedQueueStats || typedQueueStats.total_tasks === 0) return 0;
-    return Math.round((typedQueueStats.completed_tasks / typedQueueStats.total_tasks) * 100);
-  };
+    return Math.round(((typedQueueStats.completed_tasks + typedQueueStats.failed_tasks) / typedQueueStats.total_tasks) * 100);
+  }, [typedQueueStats]);
 
   // 过滤相关任务
   const relevantTasks = materialId
@@ -173,7 +173,9 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
   }
 
   const statusInfo = typedQueueStats ? getStatusInfo(typedQueueStats.status) : null;
-  const overallProgress = getOverallProgress();
+  const overallProgress = useMemo(() => {
+    return getOverallProgress()
+  }, [getOverallProgress]);
 
   return (
     <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
@@ -203,7 +205,7 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
               <Brain className="w-5 h-5 text-purple-600" />
               <h3 className="text-lg font-medium text-gray-900">AI视频分类</h3>
             </div>
-            
+
             {statusInfo && (
               <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusInfo.color}`}>
                 <statusInfo.icon className="w-3 h-3 mr-1" />
@@ -219,15 +221,14 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
               <button
                 onClick={handlePauseResume}
                 disabled={isLoading || (typedQueueStats.status !== 'Running' && typedQueueStats.status !== 'Paused')}
-                className={`p-2 rounded-md transition-colors ${
-                  isLoading || (typedQueueStats.status !== 'Running' && typedQueueStats.status !== 'Paused')
+                className={`p-2 rounded-md transition-colors ${isLoading || (typedQueueStats.status !== 'Running' && typedQueueStats.status !== 'Paused')
                     ? 'text-gray-400 cursor-not-allowed'
                     : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
-                }`}
+                  }`}
                 title={
                   typedQueueStats.status === 'Running' ? '暂停队列' :
-                  typedQueueStats.status === 'Paused' ? '恢复队列' :
-                  '队列未运行'
+                    typedQueueStats.status === 'Paused' ? '恢复队列' :
+                      '队列未运行'
                 }
               >
                 {typedQueueStats.status === 'Running' ? (
@@ -241,11 +242,10 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
               <button
                 onClick={handleStop}
                 disabled={isLoading || typedQueueStats.status === 'Stopped'}
-                className={`p-2 rounded-md transition-colors ${
-                  isLoading || typedQueueStats.status === 'Stopped'
+                className={`p-2 rounded-md transition-colors ${isLoading || typedQueueStats.status === 'Stopped'
                     ? 'text-gray-400 cursor-not-allowed'
                     : 'text-gray-600 hover:text-red-600 hover:bg-red-50'
-                }`}
+                  }`}
                 title={typedQueueStats.status === 'Stopped' ? '队列已停止' : '停止队列'}
               >
                 <Square className="w-4 h-4" />
@@ -336,9 +336,9 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
                       {taskStatusInfo.text}
                     </span>
                   </div>
-                  
+
                   <div className="text-xs text-gray-600 mb-2">{task.current_step}</div>
-                  
+
                   {task.progress_percentage > 0 && (
                     <div className="w-full bg-gray-200 rounded-full h-1.5">
                       <div
@@ -347,7 +347,7 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
                       />
                     </div>
                   )}
-                  
+
                   {task.error_message && (
                     <div className="mt-2 text-xs text-red-600 bg-red-50 p-2 rounded">
                       {task.error_message}
@@ -367,7 +367,7 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
             <BarChart3 className="w-4 h-4 text-blue-600" />
             <span className="text-sm font-medium text-gray-900">分类统计</span>
           </div>
-          
+
           <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-xs">
             <div className="flex items-center space-x-2">
               <Eye className="w-3 h-3 text-blue-500" />