feat: improve notification settings and interactive TG bot

public/nzcfg.html

@@ -782,7 +782,7 @@
                         <button onclick="generatePublicNoteJSON()">生成 JSON</button>
                     </div>
                     <div class="col-right">
-                        <button class="copy-btn" onclick="copyToClipboard('jsonOutput')">
+                        <button class="copy-btn" onclick="copyToClipboard('jsonOutput', this)">
                             复制到剪贴板
                         </button>
                         <pre id="jsonOutput"><code class="language-json"></code></pre>
@@ -889,7 +889,7 @@
                         <button onclick="generateTrafficMonitorJSON()">生成 JSON</button>
                     </div>
                     <div class="col-right">
-                        <button class="copy-btn" onclick="copyToClipboard('jsonOutput2')">
+                        <button class="copy-btn" onclick="copyToClipboard('jsonOutput2', this)">
                             复制到剪贴板
                         </button>
                         <pre id="jsonOutput2"><code class="language-json"></code></pre>
@@ -976,20 +976,29 @@
                 }
             }
 
-            function copyToClipboard(elementId) {
+            function copyToClipboard(elementId, btn) {
+                const urlParams = new URLSearchParams(window.location.search);
+                const targetParam = urlParams.get('target');
+                const oldText = btn ? btn.innerHTML : null;
+
                 var text = document.querySelector("#" + elementId + " code").innerText
                 navigator.clipboard.writeText(text).then(function () {
                     if (window.opener) {
                         window.opener.postMessage(
                             {
                                 type: "NZCFG_JSON",
-                                target: elementId === "jsonOutput" ? "public_note" : "traffic",
+                                target: targetParam || (elementId === "jsonOutput" ? "public_note" : "traffic"),
                                 payload: text,
                             },
                             "*",
                         )
-                        alert("已生成并同步至控制面板中！")
+                        if (btn) {
-                        window.close()
+                            btn.innerHTML = '<i class="fas fa-check"></i> 已同步至控制面板';
+                            btn.style.backgroundColor = '#2ecc71';
+                        }
+                        setTimeout(() => {
+                            window.close();
+                        }, 600);
                     } else {
                         alert("已复制到剪贴板！")
                     }

src/components/batch-edit-note-icon.tsx

@@ -0,0 +1,227 @@
+import { updateServer } from "@/api/server"
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Textarea } from "@/components/ui/textarea"
+import { IconButton } from "@/components/xui/icon-button"
+import { ModelServer as Server } from "@/types"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useEffect, useState } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { toast } from "sonner"
+import { KeyedMutator } from "swr"
+import { z } from "zod"
+
+interface BatchEditNoteIconProps {
+    servers: Server[]
+    selectedIds: number[]
+    mutate: KeyedMutator<Server[]>
+}
+
+const batchNoteFormSchema = z.object({
+    note: z.string().optional(),
+    public_note: z.string().optional(),
+})
+
+export const BatchEditNoteIcon: React.FC<BatchEditNoteIconProps> = ({
+    servers,
+    selectedIds,
+    mutate,
+}) => {
+    const { t } = useTranslation()
+    const [open, setOpen] = useState(false)
+
+    const form = useForm<z.infer<typeof batchNoteFormSchema>>({
+        resolver: zodResolver(batchNoteFormSchema),
+        defaultValues: {
+            note: "",
+            public_note: "",
+        },
+    })
+
+    useEffect(() => {
+        const handleMessage = (e: MessageEvent) => {
+            if (e.data?.type === "NZCFG_JSON") {
+                const target = e.data.target === "traffic" ? "public_note" : e.data.target
+                if (target === "public_note" || target === "note") {
+                    form.setValue(target, e.data.payload)
+                    toast(t("Success"), {
+                        description: `批量配置已自动填入${
+                            target === "public_note" ? t("PublicNote.Label") : t("Private") + t("Note")
+                        }`,
+                    })
+                }
+            }
+        }
+        window.addEventListener("message", handleMessage)
+        return () => window.removeEventListener("message", handleMessage)
+    }, [form, t])
+
+    const onSubmit = async (values: z.infer<typeof batchNoteFormSchema>) => {
+        if (selectedIds.length === 0) {
+            toast(t("Error"), { description: t("Results.SelectAtLeastOneServer") })
+            return
+        }
+
+        const promises = selectedIds.map((id) => {
+            const server = servers.find((s) => s.id === id)
+            if (!server) return Promise.resolve()
+            
+            // Only update note/public_note if the batch form field is not empty!
+            // Wait, what if they WANT to clear the note? 
+            // For batch, usually we only override if they typed something.
+            // We can provide a checkbox or just update if not empty.
+            // Let's just update if not empty for safety.
+            let updatePayload = { ...server }
+            if (values.note && values.note.trim() !== "") {
+                updatePayload.note = values.note
+            }
+            if (values.public_note && values.public_note.trim() !== "") {
+                updatePayload.public_note = values.public_note
+            }
+            
+            // Clean up non-API fields
+            return updateServer(id, {
+                name: updatePayload.name,
+                display_index: updatePayload.display_index,
+                note: updatePayload.note,
+                public_note: updatePayload.public_note,
+                hide_for_guest: updatePayload.hide_for_guest,
+                enable_ddns: updatePayload.enable_ddns,
+                ddns_profiles: updatePayload.ddns_profiles,
+                override_ddns_domains: updatePayload.override_ddns_domains,
+            })
+        })
+
+        toast.promise(Promise.all(promises), {
+            loading: t("Saving..."),
+            success: () => {
+                setOpen(false)
+                mutate()
+                form.reset()
+                return t("Success")
+            },
+            error: t("Results.UnExpectedError"),
+        })
+    }
+
+    return (
+        <>
+            <IconButton
+                icon="edit"
+                onClick={() => {
+                    if (selectedIds.length === 0) {
+                        toast(t("Error"), { description: t("Results.SelectAtLeastOneServer") })
+                        return
+                    }
+                    setOpen(true)
+                }}
+            />
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogContent className="sm:max-w-xl">
+                    <DialogHeader>
+                        <DialogTitle>批量修改配置/备注 (已选 {selectedIds.length} 台)</DialogTitle>
+                    </DialogHeader>
+                    <Form {...form}>
+                        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                            <FormField
+                                control={form.control}
+                                name="note"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel className="flex justify-between items-center w-full">
+                                            <span>{t("Private") + t("Note")} (留空则不修改)</span>
+                                            <Button
+                                                variant="link"
+                                                type="button"
+                                                className="text-blue-500 hover:text-blue-700 text-xs flex items-center gap-1 h-auto p-0"
+                                                onClick={(e) => {
+                                                    e.preventDefault()
+                                                    e.stopPropagation()
+                                                    window.open(
+                                                        "/dashboard/nzcfg.html?target=note",
+                                                        "nzcfg",
+                                                        "width=1000,height=800",
+                                                    )
+                                                }}
+                                            >
+                                                可视化管理配置 <i className="fa-solid fa-up-right-from-square"></i>
+                                            </Button>
+                                        </FormLabel>
+                                        <FormControl>
+                                            <Textarea
+                                                className="resize-none"
+                                                placeholder="在此粘贴或使用右上角可视化工具生成配置..."
+                                                {...field}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="public_note"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel className="flex justify-between items-center w-full">
+                                            <span>{t("Public") + t("Note")} (留空则不修改)</span>
+                                            <Button
+                                                variant="link"
+                                                type="button"
+                                                className="text-blue-500 hover:text-blue-700 text-xs flex items-center gap-1 h-auto p-0"
+                                                onClick={(e) => {
+                                                    e.preventDefault()
+                                                    e.stopPropagation()
+                                                    window.open(
+                                                        "/dashboard/nzcfg.html?target=public_note",
+                                                        "nzcfg",
+                                                        "width=1000,height=800",
+                                                    )
+                                                }}
+                                            >
+                                                可视化管理配置 <i className="fa-solid fa-up-right-from-square"></i>
+                                            </Button>
+                                        </FormLabel>
+                                        <FormControl>
+                                            <Textarea
+                                                className="resize-y"
+                                                placeholder="在此粘贴或使用右上角可视化工具生成配置..."
+                                                {...field}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                            <DialogFooter>
+                                <DialogClose asChild>
+                                    <Button type="button" variant="secondary">
+                                        {t("Close")}
+                                    </Button>
+                                </DialogClose>
+                                <Button type="submit">{t("Submit")}</Button>
+                            </DialogFooter>
+                        </form>
+                    </Form>
+                </DialogContent>
+            </Dialog>
+        </>
+    )
+}

src/components/install-commands.tsx

@@ -141,6 +141,7 @@ const generateCommand = (
         `NZ_SERVER=${install_host}`,
         `NZ_TLS=${tls || false}`,
         `NZ_CLIENT_SECRET=${agent_secret}`,
+        `NZ_DASHBOARD_URL=${window.location.origin}`,
     ]
     if (uuid) envParts.push(`NZ_UUID=${uuid}`)
     const env = envParts.join(" ")
@@ -156,10 +157,10 @@ const generateCommand = (
     switch (type) {
         case OSTypes.Linux:
         case OSTypes.macOS: {
-            return `curl -L https://raw.githubusercontent.com/nezhahq/scripts/main/agent/install.sh -o agent.sh && chmod +x agent.sh && env ${env} ./agent.sh`
+            return `curl -L ${window.location.origin}/script/agent.sh -o agent.sh && chmod +x agent.sh && env ${env} ./agent.sh`
         }
         case OSTypes.Windows: {
-            return `${env_win} [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Ssl3 -bor [Net.SecurityProtocolType]::Tls -bor [Net.SecurityProtocolType]::Tls11 -bor [Net.SecurityProtocolType]::Tls12;set-ExecutionPolicy RemoteSigned;Invoke-WebRequest https://raw.githubusercontent.com/nezhahq/scripts/main/agent/install.ps1 -OutFile C:\install.ps1;powershell.exe C:\install.ps1`
+            return `${env_win} [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Ssl3 -bor [Net.SecurityProtocolType]::Tls -bor [Net.SecurityProtocolType]::Tls11 -bor [Net.SecurityProtocolType]::Tls12;set-ExecutionPolicy RemoteSigned;Invoke-WebRequest ${window.location.origin}/script/agent.ps1 -OutFile C:\\install.ps1;powershell.exe C:\\install.ps1`
         }
         default: {
             throw new Error(`Unknown OS: ${type}`)

src/components/notifier.tsx

@@ -49,9 +49,9 @@ interface NotifierCardProps {
 
 const notificationFormSchema = z.object({
     name: z.string().min(1),
-    url: z.string().min(1),
+    url: z.string().default(""),
-    request_method: z.coerce.number().int().min(1).max(255),
+    request_method: z.coerce.number().int().default(1),
-    request_type: z.coerce.number().int().min(1).max(255),
+    request_type: z.coerce.number().int().default(1),
     request_header: z.string(),
     request_body: z.string(),
     verify_tls: z.boolean().default(false),
@@ -162,42 +162,33 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                                 </FormControl>
                                                 <SelectContent>
                                                     <SelectItem value="1">Webhook</SelectItem>
-                                                    <SelectItem value="2">SMTP (Email)</SelectItem>
+                                                    <SelectItem value="2">Email (Global)</SelectItem>
-                                                    <SelectItem value="3">Telegram</SelectItem>
+                                                    <SelectItem value="3">Telegram (Global)</SelectItem>
                                                 </SelectContent>
                                             </Select>
                                             <FormMessage />
                                         </FormItem>
                                     )}
                                 />
+                                {form.watch("type") == 1 && (
+                                    <>
                                         <FormField
                                             control={form.control}
                                             name="url"
                                             render={({ field }) => (
                                                 <FormItem>
-                                            <FormLabel>
+                                                    <FormLabel>URL</FormLabel>
-                                                {form.watch("type") == 2
-                                                    ? "SMTP Server (host:port)"
-                                                    : form.watch("type") == 3
-                                                      ? "Bot Token"
-                                                      : "URL"}
-                                            </FormLabel>
                                                     <FormControl>
                                                         <Input
                                                             {...field}
-                                                    placeholder={
+                                                            placeholder="https://..."
-                                                        form.watch("type") == 3
-                                                            ? "123456:ABC-DEF"
-                                                            : ""
-                                                    }
                                                         />
                                                     </FormControl>
                                                     <FormMessage />
                                                 </FormItem>
                                             )}
                                         />
-                                {form.watch("type") != 2 && form.watch("type") != 3 && (
+
-                                    <>
                                         <FormField
                                             control={form.control}
                                             name="request_method"
@@ -256,30 +247,16 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                                 </FormItem>
                                             )}
                                         />
-                                    </>
-                                )}
                                         <FormField
                                             control={form.control}
                                             name="request_header"
                                             render={({ field }) => (
                                                 <FormItem>
-                                            <FormLabel>
+                                                    <FormLabel>{t("RequestHeader")}</FormLabel>
-                                                {form.watch("type") == 2
-                                                    ? "SMTP User:Pass"
-                                                    : form.watch("type") == 3
-                                                      ? "Chat ID"
-                                                      : t("RequestHeader")}
-                                            </FormLabel>
                                                     <FormControl>
                                                         <Textarea
                                                             className="resize-y"
-                                                    placeholder={
+                                                            placeholder={'{"User-Agent":"Nezha-Agent"}'}
-                                                        form.watch("type") == 2
-                                                            ? "user:pass"
-                                                            : form.watch("type") == 3
-                                                              ? "123456789"
-                                                              : '{"User-Agent":"Nezha-Agent"}'
-                                                    }
                                                             {...field}
                                                         />
                                                     </FormControl>
@@ -287,29 +264,18 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                                 </FormItem>
                                             )}
                                         />
-                                {form.watch("type") != 3 && (
+                                    </>
+                                )}
                                 <FormField
                                     control={form.control}
                                     name="request_body"
                                     render={({ field }) => (
                                         <FormItem>
-                                                <FormLabel>
+                                            <FormLabel>{t("RequestBody")}</FormLabel>
-                                                    {form.watch("type") == 2
-                                                        ? "Recipient Email"
-                                                        : t("RequestBody")}
-                                                </FormLabel>
                                             <FormControl>
                                                 <Textarea
-                                                        className={
+                                                    className="resize-y h-[240px]"
-                                                            form.watch("type") == 2
+                                                    placeholder="..."
-                                                                ? "resize-y"
-                                                                : "resize-y h-[240px]"
-                                                        }
-                                                        placeholder={
-                                                            form.watch("type") == 2
-                                                                ? "target@example.com"
-                                                                : "..."
-                                                        }
                                                     {...field}
                                                 />
                                             </FormControl>
@@ -317,12 +283,12 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                         </FormItem>
                                     )}
                                 />
-                                )}
                                 <div className="pt-4 border-t space-y-3">
                                     <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                                         {t("AdvancedSettings")}
                                     </Label>
                                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2">
+                                        {form.watch("type") == 1 && (
                                             <FormField
                                                 control={form.control}
                                                 name="verify_tls"
@@ -340,6 +306,7 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                                     </FormItem>
                                                 )}
                                             />
+                                        )}
                                         <FormField
                                             control={form.control}
                                             name="skip_check"

src/components/server.tsx

@@ -9,7 +9,6 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogTrigger,
 } from "@/components/ui/dialog"
 import {
     Form,
@@ -95,9 +94,12 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
     useEffect(() => {
         const handleMessage = (e: MessageEvent) => {
             if (e.data?.type === "NZCFG_JSON") {
-                if (e.data.target === "public_note") {
+                const target = e.data.target === "traffic" ? "public_note" : e.data.target
-                    form.setValue("public_note", e.data.payload)
+                if (target === "public_note" || target === "note") {
-                    toast(t("Success"), { description: "配置已通过可视化构建器自动填入" })
+                    form.setValue(target, e.data.payload)
+                    toast(t("Success"), {
+                        description: `配置已自动填入${target === "public_note" ? t("PublicNote.Label") : t("Private") + t("Note")}`,
+                    })
                 }
             }
         }
@@ -127,11 +129,32 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
     }
 
     return (
-        <Dialog open={open} onOpenChange={setOpen}>
+        <>
-            <DialogTrigger asChild>
+            <IconButton
-                <IconButton variant="outline" icon="edit" />
+                variant="outline"
-            </DialogTrigger>
+                icon="edit"
-            <DialogContent className="sm:max-w-xl">
+                onClick={() => {
+                    setOpen(true)
+                }}
+            />
+            <Dialog
+                open={open}
+                onOpenChange={(val) => {
+                    setOpen(val)
+                }}
+            >
+                <DialogContent
+                    className="sm:max-w-xl"
+                    onPointerDownOutside={(e) => {
+                        e.preventDefault()
+                    }}
+                    onInteractOutside={(e) => {
+                        e.preventDefault()
+                    }}
+                    onFocusOutside={(e) => {
+                        e.preventDefault()
+                    }}
+                >
                     <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
                         <div className="items-center mx-1">
                             <DialogHeader>
@@ -248,7 +271,26 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                     name="note"
                                     render={({ field }) => (
                                         <FormItem>
-                                            <FormLabel>{t("Private") + t("Note")}</FormLabel>
+                                            <FormLabel className="flex justify-between items-center w-full">
+                                                <span>{t("Private") + t("Note")}</span>
+                                                <Button
+                                                    variant="link"
+                                                    type="button"
+                                                    className="text-blue-500 hover:text-blue-700 text-xs flex items-center gap-1 h-auto p-0"
+                                                    onClick={(e) => {
+                                                        e.preventDefault()
+                                                        e.stopPropagation()
+                                                        window.open(
+                                                            "/dashboard/nzcfg.html?target=note",
+                                                            "nzcfg",
+                                                            "width=1000,height=800",
+                                                        )
+                                                    }}
+                                                >
+                                                    可视化管理配置{" "}
+                                                    <i className="fa-solid fa-up-right-from-square"></i>
+                                                </Button>
+                                            </FormLabel>
                                             <FormControl>
                                                 <Textarea className="resize-none" {...field} />
                                             </FormControl>
@@ -256,53 +298,7 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                         </FormItem>
                                     )}
                                 />
-                                <div className="p-3 border rounded-md border-dashed space-y-2">
+
-                                    <Label className="text-xs text-muted-foreground uppercase font-bold">
-                                        Billing & Expiry
-                                    </Label>
-                                    <FormField
-                                        control={form.control as any}
-                                        name="billing_data.registrar"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>Registrar</FormLabel>
-                                                <FormControl>
-                                                    <Input
-                                                        placeholder="AWS / Azure /阿里云"
-                                                        {...field}
-                                                    />
-                                                </FormControl>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-                                    <FormField
-                                        control={form.control as any}
-                                        name="billing_data.endDate"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>Expiry Date</FormLabel>
-                                                <FormControl>
-                                                    <Input
-                                                        type="date"
-                                                        {...field}
-                                                        value={field.value?.split("T")[0] || ""}
-                                                        onChange={(e) =>
-                                                            field.onChange(
-                                                                e.target.value
-                                                                    ? new Date(
-                                                                          e.target.value,
-                                                                      ).toISOString()
-                                                                    : "",
-                                                            )
-                                                        }
-                                                    />
-                                                </FormControl>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-                                </div>
                                 <FormField
                                     control={form.control as any}
                                     name="public_note"
@@ -310,29 +306,23 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                         <FormItem>
                                             <FormLabel className="flex justify-between items-center w-full">
                                                 <span>{t("Public") + t("Note")}</span>
-                                                <a
+                                                <Button
-                                                    href="/dashboard/nzcfg.html"
+                                                    variant="link"
-                                                    target="_blank"
+                                                    type="button"
-                                                    className="text-blue-500 hover:text-blue-700 text-xs flex items-center gap-1"
+                                                    className="text-blue-500 hover:text-blue-700 text-xs flex items-center gap-1 h-auto p-0"
                                                     onClick={(e) => {
                                                         e.preventDefault()
-                                                        const popup = window.open(
+                                                        e.stopPropagation()
-                                                            "/dashboard/nzcfg.html",
+                                                        window.open(
+                                                            "/dashboard/nzcfg.html?target=public_note",
                                                             "nzcfg",
                                                             "width=1000,height=800",
                                                         )
-                                                        if (popup) {
-                                                            const timer = setInterval(() => {
-                                                                if (popup.closed) {
-                                                                    clearInterval(timer)
-                                                                }
-                                                            }, 500)
-                                                        }
                                                     }}
                                                 >
                                                     可视化管理配置{" "}
                                                     <i className="fa-solid fa-up-right-from-square"></i>
-                                                </a>
+                                                </Button>
                                             </FormLabel>
                                             <FormControl>
                                                 <Textarea className="resize-y" {...field} />
@@ -357,5 +347,6 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                 </ScrollArea>
             </DialogContent>
         </Dialog>
+        </>
     )
 }

src/locales/en/translation.json

@@ -153,6 +153,9 @@
     "IPChangeNotification": "IP Change Notification",
     "IPChangeNotificationGroupID": "IP Change Notification Group ID",
     "ExpiryNotificationGroupID": "Expiry Notification Group ID",
+    "ExpiryNotification": "Expiry Notification",
+    "DomainNotificationDays": "Domain Notification Days",
+    "ServerNotificationDays": "Server Notification Days",
     "FullIPNotification": "Show Full IP Address in Notification Messages",
     "EditService": "Edit Service",
     "CreateService": "Create Service",

src/locales/zh-CN/translation.json

@@ -160,6 +160,9 @@
     "IPChangeNotification": "IP 变更通知",
     "IPChangeNotificationGroupID": "IP 变更通知组 ID",
     "ExpiryNotificationGroupID": "到期通知组 ID",
+    "ExpiryNotification": "到期提醒设置",
+    "DomainNotificationDays": "域名到期提醒天数",
+    "ServerNotificationDays": "VPS到期提醒天数",
     "FullIPNotification": "在通知消息中显示完整的 IP 地址",
     "LoginFailed": "登录失败",
     "BruteForceAttackingToken": "暴力攻击令牌",

src/main.tsx

@@ -121,7 +121,11 @@ const router = createBrowserRouter([
             },
             {
                 path: "/dashboard/settings",
-                element: <SettingsPage />,
+                element: (
+                    <NotificationProvider withNotifierGroup>
+                        <SettingsPage />
+                    </NotificationProvider>
+                ),
             },
             {
                 path: "/dashboard/settings/user",

src/routes/server.tsx

@@ -30,7 +30,9 @@ import useSWR from "swr"
 
 export default function ServerPage() {
     const { t } = useTranslation()
-    const { data, mutate, error, isLoading } = useSWR<Server[]>("/api/v1/server", swrFetcher)
+    const { data, mutate, error, isLoading } = useSWR<Server[]>("/api/v1/server", swrFetcher, {
+        revalidateOnFocus: false,
+    })
     const { serverGroups } = useServer()
 
     useEffect(() => {
@@ -41,7 +43,8 @@ export default function ServerPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<Server>[] = [
+    const columns = useMemo<ColumnDef<Server>[]>(
+        () => [
             {
                 id: "select",
                 header: ({ table }) => (
@@ -150,7 +153,9 @@ export default function ServerPage() {
                     )
                 },
             },
-    ]
+        ],
+        [t, mutate, serverGroups],
+    )
 
     const dataCache = useMemo(() => {
         return data ?? []

src/routes/settings.tsx

@@ -59,6 +59,13 @@ const settingFormSchema = z.object({
     background_image_night: asOptionalField(z.string()),
     telegram_bot_token: asOptionalField(z.string()),
     telegram_admin_chat_id: asOptionalField(z.string()),
+    smtp_server: asOptionalField(z.string()),
+    smtp_user: asOptionalField(z.string()),
+    smtp_password: asOptionalField(z.string()),
+    admin_email: asOptionalField(z.string()),
+    domain_expiry_notification_days: asOptionalField(z.string()),
+    server_expiry_notification_days: asOptionalField(z.string()),
+    expiry_notification_group_id: z.coerce.number().int().min(0),
 })
 
 export default function SettingsPage() {
@@ -95,6 +102,9 @@ export default function SettingsPage() {
                   site_name: "",
                   language: "",
                   user_template: "user-dist",
+                  expiry_notification_group_id: 0,
+                  domain_expiry_notification_days: "",
+                  server_expiry_notification_days: "",
               },
         resetOptions: {
             keepDefaultValues: false,
@@ -133,36 +143,6 @@ export default function SettingsPage() {
             <div>
                 <Form {...form}>
                     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
-                        <FormField
-                            control={form.control}
-                            name="ip_change_notification_group_id"
-                            render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>{t("IPChangeNotificationGroupID")}</FormLabel>
-                                    <FormControl>
-                                        <Input type="number" {...field} />
-                                    </FormControl>
-                                    <FormMessage />
-                                </FormItem>
-                            )}
-                        />
-                        <FormField
-                            control={form.control}
-                            name="expiry_notification_group_id"
-                            render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>Expiry Notification Group ID</FormLabel>
-                                    <FormControl>
-                                        <Input
-                                            type="number"
-                                            placeholder="Enter Group ID"
-                                            {...field}
-                                        />
-                                    </FormControl>
-                                    <FormMessage />
-                                </FormItem>
-                            )}
-                        />
                         <FormField
                             control={form.control}
                             name="site_name"
@@ -279,6 +259,58 @@ export default function SettingsPage() {
                                 </FormItem>
                             )}
                         />
+                        <FormField
+                            control={form.control}
+                            name="smtp_server"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>SMTP Server (host:port)</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="smtp.example.com:465" {...field} value={field.value as string || ""} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="smtp_user"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>SMTP User</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="user@example.com" {...field} value={field.value as string || ""} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="smtp_password"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>SMTP Password</FormLabel>
+                                    <FormControl>
+                                        <Input type="password" placeholder="••••••••" {...field} value={field.value as string || ""} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="admin_email"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Admin Email (Recipient)</FormLabel>
+                                    <FormControl>
+                                        <Input type="email" placeholder="admin@example.com" {...field} value={field.value as string || ""} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
                         <FormField
                             control={form.control}
                             name="language"
@@ -540,6 +572,70 @@ export default function SettingsPage() {
                                 </FormItem>
                             )}
                         />
+                        <FormItem>
+                            <FormLabel>{t("ExpiryNotification")}</FormLabel>
+                            <Card className="w-full">
+                                <CardContent>
+                                    <div className="flex flex-col space-y-4 mt-4">
+                                        <FormField
+                                            control={form.control}
+                                            name="expiry_notification_group_id"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>{t("NotificationGroup")}</FormLabel>
+                                                    <Combobox
+                                                        options={ngroupList}
+                                                        defaultValue={`${field.value}`}
+                                                        onValueChange={field.onChange}
+                                                    />
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <FormField
+                                            control={form.control}
+                                            name="domain_expiry_notification_days"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("DomainNotificationDays") +
+                                                            " " +
+                                                            t("SeparateWithComma")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            placeholder="60,30,15,7,3,1,0"
+                                                            {...field}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        <FormField
+                                            control={form.control}
+                                            name="server_expiry_notification_days"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t("ServerNotificationDays") +
+                                                            " " +
+                                                            t("SeparateWithComma")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            placeholder="30,15,7,3,1,0"
+                                                            {...field}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        </FormItem>
                         <FormItem>
                             <FormLabel>{t("IPChangeNotification")}</FormLabel>
                             <Card className="w-full">

src/types/api.ts

@@ -696,6 +696,10 @@ export interface ModelSetting {
     background_image_night?: string
     telegram_bot_token?: string
     telegram_admin_chat_id?: string
+    smtp_server?: string
+    smtp_user?: string
+    smtp_password?: string
+    admin_email?: string
 }
 
 export interface ModelSettingForm {
@@ -731,6 +735,10 @@ export interface ModelSettingForm {
     background_image_night?: string
     telegram_bot_token?: string
     telegram_admin_chat_id?: string
+    smtp_server?: string
+    smtp_user?: string
+    smtp_password?: string
+    admin_email?: string
 }
 
 export interface ModelSettingResponse {