From 0c42bb845dbff3bc654834f541870ea035b99940 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Tue, 13 May 2025 00:28:58 +0800
Subject: [PATCH] feat(ui): AccessProviderPicker

---
 ui/src/components/DrawerForm.tsx              |   2 +-
 ui/src/components/ModalForm.tsx               |   2 +-
 ui/src/components/access/AccessEditDrawer.tsx |   2 +-
 ui/src/components/access/AccessEditModal.tsx  |   2 +-
 ui/src/components/access/AccessForm.tsx       |  80 +++++++-----
 .../access/AccessFormWebhookConfig.tsx        |   4 +-
 .../certificate/CertificateDetailDrawer.tsx   |   2 +-
 .../provider/ACMEDns01ProviderPicker.tsx      |  29 +++--
 .../provider/AccessProviderPicker.tsx         | 117 ++++++++++++++++++
 .../provider/AccessProviderSelect.tsx         |  10 +-
 .../provider/DeploymentProviderPicker.tsx     |  14 ++-
 .../workflow/WorkflowRunDetailDrawer.tsx      |   2 +-
 .../workflow/node/ApplyNodeConfigForm.tsx     |  10 +-
 .../workflow/node/DeployNodeConfigForm.tsx    |  15 +--
 ...loyNodeConfigFormAliyunCASDeployConfig.tsx |   4 +-
 ...ployNodeConfigFormBaotaPanelSiteConfig.tsx |   2 +-
 .../node/DeployNodeConfigFormLocalConfig.tsx  |  10 +-
 .../node/DeployNodeConfigFormSSHConfig.tsx    |   4 +-
 ...eConfigFormTencentCloudSSLDeployConfig.tsx |   2 +-
 .../workflow/node/NotifyNodeConfigForm.tsx    |   4 +-
 .../components/workflow/node/_SharedNode.tsx  |   2 +-
 ui/src/i18n/locales/en/nls.access.json        |   1 +
 .../i18n/locales/en/nls.workflow.nodes.json   |   4 +-
 ui/src/i18n/locales/zh/nls.access.json        |   1 +
 .../i18n/locales/zh/nls.workflow.nodes.json   |   4 +-
 ui/src/pages/ConsoleLayout.tsx                |   2 +-
 ui/src/pages/workflows/WorkflowDetail.tsx     |   2 +-
 ui/src/pages/workflows/WorkflowNew.tsx        |   2 +-
 28 files changed, 246 insertions(+), 89 deletions(-)
 create mode 100644 ui/src/components/provider/AccessProviderPicker.tsx

diff --git a/ui/src/components/DrawerForm.tsx b/ui/src/components/DrawerForm.tsx
index 46116095..7e530e64 100644
--- a/ui/src/components/DrawerForm.tsx
+++ b/ui/src/components/DrawerForm.tsx
@@ -66,7 +66,7 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
   });
 
   const mergedFormProps: FormProps = {
-    clearOnDestroy: drawerProps?.destroyOnClose ? true : undefined,
+    clearOnDestroy: drawerProps?.destroyOnHidden ? true : undefined,
     ...formProps,
     ...props,
   };
diff --git a/ui/src/components/ModalForm.tsx b/ui/src/components/ModalForm.tsx
index 1bf84c79..8065d2f1 100644
--- a/ui/src/components/ModalForm.tsx
+++ b/ui/src/components/ModalForm.tsx
@@ -75,7 +75,7 @@ const ModalForm = <T extends NonNullable<unknown> = any>({
   });
 
   const mergedFormProps: FormProps = {
-    clearOnDestroy: modalProps?.destroyOnClose ? true : undefined,
+    clearOnDestroy: modalProps?.destroyOnHidden ? true : undefined,
     ...formProps,
     ...props,
   };
diff --git a/ui/src/components/access/AccessEditDrawer.tsx b/ui/src/components/access/AccessEditDrawer.tsx
index 7fa2f5d8..d4a7a4b5 100644
--- a/ui/src/components/access/AccessEditDrawer.tsx
+++ b/ui/src/components/access/AccessEditDrawer.tsx
@@ -93,7 +93,7 @@ const AccessEditDrawer = ({ data, loading, trigger, scene, usage, afterSubmit, .
       <Drawer
         afterOpenChange={setOpen}
         closable={!formPending}
-        destroyOnClose
+        destroyOnHidden
         footer={
           <Space className="w-full justify-end">
             <Button onClick={handleCancelClick}>{t("common.button.cancel")}</Button>
diff --git a/ui/src/components/access/AccessEditModal.tsx b/ui/src/components/access/AccessEditModal.tsx
index 9cfb5b0f..79edb113 100644
--- a/ui/src/components/access/AccessEditModal.tsx
+++ b/ui/src/components/access/AccessEditModal.tsx
@@ -95,7 +95,7 @@ const AccessEditModal = ({ data, loading, trigger, scene, usage, afterSubmit, ..
         cancelButtonProps={{ disabled: formPending }}
         closable
         confirmLoading={formPending}
-        destroyOnClose
+        destroyOnHidden
         loading={loading}
         okText={scene === "edit" ? t("common.button.save") : t("common.button.submit")}
         open={open}
diff --git a/ui/src/components/access/AccessForm.tsx b/ui/src/components/access/AccessForm.tsx
index 5f82ad67..02a71854 100644
--- a/ui/src/components/access/AccessForm.tsx
+++ b/ui/src/components/access/AccessForm.tsx
@@ -1,12 +1,14 @@
-import { forwardRef, useImperativeHandle, useMemo } from "react";
+import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
+import AccessProviderPicker from "@/components/provider/AccessProviderPicker";
 import AccessProviderSelect from "@/components/provider/AccessProviderSelect";
+import Show from "@/components/Show";
 import { type AccessModel } from "@/domain/access";
-import { ACCESS_PROVIDERS, ACCESS_USAGES } from "@/domain/provider";
+import { ACCESS_PROVIDERS, ACCESS_USAGES, type AccessProvider } from "@/domain/provider";
 import { useAntdForm, useAntdFormName } from "@/hooks";
 
 import AccessForm1PanelConfig from "./AccessForm1PanelConfig";
@@ -107,9 +109,22 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
   });
   const formRule = createSchemaFieldRule(formSchema);
   const { form: formInst, formProps } = useAntdForm({
+    name: "accessForm",
     initialValues: initialValues,
   });
 
+  const providerFilter = useMemo(() => {
+    switch (usage) {
+      case "both-dns-hosting":
+        return (record: AccessProvider) => record.usages.includes(ACCESS_USAGES.DNS) || record.usages.includes(ACCESS_USAGES.HOSTING);
+      case "ca-only":
+        return (record: AccessProvider) => record.usages.includes(ACCESS_USAGES.CA);
+      case "notification-only":
+        return (record: AccessProvider) => record.usages.includes(ACCESS_USAGES.NOTIFICATION);
+    }
+
+    return undefined;
+  }, [usage]);
   const providerLabel = useMemo(() => {
     switch (usage) {
       case "ca-only":
@@ -139,10 +154,11 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
     return undefined;
   }, [usage]);
 
-  const fieldProvider = Form.useWatch("provider", formInst);
+  const fieldProvider = Form.useWatch<z.infer<typeof formSchema>["provider"]>("provider", formInst);
+  const [fieldProviderPicked, setFieldProviderPicked] = useState<string>(initialValues?.provider); // bugfix: Form.useWatch 在条件渲染下不生效，这里用单独的变量存放 Picker 组件选择的值
 
   const [nestedFormInst] = Form.useForm();
-  const nestedFormName = useAntdFormName({ form: nestedFormInst, name: "accessEditFormConfigForm" });
+  const nestedFormName = useAntdFormName({ form: nestedFormInst, name: "accessConfigForm" });
   const nestedFormEl = useMemo(() => {
     const nestedFormProps = {
       form: nestedFormInst,
@@ -272,7 +288,13 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
       case ACCESS_PROVIDERS.ZEROSSL:
         return <AccessFormZeroSSLConfig {...nestedFormProps} />;
     }
-  }, [disabled, initialValues?.config, fieldProvider, nestedFormInst, nestedFormName]);
+  }, [usage, disabled, initialValues?.config, fieldProvider, nestedFormInst, nestedFormName]);
+
+  const handleProviderPick = (value: string) => {
+    setFieldProviderPicked(value);
+    formInst.setFieldValue("provider", value);
+    onValuesChange?.(formInst.getFieldsValue(true));
+  };
 
   const handleFormProviderChange = (name: string) => {
     if (name === nestedFormName) {
@@ -312,30 +334,32 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
     <Form.Provider onFormChange={handleFormProviderChange}>
       <div className={className} style={style}>
         <Form {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
-          <Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
-            <Input placeholder={t("access.form.name.placeholder")} />
-          </Form.Item>
+          <Show
+            when={!!fieldProvider || !!fieldProviderPicked}
+            fallback={
+              <AccessProviderPicker
+                autoFocus
+                filter={providerFilter}
+                placeholder={t("access.form.provider.search.placeholder")}
+                showOptionTags={usage == null || (usage === "both-dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
+                onSelect={handleProviderPick}
+              />
+            }
+          >
+            <Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
+              <Input placeholder={t("access.form.name.placeholder")} />
+            </Form.Item>
 
-          <Form.Item name="provider" label={providerLabel} rules={[formRule]} tooltip={providerTooltip}>
-            <AccessProviderSelect
-              filter={(record) => {
-                if (usage == null) return true;
-
-                switch (usage) {
-                  case "both-dns-hosting":
-                    return record.usages.includes(ACCESS_USAGES.DNS) || record.usages.includes(ACCESS_USAGES.HOSTING);
-                  case "ca-only":
-                    return record.usages.includes(ACCESS_USAGES.CA);
-                  case "notification-only":
-                    return record.usages.includes(ACCESS_USAGES.NOTIFICATION);
-                }
-              }}
-              disabled={scene !== "add"}
-              placeholder={providerPlaceholder}
-              showOptionTags={usage == null || (usage === "both-dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
-              showSearch={!disabled}
-            />
-          </Form.Item>
+            <Form.Item name="provider" label={providerLabel} rules={[formRule]} tooltip={providerTooltip}>
+              <AccessProviderSelect
+                filter={providerFilter}
+                disabled={scene !== "add"}
+                placeholder={providerPlaceholder}
+                showOptionTags={usage == null || (usage === "both-dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
+                showSearch={!disabled}
+              />
+            </Form.Item>
+          </Show>
         </Form>
 
         {nestedFormEl}
diff --git a/ui/src/components/access/AccessFormWebhookConfig.tsx b/ui/src/components/access/AccessFormWebhookConfig.tsx
index 4bbc6754..0108d7b3 100644
--- a/ui/src/components/access/AccessFormWebhookConfig.tsx
+++ b/ui/src/components/access/AccessFormWebhookConfig.tsx
@@ -283,7 +283,7 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
       </Form.Item>
 
       <Show when={!usage || usage === "deployment"}>
-        <Form.Item className="mb-0">
+        <Form.Item className="mb-0" htmlFor="null">
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
               <div className="max-w-full grow truncate">
@@ -312,7 +312,7 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
       </Show>
 
       <Show when={!usage || usage === "notification"}>
-        <Form.Item className="mb-0">
+        <Form.Item className="mb-0" htmlFor="null">
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
               <div className="max-w-full grow truncate">
diff --git a/ui/src/components/certificate/CertificateDetailDrawer.tsx b/ui/src/components/certificate/CertificateDetailDrawer.tsx
index 361beb96..13096144 100644
--- a/ui/src/components/certificate/CertificateDetailDrawer.tsx
+++ b/ui/src/components/certificate/CertificateDetailDrawer.tsx
@@ -29,7 +29,7 @@ const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: Certifica
 
       <Drawer
         afterOpenChange={setOpen}
-        destroyOnClose
+        destroyOnHidden
         open={open}
         loading={loading}
         placement="right"
diff --git a/ui/src/components/provider/ACMEDns01ProviderPicker.tsx b/ui/src/components/provider/ACMEDns01ProviderPicker.tsx
index 7f99cf6a..0f20b296 100644
--- a/ui/src/components/provider/ACMEDns01ProviderPicker.tsx
+++ b/ui/src/components/provider/ACMEDns01ProviderPicker.tsx
@@ -3,17 +3,18 @@ import { useTranslation } from "react-i18next";
 import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Typography } from "antd";
 
 import Show from "@/components/Show";
-import { acmeDns01ProvidersMap } from "@/domain/provider";
+import { type ACMEDns01Provider, acmeDns01ProvidersMap } from "@/domain/provider";
 
 export type ACMEDns01ProviderPickerProps = {
   className?: string;
   style?: React.CSSProperties;
   autoFocus?: boolean;
+  filter?: (record: ACMEDns01Provider) => boolean;
   placeholder?: string;
   onSelect?: (value: string) => void;
 };
 
-const ACMEDns01ProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: ACMEDns01ProviderPickerProps) => {
+const ACMEDns01ProviderPicker = ({ className, style, autoFocus, filter, placeholder, onSelect }: ACMEDns01ProviderPickerProps) => {
   const { t } = useTranslation();
 
   const [keyword, setKeyword] = useState<string>();
@@ -25,15 +26,23 @@ const ACMEDns01ProviderPicker = ({ className, style, autoFocus, placeholder, onS
   }, []);
 
   const providers = useMemo(() => {
-    return Array.from(acmeDns01ProvidersMap.values()).filter((provider) => {
-      if (keyword) {
-        const value = keyword.toLowerCase();
-        return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
-      }
+    return Array.from(acmeDns01ProvidersMap.values())
+      .filter((provider) => {
+        if (filter) {
+          return filter(provider);
+        }
 
-      return true;
-    });
-  }, [keyword]);
+        return true;
+      })
+      .filter((provider) => {
+        if (keyword) {
+          const value = keyword.toLowerCase();
+          return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
+        }
+
+        return true;
+      });
+  }, [filter, keyword]);
 
   const handleProviderTypeSelect = (value: string) => {
     onSelect?.(value);
diff --git a/ui/src/components/provider/AccessProviderPicker.tsx b/ui/src/components/provider/AccessProviderPicker.tsx
new file mode 100644
index 00000000..c7af17a1
--- /dev/null
+++ b/ui/src/components/provider/AccessProviderPicker.tsx
@@ -0,0 +1,117 @@
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Tag, Typography } from "antd";
+
+import Show from "@/components/Show";
+import { ACCESS_USAGES, type AccessProvider, type AccessUsageType, accessProvidersMap } from "@/domain/provider";
+
+export type AccessProviderPickerProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  autoFocus?: boolean;
+  filter?: (record: AccessProvider) => boolean;
+  placeholder?: string;
+  showOptionTags?: boolean | { [key in AccessUsageType]?: boolean };
+  onSelect?: (value: string) => void;
+};
+
+const AccessProviderPicker = ({ className, style, autoFocus, filter, placeholder, showOptionTags, onSelect }: AccessProviderPickerProps) => {
+  const { t } = useTranslation();
+
+  const [keyword, setKeyword] = useState<string>();
+  const keywordInputRef = useRef<InputRef>(null);
+  useEffect(() => {
+    if (autoFocus) {
+      setTimeout(() => keywordInputRef.current?.focus(), 1);
+    }
+  }, []);
+
+  const providers = useMemo(() => {
+    return Array.from(accessProvidersMap.values())
+      .filter((provider) => {
+        if (filter) {
+          return filter(provider);
+        }
+
+        return true;
+      })
+      .filter((provider) => {
+        if (keyword) {
+          const value = keyword.toLowerCase();
+          return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
+        }
+
+        return true;
+      });
+  }, [filter, keyword]);
+
+  const showOptionTagForDNS = useMemo(() => {
+    return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.DNS] : !!showOptionTags;
+  }, [showOptionTags]);
+  const showOptionTagForHosting = useMemo(() => {
+    return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.HOSTING] : !!showOptionTags;
+  }, [showOptionTags]);
+  const showOptionTagForCA = useMemo(() => {
+    return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.CA] : !!showOptionTags;
+  }, [showOptionTags]);
+  const showOptionTagForNotification = useMemo(() => {
+    return typeof showOptionTags === "object" ? !!showOptionTags[ACCESS_USAGES.NOTIFICATION] : !!showOptionTags;
+  }, [showOptionTags]);
+
+  const handleProviderTypeSelect = (value: string) => {
+    onSelect?.(value);
+  };
+
+  return (
+    <div className={className} style={style}>
+      <Input.Search ref={keywordInputRef} placeholder={placeholder ?? t("common.text.search")} onChange={(e) => setKeyword(e.target.value.trim())} />
+
+      <div className="mt-4">
+        <Show when={providers.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
+          <Row gutter={[16, 16]}>
+            {providers.map((provider, index) => {
+              return (
+                <Col key={index} xs={24} md={12} span={8}>
+                  <Card
+                    className="h-20 w-full overflow-hidden shadow-sm"
+                    styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
+                    hoverable
+                    onClick={() => {
+                      handleProviderTypeSelect(provider.type);
+                    }}
+                  >
+                    <Flex className="size-full overflow-hidden" align="center" gap={8}>
+                      <Avatar src={provider.icon} size="small" />
+                      <div className="flex-1 overflow-hidden">
+                        <Typography.Text className="mb-1 line-clamp-1">{t(provider.name)}</Typography.Text>
+                        <div className="mx-[-30px] scale-[80%]">
+                          <Show when={provider.builtin}>
+                            <Tag>{t("access.props.provider.builtin")}</Tag>
+                          </Show>
+                          <Show when={showOptionTagForDNS && provider.usages.includes(ACCESS_USAGES.DNS)}>
+                            <Tag color="orange">{t("access.props.provider.usage.dns")}</Tag>
+                          </Show>
+                          <Show when={showOptionTagForHosting && provider.usages.includes(ACCESS_USAGES.HOSTING)}>
+                            <Tag color="geekblue">{t("access.props.provider.usage.hosting")}</Tag>
+                          </Show>
+                          <Show when={showOptionTagForCA && provider.usages.includes(ACCESS_USAGES.CA)}>
+                            <Tag color="magenta">{t("access.props.provider.usage.ca")}</Tag>
+                          </Show>
+                          <Show when={showOptionTagForNotification && provider.usages.includes(ACCESS_USAGES.NOTIFICATION)}>
+                            <Tag color="cyan">{t("access.props.provider.usage.notification")}</Tag>
+                          </Show>
+                        </div>
+                      </div>
+                    </Flex>
+                  </Card>
+                </Col>
+              );
+            })}
+          </Row>
+        </Show>
+      </div>
+    </div>
+  );
+};
+
+export default memo(AccessProviderPicker);
diff --git a/ui/src/components/provider/AccessProviderSelect.tsx b/ui/src/components/provider/AccessProviderSelect.tsx
index 79f1539e..872509c3 100644
--- a/ui/src/components/provider/AccessProviderSelect.tsx
+++ b/ui/src/components/provider/AccessProviderSelect.tsx
@@ -56,19 +56,19 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
         </Space>
         <div>
           <Show when={provider.builtin}>
-            <Tag color="grey">{t("access.props.provider.builtin")}</Tag>
+            <Tag>{t("access.props.provider.builtin")}</Tag>
           </Show>
           <Show when={showOptionTagForDNS && provider.usages.includes(ACCESS_USAGES.DNS)}>
-            <Tag color="peru">{t("access.props.provider.usage.dns")}</Tag>
+            <Tag color="orange">{t("access.props.provider.usage.dns")}</Tag>
           </Show>
           <Show when={showOptionTagForHosting && provider.usages.includes(ACCESS_USAGES.HOSTING)}>
-            <Tag color="royalblue">{t("access.props.provider.usage.hosting")}</Tag>
+            <Tag color="geekblue">{t("access.props.provider.usage.hosting")}</Tag>
           </Show>
           <Show when={showOptionTagForCA && provider.usages.includes(ACCESS_USAGES.CA)}>
-            <Tag color="crimson">{t("access.props.provider.usage.ca")}</Tag>
+            <Tag color="magenta">{t("access.props.provider.usage.ca")}</Tag>
           </Show>
           <Show when={showOptionTagForNotification && provider.usages.includes(ACCESS_USAGES.NOTIFICATION)}>
-            <Tag color="mediumaquamarine">{t("access.props.provider.usage.notification")}</Tag>
+            <Tag color="cyan">{t("access.props.provider.usage.notification")}</Tag>
           </Show>
         </div>
       </div>
diff --git a/ui/src/components/provider/DeploymentProviderPicker.tsx b/ui/src/components/provider/DeploymentProviderPicker.tsx
index f1af6ecb..0ea5a97c 100644
--- a/ui/src/components/provider/DeploymentProviderPicker.tsx
+++ b/ui/src/components/provider/DeploymentProviderPicker.tsx
@@ -3,17 +3,18 @@ import { useTranslation } from "react-i18next";
 import { Avatar, Card, Col, Empty, Flex, Input, type InputRef, Row, Tabs, Tooltip, Typography } from "antd";
 
 import Show from "@/components/Show";
-import { DEPLOYMENT_CATEGORIES, deploymentProvidersMap } from "@/domain/provider";
+import { DEPLOYMENT_CATEGORIES, type DeploymentProvider, deploymentProvidersMap } from "@/domain/provider";
 
 export type DeploymentProviderPickerProps = {
   className?: string;
   style?: React.CSSProperties;
   autoFocus?: boolean;
+  filter?: (record: DeploymentProvider) => boolean;
   placeholder?: string;
   onSelect?: (value: string) => void;
 };
 
-const DeploymentProviderPicker = ({ className, style, autoFocus, placeholder, onSelect }: DeploymentProviderPickerProps) => {
+const DeploymentProviderPicker = ({ className, style, autoFocus, filter, placeholder, onSelect }: DeploymentProviderPickerProps) => {
   const { t } = useTranslation();
 
   const [category, setCategory] = useState<string>(DEPLOYMENT_CATEGORIES.ALL);
@@ -28,6 +29,13 @@ const DeploymentProviderPicker = ({ className, style, autoFocus, placeholder, on
 
   const providers = useMemo(() => {
     return Array.from(deploymentProvidersMap.values())
+      .filter((provider) => {
+        if (filter) {
+          return filter(provider);
+        }
+
+        return true;
+      })
       .filter((provider) => {
         if (category && category !== DEPLOYMENT_CATEGORIES.ALL) {
           return provider.category === category;
@@ -43,7 +51,7 @@ const DeploymentProviderPicker = ({ className, style, autoFocus, placeholder, on
 
         return true;
       });
-  }, [category, keyword]);
+  }, [filter, category, keyword]);
 
   const handleProviderTypeSelect = (value: string) => {
     onSelect?.(value);
diff --git a/ui/src/components/workflow/WorkflowRunDetailDrawer.tsx b/ui/src/components/workflow/WorkflowRunDetailDrawer.tsx
index dc8149f3..5eb7b1c2 100644
--- a/ui/src/components/workflow/WorkflowRunDetailDrawer.tsx
+++ b/ui/src/components/workflow/WorkflowRunDetailDrawer.tsx
@@ -30,7 +30,7 @@ const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowR
 
       <Drawer
         afterOpenChange={setOpen}
-        destroyOnClose
+        destroyOnHidden
         open={open}
         loading={loading}
         placement="right"
diff --git a/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx b/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx
index 91b65c99..33534d28 100644
--- a/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/ApplyNodeConfigForm.tsx
@@ -350,7 +350,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
             />
           </Form.Item>
 
-          <Form.Item className="mb-0">
+          <Form.Item className="mb-0" htmlFor="null">
             <label className="mb-1 block">
               <div className="flex w-full items-center justify-between gap-4">
                 <div className="max-w-full grow truncate">
@@ -406,7 +406,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
         </Divider>
 
         <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
-          <Form.Item className="mb-0">
+          <Form.Item className="mb-0" htmlFor="null">
             <label className="mb-1 block">
               <div className="flex w-full items-center justify-between gap-4">
                 <div className="max-w-full grow truncate">
@@ -435,7 +435,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
             </Form.Item>
           </Form.Item>
 
-          <Form.Item className="mb-0" hidden={!showCAProviderAccess}>
+          <Form.Item className="mb-0" htmlFor="null" hidden={!showCAProviderAccess}>
             <label className="mb-1 block">
               <div className="flex w-full items-center justify-between gap-4">
                 <div className="max-w-full grow truncate">
@@ -703,7 +703,7 @@ const DomainsModalInput = memo(({ value, trigger, onChange }: { value?: string;
       {...formProps}
       layout="vertical"
       form={formInst}
-      modalProps={{ destroyOnClose: true }}
+      modalProps={{ destroyOnHidden: true }}
       title={t("workflow_node.apply.form.domains.multiple_input_modal.title")}
       trigger={trigger}
       validateTrigger="onSubmit"
@@ -743,7 +743,7 @@ const NameserversModalInput = memo(({ trigger, value, onChange }: { trigger?: Re
       {...formProps}
       layout="vertical"
       form={formInst}
-      modalProps={{ destroyOnClose: true }}
+      modalProps={{ destroyOnHidden: true }}
       title={t("workflow_node.apply.form.nameservers.multiple_input_modal.title")}
       trigger={trigger}
       validateTrigger="onSubmit"
diff --git a/ui/src/components/workflow/node/DeployNodeConfigForm.tsx b/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
index a3f9a2fc..4c1c14b4 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigForm.tsx
@@ -391,7 +391,9 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
         <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
           <Show
             when={!!fieldProvider}
-            fallback={<DeploymentProviderPicker autoFocus placeholder={t("workflow_node.deploy.search.provider.placeholder")} onSelect={handleProviderPick} />}
+            fallback={
+              <DeploymentProviderPicker autoFocus placeholder={t("workflow_node.deploy.form.provider.search.placeholder")} onSelect={handleProviderPick} />
+            }
           >
             <Form.Item name="provider" label={t("workflow_node.deploy.form.provider.label")} rules={[formRule]}>
               <DeploymentProviderSelect
@@ -404,7 +406,7 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
               />
             </Form.Item>
 
-            <Form.Item className="mb-0" hidden={!showProviderAccess}>
+            <Form.Item className="mb-0" htmlFor="null" hidden={!showProviderAccess}>
               <label className="mb-1 block">
                 <div className="flex w-full items-center justify-between gap-4">
                   <div className="max-w-full grow truncate">
@@ -450,15 +452,6 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
               </Form.Item>
             </Form.Item>
 
-            <Show when={fieldProvider === DEPLOYMENT_PROVIDERS.LOCAL}>
-              <Form.Item>
-                <Alert
-                  type="info"
-                  message={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.provider_access.guide_for_local") }}></span>}
-                />
-              </Form.Item>
-            </Show>
-
             <Form.Item
               name="certificate"
               label={t("workflow_node.deploy.form.certificate.label")}
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCASDeployConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCASDeployConfig.tsx
index f6182f28..4e3db0db 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCASDeployConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormAliyunCASDeployConfig.tsx
@@ -186,7 +186,7 @@ const ResourceIdsModalInput = memo(({ value, trigger, onChange }: { value?: stri
       {...formProps}
       layout="vertical"
       form={formInst}
-      modalProps={{ destroyOnClose: true }}
+      modalProps={{ destroyOnHidden: true }}
       title={t("workflow_node.deploy.form.aliyun_cas_deploy_resource_ids.multiple_input_modal.title")}
       trigger={trigger}
       validateTrigger="onSubmit"
@@ -226,7 +226,7 @@ const ContactIdsModalInput = memo(({ value, trigger, onChange }: { value?: strin
       {...formProps}
       layout="vertical"
       form={formInst}
-      modalProps={{ destroyOnClose: true }}
+      modalProps={{ destroyOnHidden: true }}
       title={t("workflow_node.deploy.form.aliyun_cas_deploy_contact_ids.multiple_input_modal.title")}
       trigger={trigger}
       validateTrigger="onSubmit"
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormBaotaPanelSiteConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormBaotaPanelSiteConfig.tsx
index e5c102bc..acc9d187 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormBaotaPanelSiteConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormBaotaPanelSiteConfig.tsx
@@ -173,7 +173,7 @@ const SiteNamesModalInput = memo(({ value, trigger, onChange }: { value?: string
       {...formProps}
       layout="vertical"
       form={formInst}
-      modalProps={{ destroyOnClose: true }}
+      modalProps={{ destroyOnHidden: true }}
       title={t("workflow_node.deploy.form.baotapanel_site_names.multiple_input_modal.title")}
       trigger={trigger}
       validateTrigger="onSubmit"
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
index 2ebae25d..cf34f94b 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormLocalConfig.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { DownOutlined as DownOutlinedIcon } from "@ant-design/icons";
-import { Button, Dropdown, Form, type FormInstance, Input, Select } from "antd";
+import { Alert, Button, Dropdown, Form, type FormInstance, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
@@ -289,6 +289,10 @@ const DeployNodeConfigFormLocalConfig = ({ form: formInst, formName, disabled, i
       name={formName}
       onValuesChange={handleFormChange}
     >
+      <Form.Item>
+        <Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.local.guide") }}></span>} />
+      </Form.Item>
+
       <Form.Item name="format" label={t("workflow_node.deploy.form.local_format.label")} rules={[formRule]}>
         <Select placeholder={t("workflow_node.deploy.form.local_format.placeholder")} onSelect={handleFormatSelect}>
           <Select.Option key={FORMAT_PEM} value={FORMAT_PEM}>
@@ -377,7 +381,7 @@ const DeployNodeConfigFormLocalConfig = ({ form: formInst, formName, disabled, i
         </Select>
       </Form.Item>
 
-      <Form.Item className="mb-0">
+      <Form.Item className="mb-0" htmlFor="null">
         <label className="mb-1 block">
           <div className="flex w-full items-center justify-between gap-4">
             <div className="max-w-full grow truncate">
@@ -407,7 +411,7 @@ const DeployNodeConfigFormLocalConfig = ({ form: formInst, formName, disabled, i
         </Form.Item>
       </Form.Item>
 
-      <Form.Item className="mb-0">
+      <Form.Item className="mb-0" htmlFor="null">
         <label className="mb-1 block">
           <div className="flex w-full items-center justify-between gap-4">
             <div className="max-w-full grow truncate">
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
index 21d76222..042e40c5 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormSSHConfig.tsx
@@ -252,7 +252,7 @@ const DeployNodeConfigFormSSHConfig = ({ form: formInst, formName, disabled, ini
         <Select options={[{ value: t("workflow_node.deploy.form.ssh_shell_env.value") }]} value={t("workflow_node.deploy.form.ssh_shell_env.value")} />
       </Form.Item>
 
-      <Form.Item className="mb-0">
+      <Form.Item className="mb-0" htmlFor="null">
         <label className="mb-1 block">
           <div className="flex w-full items-center justify-between gap-4">
             <div className="max-w-full grow truncate">
@@ -282,7 +282,7 @@ const DeployNodeConfigFormSSHConfig = ({ form: formInst, formName, disabled, ini
         </Form.Item>
       </Form.Item>
 
-      <Form.Item className="mb-0">
+      <Form.Item className="mb-0" htmlFor="null">
         <label className="mb-1 block">
           <div className="flex w-full items-center justify-between gap-4">
             <div className="max-w-full grow truncate">
diff --git a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudSSLDeployConfig.tsx b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudSSLDeployConfig.tsx
index 7ca6a625..5b3cddfd 100644
--- a/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudSSLDeployConfig.tsx
+++ b/ui/src/components/workflow/node/DeployNodeConfigFormTencentCloudSSLDeployConfig.tsx
@@ -160,7 +160,7 @@ const ResourceIdsModalInput = memo(({ value, trigger, onChange }: { value?: stri
       {...formProps}
       layout="vertical"
       form={formInst}
-      modalProps={{ destroyOnClose: true }}
+      modalProps={{ destroyOnHidden: true }}
       title={t("workflow_node.deploy.form.tencentcloud_ssl_deploy_resource_ids.multiple_input_modal.title")}
       trigger={trigger}
       validateTrigger="onSubmit"
diff --git a/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx b/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
index 57da2031..ca889c7b 100644
--- a/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/node/NotifyNodeConfigForm.tsx
@@ -180,7 +180,7 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
           <Input.TextArea autoSize={{ minRows: 3, maxRows: 5 }} placeholder={t("workflow_node.notify.form.message.placeholder")} />
         </Form.Item>
 
-        <Form.Item className="mb-0">
+        <Form.Item className="mb-0" htmlFor="null">
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
               <div className="max-w-full grow truncate line-through">{t("workflow_node.notify.form.channel.label")}</div>
@@ -224,7 +224,7 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
           />
         </Form.Item>
 
-        <Form.Item className="mb-0">
+        <Form.Item className="mb-0" htmlFor="null">
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
               <div className="max-w-full grow truncate">
diff --git a/ui/src/components/workflow/node/_SharedNode.tsx b/ui/src/components/workflow/node/_SharedNode.tsx
index 831d12d6..510a0154 100644
--- a/ui/src/components/workflow/node/_SharedNode.tsx
+++ b/ui/src/components/workflow/node/_SharedNode.tsx
@@ -285,7 +285,7 @@ const SharedNodeConfigDrawer = ({
       <Drawer
         afterOpenChange={setOpen}
         closable={!pending}
-        destroyOnClose
+        destroyOnHidden
         extra={
           <SharedNodeMenu
             node={node}
diff --git a/ui/src/i18n/locales/en/nls.access.json b/ui/src/i18n/locales/en/nls.access.json
index be9a3508..33130d4a 100644
--- a/ui/src/i18n/locales/en/nls.access.json
+++ b/ui/src/i18n/locales/en/nls.access.json
@@ -29,6 +29,7 @@
   "access.form.provider.label": "Provider",
   "access.form.provider.placeholder": "Please select a provider",
   "access.form.provider.tooltip": "DNS provider: The provider that hosts your domain names and manages your DNS records.<br>Hosting provider: The provider that hosts your servers or cloud services for deploying certificates.<br><br><i>Cannot be edited after saving.</i>",
+  "access.form.provider.search.placeholder": "Search provider ...",
   "access.form.certificate_authority.label": "Certificate authority",
   "access.form.certificate_authority.placeholder": "Please select a certificate authority",
   "access.form.notification_channel.label": "Notification channel",
diff --git a/ui/src/i18n/locales/en/nls.workflow.nodes.json b/ui/src/i18n/locales/en/nls.workflow.nodes.json
index 0b503461..69794fbd 100644
--- a/ui/src/i18n/locales/en/nls.workflow.nodes.json
+++ b/ui/src/i18n/locales/en/nls.workflow.nodes.json
@@ -98,14 +98,13 @@
   "workflow_node.apply.form.skip_before_expiry_days.tooltip": "Be careful not to exceed the validity period limit of the issued certificate, otherwise the certificate may never be renewed.",
 
   "workflow_node.deploy.label": "Deployment",
-  "workflow_node.deploy.search.provider.placeholder": "Search deploy target ...",
   "workflow_node.deploy.form.provider.label": "Deploy target",
   "workflow_node.deploy.form.provider.placeholder": "Please select deploy target",
+  "workflow_node.deploy.form.provider.search.placeholder": "Search deploy target ...",
   "workflow_node.deploy.form.provider_access.label": "Hosting provider authorization",
   "workflow_node.deploy.form.provider_access.placeholder": "Please select an authorization of Hosting provider",
   "workflow_node.deploy.form.provider_access.tooltip": "Used to invoke API during deployment.",
   "workflow_node.deploy.form.provider_access.button": "Create",
-  "workflow_node.deploy.form.provider_access.guide_for_local": "Tips: If you are running Certimate in Docker, the \"Local\" refers to the container rather than the host.",
   "workflow_node.deploy.form.certificate.label": "Certificate",
   "workflow_node.deploy.form.certificate.placeholder": "Please select certificate",
   "workflow_node.deploy.form.certificate.tooltip": "The certificate to be deployed comes from the previous nodes of application or upload.",
@@ -441,6 +440,7 @@
   "workflow_node.deploy.form.k8s_secret_data_key_for_key.label": "Kubernetes Secret data key for private key",
   "workflow_node.deploy.form.k8s_secret_data_key_for_key.placeholder": "Please enter Kubernetes Secret data key for private key",
   "workflow_node.deploy.form.k8s_secret_data_key_for_key.tooltip": "For more information, see <a href=\"https://kubernetes.io/docs/concepts/configuration/secret/\" target=\"_blank\">https://kubernetes.io/docs/concepts/configuration/secret/</a>",
+  "workflow_node.deploy.form.local.guide": "Tips: If you are running Certimate in Docker, the \"Local\" refers to the container rather than the host.",
   "workflow_node.deploy.form.local_format.label": "File format",
   "workflow_node.deploy.form.local_format.placeholder": "Please select file format",
   "workflow_node.deploy.form.local_format.option.pem.label": "PEM (*.pem, *.crt, *.key)",
diff --git a/ui/src/i18n/locales/zh/nls.access.json b/ui/src/i18n/locales/zh/nls.access.json
index bae29d27..ade8b3da 100644
--- a/ui/src/i18n/locales/zh/nls.access.json
+++ b/ui/src/i18n/locales/zh/nls.access.json
@@ -29,6 +29,7 @@
   "access.form.provider.label": "提供商",
   "access.form.provider.placeholder": "请选择提供商",
   "access.form.provider.tooltip": "提供商分为两种类型：<br>【DNS 提供商】你的 DNS 托管方，通常等同于域名注册商，用于在申请证书时管理您的域名解析记录。<br>【主机提供商】你的服务器或云服务的托管方，用于部署签发的证书。<br><br>该字段保存后不可修改。",
+  "access.form.provider.search.placeholder": "搜索提供商……",
   "access.form.certificate_authority.label": "证书颁发机构",
   "access.form.certificate_authority.placeholder": "请选择证书颁发机构",
   "access.form.notification_channel.label": "通知渠道",
diff --git a/ui/src/i18n/locales/zh/nls.workflow.nodes.json b/ui/src/i18n/locales/zh/nls.workflow.nodes.json
index 85d2aa6e..f6f01dc9 100644
--- a/ui/src/i18n/locales/zh/nls.workflow.nodes.json
+++ b/ui/src/i18n/locales/zh/nls.workflow.nodes.json
@@ -97,14 +97,13 @@
   "workflow_node.apply.form.skip_before_expiry_days.tooltip": "注意不要超过颁发的证书最大有效期，否则证书可能永远不会续期。",
 
   "workflow_node.deploy.label": "部署证书",
-  "workflow_node.deploy.search.provider.placeholder": "搜索部署目标……",
   "workflow_node.deploy.form.provider.label": "部署目标",
   "workflow_node.deploy.form.provider.placeholder": "请选择部署目标",
+  "workflow_node.deploy.form.provider.search.placeholder": "搜索部署目标……",
   "workflow_node.deploy.form.provider_access.label": "主机提供商授权",
   "workflow_node.deploy.form.provider_access.placeholder": "请选择主机提供商授权",
   "workflow_node.deploy.form.provider_access.tooltip": "用于部署证书时调用相关 API，注意与申请阶段所需的 DNS 提供商相区分。",
   "workflow_node.deploy.form.provider_access.button": "新建",
-  "workflow_node.deploy.form.provider_access.guide_for_local": "小贴士：如果你正在使用 Docker 运行 Certimate，“本地”指的是容器内而非宿主机。",
   "workflow_node.deploy.form.certificate.label": "待部署证书",
   "workflow_node.deploy.form.certificate.placeholder": "请选择待部署证书",
   "workflow_node.deploy.form.certificate.tooltip": "待部署证书来自之前的申请或上传节点。如果选项为空请先确保前序节点配置正确。",
@@ -440,6 +439,7 @@
   "workflow_node.deploy.form.k8s_secret_data_key_for_key.label": "Kubernetes Secret 数据键（用于存放私钥的字段）",
   "workflow_node.deploy.form.k8s_secret_data_key_for_key.placeholder": "请输入 Kubernetes Secret 中用于存放私钥的数据键",
   "workflow_node.deploy.form.k8s_secret_data_key_for_key.tooltip": "这是什么？请参阅 <a href=\"https://kubernetes.io/zh-cn/docs/concepts/configuration/secret/\" target=\"_blank\">https://kubernetes.io/zh-cn/docs/concepts/configuration/secret/</a>",
+  "workflow_node.deploy.form.local.guide": "小贴士：如果你正在使用 Docker 运行 Certimate，“本地”指的是容器内而非宿主机。",
   "workflow_node.deploy.form.local_format.label": "文件格式",
   "workflow_node.deploy.form.local_format.placeholder": "请选择文件格式",
   "workflow_node.deploy.form.local_format.option.pem.label": "PEM 格式（*.pem, *.crt, *.key）",
diff --git a/ui/src/pages/ConsoleLayout.tsx b/ui/src/pages/ConsoleLayout.tsx
index ed9d635f..e05d3f56 100644
--- a/ui/src/pages/ConsoleLayout.tsx
+++ b/ui/src/pages/ConsoleLayout.tsx
@@ -162,7 +162,7 @@ const SiderMenuDrawer = memo(({ trigger }: { trigger: React.ReactNode }) => {
 
       <Drawer
         closable={false}
-        destroyOnClose
+        destroyOnHidden
         open={siderOpen}
         placement="left"
         styles={{
diff --git a/ui/src/pages/workflows/WorkflowDetail.tsx b/ui/src/pages/workflows/WorkflowDetail.tsx
index 620660c9..832269d0 100644
--- a/ui/src/pages/workflows/WorkflowDetail.tsx
+++ b/ui/src/pages/workflows/WorkflowDetail.tsx
@@ -374,7 +374,7 @@ const WorkflowBaseInfoModal = ({ trigger }: { trigger?: React.ReactNode }) => {
         disabled={formPending}
         layout="vertical"
         form={formInst}
-        modalProps={{ destroyOnClose: true }}
+        modalProps={{ destroyOnHidden: true }}
         okText={t("common.button.save")}
         title={t(`workflow.detail.baseinfo.modal.title`)}
         trigger={trigger}
diff --git a/ui/src/pages/workflows/WorkflowNew.tsx b/ui/src/pages/workflows/WorkflowNew.tsx
index 68c5d96d..5f6af27b 100644
--- a/ui/src/pages/workflows/WorkflowNew.tsx
+++ b/ui/src/pages/workflows/WorkflowNew.tsx
@@ -165,7 +165,7 @@ const WorkflowNew = () => {
           disabled={formPending}
           layout="vertical"
           form={formInst}
-          modalProps={{ destroyOnClose: true }}
+          modalProps={{ destroyOnHidden: true }}
           okText={t("common.button.submit")}
           open={formModalOpen}
           title={t(`workflow.new.modal.title`)}