szx/NewSzxcn-Email
1
0
Fork 0
Code Issues Pull Requests Actions 57 Packages Projects Releases Wiki Activity

style(web): 统一移动端视口与编辑器样式

Browse Source 
- 将邮件、个人中心与规则弹窗从 `100dvh` 调整为 `h-svh`，减少移动端视口抖动。
- 优化邮件正文编辑器的基础布局与滚动样式，提升输入区可用性。
- 移除 `protected-layout` 中切换路由时自动关闭移动侧栏的逻辑。
This commit is contained in:
LanQin
2026-06-21 00:02:30 +08:00
parent a8513120e5
commit 936d3c4819
3 changed files with 7 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/protected-layout.tsx
-9
View File
@@ -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)
apps/web/src/pages/mail.tsx
+4 -4
View File
@@ -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) {
apps/web/src/pages/profile.tsx
+3 -3
View File
@@ -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>