Initial ecommerce standalone package

src/components/TaskStatusBar.tsx

@@ -0,0 +1,22 @@
+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>
+  );
+}