Skip to content

星球详情 (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(子分类)
  • 每个分类显示:图标、名称、汉字数量、难度星级
  • 点击分类卡片跳转到对应分类的汉字选择页面

导航

  • 返回按钮:回到星球地图
  • 关闭按钮:回到星球地图列表