xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

时间线视图进度条显示进度百分比

Browse Source
This commit is contained in:
qikongjian 2025-08-23 23:52:08 +08:00
parent 763dc9d3ab
commit 93a205135c
1 changed files with 90 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
components/dashboard/network-timeline.tsx
View File

@ -945,14 +945,99 @@ ${task.status === 'IN_PROGRESS' ? `进度: ${task.progress}%` : ''}`}
title="等待开始"
/>
)}
{/* 智能百分比文字显示 - 只在主任务且有足够空间时显示 */}
{(() => {
const barWidth = (task.executionTime / maxTime) * 100;
const showPercentage = task.level === 0 && barWidth > 6; // 主任务且宽度足够
if (!showPercentage) return null;
const getPercentageText = () => {
switch (task.status) {
case 'IN_PROGRESS':
return `${task.progress}%`;
case 'COMPLETED':
return '100%';
case 'FAILED':
return `${task.progress}%`;
case 'PENDING':
return '0%';
default:
return '';
}
};
const percentageText = getPercentageText();
if (!percentageText) return null;
// 根据进度条宽度和进度值决定文字位置
const progressWidth = task.status === 'IN_PROGRESS' ? task.progress :
task.status === 'COMPLETED' ? 100 :
task.status === 'FAILED' ? Math.max(task.progress, 15) : 8;
const shouldCenterInProgress = task.status === 'IN_PROGRESS' && progressWidth > 30;
const shouldCenterInBar = (task.status === 'COMPLETED') ||
(task.status === 'FAILED' && progressWidth > 25);
return (
<div
className={cn(
"absolute top-0 flex items-center pointer-events-none h-full",
shouldCenterInProgress || shouldCenterInBar ? "justify-center inset-0" : "justify-end right-1"
)}
>
<span
className={cn(
"font-semibold transition-all duration-300 select-none",
// 智能颜色选择
task.status === 'COMPLETED' ? "text-white" :
task.status === 'IN_PROGRESS' && shouldCenterInProgress ? "text-white" :
task.status === 'IN_PROGRESS' && !shouldCenterInProgress ? "text-cyan-200" :
task.status === 'FAILED' && shouldCenterInBar ? "text-white" :
task.status === 'FAILED' && !shouldCenterInBar ? "text-rose-200" :
"text-amber-200"
)}
style={{
textShadow: '0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.5)',
fontSize: barWidth > 12 ? '11px' : '10px',
fontWeight: '600'
}}
>
{percentageText}
</span>
</div>
);
})()}
</div>
{/* 子任务进度指示器 */}
{/* 子任务进度指示器和百分比 */}
{task.level === 1 && task.status === 'IN_PROGRESS' && (
<div
className="absolute top-0 left-0 h-full bg-white/30 rounded-sm"
style={{ width: `${task.progress}%` }}
/>
<>
<div
className="absolute top-0 left-0 h-full bg-white/30 rounded-sm"
style={{ width: `${task.progress}%` }}
/>
{/* 子任务百分比 - 只在有足够空间时显示 */}
{(() => {
const barWidth = (task.executionTime / maxTime) * 100;
if (barWidth < 4) return null; // 子任务条太窄不显示
return (
<div className="absolute inset-0 flex items-center justify-end pr-1 pointer-events-none">
<span
className="text-white font-medium"
style={{
textShadow: '0 1px 2px rgba(0,0,0,0.8)',
fontSize: '9px'
}}
>
{task.progress}%
</span>
</div>
);
})()}
</>
)}
</div>
</div>