← 返回开发时间线

猫猫 v0.17.0:详情悬浮窗重构

猫猫手册将猫咪详情悬浮窗重构为宽屏双栏档案视图,整合照片墙、基础信息、故事、关系与动态,并统一暖色视觉和交互行为。

猫猫手册 v0.17.0 完成猫咪详情悬浮窗重构:从连续纵向信息改为宽屏双栏档案视图,让照片、基础信息、故事、关系和动态可以在同一面板中分区呈现。

详情面板布局

  • 顶部身份栏统一展示正式名称、性别图标、状态胶囊、别名和关闭按钮,并加入轻量的校园祝福文案。
  • 左栏承载首图、缩略图照片墙和 2×2 基础信息卡;区域使用猫爪图标,绝育和疫苗信息采用对应本地插画,具体日期通过悬停气泡查看。
  • 右栏承载故事档案、正式关系和猫咪动态;各组件统一使用图标、大号标题、暖米色背景和加粗边框。

关系与动态交互

  • 正式关系使用结构化 relationships 数据,故事提及信息不进入关系视觉;没有关系时保留“待补充”容器。
  • 关系卡支持点击切换到对应猫咪详情,并根据对称关系和亲子关系语义生成双向展示。
  • 动态按日期从新到旧排序,默认显示最近 3 条,可展开查看全部;第一版展示日期、标题和文字,不渲染动态图片。

实现留档

  • 增加详情悬浮框的视觉布局、组件组成和分步实现规范。
  • 新增性别、关系、绝育和疫苗图标等本地 UI 资产,避免依赖外部 CDN。

UI 设计图留档

猫猫 v0.17.0 详情悬浮窗重构:带动态的双栏视图布局