feat(private-room): add image grid and swipe gallery

Render unlocked albums as adaptive nine-image grids and open the selected source image in the Gallery. Add pointer-driven swipe thresholds, edge resistance, animated snapping, adjacent-image loading, reduced-motion support, and coverage for filtering and navigation.
This commit is contained in:
2026-07-21 18:26:12 +08:00
parent 9deb320cf6
commit 9fff5b16fd
12 changed files with 822 additions and 101 deletions
+8 -2
View File
@@ -208,13 +208,19 @@ Paywall 导航发起后立即消费当前请求,避免 React 重渲染重复
任一条件不满足时,页面通过 replace 删除 `album``image`,并保留其他查询参数。
页面内点击打开 Gallery 时,关闭操作优先使用浏览器 back;直接刷新或外部分享 Gallery URL 时,关闭操作使用 replace 返回当前角色 Private Room。键盘 Escape 关闭,左右方向键和横向滑动切换图片。
页面内点击九宫格缩略图时,Gallery 从该图片的后端数组原始索引打开。关闭操作优先使用浏览器 back;直接刷新或外部分享 Gallery URL 时,关闭操作使用 replace 返回当前角色 Private Room。
Gallery 只浏览 `locked=false` 且 URL 非空的图片,但 URL 中的 `image` 仍使用原始数组索引。横向拖动时图片跟随指针,达到视口宽度 18%(最低 56px),或达到 0.45px/ms 且至少移动 24px 时切换;首尾越界拖动使用 0.28 阻尼且不循环。松手后使用 240ms 横向吸附动画,键盘方向键和左右按钮复用相同切换逻辑。Escape 关闭;`prefers-reduced-motion` 下取消吸附过渡。
## 7. UI 与数据边界
- React key 使用稳定 `albumId`
- 卡片图片数量优先使用 `imageCount`,为 0 时回退到 `images.length`
- Gallery 只渲染当前索引存在 URL 的图片
- 锁定相册继续只显示模糊封面和解锁入口
- 解锁相册过滤锁定或空 URL 图片,并保留剩余图片的原始数组索引;
- 1 张图片显示 4:5 大图,2/4 张使用两列,其余使用三列正方形九宫格;
- 超过 9 张时卡片显示前九张,末格显示 `+N`,Gallery 仍可浏览全部有效图片;
- Gallery 只挂载当前图片和相邻图片,避免多图相册同时解码全部原图;
- `creditBalance` 是当前列表/解锁响应快照,不替代 User Store 权益;
- Private Room 不使用 Chat 的 `conversationKey`、消息缓存或媒体缓存;
- Private Room 不持有 Payment ActorTop-up 通过路由级导航进入独立 Payment Provider。