feat(ui): 移动端竖屏 UI 适配

[HKLHaoBin]

User description

摘要

Fixes #（无关联 Issue）。

为 Android 竖屏及窄屏（innerWidth < 720）补充移动端 Shell：底部 Tab +「更多」抽屉 + 顶栏设置，主内容全宽展示；桌面宽屏侧栏布局保持不变。

修复 / 新增 / 改进

• Shell：FloatingShell 在 mobile 布局下隐藏 188px 侧栏，改为顶栏 + 底栏（概览 / 历史 / 风格 / 更多）+ MobileMoreSheet（词汇表 / 翻译 / 划词追问 / 设置）
• 性能：Android / mobile 主区域与 WindowChrome 使用不透明 surface，禁用多层 backdrop-filter；Tab 切换改为 opacity 动画（无 blur）
• 页面：Overview 单列 Provider + 2×2 指标卡；History 列表/详情两态 + 返回；Vocab 纠错规则单列；SettingsModal 竖屏全屏 + 横向 Tab
• i18n：各语言包新增 nav.more、history.backToList
• 验证：新增 openless-all/app/scripts/android-ui-verify.ps1（gh 触发 CI debug APK → adb 安装 / logcat / 截图）

兼容

• 不包含：悬浮窗 overlay UI、概览页 in-app 录音 FAB、Rust/Kotlin 原生改动
• 对现有用户 / 本地环境 / 构建流程的影响：仅前端布局；innerWidth >= 720 且非 Android 时桌面 Shell 与现 beta 一致；Android CI workflow 无变更

测试计划

• 命令：npm run build（openless-all/app）
• 结果：TypeScript + Vite 构建通过
• 证据路径：本地 CI 构建 run 27470613716；真机 adb install + 竖屏截图验收通过

---

PR Type

Enhancement, Tests

---

Description

• Add mobile bottom tab navigation with top bar

• Implement responsive single-column layouts for narrow screens

• Introduce 'More' sheet for secondary navigation tabs

• Include Android verification script for UI testing

---

Diagram Walkthrough

flowchart LR
    Desktop["Desktop Layout"] --> Sidebar["188px sidebar + main content"]
    Mobile["Mobile Layout"] --> TopBar["Top bar with title and settings button"]
    Mobile --> BottomNav["Bottom nav: Overview / History / Style / More"]
    Mobile --> Main["Full-width main content"]
    BottomNav --> MoreSheet["More sheet: Vocab / Translation / Ask"]

Loading

File Walkthrough

	Relevant files
Enhancement	14 files FloatingShell.tsx Add mobile shell with bottom nav and top bar                          +237/-18 Icon.tsx Add 'more' icon for mobile navigation                                        +1/-0      MobileMoreSheet.tsx Create mobile more sheet component                                              +129/-0  SettingsModal.tsx Adapt settings modal for mobile layout                                      +128/-24 WindowChrome.tsx Use solid surface background for Android                                  +1/-1      en.ts Add i18n keys for mobile navigation                                            +2/-0      ja.ts Add i18n keys for Japanese mobile navigation                          +2/-0      ko.ts Add i18n keys for Korean mobile navigation                              +2/-0      zh-CN.ts Add i18n keys for Chinese mobile navigation                            +2/-0      zh-TW.ts Add i18n keys for Traditional Chinese mobile navigation    +2/-0      History.tsx Make history view responsive for mobile                                    +21/-4    Overview.tsx Make overview layout responsive for mobile                              +5/-3      Vocab.tsx Make vocab page single-column on mobile                                    +5/-3      _atoms.tsx Adjust page header for mobile spacing                                        +11/-2
Tests	1 files android-ui-verify.ps1 Add Android UI verification PowerShell script                        +92/-0

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ No major issues detected