📊 整体进度
📐
响应式布局 P0
侧边栏折叠为底部抽屉 / 汉堡菜单;网格自动从 5 列 → 2 列;工具栏触屏适配
待开始
📤
移动端上传增强 P0
支持相机拍照直接上传、相册多选。使用 capture 属性唤起系统相机
待开始
🧭
底部标签导航 P0
移动端用底部 4 Tab 导航:文件 / 上传 / 文件夹 / 设置,拇指热区友好
待开始
🤏
手势交互 P1
左滑删除文件、长按进入多选模式、双击放大预览、下拉刷新文件列表
待开始
🔍
移动端预览优化 P1
支持双指缩放、滑动关闭(跟手动画)、分享按钮调用系统分享 API
待开始
🏠
PWA 支持 P1
manifest.json + Service Worker,添加到主屏幕,离线缓存最近图片列表
待开始
⚡
性能优化 P2
虚拟滚动(大量图片)、WebP 自动转换、渐进式图片加载、骨架屏
待开始
🌐
多语言 / 暗色模式 P2
跟随系统暗色模式自动切换、中英文切换(i18n)
待开始
🖼️ 移动端效果模拟
📁 全部文件
☑ 选择
🖼️ 文件
📤 上传
📁 文件夹
⚙️ 设置
🌄
🏞️
🎨
📸
🖼️
🌅
📁 文件
📤 上传
📂 文件夹
👤 我的
底部标签导航 + 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)
| 左滑 | 文件项左滑露出删除按钮 |
| 长按 | 进入多选模式 + 触觉反馈 |
| 双指缩放 | 预览模式下缩放图片 |
| 下拉刷新 | 文件列表下拉重新加载 |