feat(mailbox): 支持用户自助申请邮箱

- 后端新增邮箱申请配置与接口，限制可申请域名并校验保留前缀。
- 管理后台系统设置增加自助申请邮箱开关、开放域名和禁止前缀配置。
- 个人中心新增申请邮箱入口，并在邮箱页优化当前邮箱切换与空列表处理。
- 补充相关测试与环境变量示例配置。

apps/web/src/pages/admin.tsx

@@ -4,12 +4,13 @@ import { useSearchParams } from "react-router-dom"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { CheckCircle2, Copy, Globe2, Mailbox, MoreHorizontal, Plus, RefreshCcw, Search, ShieldCheck, Trash2, Users } from "lucide-react"
 import { api, AdminUser, Alias, DNSRecord, Domain, Mailbox as MailboxType, MailMessage, MailTemplate, SystemSettings } from "@/lib/api"
-import { formatBytes, formatDate } from "@/lib/utils"
+import { cn, formatBytes, formatDate } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Checkbox } from "@/components/ui/checkbox"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { ScrollArea } from "@/components/ui/scroll-area"
@@ -79,7 +80,7 @@ export function AdminPage() {
         {section === "mailboxes" && <MailboxesSection mailboxes={mailboxItems} users={userItems} />}
         {section === "aliases" && <AliasesSection aliases={aliasItems} domains={domainItems} />}
         {section === "messages" && <AdminMessagesSection mailboxes={mailboxItems} />}
-        {section === "settings" && <SystemSettingsSection settings={settings.data} />}
+        {section === "settings" && <SystemSettingsSection settings={settings.data} domains={domainItems} />}
       </main>
     </ScrollArea>
   )
@@ -371,7 +372,7 @@ function AdminMessagesSection({ mailboxes }: { mailboxes: MailboxType[] }) {
   )
 }
 
-function SystemSettingsSection({ settings }: { settings?: SystemSettings }) {
+function SystemSettingsSection({ settings, domains }: { settings?: SystemSettings; domains: Domain[] }) {
   const qc = useQueryClient()
   const { toast } = useToast()
   const templates = useQuery({ queryKey: ["admin", "mail-templates"], queryFn: api.mailTemplates })
@@ -383,6 +384,8 @@ function SystemSettingsSection({ settings }: { settings?: SystemSettings }) {
   const [turnstileEnabled, setTurnstileEnabled] = React.useState(false)
   const [catchAllEnabled, setCatchAllEnabled] = React.useState(false)
   const [mailAutoRefresh, setMailAutoRefresh] = React.useState(true)
+  const [userMailboxApplyEnabled, setUserMailboxApplyEnabled] = React.useState(false)
+  const [userMailboxDomainIds, setUserMailboxDomainIds] = React.useState<string[]>([])
   React.useEffect(() => {
     if (!settings) return
     setSmtpRequireTls(settings.smtpRequireTls)
@@ -392,6 +395,8 @@ function SystemSettingsSection({ settings }: { settings?: SystemSettings }) {
     setTurnstileEnabled(settings.turnstileEnabled)
     setCatchAllEnabled(settings.catchAllEnabled)
     setMailAutoRefresh(settings.mailAutoRefresh)
+    setUserMailboxApplyEnabled(settings.userMailboxApplyEnabled)
+    setUserMailboxDomainIds(settings.userMailboxDomainIds || [])
   }, [settings])
   const save = useMutation({
     mutationFn: (form: FormData) => api.updateSystemSettings({
@@ -414,6 +419,9 @@ function SystemSettingsSection({ settings }: { settings?: SystemSettings }) {
       catchAllEnabled,
       mailAutoRefresh,
       mailRefreshSeconds: fieldNumber(form, "mailRefreshSeconds", settings?.mailRefreshSeconds || 30),
+      userMailboxApplyEnabled,
+      userMailboxDomainIds,
+      reservedMailboxPrefixes: fieldValue(form, "reservedMailboxPrefixes", settings?.reservedMailboxPrefixes || ""),
     }),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ["admin", "settings"] })
@@ -443,6 +451,9 @@ function SystemSettingsSection({ settings }: { settings?: SystemSettings }) {
     settings.catchAllEnabled,
     settings.mailAutoRefresh,
     settings.mailRefreshSeconds,
+    settings.userMailboxApplyEnabled,
+    (settings.userMailboxDomainIds || []).join(","),
+    settings.reservedMailboxPrefixes,
   ].join("|") : "loading"
   const tabs: { key: typeof settingsTab; label: string }[] = [
     { key: "base", label: "基础" },
@@ -501,6 +512,36 @@ function SystemSettingsSection({ settings }: { settings?: SystemSettings }) {
         <CardContent className="space-y-5">
           <SwitchRow label="无人收件" checked={catchAllEnabled} onCheckedChange={setCatchAllEnabled} />
           <Separator />
+          <SwitchRow label="用户自助申请邮箱" checked={userMailboxApplyEnabled} onCheckedChange={setUserMailboxApplyEnabled} />
+          {userMailboxApplyEnabled && (
+            <div className="space-y-5 border-t pt-5">
+              <div className="space-y-3">
+                <Label>开放域名</Label>
+                <div className="grid gap-2 md:grid-cols-2">
+                  {domains.map((domain) => {
+                    const checked = userMailboxDomainIds.includes(domain.id)
+                    const disabled = domain.status !== "active"
+                    return (
+                      <label key={domain.id} className={cn("flex min-h-11 items-center gap-3 rounded-md border px-3 py-2", disabled && "cursor-not-allowed opacity-50")}>
+                        <Checkbox
+                          checked={checked}
+                          disabled={disabled}
+                          onCheckedChange={(value) => setUserMailboxDomainIds((items) => value === true ? Array.from(new Set([...items, domain.id])) : items.filter((id) => id !== domain.id))}
+                        />
+                        <span className="text-sm font-medium">{domain.name}</span>
+                      </label>
+                    )
+                  })}
+                </div>
+                {domains.length === 0 && <Empty text="暂无域名" />}
+              </div>
+              <div className="space-y-2">
+                <Label>禁止前缀</Label>
+                <Textarea name="reservedMailboxPrefixes" defaultValue={settings?.reservedMailboxPrefixes || ""} className="min-h-28 font-mono text-sm" />
+              </div>
+            </div>
+          )}
+          <Separator />
           <SwitchRow label="自动刷新" checked={mailAutoRefresh} onCheckedChange={setMailAutoRefresh} />
           {mailAutoRefresh && (
             <div className="border-t pt-5">

apps/web/src/pages/mail.tsx

@@ -88,17 +88,18 @@ export function MailPage() {
   const mailboxList = useQuery({ queryKey: ["mailboxes", "mine"], queryFn: api.myMailboxes })
   const publicSettings = useQuery({ queryKey: ["public-settings"], queryFn: api.publicSettings })
   const selectedMailbox = React.useMemo(() => mailboxList.data?.items.find((item) => item.id === selectedMailboxId), [mailboxList.data?.items, selectedMailboxId])
-  const folders = useQuery({ queryKey: ["folders", selectedMailboxId], queryFn: () => api.folders(selectedMailboxId), enabled: !!selectedMailboxId })
-  const labels = useQuery({ queryKey: ["labels", selectedMailboxId], queryFn: () => api.labels(selectedMailboxId), enabled: !!selectedMailboxId })
-  const mailStats = useQuery({ queryKey: ["mail-stats", selectedMailboxId], queryFn: () => api.mailStats(selectedMailboxId), enabled: !!selectedMailboxId })
+  const activeMailboxId = selectedMailbox?.id || ""
+  const folders = useQuery({ queryKey: ["folders", activeMailboxId], queryFn: () => api.folders(activeMailboxId), enabled: !!activeMailboxId })
+  const labels = useQuery({ queryKey: ["labels", activeMailboxId], queryFn: () => api.labels(activeMailboxId), enabled: !!activeMailboxId })
+  const mailStats = useQuery({ queryKey: ["mail-stats", activeMailboxId], queryFn: () => api.mailStats(activeMailboxId), enabled: !!activeMailboxId })
   const messages = useQuery({
-    queryKey: ["messages", selectedMailboxId, mailView, folder, selectedLabelId, query],
+    queryKey: ["messages", activeMailboxId, mailView, folder, selectedLabelId, query],
     queryFn: () => {
-      if (mailView === "starred") return api.starredMessages(query, "", selectedMailboxId)
-      if (mailView === "label") return api.labelMessages(selectedLabelId, query, "", selectedMailboxId)
-      return api.messages(folder, query, "", selectedMailboxId)
+      if (mailView === "starred") return api.starredMessages(query, "", activeMailboxId)
+      if (mailView === "label") return api.labelMessages(selectedLabelId, query, "", activeMailboxId)
+      return api.messages(folder, query, "", activeMailboxId)
     },
-    enabled: !!selectedMailboxId && (mailView !== "label" || !!selectedLabelId),
+    enabled: !!activeMailboxId && (mailView !== "label" || !!selectedLabelId),
   })
   const detail = useQuery({ queryKey: ["message", selectedId], queryFn: () => api.message(selectedId!, { markRead: false }), enabled: !!selectedId })
   function updateCachedMessage(id: string, patch: Partial<MailMessage>) {
@@ -175,15 +176,24 @@ export function MailPage() {
   })
 
   React.useEffect(() => {
+    if (!mailboxList.isSuccess) return
     const items = mailboxList.data?.items || []
-    if (items.length === 0) return
+    if (items.length === 0) {
+      if (selectedMailboxId) {
+        setSelectedMailboxId("")
+        setSelectedId(null)
+      }
+      localStorage.removeItem("lanqin:selected-mailbox")
+      return
+    }
     if (!selectedMailboxId || !items.some((item) => item.id === selectedMailboxId)) {
       setSelectedMailboxId(items[0].id)
     }
-  }, [mailboxList.data?.items, selectedMailboxId])
+  }, [mailboxList.isSuccess, mailboxList.data?.items, selectedMailboxId])
 
   React.useEffect(() => {
     if (selectedMailboxId) localStorage.setItem("lanqin:selected-mailbox", selectedMailboxId)
+    else localStorage.removeItem("lanqin:selected-mailbox")
   }, [selectedMailboxId])
 
   React.useEffect(() => {

apps/web/src/pages/profile.tsx

@@ -4,7 +4,7 @@ import type { ImperativePanelHandle } from "react-resizable-panels"
 import { useNavigate, useSearchParams } from "react-router-dom"
 import { ArrowLeft, BarChart3, Ban, Contact, Copy, Info, KeyRound, LogOut, Mail, MailCheck, MailX, Moon, PanelLeftClose, PanelLeftOpen, Plus, RefreshCcw, Settings, ShieldCheck, SlidersHorizontal, Sun, Trash2, X } from "lucide-react"
 import { QRCodeSVG } from "qrcode.react"
-import { api, MailLabel, MailRule, MailRuleAction, MailRuleCondition, Mailbox, MailStats } from "@/lib/api"
+import { api, MailLabel, MailRule, MailRuleAction, MailRuleCondition, Mailbox, MailboxApplyOptions, MailStats } from "@/lib/api"
 import { cn, formatBytes } from "@/lib/utils"
 import { applyTheme, getInitialTheme } from "@/lib/theme"
 import { DisplayMode, useDisplayMode } from "@/lib/display-mode"
@@ -58,12 +58,14 @@ export function ProfilePage() {
   const tab: Tab = rawTab && tabKeys.includes(rawTab) ? rawTab : "profile"
   const user = me.data?.user
   const mailboxes = useQuery({ queryKey: ["mailboxes", "mine"], queryFn: api.myMailboxes })
+  const mailboxApplyOptions = useQuery({ queryKey: ["mailbox-apply-options"], queryFn: api.mailboxApplyOptions })
   const contacts = useQuery({ queryKey: ["contacts"], queryFn: api.contacts })
   const rules = useQuery({ queryKey: ["rules"], queryFn: api.rules })
   const blocked = useQuery({ queryKey: ["blocked-senders"], queryFn: api.blockedSenders })
-  const ruleLabels = useQuery({ queryKey: ["labels", "rules", mailboxId], queryFn: () => api.labels(mailboxId), enabled: !!mailboxId })
   const selectedMailbox = React.useMemo(() => mailboxes.data?.items.find((m) => m.id === mailboxId), [mailboxes.data?.items, mailboxId])
-  const stats = useQuery({ queryKey: ["mail-stats", mailboxId], queryFn: () => api.mailStats(mailboxId), enabled: !!mailboxId })
+  const activeMailboxId = selectedMailbox?.id || ""
+  const ruleLabels = useQuery({ queryKey: ["labels", "rules", activeMailboxId], queryFn: () => api.labels(activeMailboxId), enabled: !!activeMailboxId })
+  const stats = useQuery({ queryKey: ["mail-stats", activeMailboxId], queryFn: () => api.mailStats(activeMailboxId), enabled: !!activeMailboxId })
 
   const profile = useMutation({
     mutationFn: (form: FormData) => api.updateProfile({ displayName: String(form.get("displayName") || "") }),
@@ -133,12 +135,28 @@ export function ProfilePage() {
     onSuccess: (res) => { qc.invalidateQueries({ queryKey: ["mail-stats"] }); qc.invalidateQueries({ queryKey: ["folders"] }); qc.invalidateQueries({ queryKey: ["messages"] }); toast({ title: `已处理 ${res.affected} 封邮件` }) },
     onError: (error) => toast({ title: "清理失败", description: error.message }),
   })
+  const applyMailbox = useMutation({
+    mutationFn: api.applyMailbox,
+    onSuccess: (mailbox) => {
+      qc.invalidateQueries({ queryKey: ["mailboxes", "mine"] })
+      qc.invalidateQueries({ queryKey: ["mailbox-apply-options"] })
+      setMailboxId(mailbox.id)
+      toast({ title: "邮箱已申请" })
+    },
+    onError: (error) => toast({ title: "申请失败", description: error.message }),
+  })
 
   React.useEffect(() => {
+    if (!mailboxes.isSuccess) return
     const items = mailboxes.data?.items || []
-    if (items.length > 0 && (!mailboxId || !items.some((m) => m.id === mailboxId))) setMailboxId(items[0].id)
-  }, [mailboxId, mailboxes.data?.items])
-  React.useEffect(() => { if (mailboxId) localStorage.setItem("lanqin:selected-mailbox", mailboxId) }, [mailboxId])
+    if (items.length === 0) {
+      if (mailboxId) setMailboxId("")
+      localStorage.removeItem("lanqin:selected-mailbox")
+      return
+    }
+    if (!mailboxId || !items.some((m) => m.id === mailboxId)) setMailboxId(items[0].id)
+  }, [mailboxId, mailboxes.isSuccess, mailboxes.data?.items])
+  React.useEffect(() => { if (mailboxId) localStorage.setItem("lanqin:selected-mailbox", mailboxId); else localStorage.removeItem("lanqin:selected-mailbox") }, [mailboxId])
   React.useEffect(() => { applyTheme(darkMode, themeMountedRef.current); themeMountedRef.current = true }, [darkMode])
 
   async function logout() { await api.logout().catch(() => undefined); qc.clear(); navigate("/login", { replace: true }) }
@@ -190,7 +208,7 @@ export function ProfilePage() {
   )
 
   function renderTab() {
-    if (tab === "mailboxes") return <MailboxManagement mailboxes={mailboxes.data?.items || []} selectedMailboxId={mailboxId} onSelect={setMailboxId} onCopy={copy} onOpen={(id) => { setMailboxId(id); navigate("/") }} />
+    if (tab === "mailboxes") return <MailboxManagement mailboxes={mailboxes.data?.items || []} applyOptions={mailboxApplyOptions.data} applyPending={applyMailbox.isPending} selectedMailboxId={mailboxId} onSelect={setMailboxId} onCopy={copy} onOpen={(id) => { setMailboxId(id); navigate("/") }} onApply={(payload) => applyMailbox.mutateAsync(payload).then(() => undefined)} />
     if (tab === "contacts") return <ContactsSection items={contacts.data?.items || []} loading={contacts.isLoading} pending={createContact.isPending} onCreate={(form) => createContact.mutate(form)} onDelete={(id) => deleteContact.mutate(id)} onCopy={copy} />
     if (tab === "cleanup") return <CleanupSection mailbox={selectedMailbox} stats={stats.data} pending={cleanup.isPending} onCleanup={(target) => cleanup.mutate(target)} />
     if (tab === "rules") return <RulesSection items={rules.data?.items || []} mailboxes={mailboxes.data?.items || []} labels={ruleLabels.data?.items || []} open={ruleDialogOpen} onOpenChange={setRuleDialogOpen} onCreate={(payload) => createRule.mutate(payload)} onDelete={(id) => deleteRule.mutate(id)} pending={createRule.isPending} />
@@ -353,8 +371,65 @@ function ProfileOverview({ user, profile, password, passwordFormRef, stats, disp
   )
 }
 
-function MailboxManagement({ mailboxes, selectedMailboxId, onSelect, onCopy, onOpen }: { mailboxes: Mailbox[]; selectedMailboxId: string; onSelect: (id: string) => void; onCopy: (text: string) => void; onOpen: (id: string) => void }) {
-  return <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{mailboxes.map((m) => <Card key={m.id} className={cn(selectedMailboxId === m.id && "border-primary")}><CardHeader><div className="flex items-start justify-between gap-3"><div className="min-w-0"><CardTitle className="truncate text-base">{m.address}</CardTitle></div>{selectedMailboxId === m.id && <Badge>当前</Badge>}</div></CardHeader><CardContent className="flex flex-wrap gap-2"><Button variant="outline" size="sm" onClick={() => onSelect(m.id)}>设为当前</Button><Button variant="outline" size="sm" onClick={() => onCopy(m.address)}><Copy className="h-4 w-4" />复制</Button><Button size="sm" onClick={() => onOpen(m.id)}>进入邮箱</Button></CardContent></Card>)}{mailboxes.length === 0 && <EmptyState text="暂无邮箱账号" />}</div>
+function MailboxManagement({ mailboxes, applyOptions, applyPending, selectedMailboxId, onSelect, onCopy, onOpen, onApply }: { mailboxes: Mailbox[]; applyOptions?: MailboxApplyOptions; applyPending: boolean; selectedMailboxId: string; onSelect: (id: string) => void; onCopy: (text: string) => void; onOpen: (id: string) => void; onApply: (payload: { domainId: string; localPart: string; displayName: string }) => Promise<void> }) {
+  const canApply = !!applyOptions?.enabled && (applyOptions.domains || []).length > 0
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-end">
+        {canApply && <ApplyMailboxDialog options={applyOptions} pending={applyPending} onApply={onApply} />}
+      </div>
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {mailboxes.map((m) => <Card key={m.id} className={cn(selectedMailboxId === m.id && "border-primary")}><CardHeader><div className="flex items-start justify-between gap-3"><div className="min-w-0"><CardTitle className="truncate text-base">{m.address}</CardTitle></div>{selectedMailboxId === m.id && <Badge>当前</Badge>}</div></CardHeader><CardContent className="flex flex-wrap gap-2"><Button variant="outline" size="sm" onClick={() => onSelect(m.id)}>设为当前</Button><Button variant="outline" size="sm" onClick={() => onCopy(m.address)}><Copy className="h-4 w-4" />复制</Button><Button size="sm" onClick={() => onOpen(m.id)}>进入邮箱</Button></CardContent></Card>)}
+        {mailboxes.length === 0 && <EmptyState text={canApply ? "暂无邮箱账号，点击申请邮箱创建" : "暂无邮箱账号"} />}
+      </div>
+    </div>
+  )
+}
+
+function ApplyMailboxDialog({ options, pending, onApply }: { options: MailboxApplyOptions; pending: boolean; onApply: (payload: { domainId: string; localPart: string; displayName: string }) => Promise<void> }) {
+  const [open, setOpen] = React.useState(false)
+  const [domainId, setDomainId] = React.useState(options.domains[0]?.id || "")
+  React.useEffect(() => {
+    if (!open) return
+    setDomainId((current) => options.domains.some((domain) => domain.id === current) ? current : options.domains[0]?.id || "")
+  }, [open, options.domains])
+
+  async function submit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const form = new FormData(event.currentTarget)
+    try {
+      await onApply({
+        domainId,
+        localPart: String(form.get("localPart") || ""),
+        displayName: String(form.get("displayName") || ""),
+      })
+      event.currentTarget.reset()
+      setOpen(false)
+    } catch {}
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <Button type="button" onClick={() => setOpen(true)}><Plus className="h-4 w-4" />申请邮箱</Button>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader><DialogTitle>申请邮箱</DialogTitle></DialogHeader>
+        <form className="space-y-4" onSubmit={submit}>
+          <Field label="邮箱前缀"><Input name="localPart" autoFocus required placeholder="your-name" /></Field>
+          <Field label="域名后缀">
+            <Select value={domainId} onValueChange={setDomainId}>
+              <SelectTrigger><SelectValue placeholder="选择域名" /></SelectTrigger>
+              <SelectContent>{options.domains.map((domain) => <SelectItem key={domain.id} value={domain.id}>@{domain.name}</SelectItem>)}</SelectContent>
+            </Select>
+          </Field>
+          <Field label="显示名称"><Input name="displayName" placeholder="可选" /></Field>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setOpen(false)}>取消</Button>
+            <Button disabled={pending || !domainId}>{pending ? "申请中..." : "申请"}</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
 }
 
 function ContactsSection({ items, loading, onCreate, onDelete, onCopy, pending }: { items: { id: string; name: string; email: string; note: string }[]; loading: boolean; onCreate: (form: FormData) => void; onDelete: (id: string) => void; onCopy: (text: string) => void; pending: boolean }) {