积分商店 (shop)

• 文件：web/src/pages/shop/shop.vue
• 路由：/shop

页面职责

积分兑换商店，展示可兑换奖励列表和兑换历史，支持积分兑换和家长管理入口。

使用的 Store

• useShopStore：奖励列表（rewards）、可用积分（availablePoints）、兑换历史（shopHistory）、密码状态

核心功能

积分余额

• 显示当前可用积分（金币图标 + 数值）
• "如何获取积分？"链接跳转成就主页

可兑换奖励列表

• 展示 enabled === true 的奖励项
• 每项显示：图标（SVG）、名称、所需积分、兑换按钮
• 点击兑换按钮触发 shopStore.redeemReward(reward.id)
• 兑换成功：扣除积分，记录日志，提示成功
• 兑换失败（积分不足）：提示积分不足
• 无奖励时显示空状态（礼盒 SVG 插图）

兑换历史

• 展示最近兑换记录（最多 50 条）
• 每条记录：奖励名称、扣除积分、兑换时间

家长管理入口

• 底部按钮跳转 /shop-manage
• 如果已设置密码，需先验证密码

积分扣除流程

用户点击兑换 → redeemReward(rewardId)
  → 验证 reward 存在且 enabled
  → 验证 availablePoints ≥ reward.cost
  → 扣除积分
  → 生成 pointLog（type: "spend", source: "shop_exchange"）
  → 记录 shopHistory（保留最新 50 条）
  → 持久化到 Mock API