character.ts — 汉字 Store

文件: web/src/stores/character.ts

职责

• 汉字数据加载（500 个汉字）
• 分类和星球数据管理
• 分类过滤和关键词搜索
• 提供汉字、分类、星球的查询方法

依赖

无外部 Store 依赖。

数据加载

• load(): 通过 3 个 API 并行加载：
  • api.get<{ list: Character[] }>("/characters", { pageSize: 500 }) — 汉字列表
  • api.get<Category[]>("/characters/categories") — 分类列表
  • api.get<Planet[]>("/planets") — 星球列表
• 初始化时自动调用。

核心数据结构

interface Character {
  char: string
  category_id: string
  pinyin?: string
  words?: string[]
  [key: string]: unknown
}

interface Category {
  id: string
  [key: string]: unknown
}

interface Planet {
  id: string
  name: string
  category_id: string
  sub_series?: Array<{
    sub_category_id: string
    name: string
    [key: string]: unknown
  }>
  [key: string]: unknown
}

Reactive State

属性	类型	说明
characters	Ref<Character[]>	全部汉字列表
categories	Ref<Category[]>	全部分类列表
planets	Ref<Planet[]>	全部星球列表
activeCategory	Ref<string>	当前选中的分类筛选（默认 "all"）
searchKeyword	Ref<string>	当前搜索关键词
loading	Ref<boolean>	加载状态
filteredChars	ComputedRef<Character[]>	按分类 + 关键词过滤后的汉字列表

方法

数据加载

方法	签名	说明
load	() => Promise<void>	并行加载汉字、分类、星球数据

查询方法

方法	签名	返回值	说明
getChar	(char: string) => Character | undefined	汉字对象	按字符获取单个汉字详情
getCharsByCategory	(categoryId: string) => Character[]	汉字数组	按分类 ID 获取所有汉字
getCategory	(categoryId: string) => Category | undefined	分类对象	按 ID 获取分类
getPlanet	(planetId: string) => Planet | undefined	星球对象	按 ID 获取星球配置
getPlanetByCategory	(categoryId: string) => Planet | undefined	星球对象	按分类 ID 查找所属星球

过滤与搜索

方法	签名	说明
search	(keyword: string) => void	设置搜索关键词（自动重置分类为 "all"）
setCategory	(categoryId: string) => void	设置分类筛选（自动清除搜索关键词）

过滤逻辑（filteredChars computed）

1. 先按 activeCategory 过滤（"all" 不过滤）
2. 再按 searchKeyword 过滤（匹配 char、pinyin、words）