星球详情 (planet-detail)
- 文件:
web/src/pages/planet-map/planet-detail.vue - 路由:
/planet-detail?planet=<planetKey>
页面职责
展示单个星球的详细信息,包括 3D 星球封面预览、学习进度统计、分类系列列表,是用户深入了解和进入星球学习的入口。
使用的 Store
usePlanetStore:星球数据(planets)、子系列配置useUserStore:学习记录(records),用于计算学习进度
核心功能
3D 星球封面
- 使用
CoverGalaxy组件渲染 3D 星球预览,与轨道地图星球外观一致 - 根据
planetKey动态加载对应的星球颜色和光晕配置
学习进度条
- 显示该星球下已学习汉字数 / 总汉字数
- 百分比进度条,颜色随星球主题变化
- 进度条支持吸顶(sticky)效果,滚动时固定在导航栏下方
汉字分类列表
- 展示星球下所有
sub_series(子分类) - 每个分类显示:图标、名称、汉字数量、难度星级
- 点击分类卡片跳转到对应分类的汉字选择页面
导航
- 返回按钮:回到星球地图
- 关闭按钮:回到星球地图列表