doodle-mini/docs/每日一练绘制重构方案.md

每日一练绘制服务重构方案

本项目对英语字母描红打卡服务（dailyCheckinDraw.ts）与拼音每日一练打卡服务（PinyinDailyDraw.ts）的绘制逻辑进行重构。主要目标是提取公共的 Header/Footer 绘制方法，统一绘制样式（字体、字号等与英语打卡一致），并在 Footer 引入随机鼓励语功能。

1. 重构目标

1. 样式与布局统一：
   • 提取每日练习每个 Section 的 Header（包含标题、日期/姓名输入横线）和 Footer（包含鼓励语、页码/天数）的绘制逻辑。
   • 所有字体、字号、颜色和边距均统一以 dailyCheckinDraw.ts 中的设计规范为准（原拼音打卡字体使用了 Microsoft Yahei，重构后统一使用 serif 字体，以与英语打卡一致）。
2. 随机鼓励语机制：
   • 在 Footer 中引入 20 条经典励志鼓励语（如“书山有路勤为径”、“日拱一卒 不期而至”等），不再固定显示单一短语，每次绘制时随机展示。
3. 移除拼音展示区：
   • 在 PinyinDailyDraw.ts 中完全移除原有的 drawSectionDisplay 绘制区域。
   • 相应调整拼音网格的起始高度，使其能够填满去除了展示区后的上方空白，以获得更好的排版空间。

---

2. 详细设计与实现方案

2.1 新增公共模块：dailyPracticeDrawHelper.ts

在 miniprogram/core/draw 目录下新建 dailyPracticeDrawHelper.ts，内容包含：

1. 统一布局常量：

   • SECTION_PADDING_TOP = 12
   • SECTION_PADDING_BOTTOM = 10
   • HEADER_TITLE_GAP = 32
   • HEADER_META_GAP = 22
   • CONTENT_TOP_GAP = 14
   • FOOTER_PHRASE_GAP = 26
   • FOOTER_INDEX_GAP = 22

2. 鼓励语词库：

   • 维护一个包含 20 条无标点符号的励志短语数组 ENCOURAGEMENT_PHRASES。
   • 提供 getRandomEncouragementPhrase(): string 方法进行随机抽取。

3. 通用绘制函数：

   • drawSectionHeader(ctx, rect, title): 绘制统一字体的 Header。
   • drawSectionFooter(ctx, rect, phrase, labelText): 绘制统一字体的 Footer。

2.2 英语打卡绘制服务重构：dailyCheckinDraw.ts

• 移除本地冗余定义的布局常量和绘制 Header/Footer 的私有方法。
• 引入 dailyPracticeDrawHelper.ts 的常量及绘制函数。
• 在 drawSection 方法中：
  1. 调用 getRandomEncouragementPhrase() 随机获取鼓励语。
  2. 调用 drawSectionHeader（标题传 "每日打卡"）。
  3. 调用 drawSectionFooter（索引标签传 "- ${section.pageNumber} -"）。

2.3 拼音打卡绘制服务重构：PinyinDailyDraw.ts

• 移除本地定义的布局常量及 drawSectionHeader / drawSectionFooter / drawSectionDisplay 等方法。
• 引入 dailyPracticeDrawHelper.ts 中的常量和绘制函数。
• 在 drawSectionGrid 方法中：
  • 将 contentTop 原来的 + 40 + 10 偏置去除，修正为与 dailyCheckinDraw.ts 完全一致的逻辑高度起点。这样能使网格向上延伸，充分填充空出的上方空间。
  • 实现多列拼音声调绘制逻辑（全部采用 TONEOZ_PINYIN 字体绘制）：
    • 5 列布局（字符长度 <= 2）：若 variants 不为空，则在绘制描红行时，第 1 列展示基础字符 char，第 2～5 列分别展示 variants 中带声调的拼音；若 variants 为空，则全部列均展示基础字符 char。
    • 4 列布局（字符长度 > 2）：共绘制 4 个非空行。其中第 1 行（Row 0）全列展示 variants[0]，第 2 行（Row 1）全列展示 variants[1]，第 3 行（Row 3）全列展示 variants[2]，第 4 行（Row 5）全列展示 variants[3]。
• 在 drawSection 方法中：
  1. 移除对 drawSectionDisplay 的调用。
  2. 调用 getRandomEncouragementPhrase() 随机获取鼓励语。
  3. 调用 drawSectionHeader（标题传 "拼音每日一练"）。
  4. 调用 drawSectionFooter（索引标签传 "第 ${dayIndex} 天"）。

---

3. 20 条鼓励语词库清单

重构方案中使用的鼓励语清单如下（均不带标点符号，排版更美观）：

1. 书山有路勤为径
2. 日拱一卒 不期而至
3. 宝剑锋从磨砺出
4. 梅花香自苦寒来
5. 业精于勤荒于嬉
6. 行百里者半九十
7. 锲而不舍金石可镂
8. 读万卷书行万里路
9. 滴水穿石非一日之功
10. 天下无难事只怕有心人
11. 熟能生巧功到自然成
12. 敏而好学不耻下问
13. 学而不思则罔
14. 思而不学则殆
15. 欲速则不达
16. 不积跬步无以至千里
17. 不积小流无以成江海
18. 温故而知新
19. 读书破万卷下笔如有神
20. 千里之行始于足下