From a66e1c04c94e9d67d308eb33fac1d1727a73e460 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Mon, 19 May 2025 11:39:45 +0800
Subject: [PATCH] feat(ui): allow clear input when field is optional

---
 .../components/access/AccessFormACMECAConfig.tsx   |  4 ++--
 .../access/AccessFormACMEHttpReqConfig.tsx         |  4 ++--
 .../access/AccessFormCloudflareConfig.tsx          |  2 +-
 .../access/AccessFormProxmoxVEConfig.tsx           |  2 +-
 .../components/access/AccessFormUCloudConfig.tsx   |  2 +-
 .../components/access/AccessFormVercelConfig.tsx   |  2 +-
 .../components/access/AccessFormWebhookConfig.tsx  | 14 ++++++++++----
 .../node/DeployNodeConfigFormAWSACMConfig.tsx      |  2 +-
 .../node/DeployNodeConfigFormAliyunALBConfig.tsx   |  2 +-
 .../node/DeployNodeConfigFormAliyunCLBConfig.tsx   |  2 +-
 .../node/DeployNodeConfigFormAliyunGAConfig.tsx    |  2 +-
 .../node/DeployNodeConfigFormAliyunWAFConfig.tsx   |  2 +-
 .../DeployNodeConfigFormBaiduCloudAppBLBConfig.tsx |  2 +-
 .../DeployNodeConfigFormBaiduCloudBLBConfig.tsx    |  2 +-
 .../node/DeployNodeConfigFormBaishanCDNConfig.tsx  |  2 +-
 .../node/DeployNodeConfigFormGcoreCDNConfig.tsx    |  2 +-
 .../node/DeployNodeConfigFormJDCloudALBConfig.tsx  |  2 +-
 .../node/DeployNodeConfigFormLocalConfig.tsx       |  4 ++--
 .../node/DeployNodeConfigFormSSHConfig.tsx         |  4 ++--
 .../DeployNodeConfigFormTencentCloudCLBConfig.tsx  |  2 +-
 .../DeployNodeConfigFormVolcEngineALBConfig.tsx    |  2 +-
 .../DeployNodeConfigFormWangsuCDNProConfig.tsx     |  4 ++--
 22 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/ui/src/components/access/AccessFormACMECAConfig.tsx b/ui/src/components/access/AccessFormACMECAConfig.tsx
index 8c9eb2ac..ac4a32c2 100644
--- a/ui/src/components/access/AccessFormACMECAConfig.tsx
+++ b/ui/src/components/access/AccessFormACMECAConfig.tsx
@@ -59,7 +59,7 @@ const AccessFormACMECAConfig = ({ form: formInst, formName, disabled, initialVal
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmeca_eab_kid.tooltip") }}></span>}
       >
-        <Input autoComplete="new-password" placeholder={t("access.form.acmeca_eab_kid.placeholder")} />
+        <Input allowClear autoComplete="new-password" placeholder={t("access.form.acmeca_eab_kid.placeholder")} />
       </Form.Item>
 
       <Form.Item
@@ -68,7 +68,7 @@ const AccessFormACMECAConfig = ({ form: formInst, formName, disabled, initialVal
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmeca_eab_hmac_key.tooltip") }}></span>}
       >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.acmeca_eab_hmac_key.placeholder")} />
+        <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.acmeca_eab_hmac_key.placeholder")} />
       </Form.Item>
     </Form>
   );
diff --git a/ui/src/components/access/AccessFormACMEHttpReqConfig.tsx b/ui/src/components/access/AccessFormACMEHttpReqConfig.tsx
index 03cf163a..57cbc22d 100644
--- a/ui/src/components/access/AccessFormACMEHttpReqConfig.tsx
+++ b/ui/src/components/access/AccessFormACMEHttpReqConfig.tsx
@@ -84,7 +84,7 @@ const AccessFormACMEHttpReqConfig = ({ form: formInst, formName, disabled, initi
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmehttpreq_username.tooltip") }}></span>}
       >
-        <Input autoComplete="new-password" placeholder={t("access.form.acmehttpreq_username.placeholder")} />
+        <Input allowClear autoComplete="new-password" placeholder={t("access.form.acmehttpreq_username.placeholder")} />
       </Form.Item>
 
       <Form.Item
@@ -93,7 +93,7 @@ const AccessFormACMEHttpReqConfig = ({ form: formInst, formName, disabled, initi
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmehttpreq_password.tooltip") }}></span>}
       >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.acmehttpreq_password.placeholder")} />
+        <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.acmehttpreq_password.placeholder")} />
       </Form.Item>
     </Form>
   );
diff --git a/ui/src/components/access/AccessFormCloudflareConfig.tsx b/ui/src/components/access/AccessFormCloudflareConfig.tsx
index a06d753d..79b33e3a 100644
--- a/ui/src/components/access/AccessFormCloudflareConfig.tsx
+++ b/ui/src/components/access/AccessFormCloudflareConfig.tsx
@@ -66,7 +66,7 @@ const AccessFormCloudflareConfig = ({ form: formInst, formName, disabled, initia
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.cloudflare_zone_api_token.tooltip") }}></span>}
       >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.cloudflare_zone_api_token.placeholder")} />
+        <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.cloudflare_zone_api_token.placeholder")} />
       </Form.Item>
     </Form>
   );
diff --git a/ui/src/components/access/AccessFormProxmoxVEConfig.tsx b/ui/src/components/access/AccessFormProxmoxVEConfig.tsx
index afdc02de..d0a66745 100644
--- a/ui/src/components/access/AccessFormProxmoxVEConfig.tsx
+++ b/ui/src/components/access/AccessFormProxmoxVEConfig.tsx
@@ -65,7 +65,7 @@ const AccessFormProxmoxVEConfig = ({ form: formInst, formName, disabled, initial
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.proxmoxve_api_token_secret.tooltip") }}></span>}
       >
-        <Input.Password autoComplete="new-password" placeholder={t("access.form.proxmoxve_api_token_secret.placeholder")} />
+        <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.proxmoxve_api_token_secret.placeholder")} />
       </Form.Item>
 
       <Form.Item name="allowInsecureConnections" label={t("access.form.proxmoxve_allow_insecure_conns.label")} rules={[formRule]}>
diff --git a/ui/src/components/access/AccessFormUCloudConfig.tsx b/ui/src/components/access/AccessFormUCloudConfig.tsx
index 495d21b9..fd623925 100644
--- a/ui/src/components/access/AccessFormUCloudConfig.tsx
+++ b/ui/src/components/access/AccessFormUCloudConfig.tsx
@@ -81,7 +81,7 @@ const AccessFormUCloudConfig = ({ form: formInst, formName, disabled, initialVal
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ucloud_project_id.tooltip") }}></span>}
       >
-        <Input autoComplete="new-password" placeholder={t("access.form.ucloud_project_id.placeholder")} />
+        <Input allowClear autoComplete="new-password" placeholder={t("access.form.ucloud_project_id.placeholder")} />
       </Form.Item>
     </Form>
   );
diff --git a/ui/src/components/access/AccessFormVercelConfig.tsx b/ui/src/components/access/AccessFormVercelConfig.tsx
index b1ed7b6f..4483a9f9 100644
--- a/ui/src/components/access/AccessFormVercelConfig.tsx
+++ b/ui/src/components/access/AccessFormVercelConfig.tsx
@@ -66,7 +66,7 @@ const AccessFormVercelConfig = ({ form: formInst, formName, disabled, initialVal
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.vercel_team_id.tooltip") }}></span>}
       >
-        <Input placeholder={t("access.form.vercel_team_id.placeholder")} />
+        <Input allowClear placeholder={t("access.form.vercel_team_id.placeholder")} />
       </Form.Item>
     </Form>
   );
diff --git a/ui/src/components/access/AccessFormWebhookConfig.tsx b/ui/src/components/access/AccessFormWebhookConfig.tsx
index 0dea7f7c..6e6ec87a 100644
--- a/ui/src/components/access/AccessFormWebhookConfig.tsx
+++ b/ui/src/components/access/AccessFormWebhookConfig.tsx
@@ -67,7 +67,6 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
         }
         return true;
       }, t("access.form.webhook_headers.errmsg.invalid")),
-    allowInsecureConnections: z.boolean().nullish(),
     defaultDataForDeployment: z
       .string()
       .nullish()
@@ -96,11 +95,12 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
           return false;
         }
       }, t("access.form.webhook_default_data.errmsg.json_invalid")),
+    allowInsecureConnections: z.boolean().nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
 
-  const handleWebhookHeadersBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
-    let value = e.target.value;
+  const handleWebhookHeadersBlur = () => {
+    let value = formInst.getFieldValue("headers");
     value = value.trim();
     value = value.replace(/(?<!\r)\n/g, "\r\n");
     formInst.setFieldValue("headers", value);
@@ -279,7 +279,13 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.webhook_headers.tooltip") }}></span>}
       >
-        <Input.TextArea autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("access.form.webhook_headers.placeholder")} onBlur={handleWebhookHeadersBlur} />
+        <CodeInput
+          height="auto"
+          minHeight="64px"
+          maxHeight="256px"
+          placeholder={t("access.form.webhook_headers.placeholder")}
+          onBlur={handleWebhookHeadersBlur}
+        />
       </Form.Item>
 
       <Show when={!usage || usage === "deployment"}>
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAWSACMConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAWSACMConfig.tsx
index f0964493..f007bf87 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAWSACMConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormAWSACMConfig.tsx
@@ -60,7 +60,7 @@ const DeployNodeConfigFormAWSACMConfig = ({ form: formInst, formName, disabled,
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.aws_acm_certificate_arn.tooltip") }}></span>}
       >
-        <Input placeholder={t("workflow_node.deploy.form.aws_acm_certificate_arn.placeholder")} />
+        <Input allowClear placeholder={t("workflow_node.deploy.form.aws_acm_certificate_arn.placeholder")} />
       </Form.Item>
     </Form>
   );
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunALBConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunALBConfig.tsx
index 3afcb7a1..bbfca5e6 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunALBConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunALBConfig.tsx
@@ -132,7 +132,7 @@ const DeployNodeConfigFormAliyunALBConfig = ({
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.aliyun_alb_snidomain.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.aliyun_alb_snidomain.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.aliyun_alb_snidomain.placeholder")} />
         </Form.Item>
       </Show>
     </Form>
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCLBConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCLBConfig.tsx
index 2c2e43b6..e666800e 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCLBConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCLBConfig.tsx
@@ -132,7 +132,7 @@ const DeployNodeConfigFormAliyunCLBConfig = ({
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.aliyun_clb_snidomain.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.aliyun_clb_snidomain.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.aliyun_clb_snidomain.placeholder")} />
         </Form.Item>
       </Show>
     </Form>
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunGAConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunGAConfig.tsx
index ba2633c4..20dd1ae1 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunGAConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunGAConfig.tsx
@@ -108,7 +108,7 @@ const DeployNodeConfigFormAliyunGAConfig = ({ form: formInst, formName, disabled
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.aliyun_ga_snidomain.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.aliyun_ga_snidomain.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.aliyun_ga_snidomain.placeholder")} />
         </Form.Item>
       </Show>
     </Form>
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunWAFConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunWAFConfig.tsx
index 5f81cf71..a46c7327 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunWAFConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunWAFConfig.tsx
@@ -102,7 +102,7 @@ const DeployNodeConfigFormAliyunWAFConfig = ({
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.aliyun_waf_domain.tooltip") }}></span>}
       >
-        <Input placeholder={t("workflow_node.deploy.form.aliyun_waf_domain.placeholder")} />
+        <Input allowClear placeholder={t("workflow_node.deploy.form.aliyun_waf_domain.placeholder")} />
       </Form.Item>
     </Form>
   );
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudAppBLBConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudAppBLBConfig.tsx
index 7bd40b82..875d254b 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudAppBLBConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudAppBLBConfig.tsx
@@ -135,7 +135,7 @@ const DeployNodeConfigFormBaiduCloudAppBLBConfig = ({
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.baiducloud_appblb_snidomain.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.baiducloud_appblb_snidomain.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.baiducloud_appblb_snidomain.placeholder")} />
         </Form.Item>
       </Show>
     </Form>
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudBLBConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudBLBConfig.tsx
index 20bb22f1..99c0b059 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudBLBConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormBaiduCloudBLBConfig.tsx
@@ -135,7 +135,7 @@ const DeployNodeConfigFormBaiduCloudBLBConfig = ({
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.baiducloud_blb_snidomain.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.baiducloud_blb_snidomain.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.baiducloud_blb_snidomain.placeholder")} />
         </Form.Item>
       </Show>
     </Form>
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormBaishanCDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormBaishanCDNConfig.tsx
index ad05b6a8..7d32bef5 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormBaishanCDNConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormBaishanCDNConfig.tsx
@@ -73,7 +73,7 @@ const DeployNodeConfigFormBaishanCDNConfig = ({
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.baishan_cdn_certificate_id.tooltip") }}></span>}
       >
-        <Input type="number" placeholder={t("workflow_node.deploy.form.baishan_cdn_certificate_id.placeholder")} />
+        <Input allowClear type="number" placeholder={t("workflow_node.deploy.form.baishan_cdn_certificate_id.placeholder")} />
       </Form.Item>
     </Form>
   );
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormGcoreCDNConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormGcoreCDNConfig.tsx
index 4d548949..f21a4bb9 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormGcoreCDNConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormGcoreCDNConfig.tsx
@@ -67,7 +67,7 @@ const DeployNodeConfigFormGcoreCDNConfig = ({ form: formInst, formName, disabled
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.gcore_cdn_certificate_id.tooltip") }}></span>}
       >
-        <Input type="number" placeholder={t("workflow_node.deploy.form.gcore_cdn_certificate_id.placeholder")} />
+        <Input allowClear type="number" placeholder={t("workflow_node.deploy.form.gcore_cdn_certificate_id.placeholder")} />
       </Form.Item>
     </Form>
   );
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormJDCloudALBConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormJDCloudALBConfig.tsx
index f54477ce..22c5bf08 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormJDCloudALBConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormJDCloudALBConfig.tsx
@@ -132,7 +132,7 @@ const DeployNodeConfigFormJDCloudALBConfig = ({
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.jdcloud_alb_snidomain.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.jdcloud_alb_snidomain.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.jdcloud_alb_snidomain.placeholder")} />
         </Form.Item>
       </Show>
     </Form>
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
index 75853eb7..282503e5 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
@@ -351,7 +351,7 @@ const DeployNodeConfigFormLocalConfig = ({ form: formInst, formName, disabled, i
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.local_servercert_path.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.local_servercert_path.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.local_servercert_path.placeholder")} />
         </Form.Item>
 
         <Form.Item
@@ -360,7 +360,7 @@ const DeployNodeConfigFormLocalConfig = ({ form: formInst, formName, disabled, i
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.local_intermediacert_path.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.local_intermediacert_path.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.local_intermediacert_path.placeholder")} />
         </Form.Item>
       </Show>
 
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
index e99a2431..49110ce9 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
@@ -363,7 +363,7 @@ const DeployNodeConfigFormSSHConfig = ({ form: formInst, formName, disabled, ini
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.ssh_servercert_path.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.ssh_servercert_path.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.ssh_servercert_path.placeholder")} />
         </Form.Item>
 
         <Form.Item
@@ -372,7 +372,7 @@ const DeployNodeConfigFormSSHConfig = ({ form: formInst, formName, disabled, ini
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.ssh_intermediacert_path.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.ssh_intermediacert_path.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.ssh_intermediacert_path.placeholder")} />
         </Form.Item>
       </Show>
 
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCLBConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCLBConfig.tsx
index 2e7dc127..760c6fac 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCLBConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudCLBConfig.tsx
@@ -144,7 +144,7 @@ const DeployNodeConfigFormTencentCloudCLBConfig = ({
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.tencentcloud_clb_snidomain.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.tencentcloud_clb_snidomain.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.tencentcloud_clb_snidomain.placeholder")} />
         </Form.Item>
       </Show>
 
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineALBConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineALBConfig.tsx
index 348f4d8d..650323ab 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineALBConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormVolcEngineALBConfig.tsx
@@ -140,7 +140,7 @@ const DeployNodeConfigFormVolcEngineALBConfig = ({
           rules={[formRule]}
           tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.volcengine_alb_snidomain.tooltip") }}></span>}
         >
-          <Input placeholder={t("workflow_node.deploy.form.volcengine_alb_snidomain.placeholder")} />
+          <Input allowClear placeholder={t("workflow_node.deploy.form.volcengine_alb_snidomain.placeholder")} />
         </Form.Item>
       </Show>
     </Form>
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormWangsuCDNProConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormWangsuCDNProConfig.tsx
index 90bdb064..a86b34c0 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormWangsuCDNProConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormWangsuCDNProConfig.tsx
@@ -89,7 +89,7 @@ const DeployNodeConfigFormBaishanCDNConfig = ({
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.wangsu_cdnpro_certificate_id.tooltip") }}></span>}
       >
-        <Input placeholder={t("workflow_node.deploy.form.wangsu_cdnpro_certificate_id.placeholder")} />
+        <Input allowClear placeholder={t("workflow_node.deploy.form.wangsu_cdnpro_certificate_id.placeholder")} />
       </Form.Item>
 
       <Form.Item
@@ -98,7 +98,7 @@ const DeployNodeConfigFormBaishanCDNConfig = ({
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.wangsu_cdnpro_webhook_id.tooltip") }}></span>}
       >
-        <Input placeholder={t("workflow_node.deploy.form.wangsu_cdnpro_webhook_id.placeholder")} />
+        <Input allowClear placeholder={t("workflow_node.deploy.form.wangsu_cdnpro_webhook_id.placeholder")} />
       </Form.Item>
     </Form>
   );