write.vue — 书写练习页

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

职责

汉字书写练习页面，支持笔顺演示和手写描红两种模式。使用 WriteLayout 布局，集成 CharInfo、MiziGrid、HanziWriterCanvas 组件。

路由参数

参数	说明
char	汉字字符（默认 "日"）
mode	初始模式："animate"（笔顺演示）或 "quiz"（手写描红）
from	来源入口
category / subCategory	分类上下文
weakChars	薄弱字列表

核心功能

双模式

模式	说明
笔顺演示 (animate)	播放笔顺动画，显示播放/发音按钮，悬浮进度条
手写描红 (quiz)	描红练习，显示提示/重写/完成按钮，颜色图例

笔顺演示模式

• 左上角播放按钮，动画播放中不可重复点击
• 右上角发音按钮 + 多音字切换按钮
• 笔画进度条（第 X / Y 笔 + 进度条百分比）
• 通过 animateCharacter() 播放，完成后自动重置为轮廓

手写描红模式

• 提示按钮：高亮/取消，从 userStore.userData.settings.strokeHint 读取初始状态
• 重写按钮：重置描红，调用 resetAndRestartQuiz()
• 完成按钮：计算评分后跳转 /write-result
• 颜色图例：待描轮廓（灰 #e5e7eb）、当前提示（蓝 #3b82f6）、已描红笔画（黑 #1f2937）

模式切换

• 底部选项卡切换，切换时清空状态（动画定时器、当前笔画、答题结果、错误计数）
• 模式切换时 loading 重置为 true，触发 HanziWriterCanvas 重新加载

评分计算

• 调用 score-calculator.ts 的 calculateScore()
• 通过 userStore.addLearningRecord(char, "write", score) 记录学习记录
• 跳转 /write-result 时携带 from 上下文参数

导航

• 关闭按钮：按 from 参数返回上级页面（planet-series/review-stats/char-select/index）