徽章墙 (badge-wall)

• 文件：web/src/pages/badge-wall/badge-wall.vue
• 路由：/badge-wall

页面职责

展示全部 30 枚徽章，按分类分组，支持查看徽章详情和解锁条件。

使用的 Store

• useAchievementStore：徽章数据（badges）、已解锁统计

核心功能

统计概览

• 吸顶进度条：已解锁 N / 30 枚徽章，百分比
• 进度条动画

分类徽章列表

• 按分类分组展示（学习、书写、游戏、复习、成就等）
• 每个分类显示：分类名称、颜色标识、已解锁/总数
• 徽章网格：3 列布局
• 已解锁徽章：彩色图标 + 名称
• 未解锁徽章：灰色滤镜 + 名称

徽章详情弹窗

• 点击徽章弹出底部详情面板
• 显示：徽章图标、名称、描述、解锁条件
• 已解锁显示解锁时间，未解锁显示进度

导航

• 返回按钮：回到成就主页