39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
// 定义props的类型
|
||
|
|
interface ProgressDisplayProps {
|
||
|
|
generatedPaperNumber: number;
|
||
|
|
i: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 使用接口为函数组件的props提供类型注解
|
||
|
|
const ProgressDisplay: React.FC<ProgressDisplayProps> = ({
|
||
|
|
generatedPaperNumber,
|
||
|
|
i,
|
||
|
|
}) => {
|
||
|
|
// 计算完成的百分比
|
||
|
|
const percentage = ((i / generatedPaperNumber) * 100).toFixed(2);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative">
|
||
|
|
{/* 可以添加一个进度条来直观显示进度 */}
|
||
|
|
<div className="h-4 bg-gray-200 rounded-full">
|
||
|
|
<div
|
||
|
|
className={`h-full rounded-full ${
|
||
|
|
Number(percentage) < 100 ? "bg-yellow-500" : "bg-green-500"
|
||
|
|
}`}
|
||
|
|
style={{ width: `${percentage}%` }}
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
{/* 文字放置在进度条内部 */}
|
||
|
|
<div className="absolute inset-0 flex items-center justify-center text-xs text-white pointer-events-none">
|
||
|
|
<p>
|
||
|
|
{i} / {generatedPaperNumber}task {percentage}% Complete
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ProgressDisplay;
|