jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
elvis liao
2024-09-27 13:42:58 +08:00
parent 5eba437732
commit fcc0dd93fd
1 changed files with 55 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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