猪窝 v1.16.0:相簿页三层重构——书馆、章节书架与纸质翻页视图
猪窝把原「情侣相册」升级为「相簿」:三层结构(书馆书架 → 章节书架 → 翻页视图)+ 黑场书架视觉 + 纸质书页阅读体验,页面内容区全幅铺满浏览器。
猪窝 v1.16.0 以参考站点的「Photo Books Library」书架视觉为蓝本,把原「情侣相册」重做为一本可以逐层进入的书。页面更名「相簿」,内容区去掉 app-shell 限宽与四周留白,全幅铺满浏览器。
三层结构
- 第一层 · 书馆书架:黑场层板上立两本大部头——《我们》(炭黑书脊,8 章 · 40 对开页)与《它们》(橙色书脊,装订中占位)。头部统计
2 BOOKS / 8 CHAPTERS · 40 SPREADS · 80 MOMENTS / N PAGES FILLED,右上标语「给时间一个书架」。 - 第二层 · 章节书架:8 个章节各一册,按章节固定配色(绛红 / 橙 / 米白 / 灰蓝 / 藏蓝 / 品红 / 橄榄 / 炭黑),书脊竖排章节名并标注对开页范围,hover 气泡显示章节引言与已填数。
- 第三层 · 翻页视图:对开页宽度取
min(100cqw, 150cqh)(container query),正好一屏放下;顶部栏「← 章节 / 当前页标题 / VOL. XX / 40」,底部页码条 + 左右圆形箭头。
视觉与交互
- 书形(高度 / 宽度 / 书脊装饰)由页码做确定性伪随机,每次渲染一致;待填册降饱和区分。
- 原生
title气泡替换为跟随鼠标的米白纸片气泡,两段式(标题 + 详情),靠边自动收进屏幕。 - 翻页视图做纸质书页质感:整页
feTurbulence纸纹噪点与暗角、照片三种撕纸边缘clip-path轮换 + 褪色滤镜、粗黑印刷标题、图章式日期标签。 - 翻页支持点击书页左右两侧、触屏滑动、方向键;书页视图与书架视图均整页黑场(body 级主题切换)。
- 默认视图为书馆书架,不再恢复「翻页」;
?p=深链改为一次性读取并立即从地址栏清除,修复开发热重载后固定停留在翻页视图的问题。
实现
- 新增
src/components/tabs/AlbumShelf.astro(书架组件,书馆与章节两层复用同类视觉);CoupleAlbum.astro重写为四态视图切换(book / shelf / flip / pet)。 - 移除旧的对开页书架拖拽排序与顶部「书架 / 翻页」胶囊切换条;清理 flipbar、章节跳转与单本书封面等废弃样式。
- 版本号说明:本次发布曾误用 v1.15.0(该号已于 9/10 用于日程和财务发布),按仓库先例以追加提交修正为 v1.16.0。
UI 设计图留档
