📱 移动端优化计划

PicBed 图床移动端浏览器体验升级路线图

🎯 目标:移动端与桌面端同等流畅
📋 路线图
📱 效果预览
📝 详细方案

📊 整体进度

0 / 8 完成预计 4 天
📐

响应式布局 P0

侧边栏折叠为底部抽屉 / 汉堡菜单;网格自动从 5 列 → 2 列;工具栏触屏适配

待开始
📤

移动端上传增强 P0

支持相机拍照直接上传、相册多选。使用 capture 属性唤起系统相机

待开始
🧭

底部标签导航 P0

移动端用底部 4 Tab 导航:文件 / 上传 / 文件夹 / 设置,拇指热区友好

待开始
🤏

手势交互 P1

左滑删除文件、长按进入多选模式、双击放大预览、下拉刷新文件列表

待开始
🔍

移动端预览优化 P1

支持双指缩放、滑动关闭(跟手动画)、分享按钮调用系统分享 API

待开始
🏠

PWA 支持 P1

manifest.json + Service Worker,添加到主屏幕,离线缓存最近图片列表

待开始

性能优化 P2

虚拟滚动(大量图片)、WebP 自动转换、渐进式图片加载、骨架屏

待开始
🌐

多语言 / 暗色模式 P2

跟随系统暗色模式自动切换、中英文切换(i18n)

待开始

🖼️ 移动端效果模拟

9:41📶 🔋
📁 全部文件 ☑ 选择
🖼️ 文件 📤 上传 📁 文件夹 ⚙️ 设置
🌄
🏞️
🎨
📸
🖼️
🌅
📁 文件 📤 上传 📂 文件夹 👤 我的

底部标签导航 + 3列网格 + 顶部搜索栏

📐 1. 响应式布局 (P0)

断点<768px 移动端
侧边栏隐藏 → 左侧抽屉滑出 / 底部 Sheet
网格5列 → 2列 (手机) / 3列 (平板)
点击目标最小 44×44px (Apple HIG)
安全区env(safe-area-inset-*) 适配刘海屏

📤 2. 移动端上传增强 (P0)

拍照<input capture="environment"> 直接唤相机
相册multiple 多选支持
粘贴已有 Ctrl+V → 移动端用长按菜单"粘贴"
FAB右下角悬浮上传按钮(Material Design)

🧭 3. 底部标签导航 (P0)

移动端用 4 Tab 底部导航栏,替代桌面端的侧边栏+工具栏布局:

📁
文件
📤
上传
📂
文件夹
⚙️
设置

🤏 4. 手势交互 (P1)

左滑文件项左滑露出删除按钮
长按进入多选模式 + 触觉反馈
双指缩放预览模式下缩放图片
下拉刷新文件列表下拉重新加载