feat(admin): 扩展后台管理与登录安全能力。

- 新增用户、域名、邮箱、别名、邮件、系统设置与模板的管理接口和页面。 - 支持双因素认证、Turnstile、人机验证与管理员 SMTP 测试。 - 增加无人收件/未注册邮件归档、Maildir 同步和数据库迁移支持。 - 更新前端导航、个人中心 2FA 配置以及相关部署示例。
2026-06-15 00:37:43 +08:00
parent 3ef8caa319
commit 8a042ae3dc
27 changed files with 3558 additions and 384 deletions
@@ -16,6 +16,7 @@
        "@radix-ui/react-select": "^2.3.0",
        "@radix-ui/react-separator": "^1.1.9",
        "@radix-ui/react-slot": "^1.2.5",
+        "@radix-ui/react-switch": "^1.3.0",
        "@radix-ui/react-toast": "^1.2.2",
        "@radix-ui/react-tooltip": "^1.2.9",
        "@tanstack/react-query": "5.59.16",
@@ -23,6 +24,7 @@
        "clsx": "2.1.1",
        "dompurify": "3.1.7",
        "lucide-react": "^0.468.0",
+        "qrcode.react": "^4.2.0",
        "react": "18.3.1",
        "react-dom": "18.3.1",
        "react-resizable-panels": "^2.1.7",
@@ -2508,6 +2510,146 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.3.0.tgz",
+      "integrity": "sha512-GP1EZwhoZO/GGnhM1P5/2Vpm8iN8EnngyU0oezn2l78kN8tj25pyrvjIaT7azBhK615KSt+P2w39y57YV5jVkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.4",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.5",
+        "@radix-ui/react-use-controllable-state": "1.2.3",
+        "@radix-ui/react-use-previous": "1.1.2",
+        "@radix-ui/react-use-size": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.4.tgz",
+      "integrity": "sha512-7AdCK9PQyiljKoBDbN8OuctCbd/esdwZPQ8RtOE3SsyQtUpiPb+ND75q0jEhC1m1ecBI0MFNeLJvwIh9iKHRcQ==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.3.tgz",
+      "integrity": "sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-context": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.4.tgz",
+      "integrity": "sha512-QwH4PO5urrbO+FaGd5Aglg+YJgWTyyuZ3g/6mKvsqraLkglDdckw9JafgL5McL5VEJ6EPNduPaT3ZE9BttDAqg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.5.tgz",
+      "integrity": "sha512-zifXeB8Y88qCYx8PLZ5oQb32KwZub+s925mMoZsBBq9KUQqWKkREubTfs6ASjRPPBe7Jt9O8OHH89+95VG+grA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.3.tgz",
+      "integrity": "sha512-PLzC90MS+ReootmjC597dvopoelpZ8Q61HJkDXZSExitIq7PL55vHNnesAHwguHK0aPfBnpdNzQtv1uliaqQrA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.3",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.2.tgz",
+      "integrity": "sha512-giWQp+4mxjBPt4KZ0MmyuykFNWfbDxKt4x+fPkRYmgRFJSbCZFzUglvMb/Kjn38tm10YP4ufiQZDx3zna4LU6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-toast": {
      "version": "1.2.2",
      "resolved": "https://registry.npmmirror.com/@radix-ui/react-toast/-/react-toast-1.2.2.tgz",
@@ -4656,6 +4798,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -19,6 +19,7 @@
    "@radix-ui/react-select": "^2.3.0",
    "@radix-ui/react-separator": "^1.1.9",
    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-switch": "^1.3.0",
    "@radix-ui/react-toast": "^1.2.2",
    "@radix-ui/react-tooltip": "^1.2.9",
    "@tanstack/react-query": "5.59.16",
@@ -26,6 +27,7 @@
    "clsx": "2.1.1",
    "dompurify": "3.1.7",
    "lucide-react": "^0.468.0",
+    "qrcode.react": "^4.2.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-resizable-panels": "^2.1.7",
@@ -1,6 +1,6 @@
 import * as React from "react"
 import { Navigate, Outlet, Link, useLocation, useNavigate } from "react-router-dom"
-import { Inbox, LogOut, Mail, Settings } from "lucide-react"
+import { BarChart3, Copy, Globe2, Inbox, LogOut, Mail, Mailbox, Settings, Users } from "lucide-react"
 import { useQueryClient } from "@tanstack/react-query"
 import { api } from "@/lib/api"
 import { useMe } from "@/hooks/use-me"
@@ -23,6 +23,16 @@ import {
  SidebarTrigger,
 } from "@/components/ui/sidebar"

+const adminSections = [
+  { key: "overview", label: "概览", icon: <BarChart3 /> },
+  { key: "users", label: "用户", icon: <Users /> },
+  { key: "domains", label: "域名", icon: <Globe2 /> },
+  { key: "mailboxes", label: "邮箱账号", icon: <Mailbox /> },
+  { key: "aliases", label: "别名转发", icon: <Copy /> },
+  { key: "messages", label: "全部邮件", icon: <Inbox /> },
+  { key: "settings", label: "系统设置", icon: <Settings /> },
+]
+
 export function ProtectedLayout() {
  const me = useMe()
  const location = useLocation()
@@ -35,6 +45,8 @@ export function ProtectedLayout() {
  const user = me.data.user
  const isMailRoute = location.pathname.startsWith("/mail")
  const isProfileRoute = location.pathname.startsWith("/profile")
+  const isAdminRoute = location.pathname.startsWith("/admin")
+  const adminSection = new URLSearchParams(location.search).get("section") || "overview"

  async function logout() {
    await api.logout().catch(() => undefined)
@@ -66,14 +78,24 @@ export function ProtectedLayout() {
          </SidebarMenu>
        </SidebarHeader>
        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                <NavItem to="/mail" icon={<Inbox />} label="Webmail" />
-                {user.role === "admin" && <NavItem to="/admin" icon={<Settings />} label="系统管理" />}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
+          {user.role === "admin" && isAdminRoute && (
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {adminSections.map((item) => (
+                    <SidebarMenuItem key={item.key}>
+                      <SidebarMenuButton asChild isActive={adminSection === item.key} tooltip={item.label}>
+                        <Link to={`/admin?section=${item.key}`}>
+                          {item.icon}
+                          <span>{item.label}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          )}
        </SidebarContent>
        <SidebarFooter>
          <SidebarMenu>
@@ -115,18 +137,3 @@ export function ProtectedLayout() {
    </SidebarProvider>
  )
 }
-
-function NavItem({ to, icon, label }: { to: string; icon: React.ReactNode; label: string }) {
-  const location = useLocation()
-  const active = location.pathname.startsWith(to)
-  return (
-    <SidebarMenuItem>
-      <SidebarMenuButton asChild isActive={active} tooltip={label}>
-        <Link to={to}>
-          {icon}
-          <span>{label}</span>
-        </Link>
-      </SidebarMenuButton>
-    </SidebarMenuItem>
-  )
-}
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
@@ -149,3 +149,16 @@ html.theme-transition::before {
  background-color: hsl(var(--primary) / 0.15);
  color: hsl(var(--foreground));
 }
+
+/* ===== 隐藏调试工具浮层 ===== */
+#__vue-devtools-container__,
+#__vue-devtools-overlay__,
+#__vue-devtools-frame__,
+#__nuxt-devtools__,
+vue-devtools,
+vue-devtools-anchor,
+[data-vue-devtools],
+[id*="vue-devtools"],
+[class*="vue-devtools"] {
+  display: none !important;
+}
@@ -1,11 +1,13 @@
-export type User = { id: string; email: string; displayName: string; role: "admin" | "user"; disabled: boolean; createdAt: string }
+export type User = { id: string; email: string; displayName: string; role: "admin" | "user"; disabled: boolean; twoFactorEnabled: boolean; 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 }
 export type Mailbox = { id: string; userId: string; userEmail?: string; domainId: string; localPart: string; address: string; displayName: string; quotaMb: number; status: string; createdAt: string }
 export type Alias = { id: string; domainId: string; source: string; destination: string; enabled: boolean; createdAt: string }
 export type MailFolder = { id: string; name: string; role: string; unreadCount: number; totalCount: number }
 export type Attachment = { id: string; messageId: string; filename: string; contentType: string; sizeBytes: number; createdAt: string }
 export type MailMessage = {
-  id: string; mailboxId?: string; folderId: string; folder: string; messageUid: string; messageId: string; subject: string; from: string; to: string[]; cc: string[]; bcc?: string[]; sentAt: string; receivedAt: string; snippet: string; bodyText?: string; bodyHtml?: string; isRead: boolean; isStarred: boolean; hasAttachments: boolean; sizeBytes: number; attachments?: Attachment[]
+  id: string; mailboxId?: string; mailboxAddress?: string; ownerEmail?: string; recipientAddress?: string; folderId: string; folder: string; messageUid: string; messageId: string; subject: string; from: string; to: string[]; cc: string[]; bcc?: string[]; sentAt: string; receivedAt: string; snippet: string; bodyText?: string; bodyHtml?: string; isRead: boolean; isStarred: boolean; hasAttachments: boolean; sizeBytes: number; attachments?: Attachment[]
 }
 export type DNSRecord = { type: string; name: string; value: string; ttl: number }
 export type DNSCheckResult = { domain: string; status: string; checks: Record<string, { ok: boolean; message: string; found?: string[] }> }
@@ -15,6 +17,32 @@ export type Contact = { id: string; name: string; email: string; note: string; c
 export type MailRule = { id: string; mailboxId: string; name: string; fromContains: string; subjectContains: string; action: "archive" | "trash" | "star" | "mark-read"; enabled: boolean; createdAt: string }
 export type BlockedSender = { id: string; mailboxId: string; email: string; reason: string; createdAt: string }
 export type MailStats = { totalMessages: number; unreadMessages: number; starredMessages: number; attachmentCount: number; storageBytes: number; byFolder: { folder: string; role: string; count: number; unread: number; bytes: number }[] }
+export type MailTemplate = { key: string; name: string; subject: string; bodyText: string; bodyHtml: string; updatedAt: string }
+export type SystemSettings = {
+  publicHostname: string
+  publicBaseUrl: string
+  smtpHost: string
+  smtpPort: string
+  smtpUsername: string
+  smtpPasswordSet: boolean
+  smtpRequireTls: boolean
+  maildirRoot: string
+  maildirScanSeconds: number
+  sessionTtlHours: number
+  allowInsecureHttp: boolean
+  openRegistration: boolean
+  twoFactorEnabled: boolean
+  turnstileEnabled: boolean
+  turnstileSiteKey: string
+  turnstileSecretSet: boolean
+  catchAllEnabled: boolean
+  mailAutoRefresh: boolean
+  mailRefreshSeconds: number
+}
+export type SystemSettingsPayload = Omit<SystemSettings, "smtpPasswordSet" | "turnstileSecretSet"> & { smtpPassword: string; turnstileSecretKey: string }
+export type PublicSettings = { turnstileEnabled: boolean; turnstileSiteKey: string; mailAutoRefresh: boolean; mailRefreshMs: number }
+export type LoginPayload = { email?: string; password?: string; turnstileToken?: string; challengeToken?: string; twoFactorCode?: string }
+export type LoginResponse = { user?: User; twoFactorRequired?: boolean; challengeToken?: string }

 async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
  const res = await fetch(path, { credentials: "include", headers: { "Content-Type": "application/json", ...(init.headers || {}) }, ...init })
@@ -27,11 +55,15 @@ async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
 }

 export const api = {
-  login: (email: string, password: string) => request<{ user: User }>("/api/auth/login", { method: "POST", body: JSON.stringify({ email, password }) }),
+  publicSettings: () => request<PublicSettings>("/api/public/settings"),
+  login: (payload: LoginPayload) => request<LoginResponse>("/api/auth/login", { method: "POST", body: JSON.stringify(payload) }),
  logout: () => request<{ ok: boolean }>("/api/auth/logout", { method: "POST" }),
  me: () => request<{ user: User }>("/api/me"),
  updateProfile: (payload: { displayName: string }) => request<{ user: User }>("/api/me/profile", { method: "POST", body: JSON.stringify(payload) }),
  changePassword: (payload: { currentPassword: string; newPassword: string }) => request<{ ok: boolean }>("/api/me/password", { method: "POST", body: JSON.stringify(payload) }),
+  setupTwoFactor: () => request<{ secret: string; otpauthUrl: string }>("/api/me/2fa/setup", { method: "POST" }),
+  enableTwoFactor: (code: string) => request<{ user: User }>("/api/me/2fa/enable", { method: "POST", body: JSON.stringify({ code }) }),
+  disableTwoFactor: (code: string) => request<{ user: User }>("/api/me/2fa/disable", { method: "POST", body: JSON.stringify({ code }) }),
  contacts: () => request<ListResponse<Contact>>("/api/me/contacts"),
  createContact: (payload: { name: string; email: string; note: string }) => request<Contact>("/api/me/contacts", { method: "POST", body: JSON.stringify(payload) }),
  deleteContact: (id: string) => request<{ ok: boolean }>(`/api/me/contacts/${id}`, { method: "DELETE" }),
@@ -43,12 +75,40 @@ export const api = {
  deleteBlockedSender: (id: string) => request<{ ok: boolean }>(`/api/me/blocked-senders/${id}`, { method: "DELETE" }),
  mailStats: (mailboxId?: string) => request<MailStats>(`/api/me/stats${mailboxId ? `?mailboxId=${encodeURIComponent(mailboxId)}` : ""}`),
  cleanupMail: (payload: { mailboxId: string; target: "empty-trash" | "empty-spam" | "archive-read-inbox" }) => request<{ ok: boolean; affected: number }>("/api/me/cleanup", { method: "POST", body: JSON.stringify(payload) }),
+  adminOverview: () => request<AdminOverview>("/api/admin/overview"),
+  users: () => request<ListResponse<AdminUser>>("/api/admin/users"),
+  createUser: (payload: { email: string; displayName: string; role: "admin" | "user"; password: string; disabled: boolean }) => request<AdminUser>("/api/admin/users", { method: "POST", body: JSON.stringify(payload) }),
+  updateUser: (id: string, payload: { displayName: string; role: "admin" | "user"; disabled: boolean }) => request<AdminUser>(`/api/admin/users/${id}`, { method: "POST", body: JSON.stringify(payload) }),
+  resetUserPassword: (id: string, password: string) => request<{ ok: boolean }>(`/api/admin/users/${id}/password`, { method: "POST", body: JSON.stringify({ password }) }),
+  deleteUser: (id: string) => request<{ ok: boolean }>(`/api/admin/users/${id}`, { method: "DELETE" }),
  domains: () => request<ListResponse<Domain>>("/api/admin/domains"),
  createDomain: (name: string) => request<Domain>("/api/admin/domains", { method: "POST", body: JSON.stringify({ name }) }),
+  updateDomain: (id: string, payload: { status: string }) => request<Domain>(`/api/admin/domains/${id}`, { method: "POST", body: JSON.stringify(payload) }),
+  deleteDomain: (id: string) => request<{ ok: boolean }>(`/api/admin/domains/${id}`, { method: "DELETE" }),
  mailboxes: () => request<ListResponse<Mailbox>>("/api/admin/mailboxes"),
-  createMailbox: (payload: { domainId: string; localPart: string; displayName: string; password: string; quotaMb: number; role: "admin" | "user"; ownerEmail?: string }) => request<Mailbox>("/api/admin/mailboxes", { method: "POST", body: JSON.stringify(payload) }),
+  createMailbox: (payload: { domainId: string; localPart: string; displayName: string; password: string; quotaMb: number; role: "admin" | "user"; ownerEmail?: string; userId?: string }) => request<Mailbox>("/api/admin/mailboxes", { method: "POST", body: JSON.stringify(payload) }),
+  updateMailbox: (id: string, payload: { userId: string; displayName: string; quotaMb: number; status: string }) => request<Mailbox>(`/api/admin/mailboxes/${id}`, { method: "POST", body: JSON.stringify(payload) }),
+  deleteMailbox: (id: string) => request<{ ok: boolean }>(`/api/admin/mailboxes/${id}`, { method: "DELETE" }),
  aliases: () => request<ListResponse<Alias>>("/api/admin/aliases"),
  createAlias: (payload: { domainId: string; source: string; destination: string; enabled: boolean }) => request<Alias>("/api/admin/aliases", { method: "POST", body: JSON.stringify(payload) }),
+  updateAlias: (id: string, payload: { source: string; destination: string; enabled: boolean }) => request<Alias>(`/api/admin/aliases/${id}`, { method: "POST", body: JSON.stringify(payload) }),
+  deleteAlias: (id: string) => request<{ ok: boolean }>(`/api/admin/aliases/${id}`, { method: "DELETE" }),
+  adminMessages: (params: { mailboxId?: string; folder?: string; q?: string; cursor?: string } = {}) => {
+    const query = new URLSearchParams()
+    if (params.mailboxId) query.set("mailboxId", params.mailboxId)
+    if (params.folder) query.set("folder", params.folder)
+    if (params.q) query.set("q", params.q)
+    if (params.cursor) query.set("cursor", params.cursor)
+    const suffix = query.toString()
+    return request<ListResponse<MailMessage>>(`/api/admin/messages${suffix ? `?${suffix}` : ""}`)
+  },
+  adminMessage: (id: string) => request<MailMessage>(`/api/admin/messages/${id}`),
+  systemSettings: () => request<SystemSettings>("/api/admin/settings"),
+  updateSystemSettings: (payload: SystemSettingsPayload) => request<SystemSettings>("/api/admin/settings", { method: "POST", body: JSON.stringify(payload) }),
+  testSmtp: (to: string) => request<{ ok: boolean }>("/api/admin/settings/test-smtp", { method: "POST", body: JSON.stringify({ to }) }),
+  mailTemplates: () => request<ListResponse<MailTemplate>>("/api/admin/mail-templates"),
+  updateMailTemplate: (key: string, payload: { subject: string; bodyText: string; bodyHtml: string }) => request<MailTemplate>(`/api/admin/mail-templates/${encodeURIComponent(key)}`, { method: "POST", body: JSON.stringify(payload) }),
+  resetMailTemplate: (key: string) => request<MailTemplate>(`/api/admin/mail-templates/${encodeURIComponent(key)}/reset`, { method: "POST" }),
  dnsRecords: (domainId: string) => request<{ items: DNSRecord[] }>(`/api/admin/domains/${domainId}/dns-records`),
  checkDns: (domainId: string) => request<DNSCheckResult>(`/api/admin/domains/${domainId}/check-dns`, { method: "POST" }),
  myMailboxes: () => request<ListResponse<Mailbox>>("/api/mail/mailboxes"),
@@ -65,3 +125,6 @@ export const api = {
  move: (id: string, folder: string) => request<{ ok: boolean }>(`/api/mail/messages/${id}/move`, { method: "POST", body: JSON.stringify({ folder }) }),
  delete: (id: string) => request<{ ok: boolean }>(`/api/mail/messages/${id}`, { method: "DELETE" }),
 }
+
+
+
@@ -8,6 +8,7 @@ import { LoginPage } from "@/pages/login"
 import { MailPage } from "@/pages/mail"
 import { AdminPage } from "@/pages/admin"
 import { ProfilePage } from "@/pages/profile"
+import { useMe } from "@/hooks/use-me"
 import "./index.css"

 const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, staleTime: 10_000 } } })
@@ -17,10 +18,18 @@ const router = createBrowserRouter([
    { index: true, element: <Navigate to="/mail" replace /> },
    { path: "mail", element: <MailPage /> },
    { path: "profile", element: <ProfilePage /> },
-    { path: "admin", element: <AdminPage /> },
+    { path: "admin", element: <AdminOnly><AdminPage /></AdminOnly> },
  ] },
 ])

+function AdminOnly({ children }: { children: React.ReactNode }) {
+  const me = useMe()
+  if (me.isLoading) return null
+  if (!me.data?.user) return <Navigate to="/login" replace />
+  if (me.data.user.role !== "admin") return <Navigate to="/mail" replace />
+  return <>{children}</>
+}
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
@@ -1,5 +1,6 @@
+import * as React from "react"
 import { Navigate } from "react-router-dom"
-import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { api } from "@/lib/api"
 import { useMe } from "@/hooks/use-me"
 import { Button } from "@/components/ui/button"
@@ -11,11 +12,24 @@ export function LoginPage() {
  const me = useMe()
  const qc = useQueryClient()
  const { toast } = useToast()
+  const publicSettings = useQuery({ queryKey: ["public-settings"], queryFn: api.publicSettings })
+  const [turnstileToken, setTurnstileToken] = React.useState("")
+  const [challengeToken, setChallengeToken] = React.useState("")
  const login = useMutation({
-    mutationFn: (form: FormData) => api.login(String(form.get("email")), String(form.get("password"))),
-    onSuccess: async () => { await qc.invalidateQueries({ queryKey: ["me"] }) },
+    mutationFn: (form: FormData) => challengeToken
+      ? api.login({ challengeToken, twoFactorCode: String(form.get("twoFactorCode") || "") })
+      : api.login({ email: String(form.get("email") || ""), password: String(form.get("password") || ""), turnstileToken }),
+    onSuccess: async (data) => {
+      if (data.twoFactorRequired && data.challengeToken) {
+        setChallengeToken(data.challengeToken)
+        toast({ title: "请输入双因素验证码" })
+        return
+      }
+      await qc.invalidateQueries({ queryKey: ["me"] })
+    },
    onError: (e) => toast({ title: "登录失败", description: e.message }),
  })
+  const turnstileRequired = !!publicSettings.data?.turnstileEnabled
  if (me.data?.user) return <Navigate to="/mail" replace />
  return (
    <div className="grid min-h-screen place-items-center bg-background px-4">
@@ -23,20 +37,82 @@ export function LoginPage() {
        <div className="mb-10 text-center">
          <h1 className="text-3xl font-bold tracking-tight">LanQin Email</h1>
        </div>
-        <form className="space-y-5" onSubmit={(e) => { e.preventDefault(); login.mutate(new FormData(e.currentTarget)) }}>
-          <div className="space-y-2">
-            <Label htmlFor="email">邮箱</Label>
-            <Input id="email" name="email" type="email" defaultValue="admin@lanqin.local" required className="h-11 text-base" />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="password">密码</Label>
-            <Input id="password" name="password" type="password" defaultValue="ChangeMe123!" required className="h-11 text-base" />
-          </div>
+        <form className="space-y-5" onSubmit={(e) => { e.preventDefault(); if (!challengeToken && turnstileRequired && !turnstileToken) { toast({ title: "请先完成人机验证" }); return }; login.mutate(new FormData(e.currentTarget)) }}>
+          {!challengeToken ? (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="email">邮箱</Label>
+                <Input id="email" name="email" type="email" defaultValue="admin@lanqin.local" required className="h-11 text-base" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">密码</Label>
+                <Input id="password" name="password" type="password" defaultValue="ChangeMe123!" required className="h-11 text-base" />
+              </div>
+            </>
+          ) : (
+            <div className="space-y-2">
+              <Label htmlFor="twoFactorCode">双因素验证码</Label>
+              <Input id="twoFactorCode" name="twoFactorCode" inputMode="numeric" autoComplete="one-time-code" minLength={6} maxLength={6} required className="h-11 text-base" />
+            </div>
+          )}
+          {!challengeToken && turnstileRequired && (
+            <TurnstileBox siteKey={publicSettings.data?.turnstileSiteKey || ""} onToken={setTurnstileToken} />
+          )}
          <Button className="h-11 w-full text-base" disabled={login.isPending}>
-            {login.isPending ? "登录中..." : "登录"}
+            {login.isPending ? "登录中..." : challengeToken ? "验证登录" : "登录"}
          </Button>
+          {challengeToken && <Button type="button" variant="ghost" className="w-full" onClick={() => setChallengeToken("")}>返回登录</Button>}
        </form>
      </div>
    </div>
  )
 }
+
+declare global {
+  interface Window {
+    turnstile?: {
+      render: (container: HTMLElement, options: { sitekey: string; callback: (token: string) => void; "expired-callback": () => void; "error-callback": () => void }) => string
+      remove: (widgetId: string) => void
+    }
+  }
+}
+
+function TurnstileBox({ siteKey, onToken }: { siteKey: string; onToken: (token: string) => void }) {
+  const ref = React.useRef<HTMLDivElement | null>(null)
+  React.useEffect(() => {
+    if (!siteKey || !ref.current) return
+    let cancelled = false
+    let widgetId = ""
+    function render() {
+      if (cancelled || !ref.current || !window.turnstile) return
+      ref.current.innerHTML = ""
+      widgetId = window.turnstile.render(ref.current, {
+        sitekey: siteKey,
+        callback: onToken,
+        "expired-callback": () => onToken(""),
+        "error-callback": () => onToken(""),
+      })
+    }
+    if (window.turnstile) {
+      render()
+    } else {
+      const existing = document.querySelector('script[src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"]')
+      if (existing) {
+        existing.addEventListener("load", render, { once: true })
+      } else {
+        const script = document.createElement("script")
+        script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
+        script.async = true
+        script.defer = true
+        script.addEventListener("load", render, { once: true })
+        document.head.appendChild(script)
+      }
+    }
+    return () => {
+      cancelled = true
+      onToken("")
+      if (widgetId && window.turnstile) window.turnstile.remove(widgetId)
+    }
+  }, [siteKey, onToken])
+  return <div className="flex justify-center rounded-md border p-2"><div ref={ref} /></div>
+}
@@ -73,6 +73,7 @@ export function MailPage() {
  const themeMountedRef = React.useRef(false)

  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 messages = useQuery({ queryKey: ["messages", selectedMailboxId, folder, query], queryFn: () => api.messages(folder, query, "", selectedMailboxId), enabled: !!selectedMailboxId })
@@ -125,6 +126,16 @@ export function MailPage() {
    return () => events.close()
  }, [qc])

+  React.useEffect(() => {
+    if (!publicSettings.data?.mailAutoRefresh) return
+    const interval = Math.max(publicSettings.data.mailRefreshMs || 30000, 5000)
+    const timer = window.setInterval(() => {
+      qc.invalidateQueries({ queryKey: ["messages"] })
+      qc.invalidateQueries({ queryKey: ["folders"] })
+    }, interval)
+    return () => window.clearInterval(timer)
+  }, [publicSettings.data?.mailAutoRefresh, publicSettings.data?.mailRefreshMs, qc])
+
  const selected = detail.data
  const allMessages = messages.data?.items || []
  const visibleMessages = allMessages.filter((message) => {
@@ -2,7 +2,8 @@ import * as React from "react"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import { useNavigate, useSearchParams } from "react-router-dom"
-import { ArrowLeft, BarChart3, Ban, Contact, Copy, LogOut, Mail, MailCheck, MailX, Moon, PanelLeftClose, PanelLeftOpen, RefreshCcw, Settings, ShieldCheck, SlidersHorizontal, Sun, Trash2 } from "lucide-react"
+import { ArrowLeft, BarChart3, Ban, Contact, Copy, KeyRound, LogOut, Mail, MailCheck, MailX, Moon, PanelLeftClose, PanelLeftOpen, RefreshCcw, Settings, ShieldCheck, SlidersHorizontal, Sun, Trash2 } from "lucide-react"
+import { QRCodeSVG } from "qrcode.react"
 import { api, Mailbox, MailStats } from "@/lib/api"
 import { cn, formatBytes } from "@/lib/utils"
 import { applyTheme, getInitialTheme } from "@/lib/theme"
@@ -40,6 +41,7 @@ export function ProfilePage() {
  const [params, setParams] = useSearchParams()
  const { toast } = useToast()
  const passwordFormRef = React.useRef<HTMLFormElement>(null)
+  const twoFactorFormRef = React.useRef<HTMLFormElement>(null)
  const sidebarPanelRef = React.useRef<ImperativePanelHandle>(null)
  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false)
  const [mailboxId, setMailboxId] = React.useState(() => localStorage.getItem("lanqin:selected-mailbox") || "")
@@ -73,6 +75,21 @@ export function ProfilePage() {
    onSuccess: () => { passwordFormRef.current?.reset(); toast({ title: "密码已更新" }) },
    onError: (error) => toast({ title: "修改失败", description: error.message }),
  })
+  const setupTwoFactor = useMutation({
+    mutationFn: api.setupTwoFactor,
+    onSuccess: () => toast({ title: "双因素密钥已生成" }),
+    onError: (error) => toast({ title: "生成失败", description: error.message }),
+  })
+  const enableTwoFactor = useMutation({
+    mutationFn: (form: FormData) => api.enableTwoFactor(String(form.get("code") || "")),
+    onSuccess: (data) => { qc.setQueryData(["me"], data); setupTwoFactor.reset(); twoFactorFormRef.current?.reset(); toast({ title: "双因素认证已启用" }) },
+    onError: (error) => toast({ title: "启用失败", description: error.message }),
+  })
+  const disableTwoFactor = useMutation({
+    mutationFn: (form: FormData) => api.disableTwoFactor(String(form.get("code") || "")),
+    onSuccess: (data) => { qc.setQueryData(["me"], data); twoFactorFormRef.current?.reset(); toast({ title: "双因素认证已关闭" }) },
+    onError: (error) => toast({ title: "关闭失败", description: error.message }),
+  })
  const createContact = useMutation({
    mutationFn: (form: FormData) => api.createContact({ name: String(form.get("name") || ""), email: String(form.get("email") || ""), note: String(form.get("note") || "") }),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ["contacts"] }); toast({ title: "联系人已保存" }) },
@@ -158,11 +175,11 @@ export function ProfilePage() {
    if (tab === "rules") return <RulesSection items={rules.data?.items || []} mailboxes={mailboxes.data?.items || []} mailboxId={ruleMailboxId} action={ruleAction} onMailboxChange={setRuleMailboxId} onActionChange={setRuleAction} onCreate={(form) => createRule.mutate(form)} onDelete={(id) => deleteRule.mutate(id)} pending={createRule.isPending} />
    if (tab === "blocked") return <BlockedSection items={blocked.data?.items || []} mailboxes={mailboxes.data?.items || []} mailboxId={blockedMailboxId} spamCount={stats.data?.byFolder.find((f) => f.role === "spam")?.count || 0} onMailboxChange={setBlockedMailboxId} onCreate={(form) => createBlocked.mutate(form)} onDelete={(id) => deleteBlocked.mutate(id)} pending={createBlocked.isPending} />
    if (tab === "stats") return <StatsSection stats={stats.data} mailbox={selectedMailbox} onRefresh={() => stats.refetch()} />
-    return <ProfileOverview user={user!} profile={profile} password={password} passwordFormRef={passwordFormRef} stats={stats.data} />
+    return <ProfileOverview user={user!} profile={profile} password={password} passwordFormRef={passwordFormRef} stats={stats.data} twoFactorFormRef={twoFactorFormRef} setupTwoFactor={setupTwoFactor} enableTwoFactor={enableTwoFactor} disableTwoFactor={disableTwoFactor} onCopy={copy} />
  }
 }

-function ProfileOverview({ user, profile, password, passwordFormRef, stats }: { user: { email: string; displayName: string; role: string; disabled: boolean; createdAt: string }; profile: { mutate: (form: FormData) => void; isPending: boolean }; password: { mutate: (form: FormData) => void; isPending: boolean }; passwordFormRef: React.RefObject<HTMLFormElement>; stats?: MailStats }) {
+function ProfileOverview({ user, profile, password, passwordFormRef, stats, 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; 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>
@@ -206,6 +223,67 @@ function ProfileOverview({ user, profile, password, passwordFormRef, stats }: {
        </CardContent>
      </Card>

+      <Card>
+        <CardHeader>
+          <CardTitle>双因素认证</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between rounded-lg border p-3">
+            <div className="flex items-center gap-2 text-sm">
+              <KeyRound className="h-4 w-4" />
+              认证状态
+            </div>
+            <Badge variant={user.twoFactorEnabled ? "default" : "secondary"}>{user.twoFactorEnabled ? "已启用" : "未启用"}</Badge>
+          </div>
+
+          {!user.twoFactorEnabled && !setupTwoFactor.data && (
+            <Button onClick={() => setupTwoFactor.mutate()} disabled={setupTwoFactor.isPending}>{setupTwoFactor.isPending ? "生成中..." : "启用双因素认证"}</Button>
+          )}
+
+          {!user.twoFactorEnabled && setupTwoFactor.data && (
+            <form ref={twoFactorFormRef} className="space-y-4" onSubmit={(e) => { e.preventDefault(); enableTwoFactor.mutate(new FormData(e.currentTarget)) }}>
+              <div className="grid gap-4 lg:grid-cols-[220px_minmax(0,1fr)]">
+                <div className="flex justify-center rounded-lg border bg-white p-4">
+                  <QRCodeSVG value={setupTwoFactor.data.otpauthUrl} size={184} level="M" />
+                </div>
+                <div className="space-y-4">
+                  <Field label="密钥">
+                    <div className="flex gap-2">
+                      <Input value={setupTwoFactor.data.secret} readOnly />
+                      <Button type="button" variant="outline" onClick={() => onCopy(setupTwoFactor.data!.secret)}><Copy className="h-4 w-4" />复制</Button>
+                    </div>
+                  </Field>
+                  <Field label="绑定地址">
+                    <div className="flex gap-2">
+                      <Input value={setupTwoFactor.data.otpauthUrl} readOnly />
+                      <Button type="button" variant="outline" onClick={() => onCopy(setupTwoFactor.data!.otpauthUrl)}><Copy className="h-4 w-4" />复制</Button>
+                    </div>
+                  </Field>
+                </div>
+              </div>
+              <Field label="验证码">
+                <Input name="code" inputMode="numeric" autoComplete="one-time-code" minLength={6} maxLength={6} required />
+              </Field>
+              <div className="flex justify-end gap-2">
+                <Button type="button" variant="outline" onClick={() => setupTwoFactor.reset()}>取消</Button>
+                <Button disabled={enableTwoFactor.isPending}>{enableTwoFactor.isPending ? "启用中..." : "确认启用"}</Button>
+              </div>
+            </form>
+          )}
+
+          {user.twoFactorEnabled && (
+            <form ref={twoFactorFormRef} className="space-y-4" onSubmit={(e) => { e.preventDefault(); disableTwoFactor.mutate(new FormData(e.currentTarget)) }}>
+              <Field label="当前验证码">
+                <Input name="code" inputMode="numeric" autoComplete="one-time-code" minLength={6} maxLength={6} required />
+              </Field>
+              <div className="flex justify-end">
+                <Button variant="destructive" disabled={disableTwoFactor.isPending}>{disableTwoFactor.isPending ? "关闭中..." : "关闭双因素认证"}</Button>
+              </div>
+            </form>
+          )}
+        </CardContent>
+      </Card>
+
      <Card>
        <CardHeader>
          <CardTitle>修改密码</CardTitle>