mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-29 22:06:38 +08:00
ryan
375 lines
14 KiB
TypeScript
375 lines
14 KiB
TypeScript
"use client"
|
||
|
||
import {useState} from "react"
|
||
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
|
||
import {FileText, Loader2, Pencil, Plus, Trash2} from "lucide-react"
|
||
|
||
import {Button} from "@/components/ui/button"
|
||
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
|
||
import {Input} from "@/components/ui/input"
|
||
import {Label} from "@/components/ui/label"
|
||
import {Textarea} from "@/components/ui/textarea"
|
||
import {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle} from "@/components/ui/dialog"
|
||
import {AdminService} from "@/lib/services"
|
||
import type {Template} from "@/lib/services/admin/types"
|
||
import {toast} from "sonner"
|
||
|
||
export function TemplatesManager() {
|
||
const queryClient = useQueryClient()
|
||
const [modalOpen, setModalOpen] = useState(false)
|
||
const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null)
|
||
|
||
// Form states
|
||
const [key, setKey] = useState("")
|
||
const [name, setName] = useState("")
|
||
const [type, setType] = useState("email")
|
||
const [subject, setSubject] = useState("")
|
||
const [content, setContent] = useState("")
|
||
const [description, setDescription] = useState("")
|
||
|
||
const templatesQuery = useQuery({
|
||
queryKey: ["admin", "templates"],
|
||
queryFn: () => AdminService.listTemplates(),
|
||
})
|
||
|
||
const createTemplateMutation = useMutation({
|
||
mutationFn: async () => {
|
||
await AdminService.createTemplate({
|
||
key,
|
||
name,
|
||
type,
|
||
subject,
|
||
content,
|
||
description,
|
||
})
|
||
},
|
||
onSuccess: async () => {
|
||
await queryClient.invalidateQueries({ queryKey: ["admin", "templates"] })
|
||
toast.success("通知模板已成功创建")
|
||
setModalOpen(false)
|
||
},
|
||
onError: (error: Error) => {
|
||
toast.error(error.message || "创建模板失败")
|
||
},
|
||
})
|
||
|
||
const updateTemplateMutation = useMutation({
|
||
mutationFn: async (key: string) => {
|
||
await AdminService.updateTemplate(key, {
|
||
name,
|
||
type,
|
||
subject,
|
||
content,
|
||
description,
|
||
})
|
||
},
|
||
onSuccess: async () => {
|
||
await queryClient.invalidateQueries({ queryKey: ["admin", "templates"] })
|
||
toast.success("通知模板已成功保存")
|
||
setModalOpen(false)
|
||
},
|
||
onError: (error: Error) => {
|
||
toast.error(error.message || "修改模板失败")
|
||
},
|
||
})
|
||
|
||
const deleteTemplateMutation = useMutation({
|
||
mutationFn: async (key: string) => {
|
||
await AdminService.deleteTemplate(key)
|
||
},
|
||
onSuccess: async () => {
|
||
await queryClient.invalidateQueries({ queryKey: ["admin", "templates"] })
|
||
toast.success("通知模板已删除")
|
||
},
|
||
onError: (error: Error) => {
|
||
toast.error(error.message || "删除模板失败")
|
||
},
|
||
})
|
||
|
||
const handleOpenCreate = () => {
|
||
setSelectedTemplate(null)
|
||
setKey("")
|
||
setName("")
|
||
setType("email")
|
||
setSubject("")
|
||
setContent("")
|
||
setDescription("")
|
||
setModalOpen(true)
|
||
}
|
||
|
||
const handleOpenEdit = (tmpl: Template) => {
|
||
setSelectedTemplate(tmpl)
|
||
setKey(tmpl.key)
|
||
setName(tmpl.name)
|
||
setType(tmpl.type)
|
||
setSubject(tmpl.subject || "")
|
||
setContent(tmpl.content)
|
||
setDescription(tmpl.description || "")
|
||
setModalOpen(true)
|
||
}
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
if (selectedTemplate) {
|
||
updateTemplateMutation.mutate(selectedTemplate.key)
|
||
} else {
|
||
createTemplateMutation.mutate()
|
||
}
|
||
}
|
||
|
||
const isPending = createTemplateMutation.isPending || updateTemplateMutation.isPending
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<Card className="border border-dashed shadow-sm">
|
||
<CardHeader className="border-b border-dashed pb-4 flex flex-row items-center justify-between gap-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
|
||
<FileText className="size-4" />
|
||
</div>
|
||
<div>
|
||
<CardTitle className="text-base font-semibold">通知模板管理</CardTitle>
|
||
<CardDescription className="text-xs">
|
||
配置与编辑系统各类场景的通知邮件/短信模板，支持动态变量渲染
|
||
</CardDescription>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
onClick={handleOpenCreate}
|
||
variant="secondary"
|
||
>
|
||
<Plus className="mr-1.5 size-3.5" />
|
||
新增模板
|
||
</Button>
|
||
</CardHeader>
|
||
<CardContent className="pt-6 space-y-4">
|
||
{templatesQuery.isPending ? (
|
||
<div className="flex items-center justify-center p-8">
|
||
<Loader2 className="size-6 animate-spin text-muted-foreground/50" />
|
||
</div>
|
||
) : (templatesQuery.data ?? []).length > 0 ? (
|
||
<div className="grid grid-cols-1 gap-4">
|
||
{(templatesQuery.data ?? []).map((tmpl) => (
|
||
<div
|
||
key={tmpl.id}
|
||
className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 hover:border-indigo-500/30 transition-all duration-300 shadow-sm"
|
||
>
|
||
<div className="space-y-1.5">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<span className="font-semibold text-sm text-foreground">{tmpl.name}</span>
|
||
<span className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${
|
||
tmpl.is_system
|
||
? "bg-indigo-500/10 text-indigo-500 border-indigo-500/20"
|
||
: "bg-amber-500/10 text-amber-500 border-amber-500/20"
|
||
}`}>
|
||
{tmpl.is_system ? "系统内置" : "自定义"}
|
||
</span>
|
||
<span className="text-[10px] px-2 py-0.5 rounded-full border border-border/50 bg-muted/50 text-muted-foreground font-mono">
|
||
{tmpl.type.toUpperCase()}
|
||
</span>
|
||
</div>
|
||
<div className="text-xs text-muted-foreground">
|
||
标识符: <span className="font-mono text-indigo-500 bg-indigo-500/5 px-1.5 py-0.5 rounded">{tmpl.key}</span>
|
||
{tmpl.subject && ` · 主题: ${tmpl.subject}`}
|
||
</div>
|
||
{tmpl.description && (
|
||
<p className="text-xs text-muted-foreground/80 leading-relaxed max-w-xl">
|
||
{tmpl.description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center justify-end gap-2 shrink-0">
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className="size-8 text-muted-foreground hover:text-indigo-500 hover:bg-indigo-500/10 rounded-lg transition-colors"
|
||
onClick={() => handleOpenEdit(tmpl)}
|
||
>
|
||
<Pencil className="size-4" />
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className="size-8 text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 rounded-lg transition-colors"
|
||
disabled={tmpl.is_system || deleteTemplateMutation.isPending}
|
||
onClick={() => {
|
||
if (window.confirm(`确定删除模板「${tmpl.name}」吗？`)) {
|
||
deleteTemplateMutation.mutate(tmpl.key)
|
||
}
|
||
}}
|
||
>
|
||
<Trash2 className="size-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="rounded-xl border border-dashed border-border/50 px-4 py-8 text-center text-xs text-muted-foreground bg-muted/5 flex flex-col items-center justify-center gap-3">
|
||
<span>暂无配置的通知模板，点击上方按钮新增</span>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={handleOpenCreate}
|
||
className="border-dashed"
|
||
>
|
||
<Plus className="mr-1.5 size-3.5" />
|
||
新增模板
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
||
<DialogContent className="max-w-xl border border-dashed">
|
||
<DialogHeader>
|
||
<DialogTitle className="text-base font-semibold">
|
||
{selectedTemplate ? "编辑通知模板" : "新增通知模板"}
|
||
</DialogTitle>
|
||
<DialogDescription className="text-xs">
|
||
配置模板渲染逻辑，支持 Go `text/template` 语法（例如 `{"{{.Code}}"}` 表示验证码变量）。
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div className="space-y-1.5">
|
||
<Label htmlFor="tmpl_key" className="text-xs font-semibold">
|
||
模板标识符 (Key)
|
||
</Label>
|
||
<Input
|
||
id="tmpl_key"
|
||
type="text"
|
||
required
|
||
value={key}
|
||
onChange={(e) => setKey(e.target.value)}
|
||
placeholder="例如: login_email"
|
||
className="bg-card border-dashed text-xs"
|
||
disabled={!!selectedTemplate}
|
||
/>
|
||
<p className="text-[10px] text-muted-foreground leading-normal">
|
||
模板的唯一标识，在代码中通过此 Key 调用。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-1.5">
|
||
<Label htmlFor="tmpl_name" className="text-xs font-semibold">
|
||
模板名称
|
||
</Label>
|
||
<Input
|
||
id="tmpl_name"
|
||
type="text"
|
||
required
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
placeholder="例如: 登录验证码邮件"
|
||
className="bg-card border-dashed text-xs"
|
||
/>
|
||
<p className="text-[10px] text-muted-foreground leading-normal">
|
||
用于后台识别该模板的可读名称。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-1.5">
|
||
<Label htmlFor="tmpl_type" className="text-xs font-semibold">
|
||
模板类型
|
||
</Label>
|
||
<Input
|
||
id="tmpl_type"
|
||
type="text"
|
||
required
|
||
value={type}
|
||
onChange={(e) => setType(e.target.value)}
|
||
placeholder="email"
|
||
className="bg-card border-dashed text-xs"
|
||
/>
|
||
<p className="text-[10px] text-muted-foreground leading-normal">
|
||
模板分类标识，目前支持 `email`。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-1.5">
|
||
<Label htmlFor="tmpl_subject" className="text-xs font-semibold">
|
||
模板主题 (Subject)
|
||
</Label>
|
||
<Input
|
||
id="tmpl_subject"
|
||
type="text"
|
||
value={subject}
|
||
onChange={(e) => setSubject(e.target.value)}
|
||
placeholder="例如: Wavelet 登录验证码"
|
||
className="bg-card border-dashed text-xs"
|
||
/>
|
||
<p className="text-[10px] text-muted-foreground leading-normal">
|
||
邮件标题（类型为 email 时生效）。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-1.5">
|
||
<Label htmlFor="tmpl_description" className="text-xs font-semibold">
|
||
模板说明与变量描述
|
||
</Label>
|
||
<Input
|
||
id="tmpl_description"
|
||
type="text"
|
||
value={description}
|
||
onChange={(e) => setDescription(e.target.value)}
|
||
placeholder="例如: 包含变量：{{.Code}}，5分钟内有效"
|
||
className="bg-card border-dashed text-xs"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-1.5">
|
||
<Label htmlFor="tmpl_content" className="text-xs font-semibold">
|
||
模板正文内容 (Content)
|
||
</Label>
|
||
<Textarea
|
||
id="tmpl_content"
|
||
required
|
||
value={content}
|
||
onChange={(e) => setContent(e.target.value)}
|
||
placeholder="<h3>正文标题</h3><p>内容段落，可用变量 {{.Code}}</p>"
|
||
rows={8}
|
||
className="bg-card border-dashed text-xs font-mono"
|
||
/>
|
||
</div>
|
||
|
||
<DialogFooter className="gap-2 sm:gap-0 border-t border-dashed pt-4">
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setModalOpen(false)}
|
||
disabled={isPending}
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
type="submit"
|
||
size="sm"
|
||
disabled={isPending}
|
||
>
|
||
{isPending ? (
|
||
<>
|
||
<Loader2 className="mr-1.5 size-3.5 animate-spin" />
|
||
保存中...
|
||
</>
|
||
) : (
|
||
"保存配置"
|
||
)}
|
||
</Button>
|
||
</DialogFooter>
|
||
</form>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
)
|
||
}
|