From 936d3c48190d8e27f2de0fae8187d324e555a4ba Mon Sep 17 00:00:00 2001
From: LanQin <lanqinnet@qq.com>
Date: Sun, 21 Jun 2026 00:02:30 +0800
Subject: [PATCH] =?UTF-8?q?style(web):=20=E7=BB=9F=E4=B8=80=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E8=A7=86=E5=8F=A3=E4=B8=8E=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将邮件、个人中心与规则弹窗从 `100dvh` 调整为 `h-svh`，减少移动端视口抖动。
- 优化邮件正文编辑器的基础布局与滚动样式，提升输入区可用性。
- 移除 `protected-layout` 中切换路由时自动关闭移动侧栏的逻辑。
---
 apps/web/src/components/protected-layout.tsx | 9 ---------
 apps/web/src/pages/mail.tsx                  | 8 ++++----
 apps/web/src/pages/profile.tsx               | 6 +++---
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/protected-layout.tsx b/apps/web/src/components/protected-layout.tsx
index 11ccc66..16abe19 100644
--- a/apps/web/src/components/protected-layout.tsx
+++ b/apps/web/src/components/protected-layout.tsx
@@ -133,15 +133,6 @@ function ProtectedContent() {
 
 function AdminSectionItems({ activeSection }: { activeSection: string }) {
   const { isMobile, setOpenMobile } = useSidebar()
-  const location = useLocation()
-  const locationKey = `${location.pathname}${location.search}`
-  const previousLocationKey = React.useRef(locationKey)
-
-  React.useEffect(() => {
-    const previous = previousLocationKey.current
-    previousLocationKey.current = locationKey
-    if (isMobile && previous !== locationKey) setOpenMobile(false)
-  }, [isMobile, locationKey, setOpenMobile])
 
   function closeMobile() {
     if (isMobile) setOpenMobile(false)
diff --git a/apps/web/src/pages/mail.tsx b/apps/web/src/pages/mail.tsx
index 485074d..b06d4fd 100644
--- a/apps/web/src/pages/mail.tsx
+++ b/apps/web/src/pages/mail.tsx
@@ -748,7 +748,7 @@ export function MailPage() {
   )
 
   return (
-    <div className="h-[100dvh] overflow-hidden bg-background">
+    <div className="h-svh overflow-hidden bg-background">
       <SidebarProvider className="h-full min-h-0 w-full">
         {isMobile ? (
           <div className="flex h-full min-h-0 flex-col">
@@ -760,7 +760,7 @@ export function MailPage() {
                   </SheetTrigger>
                   <SheetContent side="left" className="w-[86vw] max-w-80 p-0 [&>button]:hidden" aria-describedby={undefined}>
                     <SheetTitle className="sr-only">邮箱导航</SheetTitle>
-                    <div className="h-[100dvh]">{sidebarContent}</div>
+                    <div className="h-svh">{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 ? "自动刷新中" : "刷新邮件"}>
@@ -1767,7 +1767,7 @@ function ComposeDialog({ mailbox, open, draft, onOpenChange, onSent }: { mailbox
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        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)]"
+        className="flex h-svh 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()}
       >
@@ -2090,7 +2090,7 @@ function MailBodyComposer({ defaultValue, defaultHtml, files, signatureText, onC
     content: composerInitialHtml(defaultValue, defaultHtml),
     editorProps: {
       attributes: {
-        class: "mail-html w-full outline-none",
+        class: "mail-html min-h-[240px] min-w-0 flex-1 overflow-y-auto px-4 py-4 text-base leading-7 outline-none sm:min-h-[280px] sm:px-6 sm:py-5",
         "aria-label": "正文",
       },
       handlePaste(view, event) {
diff --git a/apps/web/src/pages/profile.tsx b/apps/web/src/pages/profile.tsx
index f25e60b..7ab111f 100644
--- a/apps/web/src/pages/profile.tsx
+++ b/apps/web/src/pages/profile.tsx
@@ -225,7 +225,7 @@ export function ProfilePage() {
   )
 
   return (
-    <div className="h-[100dvh] overflow-hidden bg-background">
+    <div className="h-svh overflow-hidden bg-background">
       <SidebarProvider className="h-full min-h-0 w-full">
         {isMobile ? (
           <div className="flex h-full min-h-0 flex-col">
@@ -236,7 +236,7 @@ export function ProfilePage() {
                 </SheetTrigger>
                 <SheetContent side="left" className="w-[86vw] max-w-80 p-0 [&>button]:hidden" aria-describedby={undefined}>
                   <SheetTitle className="sr-only">个人中心导航</SheetTitle>
-                  <div className="h-[100dvh]">{sidebarContent}</div>
+                  <div className="h-svh">{sidebarContent}</div>
                 </SheetContent>
               </Sheet>
               <div className="min-w-0 flex-1 text-sm font-semibold">{tabs[tab].label}</div>
@@ -826,7 +826,7 @@ function RuleDialog({ open, onOpenChange, mailboxes, labels, pending, onCreate }
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <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)]">
+      <DialogContent className="flex h-svh 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>