商品列表页
搜索 + IP 筛选 + 瀑布流浏览积分商品，状态差异化展示，点卡片进入详情；底部吸底余额条常驻。商品为 24 款真实衍生品积分商品（素材 D:\万漫社\03-C衍生品，各商品文件夹内方图/长图）+ 4 款极端场景测试数据（T01-T04，仅演示样式）。
商品详情页
橱窗封面图 + 价格卡 + 信息卡 + 兑换说明 + 商品详情长图（meitu 切图/分割图片/整图竖向拼接）+ 底部操作栏；在售「立即兑换」弹出底部规格选择悬浮窗，预售「通知我」订阅，售罄置灰。发售状态由发售时间自动判定：发售时间>当前=预售，≤当前=在售，临近 ≤24h 触发抢票倒计时。兑换流程：兑换悬浮窗内带「收货地址」卡片（默认地址自动带出，可点开切换/新增），确认兑换需有地址，兑换成功后自动生成发货订单（含地址快照，可在我的订单-发货订单查看）；成功弹窗只提示「已生成发货订单」，不重复展示收货信息。
商品列表页
| 模块 | 内容 | 数据来源 |
|---|---|---|
| 顶部导航 | 粉色渐变头部：居中标题「积分商城」（无返回）、小程序胶囊 | 固定（小程序统一） |
| 搜索栏 | 独立一行（IP 筛选下方），玻璃胶囊，名称模糊查询 | 商品名称字段 |
| IP 筛选栏 | 胶囊行（全部+IP logo）+ 展开抽屉（方形按钮网格）+ 蒙版 | 商品 IP 字段去重 |
| 商品瀑布流（2 列） | 状态差异化卡片：方图、毛玻璃状态标签/新品、限购锁徽标、名称、价格+剩余库存、预售发售时间水印 | D:\万漫社\03-C衍生品 各商品文件夹（24 真实 + 4 测试） |
| 积分余额条（吸底） | 纯色主粉胶囊（v2.5 去渐变）：钻石图标 + 我的积分 + 余额（24px）+ 白底粉字「兑换记录」按钮；点击左侧余额区或「兑换记录」均跳转「我的积分」落地页 | 用户积分账户（示例 12,800） |
| 底部 Tab | 首页 / 积分商城 / 抽卡机 / 直播手册 / 我的（均跳 /latest/） | 小程序导航 |
商品详情页
| 模块 | 内容 | 数据来源 |
|---|---|---|
| 顶部导航 | 商品图沉浸背景（封面图 + 深色渐变遮罩），返回/居中标题/小程序胶囊浮于图上 | 商品封面图 |
| 商品橱窗 | 封面商品图（单图），无叠加标签（左上状态标签已移除） | cover 字段 |
| 价格 + 标题卡 | 上浮覆盖图片底部：名称（18px）、价格（预告无价格）+状态标签（在售浅粉底深粉字/预售/预告/售罄，虚线底分隔）+新品标签（与在售并存时仅新品）、粉底元信息条（品种 chips 白底深粉描边 / 发售时间 / 库存+已兑数 / 限购 / 退货说明），已删除独立规格表 | 积分商品表 |
| 兑换说明 | 卡片样式，7 条规则 | 固定文案 |
| 限购说明卡 | 价格卡下方浅粉提示卡：锁图标 + 限购发货说明文字 | 固定文案，仅限购商品显示 |
| 商品详情卡片 | 白卡 + 「商品详情」标题，用商品长图填充 | detail 字段 |
| 底部操作栏 | 左：收藏/客服图标；右：合计 + 兑换/通知我/敬请期待/已售罄按钮；在售点击「立即兑换」弹出底部「选择规格」悬浮窗（含收货地址卡片） | 售卖状态 |
| 收货地址（v2.6） | 兑换悬浮窗内地址卡片：默认地址自动带出（收件人/手机号/省市区/详细地址）；点开「选择收货地址」抽屉可切换/新增；无地址显示「请选择收货地址」 | localStorage wms_addresses（与我的地址页共享） |
商品列表页
搜索（名称模糊）+ IP 筛选（胶囊行 + 抽屉展开）浏览积分商品；两列瀑布流 + 状态差异化展示（在售/预售/预告/售罄）；限购商品锁徽标；卡片显示剩余库存；预售「通知我」订阅；排序：新品最前 → 在售 → 预售 → 预告 → 售罄；底部吸底余额条常驻。
商品详情页
橱窗多图 + 价格卡 + 信息卡 + 兑换说明 + 商品详情长图 + 底部操作栏；在售「立即兑换」→ 底部弹出「选择规格」悬浮窗 → 步进器选数量 → 确认兑换（校验库存/限购/积分/收货地址）；预售显示发售时间与倒计时（临近 ≤24h 红色秒级跳动），归零自动切在售；预告「敬请期待」置灰、隐藏价格；售罄「已售罄」置灰；限购商品价格卡下方显示「限购说明卡」（本产品为限购产品，将根据下单顺序依次发货，售完为止，后续开放购买时间将另行通知）；「不支持7天无理由退还」警示红加粗。v2.6：兑换需选择收货地址（默认地址自动带出，可切换/新增），确认兑换后自动生成发货订单（地址快照，写入 localStorage mysteryOrders，我的订单-发货订单可查看）。
商品列表页
商品详情页
D:\万漫社\03-C衍生品\{商品文件夹}\，服务端路由 /derivative-img/。商品列表页
| 操作 | 行为 | 影响范围 |
|---|---|---|
| 搜索 | 名称模糊实时过滤（不区分大小写），与 IP 筛选叠加；✕ 清空 | 商品列表 |
| IP 筛选 | 胶囊选中/再点取消回全部；展开抽屉（方形按钮）看全部 IP；蒙版关闭 | 商品列表、筛选状态 |
| 点击卡片 | 进入商品详情页 | 视图切换 |
| 点余额条/兑换记录 | 跳转「我的积分」落地页（/原型/万漫社/miniApp/我的积分/latest/） | 路由跳转 |
商品详情页
| 操作 | 行为 | 影响范围 |
|---|---|---|
| 返回 | 回列表页并关闭悬浮窗 | 视图切换 |
| 立即兑换（在售） | 底部弹出「选择规格」悬浮窗 → 步进器选数量（含合计 + 剩余积分）→ 「确认兑换」校验余额/限购/库存 → 直接扣积分、减库存、同步更新已兑数 → 「兑换成功」弹窗（无二次确认）；提交期间按钮变「兑换中…」禁用（防连点，防止同一时间重复下单） | 积分余额、库存、售卖状态、兑换总数 |
| 通知我（预售） | 切换订阅状态，toast 提示「已开启通知，发售时将提醒您」；已通知可取消；临近发售 ≤24h 时发售行显示倒计时，归零自动变「立即兑换」 | 订阅状态、倒计时状态 |
| 售罄/预告 | 按钮置灰不可点（已售罄/敬请期待） | 兑换按钮 |
商品列表页
| 状态 | 完成 |
|---|---|
| 默认 | ✅ 骨架屏 400ms 后渲染瀑布流 |
| Loading | ✅ 骨架屏闪烁 |
| Empty | ✅ 空态插画+文案（搜索时「未找到相关商品」，IP 筛选时「暂无该 IP 的积分商品」） |
| Error | ✅ 图片 onerror 兜底 |
| 在售 | ✅ 彩色图 + 深粉价格 + 新品粉渐变标签；卡片无按钮 |
| 预售 | ✅ 粉氛围渐变 + 深粉「预售」标签 + 图片底部发售时间水印；临近 ≤24h 水印变红色倒计时「距开售 HH:MM:SS」；卡片无按钮 |
| 预告 | ✅ 白底粉边「预告」标签 + 「??? 积分」；卡片无按钮 |
| 售罄 | ✅ 白纱遮罩 + 灰「售罄」标签 + 价格变灰，排最后；卡片无按钮 |
商品详情页
| 状态 | 完成 |
|---|---|
| 在售 | ✅ 绿色✓「在售」标签、详情信息完整、「立即兑换」→底部弹出选择规格悬浮窗→校验→直接兑换成功（无二次确认）→「兑换成功」弹窗 |
| 预售 | ✅ 详情信息+发售时间（临近≤24h 显示红色大号倒计时+日期）、「通知我」铃铛按钮；归零自动切「立即兑换」 |
| 预告 | ✅ 标题卡「即将发售」、无价格、按钮置灰「敬请期待」 |
| 售罄 | ✅ 库存 0、按钮置灰「已售罄」 |
| 限购达上限 | ✅ 悬浮窗内步进器 + 置灰 + toast 提示 |
| 积分不足 | ✅ toast 提示 |
| 页面 | 按钮/操作 | 场景 | 提示 |
|---|---|---|---|
| 列表页 | 兑换 | 积分不足 | toast「积分不足」 |
| 详情页 | 立即兑换 | 限购达上限 | 悬浮窗步进器置灰 + toast 提示 |
| 详情页 | 立即兑换 | 库存为 0 | 按钮置灰「已售罄」 |
| 列表页 | 搜索 | 无匹配商品 | 空态「未找到相关商品」 |
| 列表页 | IP 筛选 | 该 IP 无积分商品 | 空态「暂无该 IP 的积分商品」 |
| 列表页/详情页 | 图片加载 | 图片加载失败 | onerror 兜底图 |