perf: 优化证书进度条颜色

packages/plugins/plugin-cert/src/plugin/cert-plugin/index.ts

@@ -65,7 +65,7 @@ export class CertApplyPlugin extends CertApplyBasePlugin {
         { value: "dns", label: "DNS直接验证" },
         { value: "cname", label: "CNAME代理验证" },
         { value: "http", label: "HTTP文件验证" },
-        { value: "cname", label: "多DNS提供商" },
+        { value: "dnses", label: "多DNS提供商" },
       ],
     },
     required: true,
@@ -162,13 +162,15 @@ export class CertApplyPlugin extends CertApplyBasePlugin {
         })
       },
       show: ctx.compute(({form})=>{
-          return form.challengeType === 'cname' ||  form.challengeType === 'http'
+          return form.challengeType === 'cname' ||  form.challengeType === 'http' ||  form.challengeType === 'dnses'
       }),
       helper: ctx.compute(({form})=>{
           if(form.challengeType === 'cname' ){
               return '请按照上面的提示，给要申请证书的域名添加CNAME记录，添加后，点击验证，验证成功后不要删除记录，申请和续期证书会一直用它'
           }else if (form.challengeType === 'http'){
               return '请按照上面的提示，给每个域名设置文件上传配置，证书申请过程中会上传校验文件到网站根目录下'
+          }else if (form.challengeType === 'http'){
+              return '给每个域名单独配置dns提供商'
           }
       })
     }
@@ -405,7 +407,7 @@ export class CertApplyPlugin extends CertApplyBasePlugin {
 
     let dnsProvider: IDnsProvider = null;
     let domainsVerifyPlan: DomainsVerifyPlan = null;
-    if (this.challengeType === "cname" || this.challengeType === "http") {
+    if (this.challengeType === "cname" || this.challengeType === "http" || this.challengeType === "dnses") {
       domainsVerifyPlan = await this.createDomainsVerifyPlan();
     } else {
       const dnsProviderType = this.dnsProviderType;

packages/ui/certd-client/src/components/plugins/cert/domains-verify-plan-editor/index.vue

@@ -167,10 +167,14 @@ async function onDomainsChanged(domains: string[]) {
     let planItem = planRef.value[domain];
     const domainGroupItem = domainGroups[domain];
     if (!planItem) {
+      let type = props.defaultType || "cname";
+      if (type === "dnses") {
+        type = "dns";
+      }
       planItem = {
         domain,
         //@ts-ignore
-        type: props.defaultType || "cname",
+        type: type,
         //@ts-ignore
         cnameVerifyPlan: {},
         //@ts-ignore

packages/ui/certd-client/src/views/certd/monitor/cert/crud.tsx

@@ -228,7 +228,11 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
               const leftDays = dayjs(value).diff(dayjs(), "day");
               const color = leftDays < 20 ? "red" : "#389e0d";
               const percent = (leftDays / 90) * 100;
-              return <a-progress title={expireDate + t("certd.expires")} percent={percent} strokeColor={color} format={(percent: number) => `${leftDays}${t("certd.days")}`} />;
+              const textColor = leftDays < 20 ? "red" : leftDays > 60 ? "#389e0d" : "";
+              const format = () => {
+                return <span style={{ color: textColor }}>{`${leftDays}${t("certd.days")}`}</span>;
+              };
+              return <a-progress title={expireDate + t("certd.expires")} percent={percent} strokeColor={color} format={format} />;
             },
           },
         },

packages/ui/certd-client/src/views/certd/pipeline/crud.tsx

@@ -363,13 +363,19 @@ export default function ({ crudExpose, context: { groupDictRef, selectedRowKeys
           },
           column: {
             cellRender({ row }) {
-              if (!row.lastVars?.certExpiresTime) {
+              const value = row.lastVars?.certExpiresTime;
+              if (!value) {
                 return "-";
               }
-              const leftDays = dayjs(row.lastVars.certExpiresTime).diff(dayjs(), "day");
+              const expireDate = dayjs(value).format("YYYY-MM-DD");
+              const leftDays = dayjs(value).diff(dayjs(), "day");
               const color = leftDays < 20 ? "red" : "#389e0d";
               const percent = (leftDays / 90) * 100;
-              return <a-progress percent={percent} strokeColor={color} format={percent => `${leftDays} 天`} />;
+              const textColor = leftDays < 20 ? "red" : leftDays > 60 ? "#389e0d" : "";
+              const format = () => {
+                return <span style={{ color: textColor }}>{`${leftDays}${t("certd.days")}`}</span>;
+              };
+              return <a-progress title={expireDate + t("certd.expires")} percent={percent} strokeColor={color} format={format} />;
             },
             width: 150,
           },