← 返回开发时间线

猫猫 v0.12.0:详情档案 - 悬浮窗与照片布局

猫猫手册在 v0.12.0 重做猫咪详情悬浮窗,将档案状态、胶囊标签和照片墙合并为连续内容,并针对桌面端与移动端分别整理照片网格、分页和窄屏布局。

2026-08-16

猫猫功能视觉

猫猫手册在 v0.12.0 优化猫咪详情档案与照片布局:桌面端和移动端的详情悬浮窗都改为档案信息与照片墙连续呈现,移除原先的「档案 / 照片」分栏切换,让打开猫咪详情后可以直接浏览完整档案和照片。

详情悬浮窗与档案胶囊

  • 桌面端详情继续以居中的悬浮窗展示,保留遮罩、圆角、阴影、滚动和关闭按钮;移动端改为距安全区域 12px 的顶部浮层,限制最大高度,避免详情面板撑出屏幕或产生横向溢出。
  • 将疫苗、绝育、抓捕 / 亲人、区域、性别和备注等信息整理为档案胶囊(状态 pill / tag),状态摘要保留悬停或聚焦查看完整记录的交互。
  • 胶囊在窄屏下保持单行横向滚动,不再因为标签过多挤压档案内容;备注也以可展开的「备注」胶囊呈现,和其他档案状态保持一致。

档案与照片合并

  • 详情悬浮窗移除原先的「档案 / 照片」Tab,改为上方档案胶囊、下方照片墙的连续结构;照片不再需要先点击 Tab 才能查看。
  • 桌面端照片墙使用 3 列网格(3×N),继续支持缩略图懒加载和点击查看原图;没有照片时显示统一的空状态及照片目录提示。
  • 照片墙与档案区域分别使用清晰的内容区块和间距,既保留悬浮窗的信息层级,也让档案与照片成为同一份猫咪详情记录。

移动端照片分页

  • 移动端照片墙改为 2 列网格,每页展示 6 张照片,即 2×3;照片数量超过 6 张时显示上一页、页码和下一页控件。
  • 打开详情时移动端从第 1 页开始,翻页只重新渲染照片区域并保持当前猫咪;切换到桌面布局或关闭详情时同步重置分页状态。
  • 监听窗口尺寸变化,在桌面端与移动端照片布局之间切换时重新计算可见照片,避免沿用错误的分页结果。

UI 设计图留档

  • 桌面端视图:desktop.png 展示详情悬浮窗、横向档案胶囊和 3 列照片墙。
  • 移动端视图:mobile.png 展示窄屏下的 2 列照片墙、横向标签和底部分页控件。

发布信息

  • 猫猫手册版本由 0.11.1 升至 0.12.0,同步更新 npm 元数据与锁文件。
  • 正式发布提交:b25c3bcf4da4def31847eecfc4b5319dfc15a8ce,提交标题为 feat: 优化猫猫详情档案与照片布局