feat(viewer): UI-02 dark immersive photo viewer with thumbnail strip

V04 (方案 §5):PhotoLightbox 模板重构为深色沉浸布局——顶栏(关闭/位置
计数/⋯ 减少动画菜单)+ 舞台(contain 大图 + 边缘 ‹› + 粒子/互动占位层)+
缩略图条 + 底部操作栏;业务逻辑(序列导航/缩放手势/签名刷新/下载/点赞)
原样保留。

- 新增 viewer/position.ts:§5.2 位置计数真实回退(solo→照片预览;无
  total 未到末页→已加载 N 张;全部加载→i/n;不伪造总数)
- 新增 ThumbnailStrip:当前 ±3 窗口(≤7 项)、主色 2px 描边、thumb 变体、
  滚入可见(遵守减少动画)、点击选择不新增历史
- 新增 PhotoActionBar:Like(coral 心形+计数+连续点赞提示)/Share/
  Download 均分大触控;下载关闭整项移除;原图二级菜单(▾ + 长按)
- 模态可用性:body 滚动锁、焦点进入/困住/归还触发元素、Esc 先收菜单、
  菜单内左右键不抢占、dvh + 安全区、chrome 区手势/滚轮隔离
- 分享 V04 最小实现(复制当前深链,support/clipboard 从 AlbumHeader
  提取共用);navigator.share 编排属 Task 5
- zh-CN/en 新词条;vitest 新增 23 例(位置回退/缩略图/操作栏/焦点/滚锁)

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-21 21:58:09 +08:00
parent 3d89fcdb99
commit 89f45896b7
14 changed files with 1536 additions and 340 deletions
+11
View File
@@ -79,6 +79,17 @@ export default {
noPhotos: 'Photos coming soon',
newPhotos: 'New photos',
reduceMotion: 'Reduce motion',
// —— UI-02 (V04 dark immersive viewer) additions ——
photoViewer: 'Photo viewer',
photoPreview: 'Photo preview',
loadedCount: '{count} loaded',
tapMore: 'Tap to send more love',
download: 'Download',
downloadBrowse: 'Browse',
downloadOriginal: 'Original',
more: 'More options',
thumbnails: 'Thumbnail navigation',
thumbItem: 'Photo {n}',
},
route: { tokenLabel: 'Album token', photoLabel: 'Photo' },
errors: {
+11
View File
@@ -79,6 +79,17 @@ export default {
noPhotos: '照片即将上线',
newPhotos: '有新照片',
reduceMotion: '减少动画',
// —— UI-02(V04 深色大图查看器)新增 ——
photoViewer: '照片查看器',
photoPreview: '照片预览',
loadedCount: '已加载 {count} 张',
tapMore: '连续点击,为照片点赞',
download: '下载',
downloadBrowse: '浏览图',
downloadOriginal: '原图',
more: '更多选项',
thumbnails: '缩略图导航',
thumbItem: '第 {n} 张',
},
route: { tokenLabel: '相册令牌', photoLabel: '照片' },
errors: {