When adding a domain, you can also add a custom email address.

ui/src/components/certimate/EmailsEdit.tsx

@@ -0,0 +1,141 @@
+import { cn } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../ui/form";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { useConfig } from "@/providers/config";
+import { update } from "@/repository/settings";
+import { ClientResponseError } from "pocketbase";
+import { PbErrorData } from "@/domain/base";
+import { useState } from "react";
+
+type EmailsEditProps = {
+  className?: string;
+  trigger: React.ReactNode;
+};
+
+const EmailsEdit = ({ className, trigger }: EmailsEditProps) => {
+  const {
+    config: { emails },
+    setEmails,
+  } = useConfig();
+
+  const [open, setOpen] = useState(false);
+
+  const formSchema = z.object({
+    email: z.string().email(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const onSubmit = async (data: z.infer<typeof formSchema>) => {
+    if (emails.content.emails.includes(data.email)) {
+      form.setError("email", {
+        message: "邮箱已存在",
+      });
+      return;
+    }
+
+    // 保存到 config
+    const newEmails = [...emails.content.emails, data.email];
+
+    try {
+      const resp = await update({
+        ...emails,
+        name: "emails",
+        content: {
+          emails: newEmails,
+        },
+      });
+
+      // 更新本地状态
+      setEmails(resp);
+
+      // 关闭弹窗
+      form.reset();
+      form.clearErrors();
+
+      setOpen(false);
+    } catch (e) {
+      const err = e as ClientResponseError;
+
+      Object.entries(err.response.data as PbErrorData).forEach(
+        ([key, value]) => {
+          form.setError(key as keyof z.infer<typeof formSchema>, {
+            type: "manual",
+            message: value.message,
+          });
+        }
+      );
+    }
+  };
+
+  return (
+    <Dialog onOpenChange={setOpen} open={open}>
+      <DialogTrigger asChild className={cn(className)}>
+        {trigger}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[600px] w-full dark:text-stone-200">
+        <DialogHeader>
+          <DialogTitle>添加邮箱</DialogTitle>
+        </DialogHeader>
+
+        <div className="container py-3">
+          <Form {...form}>
+            <form
+              onSubmit={(e) => {
+                console.log(e);
+                e.stopPropagation();
+                form.handleSubmit(onSubmit)(e);
+              }}
+              className="space-y-8"
+            >
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>邮箱</FormLabel>
+                    <FormControl>
+                      <Input placeholder="请输入邮箱" {...field} type="email" />
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="flex justify-end">
+                <Button type="submit">保存</Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EmailsEdit;

ui/src/domain/domain.ts

@@ -3,6 +3,7 @@ import { Deployment, Pahse } from "./deployment";
 export type Domain = {
   id: string;
   domain: string;
+  email?: string;
   crontab: string;
   access: string;
   targetAccess: string;

ui/src/domain/settings.ts

@@ -0,0 +1,9 @@
+export type Setting = {
+  id?: string;
+  name?: string;
+  content: EmailsSetting;
+};
+
+type EmailsSetting = {
+  emails: string[];
+};

ui/src/pages/domains/Edit.tsx

@@ -34,10 +34,11 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { Plus } from "lucide-react";
 import { AccessEdit } from "@/components/certimate/AccessEdit";
 import { accessTypeMap } from "@/domain/access";
+import EmailsEdit from "@/components/certimate/EmailsEdit";
 
 const Edit = () => {
   const {
-    config: { accesses },
+    config: { accesses, emails },
   } = useConfig();
 
   const [domain, setDomain] = useState<Domain>();
@@ -62,6 +63,7 @@ const Edit = () => {
     domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
       message: "请输入正确的域名",
     }),
+    email: z.string().email().optional(),
     access: z.string().regex(/^[a-zA-Z0-9]+$/, {
       message: "请选择DNS服务商授权配置",
     }),
@@ -78,6 +80,7 @@ const Edit = () => {
     defaultValues: {
       id: "",
       domain: "",
+      email: "",
       access: "",
       targetAccess: "",
       targetType: "",
@@ -89,6 +92,7 @@ const Edit = () => {
       form.reset({
         id: domain.id,
         domain: domain.domain,
+        email: domain.email,
         access: domain.access,
         targetAccess: domain.targetAccess,
         targetType: domain.targetType,
@@ -119,6 +123,7 @@ const Edit = () => {
       id: data.id as string,
       crontab: "0 0 * * *",
       domain: data.domain,
+      email: data.email,
       access: data.access,
       targetAccess: data.targetAccess,
       targetType: data.targetType,
@@ -180,6 +185,51 @@ const Edit = () => {
                 )}
               />
 
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex w-full justify-between">
+                      <div>Email（申请证书需要提供邮箱）</div>
+                      <EmailsEdit
+                        trigger={
+                          <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
+                            <Plus size={14} />
+                            新增
+                          </div>
+                        }
+                      />
+                    </FormLabel>
+                    <FormControl>
+                      <Select
+                        {...field}
+                        value={field.value}
+                        onValueChange={(value) => {
+                          form.setValue("email", value);
+                        }}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="请选择邮箱" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectLabel>邮箱列表</SelectLabel>
+                            {emails.content.emails.map((item) => (
+                              <SelectItem key={item} value={item}>
+                                <div>{item}</div>
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
               <FormField
                 control={form.control}
                 name="access"

ui/src/providers/config/index.tsx

@@ -10,9 +10,12 @@ import {
   useReducer,
 } from "react";
 import { configReducer } from "./reducer";
+import { getEmails } from "@/repository/settings";
+import { Setting } from "@/domain/settings";
 
 export type ConfigData = {
   accesses: Access[];
+  emails: Setting;
 };
 
 export type ConfigContext = {
@@ -20,6 +23,7 @@ export type ConfigContext = {
   deleteAccess: (id: string) => void;
   addAccess: (access: Access) => void;
   updateAccess: (access: Access) => void;
+  setEmails: (email: Setting) => void;
 };
 
 const Context = createContext({} as ConfigContext);
@@ -31,7 +35,10 @@ interface ContainerProps {
 }
 
 export const ConfigProvider = ({ children }: ContainerProps) => {
-  const [config, dispatchConfig] = useReducer(configReducer, { accesses: [] });
+  const [config, dispatchConfig] = useReducer(configReducer, {
+    accesses: [],
+    emails: { content: { emails: [] } },
+  });
 
   useEffect(() => {
     const featchData = async () => {
@@ -41,6 +48,18 @@ export const ConfigProvider = ({ children }: ContainerProps) => {
     featchData();
   }, []);
 
+  useEffect(() => {
+    const featchEmails = async () => {
+      const emails = await getEmails();
+      dispatchConfig({ type: "SET_EMAILS", payload: emails });
+    };
+    featchEmails();
+  }, []);
+
+  const setEmails = useCallback((emails: Setting) => {
+    dispatchConfig({ type: "SET_EMAILS", payload: emails });
+  }, []);
+
   const deleteAccess = useCallback((id: string) => {
     dispatchConfig({ type: "DELETE_ACCESS", payload: id });
   }, []);
@@ -58,9 +77,11 @@ export const ConfigProvider = ({ children }: ContainerProps) => {
       value={{
         config: {
           accesses: config.accesses,
+          emails: config.emails,
         },
         deleteAccess,
         addAccess,
+        setEmails,
         updateAccess,
       }}
     >

ui/src/providers/config/reducer.ts

@@ -1,11 +1,14 @@
 import { Access } from "@/domain/access";
 import { ConfigData } from ".";
+import { Setting } from "@/domain/settings";
 
 type Action =
   | { type: "ADD_ACCESS"; payload: Access }
   | { type: "DELETE_ACCESS"; payload: string }
   | { type: "UPDATE_ACCESS"; payload: Access }
-  | { type: "SET_ACCESSES"; payload: Access[] };
+  | { type: "SET_ACCESSES"; payload: Access[] }
+  | { type: "SET_EMAILS"; payload: Setting }
+  | { type: "ADD_EMAIL"; payload: string };
 
 export const configReducer = (
   state: ConfigData,
@@ -40,6 +43,23 @@ export const configReducer = (
         ),
       };
     }
+    case "SET_EMAILS": {
+      return {
+        ...state,
+        emails: action.payload,
+      };
+    }
+    case "ADD_EMAIL": {
+      return {
+        ...state,
+        emails: {
+          ...state.emails,
+          content: {
+            emails: [...state.emails.content.emails, action.payload],
+          },
+        },
+      };
+    }
     default:
       return state;
   }

ui/src/repository/settings.ts

@@ -0,0 +1,26 @@
+import { Setting } from "@/domain/settings";
+import { getPb } from "./api";
+
+export const getEmails = async () => {
+  try {
+    const resp = await getPb()
+      .collection("settings")
+      .getFirstListItem<Setting>("name='emails'");
+    return resp;
+  } catch (e) {
+    return {
+      content: { emails: [] },
+    };
+  }
+};
+
+export const update = async (setting: Setting) => {
+  const pb = getPb();
+  let resp: Setting;
+  if (setting.id) {
+    resp = await pb.collection("settings").update(setting.id, setting);
+  } else {
+    resp = await pb.collection("settings").create(setting);
+  }
+  return resp;
+};