add tencent-cos ui

表单主要从OSS表单修改

ui/src/components/certimate/DeployEditDialog.tsx

@@ -12,6 +12,7 @@ import { Context as DeployEditContext } from "./DeployEdit";
 import DeployToAliyunOSS from "./DeployToAliyunOSS";
 import DeployToAliyunCDN from "./DeployToAliyunCDN";
 import DeployToTencentCDN from "./DeployToTencentCDN";
+import DeployToTencentCOS from "./DeployToTencentCOS";
 import DeployToHuaweiCloudCDN from "./DeployToHuaweiCloudCDN";
 import DeployToQiniuCDN from "./DeployToQiniuCDN";
 import DeployToSSH from "./DeployToSSH";
@@ -118,6 +119,8 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
     case "tencent-cdn":
       childComponent = <DeployToTencentCDN />;
       break;
+    case "tencent-cos":
+      childComponent = <DeployToTencentCOS />;
     case "huaweicloud-cdn":
       childComponent = <DeployToHuaweiCloudCDN />;
       break;

ui/src/components/certimate/DeployToTencentCOS.tsx

@@ -0,0 +1,164 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+import { produce } from "immer";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useDeployEditContext } from "./DeployEdit";
+
+const DeployToTencentCOS = () => {
+  const { deploy: data, setDeploy, error, setError } = useDeployEditContext();
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    setError({});
+  }, []);
+
+  useEffect(() => {
+    const resp = domainSchema.safeParse(data.config?.domain);
+    if (!resp.success) {
+      setError({
+        ...error,
+        domain: JSON.parse(resp.error.message)[0].message,
+      });
+    } else {
+      setError({
+        ...error,
+        domain: "",
+      });
+    }
+  }, [data]);
+
+  useEffect(() => {
+    const bucketResp = bucketSchema.safeParse(data.config?.domain);
+    if (!bucketResp.success) {
+      setError({
+        ...error,
+        bucket: JSON.parse(bucketResp.error.message)[0].message,
+      });
+    } else {
+      setError({
+        ...error,
+        bucket: "",
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!data.id) {
+      setDeploy({
+        ...data,
+        config: {
+          region: "",
+          bucket: "",
+          domain: "",
+        },
+      });
+    }
+  }, []);
+
+  const domainSchema = z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
+    message: t("common.errmsg.domain_invalid"),
+  });
+
+  const bucketSchema = z.string().min(1, {
+    message: t("domain.deployment.form.cos_region.placeholder"),
+  });
+
+  return (
+    <div className="flex flex-col space-y-8">
+      <div>
+        <Label>{t("domain.deployment.form.cos_region.label")}</Label>
+        <Input
+          placeholder={t("domain.deployment.form.cos_region.placeholder")}
+          className="w-full mt-1"
+          value={data?.config?.region}
+          onChange={(e) => {
+            const temp = e.target.value;
+
+            const newData = produce(data, (draft) => {
+              if (!draft.config) {
+                draft.config = {};
+              }
+              draft.config.region = temp;
+            });
+            setDeploy(newData);
+          }}
+        />
+        <div className="text-red-600 text-sm mt-1">{error?.endpoint}</div>
+      </div>
+
+      <div>
+        <Label>{t("domain.deployment.form.cos_bucket.label")}</Label>
+        <Input
+          placeholder={t("domain.deployment.form.cos_bucket.placeholder")}
+          className="w-full mt-1"
+          value={data?.config?.bucket}
+          onChange={(e) => {
+            const temp = e.target.value;
+
+            const resp = bucketSchema.safeParse(temp);
+            if (!resp.success) {
+              setError({
+                ...error,
+                bucket: JSON.parse(resp.error.message)[0].message,
+              });
+            } else {
+              setError({
+                ...error,
+                bucket: "",
+              });
+            }
+
+            const newData = produce(data, (draft) => {
+              if (!draft.config) {
+                draft.config = {};
+              }
+              draft.config.bucket = temp;
+            });
+            setDeploy(newData);
+          }}
+        />
+        <div className="text-red-600 text-sm mt-1">{error?.bucket}</div>
+      </div>
+
+      <div>
+        <Label>{t("domain.deployment.form.domain.label")}</Label>
+        <Input
+          placeholder={t("domain.deployment.form.domain.label")}
+          className="w-full mt-1"
+          value={data?.config?.domain}
+          onChange={(e) => {
+            const temp = e.target.value;
+
+            const resp = domainSchema.safeParse(temp);
+            if (!resp.success) {
+              setError({
+                ...error,
+                domain: JSON.parse(resp.error.message)[0].message,
+              });
+            } else {
+              setError({
+                ...error,
+                domain: "",
+              });
+            }
+
+            const newData = produce(data, (draft) => {
+              if (!draft.config) {
+                draft.config = {};
+              }
+              draft.config.domain = temp;
+            });
+            setDeploy(newData);
+          }}
+        />
+        <div className="text-red-600 text-sm mt-1">{error?.domain}</div>
+      </div>
+    </div>
+  );
+};
+
+export default DeployToTencentCOS;

ui/src/domain/domain.ts

@@ -75,6 +75,7 @@ export const deployTargetsMap: Map<DeployTarget["type"], DeployTarget> = new Map
     ["aliyun-cdn", "common.provider.aliyun.cdn", "/imgs/providers/aliyun.svg"],
     ["aliyun-dcdn", "common.provider.aliyun.dcdn", "/imgs/providers/aliyun.svg"],
     ["tencent-cdn", "common.provider.tencent.cdn", "/imgs/providers/tencent.svg"],
+    ["tencent-cos", "common.provider.tencent.cos", "/imgs/providers/tencent.svg"],
     ["huaweicloud-cdn", "common.provider.huaweicloud.cdn", "/imgs/providers/huaweicloud.svg"],
     ["qiniu-cdn", "common.provider.qiniu.cdn", "/imgs/providers/qiniu.svg"],
     ["local", "common.provider.local", "/imgs/providers/local.svg"],

ui/src/i18n/locales/en/nls.domain.json

@@ -54,6 +54,10 @@
   "domain.deployment.form.access.label": "Access Configuration",
   "domain.deployment.form.access.placeholder": "Please select provider authorization configuration",
   "domain.deployment.form.access.list": "Provider Authorization Configurations",
+  "domain.deployment.form.cos_region.label": "Region",
+  "domain.deployment.form.cos_region.placeholder": "Please enter region, e.g. ap-guangzhou",
+  "domain.deployment.form.cos_bucket.label": "Bucket",
+  "domain.deployment.form.cos_bucket.placeholder": "Please enter bucket, e.g. example-1250000000",
   "domain.deployment.form.domain.label": "Deploy to domain (Single domain only, not wildcard domain)",
   "domain.deployment.form.domain.placeholder": "Please enter domain to be deployed",
   "domain.deployment.form.ssh_key_path.label": "Private Key Save Path",

ui/src/i18n/locales/zh/nls.domain.json

@@ -54,6 +54,10 @@
   "domain.deployment.form.access.label": "授权配置",
   "domain.deployment.form.access.placeholder": "请选择授权配置",
   "domain.deployment.form.access.list": "服务商授权配置列表",
+  "domain.deployment.form.cos_region.label": "region",
+  "domain.deployment.form.cos_region.placeholder": "请输入 region, 如 ap-guangzhou",
+  "domain.deployment.form.cos_bucket.label": "存储桶",
+  "domain.deployment.form.cos_bucket.placeholder": "请输入存储桶名, 如 example-1250000000",
   "domain.deployment.form.domain.label": "部署到域名（仅支持单个域名；不支持泛域名）",
   "domain.deployment.form.domain.placeholder": "请输入部署到的域名",
   "domain.deployment.form.ssh_key_path.label": "私钥保存路径",