bowong
/
mixvideo-v2
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复进度条问题

This commit is contained in:
imeepos 2025-07-14 16:36:11 +08:00
parent 29e77c2b6f
commit 293c1e29c7
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/desktop/src/components/VideoClassificationProgress.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useCallback } from 'react'; import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { import {
Brain, Clock, CheckCircle, XCircle, AlertCircle, Pause, Play, Square, Brain, Clock, CheckCircle, XCircle, AlertCircle, Pause, Play, Square,
TrendingUp, BarChart3, Eye, Star, Target 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; 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 const relevantTasks = materialId
@ -173,7 +173,9 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
} }
const statusInfo = typedQueueStats ? getStatusInfo(typedQueueStats.status) : null; const statusInfo = typedQueueStats ? getStatusInfo(typedQueueStats.status) : null;
const overallProgress = getOverallProgress(); const overallProgress = useMemo(() => {
return getOverallProgress()
}, [getOverallProgress]);
return ( return (
<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"> <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
@ -219,15 +221,14 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
<button <button
onClick={handlePauseResume} onClick={handlePauseResume}
disabled={isLoading || (typedQueueStats.status !== 'Running' && typedQueueStats.status !== 'Paused')} disabled={isLoading || (typedQueueStats.status !== 'Running' && typedQueueStats.status !== 'Paused')}
className={`p-2 rounded-md transition-colors ${ className={`p-2 rounded-md transition-colors ${isLoading || (typedQueueStats.status !== 'Running' && typedQueueStats.status !== 'Paused')
isLoading || (typedQueueStats.status !== 'Running' && typedQueueStats.status !== 'Paused')
? 'text-gray-400 cursor-not-allowed' ? 'text-gray-400 cursor-not-allowed'
: 'text-gray-600 hover:text-gray-900 hover:bg-gray-100' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
}`} }`}
title={ title={
typedQueueStats.status === 'Running' ? '暂停队列' : typedQueueStats.status === 'Running' ? '暂停队列' :
typedQueueStats.status === 'Paused' ? '恢复队列' : typedQueueStats.status === 'Paused' ? '恢复队列' :
'队列未运行' '队列未运行'
} }
> >
{typedQueueStats.status === 'Running' ? ( {typedQueueStats.status === 'Running' ? (
@ -241,11 +242,10 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
<button <button
onClick={handleStop} onClick={handleStop}
disabled={isLoading || typedQueueStats.status === 'Stopped'} disabled={isLoading || typedQueueStats.status === 'Stopped'}
className={`p-2 rounded-md transition-colors ${ className={`p-2 rounded-md transition-colors ${isLoading || typedQueueStats.status === 'Stopped'
isLoading || typedQueueStats.status === 'Stopped'
? 'text-gray-400 cursor-not-allowed' ? 'text-gray-400 cursor-not-allowed'
: 'text-gray-600 hover:text-red-600 hover:bg-red-50' : 'text-gray-600 hover:text-red-600 hover:bg-red-50'
}`} }`}
title={typedQueueStats.status === 'Stopped' ? '队列已停止' : '停止队列'} title={typedQueueStats.status === 'Stopped' ? '队列已停止' : '停止队列'}
> >
<Square className="w-4 h-4" /> <Square className="w-4 h-4" />