猫猫 v0.18.0:完成小猫书落地页与详情页视图重构
完成猫猫素材、猫猫档案与猫猫灵感在桌面端和移动端的视图重构,统一瀑布流、详情抽屉、响应式断点和图片预览交互。
猫猫手册 v0.18.0 完成小猫书落地页与猫猫档案详情页的整体视图收口:桌面端保留 PC 大屏体验,移动端以小猫书为主入口,并统一素材、档案、灵感三类视图的响应式表现。
落地页与瀑布流
- 重构桌面端与移动端的瀑布流布局,移动端稳定为双列视图,桌面端保持大屏素材浏览密度。
- 统一搜索栏、视图切换栏和筛选胶囊的边界、背景和留白,移除多余的外扩阴影与移动端不适用的入口。
- 素材筛选文案收束为「全部 / 明信片 / 未分类」,移动端隐藏不适合触屏操作的本地新增入口。
- 猫猫灵感图片预览保留外链、旋转、下载等必要操作,并隐藏移动端本地编辑与删除按钮。
猫猫档案详情页
- 桌面端完成图片区与文字区的分层布局,图片使用弧线蒙版,右侧统一承载故事档案、关系和基础信息。
- 移动端详情改为底部弹窗,顶部栏、4:3 图片容器、关系卡片和故事档案统一对齐宽度。
- 关系区域默认展示两条记录;不足时使用「待补充 / 未知」占位卡片,超过两条时支持横向浏览。
- 故事档案按内容长度处理显示,移动端滚动条默认隐藏,实际滚动时显示并在停止后自动隐藏。
- 详情页封面、卡片标题、区域与状态信息、作者文案和空故事提示统一口径。
数据与资源
- 更新猫咪档案、关系和素材数据,补充明确的家庭关系、好友关系及占位关系展示。
- 全量替换来财素材,并清理不再使用的灵感旧图资源。
- 优化素材缩略图与原图的加载关系,保留图片预览和下载时的原图能力。
UI 设计图留档








验证
npm run materials:validatenpm run build:localnode --check src/scripts/app/directory.jsnode --check src/scripts/app/gallery.jsgit diff --check