From 7b67935768283a6bc3500a5e5d1176b43bfdd346 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Thu, 18 Dec 2025 16:20:36 +0800
Subject: [PATCH] refactor(ui): clean code

---
 ui/src/components/access/AccessSelect.tsx     | 15 +++++++------
 .../forms/AccessConfigFieldsProviderAzure.tsx |  4 +++-
 .../AccessConfigFieldsProviderOVHcloud.tsx    |  4 +++-
 .../provider/ACMEDns01ProviderSelect.tsx      | 19 ++++++++--------
 .../provider/ACMEHttp01ProviderSelect.tsx     | 19 ++++++++--------
 .../provider/AccessProviderSelect.tsx         | 18 +++++++++------
 .../components/provider/CAProviderSelect.tsx  | 22 ++++++++++---------
 .../provider/DeploymentProviderSelect.tsx     | 19 ++++++++--------
 .../provider/NotificationProviderSelect.tsx   | 19 ++++++++--------
 ui/src/components/provider/_shared.ts         |  3 +--
 .../designer/forms/BizApplyNodeConfigForm.tsx |  6 +++--
 11 files changed, 82 insertions(+), 66 deletions(-)

diff --git a/ui/src/components/access/AccessSelect.tsx b/ui/src/components/access/AccessSelect.tsx
index ba9ed42f..0047be41 100644
--- a/ui/src/components/access/AccessSelect.tsx
+++ b/ui/src/components/access/AccessSelect.tsx
@@ -7,8 +7,7 @@ import { accessProvidersMap } from "@/domain/provider";
 import { useZustandShallowSelector } from "@/hooks";
 import { useAccessesStore } from "@/stores/access";
 
-export interface AccessTypeSelectProps
-  extends Omit<SelectProps, "filterOption" | "filterSort" | "labelRender" | "loading" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"> {
+export interface AccessTypeSelectProps extends Omit<SelectProps, "labelRender" | "loading" | "options" | "optionLabelProp" | "optionRender"> {
   onFilter?: (value: string, option: AccessModel) => boolean;
 }
 
@@ -56,11 +55,14 @@ const AccessSelect = ({ onFilter, ...props }: AccessTypeSelectProps) => {
   return (
     <Select
       {...props}
-      filterOption={(inputValue, option) => {
-        if (!option) return false;
+      showSearch={{
+        filterOption: (inputValue, option) => {
+          if (!option) return false;
 
-        const value = inputValue.toLowerCase();
-        return option.label.toLowerCase().includes(value);
+          const value = inputValue.toLowerCase();
+          return option.label.toLowerCase().includes(value);
+        },
+        optionFilterProp: "label",
       }}
       labelRender={({ value }) => {
         if (value != null) {
@@ -71,7 +73,6 @@ const AccessSelect = ({ onFilter, ...props }: AccessTypeSelectProps) => {
       }}
       loading={!loadedAtOnce}
       options={options}
-      optionFilterProp="label"
       optionLabelProp={void 0}
       optionRender={(option) => renderOption(option.data.value)}
     />
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderAzure.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderAzure.tsx
index 6020edf6..6ff35f8c 100644
--- a/ui/src/components/access/forms/AccessConfigFieldsProviderAzure.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderAzure.tsx
@@ -57,7 +57,9 @@ const AccessConfigFormFieldsProviderAzure = () => {
         <AutoComplete
           options={["public", "azureusgovernment", "azurechina"].map((value) => ({ value }))}
           placeholder={t("access.form.azure_cloud_name.placeholder")}
-          filterOption={(inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase())}
+          showSearch={{
+            filterOption: (inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase()),
+          }}
         />
       </Form.Item>
     </>
diff --git a/ui/src/components/access/forms/AccessConfigFieldsProviderOVHcloud.tsx b/ui/src/components/access/forms/AccessConfigFieldsProviderOVHcloud.tsx
index 546545e8..9d01b742 100644
--- a/ui/src/components/access/forms/AccessConfigFieldsProviderOVHcloud.tsx
+++ b/ui/src/components/access/forms/AccessConfigFieldsProviderOVHcloud.tsx
@@ -29,7 +29,9 @@ const AccessConfigFormFieldsProviderOVHcloud = () => {
         <AutoComplete
           options={["ovh-eu", "ovh-us", "ovh-ca"].map((value) => ({ value }))}
           placeholder={t("access.form.ovhcloud_endpoint.placeholder")}
-          filterOption={(inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase())}
+          showSearch={{
+            filterOption: (inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase()),
+          }}
         />
       </Form.Item>
 
diff --git a/ui/src/components/provider/ACMEDns01ProviderSelect.tsx b/ui/src/components/provider/ACMEDns01ProviderSelect.tsx
index 0f5179c3..cb869ac4 100644
--- a/ui/src/components/provider/ACMEDns01ProviderSelect.tsx
+++ b/ui/src/components/provider/ACMEDns01ProviderSelect.tsx
@@ -56,14 +56,6 @@ const ACMEDns01ProviderSelect = ({ showAvailability, onFilter, ...props }: ACMED
   return (
     <Select
       {...props}
-      filterOption={(inputValue, option) => {
-        if (!option) return false;
-        if (!option.label) return false;
-        if (!option.value) return false;
-
-        const value = inputValue.toLowerCase();
-        return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
-      }}
       labelRender={({ value }) => {
         if (value != null) {
           return renderOption(value as string);
@@ -72,9 +64,18 @@ const ACMEDns01ProviderSelect = ({ showAvailability, onFilter, ...props }: ACMED
         return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
       }}
       options={options}
-      optionFilterProp={void 0}
       optionLabelProp={void 0}
       optionRender={(option) => renderOption(option.data.value as string)}
+      showSearch={{
+        filterOption: (inputValue, option) => {
+          if (!option) return false;
+          if (!option.label) return false;
+          if (!option.value) return false;
+
+          const value = inputValue.toLowerCase();
+          return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
+        },
+      }}
     />
   );
 };
diff --git a/ui/src/components/provider/ACMEHttp01ProviderSelect.tsx b/ui/src/components/provider/ACMEHttp01ProviderSelect.tsx
index a91c8c5a..5d6bace4 100644
--- a/ui/src/components/provider/ACMEHttp01ProviderSelect.tsx
+++ b/ui/src/components/provider/ACMEHttp01ProviderSelect.tsx
@@ -56,14 +56,6 @@ const ACMEHttp01ProviderSelect = ({ showAvailability, onFilter, ...props }: ACME
   return (
     <Select
       {...props}
-      filterOption={(inputValue, option) => {
-        if (!option) return false;
-        if (!option.label) return false;
-        if (!option.value) return false;
-
-        const value = inputValue.toLowerCase();
-        return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
-      }}
       labelRender={({ value }) => {
         if (value != null) {
           return renderOption(value as string);
@@ -72,9 +64,18 @@ const ACMEHttp01ProviderSelect = ({ showAvailability, onFilter, ...props }: ACME
         return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
       }}
       options={options}
-      optionFilterProp={void 0}
       optionLabelProp={void 0}
       optionRender={(option) => renderOption(option.data.value as string)}
+      showSearch={{
+        filterOption: (inputValue, option) => {
+          if (!option) return false;
+          if (!option.label) return false;
+          if (!option.value) return false;
+
+          const value = inputValue.toLowerCase();
+          return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
+        },
+      }}
     />
   );
 };
diff --git a/ui/src/components/provider/AccessProviderSelect.tsx b/ui/src/components/provider/AccessProviderSelect.tsx
index 1bc23feb..1d7f1341 100644
--- a/ui/src/components/provider/AccessProviderSelect.tsx
+++ b/ui/src/components/provider/AccessProviderSelect.tsx
@@ -84,12 +84,6 @@ const AccessProviderSelect = ({ showOptionTags, onFilter, ...props }: AccessProv
   return (
     <Select
       {...props}
-      filterOption={(inputValue, option) => {
-        if (!option) return false;
-
-        const value = inputValue.toLowerCase();
-        return option.value.toLowerCase().includes(value) || option.label.toLowerCase().includes(value);
-      }}
       labelRender={({ value }) => {
         if (value != null) {
           return renderOption(value as string);
@@ -98,9 +92,19 @@ const AccessProviderSelect = ({ showOptionTags, onFilter, ...props }: AccessProv
         return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
       }}
       options={options}
-      optionFilterProp={void 0}
       optionLabelProp={void 0}
       optionRender={(option) => renderOption(option.data.value)}
+      showSearch={{
+        filterOption: (inputValue, option) => {
+          if (!option) return false;
+          if (!option.label) return false;
+          if (!option.value) return false;
+
+          const value = inputValue.toLowerCase();
+          return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
+        },
+        optionFilterProp: "label",
+      }}
     />
   );
 };
diff --git a/ui/src/components/provider/CAProviderSelect.tsx b/ui/src/components/provider/CAProviderSelect.tsx
index 7b4d078b..37c3c9f4 100644
--- a/ui/src/components/provider/CAProviderSelect.tsx
+++ b/ui/src/components/provider/CAProviderSelect.tsx
@@ -90,15 +90,6 @@ const CAProviderSelect = ({ showAvailability, showDefault, onFilter, ...props }:
   return (
     <Select
       {...props}
-      filterOption={(inputValue, option) => {
-        if (option?.value === "") return true;
-        if (!option) return false;
-        if (!option.label) return false;
-        if (!option.value) return false;
-
-        const value = inputValue.toLowerCase();
-        return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
-      }}
       labelRender={({ value }) => {
         if (value != null && value !== "") {
           return renderOption(value as string);
@@ -107,9 +98,20 @@ const CAProviderSelect = ({ showAvailability, showDefault, onFilter, ...props }:
         return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
       }}
       options={options}
-      optionFilterProp={void 0}
       optionLabelProp={void 0}
       optionRender={(option) => renderOption(option.data.value as string)}
+      showSearch={{
+        filterOption: (inputValue, option) => {
+          if (option?.value === "") return true; // 始终显示系统默认项
+
+          if (!option) return false;
+          if (!option.label) return false;
+          if (!option.value) return false;
+
+          const value = inputValue.toLowerCase();
+          return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
+        },
+      }}
       value={value}
       onChange={handleChange}
       onSelect={handleChange}
diff --git a/ui/src/components/provider/DeploymentProviderSelect.tsx b/ui/src/components/provider/DeploymentProviderSelect.tsx
index d3bea4aa..577dc7cb 100644
--- a/ui/src/components/provider/DeploymentProviderSelect.tsx
+++ b/ui/src/components/provider/DeploymentProviderSelect.tsx
@@ -56,14 +56,6 @@ const DeploymentProviderSelect = ({ showAvailability = false, onFilter, ...props
   return (
     <Select
       {...props}
-      filterOption={(inputValue, option) => {
-        if (!option) return false;
-        if (!option.label) return false;
-        if (!option.value) return false;
-
-        const value = inputValue.toLowerCase();
-        return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
-      }}
       labelRender={({ value }) => {
         if (value != null) {
           return renderOption(value as string);
@@ -72,9 +64,18 @@ const DeploymentProviderSelect = ({ showAvailability = false, onFilter, ...props
         return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
       }}
       options={options}
-      optionFilterProp={void 0}
       optionLabelProp={void 0}
       optionRender={(option) => renderOption(option.data.value as string)}
+      showSearch={{
+        filterOption: (inputValue, option) => {
+          if (!option) return false;
+          if (!option.label) return false;
+          if (!option.value) return false;
+
+          const value = inputValue.toLowerCase();
+          return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
+        },
+      }}
     />
   );
 };
diff --git a/ui/src/components/provider/NotificationProviderSelect.tsx b/ui/src/components/provider/NotificationProviderSelect.tsx
index 8a8a0c71..659382bb 100644
--- a/ui/src/components/provider/NotificationProviderSelect.tsx
+++ b/ui/src/components/provider/NotificationProviderSelect.tsx
@@ -56,14 +56,6 @@ const NotificationProviderSelect = ({ showAvailability = false, onFilter, ...pro
   return (
     <Select
       {...props}
-      filterOption={(inputValue, option) => {
-        if (!option) return false;
-        if (!option.label) return false;
-        if (!option.value) return false;
-
-        const value = inputValue.toLowerCase();
-        return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
-      }}
       labelRender={({ value }) => {
         if (value != null) {
           return renderOption(value as string);
@@ -72,9 +64,18 @@ const NotificationProviderSelect = ({ showAvailability = false, onFilter, ...pro
         return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
       }}
       options={options}
-      optionFilterProp={void 0}
       optionLabelProp={void 0}
       optionRender={(option) => renderOption(option.data.value as string)}
+      showSearch={{
+        filterOption: (inputValue, option) => {
+          if (!option) return false;
+          if (!option.label) return false;
+          if (!option.value) return false;
+
+          const value = inputValue.toLowerCase();
+          return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
+        },
+      }}
     />
   );
 };
diff --git a/ui/src/components/provider/_shared.ts b/ui/src/components/provider/_shared.ts
index f0e3b55c..da6ed8d5 100644
--- a/ui/src/components/provider/_shared.ts
+++ b/ui/src/components/provider/_shared.ts
@@ -9,8 +9,7 @@ import { useAccessesStore } from "@/stores/access";
 
 type Provider = { type: string; name: string };
 
-export interface SharedSelectProps<T extends Provider>
-  extends Omit<SelectProps, "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"> {
+export interface SharedSelectProps<T extends Provider> extends Omit<SelectProps, "labelRender" | "options" | "optionLabelProp" | "optionRender"> {
   className?: string;
   style?: React.CSSProperties;
   onFilter?: (value: string, option: T) => boolean;
diff --git a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx
index eacd68ae..755b9f3b 100644
--- a/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx
+++ b/ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx
@@ -11,12 +11,12 @@ import { z } from "zod";
 import { validatePrivateKey } from "@/api/certificates";
 import AccessEditDrawer from "@/components/access/AccessEditDrawer";
 import AccessSelect from "@/components/access/AccessSelect";
+import FileTextInput from "@/components/FileTextInput";
 import MultipleSplitValueInput from "@/components/MultipleSplitValueInput";
 import ACMEDns01ProviderSelect from "@/components/provider/ACMEDns01ProviderSelect";
 import ACMEHttp01ProviderSelect from "@/components/provider/ACMEHttp01ProviderSelect";
 import CAProviderSelect from "@/components/provider/CAProviderSelect";
 import Show from "@/components/Show";
-import FileTextInput from "@/components/FileTextInput";
 import { type AccessModel } from "@/domain/access";
 import { acmeDns01ProvidersMap, acmeHttp01ProvidersMap, caProvidersMap } from "@/domain/provider";
 import { type WorkflowNodeConfigForBizApply, defaultNodeConfigForBizApply } from "@/domain/workflow";
@@ -524,7 +524,9 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)
               allowClear
               options={["classic", "tlsserver", "shortlived"].map((s) => ({ value: s }))}
               placeholder={t("workflow_node.apply.form.acme_profile.placeholder")}
-              filterOption={(inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase())}
+              showSearch={{
+                filterOption: (inputValue, option) => option!.value.toLowerCase().includes(inputValue.toLowerCase()),
+              }}
             />
           </Form.Item>
         </div>