卡牌收集
0%
已收集 0/0
赏品收集
0%
已收集 0/0
卡牌
赏品
全部亲签印签限编隐藏普卡
去发货
去收集
进度区
1
返回
返回上一页（原型示意）
2
收集进度
卡牌 / 赏品收集进度条（百分比 + 剩余数量），粉/金双进度条；进度百分比 = 已收集卡牌数 / 卡牌总数
Tab 切换
3
卡牌 / 赏品
两 Tab 切换视图，切换时重置筛选，选中高亮
类型筛选
4
类型 chips
按卡位类型筛选网格（全部/亲签/印签/限编/隐藏/普卡），选中高亮
卡片网格
5
卡牌卡片
未收集灰度 + 灰框；已收集彩色 + 主题色边框；点击弹出大图
6
印章角标
右下角标记卡位类型（普/限/印/印限/签/隐），已收集彩色渐变，未收集灰色
大图弹窗
7
弹窗大图
点卡片弹出大图，左右箭头 / 触摸横滑切换上一张下一张，点蒙版关闭
赏品
8
赏品卡
12 款赏品平铺展示（不按品类分组），卡片无名称（与卡牌统一）、无已收集徽标；名称在弹窗内显示（单款=品类名，多款式=品类名 · 款式）
📋 说明面板 / 开发交付文档 — 图鉴 v2.6▶
📌 功能概述

一句话

《伊索寓言》第二弹图鉴页 = 展示卡牌 / 赏品的收集进度与收集状态（已收集 / 未收集、印章标记）。

页面说明

顶部粉色进度区：卡牌 / 赏品收集进度条（百分比 + 剩余数）+ 返回 + 标题；Tab 切换「卡牌 / 赏品」；卡位类型图例 chips（普卡 / 限编卡 / 印签卡 / 印签限编卡 / 亲签限编卡 / 隐藏卡等）筛选；卡牌 3 列网格展示 402 卡面收集状态（未收集灰度、已收集彩色 + 印章角标）；点卡片弹出大图详情（左右滑动切换）；赏品 Tab 平铺展示 12 款赏品（不分组、无已收集徽标、卡片无名称，名称在弹窗显示）。

🧱 页面结构
模块内容数据来源
进度区粉色头部：返回 + 标题「图鉴」+ 胶囊；卡牌 / 赏品收集进度卡（百分比 + 进度条 + 剩余）收集数据（mock）
Tab 栏卡牌 / 赏品 两 Tab，选中高亮固定
类型图例卡位类型 chips（普卡/限编卡/印签卡/印签限编卡/亲签限编卡/隐藏卡等），可筛选卡位类型枚举
卡牌网格3 列网格：402 卡面，未收集灰度 / 已收集彩色 + 印章角标（普/限/印/印限/签/隐）伊索寓言第二弹卡面数据（mock）
赏品区12 款赏品卡片平铺展示（不按品类分组），卡片无名称（与卡牌统一，名称在弹窗显示）；无已收集徽标赏品数据（12 款，mock）
大图弹窗点卡片弹出：大图 + 左右导航箭头 + 触摸滑动切换 + 点击蒙版关闭当前卡面/赏品数据
📋 功能说明（需求）

① 收集进度：卡牌 / 赏品分开统计，进度条 + 百分比 + 剩余数量展示；② 类型筛选：按卡位类型 chips 过滤网格，选中高亮；③ 收集状态：未收集卡片灰度 + 灰框，已收集卡片彩色 + 主题色边框，右下角印章标记卡位类型；④ 大图查看：点卡片弹出大图，左右箭头 / 触摸滑动切换，点蒙版关闭；⑤ 赏品展示：平铺展示全部赏品（不分组），无已收集徽标。

🖱️ 交互行为
操作页面行为
Tab 切换卡牌 / 赏品视图切换，选中 Tab 高亮
类型 chips点击筛选网格（选中高亮），再次点击取消
点卡片弹出大图详情弹窗（当前卡面/赏品）
弹窗左右滑动触摸横滑或点箭头 → 切换上一张/下一张（navigatePopup）
点弹窗蒙版关闭大图弹窗
返回返回上一页（原型示意）
📐 数据口径

卡面 402 张（47 卡位，卡编 YSYY2-卡位ID-编号 001~402）；赏品 6 款（十二生肖视觉日历 YSYY2-SP-01 等）；收集状态为 mock（已收集/未收集随机分布演示）；卡位类型 7 类（普卡/限编卡/印签卡/印签限编卡/亲签限编卡/隐藏卡/隐藏限编卡）。

❌ 错误提示清单
页面按钮/操作场景提示
图鉴卡片加载图片加载中/失败（原型示意）加载占位旋转动画（img-loading）
图鉴弹窗滑动边界（首张/末张继续滑，原型示意）循环或停留（原型示意）
🔲 状态说明
状态说明完成情况
默认卡牌 Tab + 全部类型，网格完整展示✅ 已实现
未收集卡片灰度 + 灰框 + 灰色印章（miss）✅ 已实现
已收集卡片彩色 + 主题色边框 + 彩色渐变印章✅ 已实现
图片加载占位旋转动画✅ 已实现
空数据筛选无结果（原型示意）🔲 未模拟
🔄 版本更新日志▶