From 136ecb17f3afe61e862f767cd782d4b2fea0f4f0 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Tue, 12 Aug 2025 17:51:31 +0800
Subject: [PATCH] refactor(ui): clean code

---
 .../access/AccessFormEmailConfig.tsx          |   1 -
 .../access/AccessFormWebhookConfig.tsx        |  66 ++++----
 .../certificate/CertificateDetail.tsx         |  10 +-
 .../designer/forms/BizApplyNodeConfigForm.tsx | 141 ++++++++----------
 .../forms/BizDeployNodeConfigForm.tsx         |  62 ++++----
 .../BizDeployNodeConfigFormProviderLocal.tsx  | 116 +++++++-------
 .../BizDeployNodeConfigFormProviderSSH.tsx    | 136 ++++++++---------
 ...BizDeployNodeConfigFormProviderWebhook.tsx |   4 +-
 .../forms/BizNotifyNodeConfigForm.tsx         |  49 +++---
 ...BizNotifyNodeConfigFormProviderWebhook.tsx |   4 +-
 10 files changed, 253 insertions(+), 336 deletions(-)

diff --git a/ui/src/components/access/AccessFormEmailConfig.tsx b/ui/src/components/access/AccessFormEmailConfig.tsx
index 629748dc..95148f79 100644
--- a/ui/src/components/access/AccessFormEmailConfig.tsx
+++ b/ui/src/components/access/AccessFormEmailConfig.tsx
@@ -1,5 +1,4 @@
 import { useTranslation } from "react-i18next";
-import { QuestionCircleOutlined as IconQuestionCircleOutlined } from "@ant-design/icons";
 import { Form, type FormInstance, Input, InputNumber, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
diff --git a/ui/src/components/access/AccessFormWebhookConfig.tsx b/ui/src/components/access/AccessFormWebhookConfig.tsx
index d3d5dc4d..7661d95b 100644
--- a/ui/src/components/access/AccessFormWebhookConfig.tsx
+++ b/ui/src/components/access/AccessFormWebhookConfig.tsx
@@ -305,20 +305,13 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
       </Form.Item>
 
       <Show when={!usage || usage === "deployment"}>
-        <Form.Item noStyle>
-          <label className="mb-1 block">
-            <div className="flex w-full items-center justify-between gap-4">
-              <div className="max-w-full grow truncate">
-                <span>{t("access.form.webhook_data.label")}</span>
-              </div>
-              <div className="text-right">
-                <Button size="small" type="link" onClick={handlePresetDataForDeploymentClick}>
-                  {t("access.form.webhook_preset_data.button")}
-                </Button>
-              </div>
-            </div>
-          </label>
-          <Form.Item name="dataForDeployment" extra={t("access.form.webhook_data.help")} rules={[formRule]}>
+        <Form.Item className="relative" label={t("access.form.webhook_data.label")} extra={t("access.form.webhook_data.help")}>
+          <div className="absolute -top-[6px] right-0 -translate-y-full">
+            <Button size="small" type="link" onClick={handlePresetDataForDeploymentClick}>
+              {t("access.form.webhook_preset_data.button")}
+            </Button>
+          </div>
+          <Form.Item name="dataForDeployment" noStyle rules={[formRule]}>
             <CodeInput
               height="auto"
               minHeight="64px"
@@ -336,32 +329,25 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
       </Show>
 
       <Show when={!usage || usage === "notification"}>
-        <Form.Item noStyle>
-          <label className="mb-1 block">
-            <div className="flex w-full items-center justify-between gap-4">
-              <div className="max-w-full grow truncate">
-                <span>{t("access.form.webhook_data.label")}</span>
-              </div>
-              <div className="text-right">
-                <Dropdown
-                  menu={{
-                    items: ["bark", "ntfy", "gotify", "pushover", "pushplus", "serverchan3", "serverchanturbo", "common"].map((key) => ({
-                      key,
-                      label: <span dangerouslySetInnerHTML={{ __html: t(`access.form.webhook_preset_data.option.${key}.label`) }}></span>,
-                      onClick: () => handlePresetDataForNotificationClick(key),
-                    })),
-                  }}
-                  trigger={["click"]}
-                >
-                  <Button size="small" type="link">
-                    {t("access.form.webhook_preset_data.button")}
-                    <IconChevronDown size="1.25em" />
-                  </Button>
-                </Dropdown>
-              </div>
-            </div>
-          </label>
-          <Form.Item name="dataForNotification" extra={t("access.form.webhook_data.help")} rules={[formRule]}>
+        <Form.Item className="relative" label={t("access.form.webhook_data.label")} extra={t("access.form.webhook_data.help")}>
+          <div className="absolute -top-[6px] right-0 -translate-y-full">
+            <Dropdown
+              menu={{
+                items: ["bark", "ntfy", "gotify", "pushover", "pushplus", "serverchan3", "serverchanturbo", "common"].map((key) => ({
+                  key,
+                  label: <span dangerouslySetInnerHTML={{ __html: t(`access.form.webhook_preset_data.option.${key}.label`) }}></span>,
+                  onClick: () => handlePresetDataForNotificationClick(key),
+                })),
+              }}
+              trigger={["click"]}
+            >
+              <Button size="small" type="link">
+                {t("access.form.webhook_preset_data.button")}
+                <IconChevronDown size="1.25em" />
+              </Button>
+            </Dropdown>
+          </div>
+          <Form.Item name="dataForNotification" noStyle rules={[formRule]}>
             <CodeInput
               height="auto"
               minHeight="64px"
diff --git a/ui/src/components/certificate/CertificateDetail.tsx b/ui/src/components/certificate/CertificateDetail.tsx
index 0d2ef75c..6bfab9ca 100644
--- a/ui/src/components/certificate/CertificateDetail.tsx
+++ b/ui/src/components/certificate/CertificateDetail.tsx
@@ -59,9 +59,8 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => {
           <Input value={data.keyAlgorithm} variant="filled" placeholder="" />
         </Form.Item>
 
-        <Form.Item>
-          <div className="mb-2 flex w-full items-center justify-between">
-            <label>{t("certificate.props.certificate")}</label>
+        <Form.Item label={t("certificate.props.certificate")}>
+          <div className="absolute -top-[6px] right-0 -translate-y-full">
             <Tooltip title={t("common.button.copy")}>
               <CopyToClipboard
                 text={data.certificate}
@@ -76,9 +75,8 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => {
           <Input.TextArea value={data.certificate} variant="filled" autoSize={{ minRows: 5, maxRows: 5 }} readOnly />
         </Form.Item>
 
-        <Form.Item>
-          <div className="mb-2 flex w-full items-center justify-between">
-            <label>{t("certificate.props.private_key")}</label>
+        <Form.Item label={t("certificate.props.private_key")}>
+          <div className="absolute -top-[6px] right-0 -translate-y-full">
             <Tooltip title={t("common.button.copy")}>
               <CopyToClipboard
                 text={data.privateKey}
diff --git a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx
index 9dd2cf9a..57a22030 100644
--- a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx
@@ -1,11 +1,10 @@
 import { memo, useEffect, useMemo, useState } from "react";
 import { getI18n, useTranslation } from "react-i18next";
 import { Link } from "react-router";
-import { QuestionCircleOutlined as IconQuestionCircleOutlined } from "@ant-design/icons";
 import { type FlowNodeEntity, getNodeForm } from "@flowgram.ai/fixed-layout-editor";
 import { IconChevronRight, IconCircleMinus, IconPlus } from "@tabler/icons-react";
 import { useControllableValue } from "ahooks";
-import { type AnchorProps, AutoComplete, Button, Divider, Flex, Form, type FormInstance, Input, InputNumber, Select, Switch, Tooltip, Typography } from "antd";
+import { type AnchorProps, AutoComplete, Button, Divider, Flex, Form, type FormInstance, Input, InputNumber, Select, Switch, Typography } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
@@ -195,39 +194,31 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)
             />
           </Form.Item>
 
-          <Form.Item noStyle>
-            <label className="mb-1 block">
-              <div className="flex w-full items-center justify-between gap-4">
-                <div className="max-w-full grow truncate">
-                  <span>{t("workflow_node.apply.form.provider_access.label")}</span>
-                  <Tooltip title={t("workflow_node.apply.form.provider_access.tooltip")}>
-                    <Typography.Text className="ms-1" type="secondary">
-                      <IconQuestionCircleOutlined />
-                    </Typography.Text>
-                  </Tooltip>
-                </div>
-                <div className="text-right">
-                  <AccessEditDrawer
-                    mode="create"
-                    trigger={
-                      <Button size="small" type="link">
-                        {t("workflow_node.apply.form.provider_access.button")}
-                        <IconPlus size="1.25em" />
-                      </Button>
-                    }
-                    usage="dns"
-                    afterSubmit={(record) => {
-                      const provider = accessProvidersMap.get(record.provider);
-                      if (provider?.usages?.includes(ACCESS_USAGES.DNS)) {
-                        formInst.setFieldValue("providerAccessId", record.id);
-                        handleProviderAccessSelect(record.id);
-                      }
-                    }}
-                  />
-                </div>
-              </div>
-            </label>
-            <Form.Item name="providerAccessId" rules={[formRule]}>
+          <Form.Item
+            className="relative"
+            label={t("workflow_node.apply.form.provider_access.label")}
+            tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.apply.form.provider_access.tooltip") }}></span>}
+          >
+            <div className="absolute -top-[6px] right-0 -translate-y-full">
+              <AccessEditDrawer
+                mode="create"
+                trigger={
+                  <Button size="small" type="link">
+                    {t("workflow_node.apply.form.provider_access.button")}
+                    <IconPlus size="1.25em" />
+                  </Button>
+                }
+                usage="dns"
+                afterSubmit={(record) => {
+                  const provider = accessProvidersMap.get(record.provider);
+                  if (provider?.usages?.includes(ACCESS_USAGES.DNS)) {
+                    formInst.setFieldValue("providerAccessId", record.id);
+                    handleProviderAccessSelect(record.id);
+                  }
+                }}
+              />
+            </div>
+            <Form.Item name="providerAccessId" rules={[formRule]} noStyle>
               <AccessSelect
                 placeholder={t("workflow_node.apply.form.provider_access.placeholder")}
                 showSearch
@@ -254,25 +245,18 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)
             </Typography.Text>
           </Divider>
 
-          <Form.Item noStyle>
-            <label className="mb-1 block">
-              <div className="flex w-full items-center justify-between gap-4">
-                <div className="max-w-full grow truncate">
-                  <span>{t("workflow_node.apply.form.ca_provider.label")}</span>
-                </div>
-                <div className="text-right">
-                  <Show when={!fieldCAProvider}>
-                    <Link className="ant-typography" to="/settings/ssl-provider" target="_blank">
-                      <Button size="small" type="link">
-                        {t("workflow_node.apply.form.ca_provider.button")}
-                        <IconChevronRight size="1.25em" />
-                      </Button>
-                    </Link>
-                  </Show>
-                </div>
-              </div>
-            </label>
-            <Form.Item name="caProvider" rules={[formRule]}>
+          <Form.Item className="relative" label={t("workflow_node.apply.form.ca_provider.label")}>
+            <div className="absolute -top-[6px] right-0 -translate-y-full">
+              <Show when={!fieldCAProvider}>
+                <Link className="ant-typography" to="/settings/ssl-provider" target="_blank">
+                  <Button size="small" type="link">
+                    {t("workflow_node.apply.form.ca_provider.button")}
+                    <IconChevronRight size="1.25em" />
+                  </Button>
+                </Link>
+              </Show>
+            </div>
+            <Form.Item name="caProvider" noStyle rules={[formRule]}>
               <CAProviderSelect
                 allowClear
                 placeholder={t("workflow_node.apply.form.ca_provider.placeholder")}
@@ -283,34 +267,27 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)
             </Form.Item>
           </Form.Item>
 
-          <Form.Item hidden={!showCAProviderAccess} noStyle>
-            <label className="mb-1 block">
-              <div className="flex w-full items-center justify-between gap-4">
-                <div className="max-w-full grow truncate">
-                  <span>{t("workflow_node.apply.form.ca_provider_access.label")}</span>
-                </div>
-                <div className="text-right">
-                  <AccessEditDrawer
-                    data={{ provider: caProvidersMap.get(fieldCAProvider!)?.provider }}
-                    mode="create"
-                    trigger={
-                      <Button size="small" type="link">
-                        {t("workflow_node.apply.form.ca_provider_access.button")}
-                        <IconChevronRight size="1.25em" />
-                      </Button>
-                    }
-                    usage="ca"
-                    afterSubmit={(record) => {
-                      const provider = accessProvidersMap.get(record.provider);
-                      if (provider?.usages?.includes(ACCESS_USAGES.CA)) {
-                        formInst.setFieldValue("caProviderAccessId", record.id);
-                      }
-                    }}
-                  />
-                </div>
-              </div>
-            </label>
-            <Form.Item name="caProviderAccessId" rules={[formRule]}>
+          <Form.Item label={t("workflow_node.apply.form.ca_provider_access.label")} hidden={!showCAProviderAccess}>
+            <div className="absolute -top-[6px] right-0 -translate-y-full">
+              <AccessEditDrawer
+                data={{ provider: caProvidersMap.get(fieldCAProvider!)?.provider }}
+                mode="create"
+                trigger={
+                  <Button size="small" type="link">
+                    {t("workflow_node.apply.form.ca_provider_access.button")}
+                    <IconChevronRight size="1.25em" />
+                  </Button>
+                }
+                usage="ca"
+                afterSubmit={(record) => {
+                  const provider = accessProvidersMap.get(record.provider);
+                  if (provider?.usages?.includes(ACCESS_USAGES.CA)) {
+                    formInst.setFieldValue("caProviderAccessId", record.id);
+                  }
+                }}
+              />
+            </div>
+            <Form.Item name="caProviderAccessId" noStyle rules={[formRule]}>
               <AccessSelect
                 placeholder={t("workflow_node.apply.form.ca_provider_access.placeholder")}
                 showSearch
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx
index dfb22bcd..0935fa60 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx
@@ -1,9 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 import { getI18n, useTranslation } from "react-i18next";
-import { QuestionCircleOutlined as IconQuestionCircleOutlined } from "@ant-design/icons";
 import { type FlowNodeEntity, getNodeForm } from "@flowgram.ai/fixed-layout-editor";
 import { IconPlus } from "@tabler/icons-react";
-import { type AnchorProps, Button, Divider, Flex, Form, type FormInstance, Select, Switch, Tooltip, Typography, theme } from "antd";
+import { type AnchorProps, Button, Divider, Flex, Form, type FormInstance, Select, Switch, Typography, theme } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
@@ -415,39 +414,32 @@ const BizDeployNodeConfigForm = ({ node, ...props }: BizDeployNodeConfigFormProp
               />
             </Form.Item>
 
-            <Form.Item hidden={!showProviderAccess} noStyle>
-              <label className="mb-1 block">
-                <div className="flex w-full items-center justify-between gap-4">
-                  <div className="max-w-full grow truncate">
-                    <span>{t("workflow_node.deploy.form.provider_access.label")}</span>
-                    <Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
-                      <Typography.Text className="ms-1" type="secondary">
-                        <IconQuestionCircleOutlined />
-                      </Typography.Text>
-                    </Tooltip>
-                  </div>
-                  <div className="text-right">
-                    <AccessEditDrawer
-                      data={{ provider: deploymentProvidersMap.get(fieldProvider!)?.provider }}
-                      mode="create"
-                      trigger={
-                        <Button size="small" type="link">
-                          {t("workflow_node.deploy.form.provider_access.button")}
-                          <IconPlus size="1.25em" />
-                        </Button>
-                      }
-                      usage="hosting"
-                      afterSubmit={(record) => {
-                        const provider = accessProvidersMap.get(record.provider);
-                        if (provider?.usages?.includes(ACCESS_USAGES.HOSTING)) {
-                          formInst.setFieldValue("providerAccessId", record.id);
-                        }
-                      }}
-                    />
-                  </div>
-                </div>
-              </label>
-              <Form.Item name="providerAccessId" rules={[formRule]}>
+            <Form.Item
+              className="relative"
+              hidden={!showProviderAccess}
+              label={t("workflow_node.deploy.form.provider_access.label")}
+              tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.provider_access.tooltip") }}></span>}
+            >
+              <div className="absolute -top-[6px] right-0 -translate-y-full">
+                <AccessEditDrawer
+                  data={{ provider: deploymentProvidersMap.get(fieldProvider!)?.provider }}
+                  mode="create"
+                  trigger={
+                    <Button size="small" type="link">
+                      {t("workflow_node.deploy.form.provider_access.button")}
+                      <IconPlus size="1.25em" />
+                    </Button>
+                  }
+                  usage="hosting"
+                  afterSubmit={(record) => {
+                    const provider = accessProvidersMap.get(record.provider);
+                    if (provider?.usages?.includes(ACCESS_USAGES.HOSTING)) {
+                      formInst.setFieldValue("providerAccessId", record.id);
+                    }
+                  }}
+                />
+              </div>
+              <Form.Item name="providerAccessId" rules={[formRule]} noStyle>
                 <AccessSelect
                   placeholder={t("workflow_node.deploy.form.provider_access.placeholder")}
                   showSearch
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderLocal.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderLocal.tsx
index ab0f6e08..3ec8d204 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderLocal.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderLocal.tsx
@@ -148,7 +148,7 @@ const BizDeployNodeConfigFormProviderLocal = () => {
       case FORMAT_PEM:
         {
           if (/(.pfx|.jks)$/.test(fieldCertPath)) {
-            formInst.setFieldValue("certPath", fieldCertPath.replace(/(.pfx|.jks)$/, ".crt"));
+            formInst.setFieldValue([parentNamePath, "certPath"], fieldCertPath.replace(/(.pfx|.jks)$/, ".crt"));
           }
         }
         break;
@@ -156,7 +156,7 @@ const BizDeployNodeConfigFormProviderLocal = () => {
       case FORMAT_PFX:
         {
           if (/(.crt|.jks)$/.test(fieldCertPath)) {
-            formInst.setFieldValue("certPath", fieldCertPath.replace(/(.crt|.jks)$/, ".pfx"));
+            formInst.setFieldValue([parentNamePath, "certPath"], fieldCertPath.replace(/(.crt|.jks)$/, ".pfx"));
           }
         }
         break;
@@ -164,7 +164,7 @@ const BizDeployNodeConfigFormProviderLocal = () => {
       case FORMAT_JKS:
         {
           if (/(.crt|.pfx)$/.test(fieldCertPath)) {
-            formInst.setFieldValue("certPath", fieldCertPath.replace(/(.crt|.pfx)$/, ".jks"));
+            formInst.setFieldValue([parentNamePath, "certPath"], fieldCertPath.replace(/(.crt|.pfx)$/, ".jks"));
           }
         }
         break;
@@ -177,11 +177,11 @@ const BizDeployNodeConfigFormProviderLocal = () => {
       case "ps_backup_files":
         {
           const presetScriptParams = {
-            certPath: formInst.getFieldValue("certPath"),
-            keyPath: formInst.getFieldValue("keyPath"),
+            certPath: formInst.getFieldValue([parentNamePath, "certPath"]),
+            keyPath: formInst.getFieldValue([parentNamePath, "keyPath"]),
           };
-          formInst.setFieldValue("shellEnv", SHELLENV_SH);
-          formInst.setFieldValue("preCommand", initPresetScript(key, presetScriptParams));
+          formInst.setFieldValue([parentNamePath, "shellEnv"], SHELLENV_SH);
+          formInst.setFieldValue([parentNamePath, "preCommand"], initPresetScript(key, presetScriptParams));
         }
         break;
     }
@@ -191,8 +191,8 @@ const BizDeployNodeConfigFormProviderLocal = () => {
     switch (key) {
       case "sh_reload_nginx":
         {
-          formInst.setFieldValue("shellEnv", SHELLENV_SH);
-          formInst.setFieldValue("postCommand", initPresetScript(key));
+          formInst.setFieldValue([parentNamePath, "shellEnv"], SHELLENV_SH);
+          formInst.setFieldValue([parentNamePath, "postCommand"], initPresetScript(key));
         }
         break;
 
@@ -201,11 +201,11 @@ const BizDeployNodeConfigFormProviderLocal = () => {
       case "ps_binding_rdp":
         {
           const presetScriptParams = {
-            certPath: formInst.getFieldValue("certPath"),
-            pfxPassword: formInst.getFieldValue("pfxPassword"),
+            certPath: formInst.getFieldValue([parentNamePath, "certPath"]),
+            pfxPassword: formInst.getFieldValue([parentNamePath, "pfxPassword"]),
           };
-          formInst.setFieldValue("shellEnv", SHELLENV_POWERSHELL);
-          formInst.setFieldValue("postCommand", initPresetScript(key, presetScriptParams));
+          formInst.setFieldValue([parentNamePath, "shellEnv"], SHELLENV_POWERSHELL);
+          formInst.setFieldValue([parentNamePath, "postCommand"], initPresetScript(key, presetScriptParams));
         }
         break;
     }
@@ -341,32 +341,25 @@ const BizDeployNodeConfigFormProviderLocal = () => {
         </Select>
       </Form.Item>
 
-      <Form.Item noStyle>
-        <label className="mb-1 block">
-          <div className="flex w-full items-center justify-between gap-4">
-            <div className="max-w-full grow truncate">
-              <span>{t("workflow_node.deploy.form.local_pre_command.label")}</span>
-            </div>
-            <div className="text-right">
-              <Dropdown
-                menu={{
-                  items: ["sh_backup_files", "ps_backup_files"].map((key) => ({
-                    key,
-                    label: t(`workflow_node.deploy.form.local_preset_scripts.option.${key}.label`),
-                    onClick: () => handlePresetPreScriptClick(key),
-                  })),
-                }}
-                trigger={["click"]}
-              >
-                <Button size="small" type="link">
-                  {t("workflow_node.deploy.form.local_preset_scripts.button")}
-                  <IconChevronDown size="1.25em" />
-                </Button>
-              </Dropdown>
-            </div>
-          </div>
-        </label>
-        <Form.Item name={[parentNamePath, "preCommand"]} initialValue={initialValues.preCommand} rules={[formRule]}>
+      <Form.Item label={t("workflow_node.deploy.form.local_pre_command.label")}>
+        <div className="absolute -top-[6px] right-0 -translate-y-full">
+          <Dropdown
+            menu={{
+              items: ["sh_backup_files", "ps_backup_files"].map((key) => ({
+                key,
+                label: t(`workflow_node.deploy.form.local_preset_scripts.option.${key}.label`),
+                onClick: () => handlePresetPreScriptClick(key),
+              })),
+            }}
+            trigger={["click"]}
+          >
+            <Button size="small" type="link">
+              {t("workflow_node.deploy.form.local_preset_scripts.button")}
+              <IconChevronDown size="1.25em" />
+            </Button>
+          </Dropdown>
+        </div>
+        <Form.Item name={[parentNamePath, "preCommand"]} initialValue={initialValues.preCommand} noStyle rules={[formRule]}>
           <CodeInput
             height="auto"
             minHeight="64px"
@@ -377,32 +370,25 @@ const BizDeployNodeConfigFormProviderLocal = () => {
         </Form.Item>
       </Form.Item>
 
-      <Form.Item noStyle>
-        <label className="mb-1 block">
-          <div className="flex w-full items-center justify-between gap-4">
-            <div className="max-w-full grow truncate">
-              <span>{t("workflow_node.deploy.form.local_post_command.label")}</span>
-            </div>
-            <div className="text-right">
-              <Dropdown
-                menu={{
-                  items: ["sh_reload_nginx", "ps_binding_iis", "ps_binding_netsh", "ps_binding_rdp"].map((key) => ({
-                    key,
-                    label: t(`workflow_node.deploy.form.local_preset_scripts.option.${key}.label`),
-                    onClick: () => handlePresetPostScriptClick(key),
-                  })),
-                }}
-                trigger={["click"]}
-              >
-                <Button size="small" type="link">
-                  {t("workflow_node.deploy.form.local_preset_scripts.button")}
-                  <IconChevronDown size="1.25em" />
-                </Button>
-              </Dropdown>
-            </div>
-          </div>
-        </label>
-        <Form.Item name={[parentNamePath, "postCommand"]} initialValue={initialValues.postCommand} rules={[formRule]}>
+      <Form.Item label={t("workflow_node.deploy.form.local_post_command.label")}>
+        <div className="absolute -top-[6px] right-0 -translate-y-full">
+          <Dropdown
+            menu={{
+              items: ["sh_reload_nginx", "ps_binding_iis", "ps_binding_netsh", "ps_binding_rdp"].map((key) => ({
+                key,
+                label: t(`workflow_node.deploy.form.local_preset_scripts.option.${key}.label`),
+                onClick: () => handlePresetPostScriptClick(key),
+              })),
+            }}
+            trigger={["click"]}
+          >
+            <Button size="small" type="link">
+              {t("workflow_node.deploy.form.local_preset_scripts.button")}
+              <IconChevronDown size="1.25em" />
+            </Button>
+          </Dropdown>
+        </div>
+        <Form.Item name={[parentNamePath, "postCommand"]} initialValue={initialValues.postCommand} noStyle rules={[formRule]}>
           <CodeInput
             height="auto"
             minHeight="64px"
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderSSH.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderSSH.tsx
index fb1864d6..d0aef1ae 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderSSH.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderSSH.tsx
@@ -181,7 +181,7 @@ const BizDeployNodeConfigFormProviderSSH = () => {
       case FORMAT_PEM:
         {
           if (/(.pfx|.jks)$/.test(fieldCertPath)) {
-            formInst.setFieldValue("certPath", fieldCertPath.replace(/(.pfx|.jks)$/, ".crt"));
+            formInst.setFieldValue([parentNamePath, "certPath"], fieldCertPath.replace(/(.pfx|.jks)$/, ".crt"));
           }
         }
         break;
@@ -189,7 +189,7 @@ const BizDeployNodeConfigFormProviderSSH = () => {
       case FORMAT_PFX:
         {
           if (/(.crt|.jks)$/.test(fieldCertPath)) {
-            formInst.setFieldValue("certPath", fieldCertPath.replace(/(.crt|.jks)$/, ".pfx"));
+            formInst.setFieldValue([parentNamePath, "certPath"], fieldCertPath.replace(/(.crt|.jks)$/, ".pfx"));
           }
         }
         break;
@@ -197,7 +197,7 @@ const BizDeployNodeConfigFormProviderSSH = () => {
       case FORMAT_JKS:
         {
           if (/(.crt|.pfx)$/.test(fieldCertPath)) {
-            formInst.setFieldValue("certPath", fieldCertPath.replace(/(.crt|.pfx)$/, ".jks"));
+            formInst.setFieldValue([parentNamePath, "certPath"], fieldCertPath.replace(/(.crt|.pfx)$/, ".jks"));
           }
         }
         break;
@@ -210,10 +210,10 @@ const BizDeployNodeConfigFormProviderSSH = () => {
       case "ps_backup_files":
         {
           const presetScriptParams = {
-            certPath: formInst.getFieldValue("certPath"),
-            keyPath: formInst.getFieldValue("keyPath"),
+            certPath: formInst.getFieldValue([parentNamePath, "certPath"]),
+            keyPath: formInst.getFieldValue([parentNamePath, "keyPath"]),
           };
-          formInst.setFieldValue("preCommand", initPresetScript(key, presetScriptParams));
+          formInst.setFieldValue([parentNamePath, "preCommand"], initPresetScript(key, presetScriptParams));
         }
         break;
     }
@@ -223,7 +223,7 @@ const BizDeployNodeConfigFormProviderSSH = () => {
     switch (key) {
       case "sh_reload_nginx":
         {
-          formInst.setFieldValue("postCommand", initPresetScript(key));
+          formInst.setFieldValue([parentNamePath, "postCommand"], initPresetScript(key));
         }
         break;
 
@@ -232,12 +232,12 @@ const BizDeployNodeConfigFormProviderSSH = () => {
       case "sh_replace_qnap_ssl":
         {
           const presetScriptParams = {
-            certPath: formInst.getFieldValue("certPath"),
-            certPathForServerOnly: formInst.getFieldValue("certPathForServerOnly"),
-            certPathForIntermediaOnly: formInst.getFieldValue("certPathForIntermediaOnly"),
-            keyPath: formInst.getFieldValue("keyPath"),
+            certPath: formInst.getFieldValue([parentNamePath, "certPath"]),
+            certPathForServerOnly: formInst.getFieldValue([parentNamePath, "certPathForServerOnly"]),
+            certPathForIntermediaOnly: formInst.getFieldValue([parentNamePath, "certPathForIntermediaOnly"]),
+            keyPath: formInst.getFieldValue([parentNamePath, "keyPath"]),
           };
-          formInst.setFieldValue("postCommand", initPresetScript(key, presetScriptParams));
+          formInst.setFieldValue([parentNamePath, "postCommand"], initPresetScript(key, presetScriptParams));
         }
         break;
 
@@ -246,10 +246,10 @@ const BizDeployNodeConfigFormProviderSSH = () => {
       case "ps_binding_rdp":
         {
           const presetScriptParams = {
-            certPath: formInst.getFieldValue("certPath"),
-            pfxPassword: formInst.getFieldValue("pfxPassword"),
+            certPath: formInst.getFieldValue([parentNamePath, "certPath"]),
+            pfxPassword: formInst.getFieldValue([parentNamePath, "pfxPassword"]),
           };
-          formInst.setFieldValue("postCommand", initPresetScript(key, presetScriptParams));
+          formInst.setFieldValue([parentNamePath, "postCommand"], initPresetScript(key, presetScriptParams));
         }
         break;
     }
@@ -362,32 +362,25 @@ const BizDeployNodeConfigFormProviderSSH = () => {
         </Form.Item>
       </Show>
 
-      <Form.Item noStyle>
-        <label className="mb-1 block">
-          <div className="flex w-full items-center justify-between gap-4">
-            <div className="max-w-full grow truncate">
-              <span>{t("workflow_node.deploy.form.ssh_pre_command.label")}</span>
-            </div>
-            <div className="text-right">
-              <Dropdown
-                menu={{
-                  items: ["sh_backup_files", "ps_backup_files"].map((key) => ({
-                    key,
-                    label: t(`workflow_node.deploy.form.ssh_preset_scripts.option.${key}.label`),
-                    onClick: () => handlePresetPreScriptClick(key),
-                  })),
-                }}
-                trigger={["click"]}
-              >
-                <Button size="small" type="link">
-                  {t("workflow_node.deploy.form.ssh_preset_scripts.button")}
-                  <IconChevronDown size="1.25em" />
-                </Button>
-              </Dropdown>
-            </div>
-          </div>
-        </label>
-        <Form.Item name={[parentNamePath, "preCommand"]} initialValue={initialValues.preCommand} rules={[formRule]}>
+      <Form.Item label={t("workflow_node.deploy.form.ssh_pre_command.label")}>
+        <div className="absolute -top-[6px] right-0 -translate-y-full">
+          <Dropdown
+            menu={{
+              items: ["sh_backup_files", "ps_backup_files"].map((key) => ({
+                key,
+                label: t(`workflow_node.deploy.form.ssh_preset_scripts.option.${key}.label`),
+                onClick: () => handlePresetPreScriptClick(key),
+              })),
+            }}
+            trigger={["click"]}
+          >
+            <Button size="small" type="link">
+              {t("workflow_node.deploy.form.ssh_preset_scripts.button")}
+              <IconChevronDown size="1.25em" />
+            </Button>
+          </Dropdown>
+        </div>
+        <Form.Item name={[parentNamePath, "preCommand"]} initialValue={initialValues.preCommand} noStyle rules={[formRule]}>
           <CodeInput
             height="auto"
             minHeight="64px"
@@ -398,40 +391,33 @@ const BizDeployNodeConfigFormProviderSSH = () => {
         </Form.Item>
       </Form.Item>
 
-      <Form.Item noStyle>
-        <label className="mb-1 block">
-          <div className="flex w-full items-center justify-between gap-4">
-            <div className="max-w-full grow truncate">
-              <span>{t("workflow_node.deploy.form.ssh_post_command.label")}</span>
-            </div>
-            <div className="text-right">
-              <Dropdown
-                menu={{
-                  items: [
-                    "sh_reload_nginx",
-                    "sh_replace_synologydsm_ssl",
-                    "sh_replace_fnos_ssl",
-                    "sh_replace_qnap_ssl",
-                    "ps_binding_iis",
-                    "ps_binding_netsh",
-                    "ps_binding_rdp",
-                  ].map((key) => ({
-                    key,
-                    label: t(`workflow_node.deploy.form.ssh_preset_scripts.option.${key}.label`),
-                    onClick: () => handlePresetPostScriptClick(key),
-                  })),
-                }}
-                trigger={["click"]}
-              >
-                <Button size="small" type="link">
-                  {t("workflow_node.deploy.form.ssh_preset_scripts.button")}
-                  <IconChevronDown size="1.25em" />
-                </Button>
-              </Dropdown>
-            </div>
-          </div>
-        </label>
-        <Form.Item name={[parentNamePath, "postCommand"]} initialValue={initialValues.postCommand} rules={[formRule]}>
+      <Form.Item label={t("workflow_node.deploy.form.ssh_post_command.label")}>
+        <div className="absolute -top-[6px] right-0 -translate-y-full">
+          <Dropdown
+            menu={{
+              items: [
+                "sh_reload_nginx",
+                "sh_replace_synologydsm_ssl",
+                "sh_replace_fnos_ssl",
+                "sh_replace_qnap_ssl",
+                "ps_binding_iis",
+                "ps_binding_netsh",
+                "ps_binding_rdp",
+              ].map((key) => ({
+                key,
+                label: t(`workflow_node.deploy.form.ssh_preset_scripts.option.${key}.label`),
+                onClick: () => handlePresetPostScriptClick(key),
+              })),
+            }}
+            trigger={["click"]}
+          >
+            <Button size="small" type="link">
+              {t("workflow_node.deploy.form.ssh_preset_scripts.button")}
+              <IconChevronDown size="1.25em" />
+            </Button>
+          </Dropdown>
+        </div>
+        <Form.Item name={[parentNamePath, "postCommand"]} initialValue={initialValues.postCommand} noStyle rules={[formRule]}>
           <CodeInput
             height="auto"
             minHeight="64px"
diff --git a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWebhook.tsx b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWebhook.tsx
index fc7f6d5a..2014aa50 100644
--- a/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWebhook.tsx
+++ b/ui/src/components/workflow/designer/forms/BizDeployNodeConfigFormProviderWebhook.tsx
@@ -20,10 +20,10 @@ const BizDeployNodeConfigFormProviderWebhook = () => {
   const initialValues = getInitialValues();
 
   const handleWebhookDataBlur = () => {
-    const value = formInst.getFieldValue("webhookData");
+    const value = formInst.getFieldValue([parentNamePath, "webhookData"]);
     try {
       const json = JSON.stringify(JSON.parse(value), null, 2);
-      formInst.setFieldValue("webhookData", json);
+      formInst.setFieldValue([parentNamePath, "webhookData"], json);
     } catch {
       return;
     }
diff --git a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx
index ec95be90..b8e8be6b 100644
--- a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx
@@ -134,34 +134,27 @@ const BizNotifyNodeConfigForm = ({ node, ...props }: BizNotifyNodeConfigFormProp
             />
           </Form.Item>
 
-          <Form.Item noStyle>
-            <label className="mb-1 block">
-              <div className="flex w-full items-center justify-between gap-4">
-                <div className="max-w-full grow truncate">
-                  <span>{t("workflow_node.notify.form.provider_access.label")}</span>
-                </div>
-                <div className="text-right">
-                  <AccessEditDrawer
-                    mode="create"
-                    trigger={
-                      <Button size="small" type="link">
-                        {t("workflow_node.notify.form.provider_access.button")}
-                        <IconPlus size="1.25em" />
-                      </Button>
-                    }
-                    usage="notification"
-                    afterSubmit={(record) => {
-                      const provider = accessProvidersMap.get(record.provider);
-                      if (provider?.usages?.includes(ACCESS_USAGES.NOTIFICATION)) {
-                        formInst.setFieldValue("providerAccessId", record.id);
-                        handleProviderAccessSelect(record.id);
-                      }
-                    }}
-                  />
-                </div>
-              </div>
-            </label>
-            <Form.Item name="providerAccessId" rules={[formRule]}>
+          <Form.Item label={t("workflow_node.notify.form.provider_access.label")}>
+            <div className="absolute -top-[6px] right-0 -translate-y-full">
+              <AccessEditDrawer
+                mode="create"
+                trigger={
+                  <Button size="small" type="link">
+                    {t("workflow_node.notify.form.provider_access.button")}
+                    <IconPlus size="1.25em" />
+                  </Button>
+                }
+                usage="notification"
+                afterSubmit={(record) => {
+                  const provider = accessProvidersMap.get(record.provider);
+                  if (provider?.usages?.includes(ACCESS_USAGES.NOTIFICATION)) {
+                    formInst.setFieldValue("providerAccessId", record.id);
+                    handleProviderAccessSelect(record.id);
+                  }
+                }}
+              />
+            </div>
+            <Form.Item name="providerAccessId" noStyle rules={[formRule]}>
               <AccessSelect
                 placeholder={t("workflow_node.notify.form.provider_access.placeholder")}
                 showSearch
diff --git a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderWebhook.tsx b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderWebhook.tsx
index 15dbc25e..005e297b 100644
--- a/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderWebhook.tsx
+++ b/ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFormProviderWebhook.tsx
@@ -20,10 +20,10 @@ const BizNotifyNodeConfigFormProviderWebhook = () => {
   const initialValues = getInitialValues();
 
   const handleWebhookDataBlur = () => {
-    const value = formInst.getFieldValue("webhookData");
+    const value = formInst.getFieldValue([parentNamePath, "webhookData"]);
     try {
       const json = JSON.stringify(JSON.parse(value), null, 2);
-      formInst.setFieldValue("webhookData", json);
+      formInst.setFieldValue([parentNamePath, "webhookData"], json);
     } catch {
       return;
     }