Qbao 移动端竖屏交互规范（v3.36）
版本 v1.0 · 2026-09 · 面向手机竖屏（≤768px）与窄屏（≤480px）的交互约定；
遵循行业惯例（材料设计 M3 触控/布局规范 https://m3.material.io/ 、iOS HIG 44pt 触控目标、
WCAG 2.5.8 目标尺寸建议），结合《开发上线流程规范》DoD。
1. 设计原则
| 原则 |
落地 |
| 主操作首屏可达 |
章节工作台唯一主按钮槽位：开始出题 ↔ 开始答题，同位置按状态机切换；策略/标签等低频配置折叠收纳 |
| 触控目标 |
主要操作 ≥44px、一般交互 ≥40px（pointer:coarse 媒体查询 + 组件内 scoped 覆盖） |
| 防 iOS 聚焦缩放 |
≤768px 下所有 input/select/textarea 字号 ≥16px（responsive.css 兜底） |
| 防误触 |
交互元素 touch-action: manipulation（杜绝双击缩放/长按选词）；中文 IME 组合期（isComposing/keyCode 229）回车不发送/不提交 |
| 全屏任务 |
答题/聊天用全屏 sheet；任务操作栏 sticky 贴底（任务栏，非导航栏）；键盘弹起时弹窗顶部对齐 |
| 安全区 |
底部固定元素统一 calc(… + env(safe-area-inset-bottom))；视口高度用 100dvh |
| 单列横滑 |
设置/用户中心/科目总览 Tab、题号导航：屏内单行，超宽横滑 |
| 存储分层 |
localStorage 只放小键（骨架/设置/≤1MB 会话影子），MB 级数据一律 IndexedDB（活动会话/考卷镜像、题目、历史） |
| 账号隔离 |
登录门禁：未登录整页登录页、匿名零写盘；数据按账号拆分（骨架键/IDB 分区/镜像键/云端），切换账号整页重建 |
2. 分档
-
900px：桌面（侧栏常驻；Electron 窗口 minWidth 960 永不落入移动档）
- 768–900px：窄窗（侧栏抽屉化）
- ≤768px：手机竖屏（顶栏图标化、单列、16px 输入）
- ≤480px：窄屏（更紧凑留白、弹窗操作按钮全宽均分）
3. 组件约定速查
- 章节工作台（StartView）：主按钮状态机 services/startActions.js（纯函数，单测约束）：
无轮次 →「开始出题」（可点/灰化+原因）→ 出题中（「出题中…」灰化）→ 出好未答完 →「开始答题」→ 答完 → 回到「开始出题」；失败/取消自动回落。
无「查看报告」入口；答完引导去答题历史；结算补发由 setFinished 监视器兜底。
- 答题全屏：.quiz-actions sticky 贴底（负外边距抵消弹窗内边距 + safe-area）；.dot ≤768 36px / coarse 40px；.quiz-nav 横滑。
- 聊天：Enter 发送带 IME 守卫；输入框 ≤768 16px/44px 高；工具栏 40px。
- 弹窗：≤480 内边距 16px，.dialog-actions .btn 全宽均分；含输入弹窗键盘弹起时顶部对齐。
- 下载落地页 /dl：≤640 历史版本表格卡片化（td[data-label] 前缀），下载按钮全宽 48px 高。
- 标签管理（TagsManager）：coarse 指针显示显式重命名按钮（桌面保留双击）。
4. 真机验收清单（用户手机，⑧ 阶段）
- 章节页打开即见主按钮（不滚动）；无题→「开始出题」灰化+原因；导入题目后同位置变「开始答题」；答完一轮回到「开始出题」；全站无「查看报告」（章节域）。
- 2000+ 题章节连续作答 5 题：无「本地保存失败：存储空间已满」；localStorage 无 >1MB 键。
- 中文输入法：聊天选词回车不误发；主观题选词回车不误提交。
- 无横向滚动（360px 与 390px 两档）；输入框聚焦不自动放大；双击不缩放。
- 深浅色各过一遍；/dl 页手机可读可点。