模板系统

frontend/components/common/settings/security.tsx

@@ -30,6 +30,7 @@ import {Label} from "@/components/ui/label"
 import {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle} from "@/components/ui/dialog"
 import {useAuth} from "@/components/providers/auth-provider"
 import {AuthSourceModal} from "@/components/common/settings/auth-source-modal"
+import {TemplatesManager} from "@/components/common/settings/templates"
 import {AdminService, apiConfig} from "@/lib/services"
 import type {AuthSource, SystemConfig} from "@/lib/services/admin"
 import {toast} from "sonner"
@@ -74,8 +75,6 @@ const SECURITY_KEYS = [
   },
 ] as const
 
-type SecurityKey = (typeof SECURITY_KEYS)[number]["key"]
-
 function systemConfigMap(configs: SystemConfig[]) {
   return configs.reduce<Record<string, SystemConfig>>((accumulator, config) => {
     accumulator[config.key] = config
@@ -671,7 +670,9 @@ export function SecurityMain() {
             </Card>
           </div>
         </TabsContent>
-        <TabsContent value="operation" />
+        <TabsContent value="operation" className="pt-4">
+          <TemplatesManager />
+        </TabsContent>
         <TabsContent value="system" className="pt-4">
           <div className="space-y-6">
             {/* 通用设置 */}

frontend/components/common/settings/templates.tsx

@@ -0,0 +1,374 @@
+"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>
+  )
+}