feat(push): implement system notification and push framework

frontend/components/common/admin/push/events-tab.tsx

@@ -0,0 +1,609 @@
+// Copyright 2026 Arctel.net
+// SPDX-License-Identifier: Apache-2.0
+
+"use client"
+
+import * as React from "react"
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
+import {toast} from "sonner"
+import {ChevronDown, Edit2, Layers, Loader2, Plus, Trash2,} from "lucide-react"
+
+import {Button} from "@/components/ui/button"
+import {Input} from "@/components/ui/input"
+import {Label} from "@/components/ui/label"
+import {Textarea} from "@/components/ui/textarea"
+import {Switch} from "@/components/ui/switch"
+import {Badge} from "@/components/ui/badge"
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
+import {Checkbox} from "@/components/ui/checkbox"
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover"
+
+import {ErrorInline} from "@/components/layout/error"
+import {LoadingStateWithBorder} from "@/components/layout/loading"
+import {EmptyStateWithBorder} from "@/components/layout/empty"
+
+
+import services from "@/lib/services"
+import type {CreatePushEventRequest, PushEvent, UpdatePushEventRequest,} from "@/lib/services/push"
+
+export function EventsTab() {
+  const queryClient = useQueryClient()
+
+  // --- 获取所有自定义消息通道 ---
+  const channelsQuery = useQuery({
+    queryKey: ["admin", "push-channels"],
+    queryFn: () => services.push.listChannels(),
+  })
+
+  const availableChannels = React.useMemo(() => {
+    const customChannels = (channelsQuery.data ?? [])
+      .filter(c => c.enabled)
+      .map(c => c.name)
+    return ["email", ...customChannels]
+  }, [channelsQuery.data])
+
+  // --- 获取通知事件 ---
+  const eventsQuery = useQuery({
+    queryKey: ["admin", "push-events"],
+    queryFn: () => services.push.listEvents(),
+  })
+
+  const builtInEventsQuery = useQuery({
+    queryKey: ["admin", "push-builtin-events"],
+    queryFn: () => services.push.listBuiltInEvents(),
+  })
+
+  // --- 修改保存事件 Mutation ---
+  const updateEventMutation = useMutation({
+    mutationFn: ({ id, data }: { id: number; data: UpdatePushEventRequest }) => services.push.updateEvent(id, data),
+    onSuccess: () => {
+      toast.success("事件更新成功")
+      queryClient.invalidateQueries({ queryKey: ["admin", "push-events"] })
+      setEditEventOpen(false)
+    },
+    onError: (err: unknown) => {
+      toast.error("事件更新失败: " + (err as Error).message)
+    },
+  })
+
+  const toggleEventMutation = useMutation({
+    mutationFn: (id: number) => services.push.toggleEvent(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["admin", "push-events"] })
+    },
+    onError: (err: unknown) => {
+      toast.error("操作失败: " + (err as Error).message)
+    },
+  })
+
+  const createEventMutation = useMutation({
+    mutationFn: (data: CreatePushEventRequest) => services.push.createEvent(data),
+    onSuccess: () => {
+      toast.success("事件创建成功")
+      queryClient.invalidateQueries({ queryKey: ["admin", "push-events"] })
+      setCreateEventOpen(false)
+      setNewEventKey("")
+      setNewEventChannels([])
+      setNewEventEnabled(true)
+    },
+    onError: (err: unknown) => {
+      toast.error("事件创建失败: " + (err as Error).message)
+    },
+  })
+
+  const deleteEventMutation = useMutation({
+    mutationFn: (id: number) => services.push.deleteEvent(id),
+    onSuccess: () => {
+      toast.success("配置删除成功")
+      queryClient.invalidateQueries({ queryKey: ["admin", "push-events"] })
+    },
+    onError: (err: unknown) => {
+      toast.error("配置删除失败: " + (err as Error).message)
+    },
+  })
+
+  // --- 事件编辑对话框状态 ---
+  const [editEventOpen, setEditEventOpen] = React.useState(false)
+  const [selectedEvent, setSelectedEvent] = React.useState<PushEvent | null>(null)
+  const [eventChannels, setEventChannels] = React.useState<string[]>([])
+  const [eventTargets, setEventTargets] = React.useState("")
+  const [eventTemplate, setEventTemplate] = React.useState("")
+
+  // 事件创建对话框状态
+  const [createEventOpen, setCreateEventOpen] = React.useState(false)
+  const [newEventKey, setNewEventKey] = React.useState("")
+  const [newEventChannels, setNewEventChannels] = React.useState<string[]>([])
+  const [newEventTargets, setNewEventTargets] = React.useState("")
+  const [newEventTemplate, setNewEventTemplate] = React.useState("")
+  const [newEventEnabled, setNewEventEnabled] = React.useState(true)
+
+  const availableBuiltInEvents = React.useMemo(() => {
+    const configuredKeys = new Set((eventsQuery.data ?? []).map(e => e.event_key))
+    return (builtInEventsQuery.data ?? []).filter(e => !configuredKeys.has(e.key))
+  }, [builtInEventsQuery.data, eventsQuery.data])
+
+  const handleEditEventClick = (event: PushEvent) => {
+    setSelectedEvent(event)
+    setEventChannels(event.channels)
+    setEventTargets((event.targets ?? []).join(", "))
+    setEventTemplate(event.template)
+    setEditEventOpen(true)
+  }
+
+  const handleSaveEvent = () => {
+    if (!selectedEvent) return
+
+    try {
+      JSON.parse(eventTemplate)
+    } catch {
+      toast.error("消息模板不是合法的 JSON 格式")
+      return
+    }
+
+    const targets = eventTargets
+      .split(",")
+      .map(t => t.trim())
+      .filter(t => t !== "")
+
+    updateEventMutation.mutate({
+      id: selectedEvent.id,
+      data: {
+        channels: eventChannels,
+        targets,
+        template: eventTemplate,
+        enabled: selectedEvent.enabled,
+      },
+    })
+  }
+
+  const handleCreateEventClick = () => {
+    setNewEventKey("")
+    setNewEventChannels([])
+    setNewEventTargets("")
+    setNewEventTemplate("")
+    setNewEventEnabled(true)
+    setCreateEventOpen(true)
+  }
+
+  const handleNewEventKeyChange = (key: string) => {
+    setNewEventKey(key)
+    const ev = availableBuiltInEvents.find(e => e.key === key)
+    if (ev) {
+      setNewEventTemplate(JSON.stringify(ev.default_template, null, 2))
+    } else {
+      setNewEventTemplate("")
+    }
+  }
+
+  const handleCreateEvent = () => {
+    if (!newEventKey) {
+      toast.error("请选择系统事件")
+      return
+    }
+
+    if (newEventTemplate) {
+      try {
+        JSON.parse(newEventTemplate)
+      } catch {
+        toast.error("内容渲染模板不是合法的 JSON 格式")
+        return
+      }
+    }
+
+    const targets = newEventTargets
+      .split(",")
+      .map(t => t.trim())
+      .filter(t => t !== "")
+
+    createEventMutation.mutate({
+      event_key: newEventKey,
+      channels: newEventChannels,
+      targets: targets.length > 0 ? targets : undefined,
+      template: newEventTemplate || undefined,
+      enabled: newEventEnabled,
+    })
+  }
+
+  return (
+    <div className="pt-4 space-y-4">
+      <div className="flex justify-end">
+        <Button size="sm" onClick={handleCreateEventClick} className="text-xs">
+          <Plus className="size-3.5 mr-1" />
+          新增通知事件
+        </Button>
+      </div>
+      {eventsQuery.isLoading ? (
+        <LoadingStateWithBorder icon={Layers} description="加载通知事件中..." />
+      ) : eventsQuery.isError ? (
+        <div className="p-8 border border-dashed rounded-xl bg-card">
+          <ErrorInline error={eventsQuery.error} onRetry={() => eventsQuery.refetch()} className="justify-center" />
+        </div>
+      ) : (eventsQuery.data ?? []).length === 0 ? (
+        <EmptyStateWithBorder icon={Layers} description="暂无通知配置事件，请点击右上角新增" />
+      ) : (
+        <div className="border border-dashed shadow-none rounded-lg overflow-hidden">
+          <Table className="w-full caption-bottom text-sm min-w-full">
+            <TableHeader className="sticky top-0 z-20 bg-background">
+              <TableRow className="border-b border-dashed hover:bg-transparent">
+                <TableHead className="w-[80px] whitespace-nowrap py-2 h-8">ID</TableHead>
+                <TableHead className="w-[180px] whitespace-nowrap py-2 h-8">通知事件</TableHead>
+                <TableHead className="w-[200px] whitespace-nowrap py-2 h-8">关联渠道</TableHead>
+                <TableHead className="whitespace-nowrap py-2 h-8">推送目标</TableHead>
+                <TableHead className="w-[80px] text-center whitespace-nowrap py-2 h-8">状态</TableHead>
+                <TableHead className="sticky right-0 text-center bg-background z-10 w-[110px] py-2 h-8">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {(eventsQuery.data ?? []).map((event) => (
+                <TableRow
+                  key={event.id}
+                  className="border-dashed hover:bg-muted/30 cursor-pointer group"
+                  onClick={() => handleEditEventClick(event)}
+                >
+                  <TableCell className="font-mono text-[11px] text-muted-foreground py-1">{event.id}</TableCell>
+                  <TableCell className="py-1">
+                    <div className="flex flex-col gap-0.5">
+                      <span className="font-medium text-[11px] leading-tight" title={event.name}>{event.name}</span>
+                      <span className="text-[10px] text-muted-foreground font-mono leading-tight">{event.event_key}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="py-1">
+                    <div className="flex flex-wrap gap-1">
+                      {(event.channels ?? []).length === 0 ? (
+                        <span className="text-xs text-muted-foreground italic">未指定渠道</span>
+                      ) : (
+                        event.channels.map(ch => (
+                          <Badge key={ch} variant="secondary" className="text-[10px] py-0 px-1.5 h-4.5">
+                            {ch === "email" ? "邮件" : ch}
+                          </Badge>
+                        ))
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className="py-1">
+                    <div className="flex flex-wrap gap-1">
+                      {(!event.targets || event.targets.length === 0) ? (
+                        <span className="text-muted-foreground text-[10px] font-mono">-</span>
+                      ) : (
+                        event.targets.map(t => (
+                          <Badge key={t} variant="outline" className="text-[10px] max-w-[150px] truncate py-0 px-1.5 h-4.5">
+                            {t}
+                          </Badge>
+                        ))
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-center py-1" onClick={(e) => e.stopPropagation()}>
+                    <Switch
+                      checked={event.enabled}
+                      onCheckedChange={() => toggleEventMutation.mutate(event.id)}
+                      className="scale-75 data-[state=checked]:bg-green-600 h-4 w-7"
+                    />
+                  </TableCell>
+                  <TableCell className="sticky right-0 text-center bg-background z-10 py-1" onClick={(e) => e.stopPropagation()}>
+                    <div className="flex items-center justify-center gap-0.5">
+                      <TooltipProvider delayDuration={0}>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-6 w-6 text-muted-foreground hover:text-foreground"
+                              onClick={() => handleEditEventClick(event)}
+                            >
+                              <Edit2 className="size-3" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" className="text-xs">
+                            配置
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+
+                      <TooltipProvider delayDuration={0}>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-6 w-6 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                              disabled={deleteEventMutation.isPending}
+                              onClick={() => {
+                                if (confirm("确定要删除该通知事件配置吗？")) {
+                                  deleteEventMutation.mutate(event.id)
+                                }
+                              }}
+                            >
+                              <Trash2 className="size-3" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" className="text-xs">
+                            删除
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {/* ==================== 对话框：新增事件 ==================== */}
+      <Dialog open={createEventOpen} onOpenChange={setCreateEventOpen}>
+        <DialogContent className="sm:max-w-[550px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>新增通知事件</DialogTitle>
+            <DialogDescription>
+              选择系统内置的事件并绑定推送渠道，创建后即可开始生效
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">系统事件</Label>
+              {builtInEventsQuery.isLoading ? (
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Loader2 className="size-3.5 animate-spin" />
+                  <span>加载系统事件中...</span>
+                </div>
+              ) : availableBuiltInEvents.length === 0 ? (
+                <div className="text-xs text-muted-foreground italic border p-2.5 rounded bg-muted/20">
+                  所有内置事件都已配置，没有可新增的事件。
+                </div>
+              ) : (
+                <Select value={newEventKey} onValueChange={handleNewEventKeyChange}>
+                  <SelectTrigger className="text-xs h-9">
+                    <SelectValue placeholder="请选择系统事件" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {availableBuiltInEvents.map(ev => (
+                      <SelectItem key={ev.key} value={ev.key} className="text-xs">
+                        {ev.name} ({ev.key})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+
+            {newEventKey && (
+              <div className="text-[11px] bg-muted/30 p-2.5 rounded border text-muted-foreground space-y-1">
+                <span className="font-semibold text-foreground">事件说明：</span>
+                <span>
+                  {availableBuiltInEvents.find(e => e.key === newEventKey)?.description || "无描述信息"}
+                </span>
+              </div>
+            )}
+
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">推送渠道 (可多选)</Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" className="w-full justify-between text-xs h-9 font-normal">
+                    {newEventChannels.length > 0
+                      ? newEventChannels
+                          .map(ch => {
+                            if (ch === "email") return "邮件"
+                            return ch
+                          })
+                          .join(", ")
+                      : "选择已配置推送渠道"}
+                    <ChevronDown className="ml-2 size-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-3" align="start">
+                  <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                    {availableChannels.map(ch => (
+                      <label key={ch} className="flex items-center gap-2 text-xs font-medium cursor-pointer p-1.5 hover:bg-muted rounded transition-colors">
+                        <Checkbox
+                          checked={newEventChannels.includes(ch)}
+                          onCheckedChange={checked => {
+                            if (checked) {
+                              setNewEventChannels([...newEventChannels, ch])
+                            } else {
+                              setNewEventChannels(newEventChannels.filter(c => c !== ch))
+                            }
+                          }}
+                        />
+                        <span>
+                          {ch === "email" ? "邮件推送 (内置)" : ch}
+                        </span>
+                      </label>
+                    ))}
+                    {availableChannels.length === 0 && (
+                      <div className="text-[11px] text-muted-foreground italic p-1">
+                        暂无可用渠道，请先在“通道管理与设置”中创建或启用。
+                      </div>
+                    )}
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold">推送目标 (仅邮件等渠道需要)</Label>
+              <Input
+                type="text"
+                placeholder="多个目标用英文逗号分隔，例如：user1@test.com, user2@test.com"
+                value={newEventTargets}
+                onChange={e => setNewEventTargets(e.target.value)}
+                className="text-xs h-9"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <div className="flex justify-between items-center">
+                <Label className="text-xs font-semibold">内容渲染模板 (JSON 格式)</Label>
+                <span className="text-[10px] text-muted-foreground font-mono flex items-center">
+                  支持变量：{"{{user.username}}"}, {"{{ip}}"}, {"{{time}}"}
+                </span>
+              </div>
+              <Textarea
+                value={newEventTemplate}
+                onChange={e => setNewEventTemplate(e.target.value)}
+                rows={6}
+                className="text-xs font-mono"
+                placeholder='{"title": "管理员登录提醒", "content": "管理员 {{user.username}} ...", "level": "INFO"}'
+              />
+            </div>
+
+            <div className="flex items-center justify-between p-3 border rounded-lg bg-muted/10">
+              <div className="space-y-0.5">
+                <Label className="text-xs font-semibold">启用状态</Label>
+                <div className="text-[10px] text-muted-foreground">创建后是否立即开始接收此事件的通知</div>
+              </div>
+              <Switch
+                checked={newEventEnabled}
+                onCheckedChange={setNewEventEnabled}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setCreateEventOpen(false)} className="h-9 text-xs">
+              取消
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              disabled={createEventMutation.isPending || availableBuiltInEvents.length === 0}
+              onClick={handleCreateEvent}
+              className="h-9 px-5 text-xs"
+            >
+              {createEventMutation.isPending && <Loader2 className="size-3 animate-spin mr-1" />}
+              启用保存
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ==================== 对话框：编辑事件 ==================== */}
+      <Dialog open={editEventOpen} onOpenChange={setEditEventOpen}>
+        <DialogContent className="sm:max-w-[550px] max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>事件通知渠道配置</DialogTitle>
+            <DialogDescription>
+              自定义本事件触发时，需要异步推送的渠道以及接收人邮箱等配置
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedEvent && (
+            <div className="space-y-5 py-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-semibold text-muted-foreground">事件名称</Label>
+                  <Input value={selectedEvent.name} disabled className="text-xs h-9 bg-muted" />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-semibold text-muted-foreground">事件键 (Key)</Label>
+                  <Input value={selectedEvent.event_key} disabled className="text-xs h-9 font-mono bg-muted" />
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label className="text-xs font-semibold">推送渠道 (可多选)</Label>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" className="w-full justify-between text-xs h-9 font-normal">
+                      {eventChannels.length > 0
+                        ? eventChannels
+                            .map(ch => {
+                              if (ch === "email") return "邮件"
+                              return ch
+                            })
+                            .join(", ")
+                        : "选择已配置推送渠道"}
+                      <ChevronDown className="ml-2 size-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-3" align="start">
+                    <div className="space-y-2 max-h-[200px] overflow-y-auto">
+                      {availableChannels.map(ch => (
+                        <label key={ch} className="flex items-center gap-2 text-xs font-medium cursor-pointer p-1.5 hover:bg-muted rounded transition-colors">
+                          <Checkbox
+                            checked={eventChannels.includes(ch)}
+                            onCheckedChange={checked => {
+                              if (checked) {
+                                setEventChannels([...eventChannels, ch])
+                              } else {
+                                setEventChannels(eventChannels.filter(c => c !== ch))
+                              }
+                            }}
+                          />
+                          <span>
+                            {ch === "email" ? "邮件推送 (内置)" : ch}
+                          </span>
+                        </label>
+                      ))}
+                      {availableChannels.length === 0 && (
+                        <div className="text-[11px] text-muted-foreground italic p-1">
+                          暂无可用渠道，请先在“通道管理与设置”中创建并启用。
+                        </div>
+                      )}
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label className="text-xs font-semibold">推送目标 (仅邮件等渠道需要)</Label>
+                <Input
+                  type="text"
+                  placeholder="多个目标用英文逗号分隔，例如：user1@test.com, user2@test.com"
+                  value={eventTargets}
+                  onChange={e => setEventTargets(e.target.value)}
+                  className="text-xs h-9"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <div className="flex justify-between items-center">
+                  <Label className="text-xs font-semibold">内容渲染模板 (JSON 格式)</Label>
+                  <span className="text-[10px] text-muted-foreground font-mono flex items-center">
+                    支持变量：{"{{user.username}}"}, {"{{ip}}"}, {"{{time}}"}
+                  </span>
+                </div>
+                <Textarea
+                  value={eventTemplate}
+                  onChange={e => setEventTemplate(e.target.value)}
+                  rows={6}
+                  className="text-xs font-mono"
+                  placeholder='{"title": "管理员登录提醒", "content": "管理员 {{user.username}} ...", "level": "INFO"}'
+                />
+              </div>
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button variant="outline" size="sm" onClick={() => setEditEventOpen(false)} className="h-9 text-xs">
+              取消
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              disabled={updateEventMutation.isPending}
+              onClick={handleSaveEvent}
+              className="h-9 px-5 text-xs"
+            >
+              {updateEventMutation.isPending && <Loader2 className="size-3 animate-spin mr-1" />}
+              保存修改
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}