From ec38164aff3f52f7d9ea9da94393c40c2a80180b Mon Sep 17 00:00:00 2001
From: Bot <bot@example.com>
Date: Mon, 11 May 2026 17:35:06 +0800
Subject: [PATCH] feat: optimize server management and fix visual config sync

---
 public/nzcfg.html         |  21 ++--
 src/components/server.tsx | 158 +++++++++++++---------------
 src/routes/server.tsx     | 215 +++++++++++++++++++-------------------
 3 files changed, 200 insertions(+), 194 deletions(-)

diff --git a/public/nzcfg.html b/public/nzcfg.html
index 0dd188f..b08b2c8 100644
--- a/public/nzcfg.html
+++ b/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("已生成并同步至控制面板中！")
-                        window.close()
+                        if (btn) {
+                            btn.innerHTML = '<i class="fas fa-check"></i> 已同步至控制面板';
+                            btn.style.backgroundColor = '#2ecc71';
+                        }
+                        setTimeout(() => {
+                            window.close();
+                        }, 600);
                     } else {
                         alert("已复制到剪贴板！")
                     }
diff --git a/src/components/server.tsx b/src/components/server.tsx
index 018cd68..2b128f9 100644
--- a/src/components/server.tsx
+++ b/src/components/server.tsx
@@ -95,9 +95,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") {
-                    form.setValue("public_note", e.data.payload)
-                    toast(t("Success"), { description: "配置已通过可视化构建器自动填入" })
+                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")}`,
+                    })
                 }
             }
         }
@@ -127,24 +130,45 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
     }
 
     return (
-        <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-                <IconButton variant="outline" icon="edit" />
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-xl">
-                <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>
+        <>
+            <IconButton
+                variant="outline"
+                icon="edit"
+                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>
+                                <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 +272,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 +299,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 +307,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
-                                                    href="/dashboard/nzcfg.html"
-                                                    target="_blank"
-                                                    className="text-blue-500 hover:text-blue-700 text-xs flex items-center gap-1"
+                                                <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()
-                                                        const popup = window.open(
-                                                            "/dashboard/nzcfg.html",
+                                                        e.stopPropagation()
+                                                        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 +348,6 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                 </ScrollArea>
             </DialogContent>
         </Dialog>
+        </>
     )
 }
diff --git a/src/routes/server.tsx b/src/routes/server.tsx
index d32530a..30e2990 100644
--- a/src/routes/server.tsx
+++ b/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>[] = [
-        {
-            id: "select",
-            header: ({ table }) => (
-                <Checkbox
-                    checked={
-                        table.getIsAllPageRowsSelected() ||
-                        (table.getIsSomePageRowsSelected() && "indeterminate")
-                    }
-                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-                    aria-label="Select all"
-                />
-            ),
-            cell: ({ row }) => (
-                <Checkbox
-                    checked={row.getIsSelected()}
-                    onCheckedChange={(value) => row.toggleSelected(!!value)}
-                    aria-label="Select row"
-                />
-            ),
-            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>
+    const columns = useMemo<ColumnDef<Server>[]>(
+        () => [
+            {
+                id: "select",
+                header: ({ table }) => (
+                    <Checkbox
+                        checked={
+                            table.getIsAllPageRowsSelected() ||
+                            (table.getIsSomePageRowsSelected() && "indeterminate")
+                        }
+                        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                        aria-label="Select all"
+                    />
+                ),
+                cell: ({ row }) => (
+                    <Checkbox
+                        checked={row.getIsSelected()}
+                        onCheckedChange={(value) => row.toggleSelected(!!value)}
+                        aria-label="Select row"
+                    />
+                ),
+                enableSorting: false,
+                enableHiding: false,
             },
-        },
-        {
-            header: t("Group"),
-            accessorKey: "groups",
-            accessorFn: (row) => {
-                return (
-                    serverGroups
-                        ?.filter((sg) => sg.servers?.includes(row.id!))
-                        .map((sg) => sg.group.id) || []
-                )
+            {
+                header: "ID",
+                accessorKey: "id",
+                accessorFn: (row) => `${row.id}(${row.display_index})`,
             },
-        },
-        {
-            id: "ip",
-            header: "IP",
-            cell: ({ row }) => {
-                const s = row.original
-                return (
-                    <div className="max-w-24 whitespace-normal break-words">
-                        {joinIP(s.geoip?.ip)}
-                    </div>
-                )
+            {
+                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: t("Version"),
-            accessorKey: "host.version",
-            accessorFn: (row) => row.host?.version || t("Unknown"),
-        },
-        {
-            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 }} />
+            {
+                header: t("Group"),
+                accessorKey: "groups",
+                accessorFn: (row) => {
+                    return (
+                        serverGroups
+                            ?.filter((sg) => sg.servers?.includes(row.id!))
+                            .map((sg) => sg.group.id) || []
+                    )
+                },
             },
-        },
-        {
-            id: "uuid",
-            header: "UUID",
-            cell: ({ row }) => {
-                const s = row.original
-                return <CopyButton text={s.uuid} />
+            {
+                id: "ip",
+                header: "IP",
+                cell: ({ row }) => {
+                    const s = row.original
+                    return (
+                        <div className="max-w-24 whitespace-normal break-words">
+                            {joinIP(s.geoip?.ip)}
+                        </div>
+                    )
+                },
             },
-        },
-        {
-            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>
-                )
+            {
+                header: t("Version"),
+                accessorKey: "host.version",
+                accessorFn: (row) => row.host?.version || t("Unknown"),
             },
-        },
-    ]
+            {
+                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 ?? []