diff --git a/docs/每日一练绘制重构方案.md b/docs/每日一练绘制重构方案.md new file mode 100644 index 0000000..eeecc92 --- /dev/null +++ b/docs/每日一练绘制重构方案.md @@ -0,0 +1,87 @@ +# 每日一练绘制服务重构方案 + +本项目对英语字母描红打卡服务（`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. 千里之行始于足下 diff --git a/miniprogram/assets/fonts/demo_index.html b/miniprogram/assets/fonts/demo_index.html index e7a886f..ea78ad2 100644 --- a/miniprogram/assets/fonts/demo_index.html +++ b/miniprogram/assets/fonts/demo_index.html @@ -54,6 +54,24 @@