← 返回开发时间线

猪窝 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 设计图留档

书架视图 UI 留底