chore: remove unused code

ui/package-lock.json

@@ -13,7 +13,6 @@
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-label": "^2.1.0",
-        "@radix-ui/react-scroll-area": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slot": "^1.1.0",
         "ahooks": "^3.8.4",
@@ -3325,36 +3324,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-scroll-area": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.1.0.tgz",
-      "integrity": "sha512-9ArIZ9HWhsrfqS765h+GZuLoxaRHD/j0ZWOWilsCvYTpYJp8XwCqNG7Dt9Nu/TItKOdgLGkOPCodQvDc+UMwYg==",
-      "dependencies": {
-        "@radix-ui/number": "1.1.0",
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
-        "@radix-ui/react-direction": "1.1.0",
-        "@radix-ui/react-presence": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-use-callback-ref": "1.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-select/-/react-select-2.1.1.tgz",

ui/package.json

@@ -15,7 +15,6 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "ahooks": "^3.8.4",

ui/src/components/access/AccessEditFormNameDotComConfig.tsx

@@ -1,31 +1,29 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDeepCompareEffect } from "ahooks";
 import { Form, Input, type FormInstance } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
+import { useAntdForm } from "@/hooks";
 import { type NameDotComAccessConfig } from "@/domain/access";
 
-type AccessEditFormNameDotComConfigModelType = Partial<NameDotComAccessConfig>;
+type AccessEditFormNameDotComConfigModelValues = Partial<NameDotComAccessConfig>;
 
 export type AccessEditFormNameDotComConfigProps = {
   form: FormInstance;
   formName: string;
   disabled?: boolean;
-  loading?: boolean;
+  model?: AccessEditFormNameDotComConfigModelValues;
-  model?: AccessEditFormNameDotComConfigModelType;
+  onModelChange?: (model: AccessEditFormNameDotComConfigModelValues) => void;
-  onModelChange?: (model: AccessEditFormNameDotComConfigModelType) => void;
 };
 
-const initModel = () => {
+const initFormModel = (): AccessEditFormNameDotComConfigModelValues => {
   return {
     username: "",
     apiToken: "",
-  } as AccessEditFormNameDotComConfigModelType;
+  };
 };
 
-const AccessEditFormNameDotComConfig = ({ form, formName, disabled, loading, model, onModelChange }: AccessEditFormNameDotComConfigProps) => {
+const AccessEditFormNameDotComConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormNameDotComConfigProps) => {
   const { t } = useTranslation();
 
   const formSchema = z.object({
@@ -41,18 +39,17 @@ const AccessEditFormNameDotComConfig = ({ form, formName, disabled, loading, mod
       .max(64, t("common.errmsg.string_max", { max: 64 })),
   });
   const formRule = createSchemaFieldRule(formSchema);
+  const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
+    form: form,
+    initialValues: model ?? initFormModel(),
+  });
 
-  const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
+  const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-  useDeepCompareEffect(() => {
+    onModelChange?.(values as AccessEditFormNameDotComConfigModelValues);
-    setInitialValues(model ?? initModel());
-  }, [model]);
-
-  const handleFormChange = (_: unknown, fields: AccessEditFormNameDotComConfigModelType) => {
-    onModelChange?.(fields);
   };
 
   return (
-    <Form form={form} disabled={loading || disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
+    <Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
       <Form.Item
         name="username"
         label={t("access.form.namedotcom_username.label")}

ui/src/components/ui/dialog.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";

ui/src/components/ui/scroll-area.tsx

@@ -1,37 +0,0 @@
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-
-import { cn } from "./utils";
-
-const ScrollArea = React.forwardRef<React.ElementRef<typeof ScrollAreaPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>>(
-  ({ className, children, ...props }, ref) => (
-    <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
-      <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
-);
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };

ui/src/components/ui/sheet.tsx

@@ -1,86 +0,0 @@
-import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "./utils";
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Overlay>, React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>>(
-  ({ className, ...props }, ref) => (
-    <SheetPrimitive.Overlay
-      className={cn(
-        "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        className
-      )}
-      {...props}
-      ref={ref}
-    />
-  )
-);
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-);
-
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
-  ({ side = "right", className, children, ...props }, ref) => (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-        {children}
-        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-          <X className="h-4 w-4 dark:text-stone-200" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-);
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-SheetHeader.displayName = "SheetHeader";
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
-);
-SheetFooter.displayName = "SheetFooter";
-
-const SheetTitle = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Title>, React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>>(
-  ({ className, ...props }, ref) => <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
-);
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => <SheetPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />);
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };

ui/src/components/workflow/Panel.tsx

@@ -1,6 +1,5 @@
-// components/AddNodePanel.tsx
+import { useEffect } from "react";
-import { ScrollArea } from "../ui/scroll-area";
+import { Drawer } from "antd";
-import { Sheet, SheetContent, SheetTitle } from "../ui/sheet";
 
 type AddNodePanelProps = {
   open: boolean;
@@ -10,14 +9,14 @@ type AddNodePanelProps = {
 };
 
 const Panel = ({ open, onOpenChange, children, name }: AddNodePanelProps) => {
-  return (
+  useEffect(() => {
-    <Sheet open={open} onOpenChange={onOpenChange}>
+    onOpenChange(open);
-      <SheetContent className="sm:max-w-[640px] p-0">
+  }, [open, onOpenChange]);
-        <SheetTitle className="bg-primary px-6 py-4 text-white">{name}</SheetTitle>
 
-        <ScrollArea className="px-6 py-4 flex-col space-y-5 h-[90vh]">{children}</ScrollArea>
+  return (
-      </SheetContent>
+    <Drawer open={open} title={name} width={640} onClose={() => onOpenChange(false)}>
-    </Sheet>
+      {children}
+    </Drawer>
   );
 };
 

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

@@ -0,0 +1,356 @@
+import { memo, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Collapse, Divider, Switch, Tooltip, Typography } from "antd";
+import z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ChevronsUpDown as ChevronsUpDownIcon, Plus as PlusIcon, CircleHelp as CircleHelpIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
+import AccessEditModal from "@/components/access/AccessEditModal";
+import EmailsEdit from "@/components/certimate/EmailsEdit";
+import StringList from "@/components/certimate/StringList";
+import { accessProvidersMap } from "@/domain/access";
+import { useZustandShallowSelector } from "@/hooks";
+import { useAccessStore } from "@/stores/access";
+import { useContactStore } from "@/stores/contact";
+import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
+import { useWorkflowStore } from "@/stores/workflow";
+import { usePanel } from "../PanelProvider";
+
+type ApplyFormProps = {
+  data: WorkflowNode;
+};
+
+const ApplyForm = ({ data }: ApplyFormProps) => {
+  const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
+
+  const { accesses } = useAccessStore();
+  const { emails, fetchEmails } = useContactStore();
+
+  useEffect(() => {
+    fetchEmails();
+  }, []);
+
+  const { t } = useTranslation();
+
+  const { hidePanel } = usePanel();
+
+  const formSchema = z.object({
+    domain: z.string().min(1, {
+      message: "common.errmsg.domain_invalid",
+    }),
+    email: z.string().email("common.errmsg.email_invalid").optional(),
+    access: z.string().regex(/^[a-zA-Z0-9]+$/, {
+      message: "domain.application.form.access.placeholder",
+    }),
+    keyAlgorithm: z.string().optional(),
+    nameservers: z.string().optional(),
+    timeout: z.number().optional(),
+    disableFollowCNAME: z.boolean().optional(),
+  });
+
+  let config: WorkflowNodeConfig = {
+    domain: "",
+    email: "",
+    access: "",
+    keyAlgorithm: "RSA2048",
+    nameservers: "",
+    timeout: 60,
+    disableFollowCNAME: true,
+  };
+  if (data) config = data.config ?? config;
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      domain: config.domain as string,
+      email: config.email as string,
+      access: config.access as string,
+      keyAlgorithm: config.keyAlgorithm as string,
+      nameservers: config.nameservers as string,
+      timeout: config.timeout as number,
+      disableFollowCNAME: config.disableFollowCNAME as boolean,
+    },
+  });
+
+  const onSubmit = async (config: z.infer<typeof formSchema>) => {
+    updateNode({ ...data, config, validated: true });
+    hidePanel();
+  };
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 dark:text-stone-200">
+          {/* 域名 */}
+          <FormField
+            control={form.control}
+            name="domain"
+            render={({ field }) => (
+              <FormItem>
+                <>
+                  <StringList
+                    value={field.value}
+                    valueType="domain"
+                    onValueChange={(domain: string) => {
+                      form.setValue("domain", domain);
+                    }}
+                  />
+                </>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* 邮箱 */}
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between w-full">
+                  <div>{t("domain.application.form.email.label") + " " + t("domain.application.form.email.tips")}</div>
+                  <EmailsEdit
+                    trigger={
+                      <div className="flex items-center font-normal cursor-pointer text-primary hover:underline">
+                        <PlusIcon size={14} />
+                        {t("common.button.add")}
+                      </div>
+                    }
+                  />
+                </FormLabel>
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("email", value);
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder={t("domain.application.form.email.placeholder")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectLabel>{t("domain.application.form.email.list")}</SelectLabel>
+                        {emails.map((item) => (
+                          <SelectItem key={item} value={item}>
+                            <div>{item}</div>
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* DNS 服务商授权 */}
+          <FormField
+            control={form.control}
+            name="access"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between w-full">
+                  <div>{t("domain.application.form.access.label")}</div>
+                  <AccessEditModal
+                    preset="add"
+                    trigger={
+                      <div className="flex items-center font-normal cursor-pointer text-primary hover:underline">
+                        <PlusIcon size={14} />
+                        {t("common.button.add")}
+                      </div>
+                    }
+                  />
+                </FormLabel>
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("access", value);
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder={t("domain.application.form.access.placeholder")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectLabel>{t("domain.application.form.access.list")}</SelectLabel>
+                        {accesses
+                          .filter((item) => item.usage != "deploy")
+                          .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>
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Divider />
+
+          <Collapse
+            bordered={false}
+            ghost={true}
+            items={[
+              {
+                key: "advanced",
+                styles: {
+                  header: { paddingLeft: 0, paddingRight: 0 },
+                  body: { paddingLeft: 0, paddingRight: 0 },
+                },
+                label: <Typography.Text type="secondary">{t("domain.application.form.advanced_settings.label")}</Typography.Text>,
+                children: (
+                  <div className="flex flex-col space-y-8">
+                    {/* 证书算法 */}
+                    <FormField
+                      control={form.control}
+                      name="keyAlgorithm"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t("domain.application.form.key_algorithm.label")}</FormLabel>
+                          <Select
+                            {...field}
+                            value={field.value}
+                            onValueChange={(value) => {
+                              form.setValue("keyAlgorithm", value);
+                            }}
+                          >
+                            <SelectTrigger>
+                              <SelectValue placeholder={t("domain.application.form.key_algorithm.placeholder")} />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectGroup>
+                                <SelectItem value="RSA2048">RSA2048</SelectItem>
+                                <SelectItem value="RSA3072">RSA3072</SelectItem>
+                                <SelectItem value="RSA4096">RSA4096</SelectItem>
+                                <SelectItem value="RSA8192">RSA8192</SelectItem>
+                                <SelectItem value="EC256">EC256</SelectItem>
+                                <SelectItem value="EC384">EC384</SelectItem>
+                              </SelectGroup>
+                            </SelectContent>
+                          </Select>
+                        </FormItem>
+                      )}
+                    />
+
+                    {/* DNS */}
+                    <FormField
+                      control={form.control}
+                      name="nameservers"
+                      render={({ field }) => (
+                        <FormItem>
+                          <StringList
+                            value={field.value ?? ""}
+                            onValueChange={(val: string) => {
+                              form.setValue("nameservers", val);
+                            }}
+                            valueType="dns"
+                          ></StringList>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    {/* DNS 超时时间 */}
+                    <FormField
+                      control={form.control}
+                      name="timeout"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t("domain.application.form.timeout.label")}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="number"
+                              placeholder={t("domain.application.form.timeout.placeholder")}
+                              {...field}
+                              value={field.value}
+                              onChange={(e) => {
+                                form.setValue("timeout", parseInt(e.target.value));
+                              }}
+                            />
+                          </FormControl>
+
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    {/* 禁用 CNAME 跟随 */}
+                    <FormField
+                      control={form.control}
+                      name="disableFollowCNAME"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            <div className="flex">
+                              <span className="mr-1">{t("domain.application.form.disable_follow_cname.label")} </span>
+                              <Tooltip
+                                title={
+                                  <p>
+                                    {t("domain.application.form.disable_follow_cname.tips")}
+                                    <a
+                                      className="text-primary"
+                                      target="_blank"
+                                      href="https://letsencrypt.org/2019/10/09/onboarding-your-customers-with-lets-encrypt-and-acme/#the-advantages-of-a-cname"
+                                    >
+                                      {t("domain.application.form.disable_follow_cname.tips_link")}
+                                    </a>
+                                  </p>
+                                }
+                              >
+                                <CircleHelpIcon size={14} />
+                              </Tooltip>
+                            </div>
+                          </FormLabel>
+                          <FormControl>
+                            <div>
+                              <Switch
+                                defaultChecked={field.value}
+                                onChange={(value) => {
+                                  form.setValue(field.name, value);
+                                }}
+                              />
+                            </div>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                ),
+                extra: <ChevronsUpDownIcon size={14} />,
+                forceRender: true,
+                showArrow: false,
+              },
+            ]}
+          />
+
+          <div className="flex justify-end">
+            <Button type="submit">{t("common.button.save")}</Button>
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+};
+
+export default memo(ApplyForm);

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -16,7 +16,6 @@ import { useAntdForm, useZustandShallowSelector } from "@/hooks";
 import { allNodesValidated, type WorkflowModel, type WorkflowNode } from "@/domain/workflow";
 import { useWorkflowStore } from "@/stores/workflow";
 import { remove as removeWorkflow } from "@/repository/workflow";
-import { run as runWorkflow } from "@/api/workflow";
 import { getErrMsg } from "@/utils/error";
 
 const WorkflowDetail = () => {
@@ -29,9 +28,7 @@ const WorkflowDetail = () => {
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
   const { id: workflowId } = useParams();
-  const { workflow, init, setBaseInfo, switchEnable, save } = useWorkflowStore(
+  const { workflow, init, setBaseInfo, switchEnable } = useWorkflowStore(useZustandShallowSelector(["workflow", "init", "setBaseInfo", "switchEnable"]));
-    useZustandShallowSelector(["workflow", "init", "setBaseInfo", "switchEnable", "save"])
-  );
   useEffect(() => {
     init(workflowId);
   }, [workflowId, init]);