Skip to content

星球系列 (planet-series)

  • 文件:web/src/pages/planet-map/planet-series.vue
  • 路由:/planet-series?subCategory=<id>&planet=<planetKey>

页面职责

展示某个星球子分类下的汉字列表,支持按学习状态筛选,点击汉字进入书写练习。

使用的 Store

  • useCharacterStore:汉字数据(characters),按 subCategory 过滤
  • useUserStore:学习记录(records),用于判断每个汉字的学习状态

核心功能

学习进度条

  • 显示"已学习 N/M"和百分比
  • 进度条颜色继承系列主题色
  • 支持吸顶(sticky)效果

汉字网格

  • 以网格形式展示该系列下所有汉字
  • 每个汉字卡片显示:拼音、汉字、学习状态图标
  • 学习状态有三种:
    • learned:绿色对勾 ✓(maxScore ≥ 60)
    • failed:红色叉号 ✗(有记录但未达标)
    • 默认:无标记(未学习)
  • 点击汉字卡片进入书写练习页面(/write?from=planet-series

空状态

  • 当系列下无汉字数据时显示空状态提示

导航

  • 返回按钮:回到星球详情
  • 关闭按钮:回到星球地图