chore: remove unused code

ui/src/components/workflow/AddNode.tsx

@@ -1,30 +1,17 @@
 import { Plus } from "lucide-react";
-
 import { BrandNodeProps, NodeProps } from "./types";
-
 import { newWorkflowNode, workflowNodeDropdownList, WorkflowNodeType } from "@/domain/workflow";
 import { useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
+import { Dropdown } from "antd";
 import DropdownMenuItemIcon from "./DropdownMenuItemIcon";
-import Show from "../Show";
 import { useTranslation } from "react-i18next";
 
 const AddNode = ({ data }: NodeProps | BrandNodeProps) => {
-  const { addNode } = useWorkflowStore(useZustandShallowSelector(["addNode"]));
   const { t } = useTranslation();
 
+  const { addNode } = useWorkflowStore(useZustandShallowSelector(["addNode"]));
+
   const handleTypeSelected = (type: WorkflowNodeType, provider?: string) => {
     const node = newWorkflowNode(type, {
       providerType: provider,
@@ -35,57 +22,43 @@ const AddNode = ({ data }: NodeProps | BrandNodeProps) => {
 
   return (
     <div className="before:content-['']  before:w-[2px] before:bg-stone-200 before:absolute before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0 pt-6 pb-9 relative flex flex-col items-center">
-      <DropdownMenu>
-        <DropdownMenuTrigger className="">
-          <div className="bg-stone-400 hover:bg-stone-500 rounded-full z-10 relative outline-none">
-            <Plus size={18} className="text-white" />
-          </div>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuLabel>{t("workflow.node.selectNodeType.label")}</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          {workflowNodeDropdownList.map((item) => (
-            <Show
-              key={item.type}
-              when={!!item.leaf}
-              fallback={
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger className="flex space-x-2">
-                    <DropdownMenuItemIcon type={item.icon.type} name={item.icon.name} /> <div>{item.name}</div>
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
-                    <DropdownMenuSubContent>
-                      {item.children?.map((subItem) => {
-                        return (
-                          <DropdownMenuItem
-                            key={subItem.providerType}
-                            className="flex space-x-2"
-                            onClick={() => {
-                              handleTypeSelected(item.type, subItem.providerType);
-                            }}
-                          >
-                            <DropdownMenuItemIcon type={subItem.icon.type} name={subItem.icon.name} /> <div>{subItem.name}</div>
-                          </DropdownMenuItem>
-                        );
-                      })}
-                    </DropdownMenuSubContent>
-                  </DropdownMenuPortal>
-                </DropdownMenuSub>
-              }
-            >
-              <DropdownMenuItem
-                key={item.type}
-                className="flex space-x-2"
-                onClick={() => {
-                  handleTypeSelected(item.type, item.providerType);
-                }}
-              >
-                <DropdownMenuItemIcon type={item.icon.type} name={item.icon.name} /> <div>{item.name}</div>
-              </DropdownMenuItem>
-            </Show>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <Dropdown
+        menu={{
+          items: workflowNodeDropdownList.map((item) => {
+            if (item.leaf) {
+              return {
+                key: item.type,
+                label: <div className="ml-2">{item.name}</div>,
+                icon: <DropdownMenuItemIcon type={item.icon.type} name={item.icon.name} />,
+                onClick: () => {
+                  handleTypeSelected(item.type);
+                },
+              };
+            }
+
+            return {
+              key: item.type,
+              label: <div className="ml-2">{item.name}</div>,
+              icon: <DropdownMenuItemIcon type={item.icon.type} name={item.icon.name} />,
+              children: item.children?.map((subItem) => {
+                return {
+                  key: subItem.providerType,
+                  label: <div className="ml-2">{subItem.name}</div>,
+                  icon: <DropdownMenuItemIcon type={subItem.icon.type} name={subItem.icon.name} />,
+                  onClick: () => {
+                    handleTypeSelected(item.type, subItem.providerType);
+                  },
+                };
+              }),
+            };
+          }),
+        }}
+        trigger={["click"]}
+      >
+        <div className="bg-stone-400 hover:bg-stone-500 rounded-full z-10 relative outline-none">
+          <Plus size={18} className="text-white" />
+        </div>
+      </Dropdown>
     </div>
   );
 };

ui/src/components/workflow/ConditionNode.tsx

@@ -2,7 +2,7 @@ import { useWorkflowStore } from "@/stores/workflow";
 import AddNode from "./AddNode";
 import { NodeProps } from "./types";
 import { useZustandShallowSelector } from "@/hooks";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { Dropdown } from "antd";
 import { Ellipsis, Trash2 } from "lucide-react";
 
 const ConditionNode = ({ data, branchId, branchIndex }: NodeProps) => {
@@ -13,21 +13,26 @@ const ConditionNode = ({ data, branchId, branchIndex }: NodeProps) => {
   return (
     <>
       <div className="rounded-md shadow-md w-[261px] mt-10 relative z-10">
-        <DropdownMenu>
-          <DropdownMenuTrigger className="absolute right-2 top-1">
+        <Dropdown
+          menu={{
+            items: [
+              {
+                key: "delete",
+                label: "删除分支",
+                icon: <Trash2 size={16} />,
+                danger: true,
+                onClick: () => {
+                  removeBranch(branchId ?? "", branchIndex ?? 0);
+                },
+              },
+            ],
+          }}
+          trigger={["click"]}
+        >
+          <div className="absolute right-2 top-1 cursor-pointer">
             <Ellipsis size={17} className="text-stone-600" />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem
-              className="flex space-x-2 text-red-600"
-              onClick={() => {
-                removeBranch(branchId ?? "", branchIndex ?? 0);
-              }}
-            >
-              <Trash2 size={16} /> <div>删除分支</div>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+          </div>
+        </Dropdown>
 
         <div className="w-[261px]  flex flex-col justify-center text-foreground rounded-md bg-white px-5 py-5">
           <div contentEditable suppressContentEditableWarning onBlur={handleNameBlur} className="text-center outline-slate-200 dark:text-stone-600">

ui/src/components/workflow/DeployToLocal.tsx

@@ -14,7 +14,7 @@ import { useEffect, useState } from "react";
 import i18n from "@/i18n";
 import { WorkflowNode } from "@/domain/workflow";
 import { Textarea } from "../ui/textarea";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { Dropdown } from "antd";
 import AccessSelect from "./AccessSelect";
 import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
@@ -432,22 +432,30 @@ Remove-Item -Path "$pfxPath" -Force
             <FormItem>
               <FormLabel className="flex justify-between items-center">
                 <div>{t("domain.deployment.form.shell_command.label")}</div>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <a className="text-xs text-blue-500 cursor-pointer">{t("domain.deployment.form.shell_preset_scripts.trigger")}</a>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
-                    <DropdownMenuItem onClick={() => handleUsePresetScript("reload_nginx")}>
-                      {t("domain.deployment.form.shell_preset_scripts.option.reload_nginx.label")}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => handleUsePresetScript("binding_iis")}>
-                      {t("domain.deployment.form.shell_preset_scripts.option.binding_iis.label")}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => handleUsePresetScript("binding_netsh")}>
-                      {t("domain.deployment.form.shell_preset_scripts.option.binding_netsh.label")}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                <Dropdown
+                  menu={{
+                    items: [
+                      {
+                        key: "reload_nginx",
+                        label: t("domain.deployment.form.shell_preset_scripts.option.reload_nginx.label"),
+                        onClick: () => handleUsePresetScript("reload_nginx"),
+                      },
+                      {
+                        key: "binding_iis",
+                        label: t("domain.deployment.form.shell_preset_scripts.option.binding_iis.label"),
+                        onClick: () => handleUsePresetScript("binding_iis"),
+                      },
+                      {
+                        key: "binding_netsh",
+                        label: t("domain.deployment.form.shell_preset_scripts.option.binding_netsh.label"),
+                        onClick: () => handleUsePresetScript("binding_netsh"),
+                      },
+                    ],
+                  }}
+                  trigger={["click"]}
+                >
+                  <a className="text-xs text-blue-500 cursor-pointer">{t("domain.deployment.form.shell_preset_scripts.trigger")}</a>
+                </Dropdown>
               </FormLabel>
               <FormControl>
                 <Textarea placeholder={t("domain.deployment.form.shell_command.placeholder")} {...(field as any)} />

ui/src/components/workflow/DropdownMenuItemIcon.tsx

@@ -13,7 +13,7 @@ const DropdownMenuItemIcon = ({ type, name }: WorkflowNodeDropdwonItemIcon) => {
     if (type === WorkflowNodeDropdwonItemIconType.Icon) {
       return icons.get(name);
     } else {
-      return <img src={name} className="w-4" />;
+      return <img src={name} className="inline-block size-4" />;
     }
   };
 

ui/src/components/workflow/Node.tsx

@@ -2,7 +2,7 @@ import { WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
 import AddNode from "./AddNode";
 import { useWorkflowStore } from "@/stores/workflow";
 import { useZustandShallowSelector } from "@/hooks";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { Dropdown } from "antd";
 import { Ellipsis, Trash2 } from "lucide-react";
 import { usePanel } from "./PanelProvider";
 import PanelBody from "./PanelBody";
@@ -84,21 +84,26 @@ const Node = ({ data }: NodeProps) => {
       <div className="rounded-md shadow-md w-[260px] relative">
         {data.type != WorkflowNodeType.Start && (
           <>
-            <DropdownMenu>
-              <DropdownMenuTrigger className="absolute right-2 top-1">
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    key: "delete",
+                    label: t(`${i18nPrefix}.delete.label`),
+                    icon: <Trash2 size={16} />,
+                    danger: true,
+                    onClick: () => {
+                      removeNode(data.id);
+                    },
+                  },
+                ],
+              }}
+              trigger={["click"]}
+            >
+              <div className="absolute right-2 top-1 cursor-pointer">
                 <Ellipsis className="text-white" size={17} />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem
-                  className="flex space-x-2 text-red-600"
-                  onClick={() => {
-                    removeNode(data.id);
-                  }}
-                >
-                  <Trash2 size={16} /> <div>{t(`${i18nPrefix}.delete.label`)}</div>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+              </div>
+            </Dropdown>
           </>
         )}
 

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

@@ -1,356 +0,0 @@
-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);