add access to deployment

2024-11-13 13:20:47 +08:00
parent fd04cec606
commit 52f40d982d
29 changed files with 1120 additions and 88 deletions
--- a/ui/src/components/workflow/AccessSelect.tsx
+++ b/ui/src/components/workflow/AccessSelect.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect } from "react";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../ui/select";
+import { accessProvidersMap } from "@/domain/access";
+import { useTranslation } from "react-i18next";
+import { useConfigContext } from "@/providers/config";
+import { deployTargetsMap } from "@/domain/domain";
+
+type AccessSelectProps = {
+  providerType: string;
+  value: string;
+  onValueChange: (val: string) => void;
+};
+const AccessSelect = ({ value, onValueChange, providerType }: AccessSelectProps) => {
+  const [localValue, setLocalValue] = React.useState<string>("");
+  const { t } = useTranslation();
+  const {
+    config: { accesses },
+  } = useConfigContext();
+
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  const targetAccesses = accesses.filter((item) => {
+    console.log(item, providerType);
+    return item.configType === deployTargetsMap.get(providerType)?.provider;
+  });
+
+  return (
+    <>
+      <Select
+        value={localValue}
+        onValueChange={(val: string) => {
+          setLocalValue(val);
+          onValueChange(val);
+        }}
+      >
+        <SelectTrigger className="mt-2">
+          <SelectValue placeholder={t("domain.deployment.form.access.placeholder")} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>{t("domain.deployment.form.access.list")}</SelectLabel>
+            {targetAccesses.map((item) => (
+              <SelectItem key={item.id} value={item.id}>
+                <div className="flex items-center space-x-2">
+                  <img className="w-6" src={accessProvidersMap.get(item.configType)?.icon} />
+                  <div>{item.name}</div>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </>
+  );
+};
+
+export default AccessSelect;
--- a/ui/src/components/workflow/DeployToAliyunALB.tsx
+++ b/ui/src/components/workflow/DeployToAliyunALB.tsx
@@ -14,6 +14,10 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { Button } from "../ui/button";

+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";
+
 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
@@ -35,6 +39,7 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
  const formSchema = z
    .object({
      providerType: z.string(),
+      access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
      certificate: z.string().min(1),
      region: z.string().min(1, t("domain.deployment.form.aliyun_alb_region.placeholder")),
      resourceType: z.union([z.literal("loadbalancer"), z.literal("listener")], {
@@ -54,18 +59,20 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "aliyun-alb",
+    providerType: "",
    region: "",
    resourceType: "",
    loadbalancerId: "",
    listenerId: "",
+    access: "",
  };
  if (data) config = data.config ?? config;

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "aliyun-alb",
+      access: config.access as string,
      certificate: config.certificate as string,
      region: config.region as string,
      resourceType: config.resourceType as "loadbalancer" | "listener",
@@ -91,6 +98,41 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="aliyun"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="aliyun-alb"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
@@ -110,18 +152,16 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
                    </SelectTrigger>
                    <SelectContent>
                      {beforeOutput.map((item) => (
-                        <>
-                          <SelectGroup key={item.id}>
-                            <SelectLabel>{item.name}</SelectLabel>
-                            {item.output?.map((output) => (
-                              <SelectItem key={output.name} value={`${item.id}#${output.name}`}>
-                                <div>
-                                  {item.name}-{output.label}
-                                </div>
-                              </SelectItem>
-                            ))}
-                          </SelectGroup>
-                        </>
+                        <SelectGroup key={item.id}>
+                          <SelectLabel>{item.name}</SelectLabel>
+                          {item.output?.map((output) => (
+                            <SelectItem key={output.name} value={`${item.id}#${output.name}`}>
+                              <div>
+                                {item.name}-{output.label}
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
                      ))}
                    </SelectContent>
                  </Select>
--- a/ui/src/components/workflow/DeployToAliyunCDN.tsx
+++ b/ui/src/components/workflow/DeployToAliyunCDN.tsx
@@ -15,6 +15,9 @@ import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -35,6 +38,7 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
      message: t("common.errmsg.domain_invalid"),
@@ -43,8 +47,8 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "aliyun-cdn",
-
+    providerType: "",
+    access: "",
    domain: "",
  };
  if (data) config = data.config ?? config;
@@ -52,7 +56,8 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "aliyun-cdn",
+      access: config.access as string,
      certificate: config.certificate as string,
      domain: config.domain as string,
    },
@@ -73,6 +78,41 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="aliyun"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="aliyun-cdn"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToAliyunCLB.tsx
+++ b/ui/src/components/workflow/DeployToAliyunCLB.tsx
@@ -14,6 +14,10 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
 import { Button } from "../ui/button";

+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";
+
 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
@@ -35,6 +39,7 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
  const formSchema = z
    .object({
      providerType: z.string(),
+      access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
      certificate: z.string().min(1),
      region: z.string().min(1, t("domain.deployment.form.aliyun_clb_region.placeholder")),
      resourceType: z.union([z.literal("certificate"), z.literal("loadbalancer"), z.literal("listener")], {
@@ -54,7 +59,8 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "aliyun-clb",
+    providerType: "",
+    access: "",
    region: "",
    resourceType: "",
    loadbalancerId: "",
@@ -65,7 +71,8 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "aliyun-clb",
+      access: config.access as string,
      certificate: config.certificate as string,
      region: config.region as string,
      resourceType: config.resourceType as "loadbalancer" | "listener",
@@ -91,6 +98,40 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="aliyun"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="aliyun-clb"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToAliyunNLB.tsx
+++ b/ui/src/components/workflow/DeployToAliyunNLB.tsx
@@ -28,13 +28,13 @@ const DeployToAliyunNLB = ({ data }: DeployFormProps) => {

  useEffect(() => {
    const rs = getWorkflowOuptutBeforeId(data.id, "certificate");
-    console.log(rs);
    setBeforeOutput(rs);
  }, [data]);

  const formSchema = z
    .object({
      providerType: z.string(),
+      access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
      certificate: z.string().min(1),
      region: z.string().min(1, t("domain.deployment.form.aliyun_nlb_region.placeholder")),
      resourceType: z.union([z.literal("loadbalancer"), z.literal("listener")], {
@@ -54,7 +54,8 @@ const DeployToAliyunNLB = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "aliyun-nlb",
+    providerType: "",
+    access: "",
    region: "",
    resourceType: "",
    loadbalancerId: "",
@@ -65,7 +66,7 @@ const DeployToAliyunNLB = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "aliyun-nlb",
      certificate: config.certificate as string,
      region: config.region as string,
      resourceType: config.resourceType as "loadbalancer" | "listener",
--- a/ui/src/components/workflow/DeployToAliyunOss.tsx
+++ b/ui/src/components/workflow/DeployToAliyunOss.tsx
@@ -16,6 +16,10 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";

+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";
+
 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
@@ -35,6 +39,7 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    endpoint: z.string().min(1, {
      message: t("domain.deployment.form.aliyun_oss_endpoint.placeholder"),
@@ -49,7 +54,8 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "aliyun-oss",
+    providerType: "",
+    access: "",
    endpoint: "",
    bucket: "",
    domain: "",
@@ -59,7 +65,8 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "aliyun-oss",
+      access: config.access as string,
      certificate: config.certificate as string,
      endpoint: config.endpoint as string,
      bucket: config.bucket as string,
@@ -82,6 +89,40 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="aliyun"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="aliyun-oss"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToBaiduCloudCDN.tsx
+++ b/ui/src/components/workflow/DeployToBaiduCloudCDN.tsx
@@ -15,6 +15,9 @@ import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -35,6 +38,7 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
      message: t("common.errmsg.domain_invalid"),
@@ -44,6 +48,7 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
  let config: WorkflowNodeConfig = {
    certificate: "",
    providerType: "baiducloud-cdn",
+    access: "",

    domain: "",
  };
@@ -52,7 +57,8 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "baiducloud-cdn",
+      access: config.access as string,
      certificate: config.certificate as string,
      domain: config.domain as string,
    },
@@ -73,6 +79,41 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="baiducloud"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="baiducloud-cdn"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToDogeCloudCDN.tsx
+++ b/ui/src/components/workflow/DeployToDogeCloudCDN.tsx
@@ -15,6 +15,9 @@ import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
+import AccessSelect from "./AccessSelect";
+import { Plus } from "lucide-react";
+import AccessEditDialog from "../certimate/AccessEditDialog";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -35,6 +38,7 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
      message: t("common.errmsg.domain_invalid"),
@@ -43,7 +47,8 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "dogecloud-cdn",
+    providerType: "",
+    access: "",

    domain: "",
  };
@@ -52,7 +57,8 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "dogecloud-cdn",
+      access: config.access as string,
      certificate: config.certificate as string,
      domain: config.domain as string,
    },
@@ -73,6 +79,40 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="dogecloud"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="dogecloud-cdn"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToHuaweiCloudCDN.tsx
+++ b/ui/src/components/workflow/DeployToHuaweiCloudCDN.tsx
@@ -16,6 +16,10 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";

+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";
+
 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
  getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId,
@@ -35,6 +39,7 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    region: z.string().min(1, {
      message: t("domain.deployment.form.huaweicloud_cdn_region.placeholder"),
@@ -46,7 +51,8 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "huaweicloud-cdn",
+    providerType: "",
+    access: "",
    region: "",
    domain: "",
  };
@@ -55,7 +61,8 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "huaweicloud-cdn",
+      access: config.access as string,
      certificate: config.certificate as string,
      region: config.region as string,
      domain: config.domain as string,
@@ -77,6 +84,41 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="huaweicloud"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="huaweicloud-cdn"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToHuaweiCloudELB.tsx
+++ b/ui/src/components/workflow/DeployToHuaweiCloudELB.tsx
@@ -15,6 +15,9 @@ import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";
+import AccessSelect from "./AccessSelect";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -41,6 +44,7 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
  const formSchema = z
    .object({
      providerType: z.string(),
+      access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
      certificate: z.string().min(1),
      region: z.string().min(1, t("domain.deployment.form.huaweicloud_elb_region.placeholder")),
      resourceType: z.union([z.literal("certificate"), z.literal("loadbalancer"), z.literal("listener")], {
@@ -65,7 +69,8 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "huaweicloud-elb",
+    providerType: "",
+    access: "",
    resouceType: "",
    certificateId: "",
    loadbalancerId: "",
@@ -76,7 +81,8 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "huaweicloud-elb",
+      access: config.access as string,
      certificate: config.certificate as string,
      region: config.region as string,
      resourceType: config.resourceType as "certificate" | "loadbalancer" | "listener",
@@ -100,6 +106,41 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="huaweicloud"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="huaweicloud-elb"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToKubernetesSecret.tsx
+++ b/ui/src/components/workflow/DeployToKubernetesSecret.tsx
@@ -15,6 +15,9 @@ import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";
+import AccessSelect from "./AccessSelect";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -35,6 +38,7 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    namespace: z.string().min(1, {
      message: t("domain.deployment.form.k8s_namespace.placeholder"),
@@ -52,7 +56,8 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "k8s-secret",
+    providerType: "",
+    access: "",
    namespace: "",
    secretName: "",
    secretDataKeyForCrt: "",
@@ -63,7 +68,8 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "k8s-secret",
+      access: config.access as string,
      certificate: config.certificate as string,
      namespace: config.namespace as string,
      secretName: config.secretName as string,
@@ -87,6 +93,41 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="k8s"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="k8s-secret"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToLocal.tsx
+++ b/ui/src/components/workflow/DeployToLocal.tsx
@@ -15,6 +15,9 @@ import i18n from "@/i18n";
 import { WorkflowNode } from "@/domain/workflow";
 import { Textarea } from "../ui/textarea";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -26,6 +29,7 @@ const t = i18n.t;
 const formSchema = z
  .object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    format: z.union([z.literal("pem"), z.literal("pfx"), z.literal("jks")], {
      message: t("domain.deployment.form.file_format.placeholder"),
@@ -86,6 +90,7 @@ const DeployToLocal = ({ data }: DeployFormProps) => {
    resolver: zodResolver(formSchema),
    defaultValues: {
      providerType: "local",
+      access: data.config?.access as string,
      certificate: data.config?.certificate as string,
      format: (data.config?.format as "pem" | "pfx" | "jks") || "pem",
      certPath: (data.config?.certPath as string) || "/etc/ssl/certs/cert.crt",
@@ -198,6 +203,41 @@ Remove-Item -Path "$pfxPath" -Force
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="access"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="flex justify-between">
+                <div>{t("domain.deployment.form.access.label")}</div>
+
+                <AccessEditDialog
+                  trigger={
+                    <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                      <Plus size={14} />
+                      {t("common.add")}
+                    </div>
+                  }
+                  op="add"
+                  outConfigType="local"
+                />
+              </FormLabel>
+              <FormControl>
+                <AccessSelect
+                  {...field}
+                  value={field.value}
+                  onValueChange={(value) => {
+                    form.setValue("access", value);
+                  }}
+                  providerType="local"
+                />
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
        <FormField
          control={form.control}
          name="certificate"
--- a/ui/src/components/workflow/DeployToQiniuCDN.tsx
+++ b/ui/src/components/workflow/DeployToQiniuCDN.tsx
@@ -15,6 +15,9 @@ import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -35,6 +38,7 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
      message: t("common.errmsg.domain_invalid"),
@@ -43,7 +47,8 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "qiniu-cdn",
+    providerType: "",
+    access: "",

    domain: "",
  };
@@ -52,7 +57,8 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "qiniu-cdn",
+      access: config.access as string,
      certificate: config.certificate as string,
      domain: config.domain as string,
    },
@@ -73,6 +79,41 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="qiniu"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="qiniu-cdn"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToSSH.tsx
+++ b/ui/src/components/workflow/DeployToSSH.tsx
@@ -14,6 +14,9 @@ import { useEffect, useState } from "react";
 import i18n from "@/i18n";
 import { WorkflowNode } from "@/domain/workflow";
 import { Textarea } from "../ui/textarea";
+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -25,6 +28,7 @@ const t = i18n.t;
 const formSchema = z
  .object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    format: z.union([z.literal("pem"), z.literal("pfx"), z.literal("jks")], {
      message: t("domain.deployment.form.file_format.placeholder"),
@@ -82,6 +86,7 @@ const DeployToSSH = ({ data }: DeployFormProps) => {
    resolver: zodResolver(formSchema),
    defaultValues: {
      providerType: "ssh",
+      access: data.config?.access as string,
      certificate: data.config?.certificate as string,
      format: (data.config?.format as "pem" | "pfx" | "jks") || "pem",
      certPath: (data.config?.certPath as string) || "/etc/ssl/certs/cert.crt",
@@ -116,6 +121,41 @@ const DeployToSSH = ({ data }: DeployFormProps) => {
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="access"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="flex justify-between">
+                <div>{t("domain.deployment.form.access.label")}</div>
+
+                <AccessEditDialog
+                  trigger={
+                    <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                      <Plus size={14} />
+                      {t("common.add")}
+                    </div>
+                  }
+                  op="add"
+                  outConfigType="ssh"
+                />
+              </FormLabel>
+              <FormControl>
+                <AccessSelect
+                  {...field}
+                  value={field.value}
+                  onValueChange={(value) => {
+                    form.setValue("access", value);
+                  }}
+                  providerType="ssh"
+                />
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
        <FormField
          control={form.control}
          name="certificate"
--- a/ui/src/components/workflow/DeployToTencentCDN.tsx
+++ b/ui/src/components/workflow/DeployToTencentCDN.tsx
@@ -15,6 +15,9 @@ import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -35,6 +38,7 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
      message: t("common.errmsg.domain_invalid"),
@@ -43,7 +47,7 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "tencent-cdn",
+    providerType: "",

    domain: "",
  };
@@ -52,7 +56,8 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "tencent-cdn",
+      access: config.access as string,
      certificate: config.certificate as string,
      domain: config.domain as string,
    },
@@ -73,6 +78,41 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="tencent"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="tencent-cdn"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToTencentCLB.tsx
+++ b/ui/src/components/workflow/DeployToTencentCLB.tsx
@@ -15,6 +15,9 @@ import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";

 type TencentResourceType = "ssl-deploy" | "loadbalancer" | "listener" | "ruledomain";

@@ -43,6 +46,7 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
  const formSchema = z
    .object({
      providerType: z.string(),
+      access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
      certificate: z.string().min(1),
      region: z.string().min(1, t("domain.deployment.form.tencent_clb_region.placeholder")),
      resourceType: z.union([z.literal("ssl-deploy"), z.literal("loadbalancer"), z.literal("listener"), z.literal("ruledomain")], {
@@ -76,7 +80,8 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "tencent-clb",
+    providerType: "",
+    access: "",
    resouceType: "",
    domain: "",
    loadbalancerId: "",
@@ -87,7 +92,8 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "tencent-clb",
+      access: config.access as string,
      certificate: config.certificate as string,
      region: config.region as string,
      resourceType: config.resourceType as TencentResourceType,
@@ -112,6 +118,41 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="tencent"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="tencent-clb"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToTencentCOS.tsx
+++ b/ui/src/components/workflow/DeployToTencentCOS.tsx
@@ -15,6 +15,9 @@ import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessSelect from "./AccessSelect";
+import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -35,6 +38,7 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    region: z.string().min(1, t("domain.deployment.form.tencent_cos_region.placeholder")),
    bucket: z.string().min(1, t("domain.deployment.form.tencent_cos_bucket.placeholder")),
@@ -45,7 +49,8 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "tencent-cos",
+    providerType: "",
+    access: "",
    region: "",
    bucket: "",
    domain: "",
@@ -55,7 +60,8 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "tencent-cos",
+      access: config.access as string,
      certificate: config.certificate as string,
      region: config.region as string,
      bucket: config.bucket as string,
@@ -78,6 +84,41 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="tencent"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="tencent-cos"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToTencentTEO.tsx
+++ b/ui/src/components/workflow/DeployToTencentTEO.tsx
@@ -15,6 +15,9 @@ import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -35,6 +38,7 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    zoneId: z.string().min(1, t("domain.deployment.form.tencent_teo_zone_id.placeholder")),
    domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
@@ -44,7 +48,8 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "tencent-teo",
+    providerType: "",
+    access: "",
    zoneId: "",
    domain: "",
  };
@@ -53,7 +58,8 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "tencent-teo",
+      access: config.access as string,
      certificate: config.certificate as string,
      zoneId: config.zoneId as string,
      domain: config.domain as string,
@@ -75,6 +81,41 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="tencent"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="tencent-teo"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/DeployToWebhook.tsx
+++ b/ui/src/components/workflow/DeployToWebhook.tsx
@@ -15,6 +15,9 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
 import KVList from "../certimate/KVList";
+import AccessSelect from "./AccessSelect";
+import AccessEditDialog from "../certimate/AccessEditDialog";
+import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -39,13 +42,15 @@ const DeployToWebhook = ({ data }: DeployFormProps) => {

  const formSchema = z.object({
    providerType: z.string(),
+    access: z.string().min(1, t("domain.deployment.form.access.placeholder")),
    certificate: z.string().min(1),
    variables: z.array(KVTypeSchema).optional(),
  });

  let config: WorkflowNodeConfig = {
    certificate: "",
-    providerType: "webhook",
+    providerType: "",
+    access: "",

    variables: [],
  };
@@ -54,7 +59,8 @@ const DeployToWebhook = ({ data }: DeployFormProps) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
-      providerType: config.providerType as string,
+      providerType: "webhook",
+      access: config.access as string,
      certificate: config.certificate as string,
      variables: config.variables as { key: string; value: string }[],
    },
@@ -76,6 +82,40 @@ const DeployToWebhook = ({ data }: DeployFormProps) => {
          }}
          className="space-y-8"
        >
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between">
+                  <div>{t("domain.deployment.form.access.label")}</div>
+
+                  <AccessEditDialog
+                    trigger={
+                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                        <Plus size={14} />
+                        {t("common.add")}
+                      </div>
+                    }
+                    op="add"
+                    outConfigType="webhook"
+                  />
+                </FormLabel>
+                <FormControl>
+                  <AccessSelect
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                    providerType="webhook"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
          <FormField
            control={form.control}
            name="certificate"
--- a/ui/src/components/workflow/Node.tsx
+++ b/ui/src/components/workflow/Node.tsx
@@ -72,7 +72,7 @@ const Node = ({ data }: NodeProps) => {
        const channelLabel = channelLabelMap.get(data.config?.channel as string);
        return (
          <div className="flex space-x-2 items-baseline">
-            <div className="text-stone-700">{t(channelLabel?.label ?? "")}</div>
+            <div className="text-stone-700 w-12 truncate">{t(channelLabel?.label ?? "")}</div>
            <div className="text-muted-foreground truncate">{(data.config?.title as string) ?? ""}</div>
          </div>
        );
--- a/ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx
+++ b/ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx
@@ -0,0 +1,110 @@
+import { z } from "zod";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
+import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
+import { useShallow } from "zustand/shallow";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
+type WorkflowNameEditDialogProps = {
+  trigger: React.ReactNode;
+};
+
+const formSchema = z.object({
+  name: z.string(),
+  description: z.string(),
+});
+
+const selectState = (state: WorkflowState) => ({
+  setBaseInfo: state.setBaseInfo,
+  workflow: state.workflow,
+});
+const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) => {
+  const { setBaseInfo, workflow } = useWorkflowStore(useShallow(selectState));
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: workflow.name,
+      description: workflow.description,
+    },
+  });
+
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useState(false);
+
+  const onSubmit = async (config: z.infer<typeof formSchema>) => {
+    await setBaseInfo(config.name, config.description);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onOpenChange={(val) => {
+          setOpen(val);
+        }}
+      >
+        <DialogTrigger>{trigger}</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>基础信息</DialogTitle>
+          </DialogHeader>
+          <div>
+            <Form {...form}>
+              <form
+                onSubmit={(e) => {
+                  e.stopPropagation();
+                  form.handleSubmit(onSubmit)(e);
+                }}
+                className="space-y-8"
+              >
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>名称</FormLabel>
+                      <FormControl>
+                        <Input placeholder="请输入流程名称" {...field} />
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>说明</FormLabel>
+                      <FormControl>
+                        <Input placeholder="请输入流程说明" {...field} />
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <div className="flex justify-end">
+                  <Button type="submit">{t("common.save")}</Button>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default WorkflowNameBaseInfoDialog;