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>
                                     )}
                                 />
-                                <FormField
+                                {form.watch("type") == 1 && (
-                                    control={form.control}
-                                    name="url"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>
-                                                {form.watch("type") == 2
-                                                    ? "SMTP Server (host:port)"
-                                                    : form.watch("type") == 3
-                                                      ? "Bot Token"
-                                                      : "URL"}
-                                            </FormLabel>
-                                            <FormControl>
-                                                <Input
-                                                    {...field}
-                                                    placeholder={
-                                                        form.watch("type") == 3
-                                                            ? "123456:ABC-DEF"
-                                                            : ""
-                                                    }
-                                                />
-                                            </FormControl>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
-                                />
-                                {form.watch("type") != 2 && form.watch("type") != 3 && (
                                     <>
+                                        <FormField
+                                            control={form.control}
+                                            name="url"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>URL</FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            placeholder="https://..."
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+
                                         <FormField
                                             control={form.control}
                                             name="request_method"
@@ -256,30 +247,35 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                                 </FormItem>
                                             )}
                                         />
+                                        <FormField
+                                            control={form.control}
+                                            name="request_header"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>{t("RequestHeader")}</FormLabel>
+                                                    <FormControl>
+                                                        <Textarea
+                                                            className="resize-y"
+                                                            placeholder={'{"User-Agent":"Nezha-Agent"}'}
+                                                            {...field}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
                                     </>
                                 )}
                                 <FormField
                                     control={form.control}
-                                    name="request_header"
+                                    name="request_body"
                                     render={({ field }) => (
                                         <FormItem>
-                                            <FormLabel>
+                                            <FormLabel>{t("RequestBody")}</FormLabel>
-                                                {form.watch("type") == 2
-                                                    ? "SMTP User:Pass"
-                                                    : form.watch("type") == 3
-                                                      ? "Chat ID"
-                                                      : t("RequestHeader")}
-                                            </FormLabel>
                                             <FormControl>
                                                 <Textarea
-                                                    className="resize-y"
+                                                    className="resize-y h-[240px]"
-                                                    placeholder={
+                                                    placeholder="..."
-                                                        form.watch("type") == 2
-                                                            ? "user:pass"
-                                                            : form.watch("type") == 3
-                                                              ? "123456789"
-                                                              : '{"User-Agent":"Nezha-Agent"}'
-                                                    }
                                                     {...field}
                                                 />
                                             </FormControl>
@@ -287,59 +283,30 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                         </FormItem>
                                     )}
                                 />
-                                {form.watch("type") != 3 && (
-                                    <FormField
-                                        control={form.control}
-                                        name="request_body"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>
-                                                    {form.watch("type") == 2
-                                                        ? "Recipient Email"
-                                                        : t("RequestBody")}
-                                                </FormLabel>
-                                                <FormControl>
-                                                    <Textarea
-                                                        className={
-                                                            form.watch("type") == 2
-                                                                ? "resize-y"
-                                                                : "resize-y h-[240px]"
-                                                        }
-                                                        placeholder={
-                                                            form.watch("type") == 2
-                                                                ? "target@example.com"
-                                                                : "..."
-                                                        }
-                                                        {...field}
-                                                    />
-                                                </FormControl>
-                                                <FormMessage />
-                                            </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">
-                                        <FormField
+                                        {form.watch("type") == 1 && (
-                                            control={form.control}
+                                            <FormField
-                                            name="verify_tls"
+                                                control={form.control}
-                                            render={({ field }) => (
+                                                name="verify_tls"
-                                                <FormItem className="flex items-center space-x-2 space-y-0 py-1">
+                                                render={({ field }) => (
-                                                    <FormControl>
+                                                    <FormItem className="flex items-center space-x-2 space-y-0 py-1">
-                                                        <Checkbox
+                                                        <FormControl>
-                                                            checked={field.value}
+                                                            <Checkbox
-                                                            onCheckedChange={field.onChange}
+                                                                checked={field.value}
-                                                        />
+                                                                onCheckedChange={field.onChange}
-                                                    </FormControl>
+                                                            />
-                                                    <FormLabel className="text-sm font-normal cursor-pointer">
+                                                        </FormControl>
-                                                        {t("VerifyTLS")}
+                                                        <FormLabel className="text-sm font-normal cursor-pointer">
-                                                    </FormLabel>
+                                                            {t("VerifyTLS")}
-                                                </FormItem>
+                                                        </FormLabel>
-                                            )}
+                                                    </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,24 +129,45 @@ 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={() => {
-                <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
+                    setOpen(true)
-                    <div className="items-center mx-1">
+                }}
-                        <DialogHeader>
+            />
-                            <DialogTitle>{t("EditServer")}</DialogTitle>
+            <Dialog
-                            <DialogDescription />
+                open={open}
-                        </DialogHeader>
+                onOpenChange={(val) => {
-                        <Form {...(form as any)}>
+                    setOpen(val)
-                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
+                }}
-                                <FormField
+            >
-                                    control={form.control as any}
+                <DialogContent
-                                    name="name"
+                    className="sm:max-w-xl"
-                                    render={({ field }) => (
+                    onPointerDownOutside={(e) => {
-                                        <FormItem>
+                        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>
+                                <DialogTitle>{t("EditServer")}</DialogTitle>
+                                <DialogDescription />
+                            </DialogHeader>
+                            <Form {...(form as any)}>
+                                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
+                                    <FormField
+                                        control={form.control as any}
+                                        name="name"
+                                        render={({ field }) => (
+                                            <FormItem>
                                             <FormLabel>{t("Name")}</FormLabel>
                                             <FormControl>
                                                 <Input placeholder="My Server" {...field} />
@@ -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,116 +43,119 @@ 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 }) => (
+                id: "select",
-                <Checkbox
+                header: ({ table }) => (
-                    checked={
+                    <Checkbox
-                        table.getIsAllPageRowsSelected() ||
+                        checked={
-                        (table.getIsSomePageRowsSelected() && "indeterminate")
+                            table.getIsAllPageRowsSelected() ||
-                    }
+                            (table.getIsSomePageRowsSelected() && "indeterminate")
-                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                        }
-                    aria-label="Select all"
+                        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-                />
+                        aria-label="Select all"
-            ),
+                    />
-            cell: ({ row }) => (
+                ),
-                <Checkbox
+                cell: ({ row }) => (
-                    checked={row.getIsSelected()}
+                    <Checkbox
-                    onCheckedChange={(value) => row.toggleSelected(!!value)}
+                        checked={row.getIsSelected()}
-                    aria-label="Select row"
+                        onCheckedChange={(value) => row.toggleSelected(!!value)}
-                />
+                        aria-label="Select row"
-            ),
+                    />
-            enableSorting: false,
+                ),
-            enableHiding: false,
+                enableSorting: false,
-        },
+                enableHiding: false,
-        {
-            header: "ID",
-            accessorKey: "id",
-            accessorFn: (row) => `${row.id}(${row.display_index})`,
-        },
-        {
-            header: t("Name"),
-            accessorKey: "name",
-            accessorFn: (row) => row.name,
-            cell: ({ row }) => {
-                const s = row.original
-                return <div className="max-w-24 whitespace-normal break-words">{s.name}</div>
             },
-        },
+            {
-        {
+                header: "ID",
-            header: t("Group"),
+                accessorKey: "id",
-            accessorKey: "groups",
+                accessorFn: (row) => `${row.id}(${row.display_index})`,
-            accessorFn: (row) => {
-                return (
-                    serverGroups
-                        ?.filter((sg) => sg.servers?.includes(row.id!))
-                        .map((sg) => sg.group.id) || []
-                )
             },
-        },
+            {
-        {
+                header: t("Name"),
-            id: "ip",
+                accessorKey: "name",
-            header: "IP",
+                accessorFn: (row) => row.name,
-            cell: ({ row }) => {
+                cell: ({ row }) => {
-                const s = row.original
+                    const s = row.original
-                return (
+                    return <div className="max-w-24 whitespace-normal break-words">{s.name}</div>
-                    <div className="max-w-24 whitespace-normal break-words">
+                },
-                        {joinIP(s.geoip?.ip)}
-                    </div>
-                )
             },
-        },
+            {
-        {
+                header: t("Group"),
-            header: t("Version"),
+                accessorKey: "groups",
-            accessorKey: "host.version",
+                accessorFn: (row) => {
-            accessorFn: (row) => row.host?.version || t("Unknown"),
+                    return (
-        },
+                        serverGroups
-        {
+                            ?.filter((sg) => sg.servers?.includes(row.id!))
-            header: t("EnableDDNS"),
+                            .map((sg) => sg.group.id) || []
-            accessorKey: "enableDDNS",
+                    )
-            accessorFn: (row) => row.enable_ddns ?? false,
+                },
-        },
-        {
-            header: t("HideForGuest"),
-            accessorKey: "hideForGuest",
-            accessorFn: (row) => row.hide_for_guest ?? false,
-        },
-        {
-            id: "note",
-            header: t("Note"),
-            cell: ({ row }) => {
-                const s = row.original
-                return <NoteMenu note={{ private: s.note, public: s.public_note }} />
             },
-        },
+            {
-        {
+                id: "ip",
-            id: "uuid",
+                header: "IP",
-            header: "UUID",
+                cell: ({ row }) => {
-            cell: ({ row }) => {
+                    const s = row.original
-                const s = row.original
+                    return (
-                return <CopyButton text={s.uuid} />
+                        <div className="max-w-24 whitespace-normal break-words">
+                            {joinIP(s.geoip?.ip)}
+                        </div>
+                    )
+                },
             },
-        },
+            {
-        {
+                header: t("Version"),
-            id: "actions",
+                accessorKey: "host.version",
-            header: t("Actions"),
+                accessorFn: (row) => row.host?.version || t("Unknown"),
-            cell: ({ row }) => {
-                const s = row.original
-                return (
-                    <ActionButtonGroup
-                        className="flex gap-2"
-                        delete={{ fn: deleteServer, id: s.id!, mutate: mutate }}
-                    >
-                        <>
-                            <ServerCard mutate={mutate} data={s} />
-                            <ServerConfigCard sid={s.id!} variant="outline" />
-                        </>
-                    </ActionButtonGroup>
-                )
             },
-        },
+            {
-    ]
+                header: t("EnableDDNS"),
+                accessorKey: "enableDDNS",
+                accessorFn: (row) => row.enable_ddns ?? false,
+            },
+            {
+                header: t("HideForGuest"),
+                accessorKey: "hideForGuest",
+                accessorFn: (row) => row.hide_for_guest ?? false,
+            },
+            {
+                id: "note",
+                header: t("Note"),
+                cell: ({ row }) => {
+                    const s = row.original
+                    return <NoteMenu note={{ private: s.note, public: s.public_note }} />
+                },
+            },
+            {
+                id: "uuid",
+                header: "UUID",
+                cell: ({ row }) => {
+                    const s = row.original
+                    return <CopyButton text={s.uuid} />
+                },
+            },
+            {
+                id: "actions",
+                header: t("Actions"),
+                cell: ({ row }) => {
+                    const s = row.original
+                    return (
+                        <ActionButtonGroup
+                            className="flex gap-2"
+                            delete={{ fn: deleteServer, id: s.id!, mutate: mutate }}
+                        >
+                            <>
+                                <ServerCard mutate={mutate} data={s} />
+                                <ServerConfigCard sid={s.id!} variant="outline" />
+                            </>
+                        </ActionButtonGroup>
+                    )
+                },
+            },
+        ],
+        [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 {