release: prepare v1.2.41

.github/release-notes/v1.2.36.md

@@ -0,0 +1,11 @@
+- Google 云端硬盘配置弹窗增加 Google Drive API 启用说明和官方控制台直达入口。
+- 明确提示必须在 OAuth 客户端所属的同一 Google Cloud 项目中启用 Drive API。
+- 补充启用 API 后重新连接 Google 账号的操作顺序，减少授权成功但无法上传的配置误区。
+- 写信与编辑草稿弹窗改为更紧凑的居中布局，重新整理字段、工具栏和发送操作区，完整保留附件、格式、签名、日程、预览和定时发送能力。
+- 修复超长授权码、链接和代码内容撑宽编辑器的问题，桌面端与手机端均会在正文范围内安全换行。
+- 启用浏览器原生拼写检查，并统一普通发送与定时发送的收件人校验。
+- 关闭写信窗口时立即保存最新正文与附件，保存失败会保留窗口并提示，避免等待自动保存期间丢失草稿。
+- 写信格式栏增加正文与标题 1/2/3 段落样式、实时字数统计和“更多格式”菜单，将完整格式能力稳定收纳在两行内。
+- 提高邮箱与管理后台次级文字的对比度，改善浅色与深色模式下的阅读清晰度。
+
+**完整更新日志**：[v1.2.35...v1.2.36](https://github.com/zxyszx/NewSzxcn-Email/compare/v1.2.35...v1.2.36)

.github/release-notes/v1.2.37.md

@@ -0,0 +1,4 @@
+- 写信页发送区改为 Gmail 风格拆分按钮，主按钮直接发送，右侧下拉菜单提供“定时发送”。
+- 移除容易被误认为日期选择器的独立日历方块，保留原有定时预设和自定义发送时间功能。
+
+**完整更新日志**：[v1.2.36...v1.2.37](https://github.com/zxyszx/NewSzxcn-Email/compare/v1.2.36...v1.2.37)

.github/release-notes/v1.2.38.md

@@ -0,0 +1,6 @@
+- 写信发送拆分按钮统一使用 Gmail 风格蓝色主操作，浅色与暗色模式都保持清晰白字及一致悬停状态。
+- 修复“定时发送”菜单按左侧展开导致右边框越过写信窗口的问题，菜单改为右对齐并增加边缘避让和垂直间距。
+- 将默认主操作按钮从通用强调色中拆分，暗色主题下后台、个人设置、规则、弹窗确认、登录注册等页面统一使用深灰底白字；勾选框、进度条、选中态等仍保留清晰的强调色。
+- 已保存的浅色或暗色主题现在会在应用启动时统一恢复，切换到后台、登录及其他页面后不再丢失主题状态。
+
+**完整更新日志**：[v1.2.37...v1.2.38](https://github.com/zxyszx/NewSzxcn-Email/compare/v1.2.37...v1.2.38)

.github/release-notes/v1.2.39.md

@@ -0,0 +1,4 @@
+- 修复桌面端文件夹或标签较多时侧栏被内容撑出视口、底部项目无法访问的问题；账号、邮箱切换和写信入口保持固定，邮件导航区域独立滚动。
+- 同步包含 v1.2.38 的暗色主按钮与 Gmail 蓝色发送按钮修复，更新完成后写信发送按钮在浅色和暗色模式下均为蓝底白字。
+
+**完整更新日志**：[v1.2.38...v1.2.39](https://github.com/zxyszx/NewSzxcn-Email/compare/v1.2.38...v1.2.39)

.github/release-notes/v1.2.40.md

@@ -0,0 +1,6 @@
+- 修复桌面端文件夹或标签较多时侧栏被内容撑出视口、底部项目无法访问的问题；账号、邮箱切换和写信入口保持固定，邮件导航区域独立滚动。
+- 写信发送按钮在浅色和暗色模式下统一为 Gmail 风格蓝底白字，定时发送菜单在桌面和手机端均不会越过写信窗口。
+- 暗色主题默认主操作按钮改为深灰底白字，并与勾选框、进度条、危险按钮等语义颜色分离；进入后台或登录页后也会保持已选择的主题。
+- 修复备份后台任务测试结束过早导致发布流程偶发失败的问题。
+
+**完整更新日志**：[v1.2.39...v1.2.40](https://github.com/zxyszx/NewSzxcn-Email/compare/v1.2.39...v1.2.40)

.github/release-notes/v1.2.41.md

@@ -0,0 +1,3 @@
+- 调整写信页定时发送菜单宽度，使其与“发送 + 下拉箭头”组合按钮左右边缘完全对齐，同时保留桌面和手机端边界避让。
+
+**完整更新日志**：[v1.2.40...v1.2.41](https://github.com/zxyszx/NewSzxcn-Email/compare/v1.2.40...v1.2.41)

VERSION

@@ -1 +1 @@
-1.2.35
+1.2.41

apps/api/internal/app/backup_handlers_test.go

@@ -316,6 +316,19 @@ func TestManualBackupReusesSavedPassword(t *testing.T) {
 	if err != nil || password != "SharedBackupPassword9" {
 		t.Fatalf("saved password changed: %q, %v", password, err)
 	}
+	deadline := time.Now().Add(10 * time.Second)
+	for {
+		a.backupMu.Lock()
+		status := a.backupJob.Status
+		a.backupMu.Unlock()
+		if status != "running" {
+			break
+		}
+		if time.Now().After(deadline) {
+			t.Fatal("manual backup did not finish before timeout")
+		}
+		time.Sleep(20 * time.Millisecond)
+	}
 }
 
 func TestPublicServerIPValidation(t *testing.T) {

apps/web/src/components/ui/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
+          "bg-[hsl(var(--action-primary))] text-[hsl(var(--action-primary-foreground))] hover:bg-[hsl(var(--action-primary)/0.9)]",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:

apps/web/src/index.css

@@ -12,10 +12,12 @@
     --popover-foreground: 0 0% 9%;
     --primary: 0 0% 12%;
     --primary-foreground: 0 0% 98%;
+    --action-primary: 0 0% 12%;
+    --action-primary-foreground: 0 0% 98%;
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 12%;
     --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 42%;
+    --muted-foreground: 0 0% 36%;
     --accent: 0 0% 95%;
     --accent-foreground: 0 0% 12%;
     --destructive: 358 88% 61%;
@@ -33,6 +35,8 @@
     --sidebar-accent-foreground: 0 0% 12%;
     --sidebar-border: 0 0% 89.8%;
     --sidebar-ring: 0 0% 42%;
+    --compose-send: 217 89% 43%;
+    --compose-send-hover: 216 94% 32%;
   }
 
   * { @apply border-border; }
@@ -61,10 +65,12 @@
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 240 5.9% 10%;
+    --action-primary: 240 4% 24%;
+    --action-primary-foreground: 0 0% 98%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
     --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
+    --muted-foreground: 240 5% 72%;
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
@@ -80,10 +86,22 @@
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    --compose-send: 217 89% 52%;
+    --compose-send-hover: 214 94% 60%;
   }
 }
 
 @layer components {
+  .compose-send-button.compose-send-button {
+    background: hsl(var(--compose-send));
+    color: white;
+  }
+
+  .compose-send-button.compose-send-button:hover {
+    background: hsl(var(--compose-send-hover));
+    color: white;
+  }
+
   .mail-shell-grid {
     display: grid;
     grid-template-columns: var(--app-sidebar-width, 18rem) minmax(0, 1fr);

apps/web/src/main.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { Navigate, RouterProvider, createBrowserRouter } from "react-router-dom"
 import { Toaster } from "@/components/ui/toaster"
 import { LanguageDomSync } from "@/lib/language"
+import { applyTheme, getInitialTheme } from "@/lib/theme"
 import { ProtectedLayout } from "@/components/protected-layout"
 import { AdminOnly } from "@/components/admin-only"
 import "./index.css"
@@ -15,6 +16,8 @@ const AdminPage = React.lazy(() => import("@/pages/admin").then((module) => ({ d
 const ProfilePage = React.lazy(() => import("@/pages/profile").then((module) => ({ default: module.ProfilePage })))
 const NotFoundPage = React.lazy(() => import("@/pages/not-found").then((module) => ({ default: module.NotFoundPage })))
 
+applyTheme(getInitialTheme())
+
 const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, staleTime: 10_000 } } })
 const router = createBrowserRouter([
   { path: "/login", element: <LoginPage /> },

apps/web/src/pages/admin.tsx

@@ -566,6 +566,7 @@ function BackupsSection() {
         <DialogContent className="w-[calc(100vw-2rem)] max-w-lg rounded-lg">
           <DialogHeader><DialogTitle>Google 云端硬盘</DialogTitle></DialogHeader>
           <div className="space-y-4">
+            <div className="rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900"><div className="font-medium">连接前必须启用 Google Drive API</div><p className="mt-1 text-xs">请在 OAuth 客户端所属的同一个 Google Cloud 项目中启用 API。启用后若仍提示无权限，请先断开连接，再重新授权。</p><Button asChild type="button" variant="link" className="mt-1 h-auto p-0 text-amber-900"><a href="https://console.cloud.google.com/apis/library/drive.googleapis.com" target="_blank" rel="noreferrer">打开 Google Drive API <ExternalLink className="ml-1 h-3.5 w-3.5" /></a></Button></div>
             <div className="space-y-2"><Label htmlFor="google-client-id">OAuth 客户端 ID</Label><Input id="google-client-id" value={googleClientId} onChange={(e) => setGoogleClientId(e.target.value)} /></div>
             <div className="space-y-2"><Label htmlFor="google-client-secret">OAuth 客户端密钥</Label><Input id="google-client-secret" type="password" value={googleClientSecret} onChange={(e) => setGoogleClientSecret(e.target.value)} placeholder={backups.data?.googleDrive.clientSecretSet ? "已安全保存，留空不变" : "请输入客户端密钥"} /></div>
             <div className="space-y-2"><Label htmlFor="google-folder-name">备份文件夹</Label><Input id="google-folder-name" value={googleFolderName} onChange={(e) => setGoogleFolderName(e.target.value)} /></div>

apps/web/src/pages/mail.tsx

@@ -1307,8 +1307,8 @@ export function MailPage() {
     setAdvancedSearchOpen(false)
   }
   const sidebarContent = (
-    <Sidebar collapsible="none" className="h-full w-full border-r border-border bg-sidebar text-sidebar-foreground">
+    <Sidebar collapsible="none" className="h-full min-h-0 w-full overflow-hidden border-r border-border bg-sidebar text-sidebar-foreground">
-      <SidebarHeader className={cn("pb-2 pt-3", sidebarCollapsed ? "px-2" : "px-3")}>
+      <SidebarHeader className={cn("shrink-0 pb-2 pt-3", sidebarCollapsed ? "px-2" : "px-3")}>
         <AccountHeader
           collapsed={sidebarCollapsed}
           name={me.data?.user.displayName || selectedMailbox?.address || "NewSzxcn"}
@@ -1352,7 +1352,7 @@ export function MailPage() {
           </Button>
         )}
       </SidebarHeader>
-      <SidebarContent className="px-1">
+      <SidebarContent className="min-h-0 overflow-x-hidden overflow-y-auto overscroll-contain px-1 pb-4">
         {!sidebarCollapsed && publicSettings.isError && <SidebarQueryFailure label="邮箱设置读取失败" onRetry={() => { void publicSettings.refetch() }} />}
         <SidebarGroup>
           {!sidebarCollapsed && (
@@ -1884,7 +1884,7 @@ export function MailPage() {
                   </SheetTrigger>
                   <SheetContent side="left" className="w-[86vw] max-w-80 p-0 [&>button]:hidden" aria-describedby={undefined}>
                     <SheetTitle className="sr-only">邮箱导航</SheetTitle>
-                    <div className="h-svh">{sidebarContent}</div>
+                    <div className="h-svh min-h-0 overflow-hidden">{sidebarContent}</div>
                   </SheetContent>
                 </Sheet>
                 <div className="min-w-0 flex-1 text-sm font-semibold">{mailView === "label" && selectedLabel ? <Badge variant="outline" className="gap-1.5 rounded-md font-normal"><span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: labelDotColor(selectedLabel) }} />{selectedLabel.name}</Badge> : viewTitle}</div>
@@ -1900,7 +1900,7 @@ export function MailPage() {
           </div>
         ) : (
           <div className="mail-shell-grid h-full min-h-0 w-full min-w-0 overflow-hidden">
-            <div className="min-w-0">
+            <div className="h-full min-h-0 min-w-0 overflow-hidden">
               {sidebarContent}
             </div>
             <section className="flex h-full min-h-0 min-w-0 flex-col">
@@ -3916,6 +3916,7 @@ function ComposeDialog({ mailboxes, mailbox, open, draft, limits, canSend, canMa
   const [subjectValue, setSubjectValue] = React.useState(draft?.subject || "")
   const [draftStatus, setDraftStatus] = React.useState<"idle" | "saving" | "saved" | "error">("idle")
   const [lastSavedAt, setLastSavedAt] = React.useState<Date | null>(null)
+  const [closing, setClosing] = React.useState(false)
   const [scheduleDialogOpen, setScheduleDialogOpen] = React.useState(false)
   const [sendIntent, setSendIntent] = React.useState<ComposeSendIntent | null>(null)
   const sendStartedRef = React.useRef(false)
@@ -4031,7 +4032,7 @@ function ComposeDialog({ mailboxes, mailbox, open, draft, limits, canSend, canMa
   }, [files])
 
   React.useEffect(() => {
-    if (!open || sendStartedRef.current || !hasDraftContent || !canManageDrafts) return
+    if (!open || closing || sendStartedRef.current || !hasDraftContent || !canManageDrafts) return
     const payloadKey = JSON.stringify({ ...composePayload, draftId })
     if (payloadKey === lastSavedPayloadRef.current) return
     const timer = window.setTimeout(async () => {
@@ -4052,7 +4053,7 @@ function ComposeDialog({ mailboxes, mailbox, open, draft, limits, canSend, canMa
       }
     }, 5000)
     return () => window.clearTimeout(timer)
-  }, [open, hasDraftContent, composePayload, draftId, qc, canManageDrafts])
+  }, [open, closing, hasDraftContent, composePayload, draftId, qc, canManageDrafts])
 
   function buildSendWarnings(attachmentsCount: number) {
     const warnings: string[] = []
@@ -4104,6 +4105,10 @@ function ComposeDialog({ mailboxes, mailbox, open, draft, limits, canSend, canMa
     const to = splitEmails(toValue)
     const cc = showCc ? splitEmails(ccValue) : []
     const bcc = showBcc ? splitEmails(bccValue) : []
+    if (to.length === 0) {
+      toast({ title: "请填写收件人" })
+      return
+    }
     const text = body.text
     const html = body.html || plainTextToHtml(text)
     const payload: SendPayload = { mailboxId: senderMailbox.id, to, cc, bcc, subject: subjectValue, text, html, attachments }
@@ -4139,11 +4144,18 @@ function ComposeDialog({ mailboxes, mailbox, open, draft, limits, canSend, canMa
     }
     if (!attachmentsWithinLimit()) return
     const attachments = await Promise.all(files.map(fileToAttachment))
+    const to = splitEmails(toValue)
+    const cc = showCc ? splitEmails(ccValue) : []
+    const bcc = showBcc ? splitEmails(bccValue) : []
+    if (to.length === 0) {
+      toast({ title: "请填写收件人" })
+      return
+    }
     const payload: SendPayload & { draftId?: string; sendAt: string } = {
       mailboxId: senderMailbox.id,
-      to: splitEmails(toValue),
+      to,
-      cc: showCc ? splitEmails(ccValue) : [],
+      cc,
-      bcc: showBcc ? splitEmails(bccValue) : [],
+      bcc,
       subject: subjectValue,
       text: body.text,
       html: body.html || plainTextToHtml(body.text),
@@ -4163,15 +4175,45 @@ function ComposeDialog({ mailboxes, mailbox, open, draft, limits, canSend, canMa
       },
     })
   }
+
+  async function closeCompose() {
+    if (closing) return
+    if (!canManageDrafts || sendStartedRef.current || !hasDraftContent) {
+      onOpenChange(false)
+      return
+    }
+    setClosing(true)
+    setDraftStatus("saving")
+    try {
+      const attachments = await Promise.all(files.map(fileToAttachment))
+      const payload: DraftPayload = { ...composePayload, attachments }
+      const saved = await api.saveDraft(payload, draftId || undefined)
+      setDraftId(saved.id)
+      lastSavedPayloadRef.current = JSON.stringify({ ...payload, draftId: saved.id })
+      setLastSavedAt(new Date())
+      setDraftStatus("saved")
+      await Promise.all([
+        qc.invalidateQueries({ queryKey: ["messages"] }),
+        qc.invalidateQueries({ queryKey: ["folders"] }),
+        qc.invalidateQueries({ queryKey: ["mail-stats"] }),
+      ])
+      onOpenChange(false)
+    } catch (error) {
+      setDraftStatus("error")
+      toast({ title: "草稿保存失败", description: error instanceof Error ? error.message : "请稍后重试" })
+    } finally {
+      setClosing(false)
+    }
+  }
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={(nextOpen) => { if (nextOpen) onOpenChange(true); else void closeCompose() }}>
       <DialogContent
-        className="flex h-svh w-screen max-w-none overflow-hidden p-0 sm:h-auto sm:max-h-[92vh] sm:w-[min(92vw,72rem)]"
+        className="flex h-svh w-screen max-w-none overflow-hidden p-0 sm:h-[min(88vh,48rem)] sm:w-[min(92vw,56rem)]"
         onInteractOutside={(event) => event.preventDefault()}
         onPointerDownOutside={(event) => event.preventDefault()}
       >
-        <form key={draft?.key || "new"} className="flex min-h-0 flex-1 flex-col sm:max-h-[90vh]" onSubmit={submit}>
+        <form key={draft?.key || "new"} className="flex min-h-0 min-w-0 flex-1 flex-col" onSubmit={submit}>
-          <DialogHeader className="border-b px-4 py-3 text-left sm:px-6 sm:py-4">
+          <DialogHeader className="border-b bg-muted/20 px-4 py-3 text-left sm:px-5">
             <DialogTitle className="flex min-w-0 flex-col gap-1 pr-8 sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:pr-6">
               <span>{draftId ? "编辑草稿" : "写信"}</span>
               <span className={cn("text-xs font-normal", draftStatus === "error" ? "text-destructive" : "text-muted-foreground")}>
@@ -4219,7 +4261,7 @@ function ComposeDialog({ mailboxes, mailbox, open, draft, limits, canSend, canMa
                 <Input name="bcc" placeholder="bcc@example.com" value={bccValue} onChange={(event) => setBccValue(event.target.value)} className="h-10 flex-1 rounded-none border-0 px-0 shadow-none focus-visible:ring-0" />
               </ComposeField>
             )}
-            <ComposeField label="主　题">
+            <ComposeField label="主题">
               <Input name="subject" placeholder="输入主题" value={subjectValue} onChange={(event) => setSubjectValue(event.target.value)} className="h-10 flex-1 rounded-none border-0 px-0 shadow-none focus-visible:ring-0" />
             </ComposeField>
             {defaultSignature.isError && (
@@ -4241,10 +4283,25 @@ function ComposeDialog({ mailboxes, mailbox, open, draft, limits, canSend, canMa
               onRemoveFile={(index) => { setAttachmentsTouched(true); setFiles((current) => current.filter((_, itemIndex) => itemIndex !== index)) }}
             />
           </div>
-          <DialogFooter className="grid grid-cols-3 gap-2 border-t bg-background px-4 py-3 sm:flex sm:flex-row sm:justify-end sm:px-6 sm:py-4">
+          <DialogFooter className="flex flex-row items-center justify-between gap-3 border-t bg-muted/15 px-4 py-3 sm:px-5">
-            <Button type="button" variant="outline" className="min-h-10 px-3" onClick={() => onOpenChange(false)}>取消</Button>
+            {canSend && (
-            {canSchedule && <Button type="button" variant="outline" className="min-h-10 px-3" disabled={send.isPending || scheduleSend.isPending || !senderMailbox} onClick={() => setScheduleDialogOpen(true)}><Calendar className="h-4 w-4" />定时</Button>}
+              <div className="flex min-w-0 items-center">
-            {canSend && <Button className="min-h-10 px-4" disabled={send.isPending || !senderMailbox}><Send className="h-4 w-4" />{send.isPending ? "发送中..." : "发送"}</Button>}
+                <Button className={cn("compose-send-button min-h-10 px-4", canSchedule && "rounded-r-none")} disabled={send.isPending || !senderMailbox}><Send className="h-4 w-4" />{send.isPending ? "发送中..." : "发送"}</Button>
+                {canSchedule && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button type="button" size="icon" className="compose-send-button h-10 w-9 shrink-0 rounded-l-none border-l border-white/30 px-0" title="发送选项" aria-label="发送选项" disabled={send.isPending || scheduleSend.isPending || !senderMailbox}>
+                        <ChevronDown className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" side="top" sideOffset={8} collisionPadding={12} className="w-[120px] min-w-[120px]">
+                      <DropdownMenuItem className={composerMenuItemClass} onSelect={() => setScheduleDialogOpen(true)}><Clock3 className="h-4 w-4" />定时发送</DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+              </div>
+            )}
+            <Button type="button" variant="ghost" className="min-h-10 px-3" disabled={closing} onClick={() => { void closeCompose() }}>{closing ? "保存中..." : "取消"}</Button>
           </DialogFooter>
         </form>
         <ScheduleSendDialog open={scheduleDialogOpen} pending={scheduleSend.isPending} onOpenChange={setScheduleDialogOpen} onConfirm={scheduleAt} />
@@ -4264,8 +4321,8 @@ function ComposeDialog({ mailboxes, mailbox, open, draft, limits, canSend, canMa
 
 function ComposeField({ label, children, action }: { label: string; children: React.ReactNode; action?: React.ReactNode }) {
   return (
-    <div className="flex min-h-14 flex-col gap-2 border-b px-4 py-2 sm:flex-row sm:items-center sm:px-6">
+    <div className="flex min-h-12 flex-col gap-1 border-b px-4 py-1.5 transition-colors focus-within:bg-muted/20 sm:flex-row sm:items-center sm:gap-2 sm:px-5">
-      <Label className="shrink-0 text-base font-normal text-foreground sm:w-20">{label}</Label>
+      <Label className="shrink-0 text-sm font-normal text-muted-foreground sm:w-16">{label}</Label>
       <div className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center">
         {children}
         {action}
@@ -4337,11 +4394,17 @@ type InsertDialogValue = { url: string; text: string; alt: string }
 const composerFontOptions = ["Arial", "Georgia", "Times New Roman", "Courier New", "Microsoft YaHei"]
 const composerFontSizeOptions = [
   ["2", "小号"],
-  ["3", "正文"],
+  ["3", "标准"],
   ["4", "中号"],
   ["5", "大号"],
 ] as const
 const composerFontSizeValueByKey: Record<string, string> = { "2": "13px", "3": "16px", "4": "20px", "5": "24px" }
+const composerParagraphOptions: ReadonlyArray<{ key: string; label: string; level?: 1 | 2 | 3 }> = [
+  { key: "paragraph", label: "正文" },
+  { key: "heading-1", label: "标题 1", level: 1 as const },
+  { key: "heading-2", label: "标题 2", level: 2 as const },
+  { key: "heading-3", label: "标题 3", level: 3 as const },
+] as const
 const composerTextColors = [["#111827", "默认"], ["#dc2626", "红色"], ["#2563eb", "蓝色"], ["#16a34a", "绿色"], ["#9333ea", "紫色"]] as const
 const composerHighlightColors = [["transparent", "无高亮"], ["#fef3c7", "黄色"], ["#dcfce7", "绿色"], ["#dbeafe", "蓝色"], ["#fce7f3", "粉色"]] as const
 const composerEmojiOptions = ["😀", "😄", "😊", "🙂", "😉", "😍", "😘", "😎", "🤔", "👍", "👏", "🙏", "💪", "🎉", "🔥", "✨", "❤️", "✅", "📌", "📅", "☕", "💡", "🚀", "⭐"]
@@ -4383,7 +4446,15 @@ function fontLabel(value: string) {
 
 function fontSizeLabel(value: string) {
   const normalized = normalizeFontSize(value) || "3"
-  return composerFontSizeOptions.find(([size]) => size === normalized)?.[1] || "正文"
+  return composerFontSizeOptions.find(([size]) => size === normalized)?.[1] || "标准"
+}
+
+function paragraphStyleLabel(editor?: Editor | null) {
+  if (!editor) return "正文"
+  for (const option of composerParagraphOptions) {
+    if (option.level && editor.isActive("heading", { level: option.level })) return option.label
+  }
+  return "正文"
 }
 
 function normalizeInsertUrl(value: string, kind: InsertDialogState["kind"]) {
@@ -4509,8 +4580,10 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, max
     content: composerInitialHtml(defaultValue, defaultHtml),
     editorProps: {
       attributes: {
-        class: "mail-html min-h-[240px] min-w-0 flex-1 overflow-y-auto px-4 py-4 text-base leading-7 outline-none sm:min-h-[280px] sm:px-6 sm:py-5",
+        class: "mail-html min-h-[220px] min-w-0 flex-1 overflow-y-auto px-4 py-4 text-base leading-7 outline-none sm:min-h-[260px] sm:px-5",
         "aria-label": "正文",
+        spellcheck: "true",
+        autocorrect: "on",
       },
       handlePaste(view, event) {
         const clipboard = event.clipboardData
@@ -4564,6 +4637,7 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, max
   const activeFontSize = normalizeFontSize(textStyleAttributes?.fontSize || "") || "3"
   const activeColor = textStyleAttributes?.color || ""
   const activeHighlight = textStyleAttributes?.backgroundColor || ""
+  const characterCount = editor?.getText().replace(/\s/g, "").length || 0
   void selectionVersion
 
   function applyFont(font: string) {
@@ -4631,9 +4705,9 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, max
   }
 
   return (
-    <div className="flex min-h-[330px] flex-1 flex-col bg-background sm:min-h-[420px]">
+    <div className="flex min-h-[300px] min-w-0 flex-1 flex-col bg-background sm:min-h-[360px]">
       <Input ref={fileInputRef} type="file" multiple className="hidden" onChange={handlePickedFiles} />
-      <div className="flex min-h-11 flex-wrap items-center gap-1 overflow-visible border-b px-3 py-2 sm:px-6">
+      <div className="flex min-h-11 flex-wrap items-center gap-1 overflow-visible border-b px-3 py-2 sm:px-5">
         <ToolbarButton label="撤销" disabled={!editor?.can().undo()} onClick={() => editor?.chain().focus().undo().run()}><Undo2 className="h-4 w-4" /></ToolbarButton>
         <ToolbarButton label="重做" disabled={!editor?.can().redo()} onClick={() => editor?.chain().focus().redo().run()}><Redo2 className="h-4 w-4" /></ToolbarButton>
         <Separator orientation="vertical" className="mx-2 h-6" />
@@ -4650,7 +4724,7 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, max
             <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>
+        <span className="px-1 text-xs text-muted-foreground" title={`单个附件上限 ${maxAttachmentText}`}>附件上限 {maxAttachmentText}</span>
         <ToolbarTextButton label="日程" icon={<Calendar className="h-4 w-4" />} onClick={() => setScheduleOpen(true)} />
         <DropdownMenu open={emojiOpen} onOpenChange={setEmojiOpen}>
           <DropdownMenuTrigger asChild>
@@ -4675,9 +4749,24 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, max
         </div>
       </div>
       {formatOpen && (
-        <div className="flex min-h-14 flex-wrap items-center gap-1 overflow-visible border-b bg-muted/40 px-3 py-2 sm:px-6">
+        <div className="flex min-h-14 flex-wrap items-center gap-1 overflow-visible border-b bg-muted/40 px-3 py-2 sm:px-5">
           <ToolbarButton label="清除格式" disabled={!editor} onClick={() => editor?.chain().focus().unsetAllMarks().clearNodes().run()}><Eraser className="h-4 w-4" /></ToolbarButton>
-          <Separator orientation="vertical" className="mx-2 h-6" />
+          <Separator orientation="vertical" className="mx-1 h-6" />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button type="button" variant="ghost" size="sm" className={cn("h-8 min-w-[76px] justify-between rounded-md border border-transparent px-2 font-normal hover:border-border hover:bg-accent", paragraphStyleLabel(editor) !== "正文" && "border-primary/35 bg-primary/10 text-primary")} onMouseDown={(event) => event.preventDefault()} disabled={!editor}>
+                {paragraphStyleLabel(editor)}<ChevronDown className="h-3.5 w-3.5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              {composerParagraphOptions.map((option) => (
+                <DropdownMenuItem key={option.key} className={composerMenuItemClass} onSelect={() => option.level ? editor?.chain().focus().toggleHeading({ level: option.level }).run() : editor?.chain().focus().setParagraph().run()}>
+                  <Check className={cn("h-4 w-4", paragraphStyleLabel(editor) === option.label ? "opacity-100" : "opacity-0")} />
+                  <span className={cn(option.level === 1 && "text-lg font-semibold", option.level === 2 && "text-base font-semibold", option.level === 3 && "text-sm font-semibold")}>{option.label}</span>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button type="button" variant="ghost" size="sm" className={cn("h-8 min-w-[112px] justify-between rounded-md border border-transparent px-2 font-normal hover:border-border hover:bg-accent hover:shadow-sm", activeFont && "border-primary/35 bg-primary/10 text-primary shadow-sm")} onMouseDown={(event) => event.preventDefault()} disabled={!editor}>
@@ -4708,7 +4797,7 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, max
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
-          <Separator orientation="vertical" className="mx-2 h-6" />
+          <Separator orientation="vertical" className="mx-1 h-6" />
           <ToolbarButton label="加粗" active={editor?.isActive("bold")} disabled={!editor} onClick={() => editor?.chain().focus().toggleBold().run()}><Bold className="h-4 w-4" /></ToolbarButton>
           <ToolbarButton label="斜体" active={editor?.isActive("italic")} disabled={!editor} onClick={() => editor?.chain().focus().toggleItalic().run()}><Italic className="h-4 w-4" /></ToolbarButton>
           <ToolbarButton label="下划线" active={editor?.isActive("underline")} disabled={!editor} onClick={() => editor?.chain().focus().toggleUnderline().run()}><Underline className="h-4 w-4" /></ToolbarButton>
@@ -4743,30 +4832,39 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, max
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
-          <Separator orientation="vertical" className="mx-2 h-6" />
+          <Separator orientation="vertical" className="mx-1 h-6" />
           <ToolbarButton label="无序列表" active={editor?.isActive("bulletList")} disabled={!editor} onClick={() => editor?.chain().focus().toggleBulletList().run()}><List className="h-4 w-4" /></ToolbarButton>
           <ToolbarButton label="有序列表" active={editor?.isActive("orderedList")} disabled={!editor} onClick={() => editor?.chain().focus().toggleOrderedList().run()}><ListOrdered className="h-4 w-4" /></ToolbarButton>
-          <ToolbarButton label="减少缩进" disabled={!editor?.can().liftListItem("listItem")} onClick={() => editor?.chain().focus().liftListItem("listItem").run()}><IndentDecrease className="h-4 w-4" /></ToolbarButton>
+          <DropdownMenu>
-          <ToolbarButton label="增加缩进" disabled={!editor?.can().sinkListItem("listItem")} onClick={() => editor?.chain().focus().sinkListItem("listItem").run()}><IndentIncrease className="h-4 w-4" /></ToolbarButton>
+            <DropdownMenuTrigger asChild>
-          <Separator orientation="vertical" className="mx-2 h-6" />
+              <Button type="button" variant="ghost" size="icon" className="h-8 w-8 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground" title="更多格式" aria-label="更多格式" onMouseDown={(event) => event.preventDefault()} disabled={!editor}>
-          <ToolbarButton label="左对齐" active={editor?.isActive({ textAlign: "left" })} disabled={!editor} onClick={() => editor?.chain().focus().setTextAlign("left").run()}><AlignLeft className="h-4 w-4" /></ToolbarButton>
+                <Ellipsis className="h-4 w-4" />
-          <ToolbarButton label="居中" active={editor?.isActive({ textAlign: "center" })} disabled={!editor} onClick={() => editor?.chain().focus().setTextAlign("center").run()}><AlignCenter className="h-4 w-4" /></ToolbarButton>
+              </Button>
-          <ToolbarButton label="右对齐" active={editor?.isActive({ textAlign: "right" })} disabled={!editor} onClick={() => editor?.chain().focus().setTextAlign("right").run()}><AlignRight className="h-4 w-4" /></ToolbarButton>
+            </DropdownMenuTrigger>
-          <ToolbarButton label="引用" active={editor?.isActive("blockquote")} disabled={!editor} onClick={() => editor?.chain().focus().toggleBlockquote().run()}><Quote className="h-4 w-4" /></ToolbarButton>
+            <DropdownMenuContent align="end" className="w-44">
-          <ToolbarButton label="代码块" active={editor?.isActive("codeBlock")} disabled={!editor} onClick={() => editor?.chain().focus().toggleCodeBlock().run()}><Code2 className="h-4 w-4" /></ToolbarButton>
+              <DropdownMenuItem className={composerMenuItemClass} disabled={!editor?.can().liftListItem("listItem")} onSelect={() => editor?.chain().focus().liftListItem("listItem").run()}><IndentDecrease className="h-4 w-4" />减少缩进</DropdownMenuItem>
+              <DropdownMenuItem className={composerMenuItemClass} disabled={!editor?.can().sinkListItem("listItem")} onSelect={() => editor?.chain().focus().sinkListItem("listItem").run()}><IndentIncrease className="h-4 w-4" />增加缩进</DropdownMenuItem>
+              <DropdownMenuItem className={composerMenuItemClass} onSelect={() => editor?.chain().focus().setTextAlign("left").run()}><AlignLeft className="h-4 w-4" />左对齐</DropdownMenuItem>
+              <DropdownMenuItem className={composerMenuItemClass} onSelect={() => editor?.chain().focus().setTextAlign("center").run()}><AlignCenter className="h-4 w-4" />居中</DropdownMenuItem>
+              <DropdownMenuItem className={composerMenuItemClass} onSelect={() => editor?.chain().focus().setTextAlign("right").run()}><AlignRight className="h-4 w-4" />右对齐</DropdownMenuItem>
+              <DropdownMenuItem className={composerMenuItemClass} onSelect={() => editor?.chain().focus().toggleBlockquote().run()}><Quote className="h-4 w-4" />引用</DropdownMenuItem>
+              <DropdownMenuItem className={composerMenuItemClass} onSelect={() => editor?.chain().focus().toggleCodeBlock().run()}><Code2 className="h-4 w-4" />代码块</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <span className="ml-auto whitespace-nowrap px-1 text-xs tabular-nums text-muted-foreground" aria-live="polite">{characterCount} 字</span>
         </div>
       )}
       <div className={cn(
-        "composer-editor relative flex min-h-[240px] flex-1 border-b focus-within:bg-card/40 sm:min-h-[280px]",
+        "composer-editor relative flex min-h-[220px] min-w-0 flex-1 overflow-hidden border-b focus-within:bg-card/40 sm:min-h-[260px]",
-        "[&_.ProseMirror]:min-h-[240px] [&_.ProseMirror]:w-full [&_.ProseMirror]:flex-1 [&_.ProseMirror]:overflow-y-auto [&_.ProseMirror]:px-4 [&_.ProseMirror]:py-4 [&_.ProseMirror]:text-base [&_.ProseMirror]:leading-7 [&_.ProseMirror]:outline-none sm:[&_.ProseMirror]:min-h-[280px] sm:[&_.ProseMirror]:px-6 sm:[&_.ProseMirror]:py-5",
+        "[&_.ProseMirror]:min-h-[220px] [&_.ProseMirror]:min-w-0 [&_.ProseMirror]:w-full [&_.ProseMirror]:max-w-full [&_.ProseMirror]:flex-1 [&_.ProseMirror]:overflow-x-hidden [&_.ProseMirror]:overflow-y-auto [&_.ProseMirror]:px-4 [&_.ProseMirror]:py-4 [&_.ProseMirror]:text-base [&_.ProseMirror]:leading-7 [&_.ProseMirror]:outline-none [&_.ProseMirror]:[overflow-wrap:anywhere] sm:[&_.ProseMirror]:min-h-[260px] sm:[&_.ProseMirror]:px-5",
         "[&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none [&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left [&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0 [&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground [&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
-        "[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ul]:pl-6 [&_.ProseMirror_ol]:pl-6 [&_.ProseMirror_blockquote]:border-l-4 [&_.ProseMirror_blockquote]:border-border [&_.ProseMirror_blockquote]:pl-4 [&_.ProseMirror_blockquote]:text-muted-foreground [&_.ProseMirror_pre]:rounded-md [&_.ProseMirror_pre]:bg-muted [&_.ProseMirror_pre]:p-3",
+        "[&_.ProseMirror_a]:break-all [&_.ProseMirror_p]:max-w-full [&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ul]:pl-6 [&_.ProseMirror_ol]:pl-6 [&_.ProseMirror_blockquote]:border-l-4 [&_.ProseMirror_blockquote]:border-border [&_.ProseMirror_blockquote]:pl-4 [&_.ProseMirror_blockquote]:text-muted-foreground [&_.ProseMirror_pre]:max-w-full [&_.ProseMirror_pre]:whitespace-pre-wrap [&_.ProseMirror_pre]:break-words [&_.ProseMirror_pre]:rounded-md [&_.ProseMirror_pre]:bg-muted [&_.ProseMirror_pre]:p-3",
         empty && "bg-background"
       )}>
-        <EditorContent editor={editor} className="flex min-h-0 flex-1" />
+        <EditorContent editor={editor} className="flex min-h-0 min-w-0 flex-1 overflow-hidden" />
       </div>
       {files.length > 0 && (
-        <div className="border-t px-4 py-3 sm:px-6">
+        <div className="border-t px-4 py-3 sm:px-5">
           <div className="flex flex-wrap gap-2">
             {files.map((file, index) => (
               <Badge key={`${file.name}-${file.size}-${index}`} variant="outline" className="h-8 gap-2 rounded-md px-2 font-normal">
@@ -4788,7 +4886,7 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, max
           <DialogHeader>
             <DialogTitle>邮件预览</DialogTitle>
           </DialogHeader>
-          <div className="mail-html max-h-[60vh] overflow-y-auto rounded-md border bg-background p-5 text-sm leading-7" dangerouslySetInnerHTML={{ __html: sanitizeComposerHtml(editor?.getHTML() || "") || "<p></p>" }} />
+          <div className="mail-html max-h-[60vh] max-w-full overflow-x-hidden overflow-y-auto rounded-md border bg-background p-5 text-sm leading-7 [overflow-wrap:anywhere] [&_a]:break-all [&_pre]:max-w-full [&_pre]:whitespace-pre-wrap [&_pre]:break-words" dangerouslySetInnerHTML={{ __html: sanitizeComposerHtml(editor?.getHTML() || "") || "<p></p>" }} />
         </DialogContent>
       </Dialog>
     </div>