character.vue — 汉字详情页

文件: web/src/modules/write/pages/character/character.vue | 路由: /character

职责

展示汉字的完整信息，包括拼音、发音、释义、例句、词组、字信息（笔画/部首/结构/分类/难度）、字源演变和字源故事。用户可点击"开始书写"进入书写练习。

路由参数

参数	说明
char	汉字字符
from	来源入口：char-select / planet-series / review-stats
category	分类 ID（from=planet-series 时）
subCategory	子分类 ID（from=planet-series 时）
weakChars	冻结的薄弱字列表 JSON（from=review-stats 时）

核心功能

汉字展示区

• 大字号汉字展示（100px，楷体字体）
• 拼音显示 + 多音字切换（右上角切换按钮，显示 1/N）
• 发音按钮（基于 resource-service.ts 的 playAudio()，支持 autoAudio 设置自动播放）
• 释义、例句、词组（随拼音切换联动更新）

选项卡

• 字信息：笔画数、部首、结构、分类、子分类、难度
• 字源演变：使用 EtymologyViewer 组件，支持字形图标步骤条
• 字源故事（条件显示）：支持结构化对象（标题 + 内容 + 互动问答）和纯文本

字源索引缓存

• 三层缓存策略：localStorage 持久化 > 内存缓存 > CDN 网络请求
• index.json 优先从 localStorage 读取，版本一致时跳过网络请求
• 缓存 key：tzxq_etymology_index_cache

HanziWriter 数据缓存

• LRU 缓存 + 访问频次保护，容量上限 30 字
• 运行时 _hwCache → localStorage 持久化（debounce 500ms）
• 淘汰策略：低频 + 老旧条目优先淘汰
• 缓存 key：tzxq_hw_cache

悬浮态

• 选项卡上滚到顶部时变为 sticky 固定定位
• 悬浮态下显示"开始书写"按钮在底部操作栏

导航

• 返回按钮：同入口返回上一步
• 关闭按钮：固定返回上级列表页（planet-series → /planet-series, review-stats → /review-stats, char-select → /char-select, 其他 → /index）
• "开始书写"跳转 /write?char=...&mode=quiz，携带 from 上下文