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

36
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 {
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" />