feat(权限组): 增加账号配额与邮件发送限制

- 为权限组与用户新增配额字段，支持附件大小、SMTP/IMAP/POP3 频率限制。
- 后端补充权限组配额校验、迁移与 SMTP 发送限流，邮件发送/定时发送时统一生效。
- 前端在管理页、邮件撰写页和个人资料页展示并编辑配额信息。

apps/web/src/lib/api-types.ts

@@ -47,9 +47,10 @@ export type PermissionKey =
   | "admin.templates.update"
   | "admin.templates.reset"
 export type PermissionInfo = { key: PermissionKey; label: string; description: string; category: string }
+export type PermissionLimits = { maxAttachmentMb: number; smtpDailyLimit: number; smtpMinuteLimit: number; imapMinuteLimit: number; pop3MinuteLimit: number }
 export type PermissionGroupSummary = { id: string; name: string }
-export type PermissionGroup = { id: string; name: string; description: string; permissions: PermissionKey[]; system: boolean; userCount: number; createdAt: string; updatedAt: string }
-export type User = { id: string; email: string; displayName: string; role: "admin" | "user"; disabled: boolean; protected: boolean; twoFactorEnabled: boolean; permissions: PermissionKey[]; permissionGroupIds: string[]; permissionGroups: PermissionGroupSummary[]; createdAt: string }
+export type PermissionGroup = { id: string; name: string; description: string; permissions: PermissionKey[]; limits: PermissionLimits; system: boolean; userCount: number; createdAt: string; updatedAt: string }
+export type User = { id: string; email: string; displayName: string; role: "admin" | "user"; disabled: boolean; protected: boolean; twoFactorEnabled: boolean; permissions: PermissionKey[]; limits: PermissionLimits; permissionGroupIds: string[]; permissionGroups: PermissionGroupSummary[]; createdAt: string }
 export type AdminUser = User & { mailboxCount: number; mailboxes?: string[] }
 export type AdminOverview = { users: number; activeUsers: number; domains: number; mailboxes: number; activeMailboxes: number; aliases: number; messages: number; unreadMessages: number; storageBytes: number }
 export type Domain = { id: string; name: string; status: string; dkimSelector: string; dkimPublicKey?: string; dnsStatus: string; dnsCheckedAt?: string; createdAt: string }

apps/web/src/lib/api.ts

@@ -1,4 +1,4 @@
-import type { User, AdminUser, AdminOverview, Domain, Mailbox, Alias, MailFolder, Attachment, MailLabel, MailMessage, DNSRecord, DNSCheckResult, ListResponse, SendPayload, DraftPayload, ScheduleSendPayload, ScheduledSend, Contact, MailSignature, MailRule, MailRuleCondition, MailRuleAction, BlockedSender, MailStats, MailboxApplyOptions, MailTemplate, SystemSettings, SystemSettingsPayload, PublicSettings, LoginPayload, LoginResponse, RegisterPayload, PermissionGroup, PermissionInfo, PermissionKey } from "./api-types"
+import type { User, AdminUser, AdminOverview, Domain, Mailbox, Alias, MailFolder, Attachment, MailLabel, MailMessage, DNSRecord, DNSCheckResult, ListResponse, SendPayload, DraftPayload, ScheduleSendPayload, ScheduledSend, Contact, MailSignature, MailRule, MailRuleCondition, MailRuleAction, BlockedSender, MailStats, MailboxApplyOptions, MailTemplate, SystemSettings, SystemSettingsPayload, PublicSettings, LoginPayload, LoginResponse, RegisterPayload, PermissionGroup, PermissionInfo, PermissionKey, PermissionLimits } from "./api-types"
 export * from "./api-types"
 
 const REQUEST_TIMEOUT_MS = 15_000
@@ -64,8 +64,8 @@ export const api = {
   adminOverview: () => request<AdminOverview>("/api/admin/overview"),
   users: () => request<ListResponse<AdminUser>>("/api/admin/users"),
   permissionGroups: () => request<ListResponse<PermissionGroup> & { catalog: PermissionInfo[] }>("/api/admin/permission-groups"),
-  createPermissionGroup: (payload: { name: string; description: string; permissions: PermissionKey[] }) => request<PermissionGroup>("/api/admin/permission-groups", { method: "POST", body: JSON.stringify(payload) }),
-  updatePermissionGroup: (id: string, payload: { name: string; description: string; permissions: PermissionKey[] }) => request<PermissionGroup>(`/api/admin/permission-groups/${id}`, { method: "POST", body: JSON.stringify(payload) }),
+  createPermissionGroup: (payload: { name: string; description: string; permissions: PermissionKey[]; limits: PermissionLimits }) => request<PermissionGroup>("/api/admin/permission-groups", { method: "POST", body: JSON.stringify(payload) }),
+  updatePermissionGroup: (id: string, payload: { name: string; description: string; permissions: PermissionKey[]; limits: PermissionLimits }) => request<PermissionGroup>(`/api/admin/permission-groups/${id}`, { method: "POST", body: JSON.stringify(payload) }),
   deletePermissionGroup: (id: string) => request<{ ok: boolean }>(`/api/admin/permission-groups/${id}`, { method: "DELETE" }),
   createUser: (payload: { email: string; displayName: string; role: "admin" | "user"; password: string; disabled: boolean; permissionGroupIds?: string[] }) => request<AdminUser>("/api/admin/users", { method: "POST", body: JSON.stringify(payload) }),
   updateUser: (id: string, payload: { displayName: string; role: "admin" | "user"; disabled: boolean; permissionGroupIds?: string[] }) => request<AdminUser>(`/api/admin/users/${id}`, { method: "POST", body: JSON.stringify(payload) }),

apps/web/src/pages/admin.tsx

@@ -3,7 +3,7 @@ import DOMPurify from "dompurify"
 import { useSearchParams } from "react-router-dom"
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { ArrowRight, BookOpen, CheckCircle2, Circle, Copy, GitBranch, Github, Globe2, Mailbox, MoreHorizontal, Plus, RefreshCcw, Scale, Search, ShieldCheck, Star, Trash2, Users } from "lucide-react"
-import { api, AdminUser, Alias, DNSRecord, Domain, Mailbox as MailboxType, MailMessage, MailTemplate, PermissionGroup, PermissionInfo, SystemSettings } from "@/lib/api"
+import { api, AdminUser, Alias, DNSRecord, Domain, Mailbox as MailboxType, MailMessage, MailTemplate, PermissionGroup, PermissionInfo, PermissionLimits, SystemSettings } from "@/lib/api"
 import { cn, decodeMimeHeader, formatBytes, formatDate } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -52,6 +52,7 @@ const sectionPermissions: Record<Section, PermissionKey[]> = {
 const projectRepositoryUrl = "https://github.com/LanQin996/LanQin-Email"
 const projectTag = import.meta.env.VITE_APP_VERSION || ""
 const projectReleaseUrl = import.meta.env.VITE_RELEASE_URL || (projectTag ? `${projectRepositoryUrl}/releases/tag/${projectTag}` : "")
+const defaultPermissionLimits: PermissionLimits = { maxAttachmentMb: 25, smtpDailyLimit: 200, smtpMinuteLimit: 20, imapMinuteLimit: 200, pop3MinuteLimit: 150 }
 
 export function AdminPage() {
   const me = useMe()
@@ -349,6 +350,7 @@ function PermissionGroupsSection({ groups, catalog }: { groups: PermissionGroup[
                 </DropdownMenu>}
               </div>
               <PermissionBadges permissions={group.permissions} catalog={catalog} />
+              <PermissionLimitBadges limits={group.limits} />
             </div>
           ))}
         </div>
@@ -367,8 +369,12 @@ function PermissionGroupDialog({ group, catalog, open, onOpenChange }: { group?:
   const dialogOpen = open ?? internalOpen
   const setDialogOpen = onOpenChange ?? setInternalOpen
   const [permissions, setPermissions] = React.useState<PermissionKey[]>(group?.permissions || [])
+  const [limits, setLimits] = React.useState<PermissionLimits>(group?.limits || defaultPermissionLimits)
   React.useEffect(() => {
-    if (dialogOpen) setPermissions(group?.permissions || [])
+    if (dialogOpen) {
+      setPermissions(group?.permissions || [])
+      setLimits(group?.limits || defaultPermissionLimits)
+    }
   }, [dialogOpen, group])
   const mutation = useMutation({
     mutationFn: (form: FormData) => {
@@ -376,6 +382,7 @@ function PermissionGroupDialog({ group, catalog, open, onOpenChange }: { group?:
         name: String(form.get("name") || ""),
         description: String(form.get("description") || ""),
         permissions,
+        limits,
       }
       return group ? api.updatePermissionGroup(group.id, payload) : api.createPermissionGroup(payload)
     },
@@ -401,6 +408,7 @@ function PermissionGroupDialog({ group, catalog, open, onOpenChange }: { group?:
             <Field name="name" label="名称" defaultValue={group?.name || ""} placeholder="例如：客服主管" />
             <Field name="description" label="说明" defaultValue={group?.description || ""} required={false} />
           </div>
+          <PermissionLimitEditor value={limits} onChange={setLimits} />
           <PermissionPicker catalog={catalog} value={permissions} onChange={setPermissions} />
           <DialogFooter><Button disabled={mutation.isPending}>{mutation.isPending ? "保存中..." : "保存"}</Button></DialogFooter>
         </form>
@@ -455,6 +463,43 @@ function PermissionPicker({ catalog, value, onChange }: { catalog: PermissionInf
   )
 }
 
+function PermissionLimitEditor({ value, onChange }: { value: PermissionLimits; onChange: (value: PermissionLimits) => void }) {
+  function update(key: keyof PermissionLimits, raw: string) {
+    const next = Number(raw)
+    onChange({ ...value, [key]: Number.isFinite(next) && next > 0 ? Math.floor(next) : 0 })
+  }
+  return (
+    <div className="space-y-3 rounded-lg border p-3">
+      <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+        <Label>账号配额</Label>
+        <span className="text-xs text-muted-foreground">填 0 表示不限制</span>
+      </div>
+      <div className="grid gap-3 md:grid-cols-3">
+        <div className="space-y-2">
+          <Label>附件上限 MB</Label>
+          <Input type="number" min={0} value={value.maxAttachmentMb} onChange={(event) => update("maxAttachmentMb", event.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label>SMTP 每日封数</Label>
+          <Input type="number" min={0} value={value.smtpDailyLimit} onChange={(event) => update("smtpDailyLimit", event.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label>SMTP 每分钟封数</Label>
+          <Input type="number" min={0} value={value.smtpMinuteLimit} onChange={(event) => update("smtpMinuteLimit", event.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label>IMAP 每分钟命令数</Label>
+          <Input type="number" min={0} value={value.imapMinuteLimit} onChange={(event) => update("imapMinuteLimit", event.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label>POP3 每分钟命令数</Label>
+          <Input type="number" min={0} value={value.pop3MinuteLimit} onChange={(event) => update("pop3MinuteLimit", event.target.value)} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function PermissionBadges({ permissions, catalog }: { permissions: PermissionKey[]; catalog: PermissionInfo[] }) {
   const labelByKey = new Map(catalog.map((item) => [item.key, item.label]))
   if (permissions.length === 0) return <div className="mt-3 text-sm text-muted-foreground">无后台权限</div>
@@ -468,6 +513,23 @@ function PermissionBadges({ permissions, catalog }: { permissions: PermissionKey
   )
 }
 
+function PermissionLimitBadges({ limits }: { limits?: PermissionLimits }) {
+  const value = limits || defaultPermissionLimits
+  return (
+    <div className="mt-3 flex flex-wrap gap-1.5">
+      <Badge variant="secondary" className="font-normal">附件 {limitText(value.maxAttachmentMb, "MB")}</Badge>
+      <Badge variant="secondary" className="font-normal">SMTP 每日 {limitText(value.smtpDailyLimit, "封")}</Badge>
+      <Badge variant="secondary" className="font-normal">SMTP 每分钟 {limitText(value.smtpMinuteLimit, "封")}</Badge>
+      <Badge variant="secondary" className="font-normal">IMAP 每分钟 {limitText(value.imapMinuteLimit, "次")}</Badge>
+      <Badge variant="secondary" className="font-normal">POP3 每分钟 {limitText(value.pop3MinuteLimit, "次")}</Badge>
+    </div>
+  )
+}
+
+function limitText(value: number, unit: string) {
+  return value > 0 ? `${value} ${unit}` : "不限"
+}
+
 function groupPermissionCatalog(catalog: PermissionInfo[]) {
   const order: string[] = []
   const grouped = new Map<string, PermissionInfo[]>()

apps/web/src/pages/mail.tsx

@@ -13,7 +13,7 @@ import { BackgroundColor, Color, FontFamily, FontSize, TextStyle } from "@tiptap
 import { useNavigate } from "react-router-dom"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import { AlignCenter, AlignLeft, AlignRight, Archive, ArrowLeft, Bold, Calendar, Check, ChevronDown, ChevronsUpDown, Clock3, Code2, Copy, Ellipsis, Eraser, Eye, FileText, Forward, Highlighter, Image, Inbox, IndentDecrease, IndentIncrease, Italic, Link, List, ListOrdered, Mail, MailCheck, Moon, PanelLeftClose, PanelLeftOpen, Paperclip, Pencil, PencilLine, Plus, Quote, Redo2, RefreshCcw, Reply, Search, Send, Settings, ShieldCheck, Signature, SlidersHorizontal, Smile, Star, Strikethrough, Sun, Tag, Trash2, Type, Underline, Undo2, X } from "lucide-react"
-import { api, ListResponse, Mailbox, MailFolder, MailLabel, MailMessage, SendPayload, DraftPayload, ScheduledSend } from "@/lib/api"
+import { api, ListResponse, Mailbox, MailFolder, MailLabel, MailMessage, SendPayload, DraftPayload, ScheduledSend, PermissionLimits } from "@/lib/api"
 import { cn, decodeMimeHeader, formatBytes, formatDate, formatDateTime, generateLabelColor } from "@/lib/utils"
 import { applyTheme, getInitialTheme } from "@/lib/theme"
 import { useDisplayMode } from "@/lib/display-mode"
@@ -954,7 +954,7 @@ export function MailPage() {
         )}
       </SidebarProvider>
 
-      <ComposeDialog mailbox={selectedMailbox} open={composeOpen} draft={composeDraft} canSend={canSendMail} canManageDrafts={canManageDrafts} canSchedule={canScheduleMail} canManageSignatures={canManageSignatures} onOpenChange={(open) => { setComposeOpen(open); if (!open) setComposeDraft(undefined) }} onSent={() => { setComposeOpen(false); setComposeDraft(undefined); qc.invalidateQueries({ queryKey: ["messages"] }); qc.invalidateQueries({ queryKey: ["folders"] }); qc.invalidateQueries({ queryKey: ["mail-stats"] }); qc.invalidateQueries({ queryKey: ["labels"] }); qc.invalidateQueries({ queryKey: ["scheduled-sends"] }) }} />
+      <ComposeDialog mailbox={selectedMailbox} open={composeOpen} draft={composeDraft} limits={user?.limits} canSend={canSendMail} canManageDrafts={canManageDrafts} canSchedule={canScheduleMail} canManageSignatures={canManageSignatures} onOpenChange={(open) => { setComposeOpen(open); if (!open) setComposeDraft(undefined) }} onSent={() => { setComposeOpen(false); setComposeDraft(undefined); qc.invalidateQueries({ queryKey: ["messages"] }); qc.invalidateQueries({ queryKey: ["folders"] }); qc.invalidateQueries({ queryKey: ["mail-stats"] }); qc.invalidateQueries({ queryKey: ["labels"] }); qc.invalidateQueries({ queryKey: ["scheduled-sends"] }) }} />
       <ConfirmDialog
         open={!!pendingConfirm}
         title={pendingConfirm?.title || ""}
@@ -1816,7 +1816,7 @@ function MailLabelBadge({ label }: { label: MailLabel }) {
   )
 }
 
-function ComposeDialog({ mailbox, open, draft, canSend, canManageDrafts, canSchedule, canManageSignatures, onOpenChange, onSent }: { mailbox?: Mailbox; open: boolean; draft?: ComposeDraft; canSend: boolean; canManageDrafts: boolean; canSchedule: boolean; canManageSignatures: boolean; onOpenChange: (v: boolean) => void; onSent: () => void }) {
+function ComposeDialog({ mailbox, open, draft, limits, canSend, canManageDrafts, canSchedule, canManageSignatures, onOpenChange, onSent }: { mailbox?: Mailbox; open: boolean; draft?: ComposeDraft; limits?: PermissionLimits; canSend: boolean; canManageDrafts: boolean; canSchedule: boolean; canManageSignatures: boolean; onOpenChange: (v: boolean) => void; onSent: () => void }) {
   const { toast } = useToast()
   const qc = useQueryClient()
   const [files, setFiles] = React.useState<File[]>([])
@@ -1841,6 +1841,8 @@ function ComposeDialog({ mailbox, open, draft, canSend, canManageDrafts, canSche
   const composerText = draft?.html || (draft?.text !== undefined ? draft.text : signatureText ? `\n\n-- \n${signatureText}` : "")
   const [body, setBody] = React.useState<ComposerValue>(() => draft?.html !== undefined ? htmlComposerValue(draft.html) : plainTextComposerValue(composerText))
   const activeMailboxId = draft?.mailboxId || mailbox?.id || ""
+  const maxAttachmentBytes = attachmentLimitBytes(limits)
+  const maxAttachmentText = maxAttachmentBytes > 0 ? formatBytes(maxAttachmentBytes) : "不限"
   const composePayload = React.useMemo<DraftPayload>(() => ({
     mailboxId: activeMailboxId,
     to: splitEmails(toValue),
@@ -1975,9 +1977,30 @@ function ComposeDialog({ mailbox, open, draft, canSend, canManageDrafts, canSche
     })
   }
 
+  function addFiles(nextFiles: File[]) {
+    if (nextFiles.length === 0) return
+    const allowed = maxAttachmentBytes > 0 ? nextFiles.filter((file) => file.size <= maxAttachmentBytes) : nextFiles
+    const blockedCount = nextFiles.length - allowed.length
+    if (blockedCount > 0) {
+      toast({ title: "附件超过权限组上限", description: `当前单个附件上限 ${maxAttachmentText}` })
+    }
+    if (allowed.length > 0) {
+      setAttachmentsTouched(true)
+      setFiles((current) => [...current, ...allowed])
+    }
+  }
+
+  function attachmentsWithinLimit() {
+    if (maxAttachmentBytes <= 0) return true
+    if (files.every((file) => file.size <= maxAttachmentBytes)) return true
+    toast({ title: "附件超过权限组上限", description: `当前单个附件上限 ${maxAttachmentText}` })
+    return false
+  }
+
   async function prepareSend() {
     if (!canSend) return
     if (!mailbox) return
+    if (!attachmentsWithinLimit()) return
     const attachments = await Promise.all(files.map(fileToAttachment))
     const to = splitEmails(toValue)
     const cc = showCc ? splitEmails(ccValue) : []
@@ -2015,6 +2038,7 @@ function ComposeDialog({ mailbox, open, draft, canSend, canManageDrafts, canSche
       toast({ title: "请选择发件邮箱" })
       return
     }
+    if (!attachmentsWithinLimit()) return
     const attachments = await Promise.all(files.map(fileToAttachment))
     const payload: SendPayload & { draftId?: string; sendAt: string } = {
       mailboxId: mailbox.id,
@@ -2093,8 +2117,9 @@ function ComposeDialog({ mailbox, open, draft, canSend, canManageDrafts, canSche
               defaultHtml={draft?.html}
               files={files}
               signatureText={signatureText}
+              maxAttachmentText={maxAttachmentText}
               onChange={setBody}
-              onPickFiles={(nextFiles) => { setAttachmentsTouched(true); setFiles((current) => [...current, ...nextFiles]) }}
+              onPickFiles={addFiles}
               onRemoveFile={(index) => { setAttachmentsTouched(true); setFiles((current) => current.filter((_, itemIndex) => itemIndex !== index)) }}
             />
           </div>
@@ -2328,7 +2353,7 @@ function scheduleToNodeAttributes(schedule: ScheduleDraft) {
   }
 }
 
-function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, onChange, onPickFiles, onRemoveFile }: { defaultValue: string; defaultHtml?: string; files: File[]; signatureText: string; onChange: (value: ComposerValue) => void; onPickFiles: (files: File[]) => void; onRemoveFile: (index: number) => void }) {
+function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, maxAttachmentText, onChange, onPickFiles, onRemoveFile }: { defaultValue: string; defaultHtml?: string; files: File[]; signatureText: string; maxAttachmentText: string; onChange: (value: ComposerValue) => void; onPickFiles: (files: File[]) => void; onRemoveFile: (index: number) => void }) {
   const fileInputRef = React.useRef<HTMLInputElement>(null)
   const dirtyRef = React.useRef(false)
   const lastDefaultRef = React.useRef(`${defaultValue}\n${defaultHtml || ""}`)
@@ -2507,6 +2532,7 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, onC
             <DropdownMenuItem className={composerMenuItemClass} onSelect={() => editor?.chain().focus().setHorizontalRule().run()}><span className="h-4 w-4 border-t border-current" aria-hidden />分隔线</DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
+        <span className="rounded-md border px-2 py-1 text-xs text-muted-foreground">附件 {maxAttachmentText}</span>
         <ToolbarTextButton label="日程" icon={<Calendar className="h-4 w-4" />} onClick={() => setScheduleOpen(true)} />
         <DropdownMenu open={emojiOpen} onOpenChange={setEmojiOpen}>
           <DropdownMenuTrigger asChild>
@@ -3065,6 +3091,10 @@ function quoteMessage(message: MailMessage) {
   return `\n\n----- 原始邮件 -----\nFrom: ${senderTitle(message)}\nTo: ${message.to.join(", ")}\nDate: ${formatDateTime(message.receivedAt)}\nSubject: ${message.subject}\n\n${quote}`
 }
 function stripHtml(html: string) { const div = document.createElement("div"); div.innerHTML = DOMPurify.sanitize(html); return div.textContent || div.innerText || "" }
+function attachmentLimitBytes(limits?: PermissionLimits) {
+  const mb = limits?.maxAttachmentMb || 0
+  return mb > 0 ? mb * 1024 * 1024 : 0
+}
 async function fileToAttachment(file: File) {
   const buffer = await file.arrayBuffer()
   let binary = ""

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, Laptop, LogOut, Mail, MailCheck, MailX, Moon, PanelLeftClose, PanelLeftOpen, PencilLine, Plus, RefreshCcw, Settings, ShieldCheck, SlidersHorizontal, Sun, Trash2, X } from "lucide-react"
 import { QRCodeSVG } from "qrcode.react"
-import { api, MailLabel, MailRule, MailRuleAction, MailRuleCondition, Mailbox, MailboxApplyOptions, MailSignature, MailStats } from "@/lib/api"
+import { api, MailLabel, MailRule, MailRuleAction, MailRuleCondition, Mailbox, MailboxApplyOptions, MailSignature, MailStats, PermissionLimits } from "@/lib/api"
 import { cn, formatBytes } from "@/lib/utils"
 import { applyTheme, getInitialTheme } from "@/lib/theme"
 import { DisplayMode, useDisplayMode } from "@/lib/display-mode"
@@ -303,9 +303,27 @@ export function ProfilePage() {
   }
 }
 
-function ProfileOverview({ user, profile, password, passwordFormRef, stats, showStats, displayMode, onDisplayModeChange, twoFactorFormRef, setupTwoFactor, enableTwoFactor, disableTwoFactor, onCopy }: { user: { email: string; displayName: string; role: string; disabled: boolean; twoFactorEnabled: boolean; createdAt: string }; profile: { mutate: (form: FormData) => void; isPending: boolean }; password: { mutate: (form: FormData) => void; isPending: boolean }; passwordFormRef: React.RefObject<HTMLFormElement>; stats?: MailStats; showStats: boolean; displayMode: DisplayMode; onDisplayModeChange: (mode: DisplayMode) => void; twoFactorFormRef: React.RefObject<HTMLFormElement>; setupTwoFactor: { data?: { secret: string; otpauthUrl: string }; mutate: () => void; reset: () => void; isPending: boolean }; enableTwoFactor: { mutate: (form: FormData) => void; isPending: boolean }; disableTwoFactor: { mutate: (form: FormData) => void; isPending: boolean }; onCopy: (text: string) => void }) {
+function ProfileOverview({ user, profile, password, passwordFormRef, stats, showStats, displayMode, onDisplayModeChange, twoFactorFormRef, setupTwoFactor, enableTwoFactor, disableTwoFactor, onCopy }: { user: { email: string; displayName: string; role: string; disabled: boolean; twoFactorEnabled: boolean; createdAt: string; limits?: PermissionLimits }; profile: { mutate: (form: FormData) => void; isPending: boolean }; password: { mutate: (form: FormData) => void; isPending: boolean }; passwordFormRef: React.RefObject<HTMLFormElement>; stats?: MailStats; showStats: boolean; displayMode: DisplayMode; onDisplayModeChange: (mode: DisplayMode) => void; twoFactorFormRef: React.RefObject<HTMLFormElement>; setupTwoFactor: { data?: { secret: string; otpauthUrl: string }; mutate: () => void; reset: () => void; isPending: boolean }; enableTwoFactor: { mutate: (form: FormData) => void; isPending: boolean }; disableTwoFactor: { mutate: (form: FormData) => void; isPending: boolean }; onCopy: (text: string) => void }) {
   return (
     <div className="space-y-6">
+
+      <Card>
+        <CardHeader>
+          <CardTitle>账号配额</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+            <LimitBadge label="附件上限" value={user.limits?.maxAttachmentMb} unit="MB" />
+            <LimitBadge label="SMTP 每日" value={user.limits?.smtpDailyLimit} unit="封" />
+            <LimitBadge label="SMTP 每分钟" value={user.limits?.smtpMinuteLimit} unit="封" />
+            <LimitBadge label="IMAP 每分钟" value={user.limits?.imapMinuteLimit} unit="次" />
+            <LimitBadge label="POP3 每分钟" value={user.limits?.pop3MinuteLimit} unit="次" />
+          </div>
+        </CardContent>
+      </Card>
+
+      {showStats && <StatsSummary stats={stats} />}
+
       <Card>
         <CardHeader>
           <CardTitle>账户信息</CardTitle>
@@ -451,7 +469,18 @@ function ProfileOverview({ user, profile, password, passwordFormRef, stats, show
         </CardContent>
       </Card>
 
-      {showStats && <StatsSummary stats={stats} />}
+    </div>
+  )
+}
+
+function LimitBadge({ label, value, unit }: { label: string; value?: number; unit: string }) {
+  return (
+    <div className="rounded-lg border p-3 text-center">
+      <div className="text-xs text-muted-foreground">{label}</div>
+      <div className="mt-1 text-lg font-semibold tabular-nums tracking-tight">
+        {value !== undefined && value > 0 ? value : "不限"}
+      </div>
+      {value !== undefined && value > 0 && <div className="text-xs text-muted-foreground">{unit}</div>}
     </div>
   )
 }