feat(web): 优化邮箱与个人中心移动端体验

- 为管理页、邮件页和个人中心补充移动端侧栏与抽屉导航，提升小屏可用性。
- 将多处表格/详情/编辑器改为自适应布局，优化邮件列表、消息详情、撰写与规则弹窗的移动端显示。
- 调整顶部栏、按钮与内容区域间距，统一不同屏幕下的阅读与操作体验。

apps/web/src/components/protected-layout.tsx

@@ -21,6 +21,7 @@ import {
   SidebarProvider,
   SidebarRail,
   SidebarTrigger,
+  useSidebar,
 } from "@/components/ui/sidebar"
 
 const adminSections = [
@@ -80,16 +81,7 @@ function ProtectedContent() {
             <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>
-                  ))}
+                  <AdminSectionItems activeSection={adminSection} />
                 </SidebarMenu>
               </SidebarGroupContent>
             </SidebarGroup>
@@ -126,8 +118,11 @@ function ProtectedContent() {
       </Sidebar>
       <SidebarInset>
         <div className="flex min-h-svh flex-col bg-muted/20">
-          <div className="flex h-12 items-center border-b bg-white px-3 md:hidden">
-            <SidebarTrigger />
+          <div className="flex h-12 items-center gap-3 border-b bg-background px-3 md:hidden">
+            <SidebarTrigger aria-label="打开导航" />
+            <div className="min-w-0 flex-1 truncate text-sm font-semibold">
+              {isAdminRoute ? adminSections.find((item) => item.key === adminSection)?.label || "系统管理" : "LanQin Email"}
+            </div>
           </div>
           <Outlet />
         </div>
@@ -135,3 +130,20 @@ function ProtectedContent() {
     </SidebarProvider>
   )
 }
+
+function AdminSectionItems({ activeSection }: { activeSection: string }) {
+  const { isMobile, setOpenMobile } = useSidebar()
+  function closeMobile() {
+    if (isMobile) setOpenMobile(false)
+  }
+  return adminSections.map((item) => (
+    <SidebarMenuItem key={item.key}>
+      <SidebarMenuButton asChild isActive={activeSection === item.key} tooltip={item.label}>
+        <Link to={`/admin?section=${item.key}`} onClick={closeMobile}>
+          {item.icon}
+          <span>{item.label}</span>
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  ))
+}

apps/web/src/pages/admin.tsx

@@ -53,20 +53,12 @@ export function AdminPage() {
   const section: Section = rawSection && sectionKeys.includes(rawSection) ? rawSection : "overview"
 
   return (
-    <ScrollArea className="h-svh">
-      <main className="p-6">
+    <ScrollArea className="h-[calc(100svh-3rem)] md:h-svh">
+      <main className="p-4 sm:p-6">
         <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <h1 className="text-2xl font-semibold tracking-tight">{sectionLabels[section]}</h1>
         </div>
 
-        <div className="mb-6 flex flex-wrap gap-2 lg:hidden">
-          {sectionKeys.map((key) => (
-            <Button key={key} variant={section === key ? "default" : "outline"} size="sm" onClick={() => setParams(key === "overview" ? {} : { section: key })}>
-              {sectionLabels[key]}
-            </Button>
-          ))}
-        </div>
-
         {section === "overview" && (
           <div className="mb-6 grid gap-4 md:grid-cols-4">
             <Stat icon={<Users />} label="用户" value={overview.data?.users || 0} />
@@ -203,24 +195,45 @@ function UsersSection({ users }: { users: AdminUser[] }) {
             </SelectContent>
           </Select>
         </div>
-        <Table>
-          <TableHeader><TableRow><TableHead>用户</TableHead><TableHead>角色</TableHead><TableHead>邮箱</TableHead><TableHead>状态</TableHead><TableHead>创建时间</TableHead><TableHead className="w-16"></TableHead></TableRow></TableHeader>
-          <TableBody>
-            {filteredUsers.map((user) => (
-              <TableRow key={user.id}>
-                <TableCell>
-                  <div className="font-medium">{user.displayName}</div>
-                  <div className="text-xs text-muted-foreground">{user.email}</div>
-                </TableCell>
-                <TableCell><Badge variant={user.role === "admin" ? "default" : "secondary"}>{user.role === "admin" ? "管理员" : "普通用户"}</Badge></TableCell>
-                <TableCell><UserMailboxCell user={user} /></TableCell>
-                <TableCell><Badge variant={user.disabled ? "secondary" : "default"}>{user.disabled ? "停用" : "正常"}</Badge></TableCell>
-                <TableCell className="text-muted-foreground">{new Date(user.createdAt).toLocaleDateString()}</TableCell>
-                <TableCell><UserActions user={user} onDelete={() => setPendingConfirm({ title: "删除用户？", description: `将删除 ${user.email} 及其关联数据。`, confirmText: "删除用户", onConfirm: () => remove.mutate(user.id) })} /></TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="space-y-3 md:hidden">
+          {filteredUsers.map((user) => (
+            <div key={user.id} className="rounded-lg border p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="truncate font-medium">{user.displayName}</div>
+                  <div className="truncate text-xs text-muted-foreground">{user.email}</div>
+                </div>
+                <UserActions user={user} onDelete={() => setPendingConfirm({ title: "删除用户？", description: `将删除 ${user.email} 及其关联数据。`, confirmText: "删除用户", onConfirm: () => remove.mutate(user.id) })} />
+              </div>
+              <div className="mt-3 flex flex-wrap gap-2">
+                <Badge variant={user.role === "admin" ? "default" : "secondary"}>{user.role === "admin" ? "管理员" : "普通用户"}</Badge>
+                <Badge variant={user.disabled ? "secondary" : "default"}>{user.disabled ? "停用" : "正常"}</Badge>
+                <Badge variant="outline">{new Date(user.createdAt).toLocaleDateString()}</Badge>
+              </div>
+              <div className="mt-3"><UserMailboxCell user={user} /></div>
+            </div>
+          ))}
+        </div>
+        <div className="hidden md:block">
+          <Table>
+            <TableHeader><TableRow><TableHead>用户</TableHead><TableHead>角色</TableHead><TableHead>邮箱</TableHead><TableHead>状态</TableHead><TableHead>创建时间</TableHead><TableHead className="w-16"></TableHead></TableRow></TableHeader>
+            <TableBody>
+              {filteredUsers.map((user) => (
+                <TableRow key={user.id}>
+                  <TableCell>
+                    <div className="font-medium">{user.displayName}</div>
+                    <div className="text-xs text-muted-foreground">{user.email}</div>
+                  </TableCell>
+                  <TableCell><Badge variant={user.role === "admin" ? "default" : "secondary"}>{user.role === "admin" ? "管理员" : "普通用户"}</Badge></TableCell>
+                  <TableCell><UserMailboxCell user={user} /></TableCell>
+                  <TableCell><Badge variant={user.disabled ? "secondary" : "default"}>{user.disabled ? "停用" : "正常"}</Badge></TableCell>
+                  <TableCell className="text-muted-foreground">{new Date(user.createdAt).toLocaleDateString()}</TableCell>
+                  <TableCell><UserActions user={user} onDelete={() => setPendingConfirm({ title: "删除用户？", description: `将删除 ${user.email} 及其关联数据。`, confirmText: "删除用户", onConfirm: () => remove.mutate(user.id) })} /></TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
         {filteredUsers.length === 0 && <Empty text="没有匹配的用户" />}
       </CardContent>
       <ConfirmDialog open={!!pendingConfirm} title={pendingConfirm?.title || ""} description={pendingConfirm?.description} confirmText={pendingConfirm?.confirmText || "删除"} destructive pending={remove.isPending} onOpenChange={(open) => { if (!open) setPendingConfirm(null) }} onConfirm={() => pendingConfirm?.onConfirm()} />
@@ -293,21 +306,41 @@ function MailboxesSection({ mailboxes, users, domains }: { mailboxes: MailboxTyp
         </div>
       </CardHeader>
       <CardContent>
-        <Table>
-          <TableHeader><TableRow><TableHead>地址</TableHead><TableHead>归属用户</TableHead><TableHead>名称</TableHead><TableHead>配额</TableHead><TableHead>状态</TableHead><TableHead className="w-16"></TableHead></TableRow></TableHeader>
-          <TableBody>
-            {mailboxes.map((mailbox) => (
-              <TableRow key={mailbox.id}>
-                <TableCell className="font-medium">{mailbox.address}</TableCell>
-                <TableCell className="text-muted-foreground">{mailbox.userEmail || mailbox.userId}</TableCell>
-                <TableCell>{mailbox.displayName}</TableCell>
-                <TableCell>{mailbox.quotaMb} MB</TableCell>
-                <TableCell><Badge variant={mailbox.status === "active" ? "default" : "secondary"}>{mailbox.status === "active" ? "启用" : "停用"}</Badge></TableCell>
-                <TableCell><MailboxActions mailbox={mailbox} users={users} onDelete={() => setPendingConfirm({ title: "删除邮箱？", description: `将删除 ${mailbox.address} 和其中邮件。`, confirmText: "删除邮箱", onConfirm: () => remove.mutate(mailbox.id) })} /></TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="space-y-3 md:hidden">
+          {mailboxes.map((mailbox) => (
+            <div key={mailbox.id} className="rounded-lg border p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="truncate font-medium">{mailbox.address}</div>
+                  <div className="truncate text-xs text-muted-foreground">{mailbox.userEmail || mailbox.userId}</div>
+                </div>
+                <MailboxActions mailbox={mailbox} users={users} onDelete={() => setPendingConfirm({ title: "删除邮箱？", description: `将删除 ${mailbox.address} 和其中邮件。`, confirmText: "删除邮箱", onConfirm: () => remove.mutate(mailbox.id) })} />
+              </div>
+              <div className="mt-3 flex flex-wrap gap-2">
+                <Badge variant={mailbox.status === "active" ? "default" : "secondary"}>{mailbox.status === "active" ? "启用" : "停用"}</Badge>
+                <Badge variant="outline">{mailbox.quotaMb} MB</Badge>
+                <Badge variant="outline">{mailbox.displayName || "未命名"}</Badge>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="hidden md:block">
+          <Table>
+            <TableHeader><TableRow><TableHead>地址</TableHead><TableHead>归属用户</TableHead><TableHead>名称</TableHead><TableHead>配额</TableHead><TableHead>状态</TableHead><TableHead className="w-16"></TableHead></TableRow></TableHeader>
+            <TableBody>
+              {mailboxes.map((mailbox) => (
+                <TableRow key={mailbox.id}>
+                  <TableCell className="font-medium">{mailbox.address}</TableCell>
+                  <TableCell className="text-muted-foreground">{mailbox.userEmail || mailbox.userId}</TableCell>
+                  <TableCell>{mailbox.displayName}</TableCell>
+                  <TableCell>{mailbox.quotaMb} MB</TableCell>
+                  <TableCell><Badge variant={mailbox.status === "active" ? "default" : "secondary"}>{mailbox.status === "active" ? "启用" : "停用"}</Badge></TableCell>
+                  <TableCell><MailboxActions mailbox={mailbox} users={users} onDelete={() => setPendingConfirm({ title: "删除邮箱？", description: `将删除 ${mailbox.address} 和其中邮件。`, confirmText: "删除邮箱", onConfirm: () => remove.mutate(mailbox.id) })} /></TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
         {mailboxes.length === 0 && <Empty text="暂无邮箱账号" />}
       </CardContent>
       <ConfirmDialog open={!!pendingConfirm} title={pendingConfirm?.title || ""} description={pendingConfirm?.description} confirmText={pendingConfirm?.confirmText || "删除"} destructive pending={remove.isPending} onOpenChange={(open) => { if (!open) setPendingConfirm(null) }} onConfirm={() => pendingConfirm?.onConfirm()} />
@@ -330,20 +363,39 @@ function AliasesSection({ aliases, domains }: { aliases: Alias[]; domains: Domai
         </div>
       </CardHeader>
       <CardContent>
-        <Table>
-          <TableHeader><TableRow><TableHead>来源</TableHead><TableHead>目标</TableHead><TableHead>域名</TableHead><TableHead>状态</TableHead><TableHead className="w-16"></TableHead></TableRow></TableHeader>
-          <TableBody>
-            {aliases.map((alias) => (
-              <TableRow key={alias.id}>
-                <TableCell className="font-medium">{alias.source}</TableCell>
-                <TableCell>{alias.destination}</TableCell>
-                <TableCell className="text-muted-foreground">{domains.find((d) => d.id === alias.domainId)?.name || alias.domainId}</TableCell>
-                <TableCell><Badge variant={alias.enabled ? "default" : "secondary"}>{alias.enabled ? "启用" : "停用"}</Badge></TableCell>
-                <TableCell><AliasActions alias={alias} onToggle={() => update.mutate({ id: alias.id, payload: { source: alias.source, destination: alias.destination, enabled: !alias.enabled } })} onDelete={() => setPendingConfirm({ title: "删除别名？", description: `${alias.source} 将不再转发到 ${alias.destination}。`, confirmText: "删除别名", onConfirm: () => remove.mutate(alias.id) })} /></TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="space-y-3 md:hidden">
+          {aliases.map((alias) => (
+            <div key={alias.id} className="rounded-lg border p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="truncate font-medium">{alias.source}</div>
+                  <div className="truncate text-xs text-muted-foreground">{alias.destination}</div>
+                </div>
+                <AliasActions alias={alias} onToggle={() => update.mutate({ id: alias.id, payload: { source: alias.source, destination: alias.destination, enabled: !alias.enabled } })} onDelete={() => setPendingConfirm({ title: "删除别名？", description: `${alias.source} 将不再转发到 ${alias.destination}。`, confirmText: "删除别名", onConfirm: () => remove.mutate(alias.id) })} />
+              </div>
+              <div className="mt-3 flex flex-wrap gap-2">
+                <Badge variant={alias.enabled ? "default" : "secondary"}>{alias.enabled ? "启用" : "停用"}</Badge>
+                <Badge variant="outline">{domains.find((d) => d.id === alias.domainId)?.name || alias.domainId}</Badge>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="hidden md:block">
+          <Table>
+            <TableHeader><TableRow><TableHead>来源</TableHead><TableHead>目标</TableHead><TableHead>域名</TableHead><TableHead>状态</TableHead><TableHead className="w-16"></TableHead></TableRow></TableHeader>
+            <TableBody>
+              {aliases.map((alias) => (
+                <TableRow key={alias.id}>
+                  <TableCell className="font-medium">{alias.source}</TableCell>
+                  <TableCell>{alias.destination}</TableCell>
+                  <TableCell className="text-muted-foreground">{domains.find((d) => d.id === alias.domainId)?.name || alias.domainId}</TableCell>
+                  <TableCell><Badge variant={alias.enabled ? "default" : "secondary"}>{alias.enabled ? "启用" : "停用"}</Badge></TableCell>
+                  <TableCell><AliasActions alias={alias} onToggle={() => update.mutate({ id: alias.id, payload: { source: alias.source, destination: alias.destination, enabled: !alias.enabled } })} onDelete={() => setPendingConfirm({ title: "删除别名？", description: `${alias.source} 将不再转发到 ${alias.destination}。`, confirmText: "删除别名", onConfirm: () => remove.mutate(alias.id) })} /></TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
         {aliases.length === 0 && <Empty text="暂无别名转发" />}
       </CardContent>
       <ConfirmDialog open={!!pendingConfirm} title={pendingConfirm?.title || ""} description={pendingConfirm?.description} confirmText={pendingConfirm?.confirmText || "删除"} destructive pending={remove.isPending} onOpenChange={(open) => { if (!open) setPendingConfirm(null) }} onConfirm={() => pendingConfirm?.onConfirm()} />
@@ -407,38 +459,62 @@ function AdminMessagesSection({ mailboxes }: { mailboxes: MailboxType[] }) {
             </SelectContent>
           </Select>
         </div>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>邮件</TableHead>
-              <TableHead>邮箱</TableHead>
-              <TableHead>发件人</TableHead>
-              <TableHead>收件人</TableHead>
-              <TableHead>文件夹</TableHead>
-              <TableHead>时间</TableHead>
-              <TableHead className="w-20"></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {items.map((message) => (
-              <TableRow key={message.id}>
-                <TableCell className="max-w-[360px]">
+        <div className="space-y-3 md:hidden">
+          {items.map((message) => (
+            <div key={message.id} className="rounded-lg border p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
                   <div className="truncate font-medium">{message.subject}</div>
-                  <div className="truncate text-xs text-muted-foreground">{message.snippet}</div>
-                </TableCell>
-                <TableCell>
-                  <div className="font-medium">{message.mailboxAddress || message.recipientAddress || "-"}</div>
-                  {message.ownerEmail && <div className="text-xs text-muted-foreground">{message.ownerEmail}</div>}
-                </TableCell>
-                <TableCell className="max-w-[220px] truncate" title={adminSenderTitle(message)}>{adminSenderDisplayName(message)}</TableCell>
-                <TableCell className="max-w-[220px] truncate">{message.recipientAddress || message.to.join(", ")}</TableCell>
-                <TableCell><Badge variant="secondary">{folderName(message.folder)}</Badge></TableCell>
-                <TableCell className="text-muted-foreground">{formatDate(message.receivedAt)}</TableCell>
-                <TableCell><Button variant="ghost" size="sm" onClick={() => setSelectedId(message.id)}>查看</Button></TableCell>
+                  <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{message.snippet}</div>
+                </div>
+                <Button variant="ghost" size="sm" onClick={() => setSelectedId(message.id)}>查看</Button>
+              </div>
+              <div className="mt-3 space-y-2 text-sm">
+                <div className="truncate text-muted-foreground">邮箱：{message.mailboxAddress || message.recipientAddress || "-"}</div>
+                <div className="truncate text-muted-foreground">发件人：{adminSenderDisplayName(message)}</div>
+                <div className="truncate text-muted-foreground">收件人：{message.recipientAddress || message.to.join(", ")}</div>
+              </div>
+              <div className="mt-3 flex flex-wrap gap-2">
+                <Badge variant="secondary">{folderName(message.folder)}</Badge>
+                <Badge variant="outline">{formatDate(message.receivedAt)}</Badge>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="hidden md:block">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>邮件</TableHead>
+                <TableHead>邮箱</TableHead>
+                <TableHead>发件人</TableHead>
+                <TableHead>收件人</TableHead>
+                <TableHead>文件夹</TableHead>
+                <TableHead>时间</TableHead>
+                <TableHead className="w-20"></TableHead>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+            </TableHeader>
+            <TableBody>
+              {items.map((message) => (
+                <TableRow key={message.id}>
+                  <TableCell className="max-w-[360px]">
+                    <div className="truncate font-medium">{message.subject}</div>
+                    <div className="truncate text-xs text-muted-foreground">{message.snippet}</div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="font-medium">{message.mailboxAddress || message.recipientAddress || "-"}</div>
+                    {message.ownerEmail && <div className="text-xs text-muted-foreground">{message.ownerEmail}</div>}
+                  </TableCell>
+                  <TableCell className="max-w-[220px] truncate" title={adminSenderTitle(message)}>{adminSenderDisplayName(message)}</TableCell>
+                  <TableCell className="max-w-[220px] truncate">{message.recipientAddress || message.to.join(", ")}</TableCell>
+                  <TableCell><Badge variant="secondary">{folderName(message.folder)}</Badge></TableCell>
+                  <TableCell className="text-muted-foreground">{formatDate(message.receivedAt)}</TableCell>
+                  <TableCell><Button variant="ghost" size="sm" onClick={() => setSelectedId(message.id)}>查看</Button></TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
         {messages.isLoading && <Empty text="加载中..." />}
         {!messages.isLoading && items.length === 0 && <Empty text="暂无邮件" />}
         {!messages.isLoading && messages.hasNextPage && (
@@ -828,9 +904,9 @@ function adminSenderTitle(message: MailMessage) {
 }
 
 function Stat({ icon, label, value }: { icon: React.ReactNode; label: string; value: React.ReactNode }) {
-  return <Card><CardContent className="flex items-center gap-4 p-5"><div className="grid h-10 w-10 place-items-center rounded-lg bg-muted text-foreground">{icon}</div><div><div className="text-2xl font-semibold tracking-tight">{value}</div><div className="text-xs text-muted-foreground">{label}</div></div></CardContent></Card>
+  return <Card><CardContent className="flex items-center gap-3 p-4 sm:gap-4 sm:p-5"><div className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-muted text-foreground sm:h-10 sm:w-10">{icon}</div><div className="min-w-0"><div className="truncate text-xl font-semibold tracking-tight sm:text-2xl">{value}</div><div className="text-xs text-muted-foreground">{label}</div></div></CardContent></Card>
 }
-function InfoBox({ label, value }: { label: string; value: React.ReactNode }) { return <div className="rounded-lg border p-4"><div className="text-2xl font-semibold tracking-tight">{value}</div><div className="text-xs text-muted-foreground">{label}</div></div> }
+function InfoBox({ label, value }: { label: string; value: React.ReactNode }) { return <div className="rounded-lg border p-4"><div className="text-xl font-semibold tracking-tight sm:text-2xl">{value}</div><div className="text-xs text-muted-foreground">{label}</div></div> }
 function Empty({ text }: { text: string }) { return <div className="rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">{text}</div> }
 function DomainBadgeRow({ domain }: { domain: Domain }) { return <div className="flex items-center justify-between rounded-lg border p-3"><span className="font-medium">{domain.name}</span><Badge variant={domain.dnsStatus === "ok" ? "default" : "secondary"}>{domain.dnsStatus === "ok" ? "正常" : domain.dnsStatus}</Badge></div> }
 function invalidateAdmin(qc: ReturnType<typeof useQueryClient>) { qc.invalidateQueries({ queryKey: ["admin"] }); qc.invalidateQueries({ queryKey: ["mailboxes"] }); qc.invalidateQueries({ queryKey: ["me"] }) }

apps/web/src/pages/mail.tsx

@@ -22,6 +22,7 @@ import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
 import { Label } from "@/components/ui/label"
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
@@ -44,6 +45,7 @@ import {
   SidebarProvider,
 } from "@/components/ui/sidebar"
 import { useMe } from "@/hooks/use-me"
+import { useIsMobile } from "@/hooks/use-mobile"
 import { useToast } from "@/hooks/use-toast"
 
 const folderIcons: Record<string, React.ReactNode> = { inbox: <Inbox className="h-4 w-4" />, sent: <Send className="h-4 w-4" />, drafts: <FileText className="h-4 w-4" />, archive: <Archive className="h-4 w-4" />, spam: <Trash2 className="h-4 w-4" />, trash: <Trash2 className="h-4 w-4" /> }
@@ -93,12 +95,14 @@ export function MailPage() {
   const [selectedMailboxId, setSelectedMailboxId] = React.useState(() => localStorage.getItem("lanqin:selected-mailbox") || "")
   const [darkMode, setDarkMode] = React.useState(getInitialTheme)
   const [displayMode] = useDisplayMode()
+  const isMobile = useIsMobile()
   const [refreshing, setRefreshing] = React.useState(false)
   const [autoRefreshing, setAutoRefreshing] = React.useState(false)
   const [lastAutoRefreshAt, setLastAutoRefreshAt] = React.useState<Date | null>(null)
   const [bulkPending, setBulkPending] = React.useState(false)
   const [pendingConfirm, setPendingConfirm] = React.useState<PendingConfirm | null>(null)
   const [cancelingScheduledId, setCancelingScheduledId] = React.useState("")
+  const [mobileSidebarOpen, setMobileSidebarOpen] = React.useState(false)
   const sidebarPanelRef = React.useRef<ImperativePanelHandle>(null)
   const themeMountedRef = React.useRef(false)
   const mailNotifyStateRef = React.useRef<Record<string, MailNotificationState>>({})
@@ -470,30 +474,36 @@ export function MailPage() {
     setSelectedLabelId("")
     setSelectedId(null)
     setMailFilter("all")
+    setMobileSidebarOpen(false)
   }
   function openFolder(nextFolder: string) {
     setFolder(nextFolder)
     setMailView("folder")
     setSelectedLabelId("")
     setSelectedId(null)
+    setMailFilter("all")
+    setMobileSidebarOpen(false)
   }
   function openStarred() {
     setMailView("starred")
     setSelectedLabelId("")
     setSelectedId(null)
     setMailFilter("all")
+    setMobileSidebarOpen(false)
   }
   function openScheduled() {
     setMailView("scheduled")
     setSelectedLabelId("")
     setSelectedId(null)
     setMailFilter("all")
+    setMobileSidebarOpen(false)
   }
   function openLabel(labelId: string) {
     setSelectedLabelId(labelId)
     setMailView("label")
     setSelectedId(null)
     setMailFilter("all")
+    setMobileSidebarOpen(false)
   }
   function openMessage(messageId: string | null) {
     if (!messageId) {
@@ -527,6 +537,89 @@ export function MailPage() {
   function openSettings() {
     navigate("/profile")
   }
+  const sidebarContent = (
+    <Sidebar collapsible="none" className="h-full w-full border-r bg-sidebar">
+      <SidebarHeader className={cn("border-b py-3", sidebarCollapsed ? "px-2" : "px-3")}>
+        <AccountHeader
+          collapsed={sidebarCollapsed}
+          name={me.data?.user.displayName || selectedMailbox?.address || "LanQin"}
+          email={me.data?.user.email || selectedMailbox?.address}
+          darkMode={darkMode}
+          onToggleTheme={() => setDarkMode((value) => !value)}
+          onSettings={openSettings}
+        />
+        <div className={cn("mt-2 flex gap-2", sidebarCollapsed && "justify-center")}>
+          <MailboxSwitcher
+            collapsed={sidebarCollapsed}
+            mailboxes={mailboxList.data?.items || []}
+            selectedMailbox={selectedMailbox}
+            onSelect={switchMailbox}
+          />
+          {!sidebarCollapsed && (
+            <Button type="button" variant="outline" size="icon" className="h-9 w-9 shrink-0 rounded-md" onClick={copyCurrentMailbox} disabled={!selectedMailbox}>
+              <Copy className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+        <Button className={cn("mt-2 h-10 w-full rounded-md text-sm", sidebarCollapsed && "px-0")} size={sidebarCollapsed ? "icon" : "default"} onClick={() => openCompose()} disabled={!selectedMailbox}>
+          <PencilLine className="h-4 w-4" />
+          {!sidebarCollapsed && <span>写邮件</span>}
+        </Button>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          {!sidebarCollapsed && <SidebarGroupLabel>邮件夹</SidebarGroupLabel>}
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {mailMenuItems.map((item) => (
+                <SidebarMenuItem key={item.key}>
+                  <SidebarMenuButton
+                    isActive={item.type === "starred" ? mailView === "starred" : item.type === "scheduled" ? mailView === "scheduled" : mailView === "folder" && folder === item.folderName}
+                    className={cn(sidebarCollapsed && "justify-center px-0")}
+                    onClick={() => item.type === "starred" ? openStarred() : item.type === "scheduled" ? openScheduled() : openFolder(item.folderName)}
+                  >
+                    {item.icon}
+                    {!sidebarCollapsed && <span>{item.label}</span>}
+                    {!sidebarCollapsed && item.count > 0 && <Badge variant="secondary" className="ml-auto">{item.count}</Badge>}
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+            {folders.isLoading && <FolderSkeleton />}
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          {!sidebarCollapsed && <SidebarGroupLabel>标签</SidebarGroupLabel>}
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {labelItems.map((label) => (
+                <SidebarMenuItem key={label.id}>
+                  <SidebarMenuButton isActive={mailView === "label" && selectedLabelId === label.id} className={cn(sidebarCollapsed && "justify-center px-0")} onClick={() => openLabel(label.id)}>
+                    <Tag className="h-4 w-4" style={{ color: label.color }} />
+                    {!sidebarCollapsed && <span>{label.name}</span>}
+                    {!sidebarCollapsed && !!label.messageCount && <Badge variant="secondary" className="ml-auto">{label.messageCount}</Badge>}
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+              {!sidebarCollapsed && !labels.isLoading && labelItems.length === 0 && <div className="px-2 py-1 text-xs text-muted-foreground">暂无标签</div>}
+              <SidebarMenuItem>
+                <NewLabelButton collapsed={sidebarCollapsed} pending={createLabel.isPending} onCreate={(name) => createLabel.mutate(name)} />
+              </SidebarMenuItem>
+            </SidebarMenu>
+            {labels.isLoading && <FolderSkeleton />}
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      {!isMobile && (
+        <div className={cn("mt-auto border-t p-2", sidebarCollapsed ? "flex justify-center" : "")}>
+          <Button type="button" variant="ghost" size={sidebarCollapsed ? "icon" : "sm"} className={cn(!sidebarCollapsed && "w-full justify-start")} onClick={toggleSidebar}>
+            {sidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
+            {!sidebarCollapsed && <span>收起侧栏</span>}
+          </Button>
+        </div>
+      )}
+    </Sidebar>
+  )
   function toggleSidebar() {
     if (sidebarCollapsed) {
       sidebarPanelRef.current?.expand(14)
@@ -537,93 +630,158 @@ export function MailPage() {
     }
   }
 
-  return (
-    <div className="h-svh bg-background">
-      <SidebarProvider className="h-full min-h-0 w-full">
-        <ResizablePanelGroup direction="horizontal" className="h-full min-h-0 w-full">
-            <ResizablePanel ref={sidebarPanelRef} collapsible collapsedSize={4} defaultSize={15} minSize={11} maxSize={24} onCollapse={() => setSidebarCollapsed(true)} onExpand={() => setSidebarCollapsed(false)}>
-                <Sidebar collapsible="none" className="h-full w-full border-r bg-sidebar">
-                  <SidebarHeader className={cn("border-b py-3", sidebarCollapsed ? "px-2" : "px-3")}>
-                  <AccountHeader
-                    collapsed={sidebarCollapsed}
-                    name={me.data?.user.displayName || selectedMailbox?.address || "LanQin"}
-                    email={me.data?.user.email || selectedMailbox?.address}
-                    darkMode={darkMode}
-                    onToggleTheme={() => setDarkMode((value) => !value)}
-                    onSettings={openSettings}
-                  />
-                  <div className={cn("mt-2 flex gap-2", sidebarCollapsed && "justify-center")}>
-                    <MailboxSwitcher
-                      collapsed={sidebarCollapsed}
-                      mailboxes={mailboxList.data?.items || []}
-                      selectedMailbox={selectedMailbox}
-                      onSelect={switchMailbox}
-                    />
-                    {!sidebarCollapsed && (
-                      <Button type="button" variant="outline" size="icon" className="h-9 w-9 shrink-0 rounded-md" onClick={copyCurrentMailbox} disabled={!selectedMailbox}>
-                        <Copy className="h-4 w-4" />
-                      </Button>
-                    )}
-                  </div>
-                  <Button className={cn("mt-2 h-10 w-full rounded-md text-sm", sidebarCollapsed && "px-0")} size={sidebarCollapsed ? "icon" : "default"} onClick={() => openCompose()} disabled={!selectedMailbox}>
-                    <PencilLine className="h-4 w-4" />
-                    {!sidebarCollapsed && <span>写邮件</span>}
-                  </Button>
-                </SidebarHeader>
-                <SidebarContent>
-                  <SidebarGroup>
-                    {!sidebarCollapsed && <SidebarGroupLabel>邮件夹</SidebarGroupLabel>}
-                    <SidebarGroupContent>
-                      <SidebarMenu>
-                        {mailMenuItems.map((item) => (
-                          <SidebarMenuItem key={item.key}>
-                            <SidebarMenuButton
-                              isActive={item.type === "starred" ? mailView === "starred" : item.type === "scheduled" ? mailView === "scheduled" : mailView === "folder" && folder === item.folderName}
-                              className={cn(sidebarCollapsed && "justify-center px-0")}
-                              onClick={() => item.type === "starred" ? openStarred() : item.type === "scheduled" ? openScheduled() : openFolder(item.folderName)}
-                            >
-                              {item.icon}
-                              {!sidebarCollapsed && <span>{item.label}</span>}
-                              {!sidebarCollapsed && item.count > 0 && <Badge variant="secondary" className="ml-auto">{item.count}</Badge>}
-                            </SidebarMenuButton>
-                          </SidebarMenuItem>
-                        ))}
-                      </SidebarMenu>
-                      {folders.isLoading && <FolderSkeleton />}
-                    </SidebarGroupContent>
-                  </SidebarGroup>
-                  <SidebarGroup>
-                    {!sidebarCollapsed && <SidebarGroupLabel>标签</SidebarGroupLabel>}
-                    <SidebarGroupContent>
-                      <SidebarMenu>
-                        {labelItems.map((label) => (
-                          <SidebarMenuItem key={label.id}>
-                            <SidebarMenuButton isActive={mailView === "label" && selectedLabelId === label.id} className={cn(sidebarCollapsed && "justify-center px-0")} onClick={() => openLabel(label.id)}>
-                              <Tag className="h-4 w-4" style={{ color: label.color }} />
-                              {!sidebarCollapsed && <span>{label.name}</span>}
-                              {!sidebarCollapsed && !!label.messageCount && <Badge variant="secondary" className="ml-auto">{label.messageCount}</Badge>}
-                            </SidebarMenuButton>
-                          </SidebarMenuItem>
-                        ))}
-                        {!sidebarCollapsed && !labels.isLoading && labelItems.length === 0 && <div className="px-2 py-1 text-xs text-muted-foreground">暂无标签</div>}
-                        <SidebarMenuItem>
-                          <NewLabelButton collapsed={sidebarCollapsed} pending={createLabel.isPending} onCreate={(name) => createLabel.mutate(name)} />
-                        </SidebarMenuItem>
-                      </SidebarMenu>
-                      {labels.isLoading && <FolderSkeleton />}
-                    </SidebarGroupContent>
-                  </SidebarGroup>
-                </SidebarContent>
-                <div className={cn("mt-auto border-t p-2", sidebarCollapsed ? "flex justify-center" : "")}>
-                  <Button type="button" variant="ghost" size={sidebarCollapsed ? "icon" : "sm"} className={cn(!sidebarCollapsed && "w-full justify-start")} onClick={toggleSidebar}>
-                    {sidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
-                    {!sidebarCollapsed && <span>收起侧栏</span>}
-                  </Button>
+  const contentView = !mailboxList.isLoading && !hasMailboxes ? (
+    <NoMailboxState onOpenSettings={openSettings} />
+  ) : mailView === "scheduled" ? (
+    <ScheduledSendView
+      compact={isMobile || displayMode === "compact"}
+      items={visibleScheduledItems}
+      total={scheduledItems.length}
+      loading={scheduledSends.isLoading}
+      query={query}
+      cancelingId={cancelingScheduledId}
+      onCancel={(item) => cancelScheduledSend.mutate(item)}
+    />
+  ) : isMobile || displayMode === "compact" ? (
+    <CompactMailView
+      title={viewTitle}
+      icon={mailView === "label" && selectedLabel ? <Tag className="h-4 w-4" style={{ color: selectedLabel.color }} /> : undefined}
+      messages={visibleMessages}
+      total={allMessages.length}
+      selectedIds={compactSelectedIds}
+      allSelected={compactAllSelected}
+      someSelected={compactSomeSelected}
+      loading={messages.isLoading}
+      hasMore={hasMoreMessages}
+      loadingMore={messages.isFetchingNextPage}
+      onLoadMore={() => messages.fetchNextPage()}
+      emptyMessage={emptyMessage}
+      selectedId={selectedId}
+      selected={selected}
+      detailLoading={detail.isLoading}
+      labels={labelItems}
+      labelPending={addLabel.isPending || removeLabel.isPending}
+      onSelect={openMessage}
+      onSelectAll={toggleCompactSelectAll}
+      onToggleSelected={toggleCompactSelect}
+      scheduledDraftIds={scheduledDraftIds}
+      onCloseReader={() => setSelectedId(null)}
+      onStar={(message) => star.mutate({ id: message.id, starred: !message.isStarred })}
+      onReply={openReply}
+      onForward={openForward}
+      onArchive={(message) => move.mutate({ id: message.id, folder: message.folder === "Archive" ? "Inbox" : "Archive" })}
+      onDelete={confirmDeleteMessage}
+      onToggleRead={(message) => markRead.mutate({ id: message.id, read: !message.isRead })}
+      onAddLabel={(message, label) => addLabel.mutate({ id: message.id, label })}
+      onRemoveLabel={(message, labelId) => removeLabel.mutate({ id: message.id, labelId })}
+      bulkPending={bulkPending}
+      onBulkAction={runBulkAction}
+    />
+  ) : (
+    <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+      <ResizablePanel defaultSize={32} minSize={24} maxSize={44}>
+        <div className="flex h-full min-h-0 flex-col">
+          <div className="flex h-14 shrink-0 items-center justify-between border-b px-5">
+            <div className="flex min-w-0 items-center gap-3">
+              <Checkbox aria-label="选择当前页邮件" checked={compactAllSelected ? true : compactSomeSelected ? "indeterminate" : false} onCheckedChange={(value) => toggleCompactSelectAll(value === true)} />
+              <div className="min-w-0">
+                <div className="flex items-center gap-2 text-sm font-semibold">{mailView === "label" && selectedLabel && <Tag className="h-4 w-4" style={{ color: selectedLabel.color }} />}{viewTitle}</div>
+                <div className="text-xs text-muted-foreground">{selectedCountOnPage > 0 ? `已选 ${selectedCountOnPage} 封` : `${visibleMessages.length} / ${allMessages.length} 封邮件`}</div>
+              </div>
+            </div>
+            {selectedCountOnPage > 0 && <BulkActionMenu pending={bulkPending} onAction={runBulkAction} />}
+          </div>
+          <ScrollArea className="min-h-0 flex-1">
+            {messages.isLoading && <MessageSkeleton />}
+            {visibleMessages.map((m) => <MessageRow key={m.id} message={m} active={selectedId === m.id} checked={compactSelectedIds.includes(m.id)} scheduled={scheduledDraftIds.has(m.id)} onCheckedChange={(checked) => toggleCompactSelect(m.id, checked)} onClick={() => openMessage(m.id)} onStar={() => star.mutate({ id: m.id, starred: !m.isStarred })} />)}
+            {!messages.isLoading && visibleMessages.length === 0 && <div className="p-8 text-center text-sm text-muted-foreground">{emptyMessage}</div>}
+            {!messages.isLoading && hasMoreMessages && (
+              <div className="border-b p-4 text-center">
+                <Button variant="outline" size="sm" disabled={!canLoadMore} onClick={() => messages.fetchNextPage()}>
+                  {messages.isFetchingNextPage ? "加载中..." : "加载更多"}
+                </Button>
+              </div>
+            )}
+          </ScrollArea>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+
+      <ResizablePanel defaultSize={68} minSize={44}>
+        <section className="h-full min-h-0">
+          {!selectedId && <div className="grid h-full place-items-center text-muted-foreground">选择一封邮件阅读</div>}
+          {detail.isLoading && <div className="space-y-4 p-6"><Skeleton className="h-8 w-2/3" /><Skeleton className="h-4 w-1/3" /><Separator /><Skeleton className="h-40 w-full" /></div>}
+          {selected && <div className="flex h-full min-h-0 flex-col">
+            <div className="border-b p-5">
+              <div className="mb-4 flex items-center justify-between gap-3">
+                <h2 className="text-xl font-semibold">{selected.subject}</h2>
+                <div className="flex flex-wrap justify-end gap-2">
+                  <Button variant="outline" size="sm" onClick={() => openReply(selected)}><Reply className="h-4 w-4" />回复</Button>
+                  <Button variant="outline" size="sm" onClick={() => openForward(selected)}><Forward className="h-4 w-4" />转发</Button>
+                  {selected.folder === "Archive" ? (
+                    <Button variant="outline" size="sm" onClick={() => move.mutate({ id: selected.id, folder: "Inbox" })}>取消归档</Button>
+                  ) : (
+                    <Button variant="outline" size="sm" onClick={() => move.mutate({ id: selected.id, folder: "Archive" })}>归档</Button>
+                  )}
+                  <Button variant="destructive" size="sm" onClick={() => confirmDeleteMessage(selected)}>删除</Button>
                 </div>
-              </Sidebar>
+              </div>
+              <div className="text-sm text-muted-foreground"><span className="font-medium text-foreground" title={senderTitle(selected)}>{senderDisplayName(selected)}</span> 发给 {selected.to.join(", ")} · {formatDateTime(selected.receivedAt)}</div>
+              <MessageLabels
+                messageLabels={selected.labels || []}
+                availableLabels={labelItems}
+                onAdd={(label) => addLabel.mutate({ id: selected.id, label })}
+                onRemove={(labelId) => removeLabel.mutate({ id: selected.id, labelId })}
+                pending={addLabel.isPending || removeLabel.isPending}
+              />
+            </div>
+            <ScrollArea className="min-h-0 flex-1">
+              <div className="p-6">
+                <div className="mail-html prose max-w-none text-sm leading-7" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(selected.bodyHtml || `<pre>${selected.bodyText || ""}</pre>`) }} />
+                {selected.attachments && selected.attachments.length > 0 && <div className="mt-8 rounded-lg border p-4"><div className="mb-3 font-medium">附件</div><div className="space-y-2">{selected.attachments.map((a) => <a className="flex items-center justify-between rounded-md border p-3 text-sm hover:bg-accent" href={`/api/mail/attachments/${a.id}`} key={a.id}><span className="flex items-center gap-2"><Paperclip className="h-4 w-4" />{a.filename}</span><span className="text-muted-foreground">{formatBytes(a.sizeBytes)}</span></a>)}</div></div>}
+              </div>
+            </ScrollArea>
+          </div>}
+        </section>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+
+  return (
+    <div className="h-[100dvh] overflow-hidden bg-background">
+      <SidebarProvider className="h-full min-h-0 w-full">
+        {isMobile ? (
+          <div className="flex h-full min-h-0 flex-col">
+            {!selectedId && (
+              <header className="flex min-h-14 shrink-0 flex-wrap items-center gap-2 border-b px-3 py-2">
+                <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
+                  <SheetTrigger asChild>
+                    <Button size="icon" variant="ghost" aria-label="打开导航"><PanelLeftOpen className="h-4 w-4" /></Button>
+                  </SheetTrigger>
+                  <SheetContent side="left" className="w-[86vw] max-w-80 p-0 [&>button]:hidden">
+                    <SheetTitle className="sr-only">邮箱导航</SheetTitle>
+                    <div className="h-[100dvh]">{sidebarContent}</div>
+                  </SheetContent>
+                </Sheet>
+                <Button size="icon" variant="ghost" onClick={refreshMail} disabled={refreshing || autoRefreshing} className={cn("transition-all", (refreshing || autoRefreshing) && "bg-primary/5 text-primary")} title={autoRefreshing ? "自动刷新中" : "刷新邮件"}>
+                  <RefreshCcw className={cn("h-4 w-4", (refreshing || autoRefreshing) && "animate-spin")} />
+                </Button>
+                <div className="min-w-0 flex-1 text-sm font-semibold">{viewTitle}</div>
+                <Button type="button" size="icon" onClick={() => openCompose()} disabled={!selectedMailbox} aria-label="写邮件"><PencilLine className="h-4 w-4" /></Button>
+                <div className="relative basis-full">
+                  <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+                  <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder={mailView === "scheduled" ? "搜索待发送" : "搜索邮件"} className="h-10 pl-9" />
+                </div>
+              </header>
+            )}
+            <section className="min-h-0 flex-1">{contentView}</section>
+          </div>
+        ) : (
+          <ResizablePanelGroup direction="horizontal" className="h-full min-h-0 w-full">
+            <ResizablePanel ref={sidebarPanelRef} collapsible collapsedSize={4} defaultSize={15} minSize={11} maxSize={24} onCollapse={() => setSidebarCollapsed(true)} onExpand={() => setSidebarCollapsed(false)}>
+              {sidebarContent}
             </ResizablePanel>
             <ResizableHandle withHandle />
-
             <ResizablePanel defaultSize={85} minSize={60}>
               <section className="flex h-full min-h-0 flex-col">
                 <header className="flex h-16 shrink-0 items-center justify-between gap-3 border-b px-5">
@@ -659,127 +817,11 @@ export function MailPage() {
                     <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder={mailView === "scheduled" ? "搜索待发送" : "搜索邮件"} className="pl-9" />
                   </div>
                 </header>
-
-                {!mailboxList.isLoading && !hasMailboxes ? (
-                  <NoMailboxState onOpenSettings={openSettings} />
-                ) : mailView === "scheduled" ? (
-                  <ScheduledSendView
-                    compact={displayMode === "compact"}
-                    items={visibleScheduledItems}
-                    total={scheduledItems.length}
-                    loading={scheduledSends.isLoading}
-                    query={query}
-                    cancelingId={cancelingScheduledId}
-                    onCancel={(item) => cancelScheduledSend.mutate(item)}
-                  />
-                ) : displayMode === "compact" ? (
-                  <CompactMailView
-                    title={viewTitle}
-                    icon={mailView === "label" && selectedLabel ? <Tag className="h-4 w-4" style={{ color: selectedLabel.color }} /> : undefined}
-                    messages={visibleMessages}
-                    total={allMessages.length}
-                    selectedIds={compactSelectedIds}
-                    allSelected={compactAllSelected}
-                    someSelected={compactSomeSelected}
-                    loading={messages.isLoading}
-                    hasMore={hasMoreMessages}
-                    loadingMore={messages.isFetchingNextPage}
-                    onLoadMore={() => messages.fetchNextPage()}
-                    emptyMessage={emptyMessage}
-                    selectedId={selectedId}
-                    selected={selected}
-                    detailLoading={detail.isLoading}
-                    labels={labelItems}
-                    labelPending={addLabel.isPending || removeLabel.isPending}
-                    onSelect={openMessage}
-                    onSelectAll={toggleCompactSelectAll}
-                    onToggleSelected={toggleCompactSelect}
-                    scheduledDraftIds={scheduledDraftIds}
-                    onCloseReader={() => setSelectedId(null)}
-                    onStar={(message) => star.mutate({ id: message.id, starred: !message.isStarred })}
-                    onReply={openReply}
-                    onForward={openForward}
-                    onArchive={(message) => move.mutate({ id: message.id, folder: message.folder === "Archive" ? "Inbox" : "Archive" })}
-                    onDelete={confirmDeleteMessage}
-                    onToggleRead={(message) => markRead.mutate({ id: message.id, read: !message.isRead })}
-                    onAddLabel={(message, label) => addLabel.mutate({ id: message.id, label })}
-                    onRemoveLabel={(message, labelId) => removeLabel.mutate({ id: message.id, labelId })}
-                    bulkPending={bulkPending}
-                    onBulkAction={runBulkAction}
-                  />
-                ) : (
-                <ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
-                  <ResizablePanel defaultSize={32} minSize={24} maxSize={44}>
-                    <div className="flex h-full min-h-0 flex-col">
-                      <div className="flex h-14 shrink-0 items-center justify-between border-b px-5">
-                        <div className="flex min-w-0 items-center gap-3">
-                          <Checkbox aria-label="选择当前页邮件" checked={compactAllSelected ? true : compactSomeSelected ? "indeterminate" : false} onCheckedChange={(value) => toggleCompactSelectAll(value === true)} />
-                          <div className="min-w-0">
-                            <div className="flex items-center gap-2 text-sm font-semibold">{mailView === "label" && selectedLabel && <Tag className="h-4 w-4" style={{ color: selectedLabel.color }} />}{viewTitle}</div>
-                            <div className="text-xs text-muted-foreground">{selectedCountOnPage > 0 ? `已选 ${selectedCountOnPage} 封` : `${visibleMessages.length} / ${allMessages.length} 封邮件`}</div>
-                          </div>
-                        </div>
-                        {selectedCountOnPage > 0 && <BulkActionMenu pending={bulkPending} onAction={runBulkAction} />}
-                      </div>
-                      <ScrollArea className="min-h-0 flex-1">
-                        {messages.isLoading && <MessageSkeleton />}
-                        {visibleMessages.map((m) => <MessageRow key={m.id} message={m} active={selectedId === m.id} checked={compactSelectedIds.includes(m.id)} scheduled={scheduledDraftIds.has(m.id)} onCheckedChange={(checked) => toggleCompactSelect(m.id, checked)} onClick={() => openMessage(m.id)} onStar={() => star.mutate({ id: m.id, starred: !m.isStarred })} />)}
-                        {!messages.isLoading && visibleMessages.length === 0 && <div className="p-8 text-center text-sm text-muted-foreground">{emptyMessage}</div>}
-                        {!messages.isLoading && hasMoreMessages && (
-                          <div className="border-b p-4 text-center">
-                            <Button variant="outline" size="sm" disabled={!canLoadMore} onClick={() => messages.fetchNextPage()}>
-                              {messages.isFetchingNextPage ? "加载中..." : "加载更多"}
-                            </Button>
-                          </div>
-                        )}
-                      </ScrollArea>
-                    </div>
-                  </ResizablePanel>
-                  <ResizableHandle withHandle />
-
-                  <ResizablePanel defaultSize={68} minSize={44}>
-                    <section className="h-full min-h-0">
-                      {!selectedId && <div className="grid h-full place-items-center text-muted-foreground">选择一封邮件阅读</div>}
-                      {detail.isLoading && <div className="space-y-4 p-6"><Skeleton className="h-8 w-2/3" /><Skeleton className="h-4 w-1/3" /><Separator /><Skeleton className="h-40 w-full" /></div>}
-                      {selected && <div className="flex h-full min-h-0 flex-col">
-                        <div className="border-b p-5">
-                          <div className="mb-4 flex items-center justify-between gap-3">
-                            <h2 className="text-xl font-semibold">{selected.subject}</h2>
-                            <div className="flex flex-wrap justify-end gap-2">
-                              <Button variant="outline" size="sm" onClick={() => openReply(selected)}><Reply className="h-4 w-4" />回复</Button>
-                              <Button variant="outline" size="sm" onClick={() => openForward(selected)}><Forward className="h-4 w-4" />转发</Button>
-                              {selected.folder === "Archive" ? (
-                                <Button variant="outline" size="sm" onClick={() => move.mutate({ id: selected.id, folder: "Inbox" })}>取消归档</Button>
-                              ) : (
-                                <Button variant="outline" size="sm" onClick={() => move.mutate({ id: selected.id, folder: "Archive" })}>归档</Button>
-                              )}
-                              <Button variant="destructive" size="sm" onClick={() => confirmDeleteMessage(selected)}>删除</Button>
-                            </div>
-                          </div>
-                          <div className="text-sm text-muted-foreground"><span className="font-medium text-foreground" title={senderTitle(selected)}>{senderDisplayName(selected)}</span> 发给 {selected.to.join(", ")} · {formatDateTime(selected.receivedAt)}</div>
-                          <MessageLabels
-                            messageLabels={selected.labels || []}
-                            availableLabels={labelItems}
-                            onAdd={(label) => addLabel.mutate({ id: selected.id, label })}
-                            onRemove={(labelId) => removeLabel.mutate({ id: selected.id, labelId })}
-                            pending={addLabel.isPending || removeLabel.isPending}
-                          />
-                        </div>
-                        <ScrollArea className="min-h-0 flex-1">
-                          <div className="p-6">
-                            <div className="mail-html prose max-w-none text-sm leading-7" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(selected.bodyHtml || `<pre>${selected.bodyText || ""}</pre>`) }} />
-                            {selected.attachments && selected.attachments.length > 0 && <div className="mt-8 rounded-lg border p-4"><div className="mb-3 font-medium">附件</div><div className="space-y-2">{selected.attachments.map((a) => <a className="flex items-center justify-between rounded-md border p-3 text-sm hover:bg-accent" href={`/api/mail/attachments/${a.id}`} key={a.id}><span className="flex items-center gap-2"><Paperclip className="h-4 w-4" />{a.filename}</span><span className="text-muted-foreground">{formatBytes(a.sizeBytes)}</span></a>)}</div></div>}
-                          </div>
-                        </ScrollArea>
-                      </div>}
-                    </section>
-                  </ResizablePanel>
-                </ResizablePanelGroup>
-
-                )}
+                {contentView}
               </section>
             </ResizablePanel>
           </ResizablePanelGroup>
+        )}
       </SidebarProvider>
 
       <ComposeDialog mailbox={selectedMailbox} open={composeOpen} draft={composeDraft} 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"] }) }} />
@@ -1044,15 +1086,18 @@ function CompactMailView({
 
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-background">
-      <div className="flex h-12 shrink-0 items-center justify-between border-b px-4">
-        <div className="flex items-center gap-3">
+      <div className="flex min-h-12 shrink-0 items-center justify-between gap-2 border-b px-3 sm:px-4">
+        <div className="flex min-w-0 flex-1 items-center gap-3">
           <Checkbox aria-label="选择当前页邮件" checked={allSelected ? true : someSelected ? "indeterminate" : false} onCheckedChange={(value) => onSelectAll(value === true)} />
-          <div className="flex items-center gap-2 text-base font-semibold">{icon}{title}</div>
+          <div className="flex min-w-0 items-center gap-2 text-base font-semibold">
+            {icon}
+            <span className="truncate">{title}</span>
+          </div>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex shrink-0 items-center gap-2">
           {selectedIds.length > 0 ? (
             <>
-              <span className="text-sm text-muted-foreground">已选 {selectedIds.length} 封</span>
+              <span className="hidden text-sm text-muted-foreground min-[380px]:inline">已选 {selectedIds.length} 封</span>
               <BulkActionMenu pending={bulkPending} onAction={onBulkAction} />
             </>
           ) : (
@@ -1113,7 +1158,43 @@ function CompactMessageDetail({
 }) {
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-background">
-      <div className="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-4">
+      <div className="shrink-0 border-b px-3 py-2 sm:px-4">
+        <div className="flex min-h-10 items-center gap-2 sm:hidden">
+          <Button variant="ghost" size="icon" onClick={onBack} aria-label="返回">
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div className="min-w-0 flex-1 truncate text-sm font-semibold">{selected?.subject || "邮件详情"}</div>
+          <Button variant="ghost" size="icon" disabled={!previousMessage} onClick={() => previousMessage && onSelect(previousMessage.id)} aria-label="上一封">
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon" disabled={!nextMessage} onClick={() => nextMessage && onSelect(nextMessage.id)} aria-label="下一封">
+            <ArrowLeft className="h-4 w-4 rotate-180" />
+          </Button>
+          {selected && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" aria-label="更多操作">
+                  <Ellipsis className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {selected.folder === "Drafts" ? (
+                  <DropdownMenuItem onSelect={() => onSelect(selected.id)}><PencilLine className="h-4 w-4" />编辑草稿</DropdownMenuItem>
+                ) : (
+                  <>
+                    <DropdownMenuItem onSelect={() => onReply(selected)}><Reply className="h-4 w-4" />回复</DropdownMenuItem>
+                    <DropdownMenuItem onSelect={() => onForward(selected)}><Forward className="h-4 w-4" />转发</DropdownMenuItem>
+                    <DropdownMenuItem onSelect={() => onArchive(selected)}><Archive className="h-4 w-4" />{selected.folder === "Archive" ? "取消归档" : "归档"}</DropdownMenuItem>
+                    <DropdownMenuItem onSelect={() => onToggleRead(selected)}><MailCheck className="h-4 w-4" />{selected.isRead ? "标为未读" : "标为已读"}</DropdownMenuItem>
+                    <DropdownMenuItem onSelect={() => onStar(selected)}><Star className={cn("h-4 w-4", selected.isStarred && "fill-yellow-400 text-yellow-500")} />{selected.isStarred ? "取消星标" : "添加星标"}</DropdownMenuItem>
+                  </>
+                )}
+                <DropdownMenuItem onSelect={() => onDelete(selected)} className="text-destructive"><Trash2 className="h-4 w-4" />删除</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+        <div className="hidden min-h-10 items-center justify-between gap-3 sm:flex">
           <div className="flex flex-wrap items-center gap-2">
             <Button variant="outline" size="sm" onClick={onBack}><ArrowLeft className="h-4 w-4" />返回</Button>
             {selected?.folder === "Drafts" ? (
@@ -1134,19 +1215,20 @@ function CompactMessageDetail({
             <Button variant="ghost" size="sm" disabled={!nextMessage} onClick={() => nextMessage && onSelect(nextMessage.id)}>下一封</Button>
           </div>
         </div>
+      </div>
         {loading && <div className="space-y-4 p-8"><Skeleton className="h-8 w-2/3" /><Skeleton className="h-4 w-1/3" /><Separator /><Skeleton className="h-64 w-full" /></div>}
         {!loading && !selected && <div className="grid flex-1 place-items-center text-sm text-muted-foreground">邮件不存在</div>}
         {selected && (
           <ScrollArea className="min-h-0 flex-1">
-            <div className="w-full px-8 py-6">
+            <div className="w-full px-4 py-4 sm:px-8 sm:py-6">
               <div className="space-y-5 border-b pb-5">
-                <div className="flex items-center gap-3">
-                  <h1 className="min-w-0 flex-1 truncate text-2xl font-semibold tracking-tight">{selected.subject}</h1>
+                <div className="flex items-start gap-3">
+                  <h1 className="min-w-0 flex-1 break-words text-xl font-semibold tracking-tight sm:text-2xl">{selected.subject}</h1>
                   <Button type="button" variant="ghost" size="icon" aria-label={selected.isStarred ? "取消星标" : "添加星标"} className="text-muted-foreground hover:text-yellow-500" onClick={() => onStar(selected)}>
                     <Star className={cn("h-5 w-5", selected.isStarred && "fill-yellow-400 text-yellow-500")} />
                   </Button>
                 </div>
-                <div className="flex items-start justify-between gap-4">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                   <div className="flex min-w-0 items-start gap-3">
                     <Avatar className="size-10 rounded-full"><AvatarFallback className="bg-primary text-sm font-semibold text-primary-foreground">{accountInitial(senderDisplayName(selected), selected.from)}</AvatarFallback></Avatar>
                     <div className="min-w-0 text-sm">
@@ -1154,7 +1236,7 @@ function CompactMessageDetail({
                       <div className="truncate text-muted-foreground">收件人 {selected.to.join(", ")}</div>
                     </div>
                   </div>
-                  <div className="shrink-0 text-right text-sm text-muted-foreground">{formatDateTime(selected.receivedAt)}</div>
+                  <div className="shrink-0 text-left text-sm text-muted-foreground sm:text-right">{formatDateTime(selected.receivedAt)}</div>
                 </div>
                 <MessageLabels
                   messageLabels={selected.labels || []}
@@ -1164,9 +1246,9 @@ function CompactMessageDetail({
                   pending={labelPending}
                 />
               </div>
-              <div className="py-8">
-                <div className="mail-html prose max-w-none text-sm leading-7" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(selected.bodyHtml || `<pre>${selected.bodyText || ""}</pre>`) }} />
-                {selected.attachments && selected.attachments.length > 0 && <div className="mt-8 rounded-lg border p-4"><div className="mb-3 font-medium">附件</div><div className="space-y-2">{selected.attachments.map((a) => <a className="flex items-center justify-between rounded-md border p-3 text-sm hover:bg-accent" href={`/api/mail/attachments/${a.id}`} key={a.id}><span className="flex items-center gap-2"><Paperclip className="h-4 w-4" />{a.filename}</span><span className="text-muted-foreground">{formatBytes(a.sizeBytes)}</span></a>)}</div></div>}
+              <div className="py-6 sm:py-8">
+                <div className="mail-html prose max-w-none text-sm leading-7" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(selected.bodyHtml || `<pre>${escapeHtml(selected.bodyText || "")}</pre>`) }} />
+                {selected.attachments && selected.attachments.length > 0 && <div className="mt-8 rounded-lg border p-4"><div className="mb-3 font-medium">附件</div><div className="space-y-2">{selected.attachments.map((a) => <a className="flex flex-col gap-1 rounded-md border p-3 text-sm hover:bg-accent sm:flex-row sm:items-center sm:justify-between" href={`/api/mail/attachments/${a.id}`} key={a.id}><span className="flex min-w-0 items-center gap-2"><Paperclip className="h-4 w-4 shrink-0" /><span className="truncate">{a.filename}</span></span><span className="text-muted-foreground">{formatBytes(a.sizeBytes)}</span></a>)}</div></div>}
               </div>
             </div>
           </ScrollArea>
@@ -1177,21 +1259,40 @@ function CompactMessageDetail({
 
 function CompactMessageRow({ message, active, checked, scheduled, onCheckedChange, onClick, onStar }: { message: MailMessage; active: boolean; checked: boolean; scheduled?: boolean; onCheckedChange: (checked: boolean) => void; onClick: () => void; onStar: () => void }) {
   const visibleLabels = (message.labels || []).slice(0, 2)
+  const hiddenLabelCount = Math.max((message.labels?.length || 0) - visibleLabels.length, 0)
   const senderName = senderDisplayName(message)
   return (
-    <div onClick={onClick} className={cn("grid cursor-pointer grid-cols-[32px_28px_minmax(140px,240px)_minmax(0,1fr)_88px_36px] items-center gap-2 border-b px-4 py-2 text-sm transition-colors hover:bg-accent/50", active && "bg-accent", !message.isRead && "font-semibold")}>
-      <Checkbox aria-label="选择邮件" checked={checked} onCheckedChange={(value) => onCheckedChange(value === true)} onClick={(event) => event.stopPropagation()} />
-      <Mail className={cn("h-4 w-4", message.isRead ? "text-muted-foreground/70" : "fill-yellow-200 text-yellow-500")} />
-      <div className="truncate" title={senderTitle(message)}>{senderName}</div>
-      <div className="flex min-w-0 items-center gap-2">
-        <span className="truncate font-medium">{message.subject}</span>
-        <span className="min-w-0 truncate text-muted-foreground">{message.snippet}</span>
-        {scheduled && <Badge variant="secondary" className="h-5 shrink-0 rounded-md px-1.5 text-[11px] font-normal">已定时</Badge>}
-        {visibleLabels.map((label) => <MailLabelBadge key={label.id} label={label} compact />)}
-        {message.hasAttachments && <Paperclip className="h-3 w-3 shrink-0 text-muted-foreground" />}
+    <div onClick={onClick} className={cn("cursor-pointer border-b px-3 py-3 text-sm transition-colors hover:bg-accent/50 sm:grid sm:grid-cols-[32px_28px_minmax(140px,220px)_minmax(0,1fr)_104px_36px] sm:items-center sm:gap-2 sm:px-4 sm:py-2", active && "bg-accent", !message.isRead && "font-semibold")}>
+      <div className="flex gap-3 sm:contents">
+        <Checkbox aria-label="选择邮件" checked={checked} onCheckedChange={(value) => onCheckedChange(value === true)} onClick={(event) => event.stopPropagation()} className="mt-0.5 shrink-0 sm:mt-0" />
+        {message.isRead ? (
+          <MailCheck className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/70 sm:mt-0" />
+        ) : (
+          <Mail className="mt-0.5 h-4 w-4 shrink-0 fill-yellow-200 text-yellow-500 sm:mt-0" />
+        )}
+        <div className="min-w-0 flex-1 sm:contents">
+          <div className="flex min-w-0 items-center justify-between gap-2 sm:block">
+            <div className="min-w-0 truncate" title={senderTitle(message)}>{senderName}</div>
+            <div className="flex shrink-0 items-center gap-1 sm:hidden">
+              <span className="text-xs text-muted-foreground">{formatDate(message.receivedAt)}</span>
+              <Button type="button" variant="ghost" size="icon" aria-label={message.isStarred ? "取消星标" : "添加星标"} className="h-7 w-7 text-muted-foreground hover:text-yellow-500" onClick={(event) => { event.stopPropagation(); onStar() }}>
+                <Star className={cn("h-4 w-4", message.isStarred && "fill-yellow-400 text-yellow-500")} />
+              </Button>
+            </div>
+          </div>
+          <div className="mt-1 flex min-w-0 items-center gap-2 sm:mt-0">
+            <span className="truncate font-medium">{message.subject}</span>
+            <span className="hidden min-w-0 truncate text-muted-foreground sm:block">{message.snippet}</span>
+            {scheduled && <Badge variant="secondary" className="h-5 shrink-0 rounded-md px-1.5 text-[11px] font-normal">已定时</Badge>}
+            {visibleLabels.map((label) => <MailLabelBadge key={label.id} label={label} compact />)}
+            {hiddenLabelCount > 0 && <Badge variant="outline" className="h-5 shrink-0 rounded-md px-1.5 text-[11px] font-normal text-muted-foreground">+{hiddenLabelCount}</Badge>}
+            {message.hasAttachments && <Paperclip className="h-3 w-3 shrink-0 text-muted-foreground" />}
+          </div>
+          <div className="mt-1 line-clamp-2 text-xs text-muted-foreground sm:hidden">{message.snippet}</div>
+        </div>
       </div>
-      <div className="shrink-0 text-right text-xs text-muted-foreground">{formatDate(message.receivedAt)}</div>
-      <Button type="button" variant="ghost" size="icon" aria-label={message.isStarred ? "取消星标" : "添加星标"} className="h-7 w-7 text-muted-foreground hover:text-yellow-500" onClick={(event) => { event.stopPropagation(); onStar() }}>
+      <div className="hidden shrink-0 text-right text-xs text-muted-foreground sm:block">{formatDate(message.receivedAt)}</div>
+      <Button type="button" variant="ghost" size="icon" aria-label={message.isStarred ? "取消星标" : "添加星标"} className="hidden h-7 w-7 text-muted-foreground hover:text-yellow-500 sm:inline-flex" onClick={(event) => { event.stopPropagation(); onStar() }}>
         <Star className={cn("h-4 w-4", message.isStarred && "fill-yellow-400 text-yellow-500")} />
       </Button>
     </div>
@@ -1666,13 +1767,13 @@ function ComposeDialog({ mailbox, open, draft, onOpenChange, onSent }: { mailbox
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="w-[min(96vw,82rem)] max-w-none overflow-hidden p-0"
+        className="flex h-[100dvh] w-screen max-w-none overflow-hidden p-0 sm:h-auto sm:max-h-[92vh] sm:w-[min(96vw,82rem)]"
         onInteractOutside={(event) => event.preventDefault()}
         onPointerDownOutside={(event) => event.preventDefault()}
       >
-        <form key={draft?.key || "new"} className="flex max-h-[90vh] flex-col" onSubmit={submit}>
-          <DialogHeader className="border-b px-6 py-4 text-left">
-            <DialogTitle className="flex items-center justify-between gap-4">
+        <form key={draft?.key || "new"} className="flex min-h-0 flex-1 flex-col sm:max-h-[90vh]" onSubmit={submit}>
+          <DialogHeader className="border-b px-4 py-3 text-left sm:px-6 sm:py-4">
+            <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")}>
                 {draftStatus === "saving" ? "正在保存草稿..." : draftStatus === "saved" && lastSavedAt ? `草稿已保存 ${lastSavedAt.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}` : draftStatus === "error" ? "草稿保存失败" : ""}
@@ -1721,10 +1822,10 @@ function ComposeDialog({ mailbox, open, draft, onOpenChange, onSent }: { mailbox
               onRemoveFile={(index) => { setAttachmentsTouched(true); setFiles((current) => current.filter((_, itemIndex) => itemIndex !== index)) }}
             />
           </div>
-          <DialogFooter className="border-t bg-background px-6 py-4">
-            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
-            <Button type="button" variant="outline" disabled={send.isPending || scheduleSend.isPending || !mailbox} onClick={() => setScheduleDialogOpen(true)}><Calendar className="h-4 w-4" />定时发送</Button>
-            <Button disabled={send.isPending || !mailbox}><Send className="h-4 w-4" />{send.isPending ? "发送中..." : "发送"}</Button>
+          <DialogFooter className="flex-row justify-end gap-2 border-t bg-background px-4 py-3 sm:px-6 sm:py-4">
+            <Button type="button" variant="outline" className="min-h-10 px-3" onClick={() => onOpenChange(false)}>取消</Button>
+            <Button type="button" variant="outline" className="min-h-10 px-3" disabled={send.isPending || scheduleSend.isPending || !mailbox} onClick={() => setScheduleDialogOpen(true)}><Calendar className="h-4 w-4" />定时</Button>
+            <Button className="min-h-10 px-4" disabled={send.isPending || !mailbox}><Send className="h-4 w-4" />{send.isPending ? "发送中..." : "发送"}</Button>
           </DialogFooter>
         </form>
         <ScheduleSendDialog open={scheduleDialogOpen} pending={scheduleSend.isPending} onOpenChange={setScheduleDialogOpen} onConfirm={scheduleAt} />
@@ -1744,8 +1845,8 @@ function ComposeDialog({ mailbox, open, draft, onOpenChange, onSent }: { mailbox
 
 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-6 py-2 sm:flex-row sm:items-center">
-      <Label className="w-20 shrink-0 text-base font-normal text-foreground">{label}</Label>
+    <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">
+      <Label className="shrink-0 text-base font-normal text-foreground sm:w-20">{label}</Label>
       <div className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center">
         {children}
         {action}
@@ -1983,7 +2084,7 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, onC
     content: composerInitialHtml(defaultValue, defaultHtml),
     editorProps: {
       attributes: {
-        class: "mail-html min-h-[280px] overflow-y-auto px-6 py-5 text-base leading-7 outline-none",
+        class: "mail-html min-h-[260px] overflow-y-auto px-4 py-4 text-base leading-7 outline-none sm:min-h-[280px] sm:px-6 sm:py-5",
         "aria-label": "正文",
       },
       handlePaste(view, event) {
@@ -2105,9 +2206,9 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, onC
   }
 
   return (
-    <div className="min-h-[420px]">
+    <div className="min-h-[360px] sm:min-h-[420px]">
       <Input ref={fileInputRef} type="file" multiple className="hidden" onChange={handlePickedFiles} />
-      <div className="flex min-h-11 flex-wrap items-center gap-1 border-b px-6 py-2">
+      <div className="flex min-h-11 flex-nowrap items-center gap-1 overflow-x-auto border-b px-4 py-2 sm:flex-wrap sm:overflow-visible sm:px-6">
         <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" />
@@ -2151,7 +2252,7 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, onC
         </div>
       </div>
       {formatOpen && (
-        <div className="flex min-h-14 flex-wrap items-center gap-1 border-b bg-muted/40 px-6 py-2">
+        <div className="flex min-h-14 flex-nowrap items-center gap-1 overflow-x-auto border-b bg-muted/40 px-4 py-2 sm:flex-wrap sm:overflow-visible sm:px-6">
           <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" />
           <DropdownMenu>
@@ -2234,7 +2335,7 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, onC
       )}
       <div className={cn(
         "composer-editor relative",
-        "[&_.ProseMirror]:min-h-[280px] [&_.ProseMirror]:overflow-y-auto [&_.ProseMirror]:px-6 [&_.ProseMirror]:py-5 [&_.ProseMirror]:text-base [&_.ProseMirror]:leading-7 [&_.ProseMirror]:outline-none",
+        "[&_.ProseMirror]:min-h-[260px] [&_.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_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",
         empty && "bg-background"
@@ -2242,7 +2343,7 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, onC
         <EditorContent editor={editor} />
       </div>
       {files.length > 0 && (
-        <div className="border-t px-6 py-3">
+        <div className="border-t px-4 py-3 sm:px-6">
           <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">

apps/web/src/pages/profile.tsx

@@ -10,6 +10,7 @@ import { applyTheme, getInitialTheme } from "@/lib/theme"
 import { DisplayMode, useDisplayMode } from "@/lib/display-mode"
 import { useMe } from "@/hooks/use-me"
 import { useLogout } from "@/hooks/use-logout"
+import { useIsMobile } from "@/hooks/use-mobile"
 import { validatePasswordConfirm } from "@/lib/validation"
 import { Button } from "@/components/ui/button"
 import { PasswordInput } from "@/components/ui/password-input"
@@ -21,6 +22,7 @@ import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Separator } from "@/components/ui/separator"
 import { ScrollArea } from "@/components/ui/scroll-area"
@@ -60,6 +62,8 @@ export function ProfilePage() {
   const [displayMode, setDisplayMode] = useDisplayMode()
   const [blockedMailboxId, setBlockedMailboxId] = React.useState("all")
   const [ruleDialogOpen, setRuleDialogOpen] = React.useState(false)
+  const [mobileSidebarOpen, setMobileSidebarOpen] = React.useState(false)
+  const isMobile = useIsMobile()
   const themeMountedRef = React.useRef(false)
 
   const rawTab = params.get("tab") as Tab | null
@@ -187,52 +191,78 @@ export function ProfilePage() {
 
   const logout = useLogout()
   async function copy(text: string) { await navigator.clipboard.writeText(text); toast({ title: "已复制" }) }
-  function setTab(next: Tab) { setParams(next === "profile" ? {} : { tab: next }) }
+  function setTab(next: Tab) { setParams(next === "profile" ? {} : { tab: next }); setMobileSidebarOpen(false) }
   function toggleSidebar() { sidebarCollapsed ? (sidebarPanelRef.current?.expand(14), setSidebarCollapsed(false)) : (sidebarPanelRef.current?.collapse(), setSidebarCollapsed(true)) }
   if (me.isLoading) return <div className="grid h-svh place-items-center text-muted-foreground">加载中...</div>
   if (me.isError || !user) return <div className="grid h-svh place-items-center text-muted-foreground">登录状态已失效</div>
 
+  const sidebarContent = (
+    <Sidebar collapsible="none" className="h-full w-full border-r bg-sidebar">
+      <SidebarHeader className={cn("border-b py-4", sidebarCollapsed ? "px-2" : "px-4")}>
+        <AccountHeader collapsed={sidebarCollapsed} name={user.displayName || selectedMailbox?.address || "LanQin"} email={user.email || selectedMailbox?.address} darkMode={darkMode} onToggleTheme={() => setDarkMode((v) => !v)} onBack={() => navigate("/")} />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          {!sidebarCollapsed && <SidebarGroupLabel>个人中心</SidebarGroupLabel>}
+          <SidebarGroupContent>
+            <SidebarMenu>{tabKeys.map((key) => <SidebarMenuItem key={key}><SidebarMenuButton isActive={tab === key} className={cn(sidebarCollapsed && "justify-center px-0")} onClick={() => setTab(key)}>{tabs[key].icon}{!sidebarCollapsed && <span>{tabs[key].label}</span>}</SidebarMenuButton></SidebarMenuItem>)}</SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <div className={cn("mt-auto border-t p-2", sidebarCollapsed ? "flex flex-col items-center" : "")}>
+        <Button type="button" variant="ghost" size={sidebarCollapsed ? "icon" : "sm"} className={cn("text-muted-foreground", !sidebarCollapsed && "w-full justify-start")} onClick={logout}>
+          <LogOut className="h-4 w-4" />
+          {!sidebarCollapsed && <span>退出登录</span>}
+        </Button>
+        {!isMobile && (
+          <>
+            <Separator className="my-2" />
+            <Button type="button" variant="ghost" size={sidebarCollapsed ? "icon" : "sm"} className={cn(!sidebarCollapsed && "w-full justify-start")} onClick={toggleSidebar}>{sidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}{!sidebarCollapsed && <span>收起侧栏</span>}</Button>
+          </>
+        )}
+      </div>
+    </Sidebar>
+  )
+
   return (
-    <div className="h-svh bg-background">
+    <div className="h-[100dvh] overflow-hidden bg-background">
       <SidebarProvider className="h-full min-h-0 w-full">
-        <ResizablePanelGroup direction="horizontal" className="h-full min-h-0 w-full">
-          <ResizablePanel ref={sidebarPanelRef} collapsible collapsedSize={4} defaultSize={15} minSize={11} maxSize={24} onCollapse={() => setSidebarCollapsed(true)} onExpand={() => setSidebarCollapsed(false)}>
-            <Sidebar collapsible="none" className="h-full w-full border-r bg-sidebar">
-              <SidebarHeader className={cn("border-b py-4", sidebarCollapsed ? "px-2" : "px-4")}>
-                <AccountHeader collapsed={sidebarCollapsed} name={user.displayName || selectedMailbox?.address || "LanQin"} email={user.email || selectedMailbox?.address} darkMode={darkMode} onToggleTheme={() => setDarkMode((v) => !v)} onBack={() => navigate("/")} />
-              </SidebarHeader>
-              <SidebarContent>
-                <SidebarGroup>
-                  {!sidebarCollapsed && <SidebarGroupLabel>个人中心</SidebarGroupLabel>}
-                  <SidebarGroupContent>
-                    <SidebarMenu>{tabKeys.map((key) => <SidebarMenuItem key={key}><SidebarMenuButton isActive={tab === key} className={cn(sidebarCollapsed && "justify-center px-0")} onClick={() => setTab(key)}>{tabs[key].icon}{!sidebarCollapsed && <span>{tabs[key].label}</span>}</SidebarMenuButton></SidebarMenuItem>)}</SidebarMenu>
-                  </SidebarGroupContent>
-                </SidebarGroup>
-              </SidebarContent>
-              <div className={cn("mt-auto border-t p-2", sidebarCollapsed ? "flex flex-col items-center" : "")}>
-                <Button type="button" variant="ghost" size={sidebarCollapsed ? "icon" : "sm"} className={cn("text-muted-foreground", !sidebarCollapsed && "w-full justify-start")} onClick={logout}>
-                  <LogOut className="h-4 w-4" />
-                  {!sidebarCollapsed && <span>退出登录</span>}
-                </Button>
-                <Separator className="my-2" />
-                <Button type="button" variant="ghost" size={sidebarCollapsed ? "icon" : "sm"} className={cn(!sidebarCollapsed && "w-full justify-start")} onClick={toggleSidebar}>{sidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}{!sidebarCollapsed && <span>收起侧栏</span>}</Button>
-              </div>
-            </Sidebar>
-          </ResizablePanel>
-          <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={85} minSize={60}>
-            <section className="flex h-full min-h-0 flex-col">
-              <header className="flex h-16 shrink-0 items-center justify-between gap-3 border-b px-5">
-                <div className="text-sm font-semibold">{tabs[tab].label}</div>
-              </header>
-              <ScrollArea className="min-h-0 flex-1"><main className="mx-auto w-full max-w-6xl p-6">{renderTab()}</main></ScrollArea>
-            </section>
-          </ResizablePanel>
-        </ResizablePanelGroup>
+        {isMobile ? (
+          <div className="flex h-full min-h-0 flex-col">
+            <header className="flex h-14 shrink-0 items-center gap-2 border-b px-3">
+              <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
+                <SheetTrigger asChild>
+                  <Button size="icon" variant="ghost" aria-label="打开导航"><PanelLeftOpen className="h-4 w-4" /></Button>
+                </SheetTrigger>
+                <SheetContent side="left" className="w-[86vw] max-w-80 p-0 [&>button]:hidden">
+                  <SheetTitle className="sr-only">个人中心导航</SheetTitle>
+                  <div className="h-[100dvh]">{sidebarContent}</div>
+                </SheetContent>
+              </Sheet>
+              <div className="min-w-0 flex-1 text-sm font-semibold">{tabs[tab].label}</div>
+              <Button type="button" variant="ghost" size="icon" onClick={() => navigate("/")} aria-label="返回邮箱"><ArrowLeft className="h-4 w-4" /></Button>
+            </header>
+            <ScrollArea className="min-h-0 flex-1"><main className="w-full p-4">{renderTab()}</main></ScrollArea>
+          </div>
+        ) : (
+          <ResizablePanelGroup direction="horizontal" className="h-full min-h-0 w-full">
+            <ResizablePanel ref={sidebarPanelRef} collapsible collapsedSize={4} defaultSize={15} minSize={11} maxSize={24} onCollapse={() => setSidebarCollapsed(true)} onExpand={() => setSidebarCollapsed(false)}>
+              {sidebarContent}
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={85} minSize={60}>
+              <section className="flex h-full min-h-0 flex-col">
+                <header className="flex h-16 shrink-0 items-center justify-between gap-3 border-b px-5">
+                  <div className="text-sm font-semibold">{tabs[tab].label}</div>
+                </header>
+                <ScrollArea className="min-h-0 flex-1"><main className="mx-auto w-full max-w-6xl p-6">{renderTab()}</main></ScrollArea>
+              </section>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        )}
       </SidebarProvider>
     </div>
   )
-
   function renderTab() {
     if (tab === "mailboxes") return <MailboxManagement mailboxes={mailboxes.data?.items || []} applyOptions={mailboxApplyOptions.data} applyPending={applyMailbox.isPending} selectedMailboxId={mailboxId} onSelect={setMailboxId} onCopy={copy} onOpen={(id) => { setMailboxId(id); navigate("/") }} onApply={(payload) => applyMailbox.mutateAsync(payload).then(() => undefined)} />
     if (tab === "clients") return <ClientSettingsSection mailboxes={mailboxes.data?.items || []} selectedMailboxId={mailboxId} hostname={publicSettings.data?.publicHostname} onSelectMailbox={setMailboxId} onCopy={copy} />
@@ -439,7 +469,7 @@ function ApplyMailboxDialog({ options, pending, onApply }: { options: MailboxApp
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <Button type="button" onClick={() => setOpen(true)}><Plus className="h-4 w-4" />申请邮箱</Button>
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent className="max-h-[92dvh] overflow-y-auto sm:max-w-lg">
         <DialogHeader><DialogTitle>申请邮箱</DialogTitle></DialogHeader>
         <form className="space-y-4" onSubmit={submit}>
           <Field label="邮箱前缀"><Input name="localPart" autoFocus required placeholder="your-name" /></Field>
@@ -450,7 +480,7 @@ function ApplyMailboxDialog({ options, pending, onApply }: { options: MailboxApp
             </Select>
           </Field>
           <Field label="显示名称"><Input name="displayName" placeholder="可选" /></Field>
-          <DialogFooter>
+          <DialogFooter className="gap-2 [&>button]:w-full sm:[&>button]:w-auto">
             <Button type="button" variant="outline" onClick={() => setOpen(false)}>取消</Button>
             <Button disabled={pending || !domainId}>{pending ? "申请中..." : "申请"}</Button>
           </DialogFooter>
@@ -620,7 +650,7 @@ function SignaturesSection({ items, mailboxes, loading, pending, onCreate, onUpd
         </CardContent>
       </Card>
       <Dialog open={!!editing} onOpenChange={(open) => { if (!open) setEditing(null) }}>
-        <DialogContent className="sm:max-w-2xl">
+        <DialogContent className="max-h-[92dvh] overflow-y-auto sm:max-w-2xl">
           <DialogHeader><DialogTitle>编辑签名</DialogTitle></DialogHeader>
           {editing && (
             <form key={editing.id} className="space-y-4" onSubmit={(e) => { e.preventDefault(); const form = new FormData(e.currentTarget); form.set("mailboxId", editingMailboxId === "all" ? "" : editingMailboxId); form.set("isDefault", editingIsDefault ? "on" : ""); onUpdate(editing.id, form); setEditing(null) }}>
@@ -637,7 +667,7 @@ function SignaturesSection({ items, mailboxes, loading, pending, onCreate, onUpd
                 <Checkbox checked={editingIsDefault} onCheckedChange={(value) => setEditing((current) => current ? { ...current, isDefault: value === true } : current)} />
                 <span>设为当前范围默认签名</span>
               </label>
-              <DialogFooter>
+              <DialogFooter className="gap-2 [&>button]:w-full sm:[&>button]:w-auto">
                 <Button type="button" variant="outline" onClick={() => setEditing(null)}>取消</Button>
                 <Button disabled={pending}>{pending ? "保存中..." : "保存修改"}</Button>
               </DialogFooter>
@@ -796,12 +826,12 @@ function RuleDialog({ open, onOpenChange, mailboxes, labels, pending, onCreate }
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[min(94vw,84rem)] max-w-none gap-0 overflow-hidden p-0">
-        <DialogHeader className="border-b px-8 py-6">
-          <DialogTitle className="text-2xl">新建规则</DialogTitle>
+      <DialogContent className="flex h-[100dvh] w-screen max-w-none gap-0 overflow-hidden p-0 sm:h-auto sm:max-h-[92vh] sm:w-[min(94vw,84rem)]">
+        <DialogHeader className="border-b px-4 py-4 text-left sm:px-8 sm:py-6">
+          <DialogTitle className="text-xl sm:text-2xl">新建规则</DialogTitle>
         </DialogHeader>
-        <form onSubmit={submit}>
-          <div className="space-y-7 px-8 py-7">
+        <form className="flex min-h-0 flex-1 flex-col" onSubmit={submit}>
+          <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-4 py-5 sm:space-y-7 sm:px-8 sm:py-7">
             <Field label="名称"><Input value={name} onChange={(event) => setName(event.target.value)} placeholder="我的规则" /></Field>
             <Field label="适用邮箱"><MailboxSelect value={mailboxId} mailboxes={mailboxes} onChange={setMailboxId} /></Field>
 
@@ -860,7 +890,7 @@ function RuleDialog({ open, onOpenChange, mailboxes, labels, pending, onCreate }
               </div>
             </div>
           </div>
-          <DialogFooter className="border-t px-8 py-5">
+          <DialogFooter className="gap-2 border-t px-4 py-4 sm:px-8 sm:py-5 [&>button]:w-full sm:[&>button]:w-auto">
             <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
             <Button disabled={!canCreate}>{pending ? "创建中..." : "创建"}</Button>
           </DialogFooter>