猫猫 v0.13.0:首页视觉与目录分页
猫猫手册在 v0.13.0 集中收束首页的移动端与桌面端视觉:压缩移动端首屏、重做目录工具栏与排序浮窗,并让猫咪照片目录按实际网格列数保持三行分页。
2026-08-19
猫猫手册在 v0.13.0 完成一轮首页视觉整理与目录交互升级,重点处理移动端信息密度、桌面端照片墙分页,以及名称、区域和最近照片三种分类方式。
首页视觉收束
- 移动端首页从「猫猫手册」直接进入主要内容,隐藏持续档案、起始记录说明、目录英文标记和照片统计副说明,减少首屏纵向占用。
- 移动端移除精选目录,统计条压缩为单行;封面说明替换为「让每一次相遇,都被好好记住。」,底部感谢语与分页距离同步收紧,并以小猫爪替代爱心。
- 移动端目录改为两列照片卡片,搜索框隐藏占位符;工具栏保留搜索与筛选,并增加排序入口。
目录分类与分页
- 移动端排序浮窗提供「名称排序」「区域排序」「最近更新」三项;最近更新依据猫咪档案中新增照片的记录日期排序。
- 移动端目录每页展示 6 张照片,即 2×3;桌面端根据当前 CSS 网格列数自动计算为三行,例如 1280px 视口为 5×3、带侧栏的宽屏视口为 6×3。
- 搜索、筛选、排序和窗口尺寸变化都会重新计算目录页容量并回到第 1 页,避免沿用错误的分页状态;桌面端保持排序入口隐藏,移动端交互独立呈现。
UI 设计图留档
以下图片直接展示本次首页视觉和交互态,不需要点击文件名才能看到:
- 桌面端交互态:第 1 页与第 2 页分别保留,能直接看到分页后的 6×3 目录变化。
- 移动端布局态:记录两列照片宫格、压缩后的搜索工具栏和排序入口。
- 移动端排序态:记录排序浮窗以及“最近更新”选择后的目录结果;详情态补充猫咪档案悬浮窗的标签筛选与分页。
发布信息
- 猫猫手册版本由
0.12.0升至0.13.0,同步更新 npm 元数据与锁文件。 - 正式发布提交:
9983e740baa5109c494280f80b34bfd3533903df,提交标题为feat(v0.13.0): 重构猫猫手册首页视觉与目录分页。