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

162
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) { <div className="flex items-center">
rs = ( <div className={
<div className="flex items-center"> cn(
<div className="text-xs text-nowrap text-green-600"> "text-xs text-nowrap",
{t('deploy.progress.check')} step === 1 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
</div> step > 1 ? "text-green-600" : "",
<Separator className="h-1 grow bg-green-600" /> )
<div className="text-xs text-nowrap text-green-600"> }>
{t('deploy.progress.apply')} {t('deploy.progress.check')}
</div> </div>
<Separator className="h-1 grow" /> <Separator className={
<div className="text-xs text-nowrap text-muted-foreground"> cn(
{t('deploy.progress.deploy')} "h-1 grow max-w-[60px]",
</div> step > 1 ? "bg-green-600" : "",
</div> )
); } />
} else { <div className={
rs = ( cn(
<div className="flex items-center"> "text-xs text-nowrap",
<div className="text-xs text-nowrap text-green-600"> step < 2 ? "text-muted-foreground" : "",
{t('deploy.progress.check')} step === 2 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
</div> step > 2 ? "text-green-600" : "",
<Separator className="h-1 grow bg-green-600" /> )
<div className="text-xs text-nowrap text-red-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(
{t('deploy.progress.deploy')} "h-1 grow max-w-[60px]",
</div> step > 2 ? "bg-green-600" : "",
</div> )
); } />
} <div className={
} cn(
"text-xs text-nowrap",
if (phase === "deploy") { step < 3 ? "text-muted-foreground" : "",
if (phaseSuccess) { step === 3 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
rs = ( step > 3 ? "text-green-600" : "",
<div className="flex items-center"> )
<div className="text-xs text-nowrap text-green-600"> }>
{t('deploy.progress.check')} {t('deploy.progress.deploy')}
</div> </div>
<Separator className="h-1 grow bg-green-600" /> </div>
<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;