23 lines
808 B
TypeScript
23 lines
808 B
TypeScript
interface TaskStatusBarProps {
|
|
taskId?: string;
|
|
status: string;
|
|
progress: number;
|
|
/** Label shown on the right side when idle (no active task). */
|
|
idleLabel?: string;
|
|
}
|
|
|
|
export default function TaskStatusBar({ taskId, status, progress, idleLabel }: TaskStatusBarProps) {
|
|
const isActive = Boolean(taskId);
|
|
const normalizedProgress = Math.max(0, Math.min(100, Math.trunc(Number(progress) || 0)));
|
|
return (
|
|
<footer className="image-workbench-status">
|
|
{isActive && normalizedProgress > 0 && (
|
|
<div className="image-workbench-progress" style={{ transform: `scaleX(${normalizedProgress / 100})` }} />
|
|
)}
|
|
<span>{isActive ? `#${taskId}` : "就绪"}</span>
|
|
<p>{status}</p>
|
|
<em>{isActive ? `${normalizedProgress}%` : idleLabel || ""}</em>
|
|
</footer>
|
|
);
|
|
}
|