feat(ui): enhance providers select

2026-09-24 23:10:13 +08:00 · 2025-09-05 11:45:53 +08:00
parent 3d5f2f4bfc
commit 9139a45699
22 changed files with 385 additions and 275 deletions
@@ -56,7 +56,7 @@ const MultipleSplitValueInput = ({
    name: "componentMultipleSplitValueInput_" + nanoid(),
    initialValues: { value: value?.split(delimiter) },
    onSubmit: (values) => {
-      const temp = values.value ?? [];
+      const temp = (values.value ?? []) as string[];
      if (splitOptions.trimSpace) {
        temp.map((e) => e.trim());
      }
@@ -146,6 +146,7 @@ const AccessEditDrawer = ({ afterClose, afterSubmit, mode, data, loading, trigge
            gap="large"
            placeholder={t("access.form.provider.search.placeholder")}
            showOptionTags={usage == null || (usage === "dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
+            showSearch
            onFilter={providerFilter}
            onSelect={handleProviderPick}
          />
@@ -112,7 +112,7 @@ const AccessForm = ({ className, style, disabled, initialValues, mode, usage, ..
    reserve: z.string().nullish(),
  });
  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm({
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
    form: props.form,
    name: "accessForm",
    initialValues: initialValues,
@@ -7,7 +7,7 @@ import Show from "@/components/Show";
 import { ACCESS_USAGES, type AccessProvider, type AccessUsageType, accessProvidersMap } from "@/domain/provider";
 import { mergeCls } from "@/utils/css";

-import { type SharedPickerProps, usePickerWrapperCols } from "./_shared";
+import { type SharedPickerProps, usePickerDataSource, usePickerWrapperCols } from "./_shared";

 export interface AccessProviderPickerProps extends SharedPickerProps<AccessProvider> {
  showOptionTags?: boolean | { [key in AccessUsageType]?: boolean };
@@ -20,7 +20,7 @@ const AccessProviderPicker = ({
  gap = "middle",
  placeholder,
  showOptionTags,
-  showSearch = true,
+  showSearch = false,
  onFilter,
  onSelect,
 }: AccessProviderPickerProps) => {
@@ -52,24 +52,62 @@ const AccessProviderPicker = ({
    }
  });

-  const providers = useMemo(() => {
-    return Array.from(accessProvidersMap.values())
-      .filter((provider) => {
-        if (onFilter) {
-          return onFilter(provider.type, provider);
-        }
+  const dataSources = usePickerDataSource({
+    dataSource: Array.from(accessProvidersMap.values()),
+    filters: [onFilter!],
+    keyword: keyword,
+  });

-        return true;
-      })
-      .filter((provider) => {
-        if (keyword) {
-          const value = keyword.toLowerCase();
-          return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
-        }
+  const renderOption = (provider: AccessProvider) => {
+    return (
+      <div key={provider.type}>
+        <Card
+          className={mergeCls("w-full overflow-hidden shadow", provider.builtin ? " cursor-not-allowed" : "", showOptionTagAnyhow ? "h-32" : "h-28")}
+          styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
+          hoverable
+          onClick={() => {
+            if (provider.builtin) {
+              return;
+            }

-        return true;
-      });
-  }, [onFilter, keyword]);
+            handleProviderTypeSelect(provider.type);
+          }}
+        >
+          <div className="flex size-full flex-col items-center justify-center gap-3 overflow-hidden p-2">
+            <div className="flex items-center justify-center">
+              <Avatar className="bg-stone-100" icon={<img src={provider.icon} />} shape="square" size={32} />
+            </div>
+            <div className="w-full overflow-hidden text-center">
+              <div className={mergeCls("w-full truncate", { "mb-1": showOptionTagAnyhow })}>
+                <Tooltip title={t(provider.name)} mouseEnterDelay={1}>
+                  <Typography.Text type={provider.builtin ? "secondary" : void 0}>{t(provider.name) || "\u00A0"}</Typography.Text>
+                </Tooltip>
+              </div>
+              <Show when={showOptionTagAnyhow}>
+                <div className="origin-top scale-80 whitespace-nowrap" style={{ marginInlineEnd: "-8px" }}>
+                  <Show when={provider.builtin}>
+                    <Tag>{t("access.props.provider.builtin")}</Tag>
+                  </Show>
+                  <Show when={showOptionTagForDNS && provider.usages.includes(ACCESS_USAGES.DNS)}>
+                    <Tag color="#d93f0b99">{t("access.props.provider.usage.dns")}</Tag>
+                  </Show>
+                  <Show when={showOptionTagForHosting && provider.usages.includes(ACCESS_USAGES.HOSTING)}>
+                    <Tag color="#0052cc99">{t("access.props.provider.usage.hosting")}</Tag>
+                  </Show>
+                  <Show when={showOptionTagForCA && provider.usages.includes(ACCESS_USAGES.CA)}>
+                    <Tag color="#0e8a1699">{t("access.props.provider.usage.ca")}</Tag>
+                  </Show>
+                  <Show when={showOptionTagForNotification && provider.usages.includes(ACCESS_USAGES.NOTIFICATION)}>
+                    <Tag color="#1d76db99">{t("access.props.provider.usage.notification")}</Tag>
+                  </Show>
+                </div>
+              </Show>
+            </div>
+          </div>
+        </Card>
+      </div>
+    );
+  };

  const handleProviderTypeSelect = (value: string) => {
    onSelect?.(value);
@@ -83,7 +121,7 @@ const AccessProviderPicker = ({
        </div>
      </Show>

-      <Show when={providers.length > 0} fallback={<Empty description={t("provider.text.nodata")} image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
+      <Show when={dataSources.filtered.length > 0} fallback={<Empty description={t("provider.text.nodata")} image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
        <div
          className={mergeCls("grid w-full gap-2", `grid-cols-${cols}`, {
            "gap-4": gap === "large",
@@ -92,56 +130,7 @@ const AccessProviderPicker = ({
            [`gap-${+gap || "2"}`]: typeof gap === "number",
          })}
        >
-          {providers.map((provider) => {
-            return (
-              <div key={provider.type}>
-                <Card
-                  className={mergeCls("w-full overflow-hidden shadow", provider.builtin ? " cursor-not-allowed" : "", showOptionTagAnyhow ? "h-32" : "h-28")}
-                  styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
-                  hoverable
-                  onClick={() => {
-                    if (provider.builtin) {
-                      return;
-                    }
-
-                    handleProviderTypeSelect(provider.type);
-                  }}
-                >
-                  <div className="flex size-full flex-col items-center justify-center gap-3 overflow-hidden p-2">
-                    <div className="flex items-center justify-center">
-                      <Avatar className="bg-stone-100" icon={<img src={provider.icon} />} shape="square" size={32} />
-                    </div>
-                    <div className="w-full overflow-hidden text-center">
-                      <div className={mergeCls("w-full truncate", { "mb-1": showOptionTagAnyhow })}>
-                        <Tooltip title={t(provider.name)} mouseEnterDelay={1}>
-                          <Typography.Text type={provider.builtin ? "secondary" : void 0}>{t(provider.name) || "\u00A0"}</Typography.Text>
-                        </Tooltip>
-                      </div>
-                      <Show when={showOptionTagAnyhow}>
-                        <div className="origin-top scale-80 whitespace-nowrap" style={{ marginInlineEnd: "-8px" }}>
-                          <Show when={provider.builtin}>
-                            <Tag>{t("access.props.provider.builtin")}</Tag>
-                          </Show>
-                          <Show when={showOptionTagForDNS && provider.usages.includes(ACCESS_USAGES.DNS)}>
-                            <Tag color="#d93f0b99">{t("access.props.provider.usage.dns")}</Tag>
-                          </Show>
-                          <Show when={showOptionTagForHosting && provider.usages.includes(ACCESS_USAGES.HOSTING)}>
-                            <Tag color="#0052cc99">{t("access.props.provider.usage.hosting")}</Tag>
-                          </Show>
-                          <Show when={showOptionTagForCA && provider.usages.includes(ACCESS_USAGES.CA)}>
-                            <Tag color="#0e8a1699">{t("access.props.provider.usage.ca")}</Tag>
-                          </Show>
-                          <Show when={showOptionTagForNotification && provider.usages.includes(ACCESS_USAGES.NOTIFICATION)}>
-                            <Tag color="#1d76db99">{t("access.props.provider.usage.notification")}</Tag>
-                          </Show>
-                        </div>
-                      </Show>
-                    </div>
-                  </div>
-                </Card>
-              </div>
-            );
-          })}
+          {dataSources.filtered.map((provider) => renderOption(provider))}
        </div>
      </Show>
    </div>
@@ -10,7 +10,7 @@ import { mergeCls } from "@/utils/css";
 import { type SharedPickerProps, usePickerDataSource, usePickerWrapperCols } from "./_shared";

 export interface DeploymentProviderPickerProps extends SharedPickerProps<DeploymentProvider> {
-  showAvailable?: boolean;
+  showAvailability?: boolean;
 }

 const DeploymentProviderPicker = ({
@@ -19,8 +19,8 @@ const DeploymentProviderPicker = ({
  autoFocus,
  gap = "middle",
  placeholder,
-  showAvailable = true,
-  showSearch = true,
+  showAvailability = false,
+  showSearch = false,
  onFilter,
  onSelect,
 }: DeploymentProviderPickerProps) => {
@@ -41,7 +41,8 @@ const DeploymentProviderPicker = ({
  const dataSources = usePickerDataSource({
    dataSource: Array.from(deploymentProvidersMap.values()),
    filters: [
-      (provider) => {
+      onFilter!,
+      (_, provider) => {
        if (category && category !== DEPLOYMENT_CATEGORIES.ALL) {
          return provider.category === category;
        }
@@ -50,28 +51,29 @@ const DeploymentProviderPicker = ({
      },
    ],
    keyword: keyword,
-    onFilter: onFilter,
    deps: [category],
  });

-  const renderOption = (provider: DeploymentProvider) => {
+  const renderOption = (provider: DeploymentProvider, transparent: boolean = false) => {
    return (
      <div key={provider.type}>
        <Card
-          className="h-16 w-full overflow-hidden shadow"
+          className="group/provider h-16 w-full overflow-hidden shadow"
          styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
          hoverable
          onClick={() => {
            handleProviderTypeSelect(provider.type);
          }}
        >
-          <div className="flex size-full items-center gap-4 overflow-hidden">
-            <Avatar className="bg-stone-100" icon={<img src={provider.icon} />} shape="square" size={28} />
-            <div className="flex-1 overflow-hidden">
-              <div className="line-clamp-2 max-w-full">
-                <Tooltip title={t(provider.name)} mouseEnterDelay={1}>
-                  <Typography.Text>{t(provider.name) || "\u00A0"}</Typography.Text>
-                </Tooltip>
+          <div className={mergeCls("size-full", transparent ? "transition-opacity opacity-75 group-hover/provider:opacity-100" : void 0)}>
+            <div className="flex size-full items-center gap-4 overflow-hidden">
+              <Avatar className="bg-stone-100" icon={<img src={provider.icon} />} shape="square" size={28} />
+              <div className="flex-1 overflow-hidden">
+                <div className="line-clamp-2 max-w-full">
+                  <Tooltip title={t(provider.name)} mouseEnterDelay={1}>
+                    <Typography.Text>{t(provider.name) || "\u00A0"}</Typography.Text>
+                  </Tooltip>
+                </div>
              </div>
            </div>
          </div>
@@ -129,13 +131,13 @@ const DeploymentProviderPicker = ({
                [`gap-${+gap || "2"}`]: typeof gap === "number",
              })}
            >
-              {(showAvailable ? dataSources.available : dataSources.filtered).map((provider) => renderOption(provider))}
+              {(showAvailability ? dataSources.available : dataSources.filtered).map((provider) => renderOption(provider))}
            </div>

-            <Show when={showAvailable && dataSources.unavailable.length > 0}>
+            <Show when={showAvailability && dataSources.unavailable.length > 0}>
              <Divider size="small">
                <Typography.Text className="text-xs font-normal" type="secondary">
-                  {t("provider.text.unavailable_options")}
+                  {t("provider.text.unavailable_divider")}
                </Typography.Text>
              </Divider>

@@ -147,7 +149,7 @@ const DeploymentProviderPicker = ({
                  [`gap-${+gap || "2"}`]: typeof gap === "number",
                })}
              >
-                {dataSources.unavailable.map((provider) => renderOption(provider))}
+                {dataSources.unavailable.map((provider) => renderOption(provider, true))}
              </div>
            </Show>
          </Show>
@@ -1,34 +1,31 @@
-import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Avatar, Select, Typography, theme } from "antd";

 import { type DeploymentProvider, deploymentProvidersMap } from "@/domain/provider";

-import { type SharedSelectProps } from "./_shared";
+import { type SharedSelectProps, useSelectDataSource } from "./_shared";

-export interface DeploymentProviderSelectProps extends SharedSelectProps<DeploymentProvider> {}
+export interface DeploymentProviderSelectProps extends SharedSelectProps<DeploymentProvider> {
+  showAvailability?: boolean;
+}

-const DeploymentProviderSelect = ({ onFilter, ...props }: DeploymentProviderSelectProps) => {
+const DeploymentProviderSelect = ({ showAvailability = false, onFilter, ...props }: DeploymentProviderSelectProps) => {
  const { t } = useTranslation();

  const { token: themeToken } = theme.useToken();

-  const options = useMemo<Array<{ key: string; value: string; label: string; data: DeploymentProvider }>>(() => {
-    return Array.from(deploymentProvidersMap.values())
-      .filter((provider) => {
-        if (onFilter) {
-          return onFilter(provider.type, provider);
-        }
-
-        return true;
-      })
-      .map((provider) => ({
-        key: provider.type,
-        value: provider.type,
-        label: t(provider.name),
-        data: provider,
-      }));
-  }, [onFilter]);
+  const dataSources = useSelectDataSource({
+    dataSource: Array.from(deploymentProvidersMap.values()),
+    filters: [onFilter!],
+  });
+  const dataSource2Options = (providers: DeploymentProvider[]): Array<{ key: string; value: string; label: string; data: DeploymentProvider }> => {
+    return providers.map((provider) => ({
+      key: provider.type,
+      value: provider.type,
+      label: t(provider.name),
+      data: provider,
+    }));
+  };

  const renderOption = (key: string) => {
    const provider = deploymentProvidersMap.get(key);
@@ -45,9 +42,11 @@ const DeploymentProviderSelect = ({ onFilter, ...props }: DeploymentProviderSele
      {...props}
      filterOption={(inputValue, option) => {
        if (!option) return false;
+        if (!option.label) return false;
+        if (!option.value) return false;

        const value = inputValue.toLowerCase();
-        return option.value.toLowerCase().includes(value) || option.label.toLowerCase().includes(value);
+        return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
      }}
      labelRender={({ value }) => {
        if (value != null) {
@@ -56,10 +55,23 @@ const DeploymentProviderSelect = ({ onFilter, ...props }: DeploymentProviderSele

        return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
      }}
-      options={options}
+      options={
+        showAvailability
+          ? [
+              {
+                label: t("provider.text.available_group"),
+                options: dataSource2Options(dataSources.available),
+              },
+              {
+                label: t("provider.text.unavailable_group"),
+                options: dataSource2Options(dataSources.unavailable),
+              },
+            ]
+          : dataSource2Options(dataSources.filtered)
+      }
      optionFilterProp={void 0}
      optionLabelProp={void 0}
-      optionRender={(option) => renderOption(option.data.value)}
+      optionRender={(option) => renderOption(option.data.value as string)}
    />
  );
 };
@@ -10,7 +10,7 @@ import { mergeCls } from "@/utils/css";
 import { type SharedPickerProps, usePickerDataSource, usePickerWrapperCols } from "./_shared";

 export interface NotificationProviderPickerProps extends SharedPickerProps<NotificationProvider> {
-  showAvailable?: boolean;
+  showAvailability?: boolean;
 }

 const NotificationProviderPicker = ({
@@ -19,8 +19,8 @@ const NotificationProviderPicker = ({
  autoFocus,
  gap = "middle",
  placeholder,
-  showAvailable = true,
-  showSearch = true,
+  showAvailability = false,
+  showSearch = false,
  onFilter,
  onSelect,
 }: NotificationProviderPickerProps) => {
@@ -38,28 +38,30 @@ const NotificationProviderPicker = ({

  const dataSources = usePickerDataSource({
    dataSource: Array.from(notificationProvidersMap.values()),
+    filters: [onFilter!],
    keyword: keyword,
-    onFilter: onFilter,
  });

-  const renderOption = (provider: NotificationProvider) => {
+  const renderOption = (provider: NotificationProvider, transparent: boolean = false) => {
    return (
      <div key={provider.type}>
        <Card
-          className="h-16 w-full overflow-hidden shadow"
+          className="group/provider h-16 w-full overflow-hidden shadow"
          styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
          hoverable
          onClick={() => {
            handleProviderTypeSelect(provider.type);
          }}
        >
-          <div className="flex size-full items-center gap-4 overflow-hidden">
-            <Avatar className="bg-stone-100" icon={<img src={provider.icon} />} shape="square" size={28} />
-            <div className="flex-1 overflow-hidden">
-              <div className="line-clamp-2 max-w-full">
-                <Tooltip title={t(provider.name)} mouseEnterDelay={1}>
-                  <Typography.Text>{t(provider.name) || "\u00A0"}</Typography.Text>
-                </Tooltip>
+          <div className={mergeCls("size-full", transparent ? "transition-opacity opacity-75 group-hover/provider:opacity-100" : void 0)}>
+            <div className="flex size-full items-center gap-4 overflow-hidden">
+              <Avatar className="bg-stone-100" icon={<img src={provider.icon} />} shape="square" size={28} />
+              <div className="flex-1 overflow-hidden">
+                <div className="line-clamp-2 max-w-full">
+                  <Tooltip title={t(provider.name)} mouseEnterDelay={1}>
+                    <Typography.Text>{t(provider.name) || "\u00A0"}</Typography.Text>
+                  </Tooltip>
+                </div>
              </div>
            </div>
          </div>
@@ -89,13 +91,13 @@ const NotificationProviderPicker = ({
            [`gap-${+gap || "2"}`]: typeof gap === "number",
          })}
        >
-          {(showAvailable ? dataSources.available : dataSources.filtered).map((provider) => renderOption(provider))}
+          {(showAvailability ? dataSources.available : dataSources.filtered).map((provider) => renderOption(provider))}
        </div>

-        <Show when={showAvailable && dataSources.unavailable.length > 0}>
+        <Show when={showAvailability && dataSources.unavailable.length > 0}>
          <Divider size="small">
            <Typography.Text className="text-xs font-normal" type="secondary">
-              {t("provider.text.unavailable_options")}
+              {t("provider.text.unavailable_divider")}
            </Typography.Text>
          </Divider>

@@ -107,7 +109,7 @@ const NotificationProviderPicker = ({
              [`gap-${+gap || "2"}`]: typeof gap === "number",
            })}
          >
-            {dataSources.unavailable.map((provider) => renderOption(provider))}
+            {dataSources.unavailable.map((provider) => renderOption(provider, true))}
          </div>
        </Show>
      </Show>
@@ -1,34 +1,31 @@
-import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Avatar, Select, Typography, theme } from "antd";

 import { type NotificationProvider, notificationProvidersMap } from "@/domain/provider";

-import { type SharedSelectProps } from "./_shared";
+import { type SharedSelectProps, useSelectDataSource } from "./_shared";

-export interface NotificationProviderSelectProps extends SharedSelectProps<NotificationProvider> {}
+export interface NotificationProviderSelectProps extends SharedSelectProps<NotificationProvider> {
+  showAvailability?: boolean;
+}

-const NotificationProviderSelect = ({ onFilter, ...props }: NotificationProviderSelectProps) => {
+const NotificationProviderSelect = ({ showAvailability = false, onFilter, ...props }: NotificationProviderSelectProps) => {
  const { t } = useTranslation();

  const { token: themeToken } = theme.useToken();

-  const options = useMemo<Array<{ key: string; value: string; label: string; data: NotificationProvider }>>(() => {
-    return Array.from(notificationProvidersMap.values())
-      .filter((provider) => {
-        if (onFilter) {
-          return onFilter(provider.type, provider);
-        }
-
-        return true;
-      })
-      .map((provider) => ({
-        key: provider.type,
-        value: provider.type,
-        label: t(provider.name),
-        data: provider,
-      }));
-  }, [onFilter]);
+  const dataSources = useSelectDataSource({
+    dataSource: Array.from(notificationProvidersMap.values()),
+    filters: [onFilter!],
+  });
+  const dataSource2Options = (providers: NotificationProvider[]): Array<{ key: string; value: string; label: string; data: NotificationProvider }> => {
+    return providers.map((provider) => ({
+      key: provider.type,
+      value: provider.type,
+      label: t(provider.name),
+      data: provider,
+    }));
+  };

  const renderOption = (key: string) => {
    const provider = notificationProvidersMap.get(key);
@@ -45,9 +42,11 @@ const NotificationProviderSelect = ({ onFilter, ...props }: NotificationProvider
      {...props}
      filterOption={(inputValue, option) => {
        if (!option) return false;
+        if (!option.label) return false;
+        if (!option.value) return false;

        const value = inputValue.toLowerCase();
-        return option.value.toLowerCase().includes(value) || option.label.toLowerCase().includes(value);
+        return String(option.value).toLowerCase().includes(value) || String(option.label).toLowerCase().includes(value);
      }}
      labelRender={({ value }) => {
        if (value != null) {
@@ -56,10 +55,23 @@ const NotificationProviderSelect = ({ onFilter, ...props }: NotificationProvider

        return <span style={{ color: themeToken.colorTextPlaceholder }}>{props.placeholder}</span>;
      }}
-      options={options}
+      options={
+        showAvailability
+          ? [
+              {
+                label: t("provider.text.available_group"),
+                options: dataSource2Options(dataSources.available),
+              },
+              {
+                label: t("provider.text.unavailable_group"),
+                options: dataSource2Options(dataSources.unavailable),
+              },
+            ]
+          : dataSource2Options(dataSources.filtered)
+      }
      optionFilterProp={void 0}
      optionLabelProp={void 0}
-      optionRender={(option) => renderOption(option.data.value)}
+      optionRender={(option) => renderOption(option.data.value as string)}
    />
  );
 };
@@ -16,81 +16,30 @@ export interface SharedSelectProps<T extends Provider>
  onFilter?: (value: string, option: T) => boolean;
 }

-export interface SharedPickerProps<T extends Provider> {
-  className?: string;
-  style?: React.CSSProperties;
-  autoFocus?: boolean;
-  gap?: number | "small" | "middle" | "large";
-  placeholder?: string;
-  showSearch?: boolean;
-  onFilter?: (value: string, option: T) => boolean;
-  onSelect?: (value: string) => void;
-}
-
-export const usePickerWrapperCols = (width: number) => {
-  const wrapperElRef = useRef<HTMLDivElement>(null);
-  const wrapperSize = useSize(wrapperElRef);
-
-  const cols = useMemo(() => {
-    if (!wrapperSize) {
-      return 1;
-    }
-
-    const cols = Math.floor(wrapperSize.width / width);
-    return Math.min(9, Math.max(1, cols));
-  }, [wrapperSize, width]);
-
-  return {
-    wrapperElRef,
-    cols,
-  };
-};
-
-export const usePickerDataSource = <T extends Provider>({
+export const useSelectDataSource = <T extends Provider>({
  dataSource,
  filters,
-  keyword,
-  onFilter,
  deps,
 }: {
  dataSource: T[];
-  filters?: Array<(option: T) => boolean>;
-  keyword?: string;
-  onFilter?: (value: string, option: T) => boolean;
+  filters?: Array<(value: string, option: T) => boolean>;
  deps?: React.DependencyList;
 }) => {
-  const { t } = useTranslation();
-
  const { accesses, fetchAccesses } = useAccessesStore(useZustandShallowSelector(["accesses", "fetchAccesses"]));
  useMount(() => fetchAccesses(false));

  const filteredDataSource = useMemo(() => {
-    return dataSource
-      .filter((provider) => {
-        if (onFilter) {
-          return onFilter(provider.type, provider);
+    return dataSource.filter((provider) => {
+      if (filters) {
+        for (const filter of filters) {
+          if (!filter) continue;
+          if (!filter(provider.type, provider)) return false;
        }
+      }

-        return true;
-      })
-      .filter((provider) => {
-        if (filters) {
-          for (const filter of filters) {
-            if (!filter(provider)) return false;
-          }
-        }
-
-        return true;
-      })
-      .filter((provider) => {
-        if (keyword) {
-          const value = keyword.toLowerCase();
-          return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
-        }
-
-        return true;
-      });
-  }, [dataSource, filters, keyword, onFilter, ...(deps ?? [])]);
+      return true;
+    });
+  }, [dataSource, filters, ...(deps ?? [])]);

  const availableDataSource = useMemo(() => {
    return filteredDataSource.filter((provider) => {
@@ -107,7 +56,94 @@ export const usePickerDataSource = <T extends Provider>({
  }, [filteredDataSource, availableDataSource, ...(deps ?? [])]);

  return {
-    all: dataSource,
+    raw: dataSource,
+    filtered: filteredDataSource,
+    available: availableDataSource,
+    unavailable: unavailableDataSource,
+  };
+};
+
+export interface SharedPickerProps<T extends Provider> {
+  className?: string;
+  style?: React.CSSProperties;
+  autoFocus?: boolean;
+  gap?: number | "small" | "middle" | "large";
+  placeholder?: string;
+  showSearch?: boolean;
+  onFilter?: (value: string, option: T) => boolean;
+  onSelect?: (value: string) => void;
+}
+
+export const usePickerWrapperCols = (width: number) => {
+  const wrapperElRef = useRef<HTMLDivElement>(null);
+  const wrapperSize = useSize(wrapperElRef);
+
+  const columns = useMemo(() => {
+    const wWidth = wrapperSize?.width ?? document.body.clientWidth - 256;
+    const wCols = Math.floor(wWidth / width);
+    return Math.min(9, Math.max(1, wCols));
+  }, [wrapperSize, width]);
+
+  return {
+    wrapperElRef,
+    cols: columns,
+  };
+};
+
+export const usePickerDataSource = <T extends Provider>({
+  dataSource,
+  filters,
+  keyword,
+  deps,
+}: {
+  dataSource: T[];
+  filters?: Array<(value: string, option: T) => boolean>;
+  keyword?: string;
+  deps?: React.DependencyList;
+}) => {
+  const { t } = useTranslation();
+
+  const { accesses, fetchAccesses } = useAccessesStore(useZustandShallowSelector(["accesses", "fetchAccesses"]));
+  useMount(() => fetchAccesses(false));
+
+  const filteredDataSource = useMemo(() => {
+    return dataSource
+      .filter((provider) => {
+        if (filters) {
+          for (const filter of filters) {
+            if (!filter) continue;
+            if (!filter(provider.type, provider)) return false;
+          }
+        }
+
+        return true;
+      })
+      .filter((provider) => {
+        if (keyword) {
+          const value = keyword.toLowerCase();
+          return provider.type.toLowerCase().includes(value) || t(provider.name).toLowerCase().includes(value);
+        }
+
+        return true;
+      });
+  }, [dataSource, filters, keyword, ...(deps ?? [])]);
+
+  const availableDataSource = useMemo(() => {
+    return filteredDataSource.filter((provider) => {
+      return accesses.some((access) => {
+        if ("builtin" in provider && provider.builtin) return true;
+        if ("provider" in provider) return access.provider === provider.provider;
+        return access.provider === provider.type;
+      });
+    });
+  }, [accesses, filteredDataSource, ...(deps ?? [])]);
+
+  const unavailableDataSource = useMemo(() => {
+    return filteredDataSource.filter((item) => !availableDataSource.includes(item));
+  }, [filteredDataSource, availableDataSource, ...(deps ?? [])]);
+
+  return {
+    raw: dataSource,
    filtered: filteredDataSource,
    available: availableDataSource,
    unavailable: unavailableDataSource,
@@ -4,7 +4,22 @@ import { Link } from "react-router";
 import { type FlowNodeEntity, getNodeForm } from "@flowgram.ai/fixed-layout-editor";
 import { IconChevronRight, IconCircleMinus, IconPlus } from "@tabler/icons-react";
 import { useControllableValue, useMount } from "ahooks";
-import { type AnchorProps, AutoComplete, Button, Divider, Flex, Form, type FormInstance, Input, InputNumber, Select, Space, Switch, Typography } from "antd";
+import {
+  type AnchorProps,
+  AutoComplete,
+  Button,
+  Divider,
+  Flex,
+  Form,
+  type FormInstance,
+  Input,
+  InputNumber,
+  Radio,
+  Select,
+  Space,
+  Switch,
+  Typography,
+} from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";

@@ -31,6 +46,9 @@ import { NodeType } from "../nodes/typings";

 const MULTIPLE_INPUT_SEPARATOR = ";";

+const CHALLENGE_TYPE_DNS01 = "dns-01";
+const CHALLENGE_TYPE_HTTP01 = "http-01";
+
 export interface BizApplyNodeConfigFormProps {
  form: FormInstance;
  node: FlowNodeEntity;
@@ -51,12 +69,13 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)

  const formSchema = getSchema({ i18n });
  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm({
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
    form: props.form,
    name: "workflowNodeBizApplyConfigForm",
    initialValues: initialValues ?? getInitialValues(),
  });

+  const fieldChallengeType = Form.useWatch<string>("challengeType", { form: formInst, preserve: true });
  const fieldProvider = Form.useWatch<string>("provider", { form: formInst, preserve: true });
  const fieldProviderAccessId = Form.useWatch<string>("providerAccessId", { form: formInst, preserve: true });
  const fieldCAProvider = Form.useWatch<string>("caProvider", { form: formInst, preserve: true });
@@ -112,6 +131,29 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)
    }
  }, [fieldCAProvider]);

+  const handleChallengeTypeChange = (value: string) => {
+    switch (value) {
+      case CHALLENGE_TYPE_DNS01:
+        {
+          formInst.setFieldValue("provider", void 0);
+          formInst.setFieldValue("providerAccessId", void 0);
+          formInst.setFieldValue("providerConfig", void 0);
+        }
+        break;
+
+      case CHALLENGE_TYPE_HTTP01:
+        {
+          formInst.setFieldValue("provider", void 0);
+          formInst.setFieldValue("providerAccessId", void 0);
+          formInst.setFieldValue("providerConfig", void 0);
+          formInst.setFieldValue("dnsPropagationWait", void 0);
+          formInst.setFieldValue("dnsPropagationTimeout", void 0);
+          formInst.setFieldValue("dnsTTL", void 0);
+        }
+        break;
+    }
+  };
+
  const handleProviderSelect = (value: string) => {
    if (fieldProvider === value) return;

@@ -136,7 +178,7 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)

  const handleCAProviderSelect = (value?: string | undefined) => {
    // 切换 CA 提供商时联动授权信息
-    if (value === "") {
+    if (value == null || value === "") {
      setTimeout(() => {
        formInst.setFieldValue("caProvider", void 0);
        formInst.setFieldValue("caProviderAccessId", void 0);
@@ -173,14 +215,11 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)
            <InternalEmailInput placeholder={t("workflow_node.apply.form.contact_email.placeholder")} />
          </Form.Item>

-          <Form.Item name="challengeType" label={t("workflow_node.apply.form.challenge_type.label")} rules={[formRule]} hidden>
-            <Select
-              options={["DNS-01"].map((e) => ({
-                label: e,
-                value: e.toLowerCase(),
-              }))}
-              placeholder={t("workflow_node.apply.form.challenge_type.placeholder")}
-            />
+          <Form.Item name="challengeType" label={t("workflow_node.apply.form.challenge_type.label")} rules={[formRule]}>
+            <Radio.Group block onChange={(e) => handleChallengeTypeChange(e.target.value)}>
+              <Radio.Button value={CHALLENGE_TYPE_DNS01}>DNS-01</Radio.Button>
+              <Radio.Button value={CHALLENGE_TYPE_HTTP01}>HTTP-01</Radio.Button>
+            </Radio.Group>
          </Form.Item>

          <Form.Item name="provider" label={t("workflow_node.apply.form.provider.label")} hidden={!showProvider} rules={[formRule]}>
@@ -367,6 +406,7 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)

          <Form.Item
            name="dnsPropagationWait"
+            hidden={fieldChallengeType !== CHALLENGE_TYPE_DNS01}
            label={t("workflow_node.apply.form.dns_propagation_wait.label")}
            rules={[formRule]}
            tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.apply.form.dns_propagation_wait.tooltip") }}></span>}
@@ -383,6 +423,7 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)

          <Form.Item
            name="dnsPropagationTimeout"
+            hidden={fieldChallengeType !== CHALLENGE_TYPE_DNS01}
            label={t("workflow_node.apply.form.dns_propagation_timeout.label")}
            rules={[formRule]}
            tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.apply.form.dns_propagation_timeout.tooltip") }}></span>}
@@ -399,6 +440,7 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)

          <Form.Item
            name="dnsTTL"
+            hidden={fieldChallengeType !== CHALLENGE_TYPE_DNS01}
            label={t("workflow_node.apply.form.dns_ttl.label")}
            extra={t("workflow_node.apply.form.dns_ttl.help")}
            rules={[formRule]}
@@ -644,7 +686,7 @@ const getSchema = ({ i18n = getI18n() }: { i18n?: ReturnType<typeof getI18n> })
          .every((e) => validDomainName(e, { allowWildcard: true }));
      }, t("common.errmsg.domain_invalid")),
      contactEmail: z.email(t("common.errmsg.email_invalid")),
-      challengeType: z.string().nullish(),
+      challengeType: z.string().nonempty(t("workflow_node.apply.form.challenge_type.placeholder")),
      provider: z.string(t("workflow_node.apply.form.provider.placeholder")).nonempty(t("workflow_node.apply.form.provider.placeholder")),
      providerAccessId: z.string(t("workflow_node.apply.form.provider_access.placeholder")).nonempty(t("workflow_node.apply.form.provider_access.placeholder")),
      providerConfig: z.any().nullish(),
@@ -150,7 +150,7 @@ const BizDeployNodeConfigForm = ({ node, ...props }: BizDeployNodeConfigFormProp
    }
  });
  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm({
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
    form: props.form,
    name: "workflowNodeBizDeployConfigForm",
    initialValues: initialValues ?? getInitialValues(),
@@ -504,16 +504,53 @@ const BizDeployNodeConfigForm = ({ node, ...props }: BizDeployNodeConfigFormProp
    <NodeFormContextProvider value={{ node }}>
      <Form {...formProps} clearOnDestroy={true} form={formInst} layout="vertical" preserve={false} scrollToFirstError>
        <Show when={!fieldProvider}>
-          <DeploymentProviderPicker autoFocus placeholder={t("workflow_node.deploy.form.provider.search.placeholder")} onSelect={handleProviderPick} />
+          <DeploymentProviderPicker
+            autoFocus
+            placeholder={t("workflow_node.deploy.form.provider.search.placeholder")}
+            showAvailability
+            showSearch
+            onSelect={handleProviderPick}
+          />
        </Show>

        <div style={{ display: fieldProvider ? "block" : "none" }}>
          <div id="parameters" data-anchor="parameters">
+            <Form.Item
+              name="certificateOutputNodeId"
+              label={t("workflow_node.deploy.form.certificate_output_node_id.label")}
+              extra={t("workflow_node.deploy.form.certificate_output_node_id.help")}
+              rules={[formRule]}
+            >
+              <Select
+                optionRender={({ label, value }) => {
+                  return (
+                    <div className="flex items-center justify-between gap-4 overflow-hidden">
+                      <div className="flex-1 truncate">{label}</div>
+                      <div className="origin-right scale-90 font-mono text-xs" style={{ color: themeToken.colorTextSecondary }}>
+                        (NodeID: {value})
+                      </div>
+                    </div>
+                  );
+                }}
+                options={certificateOutputNodeIdOptions}
+                placeholder={t("workflow_node.deploy.form.certificate_output_node_id.placeholder")}
+              />
+            </Form.Item>
+          </div>
+
+          <div id="deployment" data-anchor="deployment">
+            <Divider size="small">
+              <Typography.Text className="text-xs font-normal" type="secondary">
+                {t("workflow_node.deploy.form_anchor.deployment.title")}
+              </Typography.Text>
+            </Divider>
+
            <Form.Item name="provider" label={t("workflow_node.deploy.form.provider.label")} rules={[formRule]}>
              <DeploymentProviderSelect
                allowClear
                disabled={!!initialValues?.provider}
                placeholder={t("workflow_node.deploy.form.provider.placeholder")}
+                showAvailability
                showSearch
                onSelect={handleProviderSelect}
                onClear={handleProviderSelect}
@@ -550,42 +587,8 @@ const BizDeployNodeConfigForm = ({ node, ...props }: BizDeployNodeConfigFormProp
              </Form.Item>
            </Form.Item>

-            <Form.Item
-              name="certificateOutputNodeId"
-              label={t("workflow_node.deploy.form.certificate_output_node_id.label")}
-              extra={t("workflow_node.deploy.form.certificate_output_node_id.help")}
-              rules={[formRule]}
-            >
-              <Select
-                optionRender={({ label, value }) => {
-                  return (
-                    <div className="flex items-center justify-between gap-4 overflow-hidden">
-                      <div className="flex-1 truncate">{label}</div>
-                      <div className="origin-right scale-90 font-mono text-xs" style={{ color: themeToken.colorTextSecondary }}>
-                        (NodeID: {value})
-                      </div>
-                    </div>
-                  );
-                }}
-                options={certificateOutputNodeIdOptions}
-                placeholder={t("workflow_node.deploy.form.certificate_output_node_id.placeholder")}
-              />
-            </Form.Item>
-          </div>
-
-          <div id="deployment" data-anchor="deployment">
            <FormNestedFieldsContextProvider value={{ parentNamePath: "providerConfig" }}>
-              {NestedProviderConfigFields && (
-                <>
-                  <Divider size="small">
-                    <Typography.Text className="text-xs font-normal" type="secondary">
-                      {t("workflow_node.deploy.form_anchor.deployment.title")}
-                    </Typography.Text>
-                  </Divider>
-
-                  <NestedProviderConfigFields />
-                </>
-              )}
+              {NestedProviderConfigFields && <NestedProviderConfigFields />}
            </FormNestedFieldsContextProvider>
          </div>

@@ -31,7 +31,7 @@ const BizMonitorNodeConfigForm = ({ node, ...props }: BizMonitorNodeConfigFormPr

  const formSchema = getSchema({ i18n });
  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm({
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
    form: props.form,
    name: "workflowNodeBizMonitorConfigForm",
    initialValues: initialValues ?? getInitialValues(),
@@ -50,7 +50,7 @@ const BizNotifyNodeConfigForm = ({ node, ...props }: BizNotifyNodeConfigFormProp

  const formSchema = getSchema({ i18n });
  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm({
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
    form: props.form,
    name: "workflowNodeBizNotifyNodeConfigForm",
    initialValues: initialValues ?? getInitialValues(),
@@ -121,7 +121,13 @@ const BizNotifyNodeConfigForm = ({ node, ...props }: BizNotifyNodeConfigFormProp
    <NodeFormContextProvider value={{ node }}>
      <Form {...formProps} clearOnDestroy={true} form={formInst} layout="vertical" preserve={false} scrollToFirstError>
        <Show when={!fieldProvider}>
-          <NotificationProviderPicker autoFocus placeholder={t("workflow_node.notify.form.provider.search.placeholder")} onSelect={handleProviderPick} />
+          <NotificationProviderPicker
+            autoFocus
+            placeholder={t("workflow_node.notify.form.provider.search.placeholder")}
+            showAvailability
+            showSearch
+            onSelect={handleProviderPick}
+          />
        </Show>

        <div style={{ display: fieldProvider ? "block" : "none" }}>
@@ -147,6 +153,7 @@ const BizNotifyNodeConfigForm = ({ node, ...props }: BizNotifyNodeConfigFormProp
                allowClear
                disabled={!!initialValues?.provider}
                placeholder={t("workflow_node.notify.form.provider.placeholder")}
+                showAvailability
                showSearch
                onSelect={handleProviderSelect}
                onClear={handleProviderSelect}
@@ -32,7 +32,7 @@ const BizUploadNodeConfigForm = ({ node, ...props }: BizUploadNodeConfigFormProp

  const formSchema = getSchema({ i18n });
  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm({
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
    form: props.form,
    name: "workflowNodeBizUploadConfigForm",
    initialValues: initialValues ?? getInitialValues(),
@@ -54,7 +54,7 @@ const BranchBlockNodeConfigForm = ({ node, ...props }: BranchBlockNodeConfigForm
    }
  });
  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm({
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
    form: props.form,
    name: "workflowNodeBranchBlockConfigForm",
    initialValues: initialValues ?? getInitialValues(),
@@ -29,7 +29,7 @@ const DelayNodeConfigForm = ({ node, ...props }: DelayNodeConfigFormProps) => {

  const formSchema = getSchema({ i18n });
  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm({
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
    form: props.form,
    name: "workflowNodeDelayConfigForm",
    initialValues: initialValues ?? getInitialValues(),
@@ -34,7 +34,7 @@ const StartNodeConfigForm = ({ node, ...props }: StartNodeConfigFormProps) => {

  const formSchema = getSchema({ i18n });
  const formRule = createSchemaFieldRule(formSchema);
-  const { form: formInst, formProps } = useAntdForm({
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
    form: props.form,
    name: "workflowNodeStartConfigForm",
    initialValues: initialValues ?? getInitialValues(),
@@ -114,7 +114,6 @@ export type WorkflowNodeConfigForBizApply = {

 export const defaultNodeConfigForBizApply = (): Partial<WorkflowNodeConfigForBizApply> => {
  return {
-    challengeType: "dns-01",
    keyAlgorithm: "RSA2048",
    skipBeforeExpiryDays: 30,
  };
@@ -6,7 +6,7 @@ import useAntdFormName from "./useAntdFormName";

 export interface UseAntdFormOptions<T extends NonNullable<unknown> = any> {
  form?: FormInstance<T>;
-  initialValues?: Partial<T> | (() => Partial<T> | Promise<Partial<T>>);
+  initialValues?: Partial<T | any> | (() => Partial<T | any> | Promise<Partial<T | any>>);
  name?: string;
  onSubmit?: (values: T) => unknown | Promise<unknown>;
 }
@@ -196,5 +196,7 @@

  "provider.text.nodata": "No providers available",
  "provider.text.default_ca_provider": "(Default) Follow global settings",
-  "provider.text.unavailable_options": "The following providers are not available (without added credentials)"
+  "provider.text.available_group": "Available (with added credentials)",
+  "provider.text.unavailable_group": "Unavailable (without added credentials)",
+  "provider.text.unavailable_divider": "The following providers are not available (without added credentials)"
 }
@@ -196,5 +196,7 @@

  "provider.text.nodata": "暂无提供商",
  "provider.text.default_ca_provider": "（默认）不指定，跟随全局设置",
-  "provider.text.unavailable_options": "以下提供商不可用（即未添加过授权凭据）"
+  "provider.text.available_group": "可用（已添加授权凭据）",
+  "provider.text.unavailable_group": "不可用（未添加授权凭据）",
+  "provider.text.unavailable_divider": "以下提供商不可用（即未添加过授权凭据）"
 }
@@ -76,6 +76,7 @@ const AccessNew = () => {
            gap="large"
            placeholder={t("access.form.provider.search.placeholder")}
            showOptionTags={providerUsage == null || (providerUsage === "dns-hosting" ? { [ACCESS_USAGES.DNS]: true, [ACCESS_USAGES.HOSTING]: true } : false)}
+            showSearch
            onFilter={providerFilter}
            onSelect={handleProviderPick}
          />