30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
|
import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
|
||
|
|
|
||
|
|
interface EcommerceProgressBarProps {
|
||
|
|
status: "idle" | "generating" | "done" | "failed" | string;
|
||
|
|
label?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
function mapStatus(status: string): "running" | "completed" | "failed" {
|
||
|
|
if (status === "done") return "completed";
|
||
|
|
if (status === "failed") return "failed";
|
||
|
|
if (status === "generating" || status === "modeling") return "running";
|
||
|
|
return "running";
|
||
|
|
}
|
||
|
|
|
||
|
|
export function EcommerceProgressBar({ status, label }: EcommerceProgressBarProps) {
|
||
|
|
const progress = mapStatus(status) === "running" ? 50 : 100;
|
||
|
|
const smoothed = useSmoothedProgress(progress, mapStatus(status));
|
||
|
|
|
||
|
|
if (status === "idle") return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="ecommerce-progress-bar">
|
||
|
|
<span className="ecommerce-progress-bar__label">{label || "AI 正在生成"}</span>
|
||
|
|
<div className="ecommerce-progress-bar__track">
|
||
|
|
<div className="ecommerce-progress-bar__fill" style={{ width: `${smoothed}%` }} />
|
||
|
|
</div>
|
||
|
|
<span className="ecommerce-progress-bar__value">{smoothed}%</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|