github
/
certimate
mirror of https://github.com/usual2970/certimate
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(DeployProgress): 重构逻辑，修复样式问题

main
elvis liao 2024-09-27 13:42:58 +08:00
parent 5eba437732
commit fcc0dd93fd
1 changed files with 55 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
ui/src/components/certimate/DeployProgress.tsx
View File

@ -1,5 +1,8 @@
import { useTranslation } from "react-i18next";
import { cn } from "@/lib/utils"
import { Separator } from "../ui/separator";
type DeployProgressProps = {
@ -10,116 +13,61 @@ type DeployProgressProps = {
const DeployProgress = ({ phase, phaseSuccess }: DeployProgressProps) => {
const { t } = useTranslation();
let rs = <> </>;
let step = 0;
if (phase === "check") {
if (phaseSuccess) {
rs = (
<div className="flex items-center">
<div className="text-xs text-nowrap text-green-600">
{t('deploy.progress.check')}
</div>
<Separator className="h-1 grow" />
<div className="text-xs text-nowrap text-muted-foreground">
{t('deploy.progress.apply')}
</div>
<Separator className="h-1 grow" />
<div className="text-xs text-nowrap text-muted-foreground">
{t('deploy.progress.deploy')}
</div>
</div>
);
} else {
rs = (
<div className="flex items-center">
<div className="text-xs text-nowrap text-red-600">
{t('deploy.progress.check')}
</div>
<Separator className="h-1 grow" />
<div className="text-xs text-nowrap text-muted-foreground">
{t('deploy.progress.apply')}
</div>
<Separator className="h-1 grow" />
<div className="text-xs text-nowrap text-muted-foreground">
{t('deploy.progress.deploy')}
</div>
</div>
);
}
step = 1
} else if (phase === "apply") {
step = 2
} else if (phase === "deploy") {
step = 3
}
if (phase === "apply") {
if (phaseSuccess) {
rs = (
<div className="flex items-center">
<div className="text-xs text-nowrap text-green-600">
{t('deploy.progress.check')}
</div>
<Separator className="h-1 grow bg-green-600" />
<div className="text-xs text-nowrap text-green-600">
{t('deploy.progress.apply')}
</div>
<Separator className="h-1 grow" />
<div className="text-xs text-nowrap text-muted-foreground">
{t('deploy.progress.deploy')}
</div>
</div>
);
} else {
rs = (
<div className="flex items-center">
<div className="text-xs text-nowrap text-green-600">
{t('deploy.progress.check')}
</div>
<Separator className="h-1 grow bg-green-600" />
<div className="text-xs text-nowrap text-red-600">
{t('deploy.progress.apply')}
</div>
<Separator className="h-1 grow" />
<div className="text-xs text-nowrap text-muted-foreground">
{t('deploy.progress.deploy')}
</div>
</div>
);
}
}
if (phase === "deploy") {
if (phaseSuccess) {
rs = (
<div className="flex items-center">
<div className="text-xs text-nowrap text-green-600">
{t('deploy.progress.check')}
</div>
<Separator className="h-1 grow bg-green-600" />
<div className="text-xs text-nowrap text-green-600">
{t('deploy.progress.apply')}
</div>
<Separator className="h-1 grow bg-green-600" />
<div className="text-xs text-nowrap text-green-600">
{t('deploy.progress.deploy')}
</div>
</div>
);
} else {
rs = (
<div className="flex items-center">
<div className="text-xs text-nowrap text-green-600">
{t('deploy.progress.check')}
</div>
<Separator className="h-1 grow bg-green-600" />
<div className="text-xs text-nowrap text-green-600">
{t('deploy.progress.apply')}
</div>
<Separator className="h-1 grow bg-green-600" />
<div className="text-xs text-nowrap text-red-600">
{t('deploy.progress.deploy')}
</div>
</div>
);
}
}
return rs;
return (
<div className="flex items-center">
<div className={
cn(
"text-xs text-nowrap",
step === 1 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
step > 1 ? "text-green-600" : "",
)
}>
{t('deploy.progress.check')}
</div>
<Separator className={
cn(
"h-1 grow max-w-[60px]",
step > 1 ? "bg-green-600" : "",
)
} />
<div className={
cn(
"text-xs text-nowrap",
step < 2 ? "text-muted-foreground" : "",
step === 2 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
step > 2 ? "text-green-600" : "",
)
}>
{t('deploy.progress.apply')}
</div>
<Separator className={
cn(
"h-1 grow max-w-[60px]",
step > 2 ? "bg-green-600" : "",
)
} />
<div className={
cn(
"text-xs text-nowrap",
step < 3 ? "text-muted-foreground" : "",
step === 3 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
step > 3 ? "text-green-600" : "",
)
}>
{t('deploy.progress.deploy')}
</div>
</div>
)
};
export default DeployProgress;