feat: 前端移动端响应式适配 #8

2026-08-18T01:21:25+08:00

dsh commented

2026-08-18 01:21:25 +08:00

概述

为 Web 前端增加移动端响应式支持（断点 ≤767px），手机浏览器可直接使用完整邮件功能。

主要变更

base.html（响应式样式）

底部导航条：小屏时左侧文件夹栏变为底部固定导航（收件箱 / 草稿箱 / 已发送 / 管理后台），居中橙色「写信」悬浮圆钮，收件箱未读角标保留
顶栏：紧凑单行；列表页搜索框自动下移为通栏第二行
邮件列表：隐藏正文摘要列、收窄发件人/时间列、行高 60px 便于触控、行内删除按钮常显
阅读页 / 写信页 / 设置页：内边距与字号收紧，配额进度条适配窄屏
管理后台：侧栏改为横向换行导航、表格横向滚动、统计卡两列排布

全部模板

viewport 增加 viewport-fit=cover，底部导航支持 env(safe-area-inset-bottom)（iPhone 刘海/底部横条）
settings.html 内联样式改为 .settings-main 类，便于响应式覆盖

验证

playwright 390×844（手机）与 768×1024（平板）双视口审计：所有页面无横向溢出
底部导航项顺序/位置正确（写信按钮居中）
移动端交互冒烟：全选 5/5、搜索过滤 1 行，均正常
桌面端（≥768px）布局与行为不受影响

## 概述为 Web 前端增加移动端响应式支持（断点 ≤767px），手机浏览器可直接使用完整邮件功能。 ## 主要变更 ### base.html（响应式样式） - **底部导航条**：小屏时左侧文件夹栏变为底部固定导航（收件箱 / 草稿箱 / 已发送 / 管理后台），居中橙色「写信」悬浮圆钮，收件箱未读角标保留 - **顶栏**：紧凑单行；列表页搜索框自动下移为通栏第二行 - **邮件列表**：隐藏正文摘要列、收窄发件人/时间列、行高 60px 便于触控、行内删除按钮常显 - **阅读页 / 写信页 / 设置页**：内边距与字号收紧，配额进度条适配窄屏 - **管理后台**：侧栏改为横向换行导航、表格横向滚动、统计卡两列排布 ### 全部模板 - viewport 增加 `viewport-fit=cover`，底部导航支持 `env(safe-area-inset-bottom)`（iPhone 刘海/底部横条） - settings.html 内联样式改为 `.settings-main` 类，便于响应式覆盖 ## 验证 - playwright 390×844（手机）与 768×1024（平板）双视口审计：所有页面无横向溢出 - 底部导航项顺序/位置正确（写信按钮居中） - 移动端交互冒烟：全选 5/5、搜索过滤 1 行，均正常 - 桌面端（≥768px）布局与行为不受影响

dsh added 1 commit 2026-08-18 01:21:25 +08:00

feat: 前端移动端响应式适配（≤767px） f281121a4d

- 左侧文件夹栏在小屏下变为底部导航条：收件箱/草稿箱/已发送/管理后台 + 居中「写信」悬浮圆钮（带未读角标）
- 顶栏紧凑化：列表页搜索框自动下移为通栏第二行
- 邮件列表：隐藏正文摘要、缩小头像/时间列、行高加大便于触控，删除按钮常显
- 阅读页/写信页/设置页：内边距与字号收紧，配额条适配
- 管理后台：侧栏改为横向换行导航，表格横向滚动，统计卡两列排布
- 全部模板 viewport 增加 viewport-fit=cover（iOS 安全区），底部导航支持 env(safe-area-inset-bottom)
- settings.html 内联样式改为 .settings-main 类以便响应式覆盖

kevin merged commit e3514246b0 into main

2026-08-18 10:48:49 +08:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: kevin/mailgo#8

Allow edits from maintainers