feat: separate access providers and dns providers

ui/src/components/provider/ApplyDNSProviderPicker.tsx

@@ -0,0 +1,67 @@
+import { memo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Avatar, Card, Col, Empty, Flex, Input, Row, Typography } from "antd";
+
+import Show from "@/components/Show";
+import { applyDNSProvidersMap } from "@/domain/provider";
+
+export type ApplyDNSProviderPickerProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  placeholder?: string;
+  onSelect?: (value: string) => void;
+};
+
+const ApplyDNSProviderPicker = ({ className, style, placeholder, onSelect }: ApplyDNSProviderPickerProps) => {
+  const { t } = useTranslation();
+
+  const [keyword, setKeyword] = useState<string>();
+
+  const providers = Array.from(applyDNSProvidersMap.values());
+  const filteredProviders = providers.filter((provider) => {
+    if (keyword) {
+      const value = keyword.toLowerCase();
+      return provider.type.toLowerCase().includes(value) || provider.name.toLowerCase().includes(value);
+    }
+
+    return true;
+  });
+
+  const handleProviderTypeSelect = (value: string) => {
+    onSelect?.(value);
+  };
+
+  return (
+    <div className={className} style={style}>
+      <Input.Search placeholder={placeholder} onChange={(e) => setKeyword(e.target.value.trim())} />
+
+      <div className="mt-4">
+        <Show when={filteredProviders.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
+          <Row gutter={[16, 16]}>
+            {filteredProviders.map((provider, index) => {
+              return (
+                <Col key={index} span={12}>
+                  <Card
+                    className="h-16 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" />
+                      <Typography.Text className="line-clamp-2">{t(provider.name)}</Typography.Text>
+                    </Flex>
+                  </Card>
+                </Col>
+              );
+            })}
+          </Row>
+        </Show>
+      </div>
+    </div>
+  );
+};
+
+export default memo(ApplyDNSProviderPicker);

ui/src/components/provider/ApplyDNSProviderSelect.tsx

@@ -0,0 +1,51 @@
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+import { Avatar, Select, type SelectProps, Space, Typography } from "antd";
+
+import { applyDNSProvidersMap } from "@/domain/provider";
+
+export type ApplyDNSProviderSelectProps = Omit<
+  SelectProps,
+  "filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
+>;
+
+const ApplyDNSProviderSelect = (props: ApplyDNSProviderSelectProps) => {
+  const { t } = useTranslation();
+
+  const options = Array.from(applyDNSProvidersMap.values()).map((item) => ({
+    key: item.type,
+    value: item.type,
+    label: t(item.name),
+  }));
+
+  const renderOption = (key: string) => {
+    const provider = applyDNSProvidersMap.get(key);
+    return (
+      <Space className="max-w-full grow overflow-hidden truncate" size={4}>
+        <Avatar src={provider?.icon} size="small" />
+        <Typography.Text className="leading-loose" ellipsis>
+          {t(provider?.name ?? "")}
+        </Typography.Text>
+      </Space>
+    );
+  };
+
+  return (
+    <Select
+      {...props}
+      labelRender={({ label, value }) => {
+        if (label) {
+          return renderOption(value as string);
+        }
+
+        return <Typography.Text type="secondary">{props.placeholder}</Typography.Text>;
+      }}
+      options={options}
+      optionFilterProp={undefined}
+      optionLabelProp={undefined}
+      optionRender={(option) => renderOption(option.data.value)}
+    />
+  );
+};
+
+export default memo(ApplyDNSProviderSelect);

ui/src/components/provider/DeployProviderPicker.tsx

@@ -8,10 +8,11 @@ import { deployProvidersMap } from "@/domain/provider";
 export type DeployProviderPickerProps = {
   className?: string;
   style?: React.CSSProperties;
+  placeholder?: string;
   onSelect?: (value: string) => void;
 };
 
-const DeployProviderPicker = ({ className, style, onSelect }: DeployProviderPickerProps) => {
+const DeployProviderPicker = ({ className, style, placeholder, onSelect }: DeployProviderPickerProps) => {
   const { t } = useTranslation();
 
   const [keyword, setKeyword] = useState<string>();
@@ -32,7 +33,7 @@ const DeployProviderPicker = ({ className, style, onSelect }: DeployProviderPick
 
   return (
     <div className={className} style={style}>
-      <Input.Search placeholder={t("workflow_node.deploy.search.provider.placeholder")} onChange={(e) => setKeyword(e.target.value.trim())} />
+      <Input.Search placeholder={placeholder} onChange={(e) => setKeyword(e.target.value.trim())} />
 
       <div className="mt-4">
         <Show when={filteredProviders.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>

ui/src/components/workflow/node/ApplyNode.tsx

@@ -21,7 +21,6 @@ const ApplyNode = ({ node, disabled }: ApplyNodeProps) => {
 
   const { t } = useTranslation();
 
-  const { accesses } = useAccessesStore(useZustandShallowSelector("accesses"));
   const { addEmail } = useContactEmailsStore(useZustandShallowSelector(["addEmail"]));
   const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
 
@@ -58,7 +57,6 @@ const ApplyNode = ({ node, disabled }: ApplyNodeProps) => {
       const newNode = produce(node, (draft) => {
         draft.config = {
           ...newValues,
-          provider: accesses.find((e) => e.id === newValues.providerAccessId)?.provider,
         };
         draft.validated = true;
       });

ui/src/components/workflow/node/ApplyNodeConfigForm.tsx

@@ -10,9 +10,11 @@ import ModalForm from "@/components/ModalForm";
 import MultipleInput from "@/components/MultipleInput";
 import AccessEditModal from "@/components/access/AccessEditModal";
 import AccessSelect from "@/components/access/AccessSelect";
-import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
+import ApplyDNSProviderSelect from "@/components/provider/ApplyDNSProviderSelect";
+import { ACCESS_USAGES, accessProvidersMap, applyDNSProvidersMap } from "@/domain/provider";
 import { type WorkflowNodeConfigForApply } from "@/domain/workflow";
-import { useAntdForm } from "@/hooks";
+import { useAntdForm, useZustandShallowSelector } from "@/hooks";
+import { useAccessesStore } from "@/stores/access";
 import { useContactEmailsStore } from "@/stores/contact";
 import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/validators";
 
@@ -46,6 +48,8 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
   ({ className, style, disabled, initialValues, onValuesChange }, ref) => {
     const { t } = useTranslation();
 
+    const { accesses } = useAccessesStore(useZustandShallowSelector("accesses"));
+
     const formSchema = z.object({
       domains: z.string({ message: t("workflow_node.apply.form.domains.placeholder") }).refine((v) => {
         return String(v)
@@ -53,6 +57,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
           .every((e) => validDomainName(e, { allowWildcard: true }));
       }, t("common.errmsg.domain_invalid")),
       contactEmail: z.string({ message: t("workflow_node.apply.form.contact_email.placeholder") }).email(t("common.errmsg.email_invalid")),
+      provider: z.string({ message: t("workflow_node.apply.form.provider.placeholder") }).nonempty(t("workflow_node.apply.form.provider.placeholder")),
       providerAccessId: z
         .string({ message: t("workflow_node.apply.form.provider_access.placeholder") })
         .min(1, t("workflow_node.apply.form.provider_access.placeholder")),
@@ -82,9 +87,34 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
       initialValues: initialValues ?? initFormModel(),
     });
 
+    const fieldProvider = Form.useWatch<string>("provider", { form: formInst, preserve: true });
+    const fieldProviderAccessId = Form.useWatch<string>("providerAccessId", formInst);
     const fieldDomains = Form.useWatch<string>("domains", formInst);
     const fieldNameservers = Form.useWatch<string>("nameservers", formInst);
 
+    const handleProviderSelect = (value: string) => {
+      if (fieldProvider === value) return;
+
+      if (initialValues?.provider === value) {
+        formInst.setFieldValue("providerAccessId", initialValues?.providerAccessId);
+        onValuesChange?.(formInst.getFieldsValue(true));
+      } else {
+        if (applyDNSProvidersMap.get(fieldProvider)?.provider !== applyDNSProvidersMap.get(value)?.provider) {
+          formInst.setFieldValue("providerAccessId", undefined);
+          onValuesChange?.(formInst.getFieldsValue(true));
+        }
+      }
+    };
+
+    const handleProviderAccessSelect = (value: string) => {
+      if (fieldProviderAccessId === value) return;
+
+      // DNS 提供商和授权提供商目前一一对应，因此切换授权时，自动切换到相应提供商
+      const access = accesses.find((access) => access.id === value);
+      formInst.setFieldValue("provider", Array.from(applyDNSProvidersMap.values()).find((provider) => provider.provider === access?.provider)?.type);
+      onValuesChange?.(formInst.getFieldsValue(true));
+    };
+
     const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
       onValuesChange?.(values as ApplyNodeConfigFormFieldValues);
     };
@@ -136,6 +166,16 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
           <EmailInput placeholder={t("workflow_node.apply.form.contact_email.placeholder")} />
         </Form.Item>
 
+        <Form.Item name="provider" label={t("workflow_node.apply.form.provider.label")} hidden rules={[formRule]}>
+          <ApplyDNSProviderSelect
+            allowClear
+            disabled
+            placeholder={t("workflow_node.apply.form.provider.placeholder")}
+            showSearch
+            onSelect={handleProviderSelect}
+          />
+        </Form.Item>
+
         <Form.Item className="mb-0">
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
@@ -173,6 +213,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
                 const provider = accessProvidersMap.get(record.provider);
                 return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
               }}
+              onChange={handleProviderAccessSelect}
             />
           </Form.Item>
         </Form.Item>

ui/src/components/workflow/node/DeployNodeConfigForm.tsx

@@ -216,7 +216,10 @@ const DeployNodeConfigForm = forwardRef<DeployNodeConfigFormInstance, DeployNode
     return (
       <Form.Provider onFormChange={handleFormProviderChange}>
         <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
-          <Show when={!!fieldProvider} fallback={<DeployProviderPicker onSelect={handleProviderPick} />}>
+          <Show
+            when={!!fieldProvider}
+            fallback={<DeployProviderPicker placeholder={t("workflow_node.deploy.search.provider.placeholder")} onSelect={handleProviderPick} />}
+          >
             <Form.Item name="provider" label={t("workflow_node.deploy.form.provider.label")} rules={[formRule]}>
               <DeployProviderSelect
                 allowClear